:root {
    --cctv-theme-1: #e4335c;
    --cctv-theme-2: #ff4d6d;
    --cctv-theme-3: #ff758f;
    --cctv-theme-4: #ff8fa3;
    --cctv-theme-5: #ffaab9;
    --cctv-theme-6: #ffdee4;
    --disabled-theme-1: #f48c06;
    --disabled-theme-2: #faa307;
    --disabled-theme-3: #fdb10d;
    --disabled-theme-4: #ffc533;
    --disabled-theme-5: #FFD15C;
    --mis-map-theme-1: #003459;
    --mis-map-theme-2: #005980;
    --mis-map-theme-3: #007ea7;
    --mis-map-theme-4: #00a8e8;
    --mis-map-theme-5: #44C1EE;
    --label-theme-1: #084922;
    --label-theme-2: #0A6630;
    --label-theme-3: #0E9747;
    --label-theme-4: #12C85D;
    --label-theme-5: #16DB65;
    --blue: #0d6efd;
    --indigo: #6610f2;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #0072A3;
    --primary-bg-hover: #0099CC;
    --primary-sh-hover: #D6F5FF;
    --success: #00B834;
    --success-bg-hover: #00CC3A;
    --success-sh-hover: #C2FFD3;
    --info: #0AA3C2;
    --info-bg-hover: #0CC4E9;
    --info-sh-hover: #D8F7FD;
    --warning: #FFD417;
    --warning-bg-hover: #FFDD47;
    --warning-sh-hover: #FFF4C2;
    --danger: #F52A2A;
    --danger-bg-hover: #F75050;
    --danger-sh-hover: #FDD8D8;
    --inverse: #14082d;
    --inverse-bg-hover: #260F57;
    --inverse-sh-hover: #D9CBF6;
    --purple: #6f42c1;
    --purple-bg-hover: #8965CD;
    --purple-sh-hover: #DCD1F0;
    --pink: #d63384;
    --pink-bg-hover: #DD5599;
    --pink-sh-hover: #F8DDEB;
}

/*GLOBAL Theme*/

html, body {
    font-family: 'Kanit', sans-serif !important;
}

aside .logo {
    padding-top: 40px;
}

aside .logo .logo-expanded i {
    margin-bottom: 15px;
}

aside .navigation {
    margin: 20px 0 20px;
}

aside .navigation > ul > li > a {
    border-left-color: transparent;
    color: #fff;
}

aside .navigation > ul > li.active:hover > a, aside .navigation > ul > li.active > a {
    background: #00000042;
}

aside .menu-title {
    padding: 10px 20px;
    letter-spacing: .05em;
    pointer-events: none;
    cursor: default;
    color: #fff;
    font-weight: 700;
}

aside.collapsed .menu-title {
    display: none;
}

aside .navigation ul li ul li a {
    color: #fff;
}

aside .navigation ul li ul li.active a {
    background-color: #ffffffb8;
}

aside .navigation ul li ul li a:hover {
    background-color: #ffffff45;
}

aside .navigation ul li ul li.active a {
    color: #000 !important;
}


@media (min-width: 769px) {
    aside .logo {
        padding-top: 20px;
    }

    aside.left-panel.collapsed .navigation ul li:hover > ul li a span.nav-label {
        display: block;
    }
}

.breadcrumb {
    padding: 0 !important;
}

.btn {
    border-radius: 2px;
    opacity: 1 !important;
    transition-duration: .3s;
}

.btn[disabled], .btn.disabled {
    opacity: .65 !important;
}

.btn:hover {
    opacity: 0.9 !important;
}

.btn:hover, .btn:focus, .btn:active, .btn:active:focus {
    outline: none !important;
}

button.btn-warning {
    color: #000 !important;
}

.btn-default:hover {
    background-color: #e6eaed !important;
    box-shadow: 0 0 0 3px #F3F5F6 !important;
}

.btn-group .btn-default:hover, .btn-default:active {
    box-shadow: none !important;
}

