.container-main{
    max-width: 1440px;
    margin: auto;
    width: 100%;
}
body{
    background: #F4F5FA !important;
}
.bg{
    background: #F4F5FA;
}
/* Sidebar */
aside{
    background: rgb(0,212,255);
    background: linear-gradient(0deg, rgba(0,212,255,1) -56%, rgba(6,54,106,1) 0%, rgba(9,83,165,1) 100%);
    width: 135px;
    border-radius: 4px;
    -webkit-box-shadow: 1px 2px 12px 1px rgba(9,77,153,0.42);
    -moz-box-shadow: 1px 2px 12px 1px rgba(9,77,153,0.42);
    box-shadow: 1px 2px 12px 1px rgba(9,77,153,0.42);
}
aside{
    -webkit-box-shadow: 1px 2px 12px 1px rgba(9,77,153,0.42);
    -moz-box-shadow: 1px 2px 12px 1px rgba(9,77,153,0.42);
    box-shadow: 1px 2px 12px 1px rgba(9,77,153,0.42);
}
/* Hide scrollbar for Chrome, Safari and Opera */
aside::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE and Edge */
  aside {
    -ms-overflow-style: none;
  }

/* Text  */
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

/* Font size */
.f11{
    font-size: 11px;
}
.f12{
    font-size: 12px;
}
.f13{
    font-size: 13px;
}
.f14{
    font-size: 14px;
}
.f15{
    font-size: 15px;
}
.f16{
    font-size: 16px;
}
.f17{
    font-size: 17px;
}
.f18{
    font-size: 18px;
}
.f20{
    font-size: 20px;
}
.f22{
    font-size: 22px;
}
.f23{
    font-size: 23px;
}
.f24{
    font-size: 24px;
}
.f26{
    font-size: 26px;
}
.f28{
    font-size: 28px;
}
.f30{
    font-size: 30px;
}
.f32{
    font-size: 32px;
}
.f34{
    font-size: 34px;
}
.f36{
    font-size: 36px;
}
.f38{
    font-size: 38px;
}
.f42{
    font-size: 42px;
}
.f44{
    font-size: 44px;
}
.f46{
    font-size: 46px;
}
.f48{
    font-size: 48px;
}
.f50{
    font-size: 50px;
}
.f52{
    font-size: 52px;
}
.f54{
    font-size: 54px;
}
.f56{
    font-size: 56px;
}


.tgray{
    color: #707D8A;
}
.tdarkgray{
    color: #BABFC7;
}
.tblack{
    color: #464855;
}
/* Background */

/* Shape */
.shadow1{
    -webkit-box-shadow: 7px 2px 17px 0px rgba(0,0,0,0.22);
    -moz-box-shadow: 7px 2px 17px 0px rgba(0,0,0,0.22);
    box-shadow: 7px 2px 17px 0px rgba(0,0,0,0.22);
}

.bggray{
    background: rgb(221, 221, 221);
}

/* Other */
.pointer{
    cursor: pointer;
}
.notifcount{
    border-radius: 50%;
    background: #F23AC3;
    box-shadow: 0 0 10px #F23AC3;
}

.table-custom{
    width: 100%;
}
.table-custom th, .table-custom td{
    padding: 20px;
}
.table-custom th, .table-custom td{
    color: #555555;
    font-size: 14px;
}
.table-custom thead tr{
    border-bottom: 3px solid #F4F5FA;
}
.table-custom tbody tr{
    border-bottom: 2px solid #F4F5FA;
}

.materi-button{
    color: white;
    font-size: 16px;
}
.materi-button:hover{
    background: rgb(8, 92, 160) !important;
}

.notif-tab a:last-child div{
    border-bottom: none !important;
}

.mp-tab{
    background: rgb(0,212,255);
    background: linear-gradient(0deg, rgba(0,212,255,1) -56%, rgba(212,212,212,1) 0%, rgba(230,230,230,1) 100%);
}

.mp-tab:hover{
    background: rgb(0,212,255);
    background: linear-gradient(0deg, rgba(0,212,255,1) -56%, rgb(207, 207, 207) 0%, rgb(211, 211, 211) 100%);
}