:root {
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 10px;
    --bs-link-color: #0E60A6;
    --bs-link-hover-color: #0E60A6;
    --bs-link-color-rgb: 23, 133, 194;
    --bs-link-hover-color-rgb: 2, 88, 132;
    --bs-body-color: #FFFFFF;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-body-bg: #252C3A;
    --bs-body-bg-rgb: 49, 57, 73;
    --bs-tertiary-bg: #313949CC;
    --bs-tertiary-bg-rgb: 49, 57, 73;
    --bs-body-line-height: 1.2;
    --bs-primary-rgb: 49, 57, 73;
    --bs-secondary-rgb: 37, 44, 58;
}

body {
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-size: 16px;
    overflow: overlay;
}

[data-bs-toggle="collapse"] .main-menu-icon:before {
    content: "expand_less";
}

[data-bs-toggle="collapse"].collapsed .main-menu-icon:before {
    content: "expand_more";
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(219, 219, 219, 0.5);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(219, 219, 219, 1);
}

.nav-tabs {
    --bs-nav-tabs-border-color: #636363;
}

.nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    isolation: isolate;
    border-color: transparent;
    background-color: #353E50;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #ffffff;
    font-weight: 600;
    background-color: transparent;
    border: none;
    border-bottom: solid 3px rgba(0, 131, 201, 1);
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    margin-top: -10px;
    min-width: 280px;
    max-width: 280px;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -280px;
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -280px;
    }

    #sidebar.active {
        margin-left: 0;
    }

    /* #sidebarCollapse span {
            display: none;
        } */
}


.badge {
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
    border-radius: 4px;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1785C2;
    --bs-btn-border-color: #1785C2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0E60A6;
    --bs-btn-hover-border-color: #0E60A6;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0E60A6;
    --bs-btn-active-border-color: #0E60A6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #636363;
    --bs-btn-disabled-bg: #dbdbdb;
    --bs-btn-disabled-border-color: #636363
}

.btn-primary-table {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1785C2;
    --bs-btn-border-color: #1785C2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0e5fa698;
    --bs-btn-hover-border-color: #0E60A6;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0e5fa698;
    --bs-btn-active-border-color: #0E60A6;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #636363;
    --bs-btn-disabled-bg: #dbdbdb;
    --bs-btn-disabled-border-color: #636363;
    border-radius: 6px;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #252C3A;
    --bs-btn-border-color: #252C3A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #202632;
    --bs-btn-hover-border-color: #202632;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #202632;
    --bs-btn-active-border-color: #202632;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #252C3A;
    --bs-btn-disabled-border-color: #252C3A
}

.btn-lg {
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 16px;
    --bs-btn-border-radius: 0.375rem !important
}

.btn-md {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 16px;
    --bs-btn-border-radius: 0.375rem !important
}

.btn-radio {
    border-radius: 6px;
    border: 1px rgba(255, 255, 255, 0.75) solid;
    height: 38px;
    padding: 8px;
    color: rgba(255, 255, 255, 0.90);
}

.btn-radio:hover {
    border: 0.50px red solid;
}
.btn-check+.btn:hover {
    /* border: 0.50px #636363 solid;
    background-color: rgba(99, 99, 99, 0.30); */
    background-color: rgba(4, 103, 154, 0.05);
    border: 0.5px #0083C9 solid;
    color: #0083C9;
}

.tab-select-rday .btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: rgba(4, 103, 154, 0.20);
    border: 0.50px #0083C9 solid;
    color: #0083C9;
}

.form-control {
    background-color: rgba(255, 255, 255);
    color: #252C3A;
}

.form-control:focus {
    box-shadow: 0px 0px 1px 2px rgba(0, 131, 201, 0.5);
    background-color: rgba(255, 255, 255);
    font-weight: 500;
    color: #252C3A;
}