.btn-default:focus, .btn-default:active, .btn-default:active:hover, .btn-default:active:focus,
.open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default.focus {
    background-color: #fff !important;
    border-color: #ccc !important;
}

.btn-primary, .open > .dropdown-toggle.btn-primary {
    background-color: var(--primary) !important;
    border: none !important;
}

.btn-primary:hover, .open > .dropdown-toggle.btn-primary:hover {
    background-color: var(--primary-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--primary-sh-hover) !important;
}

.btn-group .btn-primary:hover {
    box-shadow: none !important;
}

.btn-primary:focus, .btn-primary:active, .btn-primary:active:hover, .btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary.focus {
    background-color: var(--primary) !important;
    border: none !important;
}

.btn-success, .open > .dropdown-toggle.btn-success {
    background-color: var(--success) !important;
    border: none !important;
}

.btn-success:hover, .open > .dropdown-toggle.btn-success:hover {
    background-color: var(--success-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--success-sh-hover) !important;
}

.btn-group .btn-success:hover {
    box-shadow: none !important;
}

.btn-success:focus, .btn-success:active, .btn-success:active:hover,
.open > .dropdown-toggle.btn-success:focus, .btn-success:active:focus, .open > .dropdown-toggle.btn-success.focus {
    background-color: var(--success) !important;
    border: none !important;
}

.btn-info, .open > .dropdown-toggle.btn-info {
    background-color: var(--info) !important;
    border: none !important;
}

.btn-info:hover, .open > .dropdown-toggle.btn-info:hover {
    background-color: var(--info-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--info-sh-hover) !important;
}

.btn-group .btn-info:hover {
    box-shadow: none !important;
}

.btn-info:focus, .btn-info:active, .btn-info:active:hover,
.open > .dropdown-toggle.btn-info:focus, .btn-info:active:focus, .open > .dropdown-toggle.btn-info.focus {
    background-color: var(--info) !important;
    border: none !important;
}

.btn-warning, .open > .dropdown-toggle.btn-warning {
    background-color: var(--warning) !important;
    border: none !important;
}

.btn-warning:hover, .open > .dropdown-toggle.btn-warning:hover {
    background-color: var(--warning-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--warning-sh-hover) !important;
}

.btn-group .btn-warning:hover {
    box-shadow: none !important;
}

.btn-warning:focus, .btn-warning:active, .btn-warning:active:hover,
.open > .dropdown-toggle.btn-warning:focus, .btn-warning:active:focus, .open > .dropdown-toggle.btn-warning.focus {
    background-color: var(--warning) !important;
    border: none !important;
}


.btn-danger, .open > .dropdown-toggle.btn-danger {
    background-color: var(--danger) !important;
    border: none !important;
}

.btn-danger:hover, .open > .dropdown-toggle.btn-danger:hover {
    background-color: var(--danger-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--danger-sh-hover) !important;
}

.btn-group .btn-danger:hover {
    box-shadow: none !important;
}

.btn-danger:focus, .btn-danger:active, .btn-danger:active:hover,
.open > .dropdown-toggle.btn-danger:focus, .btn-danger:active:focus, .open > .dropdown-toggle.btn-danger.focus {
    background-color: var(--danger) !important;
    border: none !important;
}

.btn-inverse, .open > .dropdown-toggle.btn-inverse {
    background-color: var(--inverse) !important;
    border: none !important;
}

.btn-inverse:hover, .open > .dropdown-toggle.btn-inverse:hover {
    background-color: var(--inverse-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--inverse-sh-hover) !important;
}

.btn-group .btn-inverse:hover {
    box-shadow: none !important;
}

.btn-inverse:focus, .btn-inverse:active, .btn-inverse:active:hover,
.open > .dropdown-toggle.btn-inverse:focus, .btn-inverse:active:focus, .open > .dropdown-toggle.btn-inverse.focus {
    background-color: var(--inverse) !important;
    border: none !important;
}

