/* ===========================================================
   MA ALHUDA PAMEUNGPEUK GREEN EDITION
   Dibuat khusus untuk Sistem Absensi
   =========================================================== */

:root{

--ma-primary:#24abe4;
--ma-dark:#101111;
--ma-hover:#50a9a9;
--ma-light:#ece3e3;
--ma-border:#367996 ;
--ma-gold:#19c4da;
--ma-text:#2e5d66;

}

/* ===================================================== */

body{

background:var(--ma-light)!important;
color:var(--ma-text);

}

/* ==================== LINK ==================== */

a,
.text-primary{

color:var(--ma-text) !important;

}

a:hover{

color:var(--ma-dark)!important;

}

/* ==================== BUTTON ==================== */

.btn-primary{

background:var(--ma-primary)!important;
border-color:var(--ma-text) !important;

}

.btn-primary:hover{

background:var(--ma-hover)!important;
border-color:var(--ma-text) !important;

}

.btn-success{

background:#43b2e2!important;
border-color:#FFFFFF!important;

}

.btn{

border-radius:10px!important;

transition:.25s;

}

/* ==================== CARD ==================== */

.card{

border:none!important;

border-radius:15px!important;

box-shadow:0 10px 30px rgba(246, 242, 242, 0.952)!important;

}

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

.card .card-header-primary{

background:linear-gradient(60deg,#43b2e2,#5b92d6)!important;

box-shadow:0 8px 18px rgba(246, 242, 242, 0.952) !important;
}

.sidebar {
    background: #fff !important;
}

.sidebar .nav li > a {
    color: #2d3748 !important;
}

.sidebar .nav li > a p {
    color: #2d3748 !important;
}

.sidebar .nav li > a i {
    color: #5b5b5b !important;
}

.sidebar .nav li.active > a {
    color: #fff !important;
}

.sidebar .nav li.active > a p {
    color: #fff !important;
}

.sidebar .nav li.active > a i {
    color: #fff !important;
}php 
/* ==================== NAVBAR ==================== */

.navbar{

background:white!important;
   
box-shadow:0 2px 15px rgba(0,0,0,.08);

}

/* ==================== TABLE ==================== */

.table thead{

background:#43b2e2;

color:white;

}

.table-hover tbody tr:hover{

background:#edf8f0!important;

}

/* ==================== INPUT ==================== */

.form-control:focus{

border-color:#f30c0c!important;

box-shadow:0 0 0 .2rem rgba(47, 37, 37, 0.952)!important;

}

/* ==================== CHECKBOX ==================== */

.checkbox input[type=checkbox]:checked+.checkbox-material .check{

background:#36687f!important;

border-color:#24abe4!important;
}

/* ==================== RADIO ==================== */

.radio input[type=radio]:checked~.circle{

border-color:#24abe4!important;

}

.radio input[type=radio]:checked~.check{

background:#178fa4!important;

}

/* ==================== SWITCH ==================== */

.togglebutton label input[type=checkbox]:checked+.toggle{

background:#248e98!important;

}

.togglebutton label input[type=checkbox]:checked+.toggle:after{

border-color:#24abe4!important;

}

/* ==================== BADGE ==================== */

.badge-primary{

background:#248e98!important;

}

/* ==================== PAGINATION ==================== */

.pagination>.active>a{

background:#366ab3!important;

border-color:#24abe4!important;

}

/* ==================== PROGRESS ==================== */

.progress-bar-primary{

background:#248e98!important;

}

/* ==================== MODAL ==================== */

.modal-header{

background:#248e98;

color:white;

}

/* ==================== ALERT ==================== */

.alert-success{

background:#d4edda;

color:#178fa4;

border:none;

}

/* ==================== SPINNER ==================== */

.spinner{

border-color:#24abe4!important;

}

.spinner-bounce>div{

background:#178fa4!important;

}
/* ===========================
   SIDEBAR PUTIH
=========================== */

.sidebar{
    background:#fff !important;
    background-image:none !important;
}

.sidebar .sidebar-background{
    background:#000000 !important;
    background-image:none !important;
}

/* ===============================
   Logo Sidebar
=================================*/

.sidebar .logo{
    padding:25px 15px;
    text-align:center;
    border-bottom:1px solid #e5e7eb;
}

.sidebar .logo img{
    width:85px;
    transition:.3s;
}

.sidebar .logo img:hover{
    transform:scale(1.05);
}

.sidebar .logo h5{
    margin-top:12px;
    font-weight:700;
    color:#24abe4;
    letter-spacing:.5px;
}

.sidebar .logo small{
    display:block;
    color:#64748b;
    font-size:12px;
}

.sidebar .logo .badge{
    margin-top:10px;
    font-weight:600;
    background:#24abe4 !important;
    color:#fff;
    padding:8px 18px;
    border-radius:25px;
}

.sidebar .nav-link{
    color:#333 !important;
}

.sidebar .material-icons{
    color:#555 !important;
}

.sidebar .nav-link p{
    color:#ffffff !important;
}

.sidebar .nav-item.active>a{
    background:#87CEEB !important;
    color:#fff !important;
}

.sidebar .nav-item.active>a .material-icons,
.sidebar .nav-item.active>a p{
    color:#111 !important;
}