/** ***** Application CSS *****
 *
 *  1. General
 *  2. Override
 *  3. Custom
 *
 */


/* 1. General */
@font-face {
    font-family: "THSarabun";
    src: url("../fonts/THSarabun.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "THSarabun";
    src: url("../fonts/THSarabun Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "THSarabun";
    src: url("../fonts/THSarabun BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "THSarabun";
    src: url("../fonts/THSarabun Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "THSarabunIT9";
    src: url("../fonts/THSarabunIT9.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "THSarabunIT9";
    src: url("../fonts/THSarabunIT9 Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "THSarabunIT9";
    src: url("../fonts/THSarabunIT9 BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "THSarabunIT9";
    src: url("../fonts/THSarabunIT9 Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

:root {
    --default-color: #A767FF;
    --default-light-color: #f9e3ee;
    --color-gray: #A1A5B7;
    --color-teal: #627d8b;
    --color-pink: #c64980;
}
.text-teal { color: var(--color-teal) !important; }
.text-pink { color: var(--color-pink) !important; }

body {
    font-family: 'CSChatThaiUI', SansSerif;
}

td {
    outline: none;
}

.ff-cschatthai {
    font-family: 'CSChatThaiUI', SansSerif !important;
}

.valign-top {
    vertical-align: top;
}

.valign-base {
    vertical-align: baseline !important;
}

.valign-top-force {
    vertical-align: top !important;
}

.valign-middle {
    vertical-align: middle !important;
}

.bg-eee {
    background-color: #eee !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.border-bottom-right-0-force {
    border-bottom-right-radius: 0px !important;
}

.border-bottom-left-0-force {
    border-bottom-left-radius: 0px !important;
}

.padding-0 {
    padding: 0 !important;
}

.valign-top-force {
    vertical-align: top !important;
}

.bg-default-pink {
    background-color: #A767FF !important;
}

.margin-bt5 {
    margin-bottom: 5px;
}

@media (min-width: 992px) {
    #largeModalDialog {
        max-width: 90% !important;
    }
}

.w-120 {
    width: 120px;
}

td.keyin {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.text-sp-gray {
    color: #6d6d6d !important;
}

.list-group-item.datadic.active {
    background-color: #179c9b !important;
    border-color: #179c9b !important;
}

.badge.badge-secondary.active {
    background: #fff;
    color: #000;
    font-weight: bolder;
}

.sub-icon path {
    stroke: white;
    stroke-width: 40px;
}

.tab-content.tab-content-system {
    padding: 0px 0px 0px 0px !important;
}

.list-group-item-system.active {
    background-color: #179c9b !important;
    border-color: #179c9b !important;
}

.cursor-link {
    cursor: pointer !important;
}


/* 2. Override */
.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-dark {
    background-color: #E7D7FF;
    background-image: url("../img/bg/arches.png");
    color: black;
}

.hk-wrapper.hk-vertical-nav .hk-nav {
    z-index: 1100;
}

.modal-close {
    border: 0px !important;
    background-color: transparent !important;
    outline: none !important;
}

@media only screen and (max-width: 575px) {

    .modal {
        padding: 16px 32px 16px 16px !important;
    }

    .modal-dialog {
        width: 100% !important;
    }
}
.dot1 {
    height: 25px;
    width: 25px;
    background-color: #ff0000;
    border-radius: 50%;
    display: inline-block;
}

.dot2 {
    height: 25px;
    width: 25px;
    background-color: #ffa400;
    border-radius: 50%;
    display: inline-block;
}
.dot3 {
    height: 25px;
    width: 25px;
    background-color: #42ff02;
    border-radius: 50%;
    display: inline-block;
}
.modal-footer {
    padding: 0.75rem 1.25rem !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
}

@media (max-width: 575.98px) {
    .modal-fullscreen {
        padding: 0 !important;
    }
    .modal-fullscreen .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 767.98px) {
    .modal-fullscreen-sm {
        padding: 0 !important;
    }
    .modal-fullscreen-sm .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-sm .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-sm .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    .modal-fullscreen-md {
        padding: 0 !important;
    }
    .modal-fullscreen-md .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-md .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-md .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 1199.98px) {
    .modal-fullscreen-lg {
        padding: 0 !important;
    }
    .modal-fullscreen-lg .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-lg .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-lg .modal-body {
        overflow-y: auto;
    }
}
.modal-fullscreen-xl {
    padding: 30px !important;
}
.modal-fullscreen-xl .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}
.modal-fullscreen-xl .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}
.modal-fullscreen-xl .modal-body {
    overflow-y: auto;
}

@media (min-width: 1200px) {
    .modal-xlg {
        width: 90%;
    }
}

#fullModalDialog {
    width: 90%;
    max-width: 90%;
}

@media only screen and (max-width: 575px) {
    #fullModalDialog {
        width: 100%;
        max-width: 100%;
    }
}

.card-profile-feed {
    margin-bottom: 0px;
}

/* Home UI */
.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-dark .navbar-nav .nav-item.active > .nav-link {
    background-color: rgb(128 134 169 / 35%);
    color: #fff;
}

/*.home-banner {*/
    /*position: sticky;*/
    /*top: 107px;*/
    /*height: 140px;*/
    /*background-size: auto 100%;*/
    /*background: url(../img/taieri.svg) no-repeat right top, linear-gradient(to right, #ab4078, #663259);*/
/*}*/

/*** New Home Banner ***/
.home-banner {
    position: sticky;
    top: 107px;
    height: 270px;
}
.home-banner .taieri {
    position: absolute;
    top: 0;
    right: 0;
    height: 270px;
    width: 100%;
    background: url(../img/taieri2.jpg) no-repeat center center;
    opacity: 0.8;
    background-size: cover;
}

.side-card-icon {
    height: calc(100% - 25px);
    background-color: #F0F3F5;
}

.hk-breadcrumb .breadcrumb.breadcrumb-light .breadcrumb-item + .breadcrumb-item:before {
    padding-top: 5px;
}

.hk-sec-wrapper-blank {
    background: #fcf8f9 !important;
    padding: 0.5rem 1.5rem 1.0rem 1.5rem;
    /*margin-bottom: 30px;*/
}

.hk-sec-block {
    padding: 1.5rem;
    margin-bottom: 30px;
}

.hk-sec-part {
    background-color: #FFF;
    padding: 1.5rem;
    border: 1px solid #eaecec;
    box-shadow: 0 6px 10px rgb(0 0 0 / 10%);
    border-radius: 0.25rem;
}

.hk-wrapper .hk-navbar.navbar-dark {
    background-color: #A767FF;
    /*background: linear-gradient(to right, #A767FF, #c64980);*/
    color: #ffffff;
    z-index: 10000;
}

.dropdown-menu {
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.hk-wrapper .hk-settings-panel .settings-panel-wrap .settings-panel-head a {
    top: 23px;
}

.hk-wrapper.hk-vertical-nav .hk-nav.hk-nav-dark .navbar-nav .nav-item .nav-link {
    color: black;
}

.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav .nav-item .nav-link > svg {
    font-size: 16px;
    margin-right: 15px;
    line-height: 25px;
    min-width: 14px;
}
.hk-wrapper.hk-vertical-nav .hk-nav .navbar-nav .nav-item .nav-link > span > svg {
    font-size: 16px;
    margin-right: 15px;
    line-height: 25px;
    min-width: 14px;
}


.hk-breadcrumb .breadcrumb {
    padding: 15px 12px 12px 15px;
    margin-bottom: 1.6rem;
}

@media only screen and (min-width: 1700px) {
    .home-banner .taieri {
        position: absolute;
        top: 0;
        right: 0;
        height: 350px;
        width: 100%;
        background: url(../img/taieri2.jpg) no-repeat center left;
        opacity: 0.8;
        background-size: cover;
    }
}

@media only screen and (max-width: 800px) {
    .home-banner .taieri {
        position: absolute;
        top: 0;
        right: 0;
        height: 270px;
        width: 100%;
        background: url(../img/taieri2.jpg) no-repeat center left;
        opacity: 0.8;
        background-size: cover;
    }
}

@media only screen and (max-width: 480px) {
    .title-system {
        font-size: 0.7em;
    }

    .hk-sec-title, .hk-sec-hr {
        display: none !important;
    }

    .hk-sec-wrapper div.row:first-of-type {
        margin-top: 0px !important;
    }

    .home-banner .taieri {
        position: absolute;
        top: 0;
        right: 0;
        height: 270px;
        width: 100%;
        background: url(../img/taieri2.jpg) no-repeat center left;
        opacity: 0.8;
        background-size: cover;
    }
}

.navbar .navbar-brand span {
    font-size: 18px !important;
}

/*@media (max-width: 800px) {*/
/*    .home-banner .taieri {*/
/*        position: absolute;*/
/*        top: 0;*/
/*        right: 0;*/
/*        height: 270px;*/
/*        width: 100%;*/
/*        background: url(../img/taieri2.jpg) no-repeat center left;*/
/*        opacity: 0.8;*/
/*        background-size: cover;*/
/*    }*/
/*}*/

@media (max-width: 1199px) {
    .hk-wrapper.hk-vertical-nav .hk-nav {
        z-index: 10040;
    }

    /*.home-banner .taieri {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    right: 0;*/
    /*    height: 270px;*/
    /*    width: 100%;*/
    /*    background: url(../img/taieri2.jpg) no-repeat center center;*/
    /*    opacity: 0.8;*/
    /*    background-size: cover;*/
    /*}*/
}

.hk-wrapper .hk-settings-panel {
    z-index: 10040;
}

.hk-wrapper.hk-settings-toggle .hk-settings-panel {
    z-index: 10040;
}

.hk-wrapper.hk-vertical-nav .hk-nav-backdrop {
    z-index: 10039;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #A767FF 2px !important;
    height: calc(2.25rem + 4px) !important;
    padding: 0px 0px 0px 6px !important;
    overflow-y: auto;
}

.select2-container--default .select2-selection--multiple {
    height: calc(2.25rem + 4px) !important;
    padding: 0px 0px 0px 6px !important;
    overflow-y: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #A767FF !important;
    margin-top: 4px;
}

.form-control {
    border-color: #e6e6e6;
    color: #5e7d8a;
}

.form-control:focus {
    box-shadow: none;
    border-color: #A767FF;
}

.form-control-01 {
    border-color: #cecece;
    color: #5e7d8a;
}

.form-control-01:focus {
    box-shadow: none;
    border-color: #A767FF;
}

.form-control:disabled, .dd-handle:disabled {
    background-color: #f7f7f7 !important;
    border-color: #efefef !important;
    color: #797a7a !important;
}

.typeahead-field input.disabled, .typeahead-field input[disabled] {
    background-color: #f7f7f7 !important;
    border-color: #efefef !important;
    color: #797a7a !important;
    opacity: 1 !important;
}

/* DATERANGEPICKER */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #A767FF !important;
}

.daterangepicker td.in-range {
    background-color: #f5e7ec;
}

.daterangepicker td:hover {
    background-color: #f5e7ec;
}


/* DataTable */
table.dataTable {
    margin-top: 20px;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    /*background-color: #b485f6;*/
    /*color: #FFF;*/
    background-color: #d0b1fb;
    /*color: #C64980;*/
    color: #324148;
}

/* Bootstrap 5 paints every th/td with --bs-table-bg (white) and draws hover as an
   inset box-shadow, which hides the row colours below. Make cells transparent like
   Bootstrap 4 so the header grey, DataTables stripes and the purple hover show again. */
table.dataTable {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: #324148;
}

.table thead tr {
    background-color: #E0E0E0;
}

.table thead tr th {
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    font-weight: bold;
    font-size: 15px;
}

.table tbody tr td {
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}

/* Bootstrap 5 greys out disabled page links; keep the white Bootstrap 4 look */
.pagination {
    --bs-pagination-disabled-bg: #fff;
}

.pagination .page-item.active .page-link {
    background: #A767FF;
    border-color: #A767FF;
    color: #fff;
}

.dataTables_wrapper .dataTables_length .select2-container--default .select2-selection--single,
.dataTables_wrapper .dataTables_length .select2-container--default .select2-selection--multiple {
    height: 33px;
    padding: 2px .5rem .25rem;
}

.dataTables_wrapper .dataTables_length .select2-container--default {
    width: 80px !important;
    margin-right: 5px;
}

.dataTables_wrapper .dataTables_length .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 8px !important;
}

@media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
        display: flex;
        justify-content: center;
    }
}


/* SELECT2 */
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #A767FF;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #b485f6;
    color: #FFF;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: #A767FF;
}

.select2-container *:focus {
    outline: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0px;
}

/* DATERANGEPICKER */
.calendar-table table tbody tr td.today {
    background-color: #f5f5f6;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    z-index: 45001 !important;
}

/* NAV */
.nav.nav-pills .nav-link.active {
    color: #fff !important;
    background-color: #A767FF !important;
}

.nav.nav-pills .nav-link {
    color: #A767FF;
}

/* TECHNICIAN BLOCK */
.technicianBlock.card-header,
.requesterBlock.card-header {
    padding: .75rem 1.25rem !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
}

.technicianBlock.card-header:last-child,
.requesterBlock.card-header:last-child {
    padding: .75rem 1.25rem !important;
    margin-bottom: 0 !important;
    border-bottom: 0px !important;
}

.technicianCard, .requesterCard {
    box-shadow: none !important;
    border-width: 2px !important;
    border-color: #eaecec !important;
    background-color: #f7f7f7 !important;
}

/* 3. Custom */

/* MOBILE AVERAGE WIDTH */
@media only screen and (max-width: 480px) {
    .navbar .navbar-brand span {
        font-size: 3.5vw !important;
    }
}

/* PORTAL */
@media only screen and (max-width: 575px) {
    .row-portal {
        margin-left: -5px;
        margin-right: -5px;
    }
}

/* ROLES BOX */
.roleItem:first-child, :not(.roleItem) + .roleItem {
    margin-left: 0px !important;
}

.rolesBox > .roleItem ~ .roleItem {
    display: block;
    margin-left: 62px !important;
}

.bg-main {
    background-color: #fcf8f9 !important;
}

.abstract-bg {
    background-image: url(/img/bg-right.svg);
    background-position: right bottom;
    background-size: 22% auto;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
}

.hk-wrapper {
    background-color: transparent !important;
}

.label-dark {
    background-color: #5e7d8a;
}

.label-deep {
    background-color: #179c9b;
}

.label {
    display: inline-block;
    padding: .25em .4em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    -webkit-border-radius: .25rem;
    border-radius: .25rem;
}

.text-main {
    color: rgba(255, 255, 255, 0.6);
}

.text-main-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.text-main-color {
    color: #C64980;
}

.text-main-darkpink {
    color: #8c3f5c;
}

.text-main-color-force {
    color: #c64980 !important;
}

.text-main-blue {
    color: #437DC8 !important;
}

.text-main-purple {
    color: #7540BF !important;
}

.text-main-emerald {
    color: #47B0D2 !important;
}

.text-main-orange {
    color: #FC8C39 !important;
}

.text-deep {
    color: #179c9b !important;
}

.text-disable {
    color: #e0e0e0 !important;
}

.box-main-shadow {
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5) !important;
}

