/*Global CSS*/

.switch-mode,
#bg_color_switcher,
#color_switcher {
    position: absolute;
    right: 15px;
}

.dark-mode {
    background-color: rgba(24, 64, 93, 1);
    color: rgba(255,255,255,1);
}

.light-mode {
    background-color: rgba(233,233,233,1);
    color: rgba(51,51,51,1) !important;
}
  

.dark-mode .navbar {
    background-color : rgba(5, 35, 57, 1) !important;
    color: rgba(64, 73, 79, 1);
}

.dark-mode .sidebar {
    background-color : rgba(5, 35, 57, 1) !important;
}


.dark-mode .sidebar .user-info {
    background: url(/AdminBSB/images/user-img-background-dark.jpg) no-repeat no-repeat;
    background-size: cover;
}

.dark-mode .sidebar .menu .list a,
.dark-mode .sidebar .menu .list a span {
    color: rgba(255,255,255,1);
}

.dark-mode .card .header,
.dark-mode .card .body {
    background-color : rgba(5, 35, 57, 1) !important;
    color: rgba(255,255,255,1);

}

.dark-mode .input-group-addon {
    background-color: transparent !important;
    border-color: transparent !important;
}

.dark-mode .card .body .form-control {
    background-color : transparent !important;
    color: rgba(255,255,255,1);
}

.dark-mode .card .body .form-control option {
    color: rgba(51,51,51,1) !important; 
}

.dark-mode .card .header h2 {
    color: rgba(255,255,255,1);
}

.dark-mode .card.card-header .header h4 {
    color: rgba(255,255,255,1);
}

.dark-mode .table,
.dark-mode .dataTable-table {
  border-color: rgba(64, 73, 79, 1);
  color: rgba(238,238,238,1);
}

.light-mode .table,
.light-mode .dataTable-table {
  color: rgba(51,51,51,1) !important;
}

.dark-mode .table-bordered,
.dark-mode .table-bordered thead tr th,
.dark-mode .table-bordered tbody tr td,
.dark-mode .table-bordered tfoot tr th {
  border: 1px solid rgba(64, 73, 79, 1) !important;
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg : rgba(2,22,36,1);
  background-color: rgba(2,22,36,1);
  color: rgba(238,238,238,1);
}

.dark-mode .table th,
.dark-mode .dataTable-table th {
  background-color: rgba(3,26,42,1);
}

.dark-mode .table-hover > tbody > tr:hover,
.dark-mode .dataTable-table > tbody > tr:hover {
  background-color: rgba(3,26,42,1);
  color: rgba(238,238,238,1);
}

.dark-mode tr.lunas td {
color: rgba(35, 245, 8, 1);
}

.dark-mode tr.batal td {
    color: rgba(255,177,0,1);
}

button.close {
    text-shadow: 0 1px 0 #000;
    opacity: 1;
}

button.close i {
    color: #3ccd69 !important;
    margin: 5px 0px 5px 20px;
}

button.close:hover {
    opacity: 1;
}

.dark-mode .modal.in .modal-content {
    background-color : rgba(5, 35, 57, 1) !important;
}
  
.dark-mode .modal.in .btn-close {
    background-color: rgba(255,255,255,1);
}

.dark-mode .modal.in .modal- table {
    color: rgba(255,255,255,1);
}

.dark-mode .pagination > .disabled > span,
.dark-mode .pagination > .disabled > span:hover,
.dark-mode .pagination > .disabled > span:focus,
.dark-mode .pagination > .disabled > a,
.dark-mode .pagination > .disabled > a:hover,
.dark-mode .pagination > .disabled > a:focus {
    background-color : rgba(5, 35, 57, 1) !important;
    color: rgba(255,255,255,1);
}

.dark-mode .pagination > li > a,
.dark-mode .pagination > li > span {
    background-color : rgba(5, 35, 57, 1) !important;
    color: rgba(255,255,255,1);
    border: none !important;
}

.dark-mode .pagination > .active > a,
.dark-mode .pagination > .active > span,
.dark-mode .pagination > .active > a:hover,
.dark-mode .pagination > .active > span:hover,
.dark-mode .pagination > .active > a:focus,
.dark-mode .pagination > .active > span:focus {
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
}

.dark-mode .nav-tabs > li > a:hover,
.dark-mode .nav-tabs li.active a,
.dark-mode .nav-tabs li.active a:hover {
    background-color : rgba(5, 35, 57, 1) !important;
    color: rgba(255,255,255,1) !important;
}

.dark-mode .datepicker.dropdown-menu {
    background-color : rgba(2,22,36,1) !important;
}

