:root {
    --cs-primary: #0178bc;
    --cs-secondary: #0890df;
    --cs-lighter: #ebf2fa;
}

* {
    font-family: "Roboto", sans-serif;
}

body {
    font-size: 12px !important;
}

.main_content_iner.overly_inner::before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 230px;
    z-index: -1;
    background: linear-gradient(91.25deg,
            var(--cs-secondary) 0%,
            var(--cs-primary) 100%) !important;
    content: "";
    border-radius: 0;
    left: 0;
}

#main-wrapper .left-sidebar[data-sidebarbg="skin5"],
#main-wrapper .left-sidebar[data-sidebarbg="skin5"] ul {
    background-color: white !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link.active i,
.sidebar-nav ul,
.sidebar-nav ul .sidebar-item.selected>.sidebar-link i {
    color: #ffff !important;
}

.sidebar-nav ul .sidebar-item.selected .sidebar-item.active .sidebar-link.selected {
    background: #c1e0f1;
    margin: 5px 15px;
    opacity: 1;
    border-radius: 10px 10px;
    color: var(--cs-primary) !important;
}

.sidebar-nav ul .sidebar-item.selected .sidebar-item.active .sidebar-link.selected i {
    color: var(--cs-primary) !important;
}

.sidebar-nav ul .sidebar-item.selected .sidebar-item.active .sidebar-link.active i,
.sidebar-nav ul .sidebar-item.selected .sidebar-item.active .sidebar-link.active .hide-menu {
    color: var(--cs-primary) !important;
}

.sidebar-nav ul .sidebar-item.selected .sidebar-item.active .sidebar-link.active {
    background: #c1e0f1;
    margin: 5px 15px;
    opacity: 1;
    border-radius: 10px 10px;
}

.left-sidebar {
    width: 220px !important;
}

#main-wrapper[data-sidebartype="full"] .page-wrapper {
    margin-left: 220px;
}

.topbar .top-navbar .navbar-header .navbar-brand-full {
    width: 220px !important;
}

.logo-full {
    max-height: 35px !important;
}

.topbar .top-navbar .navbar-header .navbar-brand-mini {
    width: 60px !important;
    margin-left: 5px !important;
}

.logo-mini {
    max-height: 20px !important;
}

.sidebar-nav .has-arrow:after {
    border-color: #888889 !important;
    right: 25px;
}

.sidebar-nav ul .sidebar-item.selected .has-arrow:after {
    border-color: #ffff !important;
}

.sidebar-nav ul .sidebar-item.selected .has-arrow.active i {
    color: #ffff !important;
}