.brand-img {
    height: 40px;
}

#requestDate {
    height: auto;
}

.bg-pink-light-6 {
    background-color: #f5e7ec !important;
}

/* DESC MODAL */
#descModalHeader {
    border-color: transparent !important;
    padding: 0.70rem 1.25rem 0rem 0.25rem;
}

#descClose {
    float: right !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    font-family: Arial !important;
}


/* MOBILE MODAL */
#mobile-popup .modal-dialog-bottom {
    display: flex;
    align-items: flex-end;
    min-height: calc(100% - 16rem);
    transform: translate3d(0, 110%, 0);
}

#mobile-popup.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
    transform: translate3d(0%, 50%, 0) !important;
}

@media (min-width: 576px) {
    #mobile-popup .modal-dialog-bottom {
        min-height: calc(100% - 6rem);
    }
}

.modal-backdrop {
    z-index: 20001;
}

/* SIDEBAR LIST GROUP */
.side-noti-background {
    background-color: #2b383e !important;
}

.list-group-item.list-group-item-sidenoti:not(.active) {
    color: rgba(255, 255, 255, 0.6);
    background-color: #2b383e;
    border: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: transparent !important;
    border-left: transparent !important;
}

.list-group-item.list-group-item-sidenoti:not(.active):focus,
.list-group-item.list-group-item-sidenoti:not(.active):hover {
    background-color: transparent;
}