.btn-purple, .open > .dropdown-toggle.btn-purple {
    background-color: var(--purple) !important;
    border: none !important;
}

.btn-purple:hover, .open > .dropdown-toggle.btn-purple:hover {
    background-color: var(--purple-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--purple-sh-hover) !important;
}

.btn-group .btn-purple:hover {
    box-shadow: none !important;
}

.btn-purple:focus, .btn-purple:active, .btn-purple:active:hover,
.open > .dropdown-toggle.btn-purple:focus, .btn-purple:active:focus, .open > .dropdown-toggle.btn-purple.focus {
    background-color: var(--purple) !important;
    border: none !important;
}


.btn-pink, .open > .dropdown-toggle.btn-pink {
    background-color: var(--pink) !important;
    border: none !important;
}

.btn-pink:hover, .open > .dropdown-toggle.btn-pink:hover {
    background-color: var(--pink-bg-hover) !important;
    box-shadow: 0 0 0 3px var(--pink-sh-hover) !important;
}

.btn-group .btn-pink:hover {
    box-shadow: none !important;
}

.btn-pink:focus, .btn-pink:active, .btn-pink:active:hover,
.open > .dropdown-toggle.btn-pink:focus, .btn-pink:active:focus, .open > .dropdown-toggle.btn-pink.focus {
    background-color: var(--pink) !important;
    border: none !important;
}


.btn-outline-default {
    background-color: #fff;
    border: 1px solid #e6eaed !important;
}

.btn-outline-default:hover {
    background: #e6eaed;
    box-shadow: 0 0 0 3px #F3F5F6 !important;
}

.btn-outline-primary, .btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger, .btn-outline-inverse, .btn-outline-purple, .btn-outline-pink {
    background-color: #fff;
}

.btn-outline-primary {
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background: var(--primary-bg-hover);
    box-shadow: 0 0 0 3px var(--primary-sh-hover) !important;
    border-color: var(--primary-bg-hover) !important;
}


.btn-outline-success {
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
}

.btn-outline-success:hover {
    color: #fff !important;
    background: var(--success-bg-hover);
    box-shadow: 0 0 0 3px var(--success-sh-hover) !important;
    border-color: var(--success-bg-hover) !important;
}


.btn-outline-info {
    border: 1px solid var(--info) !important;
    color: var(--info) !important;
}

.btn-outline-info:hover {
    color: #fff !important;
    background: var(--info-bg-hover);
    box-shadow: 0 0 0 3px var(--info-sh-hover) !important;
    border-color: var(--info-bg-hover) !important;
}


.btn-outline-warning {
    border: 1px solid var(--warning) !important;
    color: var(--warning) !important;
}

.btn-outline-warning:hover {
    color: #000 !important;
    background: var(--warning-bg-hover);
    box-shadow: 0 0 0 3px var(--warning-sh-hover) !important;
    border-color: var(--warning-bg-hover) !important;
}

.btn-outline-danger {
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
}

.btn-outline-danger:hover {
    color: #fff !important;
    background: var(--danger-bg-hover);
    box-shadow: 0 0 0 3px var(--danger-sh-hover) !important;
    border-color: var(--danger-bg-hover) !important;
}


.btn-outline-inverse {
    border: 1px solid var(--inverse) !important;
    color: var(--inverse) !important;
}

.btn-outline-inverse:hover {
    color: #fff !important;
    background: var(--inverse-bg-hover);
    box-shadow: 0 0 0 3px var(--inverse-sh-hover) !important;
    border-color: var(--inverse-bg-hover) !important;
}

.btn-outline-purple {
    border: 1px solid var(--purple) !important;
    color: var(--purple) !important;
}

.btn-outline-purple:hover {
    color: #fff !important;
    background: var(--purple-bg-hover);
    box-shadow: 0 0 0 3px var(--purple-sh-hover) !important;
    border-color: var(--purple-bg-hover) !important;
}


