/* CSS NSW EDO*/

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap');


:root {
    /* Theme Blue and Yellow */
    --edoprimary: #196a90;
    --edoprimary-opacity: rgba(25, 106, 144, 0.5);
    --edoprimmary-dark: #005a84;
    --edosecondary: #ff9c19;
    --edosecondary-opacity: rgba(255, 156, 25, 0.2);
    --edosecondary-dark: #ff9100;
    /* Other Color Set */
    --edowhite: #fff;
    --edogray: #BCBCBC;
    --edogray-mid: #707070;
    --edogray-dark: #6C757D;
    --edogray-light: rgba(77,77,77,0.2);
    --edowarning: #F2F26E;
    --edo-bg-danger: #FF2327;
    --edosuccess: #00A84E;
    --edobusy: #e06d01;
    --edoblack: #000;
    --edoorange: #EF4431;
    --edoblue: #196a90;
    --edogreen: #8CD5A2;
    --edored: #f71414;
    --edo-oney: #f549dc;
    --edo-one: #be006d;
    --edo-one-dark: #9a0058;
    --edo-maeu: #27beef;
}

body {
     font-family: "Anuphan", sans-serif !important;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: var(--edoprimary) !important;
}

a {
    color: var(--edosecondary) !important;
}

ul {
    padding:0;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}
h5 {
    margin: 2px 0px;
}
h6{
    margin:2px 0px;
}
button {
    padding-block: 0px;
    padding-inline: 0px;
}

/*-------------- Custom Boostrap Class --------------*/

.form-group {
    margin-bottom: 1.2rem;
}
.form-row > .col, .form-row > [class*=col-] {
    padding-left: 10px;
    padding-right: 10px;
}
.col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding-left: 0px;
}
.navbar-brand {
    padding-top:0;
}

/*---------------------------------------------------*/
/*-------------- Custom Syncfusion Class prefix e --------------*/
.e-menu-item {
     font-family: "Anuphan", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: var(--edosecondary) !important;
}

    .e-menu-item:hover {
        color: var(--edoprimary) !important;
    }

.input.e-input, textarea.e-input, .e-input-group.e-control-wrapper {
     font-family: "Anuphan", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size:12px;
    border-radius: 10px;
    border: solid 1px var(--edoprimary) !important;
    padding: 3px 6px;
}



.e-btn {
     font-family: "Anuphan", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    border-radius: 10px;
    padding: 7px 23px;
    border: none;
    background-color: var(--edoprimary);
}

    .e-btn:hover {
        transition: background-color 0.3s, transform 0.3s;
    }

    .e-btn.e-outline.e-primary, .e-css.e-btn.e-outline.e-primary {
        color: white;
    }

    .e-btn, .e-css.e-btn {
        font-size: 12px;
    }

        .e-btn.e-icon-btn {
            padding: 4px 6px;
        }
        .e-btn .e-btn-icon {
            margin-top: auto;
            width: auto;
        }
        .e-btn.e-link:hover {
            color: var(--edosecondary) !important;
        }
        .e-primary {
            background-color: var(--edoprimary) !important;
        }
.e-btn.e-primary:disabled, .e-css.e-btn.e-primary:disabled {
    background-color: var(--edoprimary-opacity) !important;
}

.e-primary:hover {
    background-color: var(--edosecondary) !important;
    transition: background-color 0.3s, transform 0.3s
}

.e-toolbar {
    height: 45px;
    min-height: 45px;
}

/* Datepicker CSS */
e-datepicker {
    font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
}

    .e-datepicker.e-popup {
        background-color: var(--edowhite);
        border: 1px solid var(--edoprimary);
        box-shadow: none;
        border-radius: 10px;
    }


.e-calendar .e-day.e-selected {
    color: var(--edowhite) !important;
}

 .e-calendar .e-content .e-selected span.e-day,
 .e-calendar .e-content .e-selected span.e-day:hover,
 .e-calendar .e-content .e-today.e-selected:hover span.e-day,
 .e-calendar .e-content .e-today.e-selected span.e-day,
 .e-calendar .e-content .e-selected:hover span.e-day {
    background-color: var(--edo-primary);
}

 .e-calendar .e-content .e-today span.e-day,
 .e-calendar .e-content .e-focused-date.e-today span.e-day {
    color: #ff3337;
}