.list-group-item.list-group-item-sidenoti:not(.active):hover div h6,
.list-group-item.list-group-item-sidenoti:not(.active):hover div i {
    color: #FFF;
}

.list-group-item.list-group-item-sidenoti:not(.active):hover p {
    color: rgba(255, 255, 255, 0.6) !important;
}

.border-radius-0 {
    border-radius: 0rem !important;
}

.btn-deep {
    color: #fff;
    background-color: #179c9b;
    border-color: #179c9b;
}

.btn-deep:hover, .btn-deep:focus {
    color: #fff;
    background-color: #148584;
    border-color: #148584;
}

.btn-transparent {
    color: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    cursor:pointer !important;
}

.btn-transparent:hover, .btn-transparent:focus {
    color: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    cursor:pointer !important;
}

.btn-outline-cancel {
    color: #9e9e9e !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #9e9e9e !important;
    border-width: 2px !important;
}

.btn-outline-cancel:hover {
    color: #fff !important;
    background-color: #919191 !important;
    border-color: #919191 !important;
}

.btn-profile-link {
    color: #fff !important;
    background-color: #5e7d8a !important;
    border-color: #5e7d8a !important;
    border-width: 2px !important;
    transition: color 0.2s ease;
}

.btn-profile-link:hover {
    color: rgba(255, 255, 255, 0.6) !important;
}


/* HOME CARD */

.card-home {
    margin-bottom: 0px !important;
    border-radius: 10px !important;
}

.card-home .card-img-bg {
    border-radius: 10px !important;
}

/* CUSTOM CARD */
.card-box {
    position: relative;
    animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}

.card-custom {
    display: flex;
    justify-content: space-between;
    min-height: 100px;
    padding: 15px 20px 0px 20px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    border: 0px;
}

.card-custom:after {
    content: '';
    display: block;
    width: 190px;
    height: 300px;
    background: #c64980;
    position: absolute;
    transform: rotate(-30deg);
    top: -24px;
    left: -78px;
    /*animation: rotatemagic 0.25s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s both;*/
}

.card-custom .card-info{
    flex-direction: row;
    z-index: 2;
    position: relative;
}

.card-custom .card-info .card-icon {
    width: 120px;
    height: 120px;
}

.card-custom .card-info .card-icon .icon-circle {
    border-radius: 50%;
    border: 5px solid #FFF;
    background-color: #A767FF;
    padding: 20px;
    width: 100px;
    height: 100px;
}

.card-custom .card-info .card-profile {
    padding: 0px 20px;
    line-height: 30px;
}

.card-custom .card-info .card-profile h1 {
    font-size: 1.8em;
}

.card-custom .card-info .card-profile h3 {
    font-size: 1.2em;
    color: #00bcd4;
    font-style: italic;
}

.card-custom .card-info .card-profile .detail {
    padding: 10px 0px;
    color: #5A5A5A;
    line-height: 20px;
    font-style: initial;
}

.mobile-card-text {
    font-size: 16px;
}

@media only screen and (max-width: 400px) {
    .mobile-card-text {
        font-size: 12px;
    }

    .card-text-plain {
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (min-width: 401px) and (max-width: 480px) {
    .mobile-card-text {
        font-size: 14px;
    }

    .card-text-plain {
        padding-right: 0px;
        padding-left: 0px;
    }
}

@keyframes animatop {
    0% {
        opacity: 0;
        bottom: -15px;
    }
    100% {
        opacity: 1;
        bottom: 0px;
    }
}

@keyframes rotatemagic {
    0% {
        opacity: 0;
        transform: rotate(0deg);
        top: -24px;
        left: -253px;
    }
    100% {
        transform: rotate(-30deg);
        top: -24px;
        left: -78px;
    }
}

/* CARD MOBILE */
.card-mobile {
    border: solid 1px #e1e1e1;
    cursor: pointer;
}

.card-text-body {
    color: #8c3f5c;
}

.card-text-icon-body {
    color: #8c3f5c;
}

.card-mobile:hover, .card-mobile:focus {
    background-color: #df4b93 !important;
    border-color: #eda2bd !important;
}

.card-mobile:hover .card-img-overlay .card-text-block .card-text-icon svg,
.card-mobile:focus .card-img-overlay .card-text-block .card-text-icon svg {
    color: #FFF !important;
    -webkit-filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.5));
    filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.5));
}

.card-mobile:hover .card-img-overlay .card-text-block .card-text-plain span,
.card-mobile:focus .card-img-overlay .card-text-block .card-text-plain span {
    color: #FFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

/* MOBILE FOOTER */
.footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,.7);
    display: flex;
    min-height: 61px;
    border-top: solid 1px rgba(0,0,0,.05);
    text-align: center;
    transition: transform 350ms ease!important;
    color: rgba(50, 65, 72, 0.8);
}

.footer-bar a {
    color: rgba(50, 65, 72, 0.8);
    padding-top: 12px;
    position: relative;
    flex: 1 1 auto;
}

.footer-bar a i {
    font-size: 20px;
    position: relative;
    z-index: 2;
}

.footer-bar a span {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-top: 1px;
    opacity: .7;
}

.footer-bar .active strong {
    position: absolute;
    width: 50px;
    height: 2px;
    border-radius: 60px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background-color: #c64980 !important;
    color: #FFF;
}

.footer-bar .active *,
.footer-bar .active i {
    color: #c64980 !important;
}

/* MOBILE FOOTER */
.header {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,.7);
    position: sticky;
    top: 57px;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1099;
    transition: all .3s ease;
    border-bottom: solid 1px rgba(0,0,0,.08);
    transform: translate(0px, 0px);
}

.header .header-title {
    position: absolute;
    height: 50px;
    line-height: 49px;
    font-size: 18px;
    color: rgba(50, 65, 72, 0.8);
    font-weight: 600;
    z-index: 1;
}

.header .header-icon {
    position: absolute;
    height: 50px;
    width: 45px;
    text-align: center;
    line-height: 49px;
    font-size: 16px;
    color: rgba(50, 65, 72, 0.8);
    border: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent!important;
}

.header-logo-center .header-title {
    /*width: 150px;*/
    width: 100%;
    /*left: 50%;*/
    /*margin-left: -75px;*/
    text-align: center;
}

.header-logo-center .header-icon-left {
    left: 0;
}

.header-logo-center .header-icon-right {
    right: 0;
}