.btn-outline-pink {
    border: 1px solid var(--pink) !important;
    color: var(--pink) !important;
}

.btn-outline-pink:hover {
    color: #fff !important;
    background: var(--pink-bg-hover);
    box-shadow: 0 0 0 3px var(--pink-sh-hover) !important;
    border-color: var(--pink-bg-hover) !important;
}

/*---------------------------*---------------------------*/

/*CCTV Theme*/

.cctv-font-theme-1 {
    color: var(--cctv-theme-1);
}

.cctv-font-theme-2 {
    color: var(--cctv-theme-2);
}

.cctv-font-theme-3 {
    color: var(--cctv-theme-3);
}

.cctv-font-theme-4 {
    color: var(--cctv-theme-4);
}

.cctv-font-theme-5 {
    color: var(--cctv-theme-5);
}

.cctv-bg-theme-1 {
    color: #fff;
    background-color: var(--cctv-theme-1);
}

.cctv-bg-theme-2 {
    color: #fff;
    background-color: var(--cctv-theme-2);
}

.cctv-bg-theme-3 {
    color: #000;
    background-color: var(--cctv-theme-3);
}

.cctv-bg-theme-4 {
    color: #000;
    background-color: var(--cctv-theme-4);
}

.cctv-bg-theme-5 {
    color: #000;
    background-color: var(--cctv-theme-5);
}

.cctv-bg-theme-5 {
    background-color: var(--cctv-theme-5);
}

.cctv-border-theme-1 {
    border: 1px solid var(--cctv-theme-1);
}

.cctv-border-theme-2 {
    border: 1px solid var(--cctv-theme-2);
}

.cctv-border-theme-3 {
    border: 1px solid var(--cctv-theme-3);
}

.cctv-hover-theme:hover {
    box-shadow: 0 0 5px 1px var(--cctv-theme-5);
}

aside.left-panel.cctv-theme {
    background: linear-gradient(to top, var(--cctv-theme-1), var(--cctv-theme-3));
}

.cctv-theme .logo-expanded i {
    font-size: 32px;
    color: #fff;
}

.cctv-theme .logo-expanded i:before {
    box-shadow: 0 0 0 2px #fff;
    padding: 10px;
    border-radius: 50%;
}

aside.cctv-theme .navigation > ul > li:hover > a, aside .navigation > ul > li.active:hover > a, aside .navigation > ul > li.active > a {
    border-left-color: #fff;
}

aside.cctv-theme .navigation > ul > li:not(.active):hover > a {
    background: #ffffff36;
}

aside.cctv-theme .navigation ul li ul {
    background-color: #00000042;
}

/*** Aside Collapsed ***/
@media (min-width: 769px) {
    aside.cctv-theme.left-panel.collapsed .navigation > ul > li > a:hover {
        background-color: #00000042;
        border-left: 3px solid #fff;
    }

    aside.cctv-theme.left-panel.collapsed .navigation > ul > li:not(.active) > a:hover {
        background-color: #ffffff36;
        border-left: 3px solid #fff;
    }

    aside.cctv-theme.left-panel.collapsed .navigation ul li ul {
        background-color: #b94f63;
    }
}

/*---------------------------*---------------------------*/

/*DISABLE Theme*/

.disabled-font-theme-1 {
    color: var(--disabled-theme-1);
}

.disabled-font-theme-2 {
    color: var(--disabled-theme-2);
}

.disabled-font-theme-3 {
    color: var(--disabled-theme-3);
}

.disabled-font-theme-4 {
    color: var(--disabled-theme-4);
}

.disabled-font-theme-5 {
    color: var(--disabled-theme-5);
}

.disabled-bg-theme-1 {
    color: #fff;
    background-color: var(--disabled-theme-1);
}

.disabled-bg-theme-2 {
    color: #fff;
    background-color: var(--disabled-theme-2);
}

.disabled-bg-theme-3 {
    color: #000;
    background-color: var(--disabled-theme-3);
}

