*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI;
}

body{
    background:#f4f6f9;
}

#main-content{
    padding:25px;
    min-height:calc(100vh - 75px);
    background:#f4f6f9;
    overflow:auto;
}


/* ======================== */
/* LAYOUT */
/* ======================== */

.layout{
    display:flex;
}


/* ======================== */
/* SIDEBAR */
/* ======================== */

.sidebar{
    width:270px;
    min-height:100vh;
    background:#1e2430;
    transition:.35s;
    overflow:hidden;
    position:fixed;
    left:0;
    top:0;
    z-index:100;
}

.sidebar.close{
    width:85px;
}


/* ======================== */
/* LOGO */
/* ======================== */

.logo{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.logo-big{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo-big img{
    width:50px;
    margin-left: 0px;
}

.logo-big span{
    color:rgb(233, 233, 233);
    font-size:12px;
    font-weight:600;
}

.logo-small{
    display:none;
}

.logo-small img{
    width:42px;
}

.sidebar.close .logo-big{
    display:none;
}

.sidebar.close .logo-small{
    display:block;
}


/* ======================== */
/* MENU */
/* ======================== */

.menu{
    list-style:none;
    padding:16px 0 20px 12px;
}


/* ======================== */
/* MENU GROUP */
/* ======================== */

.menu-group{
    margin:8px 12px 4px 0 !important;
    padding:0 !important;
}


/* ======================== */
/* GROUP TITLE */
/* ======================== */

.menu-group-title{
    height:38px !important;
    padding:0 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    border-radius:7px !important;
    color:#8f98a8 !important;
    background:transparent !important;
}

.menu-group-title:hover{
    background:#2b3342 !important;
    color:#d7d7d7 !important;
}

.group-name{
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
}

.group-arrow{
    width:auto !important;
    min-width:auto !important;
    font-size:9px !important;
    transition:.25s;
}


/* ======================== */
/* SUBMENU */
/* ======================== */

.submenu{
    list-style:none;
    display:none;
    padding:3px 0 2px 0;
}

.dropdown-group.open .submenu{
    display:block;
}

.dropdown-group.open .group-arrow{
    transform:rotate(180deg);
}


/* ======================== */
/* SUBMENU ITEM */
/* ======================== */

.submenu li{
    margin-bottom:3px !important;
}

.submenu li a{
    height:43px !important;
    padding:0 14px 0 20px !important;
    gap:13px !important;
    border-radius:7px !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.submenu li a i{
    width:20px !important;
    min-width:20px !important;
    font-size:15px !important;
}


/* ======================== */
/* ACTIVE SUBMENU */
/* ======================== */

.submenu li.active a{
    background:#7b1e25;
    color:white;
}

.submenu li.active a::before{
    left:-12px;
    width:4px;
}


/* ======================== */
/* PENGATURAN */
/* ======================== */

.menu-setting{
    margin-top:14px !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.07);
}


/* ======================== */
/* COLLAPSE SIDEBAR */
/* ======================== */

.sidebar.close .menu-group-title{
    justify-content:center !important;
    padding:0 !important;
}

.sidebar.close .group-name,
.sidebar.close .group-arrow{
    display:none !important;
}

.sidebar.close .submenu{
    display:block;
}

.sidebar.close .submenu li a{
    justify-content:center !important;
    padding:0 !important;
}

.sidebar.close .menu-setting{
    margin-right:12px !important;
}


/* group pertama tidak terlalu jauh dari Dashboard */

.menu-group:first-of-type{
    margin-top:14px;
}


/* ======================== */
/* MENU ITEM */
/* ======================== */

.menu li:not(.menu-group){
    margin-bottom:5px;
    font-size:12px;
    font-weight:bold;
}

.menu li a{
    display:flex;
    align-items:center;
    gap:16px;
    color:#d7d7d7;
    text-decoration:none;
    height:48px;
    border-radius:8px 0 0 8px;
    padding:0 18px;
    transition:.25s;
    position:relative;
}

.menu li a i{
    width:26px;
    min-width:26px;
    text-align:center;
    font-size:17px;
}

.menu li a:hover{
    background:#2b3342;
    color:white;
}

.menu li.active a{
    background:#7b1e25;
    color:white;
}

.menu li.active a::before{
    content:"";
    position:absolute;
    left:-12px;
    width:5px;
    height:100%;
    border-radius:0 4px 4px 0;
    background:#ff4d4d;
}


/* ======================== */
/* PENGATURAN */
/* ======================== */


/* ======================== */
/* SIDEBAR COLLAPSE */
/* ======================== */

.sidebar.close span{
    display:none;
}

.sidebar.close .menu li a{
    justify-content:center;
    padding:0;
    gap:0;
}

.sidebar.close .menu-group{
    display:none;
}

.sidebar.close .menu{
    padding-left:12px;
    padding-right:0;
}

.sidebar.close .menu li:not(.menu-group){
    margin-bottom:5px;
}

.sidebar.close .menu-setting{
    margin-right:12px !important;
}


/* ======================== */
/* MAIN */
/* ======================== */

.main{
    margin-left:270px;
    width:calc(100% - 270px);
    transition:.35s;
}

.main.full{
    margin-left:85px;
    width:calc(100% - 85px);
}


/* ======================== */
/* HEADER */
/* ======================== */

.header{
    height:75px;
    background:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

#toggleMenu{
    width:42px;
    height:42px;
    border:none;
    background:#f3f3f3;
    border-radius:10px;
    cursor:pointer;
    font-size:18px;
}

.right{
    display:flex;
    align-items:center;
    gap:20px;
}

.right img{
    width:42px;
    height:42px;
    border-radius:50%;
}

.right i{
    font-size:20px;
}