/* CAMERA BOX */
.camera-box {
    background-image: url(../img/cam-cropper-white.png);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 150px;
    width: auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.photo-view {
    background-image: url(../img/cam-cropper-white.png);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    width: auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* SUGGESTION TIMELINE */
.suggest-detail {
    padding:3rem 0
}

[class*=suggest-status-] p {
    margin:0;
    font-size:1.1rem;
    color:#fff;
    text-transform:uppercase;
    text-align:center
}

[class*=suggest-status-] {
    padding:1.6rem 0
}

.suggest-status-intransit {
    background-color:#65aee0
}

.suggest-status-outfordelivery {
    background-color:#f5a551
}

.suggest-status-deliveryoffice {
    background-color:#f7dc6f
}

.suggest-status-delivered {
    background-color:#4cbb87
}

.suggest-status-attemptfail {
    background-color:#b789c7
}

.suggest-status-error,.suggest-status-exception {
    background-color: #d26759
}

.suggest-status-expired {
    background-color: #616e7d
}

.suggest-status-pending {
    background-color: #ccc
}

.suggest-status-inforeceived {
    background-color: #214977
}

.suggest-item {
    border-left: 1px solid #e5e5e5;
    position: relative;
    padding: 2rem 2.5rem .5rem 2.5rem;
    font-size: .9rem;
    margin-left: 3rem;
    min-height: 5rem
}

.suggest-item:last-child {
    padding-bottom: 2rem
}

.suggest-item .suggest-date {
    margin-bottom:.5rem
}

.suggest-item .suggest-date span {
    color:#888;
    font-size:85%;
    padding-left:.4rem
}

.suggest-item .suggest-content {
    padding:.5rem .8rem;
    background-color:#f4f4f4;
    border-radius:.5rem
}

.suggest-item .suggest-content span {
    display: block;
    color: #888;
    font-size: 85%
}

.suggest-item .suggest-content span.status {
    display: block;
    color: #FFF;
    font-size: 14px;
}

.suggest-item .suggest-icon {
    line-height: 2.6rem;
    position: absolute;
    left: -1.3rem;
    width: 2.6rem;
    height: 2.6rem;
    text-align: center;
    border-radius: 50%;
    font-size: 1.1rem;
    background-color: #fff;
    color: #fff
}

.suggest-item .suggest-icon.status-default {
    color: #fff;
    background-color:#A767FF;
}

.suggest-item .suggest-icon.status-secondary {
    color: #fff;
    background-color: #9e9e9e
}

.suggest-item .suggest-icon.status-intransit {
    color:#e5e5e5;
    border:1px solid #e5e5e5;
    font-size:.6rem
}

.suggest-footer {
    /*padding: 10px 15px;*/
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

@media(min-width:992px) {
    .suggest-item {
        margin-left:10rem
    }
    .suggest-item .suggest-date {
        position:absolute;
        left:-10rem;
        width:7.5rem;
        text-align:right
    }
    .suggest-item .suggest-date span {
        display:block
    }
    .suggest-item .suggest-content {
        padding:0;
        background-color:transparent
    }
}

.tb-lead {
    font-weight: 500;
    display: block;
    line-height: 1.4;
}

.tb-sublead {
    font-size: 12px;
    color: #8094ae;
}

.td-selected {
    background-color: #d0b1fb !important;
    color: #324148 !important;
}

/* HighChart */
.highcharts-figure, .highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: 'CSChatThaiUI', SansSerif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.btn-capture-radius {
    border-radius: 0px 0px .25rem .25rem !important;
}

.label-check-kpi {
    position: relative;
    display: block;
    padding-left: 0.25rem;
}
/* MAGNIFIC POPUP*/
.mfp-no-margins img.mfp-img {
    padding: 0;
}

.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}

.mfp-no-margins .mfp-container {
    padding: 0;
}


/*

for zoom animation
uncomment this part if you haven't added this code anywhere else

*/
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.z-index-50000 {
    z-index: 50000 !important;
}

.width-70p {
    width: 70% !important;
}

@media(max-width:991px) {
    .width-70p {
        width: 100% !important;
    }
}


/* TABS */
.hk-sec-tabs-wrapper {
    padding: 1px 0px 3px 0px !important;
}

.tab-nav-link {
    border-radius: .25rem .25rem 0rem 0rem !important;
    padding: 0.8rem 1rem 0.5rem 1rem !important;
    color: rgba(50, 65, 72, 0.5) !important;
}

.nav.nav-tabs .tab-nav-link.active {
    border-color: transparent !important;
}

.nav-tabs {
    padding: 15px 15px 0px 15px !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.nav-tabs > li {
    position: relative;
    display: block;
}

.nav-tabs > li > a {
    position: relative;
    display: block;
}

.nav-tabs > li > a::after {
    margin-bottom: -4px;
    content: "";
    background: #A767FF;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.nav-tabs > li > a.active::after {
    bottom: 1px;
}

.nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after {
    transform: scale(1);
}

.tab-content {
    padding: 25px 15px 15px 15px;
}

/* EXTEND TABS */
.tabs-section {
    display: block;
    margin: 0 0 20px;
}

.tabs-section-nav {
    overflow: auto;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    /*border-top: solid 1px #d8e2e7;*/
}

/* total width */
.tabs-section-nav::-webkit-scrollbar {
    background-color:#fff;
    width:16px
}

/* background of the scrollbar except button or resizer */
.tabs-section-nav::-webkit-scrollbar-track {
    background-color:#fff
}
.tabs-section-nav::-webkit-scrollbar-track:hover {
    background-color:#f4f4f4
}

/* scrollbar itself */
.tabs-section-nav::-webkit-scrollbar-thumb {
    background-color:#babac0;
    border-radius:16px;
    border:5px solid #fff
}
.tabs-section-nav::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
    border:4px solid #f4f4f4
}

/* set button(top and bottom of the scrollbar) */
.tabs-section-nav::-webkit-scrollbar-button {display:none}


.tbl {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.tabs-section-nav .tbl .nav-item {
    float: none;
    display: table-cell;
    vertical-align: middle;
    /*border-bottom: 1px solid #d8e2e7;*/
}
.tabs-section-nav .nav-item {
    background: #f6f8fa;
    white-space: nowrap;
    padding: 0;
}

.tabs-section-nav .nav-item .disabled .nav-link-in {
    color: #0000001a;
}

.tabs-section-nav .tbl .nav {
    display: table-row;
}

.tabs-section-nav .nav-link {
    padding: 0;
    display: block;
    color: #6c7a86;
    font-weight: 600;
    border: solid 1px #d8e2e7;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top: none;
    font-size: 14px;
    font-weight: 400;
}

.tabs-section-nav .nav-link.active {
    border-left-color: #d8e2e7;
    border-right-color: #d8e2e7;
    background: #fff;
    color: #343434;
    border-bottom-color: #fff;
}

.tabs-section-nav .nav-link.active .nav-link-in {
    border-top-color: #A767FF;
    color: #A767FF;
    font-weight: bold;
}

.tabs-section-nav .nav-link .nav-link-in::before {
    margin-bottom: -4px;
    content: "";
    background: #A767FF;
    height: 4px;
    position: absolute;
    width: 100%;
    left: 0px;
    /*top: 1px;*/
    top: 0px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.tabs-section-nav .nav-link:hover .nav-link-in::before {
    transform: scale(1);
}

.nav-scroll-tabs > li {
    position: relative;
    display: block;
}

.nav-scroll-tabs > li > a {
    position: relative;
    display: block;
}

.nav-item-first .nav-link.active {
    border-left-color: #FFF !important;
}

.nav-item-right .nav-link.active {
    border-right-color: #FFF !important;
}

.tabs-section-nav .nav-link-in {
    display: block;
    padding: 10px;
    line-height: 28px;
    border-top: solid 4px transparent;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: rgba(50, 65, 72, 0.8);
}

.tabs-section > .tab-content:not(.no-styled) {
    background: #fff;
    /*border: solid 1px #d8e2e7;*/
    border-top: none;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    padding: 25px 15px 15px 15px;
}

/* BADGE */
.label {
    display: inline-block;
    padding: .25em .4em;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    -webkit-border-radius: .25rem;
    border-radius: .25rem;
}

.label-pill {
    padding-right: .6em;
    padding-left: .6em;
    -webkit-border-radius: 10rem;
    border-radius: 10rem;
}

.label-orange {
    background-color: #f95e54;
}

.badge.badge-deep {
    background: #179c9b;
    color: #fff;
}

.label-blue {
    background-color: #00a0df;
}

/* NOTIFY */
.card-notify {
    overflow-y: auto;
    height: 323px;
}

.card-notify>.list-group:last-child {
    border-bottom: inherit !important;
}

.card-notify::-webkit-scrollbar {
    background-color: #fff;
    width: 16px
}

.card-notify::-webkit-scrollbar-track {
    background-color: #fff
}

.card-notify::-webkit-scrollbar-track:hover {
    background-color: #f4f4f4
}

.card-notify::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 5px solid #fff
}
.card-notify::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a5;
    border: 4px solid #f4f4f4
}

.card-notify::-webkit-scrollbar-button { display:none }

.list-group-notify {
    color: #5e7d8a !important;
}

.list-notify-title {
    font-size: 16px;
    font-weight: bold;
    color: #179c9b;
}

/* DASHBOARD CARD */
.card.card-dashboard {
    -webkit-box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);
    box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 5%);
    border: 0;

    backdrop-filter: blur(16px);
    background-color: rgba(255,255,255,0.85);
}