.sidebar-nav ul .sidebar-item .has-arrow.active i {
    color: #888889 !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link,
.sidebar-nav ul .sidebar-item .sidebar-link i {
    color: #888889 !important;
    font-size: 14px;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover,
.sidebar-item .sidebar-link:hover i {
    color: var(--cs-primary);
}

.sidebar-nav ul .sidebar-item .sidebar-link.active,
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
    opacity: 1;
}

.sidebar-nav ul .sidebar-item.selected>.sidebar-link {
    color: #ffff !important;
    background: var(--cs-primary);
    margin: 0px 15px;
    opacity: 1;
    border-radius: 10px;
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link i {
    font-size: 10px;
    color: #fff !important;
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link {
    margin: 5px 15px;
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link .hide-menu {
    font-size: 14px;
    font-weight: 600;
}

#main-wrapper .topbar .top-navbar .navbar-header[data-logobg="skin5"] {
    background: #fff;
}

#navbarSupportedContent {
    background: #fff !important;
}

.topbar .top-navbar .navbar-nav>.nav-item:hover {
    background: none;
}

.logo-text {
    color: var(--cs-primary);
}

.bg-main {
    background-color: var(--cs-primary);
    color: #fff;
}

.bg-main:hover {
    background-color: #0467a0;
    color: #fff;
}

.text-main {
    color: var(--cs-primary);
}

.border-primary {
    border-color: var(--cs-primary) !important;
}

.badge-success {
    background: #ebfaec;
    border: 1px solid #d0f2d3;
    color: #457348;
    border-radius: 5px;
}

.badge-warning {
    background: #FFF7ED;
    border: 1px solid #ffddb3;
    color: #F97316;
    border-radius: 5px;
}

.badge-danger {
    background: #fff0f1;
    border: 1px solid #f5bcc4;
    color: #e0364f;
    border-radius: 5px;
}

.badge-secondary {
    background: #c8c5c5;
    border: 1px solid #c8c5c5;
    color: #6f767e;
    border-radius: 5px;
}

.badge-info {
    background: #e1f0fa;
    border: 1px solid #b3d8f7;
    color: #3178c6;
    border-radius: 5px;
}

/* Notification */

.topbar .mailbox {
    min-width: 400px;
}

.notification-button i,
.notification-icon i {
    color: #6f767e;
    font-size: 1.5em;
}

.notification-button .blip {
    background-color: #ff6a55;
    border-radius: 50%;
    bottom: 45px;
    height: 8px;
    left: 14px;
    position: relative;
    transition: 0.2 ease-in-out;
    width: 8px;
}

.notification-icon .blip {
    background-color: #ff6a55;
    border-radius: 50%;
    bottom: 23px;
    height: 8px;
    left: 25px;
    position: relative;
    transition: 0.2 ease-in-out;
    width: 8px;
}

.notification-button .blip.hide {
    opacity: 0;
}

.notify-time {
    font-size: 10px;
}

.rounded-m {
    border-radius: 5px !important;
}

.rounded-xl {
    border-radius: 10px !important;
}

.form-control {
    font-size: 12px !important;
}

.form-control-sm,
.form-control {
    border-radius: 6px !important;
}

.form-group label {
    font-style: normal;
    font-weight: 400 !important;
    font-size: 12px;
    color: #2d3748;
}

.cctv-filter .form-group label {
    color: #fff;
}

.desc-msg label {
    font-style: bold;
    font-weight: 600 !important;
}

/* Table */
.tb-head-first {
    border-top-left-radius: 10px !important;
}

.tb-head-last {
    border-top-right-radius: 10px !important;
}

.table> :not(caption)>*>* {
    border: 0 !important;
}

/* DATATABLES */
div.dataTables_processing {
    position: fixed;
    /* ubah dari absolute ke fixed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* pusatkan di layar */
    width: auto;
    height: auto;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: none;
    /* defaultnya hidden */
    justify-content: center;
    align-items: center;
    font-weight: bold;
}


div.dataTables_processing[style*="display: block"] {
    display: flex !important;
}

/* Modal */

.modal-content {
    background-color: #f2f5f8;
}

.card-main {
    background-color: var(cs-lighter);
    border-radius: 24px;
}

.card-addons {
    /* width: 11.5rem; */
    /* position: relative; */
}

.card-header-addons {
    background: linear-gradient(91.25deg, var(--cs-primary) 0%, #005281 100%);
    border-radius: 6px 6px 0px 0px;
    padding: 10px;
    position: relative;
}

.card-body-addons {
    background: #fff;
    border-radius: 0px 0px 6px 6px;
    padding: 10px;
}

.add-ons-img {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: auto !important;
}

/* common */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    border: 5px solid #2980b9;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 300px;
    padding: 5px 0;
    background: linear-gradient(152.92deg, #ffa800 16.92%, #d08900 93.43%);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    font: 700 10px/1 "Lato", sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center;
}

/* top right*/
.ribbon-top-right {
    top: 0px;
    right: 0px;
}

.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}

.ribbon-top-right::before {
    top: 0;
    left: 0;
}

.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}

.ribbon-top-right span {
    left: -25px;
    top: 15px;
    transform: rotate(45deg);
}

/* Button */

.btn-main {
    color: #fff;
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
}

.btn-main:hover {
    color: #fff;
    background-color: var(--cs-secondary);
    border-color: var(--cs-secondary);
}

.btn-main.focus,
.btn-main:focus {
    color: #fff;
    background-color: var(--cs-secondary);
    border-color: var(--cs-secondary);
    -webkit-box-shadow: 0 0 0 0.2rem lighten(var(--cs-primary), 50%);
    box-shadow: 0 0 0 0.2rem lighten(var(--cs-primary), 50%);
}

.btn-main.disabled,
.btn-main:disabled {
    color: #fff;
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
}

.btn-main:not(:disabled):not(.disabled).active,
.btn-main:not(:disabled):not(.disabled):active,
.show>.btn-main.dropdown-toggle {
    color: #fff;
    background-color: var(--cs-secondary);
    border-color: var(--cs-secondary);
}

.btn-main:not(:disabled):not(.disabled).active:focus,
.btn-main:not(:disabled):not(.disabled):active:focus,
.show>.btn-main.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem lighten(var(--cs-primary), 20%);
    box-shadow: 0 0 0 0.2rem lighten(var(--cs-primary), 20%);
}

.btn-outline-main {
    color: var(--cs-primary);
    border-color: var(--cs-primary);
}

.btn-outline-main:hover {
    color: #fff;
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
}

.btn-outline-main.focus,
.btn-outline-main:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(1, 120, 188, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(1, 120, 188, 0.5);
}

.btn-danger-2 {
    color: #fff;
    background-color: #b83a16;
    border-color: #b83a16;
}

.btn-danger-2:hover {
    color: #fff;
    background-color: #c54c2a;
    border-color: #c54c2a;
}

