*
{
    margin: 0;
    padding: 0;
}

.body
{
    overflow-x: hidden;
}

.header
{
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    height: 50px;
    background-color: #3b5998;
    justify-content: space-between;
}
    .header .left
    {
        flex-basis: 20%;
        min-width: 200px !important;
        background-color: #6b86be;
        color: white;
        position: relative;
        display: flex;
        padding: 20px;
        padding-top: 0;
        padding-bottom: 0;
    }
        .header .left h3
        {
            margin: auto;
            font-family: sans-serif;
        }
        
    .header .right
    {
        color: white;
        display: flex;
    }
        .header .right div
        {
            margin: auto;
            margin-right: 10px;
        }
        
        .header .right a
        {
            color: white;
            font-family: sans-serif;
            text-decoration: none;
            font-size: 0.9em;
        }

.body
{
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    overflow-y: none !important;
}
    .body .left-sidebar
    {
        flex-basis: 20%;
        min-width: 200px !important;
        background-color: #8b9dc3;
        min-height: 730px;
        height: auto;
        padding: 20px;
        padding-top: 0;
        position: relative;
    }
        .body .left-sidebar ul li
        {
            list-style: none;
            margin: 25px;
        }
            .body .left-sidebar ul li div 
            {
                width: 100%;
                height: 25px;
                position: relative;
                display: flex;
            }
            .body .left-sidebar ul li img
            {
                width: 25px;
                flex-basis: 25px;
                filter: invert(100%);
                margin: auto;
                margin-left: 0;
                margin-right: 10px;
            }
            
            .body .left-sidebar ul li a
            {
                color: 	#f7f7f7;
                font-family: sans-serif;
                font-size: 1em;
                text-decoration: none;
                margin: auto;
                margin-left: 0;
            }
    
    .body .content
    {
        width: 80% !important;
        overflow-y: none !important;
        min-height: 700px;
        height: auto;
        position: relative;
        padding: 40px;
        padding-top: 20px;
        margin: auto !important;
    }
        .body .content h3
        {
            font-family: sans-serif;
            color: #666;
            font-size: 1.3em;
        }
        
        .body .content .subtitle
        {
            margin-top: 3px;
            font-size: 0.8em;
            color: #777;
            font-family: sans-serif;
        }
        
        .body .content .inner-content
        {
            margin-top: 30px;
            color: #444;
            font-family: sans-serif;
        }
        
        .body .content .inner-content .form-tambah
        {
            width: 100%;
            position: relative;
        }
        
            .body .content .inner-content .form-tambah .input-group 
            {
                width: 100%;
                margin-top: 10px;
                margin-bottom: 10px;
                position: relative;
                display: flex;
            }
            
            .body .content .inner-content .form-tambah .input-group input
            {
                height: 40px;
                width: 100%;
                padding: 5px 5px 5px 10px;
                border: none;
                background-color: #dfe3ee;
                font-family: sans-serif;
                color: #333;
            }
            
            .body .content .inner-content .form-tambah .input-group textarea
            {
                min-height: 300px;
                width: 100%;
                padding: 5px 5px 5px 10px;
                border: none;
                background-color: #dfe3ee;
                font-family: sans-serif;
                color: #333;
            }
            
            .body .content .inner-content .form-tambah .input-group input[type="file"]
            {
                display: none;
            }
            
            .body .content .inner-content .form-tambah .input-group label 
            {
                height: 40px;
                padding: 0;
                background-color: #dfe3ee;
                border: none;
                display: flex;
                width: 100%;
                margin: 0 !important;
            }
            
            .body .content .inner-content .form-tambah .input-group label:hover
            {
                cursor: pointer;
            }
            
            .body .content .inner-content .form-tambah .input-group label p
            {
                color: #666;
                font-size: 0.8em;
                font-family: sans-serif;
                flex: 3;
                margin: auto 10px;
            }
            
            .body .content .inner-content .form-tambah .input-group label span
            {
                flex: 1;
                flex-basis: 1%;
                max-width: 100px;
                height: 100%;
                overflow: hidden;
                margin: auto;
                margin-right: 5px;
                padding: 0;
                display: flex;
                background-color: #8b9dc3;
            }
            
            .body .content .inner-content .form-tambah .input-group label span img
            {
                height: 70%;
                margin: auto;
                filter: invert(100%);
            }
            
            
    .body .content .inner-content .form-tambah .input-group input[type="submit"]
    {
        margin-right: 10px;
        width: 90px;
        height: 35px;
        background-color: #8b9dc3;
        color: white;
        padding: 8px 6px 8px 6px;
        font-family: sans-serif;
    }
    
    .body .content .inner-content hr
    {
        margin: 20px 0;
    }
    