: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-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;
}

/* 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;
}

/* 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-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-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;
}

@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;
    }
}

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