:root {
    --primary-light: #565d9f;
    --primary-main: #454979;
    --primary-dark: #3f4369;

    --color-1: #FFDB58;
    --color-2: #DCAE96;
    --color-3: #F7F7FE;
}

.switch-toggle {
    display: flex;
    align-items: cente
    
    r;
    gap: 10px;
}

.switch-toggle .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch-toggle .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

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

.switch-toggle input:checked+.slider {
    background-color: #28a745;
}

.switch-toggle input:checked+.slider:before {
    transform: translateX(19px);
    -webkit-transform: translateX(19px);
    -moz-transform: translateX(19px);
    -ms-transform: translateX(19px);
    -o-transform: translateX(19px);
}

.switch-toggle .label {
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    font-size: 9px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.switch-toggle input:checked+.slider .label {
    content: "Active";
    color: #fff;
}

table.table thead th {
    background-color: #F3F3F3;
}

table.table thead th:first-child {
    /* border-top-left-radius: 6px; */
    /* border-top-right-radius: 6px; */
    /* border-bottom-left-radius: 6px; */
}

table.table thead th:last-child {
    /* border-top-right-radius: 6px; */
    /* border-bottom-right-radius: 6px; */
}

.table-responsive::-moz-scrollbar,
.table-responsive::-webkit-scrollbar {
    display: none !important;
    scrollbar-width: none !important;
}


.table-responsive::-moz-scrollbar,
.table-responsive::-webkit-scrollbar-thumb {
    background-color: red !important;
    border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -ms-border-radius: 10px !important;
    -o-border-radius: 10px !important;
}

/*Change Font in Toast Message */

.toast {
    border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -ms-border-radius: 8px !important;
    -o-border-radius: 8px !important;
}

.toast-success,
.toast-info,
.toast-warning,
.toast-error {
    width: 400px !important;
    font-size: 0.75rem;
    background-color: #edf1fd;
    color: #01081e !important;
    border-radius: 1rem !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 8px !important;
    border-color: transparent !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -ms-border-radius: 8px !important;
    -o-border-radius: 8px !important;
}

/*change close button design customize*/
.toast-close-button {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #ccd7fc !important;
}

.toast-close-button>i {
    color: #000617;
    font-weight: 500;
}

#toast-container>.toast-success {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKLSURBVHgBzZZNbtpAFMffjMFRQY28hFKpzg1gGZFKWGkqdZX2BHVOUHIC4AQ0J6g5QZVVpDTUqC10V3GDelGqSF3UG1cqgZm+GYIVbPAHoCp/CWY89sxP78289wbgP4tAShW+XugwyeiiP6Xc/VV9PkwzPxao2e+1fHbXBEqOgfEyztDCq5AecN4ZVQ+tuPUigY8H9hvOWHMpZLkc/LWiwEuBwqqcqrUJMBPWk+WN6alrGG4sULpQfWjjqzJsJDL0xsQIQmnws7y6294cJsTLeZW1g6MLwFK/a2JjwvZkFgfd+kogqgFbFuXQ0GxbCwFvrdNhHXHew3+Lz05pUNqD7MQMAYGT17AebTg6eGZMx+PWqhijVDme9zP+KOE1SItCixhVXom+oqp4sld4iHP/EEoLS/3LcsSqrnQVtsFXaFHret9wHvXtBkRvh1b81n3iA6eMrM4kBNw/Y1qZKrSyuEf8TGSUwucPNUwQTYiR4rE9HxgjPb/DGsISytiJRCHYyynNgn2hK5S+gxSaATMZJ/IrDvXip6uXP54e9QjjZ4xSw60YLu5bnCt9/cXKIlr/YGFY/MYmKkm7eBIr18YLRzzIxM7ZW0godL9k3Q2LuLqmKTs70n3ClbKKJBWRcQqLQJiex07kvFYafLRlCCQvWcKYjs+ed3RMPzcq+w6QYqEkLDxgP6uHe/Nn30JHlBEOLdiyRKwGnhdV+nJl4ZVhzTQXkoWH5eTuQCgOszdKXRRP2Fh86OXoaXA0BBSuzWKlFpciWJvFO5gYZKwGX0VeokTJwk1vkKRlS+Zb1hodHK2Mz0T3UlkrRflaVlEkhOMWkHMvT61lVqUGLsIvy+Q22WcyE8fZn2Wee6t/lXrvcWjggekAAAAASUVORK5CYII=') !important;
}