.form-control:hover {
    border: 1px solid var(--color-primary-blue-0083-c-9, #0083C9);
    box-shadow: 0px 0px 1px 2px rgba(0, 131, 201, 0.25);
    background-color: rgba(255, 255, 255);
}

.form-control:disabled:hover {
    background-color: #acacac;
    cursor: not-allowed;
}

.form-control-lg {
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    font-size: 16px;
    border: 1px solid #ffffff50;
    color: #252C3A;
    border-radius: 0.375rem;
    letter-spacing: 0.015rem;
}

.form-control-ticket {
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    height: 42px;
    font-size: 16px;
    border: 1px solid #ffffff50;
    color: #ffffff;
    background-color: #252C3A;
}

.form-control-font {
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    font-size: 16px;
    border: 1px solid #636363;
    color: #252C3A;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-text-dark) !important;
}

.btn-padding-none {
    --bs-btn-padding-x: 0rem !important;
}

.p-login {
    background: url(../images/login-bg.png), lightgray 50% / cover no-repeat;
}

.login-bg {
    background-color: #9d9d9db2;
    background-image: url(../images/login-bg-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.login-bg-card {
    background-color: #00000030;
}

.login-card {
    margin-top: 15vh;
    width: 1130px;
    height: 680px;
    border-radius: 48px;
    background: rgba(49, 57, 73, 0.40);
    box-shadow: 20px 20px 50px 0px rgba(0, 0, 0, 0.18);
}

.login-logo {
    margin-top: 64px;
    margin-bottom: 39px;
}

.login-img {
    width: 533px;
    height: 600px;
    border-radius: 24px;
    margin: 40px;
}

.login-form h1 {
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.navbar-logo {
    /* width: 234px; */
    display: block;
    max-width: 100%;
    height: auto;
    /* margin: 0 auto; */
    margin-left: 4px;
}

.navbar-avatar {
    max-width: 32px;
    max-height: 32px;
}

@media screen and (max-width: 768px) {
    .navbar-logo {
        max-width: 75%;
        /* Adjust the size as needed for smaller screens */
    }

    /* .navbar-avatar {
        max-width: 9%;
        max-height: 9%;
    } */
}



.navbar {
    border-bottom: 1px solid #FFFFFF;
    /* height: 64px; */
}

.sidebar {
    margin-top: 70px;
    border-right: 1px solid #636363;
    position: fixed;
    height: 100%;
    width: 280px;
    overflow: scroll;
}

.sidebar-menu a {
    text-decoration: none;
}

.header-menu {
    color: #04679A;
    margin-top: 8px;
    margin-bottom: 8px;
}

.main-menu a {
    color: #FFFFFF;
    margin-bottom: 8px;
    margin-top: 8px;
}

.main-menu a:hover {
    color: #0083C9;
}

.main-menu-icon {
    color: #FFFFFF;
    margin-bottom: 8px;
    margin-top: 8px;
}

.sub-menu a .btn {
    color: #FFFFFF;
    margin-bottom: 4px;
    border: none;
    text-align: left;
    /* text-indent: 14px; */
    padding-left: 28px
}

.sub-menu a .btn.active {
    background-color: rgba(0, 131, 201, 0.20);
    color: #0083C9;
}

.sub-menu a:hover .btn {
    background-color: rgba(99, 99, 99, 0.30);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #FFFFFF75;
    font-size: 16px;
    letter-spacing: 0.025em !important;
}

.breadcrumb-item.active {
    color: #1785C2;
    font-size: 16px;
    font-weight: 400;
}

.breadcrumb {
    font-size: 16px;
    color: #FFFFFF75;
}

.breadcrumb-item a {
    font-size: 16px;
    color: #FFFFFF75;
    text-decoration: none;
}

.content {
    min-height: 750px;
    /* margin-left: 280px; */
    padding: 85px 10px 0 10px;

    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}

.blog {
    height: 154px;
    background-color: #313949;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
}

.blur-content {
    filter: blur(200px);
    opacity: 0;
    /* Adjust the blur value as needed */
}

.no-blur {
    background-color: transparent;
}

.contentframe {
    padding: 12px;
    transition: all 0.3s;
}

.bg-dashboard {
    background: #313949;
    border-radius: 10px;
}

.bg-darkblue {
    --bs-bg-opacity: 1;
    background: #313949;
    border-radius: 10px;
}

.bg-darkblue-ticket {
    --bs-bg-opacity: 1;
    background: #3e485c;
    border-radius: 10px;
    padding: 12px 8px 16px 8px;
}

.bg-darkblue-admin {
    --bs-bg-opacity: 1;
    background: #2A3140;
    border-radius: 10px;
    padding: 12px 8px 16px 8px;
}

.bg-dashboard-email {
    background: #313949;
    border-radius: 10px;
    height: 154px;
}

.bg-dashboard-email-flex {
    height: 154px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.bg-dashboard-fix {
    background: #313949;
    border-radius: 10px;
    height: 394px;
}

.bg-manual {
    background: #313949;
    border-radius: 10px;
    height: 588px;
}

.card {
    --bs-card-border-width: 0;
}

.card-form {
    padding: 16px;
}

.card-body {
    padding: 0;
}

.card .card-header-agent {
    background-color: #353E50;
}

.card .card-agent {
    background-color: #353E50;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.card .reply-admin {
    background-color: rgba(37, 44, 58, 0.5);
}

.text-time-reply {
    color: #969696;
    font-size: 12px;
    font-weight: 300;
}

h5.ticket-subject {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;

}

h6.ticket-subject {
    font-size: 16px;
    font-weight: 600;
    color: #1785C2;
}

.report-smime-h3 {
    font-size: 20px;
    font-weight: 700;
    color: #04679A;
    margin-top: 74px;
    margin-bottom: 8px;
}

.report-smime-h6 {
    font-size: 16px;
    font-weight: 500;
}

.report-smime-card {
    min-height: 260px;
    padding-top: 50px;
}

.report-smime-card b {
    font-size: 20px;
    font-weight: 700;
    line-height: 2rem;
}

.report-smime-card small {
    font-size: 16px;
    font-weight: 100;
}

.report-smime-card-table {
    min-height: 200px;
    /* padding: 30px 100px; */
}

@media (min-width:576px) {
    .report-smime-card-table {
        min-height: 200px;
        padding: 30px 100px;
    }
}

.report-zmsm-card-table {
    min-height: 200px;
    /* padding: 30px 80px; */
}

@media (min-width:576px) {
    .report-zmsm-card-table {
        min-height: 200px;
        padding: 30px 80px;
    }
}

.table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    /* --bs-table-accent-bg: #353E50; */
    --bs-table-accent-bg: #2E3746;
    --bs-table-striped-color: var(--bs-body-color);
    /* --bs-table-striped-bg: #2E3746; */
    --bs-table-striped-bg: #353E50;
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: #293240;
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
    font-weight: 300;
    border-top: 4px solid #293240 !important;
    /* border-bottom: 14px solid #2E3746 !important; */
    border-radius: 10px;
    letter-spacing: 0.015em;
    font-size: 15px !important;
}

.table small {
    font-size: 14px;
    font-weight: 200;
    color: rgba(198, 198, 198, 1);
}

.table .department {
    font-size: 14px;
    font-weight: 300;
}

.copyright {
    color: #636363;
    font-size: 12px;

}

#close-icon {
    display: none;
}






/*------------ Login container ------------*/

.box-area {
    width: 930px;
}

/*------------ Right box ------------*/

.right-box {
    padding: 40px 30px 40px 40px;
}

/*------------ Custom Placeholder ------------*/

::placeholder {
    font-size: 14px;
    color: #025884;
}

.rounded-4 {
    border-radius: 20px;
}

.rounded-5 {
    border-radius: 30px;
}


.login-image {
    background-image: url("../images/login-image-3.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    object-fit: cover;
    background-position: center;
}

.forgot-image {
    background-image: url("../images/forgot-password-1.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    object-fit: cover;
    background-position: center;
}

.twofa-image {
    background-image: url("../images/two-factor.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    object-fit: cover;
    background-position: center;
}

.activated-image {
    background-image: url("../images/activated-img.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    object-fit: cover;
    background-position: center;
}



.login-image-sm {
    height: 100px;
    width: auto;
    object-fit: cover;
}

/*------------ For small screens------------*/

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

    .box-area {
        margin: 0 10px;

    }

    .right-box {
        padding: 20px;
    }

}

.pointer {
    cursor: pointer;
}

.defaultcursor {
    cursor: default;
}

.bg-blue {
    padding: 8px;
    background: rgba(0, 131, 201, 0.20);
    border-radius: 8px;
    height: fit-content;
}

.text-pblue {
    color: #0083C9;
}

.text-blue {
    color: #1785C2;
}

.bg-yellow {
    padding: 8px;
    background-color: #FFB64D33;
    border-radius: 8px;
    height: fit-content;
}

.text-yellow {
    color: #FFB64D;
}

.bg-green {
    padding: 8px;
    background-color: #27AE6033;
    border-radius: 8px;
    height: fit-content;
}

.text-green {
    color: #27AE60;
}

.bg-lightblue {
    padding: 8px;
    background-color: #00A5B833;
    border-radius: 8px;
    height: fit-content;
}

.text-lightblue {
    color: #00A5B8;
}

.header-nav {
    padding-top: 82px;
}

.header-nav li a:hover {
    color: #1785C2;
}

.text-placeholder {
    font-size: 14px !important;
    color: #636363 !important;
    font-weight: 400;
}


/* ---- form control ---- */

#selDepartment,
#selProduct,
#selSeverity,
#selType {
    color: #63636395;
    font-size: 16px;
    font-weight: 400;
}

#selDepartment option,
#selProduct option,
#selSeverity option,
#selType option {
    color: #252C3A;
    font-weight: 400;
}


#selDepartment:focus,
#selDepartment:valid,
#selProduct:focus,
#selProduct:valid,
#selSeverity:focus,
#selSeverity:valid,
#selType:focus,
#selType:valid {
    color: #252C3A;
    font-size: 1rem;
    font-weight: 500;
}


#dateShow {
    background-image: url('../images/calendar_month.svg');
    background-position: right 10px center;
    background-repeat: no-repeat;
    padding-right: 30px;
}

#dateShowwhite {
    background-image: url('../images/calendar_month-white.svg');
    background-position: right 10px center;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.note-editable {
    background-color: #fff;
}

.note-resizebar {
    background-color: #ffffffde;
    padding-top: 2px !important;
    height: 12px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.note-toolbar {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.note-placeholder {
    font-size: 15px !important;
    color: #636363 !important;
}

.note-frame {
    font-family: 'IBM Plex Sans Thai', sans-serif !important;
}

input[type="file"] {
    line-height: 1.75 !important;
}

.bg-report-smime {
    --bs-bg-opacity: 1;
    background: #313949;
    border-radius: 10px;
    height: 252px;
}

.bg-report-smime-table {
    --bs-bg-opacity: 1;
    background: #313949;
    border-radius: 10px;
    height: 200px;
}

.bg-report-zimbra {
    --bs-bg-opacity: 1;
    background: #313949;
    border-radius: 10px;
    height: 200px;
}

.bg-report-dashboard {
    --bs-bg-opacity: 1;
    background: #313949;
    border-radius: 10px;
    padding: 1.5rem 0;
}

.bg-type-ticket {
    --bs-bg-opacity: 1;
    background: #313949;
    border-radius: 10px;
    height: 300.75px;
    padding: 1.5rem 0 0.5rem 0;
}



.text-white-50 {
    --bs-text-opacity: 1;
    color: rgba(255, 255, 255, 0.5) !important;
}

.border-green {
    padding: 8px;
    border-radius: 8px;
    border: 2px solid #16A055;
    height: fit-content;
    background-color: #16a05425;
    min-width: 68px;
    max-width: 74px;
}

.border-red {
    padding: 8px;
    border-radius: 8px;
    border: 2px solid #FF3737;
    height: fit-content;
    background-color: #FF373725;
    min-width: 68px;
    max-width: 74px;
}

.pt-report {
    padding-top: 3.5rem;
}

.border-yellow {
    padding: 8px;
    border-radius: 8px;
    border: 2px solid #FFB64D;
    height: fit-content;
    background-color: #FFB64D25;
    min-width: 68px;
    max-width: 74px;
}

.pd-report-table {
    padding-top: 1.75rem;
    padding-left: 4rem;
}

.pd-report-table-register {
    padding-top: 1.75rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

.pd-zimbra {
    padding-left: 4rem;
}

table.dataTable tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table.dataTable tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}


table.dataTable tr:first-child th:first-child {
    border-top-left-radius: 10px;
}


table.dataTable tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

.dataTables_filter input::placeholder {
    color: #9d9d9d !important;
    /* Dark gray color */
    opacity: 1;
    /* Override any default opacity */
}

/* For cross-browser compatibility */
/* Firefox */
.dataTables_filter input::-moz-placeholder {
    color: #9d9d9d !important;
    opacity: 1;
}

/* Internet Explorer 10-11 */
.dataTables_filter input:-ms-input-placeholder {
    color: #9d9d9d !important;
}

/* Microsoft Edge */
.dataTables_filter input::-ms-input-placeholder {
    color: #9d9d9d !important;
}


.dataTables_wrapper table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

[onclick] {
    cursor: pointer;
}

a.topichead:hover {
    color: #1785C2;
    font-weight: 500;
}

a.topichead {
    color: #fff;
}


.pe-mb-1 {
    padding-right: .25rem !important
}

.ps-mb-1 {
    padding-left: .25rem !important;
}

.fs-15 {
    font-size: 16px;
}

.fs-14 {
    font-size: 14px;
}

.fs-18 {
    font-size: 18px;
}

.letter-spc {
    letter-spacing: 0.025em !important;
}

.avatar-ticket {
    width: 28px;
    height: 28px;
    border-radius: 40px;
}


.border-report-icon .material-symbols-rounded {
    display: inline-block;
    background: #1785C230;
    border-radius: 4px;
    color: #1785C2;
    padding: 8px;
}


.border-report-icon-smime .material-symbols-rounded {
    display: inline-block;
    background: #FFB64D30;
    border-radius: 4px;
    color: #FFB64D;
    padding: 8px;
}

.border-report-icon-green .material-symbols-rounded {
    display: inline-block;
    background: #19875430;
    border-radius: 4px;
    color: #198754;
    padding: 8px;
    animation: blink-shadow 3s infinite;
}

.border-report-icon-red .material-symbols-rounded {
    display: inline-block;
    background: #dc354530;
    border-radius: 4px;
    color: #dc3545;
    padding: 8px;
    animation: blink-shadow 3s infinite;
}

.border-report-icon-grey .material-symbols-rounded {
    display: inline-block;
    background: #adb5bd30;
    border-radius: 4px;
    color: #adb5bd;
    padding: 8px;
}

.border-report-icon-orange .material-symbols-rounded {
    display: inline-block;
    background: #E9765930;
    border-radius: 4px;
    color: #E97659;
    padding: 8px;
}

.border-report-icon-lightblue .material-symbols-rounded {
    display: inline-block;
    background: #00A5B830;
    border-radius: 4px;
    color: #00A5B8;
    padding: 8px;
}

.border-manual .material-symbols-rounded {
    display: inline-block;
    background: #ffffff10;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.progress-vertical {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: #252C3A95;
    --bs-progress-border-radius: var(--bs-border-radius);
    --bs-progress-box-shadow: var(--bs-box-shadow-inset);
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #1785C2;
    --bs-progress-bar-transition: height 4s ease;
    display: flex;
    flex-direction: column-reverse;
    width: var(--bs-progress-height);
    height: 100%;
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: var(--bs-progress-bg);
    border-radius: 4px;
}

.progress-bar-vertical {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-progress-bar-bg);
    transition: var(--bs-progress-bar-transition);
    width: 100%;
    writing-mode: vertical-lr;
    text-orientation: upright;
    animation: progressAnimationVertical 2.5s ease-in-out;
}

@keyframes progressAnimationVertical {
    0% {
        height: 0%;
    }
}

.circle-progress {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 2rem;
    color: #000;
    /* เปลี่ยนสีตัวอักษรเป็นสีดำหรือสีที่ต้องการ */
}

.circle-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#1785C2 var(--progress), #252C3A95 0deg);
}

.circle-progress::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    /* ปรับขนาดของวงในตรงนี้ */
    height: 80%;
    /* ปรับขนาดของวงในตรงนี้ */
    background: #fff;
    /* สีพื้นหลังตรงกลาง */
    border-radius: 50%;
}

.circle-progress span {
    position: relative;
    z-index: 1;
}

.card-issued {
    border: 0;
    background: #313949;
    border-radius: 10px;
    border-bottom: 0.25rem solid #1785C2;
}

.card-request {
    border: 0;
    background: #313949;
    border-radius: 10px;
    border-bottom: 0.25rem solid #ffc107;
}

.card-awaiting {
    border: 0;
    background: #313949;
    border-radius: 10px;
    border-bottom: 0.25rem solid #198754;
}

.card-expired {
    border: 0;
    background: #313949;
    border-radius: 10px;
    border-bottom: 0.25rem solid #dc3545;
}

.card-high {
    border: 0;
    background: #313949;
    border-radius: 10px;
    border-bottom: 0.25rem solid #E97659;
}

.card-lightblue {
    border: 0;
    background: #313949;
    border-radius: 10px;
    border-bottom: 0.25rem solid #00A5B8;
}

.bg-report-dashboard-status {
    --bs-bg-opacity: 1;
    background: #313949;
    border-radius: 10px;
    /* padding: 1.5rem 0; */
}

.card-unknown {
    border: 0;
    background: #313949;
    border-radius: 10px;
    border-bottom: 0.25rem solid #adb5bd;
}


.card-blue-20 {
    border: 0;
    background: #1785C220;
    border-radius: 10px;
    border-bottom: 0.25rem solid #1785C2;
}

.card-unknown-30 {
    border: 0;
    background: #adb5bd30;
    border-radius: 10px;
    border-bottom: 0.25rem solid #adb5bd;
}

.card-yellow-30 {
    border: 0;
    background: #ffc10715;
    border-radius: 10px;
    border-bottom: 0.25rem solid #ffc107;
}

.card-green-30 {
    border: 0;
    background: #19875420;
    border-radius: 10px;
    border-bottom: 0.25rem solid #198754;
}

.card-red-30 {
    border: 0;
    background: #dc354520;
    border-radius: 10px;
    border-bottom: 0.25rem solid #dc3545;
}

.card-orange-30 {
    border: 0;
    background: #E9765920;
    border-radius: 10px;
    border-bottom: 0.25rem solid #E97659;
}

.error-page h1 {
    font-size: 9.375rem;
    line-height: 1
}

.error-page h2 {
    font-size: 4rem;
    line-height: 1;
}

.error-page .error-page-divider {
    border-left: 3px solid rgba(255, 255, 255, 0.2)
}


.user a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-decoration-color: #1785C2;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.user a:hover {
    color: #1785C2;
    text-decoration: underline;
    text-decoration-color: #1785C2;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.circle-green {
    width: 16px;
    height: 16px;
    background: #198754;
    border-radius: 9999px;
    float: left
}

.circle-lightgreen {
    width: 16px;
    height: 16px;
    background: #6faa23;
    border-radius: 9999px;
    float: left
}


.circle-yellow {
    width: 16px;
    height: 16px;
    background: #ffc107;
    border-radius: 9999px;
    float: left
}

.circle-orange {
    width: 16px;
    height: 16px;
    background: #e0522f !important;
    border-radius: 9999px;
    float: left
}

.circle-red {
    width: 16px;
    height: 16px;
    background: #dc3545;
    border-radius: 9999px;
    float: left
}

.break {
    word-wrap: break-word;
}

.wrap {
    overflow-wrap: break-word;
}