.disabled-bg-theme-4 {
    color: #000;
    background-color: var(--disabled-theme-4);
}

.disabled-bg-theme-5 {
    color: #000;
    background-color: var(--disabled-theme-5);
}

.disabled-border-theme-1 {
    border: 1px solid var(--disabled-theme-1);
}

.disabled-border-theme-2 {
    border: 1px solid var(--disabled-theme-2);
}

.disabled-border-theme-3 {
    border: 1px solid var(--disabled-theme-3);
}

.disabled-hover-theme:hover {
    box-shadow: 0 0 5px 1px var(--disabled-theme-5);
}

aside.left-panel.disabled-theme {
    background: linear-gradient(to top, var(--disabled-theme-1), var(--disabled-theme-3));
}

.disabled-theme .logo-expanded i {
    font-size: 32px;
    color: #fff;
}

.disabled-theme .logo-expanded i:before {
    box-shadow: 0 0 0 2px #fff;
    padding: 10px;
    border-radius: 50%;
}

aside.disabled-theme .navigation > ul > li:hover > a, aside .navigation > ul > li.active:hover > a, aside .navigation > ul > li.active > a {
    border-left-color: #fff;
}

aside.disabled-theme .navigation > ul > li:not(.active):hover > a {
    background: #ffffff36;
}

aside.disabled-theme .navigation ul li ul {
    background-color: #00000042;
}

/*** Aside Collapsed ***/
@media (min-width: 769px) {
    aside.disabled-theme.left-panel.collapsed .navigation > ul > li > a:hover {
        background-color: #00000042;
        border-left: 3px solid #fff;
    }

    aside.disabled-theme.left-panel.collapsed .navigation > ul > li:not(.active) > a:hover {
        background-color: #ffffff36;
        border-left: 3px solid #fff;
    }

    aside.disabled-theme.left-panel.collapsed .navigation ul li ul {
        background-color: #bc820a;
    }

}


/*---------------------------*---------------------------*/

/*MIS MAP Theme*/

.mis-map-font-theme-1 {
    color: var(--mis-map-theme-1);
}

.mis-map-font-theme-2 {
    color: var(--mis-map-theme-2);
}

.mis-map-font-theme-3 {
    color: var(--mis-map-theme-3);
}

.mis-map-font-theme-4 {
    color: var(--mis-map-theme-4);
}

.mis-map-font-theme-5 {
    color: var(--mis-map-theme-5);
}

.mis-map-bg-theme-1 {
    color: #fff;
    background-color: var(--mis-map-theme-1);
}

.mis-map-bg-theme-2 {
    color: #fff;
    background-color: var(--mis-map-theme-2);
}

.mis-map-bg-theme-3 {
    color: #000;
    background-color: var(--mis-map-theme-3);
}

.mis-map-bg-theme-4 {
    color: #000;
    background-color: var(--mis-map-theme-4);
}

.mis-map-bg-theme-5 {
    color: #000;
    background-color: var(--mis-map-theme-5);
}

.mis-map-border-theme-1 {
    border: 1px solid var(--mis-map-theme-1);
}

.mis-map-border-theme-2 {
    border: 1px solid var(--mis-map-theme-2);
}

.mis-map-border-theme-3 {
    border: 1px solid var(--mis-map-theme-3);
}

.mis-map-hover-theme:hover {
    box-shadow: 0 0 5px 1px var(--mis-map-theme-5);
}

aside.left-panel.mis-map-theme {
    background: linear-gradient(to top, var(--mis-map-theme-1), var(--mis-map-theme-3));
}

.mis-map-theme .logo-expanded i {
    font-size: 32px;
    color: #fff;
}

.mis-map-theme .logo-expanded i:before {
    box-shadow: 0 0 0 2px #fff;
    padding: 10px;
    border-radius: 50%;
}