.card.card-dashboard.card-stretch {
    display: flex;
    -webkit-box-align: stretch !important;
    align-items: stretch !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.card.card-dashboard.card-border {
    /*box-shadow: 0 6px 10px rgb(0 0 0 / 10%);*/
    border: 1px solid #eaecec;
}

.card.card-dashboard.card-stretch.gutter-b {
    height: calc(100% - 25px);
}

.card.card-dashboard.card-link:hover {
    /*background-color: #f5f5f6;*/
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

.gutter-b {
    margin-bottom: 25px;
}

.bgi-no-repeat {
    background-repeat: no-repeat;
}

.text-muted {
    color: #B5B5C3 !important;
}

.text-muted2 {
    color: #9e9eab !important;
}

.font-size-h5 {
    font-size: 1.25rem !important;
}

.font-weight-bold {
    font-weight: 500 !important;
}

.text-dark-75 {
    color: #3F4254 !important;
}

.font-weight-bolder {
    font-weight: 600 !important;
}

/* ACRYLIC */
.acrylic {
    background-blend-mode: exclusion;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    filter: url(#blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="8");
}

.acrylic.default {
    background-color: rgba(43, 56, 62, 0.9) !important;
}

.acrylic.medium {
    background-color: rgba(43, 56, 62, 0.4) !important;
}

.acrylic.medium-high {
    background-color: rgba(43, 56, 62, 0.6) !important;
}

/* SIDE NOTIFY */
.nav.nav-tabs.nav-tabs-default .nav-link.active {
    border-bottom: 3px solid #A767FF !important;
    color: #FFF !important;
    bottom: -1px;
}

.nav.nav-tabs.nav-tabs-default .nav-link {
    color: #B5B5C3;
}

.nav.nav-tabs.nav-tabs-default .nav-link:hover {
    color: #B5B5C3 !important;
}

.nav.nav-tabs.nav-tabs-default {
    border-bottom: 2px solid #B5B5C3 !important;
    margin-bottom: 10px;
}

.navi {
    padding: 0;
    margin: 0;
    display: block;
    list-style: none;
}

.navi .navi-item {
    padding: 0;
    display: block;
    list-style: none;
}

.navi .navi-item .navi-link {
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    color: #3F4254;
    font-size: 1rem;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
}

.rounded {
    border-radius: 0.42rem !important;
}

.navi.navi-spacer-x-0 .navi-item .navi-link {
    padding-left: 0;
    padding-right: 0;
}

.navi .navi-item .navi-link .navi-text {
    color: #3F4254;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    font-size: 1rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.symbol {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    border-radius: 0.42rem;
}

.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #3F4254;
    /*243.246.249*/
    background-blend-mode: exclusion;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    filter: url(#blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="8");
    background-color: rgba(243, 246, 249, 0.9) !important;
    background-color: #F3F6F9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 0.42rem;
}

.symbol.symbol-50 .symbol-label {
    width: 50px;
    height: 50px;
}

.hk-wrapper .hk-settings-panel .settings-panel-wrap {
    padding: 0px 20px !important;
}

.tab-content.tab-side-notify {
    padding: 0px 15px 15px 15px !important;
}


/* TABLE */
.table-responsive-scroll::-webkit-scrollbar {
    background-color: #fff;
    width: 16px
}

.table-responsive-scroll::-webkit-scrollbar-track {
    background-color: #fff
}

.table-responsive-scroll::-webkit-scrollbar-track:hover {
    background-color: #f4f4f4
}

.table-responsive-scroll::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 5px solid #fff
}
.table-responsive-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a5;
    border: 4px solid #f4f4f4
}

.table-responsive-scroll::-webkit-scrollbar-button { display:none }


/* CHECKBOX */
/* Customize the label (the container) */
.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 25px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkmark {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    position: absolute;
    top: 7;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 25%;
    border: 2px solid #eaecec;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
    background-color: #1ebccd;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
    top: 2px;
    left: 2px;
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    color: white;
    font-weight: 700;
    font-size: 10px;
}

.input-block {
    margin-top: 20px;
    padding: 2rem 1rem 1rem 2rem;
    background: rgba(214, 217, 218, 0.2);
    box-shadow: rgb(0 0 0 / 2%) 0px 1px 3px 0px, rgb(27 31 35 / 15%) 0px 0px 0px 1px;
    border-radius: 6px;
}


/* DATE PICKER */
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background-color: #A767FF !important;
    color: #fff !important;
    background-image: none !important;
}

.datepicker table tr td.today.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today.disabled:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today[disabled] {
    background-color: #f5f5f6;
}

.datepicker table tr td.active {
    background-color: #179c9b !important;
    color: #fff !important;
    background-image: none !important;
}

/* CARD FINANCE */
.card-finance {
    border-top-right-radius: .25rem;
    border-top-left-radius: .25rem;
    border: 1px solid #d4d4d4;
    box-shadow: none;
}

.accordion.accordion-type-2 .card .card-header.card-header-report > a {
    color: #1ebccd;
    background-color: #d0b1fb;
}

.accordion.accordion-type-2 .card .card-header.card-header-report > a.collapsed {
    color: #324148;
    background-color: transparent;
}

.accordion.accordion-type-2 .card .card-header.card-header-report > a {
    color: #A767FF !important;
    font-weight: bolder !important;
    font-size: 16px;
}




/* 2ND SIDEBAR */
.fmapp-wrap {
    overflow: hidden;
}

.btn-side-close {
    border-radius: 10px;
    color: #6f7782;
}

.btn-side-close:hover {
    background-color: #e0e0e0;
}

.btn-bin:hover {
    border-radius: 5px;
    background-color: #eeeeee;
}

.fmapp-sidebar {
    background-color: #f7f7f7 !important;
    height: 100%;
    box-shadow: 0 5px 20px 0 rgb(21 27 38 / 8%);
    border-left: 1px solid #e8ecee;
    overflow: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.sb-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e8ecee;
    padding: 10px 15px 10px 20px;
    align-items: baseline;
}

.fmapp-wrap .fmapp-sidebar .fmapp-nav-wrap {
    padding: 0px 0px 15px 0px;
}

.sb-list {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8ecee;
}

@media (max-width: 450px) {
    .fmapp-wrap .fmapp-sidebar {
        width: 350px !important;
    }
}

/* TABLE SCROLL */
/* total width */
.table-plain-scroll::-webkit-scrollbar {
    background-color:#fff;
    width:16px
}

/* background of the scrollbar except button or resizer */
.table-plain-scroll::-webkit-scrollbar-track {
    background-color:#fff
}
.table-plain-scroll::-webkit-scrollbar-track:hover {
    background-color:#f4f4f4
}

/* scrollbar itself */
.table-plain-scroll::-webkit-scrollbar-thumb {
    background-color:#babac0;
    border-radius:16px;
    border:5px solid #fff
}
.table-plain-scroll::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
    border:4px solid #f4f4f4
}

/* set button(top and bottom of the scrollbar) */
.table-plain-scroll::-webkit-scrollbar-button {display:none}


/* SECTION */
.hk-sec-wrapper-custom {
    padding: 1.5rem 0rem 0rem 0rem !important;
}

.hk-sec-content {
    padding: 0rem 1.5rem 1.5rem 1.5rem !important;
}

.hk-sec-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
}

.hk-sec-footer-v2 {
    display: flex;
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
}

.border-top-white {
    border-top: 1px solid #FFF !important;
}

/* INFROM TABS */
.tabs-main {
    box-shadow: 0 6px 10px rgb(0 0 0 / 10%);
    border: 1px solid #eaecec;
}

.tabs-content-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    margin: 2.5rem -15px -15px;
}