.btn-danger-2.focus,
.btn-danger-2:focus {
    color: #fff;
    background-color: #c54c2a;
    border-color: #c54c2a;
    -webkit-box-shadow: 0 0 0 0.2rem #c54c2aa4;
    box-shadow: 0 0 0 0.2rem #c54c2aa4;
}

.btn-danger-2.disabled,
.btn-danger-2:disabled {
    color: #fff;
    background-color: #b83a16;
    border-color: #b83a16;
}

.btn-danger-2:not(:disabled):not(.disabled).active,
.btn-danger-2:not(:disabled):not(.disabled):active,
.show>.btn-danger-2.dropdown-toggle {
    color: #fff;
    background-color: #7a321e;
    border-color: #7a321e;
}

.btn-danger-2:not(:disabled):not(.disabled).active:focus,
.btn-danger-2:not(:disabled):not(.disabled):active:focus,
.show>.btn-danger-2.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem #86341da2;
    box-shadow: 0 0 0 0.2rem #86341da2;
}

/* Pagination */

.page-item .page-link {
    border-radius: 8px !important;
    border-color: #f1f7ff !important;
    background-color: #f1f7ff !important;
}

.page-item.active .page-link {
    background-color: var(--cs-primary) !important;
    border-color: var(--cs-primary) !important;
}

.paginate_button {
    margin: 0 5px;
}

.mini-sidebar .sidebar-nav ul .sidebar-item .sidebar-link.active {
    margin: 0px 5px;
}

.mini-sidebar .sidebar-item.mn {
    margin-left: 1rem !important;
}

@media (max-width: 1199.98px) {
    .sidebar-nav ul .sidebar-item .sidebar-link.active {
        margin: 0px 5px;
    }

    .sidebar-item.mn {
        margin-left: 1rem !important;
    }
}

.swal2-html-container {
    margin: 0 !important;
}

.swal2-close {
    font-size: 14px !important;
    top: 10px;
}

.bg-red {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.swal2-popup {
    width: 25em !important;
}

.guide-step {
    border: 2px solid var(--cs-primary);
}

.guide-step .driver-popover-title {
    font-size: 16px !important;
}

.guide-step .driver-popover-footer button {
    border: 1px solid var(--cs-primary) !important;
    color: var(--cs-primary) !important;
    font: 14px / normal sans-serif !important;
    background-color: transparent !important;
}

.guide-step .driver-prev-btn {
    display: none !important;
}

.card-main {
    background-color: rgba(1, 120, 188, 0.08);
    color: var(--cs-primary);
    padding: 20px;
    border-radius: 10px;
}

.btn-white {
    color: var(--cs-primary);
    background-color: #fff;
    border-color: #fff;
}

.text-white {
    color: #fff;
}


.alert-dismissible .btn-close {
    padding: 1rem !important;
}

.info {
    color: #0178bc;
    background: #d2e3ed;
    padding: 10px;
    border-radius: 8px;
    width: fit-content;
    margin-top: 15px;
}

.btn-bri-primary {
    background-color: #0178BC;
    color: #fff;
    border-radius: 4px;
    padding: 6px, 8px, 6px, 8px;
    font-size: 14px;
}

.btn-bri-primary:hover {
    background-color: #0890DF;
    color: #fff;
}

.btn-bri-download {
    background-color: #3F8B3C;
    color: #fff;
    border-radius: 4px;
}

.title-table {
    position: absolute;
}

.text-blue {
    color: #0178BC;
}

.btn-import-quota {
    position: absolute;
    margin-left: 100px;
}

.buttons-excel,
.btn-import {
    border-radius: 6px !important;
    font-size: 12px !important;
}

#customSearchBox,
#customSearchBtn,
#clearSearchBtn {
    font-size: 12px !important;
    height: 32px !important;

}

#customSearchBox {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#clearSearchBtn,
#customSearchBtn {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

#clearSearchBtn:focus {
    box-shadow: none !important;
}

.button-search-table {
    width: 300px;
}

@media (min-width: 768px) {
    #main-wrapper[data-layout=vertical][data-sidebartype=mini-sidebar] .left-sidebar {
        width: 65px !important;
    }
}

@media screen and (max-width: 800px) {
    .btn-import-quota {
        position: relative;
        width: 100%;
        display: block;
        margin-left: 0;
    }

}

@media screen and (max-width: 768px) {
    .header-table {
        display: flex;
        flex-direction: column;
        /* justify-content: center;
        align-items: center; */
    }

    .button-search-table {
        width: 100%;
    }

    .button-export-import {
        display: flex;
        justify-content: space-between;
    }
}

@media screen and (max-width: 400px) {
    #clearSearchBtn {
        display: none;
    }

    #customSearchBtn {
        border-top-right-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
}

.card-main-password {
    background-color: #FFFFFF;
}