aside.mis-map-theme .navigation > ul > li:hover > a, aside .navigation > ul > li.active:hover > a, aside .navigation > ul > li.active > a {
    border-left-color: #fff;
}

aside.mis-map-theme .navigation > ul > li:not(.active):hover > a {
    background: #ffffff36;
}

aside.mis-map-theme .navigation ul li ul {
    background-color: #00000042;
}

/*** Aside Collapsed ***/
@media (min-width: 769px) {
    aside.mis-map-theme.left-panel.collapsed .navigation > ul > li > a:hover {
        background-color: #00000042;
        border-left: 3px solid #fff;
    }

    aside.mis-map-theme.left-panel.collapsed .navigation > ul > li:not(.active) > a:hover {
        background-color: #ffffff36;
        border-left: 3px solid #fff;
    }

    aside.mis-map-theme.left-panel.collapsed .navigation ul li ul {
        background-color: #005674;
    }
}


/*---------------------------*---------------------------*/

/*LABEL Theme*/

.label-font-theme-1 {
    color: var(--label-theme-1);
}

.label-font-theme-2 {
    color: var(--label-theme-2);
}

.label-font-theme-3 {
    color: var(--label-theme-3);
}

.label-font-theme-4 {
    color: var(--label-theme-4);
}

.label-font-theme-5 {
    color: var(--label-theme-5);
}

.label-bg-theme-1 {
    color: #fff;
    background-color: var(--label-theme-1);
}

.label-bg-theme-2 {
    color: #fff;
    background-color: var(--label-theme-2);
}

.label-bg-theme-3 {
    color: #000;
    background-color: var(--label-theme-3);
}

.label-bg-theme-4 {
    color: #000;
    background-color: var(--label-theme-4);
}

.label-bg-theme-5 {
    color: #000;
    background-color: var(--label-theme-5);
}

.label-bg-theme-5 {
    background-color: var(--label-theme-5);
}

.label-border-theme-1 {
    border: 1px solid var(--label-theme-1);
}

.label-border-theme-2 {
    border: 1px solid var(--label-theme-2);
}

.label-border-theme-3 {
    border: 1px solid var(--label-theme-3);
}

.label-hover-theme:hover {
    box-shadow: 0 0 5px 1px var(--label-theme-5);
}

aside.left-panel.label-theme {
    background: linear-gradient(to top, var(--label-theme-1), var(--label-theme-3));
}

.label-theme .logo-expanded i {
    font-size: 32px;
    color: #fff;
}

.label-theme .logo-expanded i:before {
    box-shadow: 0 0 0 2px #fff;
    padding: 10px;
    border-radius: 50%;
}

aside.label-theme .navigation > ul > li:hover > a, aside .navigation > ul > li.active:hover > a, aside .navigation > ul > li.active > a {
    border-left-color: #fff;
}

aside.label-theme .navigation > ul > li:not(.active):hover > a {
    background: #ffffff36;
}

aside.label-theme .navigation ul li ul {
    background-color: #00000042;
}

/*** Aside Collapsed ***/
@media (min-width: 769px) {
    aside.label-theme.left-panel.collapsed .navigation > ul > li > a:hover {
        background-color: #00000042;
        border-left: 3px solid #fff;
    }

    aside.label-theme.left-panel.collapsed .navigation > ul > li:not(.active) > a:hover {
        background-color: #ffffff36;
        border-left: 3px solid #fff;
    }

    aside.label-theme.left-panel.collapsed .navigation ul li ul {
        background-color: #066501;
    }
}

/*---------------------------*---------------------------*/


.text-status {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 15px;
    width: fit-content;
    margin: auto;
}


.text-status.danger {
    color: var(--danger);
}

.text-status.success {
    color: var(--success);
}

.text-status.warning {
    color: var(--warning);
}

.text-status:after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    border-radius: 50%;
}

.text-status.danger:after {
    background: var(--danger);
}

.text-status.success:after {
    background: var(--success);
}

.text-status.warning:after {
    background: var(--warning);
}