#toast-container>.toast-info {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJaSURBVHgBvVZNbtNQEJ55idd4hSphKnOCkhM0PQHpCUhuADsWLTgkQuwQJyCcoOEEpSfAnKBW6cK0m6wb+U1nXu04bdLkTRT1kxLnOR5/b/7eNwge2Dn61ybEN4agbRFiBAjlPgFM+HfK1xSJfuXDl7/XvQtXEh1fdvnyiT8xeAEzgKKfD3ZHjz6xlOjDeYzN4IQQXsNGYOLpzUH+9VX28B+zQPbx8i0FwZ/NyQQUI7/j+dFFZ2Er8wt5wKA5gW0CoZt/jn7WyxISRvGsKojt8cGEptNWFd46pEFw6kfG+SE6KBrQ4kW27mmu4FDqoVo7wrIaY/AB2Z6U/3USpZbsey8Troed44vujBDuSt8LSDgrJs63IvwNx4HS1IB46msmObEAfUR8RkTvVDnnVDTZoEPgD5cTgG9svPrUWG7babLZntJowl8Ze5hKv/Gttr817htdg+MIucT/D6NWPnjR4/PzLyhg+Bw2ur6jLrfPj9lKH53QgBI07xVqwnkH43KiACKlcnXVrYRUuOHvTGNUFMYRsj6qD3fRTWMsnfkayA6vv0RpudoHJSQdEtKxtwHvsGZ3LaECb3hsyrEg8zGoCiZMzkMkrV5iJlxVlfa9TCym9W5xLB/wRuE4HGE+iEZ8AKRrbRpl3ibirf1OQJ5esnflnFMLcMICXGxfgN1k12ABTh4IsNxA8NM3FaHoZ1IPU/dOGnGbRfVQexgsJXLvsL2r4e69PC8fEzm8UASikTFsAK7glJrTw3nPVhLOiJ9qEF4gllGfxZPbYE/kbH7UF23kX2fS1D6j/i3BTfaqkKQ1ngAAAABJRU5ErkJggg==') !important;
}

#toast-container>.toast-warning {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHbSURBVHgBxZZPTsJAFMa/NxDEjYJE1/UGcgOP4BEwARNXeAP0BMSVCzWNJxBPIDfQG8COhSSwJBH7fFNbaKV/ZsA/vwVppzPz5Zt58zHAH0OwZOCisjNHgxWmBYVe9RRTm/FWgiMXzpZHz/LoBE1DUly3EVWwoOSpTkRM43hzXMACY4eBu0HCp6m4PDR1aeywzOSmfKrYuDQSHN9LkTCOFw3Mr/I7DF9JUXt0E1vqzQQVqBN5ne41UdfFop+DtkqppDpmc+Wg3SFeKL5IsGeLfSNw4+02sgrrCn5zl0mhkN83U3DiqjZgtjc+ss95LlMF9TFgj63OmCbPZapgGZbuQsRlsO/mguu6W05KnYlkbvK3BIII24TUyFsR1O50iWNDdBgkuVwR/AF3IYmRFwtvXdIF5f/9ZOGH9UwmlDB/0RPn9Y0Ge8yhiLnIp8IiZCDm9/U81Y02LBzqUpbqMhG0Zv7B9YMz6MBfOrSJMDkyV8z8YNq/WKTuUgeJAZ2hxk+1Fi5rTTSIuWc2Zhl5Sh8DG3dQtLuYh+jIdFgYeTS+w4kieoQdQ3wVTF7RxNhmdopSNlaDAhyswexd8kDfLRG5LvwWUmTX1XO5VoYNemmJYbwnNnhAf7+FPv6DT2e/n0VFnPgUAAAAAElFTkSuQmCC') !important;
}

#toast-container>.toast-error {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIlSURBVHgB3VbBbtNAEH2zTugFFIPgwAlzA4mK8AdrvgC+APiSKl/S9AvoH8SfEEQP3PCNAwjcA6IQeYcdYxtvbK/jNr30SVG86519npk3swvcdNCuC7880dF0Ck1QzxVMKHMGKmOYD5sNkoefknSXfQYJvz7TekJ0xIAe2CjJwSf3PybLgXXd+BzpcHZHHQP8CiPAoOWfjVn0edxJKOE7mNLKPka4HNLfG467SOkayGpSCvjF3XWSNSfV9qpbU3W0BzJBxLmkxIXj4bdD/VaBjrFH5Mzxg7MkqcaOhwHwBuOR+V4GVuHNcU0oubMK032GNh+P5Wdjsq4nGet6vh/619OXj1qEUtQeI/EiswJISXFckArZhGMRxcUFvPhJJm4REmPusQnZ0OrHXIdCIKQVmdTrwYTee2xBStV7T/7PIvQZWY/mJWlcSb1oDrdtCZH3Y6HIzOpnjIFxh2E4eofGcvarrZkz8awZXkdIXd/J6rxFyH6jzJK9rsgkjNs5hac8mMy6RRgESDyEECU6OStzKuVk30lwezXQ3NvpNN8Pte2h/bVYeuEX1zYYyb2zVbssBDljMWA+jszCEJ80xw7hv57Hp9gTCLzcPpBboqYA7+xfiqsjtc25FbEWYaG6oFBdiiuQyR7SCgcJS9LCgOHGfxfYMJ6WB2/a/X4AxRnJ9tgir3oLNdpL1KJ59l2KsIIt8ijP7TWRixqcldbn0jDGXBNvPv4C3QjuTqveJGAAAAAASUVORK5CYII=') !important;
}