/* FILE UPLOAD */
.upload-wrapper {
    border: 2px dashed #e0e0e0;
    font-family: inherit;
    color: #324148;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 200px;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 22px;
    /*background-color: #fff;*/
    background-color: #fbfbfb;
    background-image: none;
    text-align: center;
    -webkit-transition: border-color .15s linear;
    transition: border-color .15s linear;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-wrapper:hover {
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(135deg, #F6F6F6 25%, transparent 25%, transparent 50%, #F6F6F6 50%, #F6F6F6 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #F6F6F6 25%, transparent 25%, transparent 50%, #F6F6F6 50%, #F6F6F6 75%, transparent 75%, transparent);
    -webkit-animation: stripes 2s linear infinite;
    animation: stripes 2s linear infinite;
}

@-webkit-keyframes stripes {
    from {
        background-position: 0 0; }
    to {
        background-position: 60px 30px; } }

@keyframes stripes {
    from {
        background-position: 0 0; }
    to {
        background-position: 60px 30px; } }

.upload-wrapper .upload-message span.file-icon {
    font-size: 28px;
    color: #fff;
    height: 60px;
    width: 60px;
    background: #1ebccd;
    border-radius: 50%;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-wrapper input.upload-file {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

.list-file-group-item {
    border-color: #e0e0e0;
}

.custom-control-label::before {
    top: .15rem !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.custom-control-label {
    padding-left: 4px !important;
}

.custom-control-label::after {
    top: .09rem !important;
    left: -1.6rem !important;
    width: 1.3rem !important;
    height: 1.3rem !important;
}

/* Year Picker */
.yearpicker-container {
    z-index: 10 !important;
}

/* ********* */
/* Home Card */
/* ********* */

.home-shortcut {
    background-position: right top; background-size: 30% auto;
    cursor: pointer;
}

.home-shortcut.abstract01 {
    background-image: url(/img/abstract-1.svg);
}

.home-shortcut.abstract02 {
    background-image: url(/img/abstract-2.svg);
}

.home-shortcut.abstract03 {
    background-image: url(/img/abstract-3.svg);
}

.home-shortcut.abstract04 {
    background-image: url(/img/abstract-4.svg);
}

/* ************************ */
/* Search Result Table Card */
/* ************************ */

.btn.btn-clean {
    color: #179c9b;
    background-color: transparent;
    border-color: transparent;
}

.btn.btn-clean:hover {
    color: #017d60;
    background-color: transparent;
    border-color: transparent;
}

.search-option-default {
    color: #7E8299;
}

/* ************ */
/* Page Loading */
/* ************ */
#page-loading {
    z-index: 25000;
    /*background-color: #d35400;*/
    background: #A767FF;
    background: -webkit-linear-gradient(to top, #E7D7FF, #A767FF);
    background: linear-gradient(to top, #E7D7FF, #A767FF );
    background-repeat: no-repeat;
    background-size: cover;
    /*opacity: 0.8;*/
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-loading .spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

#page-loading .spinner > div {
    background-color: #FFF;
    height: 100%;
    width: 6px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

#page-loading .spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

#page-loading .spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

#page-loading .spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

#page-loading .spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}


/* ************************* */
/* Vue - Select              */
/* ************************* */
.v-select.single .selected-tag {
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 26px;
    margin: 4px 1px 0 3px;
    padding: 1px .25em;
    float: left;
    line-height: 24px;
    padding-left: 10px !important;
    font-weight: bold;
}

.select2-container--open {
    z-index: 9999999 !important;
}

/* ********* */
/* DataTable */
/* ********* */
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900; content: "\f107";
    background-color: transparent !important;
    border: 0px solid transparent !important;
    border-radius: 0px !important;
    top: 15px !important;
    color: #666 !important;
    box-shadow: none !important;
    left: 4px;
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    text-align: center;
    line-height: 14px;
    box-sizing: content-box;

}

.row-hover {
    background-color: #d0b1fb;
    color: #324148;
}


table.table-datatable tbody tr.odd:hover {
    background-color: #d0b1fb;
    color: #324148;
}

table.table-datatable tbody tr.odd:hover + tr {
    background-color: #d0b1fb;
    color: #324148;
}

table.table-datatable tbody tr.even:hover + tr {
    background-color: none !important;
    color: #324148;
}

.tr-summary,
.tr-remain{
    font-weight: 900;
    background-color: #F5F5F5;
}

/* ****************** */
/* Pure Toggle Switch */
/* ****************** */
.switch {
    display: inline-block;
    height: 26px;
    position: relative;
    width: 46px;
}

.switch > input {
    height: 0px;
    opacity: 0;
    width: 0px;
}

.switch > .switch-slider {
    -webkit-transition: .4s;
    background-color: #ccc;
    border-radius: 30px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.switch > .switch-slider:before {
    -webkit-transition: .4s;
    background-color: white;
    border-radius: 50%;
    bottom: 4px;
    content: "";
    height: 19px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 19px;
}

.switch > input:checked + .switch-slider:before {
    -ms-transform: translateX(20px);
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

.switch.switch-off-primary > input + .switch-slider { background-color: #2196F3; }
.switch.switch-off-success > input + .switch-slider { background-color: #5cb85c; }
.switch.switch-off-info > input + .switch-slider    { background-color: #5bc0de; }
.switch.switch-off-warning > input + .switch-slider { background-color: #f0ad4e; }
.switch.switch-off-danger > input + .switch-slider  { background-color: #d9534f; }
.switch.switch-off-muted > input + .switch-slider   { background-color: #555555; }

.switch.switch-primary > input:checked + .switch-slider { background-color: #2196F3; box-shadow: 0 0 3px #2196F3; }
.switch.switch-success > input:checked + .switch-slider { background-color: #5cb85c; box-shadow: 0 0 3px #5cb85c; }
.switch.switch-info > input:checked + .switch-slider    { background-color: #5bc0de; box-shadow: 0 0 3px #5bc0de; }
.switch.switch-warning > input:checked + .switch-slider { background-color: #f0ad4e; box-shadow: 0 0 3px #f0ad4e; }
.switch.switch-danger > input:checked + .switch-slider  { background-color: #d9534f; box-shadow: 0 0 3px #d9534f; }
.switch.switch-muted > input:checked + .switch-slider   { background-color: #555555; box-shadow: 0 0 3px #555555; }

.switch-label, .label-switch {
    float: left;
    font-weight: bold;
    padding-top: 5px;
}


.switch-sm {
    height: 26px;
    width: 48px;
}
.switch-sm > .switch-slider:before {
    height: 18px;
    width: 18px;
}
.switch-sm > input:checked + .switch-slider:before {
    -ms-transform: translateX(22px);
    -webkit-transform: translateX(22px);
    transform: translateX(22px);
}



/* v-select set style ref bootstrap*/
.v-select-form-control .vs__search::placeholder,
.v-select-form-control .vs__dropdown-toggle,
.v-select-form-control  {
    height: calc(2.25rem + 4px);
}

.file-import-group label {
    background-color: #179c9b;
    color: white;
    padding: 0.5rem;
    font-family: inherit;
    border-radius: 0.3rem;
    cursor: pointer;
    margin-top: 1rem;
}

file-import-group #file-chosen {
    margin-left: 0.3rem;
    font-family: inherit;
}

.all-total-budget {
    font-weight: bold;
    font-size: 15px;
}

/* Bubble Tree */
.bubbletree-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
}

.bubbletree {
    background: #fff;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.bubbletree .bubbletree-label {
    position: absolute;
    color: #fff;
    text-align: center;
    cursor: default;
}

.bubbletree .bubbletree-label2 {
    position: absolute;
    color: #000;
    text-align: center;
    cursor: default;
    font-size: 11px;
    margin-top: 5px
}

.bubbletree .bubbletree-amount {
    font-family: 'CSChatThaiUI', SansSerif;
    font-size: 13px;
}

.bubbletree .bubbletree-desc {
    font-family: 'CSChatThaiUI', SansSerif;
    font-size: 13px;
}

.bubble-card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.25rem;
}

/* Bubble Tree Tooltip */
#bubbletree-tooltip {
    position: absolute;
    z-index: 3000;
    padding: 5px;
    font-family: 'CSChatThaiUI', SansSerif;
    font-size: 13px;
    padding: 4px;
}

#bubbletree-tooltip .panel {
    margin-top: 10px !important;
    padding: 0.35em !important;
    border: 1px solid #BBBBBB !important;
    background: #FFFFFF !important;
    border-radius: 2px !important;
    font-family: 'CSChatThaiUI', SansSerif !important;
    box-shadow: 0 1px 6px rgb(0 0 0 / 30%) !important;
    white-space: nowrap !important;
}

#bubbletree-tooltip .panel .title {
    margin: 0 !important;
    font-weight: bold;
    cursor: pointer;
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* color: #1E4775 !important; */
    border-bottom: 1px solid #BBBBBB !important;
    margin-bottom: 7px !important;
    text-align: center;
    color: #A767FF;
}

#bubbletree-tooltip .panel .body {
    font-weight: bold !important;
    text-align: center !important;
    color: #747474;
}

#bubbletree-tooltip .amount {
    font-weight: bold;
}

.dashboard-dept-list .list-group-item:hover {
    background-color: #d0b1fb;
}

/* Loading Block */
.loading-custom {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    background-color: #fff;
    opacity: .8;
    transition: opacity .25s;
}

.loading-custom .spinning {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: transparent #22af47 #22af47;
    position: relative;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    will-change: transform;
    animation: spin .75s infinite ease-in-out;
}

.loading-custom:after {
    content: attr(data-text);
    font-family: 'CSChatThaiUI', SansSerif !important;
    font-weight: bold !important;
    display: block;
    max-width: 125px;
    position: relative;
    top: calc(50% - 145px);
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    color: #343a40;
    text-align: center;
    text-transform: uppercase;
}

@keyframes spin {
    0% { transform:translateZ(0) rotate(0deg); }
    100% { transform:translateZ(0) rotate(360deg); }
}

.loading-fade-enter-active, .loading-fade-leave-active {
    transition: opacity .5s;
}
.loading-fade-enter, .loading-fade-leave-to {
    opacity: 0;
}

/* Block UI */
.blockOverlay {
    z-index: 1000;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(142, 159, 167, 0.8);
    backdrop-filter: saturate(180%) blur(5px);
    /*background: rgba(23, 156, 155, 0.8);*/
    opacity: 1;
    cursor: default;
    position: absolute;
    display: none;
}

.blockMessage {
    z-index: 1011;
    position: absolute;
    padding: 0px;
    margin: 0px;
    width: 50%;
    width: 50%;
    top: 25%;
    left: 25%;
    text-align: center;
    color: #FFF;
    cursor: default;
    display: none;
}

#qrcode img {
    width: 80px;
    height: 80px;
    float: right;
}

/*** Portal ***/
.portal {
    position: relative;
    overflow: hidden;
}
.portal .card-body {
    padding: 2rem 2.25rem !important;
}
.portal.portal-pending::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -53px;
    right: -34px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    background-image: url('../img/portal/portal-pending.svg');
    transform: rotate(-10deg);
}
.portal.portal-handshake::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -53px;
    right: -34px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    background-image: url('../img/portal/portal-handshake.svg');
    transform: rotate(-5deg);
}
.portal.portal-cut::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -53px;
    right: -34px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    background-image: url('../img/portal/portal-cut.svg');
    transform: rotate(-5deg);
}
.portal.portal-expire::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -53px;
    right: -34px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    background-image: url('../img/portal/portal-expire.svg');
    transform: rotate(-5deg);
}

/*** Hoverable ***/
.hoverable:hover {
    border: 1px solid var(--default-color) !important;
    background-color: var(--default-light-color) !important;
}
.hoverable:hover .portal .card-body .svg-icon svg {
    color: var(--default-color) !important;
}
.hoverable:hover .portal .card-body .title h5 {
    color: var(--color-pink) !important;
}

/*** ฺBlock Overlay ***/
.block .block-overlay {
    z-index: 1000;
    transition: all .3s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,.6);
    backdrop-filter: blur(3px);
}
.block .block-message {
    display: flex;
    align-items: center;
    border-radius: 0.475rem;
    box-shadow: 0 0 50px 0 rgba(82,63,105,.15);
    background-color: #fff;
    color: #7e8299;
    font-weight: 500;
    margin: 0!important;
    width: auto;
    padding: 0.85rem 1.75rem!important;
}
.block .block-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 300ms, opacity 300ms linear;
}

/*** Table **/
.table thead tr:first-child th {
    border-left: 1px solid #E0E0E0 !important;
}
.table thead tr:last-child th {
    border-right: 1px solid #E0E0E0 !important;
}
.table tr td:first-child {
    border-left: 1px solid #eaecec !important;
}
.table tr td:last-child {
    border-right: 1px solid #eaecec !important;
}
.table tr:last-child td,
.tr-no-data td {
    border-bottom: 1px solid #eaecec;
}
.tr-no-data td:first-child {
    border-left: 1px solid #eaecec;
}
.tr-no-data td:last-child {
    border-right: 1px solid #eaecec;
}

/*** HighChart ***/
.highcharts-title {
    font-family: 'CSChatThaiUI', SansSerif !important;
}

/*** icheck customize ***/
.icheck-default>input:first-child:checked+input[type=hidden]+label::before,
.icheck-default>input:first-child:checked+label::before {
    background-color: #9e6ffc !important;
    border-color: #9e6ffc !important;
}
.icheck-default>input:first-child:checked+input[type=hidden]+label::after,
.icheck-default>input:first-child:checked+label::after {
    border-bottom-color: #FFF !important;
    border-right-color: #FFF !important;
}
.icheck-default > input[type="radio"]:first-child:checked + label::before,
.icheck-default > input[type="checkbox"]:first-child:checked + label::before,
.icheck-default > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before,
.icheck-default > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::before {
    background-color: #9e6ffc;
    border-color: #9e6ffc;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #9e6ffc !important;
    border-color: #9e6ffc !important;
}

/*** Tabs Customize ***/
.sw-theme-arrows>.nav .nav-link.active {
    border-color: #9e6ffc !important;
    background-color: #9e6ffc !important;
}

.sw-theme-arrows>.nav .nav-link.active::after {
    border-left-color: #9e6ffc !important;
}

.sw>.progress>.progress-bar {
    background-color: #9e6ffc !important;
}

.sw-theme-arrows>.nav .nav-link.done {
    border-color: #e3d7fd !important;
    background-color: #e3d7fd !important;
}

.sw-theme-arrows>.nav .nav-link.done::after {
    border-left-color: #e3d7fd !important;
}

.toast {
    position: fixed; /* ใช้ fixed positioning เพื่อให้ toast อยู่ใน viewport เสมอ */
    bottom: 0px; /* กำหนด offset ด้านบนจากขอบบนของ viewport */
    right: 10px; /* กำหนด offset ด้านขวาจากขอบขวาของ viewport */
    z-index: 1000; /* ตรวจสอบให้แน่ใจว่า toast อยู่เหนือ element อื่นๆ */
    background-color: white !important;
}
.toast-body {
    display: flex; /* เปิดใช้งาน Flexbox */
    flex-wrap: wrap; /* อนุญาตให้ badges พันกันเป็นบรรทัดใหม่เมื่อจำเป็น */
    align-items: flex-start; /* จัดตำแหน่ง badges แนวตั้งตามด้านบน */
    justify-content: flex-start; /* จัดตำแหน่ง badges แนวนอนตามด้านซ้าย */
    padding: 1rem; /* เพิ่ม padding รอบๆ toast-body */
    border: 1px solid #ccc; /* เพิ่มขอบ */
    background-color: #fff; /* ตั้งค่าสีพื้นหลัง */
}

.badge {
    margin-left: 5px; /* Add spacing between adjacent badges */
    margin-bottom: 5px; /* Add spacing between badges on the same line */
    font-size: 90% !important;
}

.datepicker table tr td.active {
    background-color: #A767FF !important;
}


.datepicker table tr td span.active {
    background-image: linear-gradient(0deg, #A767FF, #A767FF) !important;
}

/* ===================== Cookies Policy =====================
 * Minimal / Swiss: พื้นขาว เส้นแบ่งบาง สีแบรนด์ #A767FF ใช้กับไอคอนและเส้นขอบเท่านั้น
 * ตัวอักษรที่เป็นสีใช้โทนเข้ม (contrast >= 4.5:1 บนพื้นขาว)
 */
.cookie-policy {
    --cp-brand: #A767FF;          /* ไอคอน / เส้นขอบ */
    --cp-brand-text: #6D28D9;     /* ลิงก์ / ตัวเลข (7:1) */
    --cp-brand-soft: #F6F1FF;
    --cp-fg: #324148;             /* สีตัวอักษรหลักของธีม */
    --cp-muted: #5E6B73;          /* 5.6:1 */
    --cp-border: #EAECEC;         /* เส้นขอบเดียวกับ hk-sec-wrapper */
    --cp-surface: #FAFAFB;
    --cp-focus: #6D28D9;
    color: var(--cp-fg);
}
.cookie-policy p { line-height: 1.8; margin-bottom: 12px; }
.cookie-policy a { color: var(--cp-brand-text); text-decoration: underline; text-underline-offset: 2px; }
.cookie-policy a:hover { color: #5B21B6; }
.cookie-policy a:focus-visible {
    outline: 2px solid var(--cp-focus);
    outline-offset: 2px;
    border-radius: 4px;
}
.cookie-policy .cp-lead {
    font-size: 15px;
    padding: 14px 18px;
    margin-bottom: 24px;
    border-left: 3px solid var(--cp-brand);
    background: var(--cp-surface);
    border-radius: 0 .25rem .25rem 0;
}

/* สารบัญ */
.cookie-policy .cp-toc {
    position: sticky;
    top: 80px;
    border: 1px solid var(--cp-border);
    border-radius: .25rem;
    padding: 12px 8px;
}
.cookie-policy .cp-toc-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-muted);
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--cp-border);
    margin-bottom: 6px;
}
.cookie-policy .cp-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: cp-toc; }
.cookie-policy .cp-toc li { counter-increment: cp-toc; }
.cookie-policy .cp-toc a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 .25rem .25rem 0;
    font-size: 14px;
    color: var(--cp-fg);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cookie-policy .cp-toc a::before {
    content: counter(cp-toc);
    flex: 0 0 auto;
    min-width: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-muted);
}
.cookie-policy .cp-toc a:hover { background: var(--cp-brand-soft); color: var(--cp-brand-text); }
.cookie-policy .cp-toc a.is-active {
    border-left-color: var(--cp-brand);
    background: var(--cp-brand-soft);
    color: var(--cp-brand-text);
    font-weight: 600;
}
.cookie-policy .cp-toc a.is-active::before { color: var(--cp-brand-text); }

/* หัวข้อ */
.cookie-policy .cp-section {
    padding: 22px 0;
    border-top: 1px solid var(--cp-border);
    scroll-margin-top: 80px;
}
.cookie-policy .cp-section:first-child { border-top: 0; padding-top: 0; }
.cookie-policy .cp-section:focus { outline: none; }
.cookie-policy .cp-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--cp-fg);
    margin-bottom: 14px;
}
.cookie-policy .cp-num {
    flex: 0 0 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-brand-text);
    background: var(--cp-brand-soft);
    border: 1px solid #E4D6FF;
}