.dark-mode .prev:hover,
.dark-mode .datepicker-switch:hover,
.dark-mode .next:hover,
.dark-mode .day:hover {
    color: rgba(51,51,51,1) !important;
    background-color: rgba(255,255,255,1) !important; 
}

.dark-mode .btn:hover, .btn:focus, .btn.focus {
    color: rgba(255,255,255,1) !important;
}

.dark-mode .sidebar .menu .list a span.ml-level-2 {
    color: #ffffff !important;
}

.dark-mode a {
    color: rgba(35, 245, 8, 1);
}

.dark-mode .add_info {
    color: rgba(35, 245, 8, 1);
}

.dark-mode .checkbox-list {
    color: rgba(51,51,51,1) !important; 
}

.dark-mode .datepicker-days .table-condensed .disabled.day {
    color: rgb(154, 154, 154) !important; 
}
/*Akhir Global CSS*/
@media only screen and (min-width: 768px) {

    section.content {
        margin: 70px 10px 0 315px;
    }

    .sub-section {
        background-color: rgba(255, 255, 255, 1);
        min-height: calc(100vh - 120px);
        padding: 10px;
        margin-bottom: 30px;
    }

    .ls-closed .navbar {
        left: 0px;
    }

    .navbar {
        left: 300px;
    }

    .navbar-header {
        height: 50px;
        padding-top: 0px;
    }

    .ls-closed .bars:after, .ls-closed .bars:before {
        top: 8px;
    }

    .overlay-open .navbar {
        left: 300px;
    }

    .sidebar {
        overflow: overlay;
        top: 0px;
        height: 100vh;
    }

    .sidebar .menu .list .header {
        height: 50px;
        padding-left: 0px;
    }

    .sidebar .menu .list a {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .sidebar .legal {
        position: relative;
    }

    .sidebar .menu {
        height: auto;
    }

    .sidebar .user-info .info-container .user-helper-dropdown {
        bottom: -0px;
    }

    .list .divider {
        height: 1px;
        margin: 5px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    .dashboard-stat-list {
        margin-top: 0px;
    }

    .mk_blink {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
    }

    @keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }
    @-webkit-keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }

    .ls-closed section.content {
        margin-left: 10px;
    }

    .container-fluid {
        padding-right: 5px;
        padding-left: 5px;
    }


    .dataTables_wrapper .dt-buttons {
        margin-bottom: 20px;
    }

   
    .dataTables_length {
        margin-bottom: 10px;
    }

    #DataTables_Table_0_length {
        display: inline-block;
        width: 50%;
    }

    #DataTables_Table_0_filter {
        display: inline-block;
        width: 50%;
    }
        
    .btn-circle-sm {
        border: none;
        outline: none !important;
        overflow: hidden;
        width: 30px;
        height: 30px;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        -ms-border-radius: 50% !important;
        border-radius: 50% !important;
    }

    .btn-circle-sm i {
        font-size: 18px !important;
        position: relative !important;
        left: -5px !important;
        top: 0px !important;
    }

    .flip-horizontal {
      -webkit-transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1);
    }
}






@media only screen and (max-width: 767px) {
    @media (orientation:portrait) {
    }
    @media (orientation:landscape) {
    }

    .sidebar {
        overflow: overlay;
        top: 60px;
        height: calc(100vh - 65px);
    }

    .sidebar .menu .list .ml-menu li a {
        padding-left: 55px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .sidebar .legal {
        position: relative;
    }

    .sidebar .menu {
        height: auto;
    }

    section.content {
        margin: 80px 10px 0 315px;
    }

    .ls-closed section.content {
        margin-left: 10px;
    }

    .container-fluid {
        padding-right: 5px;
        padding-left: 5px;
    }

    .dataTables_wrapper .dt-buttons {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .list .divider {
        height: 1px;
        margin: 5px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    .dashboard-stat-list {
        margin-top: 0px;
    }

    .mk_blink {
        animation: blink-animation 1s steps(5, start) infinite;
        -webkit-animation: blink-animation 1s steps(5, start) infinite;
    }

    @keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }
    @-webkit-keyframes blink-animation {
        to {
            visibility: hidden;
        }
    }

    #DataTables_Table_0_length {
        display: inline-block;
        width: 50%;
    }

    #DataTables_Table_0_filter {
        display: inline-block;
        width: 50%;
    }
        
    .btn-circle-sm {
        border: none;
        outline: none !important;
        overflow: hidden;
        width: 30px;
        height: 30px;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        -ms-border-radius: 50% !important;
        border-radius: 50% !important;
    }

    .btn-circle-sm i {
        font-size: 18px !important;
        position: relative !important;
        left: -5px !important;
        top: 0px !important;
    }

    .flip-horizontal {
      -webkit-transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1);
    }
}