.toast-container {
    padding: 3rem;
    margin: 0 auto;
    width: 700px;
    height: 500px;
    background-color: #eff2fb;
    font-family: 'Poppins', sans-serif;
}

.toast-close-button,
.toast-close-button:focus,
.toast-close-button:hover {
    background-color: #696cff !important;
}

.toast-message {
    font-size: 14px
}

.references {
    margin-top: 2rem;
    font-size: 0.75rem;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.references a {
    text-decoration: none;
    text-align: left;
}

.product-box {
    width: 180px;
    height: 157px;
    border-radius: 10px 0px 0px 0px;
    opacity: 0px;
}

.product-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
    background-color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 26px;
    color: #000000;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.product-card {
    border-radius: 6px;
    background: #F3F3F3;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.product-subname {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    line-height: 27px;
    text-align: left;
    text-decoration-skip-ink: none;
}

.product-btn {
    font-size: 14px;
    color: inherit;
}

.product-label {
    font-size: 12px;
    border-radius: 50px;
    padding: 0px 2px 0 10px;
    border: 1px solid #9D9D9D;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.n-card {
    background: #F3F3F3;
}

.ui-datepicker-header {
    background-color: #696cff;
    color: white;
    text-align: center;
    height: 40px;
    border-radius: 8px 8px 0px 0px;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none;
}

.ui-datepicker-prev:after {
    float: left;
    content: "◀";
    font-size: 1rem;
    cursor: pointer;
    margin-top: 8px;
    margin-left: 10px;
}


.ui-datepicker-next:after {
    content: "▶";
    float: right;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 8px;
    margin-right: 10px;
}

.ui-datepicker-calendar th {
    padding: 8px;
    color: #696cff;
}

.ui-datepicker-calendar {
    text-align: center;
    margin: 0 auto;
    padding: 8px;
}

.ui-datepicker-title {
    padding: 9px;
}

.ui-datepicker-calendar td {
    padding: 4px 0px;
    text-align: center;
}

.ui-datepicker-calendar .ui-state-default {
    text-decoration: none;
    color: black;
}

.ui-datepicker-calendar .ui-state-active {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    background-color: #696cff;
    border-radius: 50%;
}

.quantity-order {
    border-radius: 10px;
    border: 1px solid #9D9D9D;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-color: #E9E9E9;
}

.quantity-order input:focus,
.quantity-order input {
    outline: 0px;
    box-shadow: none;
    border-color: transparent;
}

.quantity-order button {
    border: none;
    padding: 0;
    width: 35px;
    height: 35px;
}

.remove-btn {
    background: linear-gradient(90deg, #CB0700 0%, #FF5757 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
}

/* .add-item {
    background: linear-gradient(90deg, #454979 0%, #79456F 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
} */
.add-item {
    background: #454979;
    color: #fff;
    border: none;
    border-radius: 10px;
}

.add-item:hover,
.remove-btn:hover {
    color: #fff;
}

.primary-btn {
    color: white;
    white-space: nowrap;
    background-color: var(--primary-main);
    transition: all 350ms ease;
    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.primary-btn:hover {
    color: white;
    background-color: var(--primary-light);
}

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

.primary-border-btn:hover {
    color: var(--primary-main);
    border: 1px solid var(--primary-main);
}

.cross-btn {
    cursor: pointer;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #9D9D9D;
    top: -7px;
    font-size: 13px;
}

.cross-btn i {
    font-size: 13px;
}

.widget-text {
    text-transform: uppercase;
    font-size: 10px;
}

.widget-data {
    font-size: 10px;
}

.widget-data i {
    font-size: 10px;
    font-size: 10px;
    transform: rotate(45deg);
}

.widget-link {
    font-size: 10px;
}

.widget-icon {
    width: 30px;
    height: 30px;
    color: #fff;
}

table.table-bordered.dataTable thead th,
table.table-bordered.dataTable tbody td {
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-top-width: 1px !important;
}

table.dataTable {
    border-collapse: collapse !important;
}

.loading-overlay {
    display: none;
    background: rgba(255, 255, 255, 0.7);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9998;
    align-items: center;
    justify-content: center;
}

.loading-overlay.is-active {
    display: flex;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #696CFF;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.chat-room-item {
    background: #fff
}

.chat-p-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #454978;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.participants {
    font-size: 13px;
}

.chat-room-info {
    flex-basis: calc(100% - 40px);
}

.chat-room-item.active {
    background: #454978 !important
}

div#card-header>.chat-p-icon,
.chat-room-item.active .chat-p-icon {
    border-color: #fff;
    color: #fff
}

.chat-room-item.active .chat-room-info {
    color: #fff
}

.user-profile-header-banner img {
    block-size: 250px;
    inline-size: 100%;
    object-fit: cover
}

.user-profile-header {
    margin-block-start: -2rem
}

.user-profile-header .user-profile-img {
    border: 5px solid;
    border-color: var(--bs-paper-bg);
    inline-size: 120px
}

@media(max-width: 767.98px) {
    .user-profile-header-banner img {
        block-size: 150px
    }

    .user-profile-header .user-profile-img {
        inline-size: 100px
    }
}