/* กล่องเนื้อหาย่อย */
.cookie-policy .cp-box {
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--cp-border);
    border-radius: .25rem;
    background: #fff;
}
.cookie-policy .cp-box p { margin: 0; font-size: 14px; }
.cookie-policy .cp-box-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 8px;
}
.cookie-policy .cp-box-head > svg,
.cookie-policy .cp-box-head > i { color: var(--cp-accent, var(--cp-brand)); width: 18px; }
.cookie-policy .cp-box-sub {
    font-size: 13px;
    color: var(--cp-accent-text, var(--cp-muted));
    margin: -4px 0 8px 28px;
}

/* หมวดคุกกี้: สีเป็นตัวช่วยเสริม (มีชื่อหมวดกำกับเสมอ) */
.cookie-policy .cp-cat--necessary   { --cp-accent: #10B981; --cp-accent-text: #047857; --cp-accent-soft: #ECFDF5; }
.cookie-policy .cp-cat--performance { --cp-accent: #3B82F6; --cp-accent-text: #1D4ED8; --cp-accent-soft: #EFF6FF; }
.cookie-policy .cp-cat--functional  { --cp-accent: #A767FF; --cp-accent-text: #6D28D9; --cp-accent-soft: #F6F1FF; }
.cookie-policy .cp-cat--targeting   { --cp-accent: #F97316; --cp-accent-text: #C2410C; --cp-accent-soft: #FFF7ED; }
.cookie-policy .cp-cat { border-top: 3px solid var(--cp-accent); }

/* ตัวอย่างคุกกี้ */
.cookie-policy .cp-examples { margin: 0; border: 1px solid var(--cp-border); border-radius: .25rem; }
.cookie-policy .cp-example {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border-top: 1px solid var(--cp-border);
}
.cookie-policy .cp-example:first-child { border-top: 0; }
.cookie-policy .cp-example dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-accent-text);
    padding-top: 3px;
}
.cookie-policy .cp-example dt > svg,
.cookie-policy .cp-example dt > i { color: var(--cp-accent); width: 16px; }
.cookie-policy .cp-example dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cookie-policy .cp-example code {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--cp-fg);
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    word-break: break-all;
}

/* ลิงก์เบราว์เซอร์ */
.cookie-policy .cp-browsers {
    list-style: none;
    padding: 0;
    margin: 4px 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.cookie-policy .cp-browsers a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--cp-border);
    border-radius: .25rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--cp-fg);
    text-decoration: none;
    background: #fff;
    transition: border-color .2s ease, background-color .2s ease;
}
.cookie-policy .cp-browsers a > svg:first-child,
.cookie-policy .cp-browsers a > i:first-child { font-size: 18px; color: var(--cp-brand); width: 20px; flex: 0 0 auto; }
.cookie-policy .cp-browsers span { flex: 1 1 auto; line-height: 1.3; }
.cookie-policy .cp-browsers small { color: var(--cp-muted); font-size: 12px; }
.cookie-policy .cp-browsers .cp-ext { font-size: 11px; color: var(--cp-muted); flex: 0 0 auto; }
.cookie-policy .cp-browsers a:hover { border-color: var(--cp-brand); background: var(--cp-brand-soft); }