.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day, .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day, .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    border-radius: 100%;
    border-color: var(--edoprimary);
    background: none;
    color: var(--edoprimary);
}

    .e-calendar .e-content td.e-selected.e-focused-date span.e-day:hover {
        background: var(--edoprimary-opacity);
    }
.e-calendar .e-content span.e-day, .e-bigger.e-small .e-calendar .e-content span.e-day {
    width:28px;
}


.e-calendar .e-content .e-weekend span {
    color: #ff3337;
}

.e-date-range-wrapper .e-input-group-icon.e-icons.e-active,
.e-btn.e-flat,
.e-btn.e-flat:hover,
.e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active, .e-input-group:not(.e-disabled) .e-input-group-icon:active, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:active {
    color: var(--edowhite);
    background: var(--edosecondary);
    border-color: var(--edoprimary) !important;
}




.e-dropdownbase .e-input {
    font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-dropdownbase .e-list-item {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-dropdownbase .e-input .e-value {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-grid .e-headercelldiv {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-grid .e-headercell {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-grid .e-rowcell {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-grid .e-footercell {
    font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-toolbar {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

    .e-toolbar .e-toolbar-item {
         font-family: "Anuphan", sans-serif !important;
        font-style: normal !important;
        font-size: 12px;
    }

        .e-toolbar .e-toolbar-item:hover {
             font-family: "Anuphan", sans-serif !important;
            font-style: normal !important;
            font-size: 12px;
            border: none;
        }

    .e-toolbar .e-btn {
         font-family: "Anuphan", sans-serif !important;
        font-style: normal !important;
        font-size: 12px;
    }

.e-content {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

    .e-content a {
        font-size: 12px;
    }

.e-block {
    padding: 30px;
    border: solid 1px var(--edosecondary);
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.e-grid .e-rowcell {
    font-size: 12px;
    padding: 5px;
}

.e-grid .e-pager {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}

.e-ddl .e-list-item.e-active {
    background-color: var(--edoprimary) !important;
}

.e-control {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
     font-family: "Anuphan", sans-serif !important;
    font-style: normal !important;
    font-size: 12px;
}
/*---------------------------------------------------*/
/* From Branch 0.2 CSS */
.e-block {
    background-color: rgba(193,207,214,0.1);
    padding: 15px;
    margin: 0 0 2rem 0;
    border-radius: 10px;
}

b.e-block-title {
    font-size: 22px;
    color: var(--edoprimary);
    padding: 6px 6px 15px 6px;
}

.e-grid .e-altrow {
    background-color: transparent;
}
/* Customize Multiselect*/
.e-multiselect {
    margin-bottom: .375rem !important;
}

.e-multi-select-wrapper {
    font-size: 26px;
    max-height: 34px !important;
}

    .e-multi-select-wrapper .e-chips {
        height: 27px;
        background-color: var(--edogray);
    }

        .e-multi-select-wrapper .e-chips > .e-chipcontent {
            -webkit-text-fill-color: var(--edoprimary);
            color: var(--edoprimary);
            padding-top: 7px;
        }

        .e-multi-select-wrapper .e-chips .e-chips-close::before {
            -webkit-text-fill-color: var(--edoprimary);
            color: var(--edoprimary);
        }

        .e-multi-select-wrapper .e-chips > .e-chipcontent:hover {
            -webkit-text-fill-color: var(--edowhite);
            color: var(--edowhite);
        }

/* Customize Handle and Bar Switch */
.edo-switch.e-switch-wrapper.handle-text {
    width: 160px;
    height: 34px;
}

    .edo-switch.e-switch-wrapper.handle-text .e-switch-handle {
        width: 80px;
        height: 31px;
        left: 0px;
        background-color: var(--edoprimary);
    }

    .edo-switch.e-switch-wrapper.handle-text .e-switch-inner,
    .edo-switch.e-switch-wrapper.handle-text .e-switch-handle {
        border-radius: 4px;
    }

        .edo-switch.e-switch-wrapper.handle-text .e-switch-handle.e-switch-active {
            left: 94px;
        }

        .edo-switch.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active,
        .edo-switch.e-switch-wrapper.handle-text:hover .e-switch-inner.e-switch-active .e-switch-on {
            background-color: var(--edogray);
            border-color: transparent;
        }

    .edo-switch.e-switch-wrapper.handle-text .e-switch-inner,
    .edo-switch.e-switch-wrapper.handle-text .e-switch-off {
        background-color: rgba(77,76,77,0.2);
        border-color: transparent;
    }

        .edo-switch.e-switch-wrapper.handle-text .e-switch-inner:after,
        .edo-switch.e-switch-wrapper.handle-text .e-switch-inner:before {
            font-size: 12px;
            position: absolute;
            line-height: 21px;
            z-index: 1;
            height: 100%;
            transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
        }

        .edo-switch.e-switch-wrapper.handle-text .e-switch-inner:before {
            content: "Yes";
            color: var(--edowhite);
            left: 0px;
            top: 6px;
            font-weight: 500;
            width: 80px;
            text-align: center;
        }

        .edo-switch.e-switch-wrapper.handle-text .e-switch-inner:after {
            content: "No";
            right: 0px;
            color: rgba(77,76,77,0.4);
            top: 6px;
            font-weight: 500;
            width: 80px;
            text-align: center;
        }

.edo-switch.switch-OptionalMandatory > input.e-switch + span.e-switch-inner:before {
    content: "Optional";
}

.edo-switch.switch-OptionalMandatory > input.e-switch + span.e-switch-inner:after {
    content: "Mandatory";
}

.edo-switch.switch-AcceptReject > input.e-switch + span.e-switch-inner:before {
    content: "Reject";
}

.edo-switch.switch-AcceptReject > input.e-switch + span.e-switch-inner:after {
    content: "Accept";
}

.edo-switch.switch-NormalOrPostUpload > input.e-switch + span.e-switch-inner:before {
    content: "Normal";
}

.edo-switch.switch-NormalOrPostUpload > input.e-switch + span.e-switch-inner:after {
    content: "Post Upload";
}

.edo-switch.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:before {
    color: rgba(77,76,77,0.4);
}

.edo-switch.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:after {
    color: var(--edowhite);
}

.edo-switch.e-switch-wrapper.handle-text:not(.e-switch-disabled):hover .e-switch-handle:not(.e-switch-active) {
    background-color: var(--edoprimary);
}

.edo-switch.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-on {
    background-color: var(--edogray);
}

.edo-switch.e-switch-wrapper .e-switch-off, .e-css.e-switch-wrapper .e-switch-off {
    background-color: var(--edogray);
}

.edo-switch.e-switch-wrapper:hover .e-switch-handle.e-switch-active, .e-css.e-switch-wrapper:hover .e-switch-handle.e-switch-active {
    background-color: var(--edoprimary);
}

.edo-switch.e-switch-wrapper .e-switch-inner, .e-css.e-switch-wrapper .e-switch-inner {
    background-color: transparent;
}

.edo-switch.e-switch-wrapper:hover .e-switch-inner, .e-css.e-switch-wrapper:hover .e-switch-inner {
    background-color: transparent;
}

.edo-switch.e-switch-wrapper .e-switch-inner, .e-css.e-switch-wrapper .e-switch-inner {
    border: none;
}

.edo-switch.e-switch-wrapper .e-switch-handle, .e-css.e-switch-wrapper .e-switch-handle {
    top: 1px;
}

.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-on, .e-css.e-switch-wrapper.e-switch-disabled .e-switch-inner .e-switch-on {
    background-color: var(--edogray) !important;
}

.edo-switch.e-switch-wrapper.handle-text.e-switch-disabled .e-switch-inner.e-switch-active:after {
    color: rgba(77,76,77,0.4) !important;
}

.edo-switch.e-switch-wrapper.handle-text.e-switch-disabled .e-switch-inner:before {
    color: rgba(77,76,77,0.4) !important;
}

.e-switch-disabled > .e-switch-handle {
    background-color: transparent !important;
}

.e-dlg-header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
    min-height: 4rem;
}

.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    position: absolute;
    top: 1rem;
    right: 2rem;
    left: unset;
    bottom: unset;
}

text[id*="_datalabel_Series_"] {
    font-family: 'Anuphan', sans-serif !important;
}

/*-------------- Custom Layout Class --------------*/
/* Size Text */
.text-big {
    font-size: 32px !important;
}

    .text-big:hover {
        font-size: 32px !important;
    }

.text-topic {
    font-size: 24px !important;
}

    .text-topic:hover {
        font-size: 24px !important;
    }

.text-normal {
    font-size: 18px !important;
}

    .text-normal:hover {
        font-size: 18px !important;
    }

.text-detail {
    font-size: 12px !important;
}

    .text-detail:hover {
        font-size: 12px !important;
    }

/* Color Text and BG */
.edo-primary {
    color: var(--edoprimary) !important;
}


.edo-secondary {
    color: var(--edosecondary) !important;
}


.edo-white {
    color: var(--edowhite) !important;
}

    .edo-white:hover {
        color: var(--edosecondary) !important;
        transition: background-color 0.3s, transform 0.3s;
    }


.edo-orange {
    color: var(--edoorange);
}

.edo-success {
    color: var(--edosuccess);
}

.edo-gray {
    color: var(--edogray);
}

.edo-gray-mid {
    color: var(--edogray-mid);
}

.edo-gray-dark {
    color: var(--edogray-dark);
}

.edo-blue {
    color: var(--edoprimary);
}

.edo-green {
    color: var(--edogreen);
}

.edo-warning {
    color: var(--edowarning);
}



.edo-bg-primary {
    background: var(--edoprimary);
}

    .edo-bg-primary:hover {
        background: var(--edosecondary);
        transition: background-color 0.3s, transform 0.3s;
    }

    .edo-bg-primary:focus {
        background: var(--edosecondary);
        transition: background-color 0.3s, transform 0.3s;
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
    }

.edo-bg-secondary {
    background: var(--edosecondary);
    color: var(--edowhite) !important;
}

    .edo-bg-secondary:hover {
        background: var(--edowhite) !important;
        color: var(--edosecondary) !important;
        transition: background-color 0.3s, transform 0.3s;
    }

    .edo-bg-secondary:focus {
        background: var(--edowhite);
        color: var(--edosecondary) !important;
        transition: background-color 0.3s, transform 0.3s;
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
    }

.edo-bg-danger {
    background: var(--edo-bg-danger ) !important;
    color: var(--edowhite) !important;
}

.edo-bg-success {
    background: var(--edosuccess) !important;
    color: var(--edowhite) !important;
}
.edo-bg-busy {
    background: var(--edobusy) !important;
    color: var(--edowhite) !important;
}

.edo-bg-primary {
    background-color: var(--edoprimary);
    color: var(--edowhite);
}

.edo-bg-blue {
    background-color: var(--edoblue);
    color: var(--edowhite);
}

.edo-bg-warning {
    background-color: var(--edowarning);
    color: var(--edowhite);
}

.edo-bg-gray {
    background: var(--edogray) !important;
    color: var(--edowhite) !important;
}

.edo-bg-gray {
    background: var(--edogray-light) !important;
    color: var(--edowhite) !important;
}

.edo-bg-layout {
    z-index: 1;
    background-color: var(--edoprimary);
}

.edo-bg-one-logo {
    background: var(--edo-one) !important;
}
    .edo-bg-one-logo:hover {
        background: var(--edo-one-dark) !important;
        transition: background-color 0.3s, transform 0.3s;
    }
    .edo-bg-one-logo:hover img {
        opacity: 0.8;
    }
/*font awesome*/
.fa-info-circle {
    color: var(--edoprimary) !important;
}

.fa-times-circle {
    color: var(--edoorange) !important;
}

.fa-exclamation-triangle {
    color: var(--edowarning) !important;
}

.fa-check-circle {
    color: var(--edogreen) !important;
}

.fa-exclamation-circle {
    color: var(--edoorange) !important;
}

.fa-hourglass-half {
    color: var(--edoorange) !important;
}

/* Custom main page sidebar */

.content {
    padding-top: 1.1rem;
}
@media (max-width: 640px) {

    .content {
        padding:10px 30px;
    }
}

.page, .sidebar, .main {
    height: 90vh !important;
}
.main {
    overflow-x: hidden;
}

    .main::-webkit-scrollbar {
        width: 12px;
        background-color: var(--edoprimary-opacity);
    }

    .main::-webkit-scrollbar-thumb {
        background-color: var(--edosecondary);
        border-radius: 10px;
    }


/* Side Bar */
.sidebar {
    width: 300px !important;
    overflow-y: scroll;
    overflow-x: hidden;
}

.sidebar::-webkit-scrollbar {
    width: 1px; 
    background-color: var(--edoprimary);
}

@media (max-width: 640px) {
    .page, .sidebar, .main {
        height:max-content !important;
    }

    .sidebar {
        display: contents;
        overflow-y: hidden;
    }

    .main {
        min-height: 150vh; 
        overflow-y: auto; 

    }
        .main::-webkit-scrollbar {
            display:none;
        }
}

.side-nav .side-nav-title {
    font-size: 18px;
    padding: 10px 25px;
    color: var(--edoprimary) !important;
}

.side-nav-second-level li a {
    padding: 10px 20px;
}

.left-side-menu {
    margin-top: 15px !important;
}

@media (max-width: 767.98px) {
    .left-side-menu {
        display: block;
    }
}

.side-nav-item-li.active {
    background-color: rgba(193, 207, 214, 0.1);
}

body[data-layout=detached] .side-nav .side-nav-forth-level li a, body[data-layout=detached] .side-nav .side-nav-second-level li a, body[data-layout=detached] .side-nav .side-nav-third-level li a {
    color: var(--edoprimary) !important;
}

    body[data-layout=detached] .side-nav .side-nav-second-level li a:hover {
        color: var(--edosecondary) !important;
        transition: background-color 0.3s, transform 0.3s;
    }

    body[data-layout=detached] .side-nav .side-nav-forth-level li a:focus, body[data-layout=detached] .side-nav .side-nav-forth-level li a:hover, body[data-layout=detached] .side-nav .side-nav-second-level li a:focus, body[data-layout=detached] .side-nav .side-nav-second-level li a:hover, body[data-layout=detached] .side-nav .side-nav-third-level li a:focus, body[data-layout=detached] .side-nav .side-nav-third-level li a:hover {
        color: var(--edosecondary) !important;
        transition: background-color 0.3s, transform 0.3s;
    }

.side-nav-item-hr {
}

    .mm-active i {
        color: var(--edosecondary) !important;
    }

.nav-item:hover {
    background-color: var(--edosecondary-opacity);
    border-radius: 30px;
    color: var(--edoprimary);
}

.nav-item .nav-link.side-nav-item-li.active {
    background-color: var(--edosecondary-opacity);
    border-radius: 30px;
    color: var(--edoprimary);
}
/* About btn */
.edo-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 15px !important;
    font-size: 12px;
}

.edo-iconbtn {
    font-family: "Anuphan", sans-serif;
    font-weight: 400;
    font-style: normal;
    border: none;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    font-size: 18px;
    margin: 0px 5px;
    display:flex;
    justify-content:center;
    align-items:center;
}

    .edo-iconbtn:hover {
        border: none;
    }
.img-icon {
    width:20px;
}

.template_checkbox {
    display: flex;
    justify-content: center;
}


.marginforsearch {
    margin-bottom: 1rem;
    margin-left: 5px;
}

.edo-badge-big {
    width: 20px;
    height: 20px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:15px;
    border-radius:100%;
}

.edo-badge-extra {
    width: 100px;
    height: 100px;
    position: relative;
    line-height: 95px;
    font-size: 65px;
}


.edo-badge-extra-icon {
    position: absolute;
    left: 17px;
    top: 3px;
}
.edo-append-action {
    margin: 10px 5px 0px 5px;
    margin-inline: 2px;
    padding-inline: 6px;

}

.edo-append-search {
    margin: 0px 5px;
}

.btnsearch {
    display: flex;
}

.btn-minwidth-120 {
    min-width: 120px;
}

.btn-minwidth-110 {
    min-width: 110px;
}

.btn-minwidth-80 {
    min-width: 80px;
}

.btn-minwidth-235 {
    min-width: 235px;
}
.inside-btn {
    position: absolute;
    right: 0;
    margin-right: 15px;
    padding: 5px 8px;
    border-radius: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.edo-button-showPassword {
    height: 100%;
    border-radius: 0 4px 4px 0;
}

.edo-append-showPassword {
    margin-left: -1px;
    border-radius: 0 4px 4px 0;
}

.edo-span-showPassword {
    height: 100%;
    border-radius: 0 4px 4px 0;
}

.edo-button-none {
    height: 100%;
    border-radius: 0 4px 4px 0;
}

.edo-append-none {
    margin-left: -1px;
    /*border-right: 1px solid var(--edogray);*/
    border-radius: 0 4px 4px 0;
}

.edo-span-app, .edo-span-pre {
    height: 100%;
    border-radius: 0 4px 4px 0;
}

.edo-h-40 {
    height: auto;
}

    .edo-h-40.e-popup.e-popup-open {
        height: auto !important;
    }

.e-tab .e-content {
    margin-top: 0px;
}

.e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-status.e-upload-success {
    color: #28a745;
    font-size: 12px !important;
    text-align: center;
    line-height: 35px !important;
}


/* Noti icon Badge */
.noti-icon-badge {
    display: inline-block;
    position: absolute;
    top: 14px;
    right: 3px;
    border-radius: 50%;
    border: 1px solid #fff;
    height: 9px;
    width: 9px;
    background-color: var(--edo-bg-danger );
}


/* Nav bar */
.edo-navbar {
    border-bottom: solid 1px var(--edoprimary);
    height: 70px;
    width: 100vw;
    display: flex;
    align-items: center;
    
}

    .edo-navbar::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--edoprimary);
        z-index: -2;
    }

    .edo-navbar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url('../edo-images/Navbar_BG5.png');
        background-repeat: no-repeat;
        background-position: right top;
        opacity: 0.8;
        z-index: -1;
    }


.edo-right-navbar {
    display:flex;
    flex-grow:1;
    align-items:center;
}

.edo-user-authorize {
    display: flex;
    align-items: center;
    order: 3;
}

.edo-notification {
    display: flex;
    align-items: center;
    order: 2;
    margin-left: auto;
}

/* Logo */
.navbar-brand img {
    height: 50px;
}

.logout-icon {
    display: none;
}


/* Responsive for navbar */
@media only screen and (max-width: 600px) {
    .edo-navbar {  
        justify-content:center;
    }
    .navbar-brand {
        margin-right:0;
    }
    .navbar-brand img {
        display: none;
        height: 0;
        width: 0;
    }
    .edo-right-navbar {
        justify-content: center;
    }
    .edo-notification {
        margin-left: 0;
    }
    .logout-text {
        display: none;
    }

    .logout-icon {
        display: block !important;
    }
}

/* Footer */
.edo-footer {
    background-color: var(--edoprimary);
    height: 3vh;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100vw;
    z-index: 1001;
}
.copyright {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--edowhite);
    text-align:center;
}

.version {
    margin-left: auto;
    padding-right: 10px;
}

/* Search Bar */
.edo-search {
    display: flex;
    order: 1;
}
@media only screen and (max-width: 992px) {
    .edo-search {
        display: none;
    }
    .edo-footer {
        font-size:9px;
    }

}
.edo-searchbar {
    height: 40px !important;
    width: 250px !important;
    border-radius: 50px !important;
    border: solid 2px var(--edoprimary) !important;
    color: var(--edoblack) !important;
     font-family: "Anuphan", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    vertical-align: middle !important;
}

    .edo-searchbar input {
        height: auto !important;
    }


/* Input */
.edo-input-group-l {
    border-radius: 10px !important;
}

.edo-input-group-r {
    border-radius: 10px !important;
}
.no-input-border textarea {
    border:0 !important;
}
/*Card bg login*/
.col-md-10.col-lg-8.card {
    opacity: 0.95; /* เพิ่มความชัดเจนขึ้นเล็กน้อย */
    min-height: 470px;
    border-radius: 15px; /* เพิ่มความโค้งของกรอบ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
    background-color: var(--edowhite); /* สีพื้นหลังที่ทำให้ตัดกับพื้นหลัง */
    transition: all 0.3s ease-in-out; /* เพิ่มการเคลื่อนไหวเมื่อมีการเปลี่ยนแปลง */
    filter: none; /* ลบเอฟเฟกต์เบลอออก */
}

    .col-md-10.col-lg-8.card:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 30px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเมื่อ hover */
        transform: none; /* ลบการขยายเมื่อ hover */
    }

.edo-cardlogin-left {
    border-radius: 20px 0px 0px 20px !important;
}
.edo-cardlogin-right {
    border-radius: 0px 20px 20px 0px !important;
}
.carousel-indicators li {
    background-color: var(--edoprimary);
    border-top-width: 0px;
    border-bottom-width: 20px;
}

/*Identity Page*/
.edo-login-dec-text {
    position: relative;
    left: 20px;
    top: 100px;
}

/*decoration-pw-icon*/
.input-group-text2 {
    color: var(--edoprimary) !important;
    /* ลบกรอบ (border) ด้านหลังออก */
    /* คงไว้ซึ่งการจัดรูปแบบอื่น ๆ */
    border: 1px solid var(--edogray);
    border-left: none;
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 0px .25rem .25rem 0px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/*---------------------------------------------------*/

/* From Branch 0.2 CSS */
/*suppress warning*/
.edo-top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-start;
    height: 45px;
    display: flex;
    align-items: center;
}

.edo-tick:before {
    content: '\e259';
    font-size: 26px;
    color: green;
}


.edo-non:before {
    content: '\e761';
    font-size: 20px;
    /*   width: 100px;*/
}

.edo-req:before {
    content: '\e259';
    font-size: 20px;
    width: 100px;
}

.edo-sent:before {
    content: '\e259';
    font-size: 20px;
    width: 100px;
}

/*edit btn input log*/
.edo-edit-button {
    background-color: var(--edogray) !important;
    color: var(--edoblue) !important;
    border: none !important
}

    .edo-edit-button:hover {
        background-color: var(--edograymid) !important;
        color: white !important;
    }

.edo-btn-secondary, .edo-btn-secondary:hover, .edo-btn-secondary:active, .edo-btn-secondary:focus {
    background-color: var(--edogray);
    color: var(--edograydark);
    border: none;
}

    .edo-btn-secondary, .edo-btn-secondary:hover, .edo-btn-secondary:active, .edo-btn-secondary:focus {
        background-color: var(--edogray);
        color: var(--edograydark);
        border: none;
    }

        .edo-btn-secondary:disabled, .edo-btn-secondary:disabled:hover, .edo-btn-secondary:disabled:active, .edo-btn-secondary:disabled:focus {
            background-color: rgba(108, 117, 125, 0.65);
            border-color: transparent;
            box-shadow: none;
            color: var(--edowhite);
        }

.edo-card {
    background-color: var(--edosecondary-opacity);
    border: 1px solid rgba(112, 112, 112, .08);
}

.edo-bg-dark-green-blue {
    background-color: #084259;
}

.edo-box-shadow {
    background-color: white;
    box-shadow: 0px 0px 30px #000000;
}

/*Payment CSS*/
.edo-border-thick {
    border: 2px solid var(--edograymid);
    border-radius: 0px;
}

    .edo-border-thick > .e-acrdn-item.e-selected.e-select, .edo-border-thick > .e-accordion, .edo-border-thick > .e-acrdn-item {
        border-bottom: 2px solid var(--edograymid);
        border-radius: 0px;
    }

        .edo-border-thick > .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .edo-border-thick > .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
            background-color: var(--edogray);
            border-radius: 0px
        }

        .edo-border-thick > .e-accordion .e-acrdn-item.e-select:last-child {
            border-radius: 0px !important;
        }

        .edo-border-thick > .e-acrdn-item > .e-acrdn-header {
            background-color: rgba(193,207,214,0.5) !important;
        }

        .edo-border-thick > .e-acrdn-item.e-active > .e-acrdn-header {
            background-color: rgba(193,207,214,0.5) !important;
        }

.e-acrdn-header-content {
    margin: 10px 0 !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
}

.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons, .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content {
    color: var(--edobluedark) !important;
}

.e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
    text-decoration: none !important;
}

.e-block > h4 {
    color: var(--edoprimary);
}

.edo-hr-orange > span:first-child {
    display: block;
    width: 80px;
    float: left;
    height: 1px;
}

.edo-hr-orange > span:last-child {
    display: block;
    width: calc(100% - 80px);
    float: left;
    height: 1px;
}

.edo-hr-orange {
    width: 100%;
    margin-bottom: 1.5rem !important;
    margin-top: .375rem !important;
}

* .e-upload .e-file-drop {
    display: none;
}

.edo-outline-btn > .e-file-select-wrap > .e-upload-browse-btn {
    background-color: transparent;
    border-color: var(--edoprimary);
    color: var(--edoprimary);
    border-radius: 0px;
}

.edo-picture-outline {
    background: var(--edowhite) 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    width: 100%;
}

    .edo-picture-outline.checkout-page {
        min-height: 246px;
        max-width: 246px;
    }

.edo-custom-file-input::-webkit-file-upload-button {
    visibility: hidden !important;
}

.edo-custom-file-input::before {
    content: 'Attach File +';
    display: inline-block;
    background: linear-gradient(top, #f9f9f9, #e3e3e3);
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.edo-custom-file-input:hover::before {
    border-color: black;
}

.edo-custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

.edo-border-dashed {
    border: 3px dashed var(--edograymid);
}

p.edo-indent {
    /*    padding-left: 50px !important;*/
    margin: 0px;
}

.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

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

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

input[type="radio"][disabled] + label {
    color: Gray;
}

input[type="radio"][checked] + label {
    font-weight: bold;
    color: Green;
}

/* Customize Handle and Bar Switch */
.edo-BnsLanguage-color {
    background-color: #07405D;
}

.lang-box {
    background-color: #04405C;
}

.lang-box {
    background-color: #07405D !important;
}

.e-list-item.e-active {
    background-color: #07405D !important;
}


.custom-annotation {
    font-size: 3vw;
    line-height: 3.2vw;
    color: var(--edoprimary);
    height: 30px;
    width: 10vw;
    text-align: center;
    font-weight: bold;
    left: -4.8vw;
    top: -2vw;
    position: relative;
}

.custom-annotation-sub {
    font-size: 1.7vw;
    line-height: 1.7vw;
}

@media (max-width: 991px) {
    .custom-annotation {
        font-size: 72px;
        line-height: 66px !important;
        top: -50px;
        left: -72px;
    }
}

@media (max-width: 991px) {
    .custom-annotation-sub {
        font-size: 35px;
        line-height: 36px !important;
    }
}

.edo-height40 {
    min-height: 40px !important;
}

.edo-required::after {
    content: '*';
    margin-right: 4px;
    margin-left: 2px;
    color: red;
}

.e-chip.e-outline.edo-chip-lg {
    font-size: 18px !important;
    margin: 10px !important;
    padding: 15px 20px !important;
    min-width: 200px !important;
}

.edo-gridheader-blue > .e-grid .e-gridheader {
    background-color: var(--edoprimary) !important;
    color: var(--edowhite) !important;
}

/*clear button*/
.btnclear button {
    background: var(--edowhite) !important;
    color: var(--edoprimary) !important;
    border: 1px solid var(--edoprimary);
}

    .btnclear button:hover {
        color: var(--edosecondary) !important;
        background: var(--edowhite) !important;
        border: 1px solid var(--edosecondary);
    }



.btnset {
    gap: 1rem;
}

.pvprint-btn {
    gap: 1rem;
}


/*CompanyInformationPage*/
.btndownload {
    background: var(--edowhite);
    color: var(--edoprimary);
    border-color: var(--edoprimary);
}

    .btndownload:hover {
        color: var(--edowhite);
        background: var(--edoprimary);
    }

/*PdfViewerModal*/
.pdfbtn {
    margin: 1rem 0;
    gap: 1rem;
}

/* multiselect dropdown
    https://blazor.syncfusion.com/documentation/multiselect-dropdown/style

*/


/*.e-multiselect .e-multi-select-wrapper .e-chips .e-chipcontent {
    font-family: cursive;
    font-size: 20px;
    -webkit-text-fill-color: blue;
}

.e-multi-select-wrapper .e-chips {
    background-color: var(--edoblue);
    height: 26px;
}
.e-multiselect.e-input-group.e-control-wrapper.e-input-focus::before, .e-multiselect.e-input-group.e-control-wrapper.e-input-focus::after {
    background: #c000ff;
}
.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
    -webkit-text-fill-color: red;
}*/

/* placeholder */
/*.e-multiselect input.e-multiselect::placeholder {
    color: red;
}*/

/* checkbox style */
/*.e-popup .e-checkbox-wrapper .e-frame.e-check, .e-popup .e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: green;
    color: white;
}*/

/* Date time range */

/* .e-calendar .e-content .e-selected span.e-day,
 .e-calendar .e-content .e-selected span.e-day:hover,
 .e-calendar .e-content .e-today.e-selected:hover span.e-day,
 .e-calendar .e-content .e-today.e-selected span.e-day,
 .e-calendar .e-content .e-selected:hover span.e-day {
    background-color: #35b86b;
}*/

/* .e-calendar .e-content .e-today span.e-day,
 .e-calendar .e-content .e-focused-date.e-today span.e-day {
    border: 1px solid #35b86b;
    color: #ff3337;
}*/

/* .e-calendar .e-content .e-weekend span {
    color: #ff3337;
}*/

/* .e-date-range-wrapper .e-input-group-icon.e-icons.e-active,
 .e-btn.e-flat,
 .e-btn.e-flat:hover {
    color: #35b86b;
}*/