/* Callout */
.cookie-policy .cp-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: .25rem;
    border: 1px solid #E4D6FF;
    background: var(--cp-brand-soft);
}
.cookie-policy .cp-callout p { margin: 0; font-size: 14px; }
.cookie-policy .cp-callout > svg,
.cookie-policy .cp-callout > i { color: var(--cp-brand-text); margin-top: 5px; flex: 0 0 auto; }
.cookie-policy .cp-callout--warning { border-color: #FDE68A; background: #FFFBEB; }
.cookie-policy .cp-callout--warning p { color: #78350F; }
.cookie-policy .cp-callout--warning > svg,
.cookie-policy .cp-callout--warning > i { color: #B45309; }

/* ติดต่อ */
.cookie-policy .cp-contact { border: 1px solid var(--cp-border); border-left: 3px solid var(--cp-brand); }
.cookie-policy .cp-contact .card-title { font-size: 16px; font-weight: 600; color: var(--cp-fg); }
.cookie-policy .cp-contact .card-title > svg { color: var(--cp-brand); }
.cookie-policy .cp-contact-items { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.cookie-policy .cp-contact-items a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    text-decoration: none;
    color: var(--cp-fg);
    font-weight: 600;
}
.cookie-policy .cp-contact-items a > svg { color: var(--cp-brand); font-size: 16px; width: 18px; }
.cookie-policy .cp-contact-items span { line-height: 1.3; }
.cookie-policy .cp-contact-items small { display: block; font-weight: 400; font-size: 12px; color: var(--cp-muted); }
.cookie-policy .cp-contact-items a:hover span { color: var(--cp-brand-text); text-decoration: underline; }

@media (max-width: 767.98px) {
    .cookie-policy .cp-example { grid-template-columns: 1fr; gap: 8px; }
    .cookie-policy .cp-browsers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cookie-policy .cp-browsers .cp-ext { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-policy * { transition: none !important; }
}