@charset "UTF-8";

:root {
    --content: #fff;
}

.cm-menu_top--active {
    display: block !important;
}

/*tum บังไว้ กระทบ body หลัก*/
/*@media (max-width: 639px) {
    html body {
        font: normal 11px "Poppins",Prompt !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    html body {
        font: normal 12px "Poppins",Prompt !important;
    }
}

@media (min-width: 1025px) {
    html body {
        font: normal 12px "Poppins",Prompt !important;
    }
}*/

.panel-fullscreen {
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 1s ease 0s;
    width: 100%;
    z-index: 100;
}

.form-control.cm-none {
    background: none !important;
    border: none !important;
} 

hide {
    display: none;
}

:root {
    --d: #fff;
}

.cm-bg-panel-del {
    background-color: #fee4e4 !important;
} 

.ui-state-default {
    color: #b5b5b5;
    display: block;
    font-size: 11.5px;
    line-height: 30px;
    text-decoration: none;
    width:30px;
}

.ui-state-highlight {
    color: #8dd391;
}

.ui-state-active {
    position: relative;
}

    .ui-state-active:before {
        border-color: #ebedf2 transparent #fff;
        border-style: solid;
        border-width: 0 0 7px 7px;
        bottom: 4px;
        content: "";
        display: inline-block;
        position: absolute;
        right: 4px;
    }

.ui-datepicker td a {
    text-align:center !important;
}

    .scrollableList {
    background: #fff;
    border: 1px solid #b3b3b3;
    color: #666;
    float: left;
    height: auto;
    line-height: 0px;
    margin-right: 10px;
    padding: 5px;
    width: 60px;
}

    .scrollableList ul {
        background: #fff;
        border: 1px solid #dedede;
        height: 150px;
        margin: 12px 0 0 -5px;
        overflow: auto;
        padding: 3px 0;
        position: absolute;
        width: 60px;
        z-index: 1;
    }

        .scrollableList ul li {
            cursor: pointer;
            line-height: 25px;
            list-style: none;
            margin-left: 0;
        }

.selectedOption {
    cursor: pointer;
    font-weight: 700;
    height: auto;
    margin-left: 0;
    margin-top: 2px;
}

    .selectedOption span {
        margin-right: 0.3rem;
    }

/*! Custom RadButton
*/
.RadButton.cm-button_nav--link {
    background-color: #fff !important;
    box-sizing: inherit !important;
    font-size: 12px !important;
}

@media (max-width: 639px) {
    .RadButton.cm-button_nav--link {
       /* font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadButton.cm-button_nav--link {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadButton.cm-button_nav--link {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

.RadButton.cm-button_nav--link:hover i {
    color: #5d78ff;
}

.RadButton.cm-button_nav--link .kt-nav__link-text {
    flex-grow: 0 !important;
}

.RadButton.cm-button_popup {
    height: 2.7rem !important;
    width: 2.7rem !important;
    font-size: 12px !important;
}

@media (max-width: 639px) {
    .RadButton.cm-button_popup {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadButton.cm-button_popup {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadButton.cm-button_popup {
        /*font: normal 12px Prompt !important;*/
    }
}

.RadButton.cm-button_popup.rbLinkButton,
.RadButton.cm-button_popup.rbSkinnedButton,
.RadButton.cm-button_popup.rbSplitLeft,
.RadButton.cm-button_popup.rbSplitRight,
.RadButton.cm-button_popup.rbVerticalButton {
    border: none;
}

    .RadButton.cm-button_popup.rbLinkButton:hover,
    .RadButton.cm-button_popup.rbSkinnedButton:hover,
    .RadButton.cm-button_popup.rbSplitLeft:hover,
    .RadButton.cm-button_popup.rbSplitRight:hover,
    .RadButton.cm-button_popup.rbVerticalButton:hover {
        cursor: pointer !important;
    }

.cm-button_group .RadButton {
    border-radius: 3px !important;
    margin: 0.6rem;
}

    .cm-button_group .RadButton.rbHovered {
        cursor: pointer !important;
    }

/*! Custom RadGrid */
caption {
    padding: 0 !important;
}

.RadGrid.cm-grid {
    border: none;
    color: #646c9a;
    padding: 5px;
    font-size : 12px !important;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid {
        /*font: normal 12px Prompt !important;*/
    }
}

.RadGrid.cm-grid .rgHeader {

}

    @media (max-width: 639px) {
        .RadGrid.cm-grid .rgHeader {
            /*font: normal 12px Prompt !important;*/
        }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
        .RadGrid.cm-grid .rgHeader {
            /*font: normal 12px Prompt !important;*/
        }
    }

    @media (min-width: 1025px) {
        .RadGrid.cm-grid .rgHeader {
            /*font: normal 13px Prompt !important;*/
        }
    }

    .RadGrid.cm-grid .rgAltRow > td, .RadGrid.cm-grid .rgRow > td {
    border-bottom: none !important;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid .rgCommandRow table,
    .RadGrid.cm-grid .rgDetailTable,
    .RadGrid.cm-grid .rgEditForm table,
    .RadGrid.cm-grid .rgGroupPanel table,
    .RadGrid.cm-grid .rgMasterTable,
    .RadGrid.cm-grid .rgPager table {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid .rgCommandRow table,
    .RadGrid.cm-grid .rgDetailTable,
    .RadGrid.cm-grid .rgEditForm table,
    .RadGrid.cm-grid .rgGroupPanel table,
    .RadGrid.cm-grid .rgMasterTable,
    .RadGrid.cm-grid .rgPager table {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid .rgCommandRow table,
    .RadGrid.cm-grid .rgDetailTable,
    .RadGrid.cm-grid .rgEditForm table,
    .RadGrid.cm-grid .rgGroupPanel table,
    .RadGrid.cm-grid .rgMasterTable,
    .RadGrid.cm-grid .rgPager table {
        /*font: normal 13px Prompt !important;*/
    }
}

.RadGrid.cm-grid .rgAltRow > td,
.RadGrid.cm-grid .rgEditRow > td,
.RadGrid.cm-grid .rgFilterRow > td,
.RadGrid.cm-grid .rgFooter > td,
.RadGrid.cm-grid .rgHeader,
.RadGrid.cm-grid .rgResizeCol,
.RadGrid.cm-grid .rgRow > td {
    padding-bottom: 10px;
    padding-left: 13px !important;
    padding-top: 10px;
}

.RadGrid.cm-grid .rgSelectedCell .rgBatchCurrent,
.RadGrid.cm-grid .rgSelectedRow .rgBatchCurrent {
    padding-bottom: 2px;
    padding-top: 3px;
}

    .RadGrid.cm-grid .rgSelectedCell .rgBatchCurrent input[type="text"],
    .RadGrid.cm-grid .rgSelectedRow .rgBatchCurrent input[type="text"] {
        border: none;
        border-radius: 5px;
        color: #646c9a;
    }

        .RadGrid.cm-grid .rgSelectedCell .rgBatchCurrent input[type="text"]:focus,
        .RadGrid.cm-grid .rgSelectedRow .rgBatchCurrent input[type="text"]:focus {
            border: none;
            outline: none !important;
        }

.RadGrid.cm-grid:focus {
    outline: none !important;
}

.RadGrid.cm-grid .rgAdd,
.RadGrid.cm-grid .rgCancel,
.RadGrid.cm-grid .rgExpXLS,
.RadGrid.cm-grid .rgPageFirst,
.RadGrid.cm-grid .rgPageLast,
.RadGrid.cm-grid .rgPageNext,
.RadGrid.cm-grid .rgPagePrev,
.RadGrid.cm-grid .rgRefresh,
.RadGrid.cm-grid .rgSave {
    background-color: rgba(93, 120, 255, 0.1);
    background-image: none !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 3px !important;
    width: auto !important;
}

.RadGrid.cm-grid .rgPageFirst,
.RadGrid.cm-grid .rgPageLast,
.RadGrid.cm-grid .rgPageNext,
.RadGrid.cm-grid .rgPagePrev {
    background-color: #fff !important;
}

.RadGrid.cm-grid .rgCommandCell {
    background-color: #fff;
    padding: 2px 0;
}

    .RadGrid.cm-grid .rgCommandCell .t-font-icon {
        display: block;
        font: inherit;
        height: auto;
        min-width: auto;
        width: auto;
    }

.RadGrid.cm-grid .rgPagerCell {
    background-color: #fff;
    border: none !important;
    color: #646c9a !important;
    padding: 0;

}

@media (max-width: 639px) {
    .RadGrid.cm-grid .rgPagerCell {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid .rgPagerCell {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid .rgPagerCell {
        /*font: normal 12px Prompt !important;*/
    }
}

.RadGrid.cm-grid .rgPagerCell .NextPrevAndNumeric {
    margin-bottom: 0;
    padding: 10px 5px 5px;
}

    .RadGrid.cm-grid .rgPagerCell .NextPrevAndNumeric .rgWrap.rgArrPart1,
    .RadGrid.cm-grid .rgPagerCell .NextPrevAndNumeric .rgWrap.rgArrPart2,
    .RadGrid.cm-grid .rgPagerCell .NextPrevAndNumeric .rgWrap.rgNumPart {
        margin-top: 4px;
    }

.RadGrid.cm-grid .rgPagerCell .rgNumPart a.rgCurrentPage {
    cursor: pointer;
    transition: all 0.8s ease 0s;
}

.RadGrid.cm-grid .rgPagerCell .rgActionButton,
.RadGrid.cm-grid .rgPagerCell .rgPagerButton {
    border-radius: 1px !important;
    color: #8f8f8f !important;
    height: 23px !important;
    padding: 1px 0.8px;
    transition: all 0.8s ease 0s;
    width: 23px !important;
}

.RadGrid.cm-grid .rgPagerCell .rgCurrentPage {
    border-radius: 1px;
    /*font-family: monospace;*/
    font-weight: bolder;
    height: 23px;
    padding: 2px 7px;
    width: 23px;
}

.RadGrid.cm-grid .rgPagerCell .RadComboBox .rcbInner,
.RadGrid.cm-grid .rgPagerCell .RadComboBox .rcbReadOnly {
    background: none;
    border-radius: 5px;
    color: #646c9a;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_tools {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_tools {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_tools {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_tools .rgHeader {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_tools .rgHeader {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_tools .rgHeader {
        /*font: normal 12px Prompt !important;*/
    }
}

.RadGrid.cm-grid_tools .rgAltRow > td,
.RadGrid.cm-grid_tools .rgRow > td {
    border-bottom: none !important;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_tools .rgCommandRow table,
    .RadGrid.cm-grid_tools .rgDetailTable,
    .RadGrid.cm-grid_tools .rgEditForm table,
    .RadGrid.cm-grid_tools .rgGroupPanel table,
    .RadGrid.cm-grid_tools .rgMasterTable,
    .RadGrid.cm-grid_tools .rgPager table {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_tools .rgCommandRow table,
    .RadGrid.cm-grid_tools .rgDetailTable,
    .RadGrid.cm-grid_tools .rgEditForm table,
    .RadGrid.cm-grid_tools .rgGroupPanel table,
    .RadGrid.cm-grid_tools .rgMasterTable,
    .RadGrid.cm-grid_tools .rgPager table {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_tools .rgCommandRow table,
    .RadGrid.cm-grid_tools .rgDetailTable,
    .RadGrid.cm-grid_tools .rgEditForm table,
    .RadGrid.cm-grid_tools .rgGroupPanel table,
    .RadGrid.cm-grid_tools .rgMasterTable,
    .RadGrid.cm-grid_tools .rgPager table {
        /*font: normal 12px Prompt !important;*/
    }
} 

.RadGrid.cm-grid_tools .rgSelectedCell .rgBatchCurrent,
.RadGrid.cm-grid_tools .rgSelectedRow .rgBatchCurrent {
    padding-bottom: 2px;
    padding-top: 3px;
}

    .RadGrid.cm-grid_tools .rgSelectedCell .rgBatchCurrent input[type="text"],
    .RadGrid.cm-grid_tools .rgSelectedRow .rgBatchCurrent input[type="text"] {
        border: none;
        border-radius: 5px;
        color: #646c9a;
        font-family: "Poppins",Prompt !important;
    }

        .RadGrid.cm-grid_tools .rgSelectedCell .rgBatchCurrent input[type="text"]:focus,
        .RadGrid.cm-grid_tools .rgSelectedRow .rgBatchCurrent input[type="text"]:focus {
            border: none;
            outline: none !important;
        }

.RadGrid.cm-grid_tools:focus {
    outline: none !important;
}

.RadGrid.cm-grid_tools .rgAdd,
.RadGrid.cm-grid_tools .rgCancel,
.RadGrid.cm-grid_tools .rgExpXLS,
.RadGrid.cm-grid_tools .rgPageFirst,
.RadGrid.cm-grid_tools .rgPageLast,
.RadGrid.cm-grid_tools .rgPageNext,
.RadGrid.cm-grid_tools .rgPagePrev,
.RadGrid.cm-grid_tools .rgRefresh,
.RadGrid.cm-grid_tools .rgSave {
    background-color: rgba(93, 120, 255, 0.1);
    background-image: none !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 3px !important;
    width: auto !important;
}

/*.RadGrid.cm-grid_tools .rgPageFirst,
.RadGrid.cm-grid_tools .rgPageLast,
.RadGrid.cm-grid_tools .rgPageNext,
.RadGrid.cm-grid_tools .rgPagePrev {
    background-color: #fff !important;
}*/

.RadGrid.cm-grid_tools .rgCommandCell {
   /* background-color: #fff;*/
    padding: 2px 0;
}

    .RadGrid.cm-grid_tools .rgCommandCell .t-font-icon {
        display: block;
        font: inherit;
        height: auto;
        min-width: auto;
        width: auto;
    }

.RadGrid.cm-grid_tools .rgPagerCell {
   /* color: #646c9a !important;
    background-color: #fff;*/
    border: none !important;
    padding: 0;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_tools .rgPagerCell {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_tools .rgPagerCell {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_tools .rgPagerCell {
        /*font: normal 13px Prompt !important;*/
    }
}

/*tum บังเกี่ยวกับ rgPager ไปก่อน*/
/*.RadGrid.cm-grid_tools .rgPagerCell .NextPrevAndNumeric {
    margin-bottom: 0;
    padding: 10px 5px 5px;
}

    .RadGrid.cm-grid_tools .rgPagerCell .NextPrevAndNumeric .rgWrap.rgArrPart1,
    .RadGrid.cm-grid_tools .rgPagerCell .NextPrevAndNumeric .rgWrap.rgArrPart2,
    .RadGrid.cm-grid_tools .rgPagerCell .NextPrevAndNumeric .rgWrap.rgNumPart {
        margin-top: 4px;
    }

    .RadGrid.cm-grid_tools .rgPagerCell .NextPrevAndNumeric .rgWrap.rgNumPart {
        margin-top: 0px !important;
    }*/

/*.RadGrid.cm-grid_tools .rgPagerCell .rgNumPart a.rgCurrentPage {
    cursor: pointer;
    transition: all 0.8s ease 0s;
}

.RadGrid.cm-grid_tools .rgPagerCell .rgActionButton,
.RadGrid.cm-grid_tools .rgPagerCell .rgPagerButton {
    border-radius: 1px !important;
    color: #8f8f8f !important;
    height: 23px !important;
    padding: 1px 0.8px;
    transition: all 0.8s ease 0s;
    width: 23px !important;
}

.RadGrid.cm-grid_tools .rgPagerCell .rgCurrentPage {
    border-radius: 1px;
    font-family: monospace;
    font-weight: bolder;
    height: 23px;
    padding: 2px 7px;
    width: 23px;
}

.RadGrid.cm-grid_tools .rgPagerCell .RadComboBox .rcbInner,
.RadGrid.cm-grid_tools .rgPagerCell .RadComboBox .rcbReadOnly {
    background: none;
    border-radius: 5px;
    color: #646c9a;
}*/

/*.RadGrid.cm-grid_tools .rgPagerCell .rgCurrentPage {
    border-radius: 1px;
    font-family: monospace;
    font-weight: bolder;
    height: 23px;
    padding: 2px 7px;
    width: 23px;
}*/

.RadGrid .rgPagerCell .rgNumPart a {
    /*padding: 6px 6px !important;*/
    padding: 4px 6px !important;
    border-radius:5px !important;
}

.RadGrid.cm-grid_tools .rgPagerCell .RadComboBox .rcbInner,
.RadGrid.cm-grid_tools .rgPagerCell .RadComboBox .rcbReadOnly {
    background: none;
    /*border-radius: 1px;*/
    color: #646c9a;
    border-radius: 0.3rem !important;
    border-color: var(--bs-border-color) !important;
}

/*.RadGrid .rgPagerCell .RadComboBox, .RadGrid .rgPagerCell .RadDropDownList {
    min-width: 80px !important;
}*/

.RadGrid.cm-grid_row {
    border: none;
    color: #646c9a;
    padding: 5px;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_row {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_row {
       /* font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_row {
        /*font: normal 13px Prompt !important;*/
    }
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_row .rgHeader {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_row .rgHeader {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_row .rgHeader {
        /*font: normal 13px Prompt !important;*/
    }
}

.RadGrid.cm-grid_row .rgAltRow > td,
.RadGrid.cm-grid_row .rgRow > td {
    border-bottom: none !important;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_row .rgCommandRow table,
    .RadGrid.cm-grid_row .rgDetailTable,
    .RadGrid.cm-grid_row .rgEditForm table,
    .RadGrid.cm-grid_row .rgGroupPanel table,
    .RadGrid.cm-grid_row .rgMasterTable,
    .RadGrid.cm-grid_row .rgPager table {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_row .rgCommandRow table,
    .RadGrid.cm-grid_row .rgDetailTable,
    .RadGrid.cm-grid_row .rgEditForm table,
    .RadGrid.cm-grid_row .rgGroupPanel table,
    .RadGrid.cm-grid_row .rgMasterTable,
    .RadGrid.cm-grid_row .rgPager table {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_row .rgCommandRow table,
    .RadGrid.cm-grid_row .rgDetailTable,
    .RadGrid.cm-grid_row .rgEditForm table,
    .RadGrid.cm-grid_row .rgGroupPanel table,
    .RadGrid.cm-grid_row .rgMasterTable,
    .RadGrid.cm-grid_row .rgPager table {
        /*font: normal 13px Prompt !important;*/
    }
}

.RadGrid.cm-grid_row .rgAltRow > td,
.RadGrid.cm-grid_row .rgEditRow > td,
.RadGrid.cm-grid_row .rgFilterRow > td,
.RadGrid.cm-grid_row .rgFooter > td,
.RadGrid.cm-grid_row .rgHeader,
.RadGrid.cm-grid_row .rgResizeCol,
.RadGrid.cm-grid_row .rgRow > td {
    padding-bottom: 10px;
    padding-left: 13px !important;
    padding-top: 10px;
}

.RadGrid.cm-grid_row .rgSelectedCell .rgBatchCurrent,
.RadGrid.cm-grid_row .rgSelectedRow .rgBatchCurrent {
    padding-bottom: 2px;
    padding-top: 3px;
}

    .RadGrid.cm-grid_row .rgSelectedCell .rgBatchCurrent input[type="text"],
    .RadGrid.cm-grid_row .rgSelectedRow .rgBatchCurrent input[type="text"] {
        border: none;
        border-radius: 5px;
        color: #646c9a;
    }

        .RadGrid.cm-grid_row .rgSelectedCell .rgBatchCurrent input[type="text"]:focus,
        .RadGrid.cm-grid_row .rgSelectedRow .rgBatchCurrent input[type="text"]:focus {
            border: none;
            outline: none !important;
        }

.RadGrid.cm-grid_row:focus {
    outline: none !important;
}

.RadGrid.cm-grid_row .rgAdd,
.RadGrid.cm-grid_row .rgCancel,
.RadGrid.cm-grid_row .rgExpXLS,
.RadGrid.cm-grid_row .rgPageFirst,
.RadGrid.cm-grid_row .rgPageLast,
.RadGrid.cm-grid_row .rgPageNext,
.RadGrid.cm-grid_row .rgPagePrev,
.RadGrid.cm-grid_row .rgRefresh,
.RadGrid.cm-grid_row .rgSave {
    background-color: rgba(93, 120, 255, 0.1);
    background-image: none !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 3px !important;
    width: auto !important;
}

.RadGrid.cm-grid_row .rgPageFirst,
.RadGrid.cm-grid_row .rgPageLast,
.RadGrid.cm-grid_row .rgPageNext,
.RadGrid.cm-grid_row .rgPagePrev {
    background-color: #fff !important;
}

.RadGrid.cm-grid_row .rgCommandCell {
    background-color: #fff;
    padding: 2px 0;
}

    .RadGrid.cm-grid_row .rgCommandCell .t-font-icon {
        display: block;
        font: inherit;
        height: auto;
        min-width: auto;
        width: auto;
    }

.RadGrid.cm-grid_row .rgPagerCell {
    background-color: #fff;
    border: none !important;
    color: #646c9a !important;
    padding: 0;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadGrid.cm-grid_row .rgPagerCell {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadGrid.cm-grid_row .rgPagerCell {
    
    }
}

@media (min-width: 1025px) {
    .RadGrid.cm-grid_row .rgPagerCell {
      
    }
}

.RadGrid.cm-grid_row .rgPagerCell .NextPrevAndNumeric {
    margin-bottom: 0;
    padding: 10px 5px 5px;
}

    .RadGrid.cm-grid_row .rgPagerCell .NextPrevAndNumeric .rgWrap.rgArrPart1,
    .RadGrid.cm-grid_row .rgPagerCell .NextPrevAndNumeric .rgWrap.rgArrPart2,
    .RadGrid.cm-grid_row .rgPagerCell .NextPrevAndNumeric .rgWrap.rgNumPart {
        margin-top: 4px;
    }

.RadGrid.cm-grid_row .rgPagerCell .rgNumPart a.rgCurrentPage {
    cursor: pointer;
    transition: all 0.8s ease 0s;
}

.RadGrid.cm-grid_row .rgPagerCell .rgActionButton,
.RadGrid.cm-grid_row .rgPagerCell .rgPagerButton {
    border-radius: 1px !important;
    color: #8f8f8f !important;
    height: 23px !important;
    padding: 1px 0.8px;
    transition: all 0.8s ease 0s;
    width: 23px !important;
}

.RadGrid.cm-grid_row .rgPagerCell .rgCurrentPage {
    border-radius: 1px;
    font-family: monospace;
    font-weight: bolder;
    height: 23px;
    padding: 2px 7px;
    width: 23px;
}

.RadGrid.cm-grid_row .rgPagerCell .RadComboBox .rcbInner,
.RadGrid.cm-grid_row .rgPagerCell .RadComboBox .rcbReadOnly {
    background: none;
    border-radius: 5px;
    color: #646c9a;
}

/*! Custom RadInput */
.RadInput {
    width: 100%;
}

    .RadInput .riTextBox {
        border: 1px solid #646c9a;
        font-size:12px !important;
    }

@media (max-width: 639px) {
    .RadInput .riTextBox {
       /* font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadInput .riTextBox {
      
    }
}

@media (min-width: 1025px) {
    .RadInput .riTextBox {
         
    }
}

.RadInput .cm-Masked_textbox {
    height: 100% !important;
    padding-right: 0.5rem !important;
    width: 100% !important;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadInput .cm-Masked_textbox {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadInput .cm-Masked_textbox {
       
    }
}

@media (min-width: 1025px) {
    .RadInput .cm-Masked_textbox {
      
    }
}

.RadInput .cm-Masked_textbox--abso {
    padding: 0.6rem;
    position: absolute;
    right: 0;
}

.RadInputHovered {
    border: none !important;
}

/*! Custom RadMenu */
.RadMenu.cm-contextmenu {
    color: #646c9a !important;
    z-index: 10 !important;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadMenu.cm-contextmenu {
        /*font: normal 11px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadMenu.cm-contextmenu {
       
    }
}

@media (min-width: 1025px) {
    .RadMenu.cm-contextmenu {
        
    }
}

.RadMenu.cm-contextmenu .rmVertical .rmItem {
    padding: 0.3rem !important;
}

.RadMenu.cm-contextmenu ul.rmActive,
.RadMenu.cm-contextmenu ul.rmGroup,
.RadMenu.cm-contextmenu ul.rmRootGroup {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.RadMenu.cm-contextmenu .rmGroup .rmLink {
    color: #646c9a !important;
    padding: 0.3rem !important;
}

    .RadMenu.cm-contextmenu .rmGroup .rmLink.rmExpanded,
    .RadMenu.cm-contextmenu .rmGroup .rmLink.rmFocused,
    .RadMenu.cm-contextmenu .rmGroup .rmLink:hover {
        border-radius: 10px !important;
        padding: 0.3rem !important;
    }

.RadMenu .rmItem {
    line-height: 19px !important;
}
.rmLeftImage {
    min-width: 0px !important;
    width: 14px;
    height: 14px;
    margin-top: 1px !important;
}


.RadMenu.cm-context_menu--icon {
    color: #646c9a !important;
    z-index: 10 !important;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadMenu.cm-context_menu--icon {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadMenu.cm-context_menu--icon {
       
    }
}

@media (min-width: 1025px) {
    .RadMenu.cm-context_menu--icon {
        
    }
}

.RadMenu.cm-context_menu--icon .rmVertical .rmItem {
    padding: 0.3rem !important;
}

.RadMenu.cm-context_menu--icon ul.rmActive,
.RadMenu.cm-context_menu--icon ul.rmGroup,
.RadMenu.cm-context_menu--icon ul.rmRootGroup {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.RadMenu.cm-context_menu--icon .rmGroup .rmLink {
    color: #646c9a !important;
    padding: 0.7rem !important;
}

    .RadMenu.cm-context_menu--icon .rmGroup .rmLink.rmExpanded,
    .RadMenu.cm-context_menu--icon .rmGroup .rmLink.rmFocused,
    .RadMenu.cm-context_menu--icon .rmGroup .rmLink:hover {
        border-radius: 10px !important;
        padding: 0.7rem !important;
    }

    .RadMenu.cm-context_menu--icon .rmGroup .rmLink:before {
        position: absolute !important;
    }

    .RadMenu.cm-context_menu--icon .rmGroup .rmLink span.rmText {
        padding: 0 50px 0 22px !important;
        font-size:12px !important;
    }

@media (max-width: 639px) {
    .RadMenu.cm-context_menu--icon .rmGroup .rmLink span.rmText {
        /*font: normal 11px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadMenu.cm-context_menu--icon .rmGroup .rmLink span.rmText {
       
    }
}

@media (min-width: 1025px) {
    .RadMenu.cm-context_menu--icon .rmGroup .rmLink span.rmText {
         
    }
} 

/*! Custom RadToolBar */
.RadToolBar.cm-toolbar {
    z-index: 1 !important;
}

    .RadToolBar.cm-toolbar,
    .RadToolBar.cm-toolbar .rtbOuter {
        background: none;
        border: none;
    }

        .RadToolBar.cm-toolbar .rtbItem {
            margin: 0;
            outline: 0;
        }

            .RadToolBar.cm-toolbar .rtbItem .rtbChoiceArrow,
            .RadToolBar.cm-toolbar .rtbItem .rtbIcon,
            .RadToolBar.cm-toolbar .rtbItem .rtbIn,
            .RadToolBar.cm-toolbar .rtbItem .rtbMid,
            .RadToolBar.cm-toolbar .rtbItem .rtbOut,
            .RadToolBar.cm-toolbar .rtbItem .rtbSplBtnActivator,
            .RadToolBar.cm-toolbar .rtbItem .rtbText,
            .RadToolBar.cm-toolbar .rtbItem .rtbWrap {
                display: inline-flex;
            }

            .RadToolBar.cm-toolbar .rtbItem span.rtbOut {
                display: none !important;
            }

/*! Custom RadTreeView */ 
.RadTreeView.cm-treeview {
    /*color: #1a1d21 !important;*/
    /*min-width: 350px;*/
    transition: all 0.1s ease 0s;
    font-size : 12px !important;
}

@media (max-width: 639px) {
    .RadTreeView.cm-treeview {
     /*   font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadTreeView.cm-treeview {
  
    }
}

@media (min-width: 1025px) {
    .RadTreeView.cm-treeview {
     
    }
}

/*.RadTreeView.cm-treeview .rtUL {
    width: 100% !important;
}*/

/*.RadTreeView.cm-treeview .rtLI {
    margin: 2px !important;
    padding-left: 20px !important;
}*/

.RadTreeView.cm-treeview .rtLines .rtLI:before,
.RadTreeView.cm-treeview .rtLines .rtOut:before {
    border: none !important;
}

.RadTreeView.cm-treeview .rtMinus:before,
.RadTreeView.cm-treeview .rtPlus:before {
    color: #646c9a !important;   
    font: 14px WebComponentsIcons;
}

.RadTreeView.cm-treeview .rtIn {
    width: 100% !important;
}

.RadTreeView.cm-treeview .rtImg {
    border: 2px solid #fff !important;
    border-radius: 50%;
    height: 29px;
    margin-right: 7px !important;
    min-height: 29px;
    min-width: 28px;
    width: 28px;
}

.RadTreeView.cm-treeview .rtText {
    vertical-align: baseline !important;
}

.RadTreeView.cm-treeview:focus {
    outline: none !important;
}

.RadTreeView.cm-treeview .rtSelected .rtIn {
    padding: 0.3rem;
}

.RadTreeView.cm-treeview_drapdrop {
    color: #646c9a !important;
    transition: all 0.1s ease 0s;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadTreeView.cm-treeview_drapdrop {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadTreeView.cm-treeview_drapdrop {
       
    }
}

@media (min-width: 1025px) {
    .RadTreeView.cm-treeview_drapdrop {
      
    }
}

.RadTreeView.cm-treeview_drapdrop .rtUL {
    width: 100% !important;
}

.RadTreeView.cm-treeview_drapdrop .rtLI {
    margin: 2px !important;
    padding-left: 20px !important;
}

.RadTreeView.cm-treeview_drapdrop .rtLines .rtLI:before,
.RadTreeView.cm-treeview_drapdrop .rtLines .rtOut:before {
    border: none !important;
}

.RadTreeView.cm-treeview_drapdrop .rtMinus:before,
.RadTreeView.cm-treeview_drapdrop .rtPlus:before {
    color: #646c9a !important;
    font: 20px WebComponentsIcons;
}

.RadTreeView.cm-treeview_drapdrop .rtIn {
    width: 100% !important;
}

.RadTreeView.cm-treeview_drapdrop .rtImg {
    border: 2px solid #fff !important;
    border-radius: 50%;
    height: 29px;
    margin-right: 7px !important;
    min-height: 29px;
    min-width: 28px;
    width: 28px;
}

.RadTreeView.cm-treeview_drapdrop .rtText {
    vertical-align: baseline !important;
}

.RadTreeView.cm-treeview_drapdrop:focus {
    outline: none !important;
}

.RadTreeView.cm-treeview_drapdrop .rtSelected .rtIn {
    padding: 0.3rem;
}

/*! Custom RadWindow */
.RadWindow.cm-window {
    background-color: #fff;
    border: none;
    padding: 5px;
    font-size: 12px !important;    
}

    .RadWindow.cm-window.cm-window--moblie {
        bottom: 0 !important;
        height: 100% !important;
        left: 0 !important;
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
    }

@media screen and (min-width: 1026px) {
    .RadWindow.cm-window .rwCommandButton {
        padding: 4px;
        position: absolute;
        right: -39px;
        top: -3px;
    }
}

@media (max-width: 639px) {
    .RadWindow.cm-window {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadWindow.cm-window {
       /* font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadWindow.cm-window {
        /*font: normal 13px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) {
    .RadWindow.cm-window {
        border-radius: 5px;
    }
}

.RadWindow.cm-window .rwTitleBar {
    background-color: #000000;
    color: #646c9a !important;
    padding: 0.5rem;
}

@media screen and (min-width: 641px) {
    .RadWindow.cm-window .rwTitleBar {
        width: 94%;
    }
}

.RadWindow.cm-window .rwCloseButton {
    transition: all 0.6s ease 0s;
}

.RadWindow.cm-window .rwTitleWrapper {
    padding: 0;
}

.RadWindow.cm-window .rwIcon {
    font-size: 14px !important;
    margin: -0.5em 0 0 !important;
}

.RadWindow.cm-window .rwContent {
    height: calc(100% - 30px) !important;
}

.RadWindow.cm-window_render {
    background-color: #fff;
    border: none;
    padding: 5px;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadWindow.cm-window_render {
       /* font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadWindow.cm-window_render {
        
    }
}

@media (min-width: 1025px) {
    .RadWindow.cm-window_render {
     
    }
}

@media (min-width: 641px) {
    .RadWindow.cm-window_render {
        border-radius: 5px;
    }
}

.RadWindow.cm-window_render .rwTitleBar {
    background-color: #fff;
    color: #646c9a !important;
    padding: 0.5rem;
}

@media screen and (min-width: 641px) {
    .RadWindow.cm-window_render .rwTitleBar {
        width: 94%;
    }
}

.RadWindow.cm-window_render .rwCloseButton {
    transition: all 0.6s ease 0s;
}

.RadWindow.cm-window_render .rwTitleWrapper {
    padding: 0;
}

.RadWindow.cm-window_render .rwIcon {
    font-size: 14px !important;
    margin: -0.5em 0 0 !important;
}

.RadWindow.cm-window_render .rwContent {
    height: calc(100% - 30px) !important;
}

div[id^="RadWindowWrapper_confirm"] {
    background-color: #fff;
    border: 0;
    border-radius: 5px;
    height: 250px !important;
    padding: 5px;
    width: 300px !important;
    font-size:13px !important;
}

@media (max-width: 639px) {
    div[id^="RadWindowWrapper_confirm"] {
        /*font: normal 13px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    div[id^="RadWindowWrapper_confirm"] {
        
    }
}

@media (min-width: 1025px) {
    div[id^="RadWindowWrapper_confirm"] {
        
    }
}

@media (min-width: 641px) {
    div[id^="RadWindowWrapper_confirm"] {
        border-radius: 5px;
    }
}

div[id^="RadWindowWrapper_confirm"] .rwTitleBar {
    padding: 0.5rem;
}

@media screen and (min-width: 641px) {
    div[id^="RadWindowWrapper_confirm"] .rwTitleBar {
        width: 94%;
    }
}

div[id^="RadWindowWrapper_confirm"] .rwCloseButton {
    transition: all 0.6s ease 0s;
}

div[id^="RadWindowWrapper_confirm"] .rwTitleWrapper {
    padding: 0;
}

div[id^="RadWindowWrapper_confirm"] .rwIcon {
    font-size: 14px !important;
   /* margin: -0.5em 0 0 !important;*/
}

div[id^="RadWindowWrapper_confirm"] .rwContent {
    /*height: calc(100% - 30px) !important;*/
    height: 100% !important;
}

div[id^="RadWindowWrapper_confirm"] .rwTitleBar {
    background-color: #fff;
    color: #646c9a !important;
    /*padding: 0.8rem;*/
    position: absolute;
    width: 280px;
    margin:0px !important;
}

.RadWindow .rwDialog {
    padding:0px !important;
}

.RadWindow .rwContent { 
    border-radius: 5px !important;
}

div[id^="RadWindowWrapper_confirm"] .rwDialog {
    margin: 0;
}

    div[id^="RadWindowWrapper_confirm"] .rwDialog:before {
        font-size: 60px;
        left: 0;
        margin: 2rem 7rem 1.8rem 8rem !important;
        position: static;
        top: 0;
    }

div[id^="RadWindowWrapper_confirm"] .rwDialogContent {
    padding: 1em;
    text-align: center;
}

    div[id^="RadWindowWrapper_confirm"] .rwDialogContent .rwDialogMessage {
        color: #646c9a;
    }

div[id^="RadWindowWrapper_confirm"] .rwDialogButtons {
    content: "ตามขนาดที่ส่งมา";
    position: static !important;
    text-align: center !important;
}

    div[id^="RadWindowWrapper_confirm"] .rwDialogButtons button {
        border-radius: 0.25rem;
        font-weight: 700;
        min-height: 35px;
        min-width: 78px;
        padding: 7px 26px;
    }

div[id^="RadWindowWrapper_alert"] {
    background-color: #fff;
    border: 0;
    border-radius: 5px;
    font: normal 12px Prompt !important;
    height: 270px !important;
    padding: 5px;
    width: 300px !important;
    font-size:12px !important;
}

@media (max-width: 639px) {
    div[id^="RadWindowWrapper_alert"] {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    div[id^="RadWindowWrapper_alert"] {
         
    }
}

@media (min-width: 1025px) {
    div[id^="RadWindowWrapper_alert"] {
         
    }
}

@media (min-width: 641px) {
    div[id^="RadWindowWrapper_alert"] {
        border-radius: 5px;
    }
}

div[id^="RadWindowWrapper_alert"] .rwTitleBar {
    padding: 0.5rem;
}

@media screen and (min-width: 641px) {
    div[id^="RadWindowWrapper_alert"] .rwTitleBar {
        width: 94%;
    }
}

div[id^="RadWindowWrapper_alert"] .rwCloseButton {
    transition: all 0.6s ease 0s;
}

div[id^="RadWindowWrapper_alert"] .rwTitleWrapper {
    padding: 0;
}

div[id^="RadWindowWrapper_alert"] .rwIcon {
    font-size: 14px !important;
    margin: -0.5em 0 0 !important;
}

div[id^="RadWindowWrapper_alert"] .rwContent {
    height: calc(100% - 30px) !important;
}

div[id^="RadWindowWrapper_alert"] .rwTitleBar {
    background-color: #fff;
    color: #646c9a !important;
    padding: 0.8rem;
    position: absolute;
    width: 280px;
}

    div[id^="RadWindowWrapper_alert"] .rwDialog:before,
    div[id^="RadWindowWrapper_alert"] .rwTitleBar .rwTitleWrapper {
        display: none;
    }

div[id^="RadWindowWrapper_alert"] .rwDialogContent {
    padding: 0;
}

    div[id^="RadWindowWrapper_alert"] .rwDialogContent .modal-title {
        color: #646c9a !important;
        text-align: center;
    }

    div[id^="RadWindowWrapper_alert"] .rwDialogContent .icon-box {
        border-radius: 50%;
        height: 80px;
        margin: 0 auto;
        text-align: center;
        width: 80px;
        z-index: 9;
    }

        div[id^="RadWindowWrapper_alert"] .rwDialogContent .icon-box i {
            display: inline-block;
            font-size: 46px;
            margin: 5px;
        }

        div[id^="RadWindowWrapper_alert"] .rwDialogContent .icon-box.success {
            border: 3px solid #3fa055;
        }

            div[id^="RadWindowWrapper_alert"] .rwDialogContent .icon-box.success i {
                color: #3fa055;
            }

        div[id^="RadWindowWrapper_alert"] .rwDialogContent .icon-box.warning {
            border: 3px solid #646c9a;
        }

            div[id^="RadWindowWrapper_alert"] .rwDialogContent .icon-box.warning i {
                color: #646c9a;
            }

div[id^="RadWindowWrapper_alert"] .rwDialogButtons {
    text-align: center;
}

    div[id^="RadWindowWrapper_alert"] .rwDialogButtons button {
        border-radius: 0.25rem;
        font-weight: 700;
        min-height: 35px;
        min-width: 78px;
        padding: 7px 26px;
    }

.TelerikModalOverlay {
    height: 100% !important;
    position: fixed !important;
    width: 100% !important;
    background-color: #1a1d21 !important; /*tum เพิ่มพื้นหลัง modal สีดำ*/
    opacity: 0.7 !important; 
}

/*! Custom OrgChart */
.RadOrgChart.cm-orgchart {
    zoom: 0.6;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadOrgChart.cm-orgchart {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadOrgChart.cm-orgchart {
        
    }
}

@media (min-width: 1025px) {
    .RadOrgChart.cm-orgchart {
         
    }
}

.RadOrgChart.cm-orgchart .rocItem {
    height: 100%;
}

.RadOrgChart.cm-orgchart .rocItemContent,
.RadOrgChart.cm-orgchart .rocItemTemplate {
    background: none;
    border-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    height: 100%;
    max-width: 22em;
    min-width: 18em;
}

.RadOrgChart.cm-orgchart .rocNodeList {
    margin-top: 49px;
}

.RadOrgChart.cm-orgchart li.rocCollapsedNode .rocItemTemplate:after {
    border: none !important;
}

.RadOrgChart.cm-orgchart .rocCollapseArrow,
.RadOrgChart.cm-orgchart .rocExpandArrow {
    bottom: -9px;
    left: 51%;
}

.RadOrgChart.cm-orgchart .rocCollapseArrow,
.RadOrgChart.cm-orgchart .rocCollapseGroupArrow,
.RadOrgChart.cm-orgchart .rocExpandArrow,
.RadOrgChart.cm-orgchart .rocExpandGroupArrow {
    border-radius: 50%;
    font-size: 9px;
    height: 15px;
    line-height: 13px;
    padding: 0;
    width: 15px;
}

.RadOrgChart.cm-orgchart .rocLineDown,
.RadOrgChart.cm-orgchart .rocLineHorizontal,
.RadOrgChart.cm-orgchart .rocLineUp {
    background-color: #242939;
    background-image: none;
}

.RadOrgChart.cm-orgchart.rocSimple .rocItem:after,
.RadOrgChart.cm-orgchart.rocSimple .rocItemTemplate:after,
.RadOrgChart.cm-orgchart.rocSimple .rocNode:after,
.RadOrgChart.cm-orgchart.rocSimple .rocNode:before {
    border-left: 2px solid #ababab !important;
}

.RadOrgChart.cm-orgchart .rocNode:before {
    border-top: 2px solid #ababab !important;
}

.orgchart-panel {
    height: 350px;
    overflow: hidden;
    position: relative;
}

    .orgchart-panel,
    .orgchart-panel .orgchart-box {
        align-items: center;
        display: flex;
        justify-content: center;
    }

.wp-orgchart {
    position: relative;
}

    .wp-orgchart .wp-orgchart_insert {
        align-items: center;
        background: #f1f1f1;
        cursor: pointer;
        display: flex;
        display: none;
        height: 100%;
        justify-content: center;
        position: relative;
    }

        .wp-orgchart .wp-orgchart_insert.active {
            display: grid !important;
            display: -ms-grid !important;
        }

    .wp-orgchart .wp-orgchart_insert--group {
        align-items: center;
        border-radius: 1rem;
        cursor: pointer;
        justify-content: center;
        position: relative;
    }

        .wp-orgchart .wp-orgchart_insert--group > i {
            color: #a1a1a1;
            font-size: 2rem;
            line-height: 1px;
        }

    .wp-orgchart .wp-orgchart_content.RadOrgChart {
        zoom: 0.6;
        font-size:12px !important;
    }

@media (max-width: 639px) {
    .wp-orgchart .wp-orgchart_content.RadOrgChart {
       /* font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .wp-orgchart .wp-orgchart_content.RadOrgChart {
       
    }
}

@media (min-width: 1025px) {
    .wp-orgchart .wp-orgchart_content.RadOrgChart {
    
    }
}

.wp-orgchart .wp-orgchart_content.RadOrgChart .rocItem {
    height: 100%;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart .rocItemContent,
.wp-orgchart .wp-orgchart_content.RadOrgChart .rocItemTemplate {
    background: none;
    border-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    height: 100%;
    max-width: 22em;
    min-width: 18em;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart .rocNodeList {
    margin-top: 49px;
}

.wp-orgchart
.wp-orgchart_content.RadOrgChart
li.rocCollapsedNode
.rocItemTemplate:after {
    border: none !important;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart .rocCollapseArrow,
.wp-orgchart .wp-orgchart_content.RadOrgChart .rocExpandArrow {
    bottom: -9px;
    left: 51%;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart .rocCollapseArrow,
.wp-orgchart .wp-orgchart_content.RadOrgChart .rocCollapseGroupArrow,
.wp-orgchart .wp-orgchart_content.RadOrgChart .rocExpandArrow,
.wp-orgchart .wp-orgchart_content.RadOrgChart .rocExpandGroupArrow {
    border-radius: 50%;
    font-size: 9px;
    height: 15px;
    line-height: 13px;
    padding: 0;
    width: 15px;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart .rocLineDown,
.wp-orgchart .wp-orgchart_content.RadOrgChart .rocLineHorizontal,
.wp-orgchart .wp-orgchart_content.RadOrgChart .rocLineUp {
    background-color: #242939;
    background-image: none;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart.rocSimple .rocItem:after,
.wp-orgchart .wp-orgchart_content.RadOrgChart.rocSimple .rocItemTemplate:after,
.wp-orgchart .wp-orgchart_content.RadOrgChart.rocSimple .rocNode:after,
.wp-orgchart .wp-orgchart_content.RadOrgChart.rocSimple .rocNode:before {
    border-left: 2px solid #ababab !important;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart .rocNode:before {
    border-top: 2px solid #ababab !important;
}

.wp-orgchart
.wp-orgchart_content.RadOrgChart
ul.rocNodeList.rocLevel1
.rocItem.rocItemTemplate:after {
    left: 7.5% !important;
}

.wp-orgchart
.wp-orgchart_content.RadOrgChart
ul.rocNodeList.rocLevel1
a.rocCollapseArrow {
    left: 9% !important;
}

.wp-orgchart .wp-orgchart_content.RadOrgChart ul.rocNodeList li.wp-chart_node {
    margin-bottom: 2rem;
    margin-left: 7rem;
}

    .wp-orgchart
    .wp-orgchart_content.RadOrgChart
    ul.rocNodeList
    li.wp-chart_node:before {
        border: none !important;
    }

    .wp-orgchart
    .wp-orgchart_content.RadOrgChart
    ul.rocNodeList
    li.wp-chart_node:after {
        border-left: none !important;
        border-top: none !important;
    }

    .wp-orgchart
    .wp-orgchart_content.RadOrgChart
    ul.rocNodeList
    li.wp-chart_node:nth-child(n + 4) {
        display: none;
    }

    .wp-orgchart
    .wp-orgchart_content.RadOrgChart
    ul.rocNodeList
    li.wp-chart_node.active {
        display: block;
    }

    .wp-orgchart
    .wp-orgchart_content.RadOrgChart
    ul.rocNodeList
    li.wp-chart_node
    span.wp-chart_node--border {
        border: none;
        border-top: 2px solid #ababab;
        left: -27px;
        position: absolute;
        top: 39px;
        width: 23px;
    }

.wp-orgchart .wp-orgchart_content.RadOrgChart .kt-media {
    position: relative;
}

    .wp-orgchart .wp-orgchart_content.RadOrgChart .kt-media .kt-media_overlay {
        background-color: #008cba;
        border-radius: 50%;
        bottom: 0;
        height: 100%;
        left: 50%;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transition: 0.5s ease;
        width: 100%;
    }

    .wp-orgchart
    .wp-orgchart_content.RadOrgChart
    .kt-media:hover
    .kt-media_overlay {
        background: #484848;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0.8;
    }

/*! Custom RadAsyncUpload */
.RadAsyncUpload.cm-async {
    height: 100%;
    position: absolute;
    width: 100%;

}

    .RadAsyncUpload.cm-async input.ruBrowse {
        background: none !important;
        border: none !important;
        height: 100% !important;
        width: 100% !important;
    }

    .RadAsyncUpload.cm-async input.ruRemove {
        border-radius: 15px;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        top: 78px;
        z-index: 1;
    }

    .RadAsyncUpload.cm-async .ruFileWrap,
    .RadAsyncUpload.cm-async ul.ruInputs,
    .RadAsyncUpload.cm-async ul.ruInputs li {
        height: 100%;
        width: 100%;
    }

        .RadAsyncUpload.cm-async .ruActions .ruButtonHover,
        .RadAsyncUpload.cm-async .ruFileWrap .ruButtonHover,
        .RadAsyncUpload.cm-async .ruInputs .ruButtonHover {
            background: none !important;
        }

    .RadAsyncUpload.cm-async .ruStyled .ruFileInput {
        cursor: pointer;
    }

    .RadAsyncUpload.cm-async .ruFakeInput,
    .RadAsyncUpload.cm-async .ruStyled .ruFileInput {
        height: 100% !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .RadAsyncUpload.cm-async .ruUploadSuccess {
        display: none;
    }

.RadAsyncUpload.cm-async_image {
    height: 100%;
    position: absolute;
    width: 100%;
}

    .RadAsyncUpload.cm-async_image input.ruBrowse {
        background: none !important;
        border: none !important;
        height: 100% !important;
        width: 100% !important;
    }

    .RadAsyncUpload.cm-async_image input.ruRemove {
        border-radius: 15px;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        top: 78px;
        z-index: 1;
    }

    .RadAsyncUpload.cm-async_image .ruFileWrap,
    .RadAsyncUpload.cm-async_image ul.ruInputs,
    .RadAsyncUpload.cm-async_image ul.ruInputs li {
        height: 100%;
        width: 100%;
    }

        .RadAsyncUpload.cm-async_image .ruActions .ruButtonHover,
        .RadAsyncUpload.cm-async_image .ruFileWrap .ruButtonHover,
        .RadAsyncUpload.cm-async_image .ruInputs .ruButtonHover {
            background: none !important;
        }

    .RadAsyncUpload.cm-async_image .ruStyled .ruFileInput {
        cursor: pointer;
    }

    .RadAsyncUpload.cm-async_image .ruFakeInput,
    .RadAsyncUpload.cm-async_image .ruStyled .ruFileInput {
        height: 100% !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .RadAsyncUpload.cm-async_image .ruUploadSuccess {
        display: none;
    }

.RadAsyncUpload.cm-async_btn {
    cursor: pointer !important;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

    .RadAsyncUpload.cm-async_btn .ruButton,
    .RadAsyncUpload.cm-async_btn .ruInputs {
        height: 100%;
    }

    .RadAsyncUpload.cm-async_btn .ruButton {
        display: none;
    }

    .RadAsyncUpload.cm-async_btn input.ruFileInput {
        height: 100%;
        padding: 0;
        width: 100%;
    }

    .RadAsyncUpload.cm-async_btn .ruFileWrap {
        position: inherit;
    }

    .RadAsyncUpload.cm-async_btn .ruUploadProgress {
        display: none;
    }

    .RadAsyncUpload.cm-async_btn .ruStyled .ruFileInput {
        font-size: 0 !important;
    }

.RadScheduler.cm-scheduler_default {
    border: none;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadScheduler.cm-scheduler_default {
       /* font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadScheduler.cm-scheduler_default {
        
    }
}

@media (min-width: 1025px) {
    .RadScheduler.cm-scheduler_default {
        
    }
}

.RadScheduler.cm-scheduler_default .rsContent.rsMonthView .rsWrap,
.RadScheduler.cm-scheduler_default .rsHeader {
    text-align: center;
}

.RadScheduler.cm-scheduler_default
.rsContent.rsMonthView
.rsHorizontalHeaderWrapper
table.rsHorizontalHeaderTable
th {
    border: none;
}

.RadScheduler.cm-scheduler_default
.rsContent.rsMonthView
.rsContentWrapper
.rsContentScrollArea {
    height: 100% !important;
}

.RadScheduler.cm-scheduler_default
.rsContent.rsMonthView
.rsContentWrapper
.rsContentTable
.rsRow
td {
    padding: 5px;
}

    .RadScheduler.cm-scheduler_default
    .rsContent.rsMonthView
    .rsContentWrapper
    .rsContentTable
    .rsRow
    td.rsAptCreate,
    .RadScheduler.cm-scheduler_default
    .rsContent.rsMonthView
    .rsContentWrapper
    .rsContentTable
    .rsRow
    td.rsNonWorkHour,
    .RadScheduler.cm-scheduler_default
    .rsContent.rsMonthView
    .rsContentWrapper
    .rsContentTable
    .rsRow
    td.rsOtherMonth,
    .RadScheduler.cm-scheduler_default
    .rsContent.rsMonthView
    .rsContentWrapper
    .rsContentTable
    .rsRow
    td.rsSatCol,
    .RadScheduler.cm-scheduler_default
    .rsContent.rsMonthView
    .rsContentWrapper
    .rsContentTable
    .rsRow
    td.rsSunCol {
        background-color: #fff;
    }

.RadUploadProgressArea.cm-progress_default {
    border: none;
    border-radius: 5px;
    box-shadow: 0.123rem 0.35rem 0.35rem 0.35rem rgba(0, 0, 0, 0.075) !important;
    color: #646c9a !important;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadUploadProgressArea.cm-progress_default {
        /*font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadUploadProgressArea.cm-progress_default {
       
    }
}

@media (min-width: 1025px) {
    .RadUploadProgressArea.cm-progress_default {
       
    }
}

.RadUploadProgressArea.cm-progress_default .ruBody,
.RadUploadProgressArea.cm-progress_default .ruFooter,
.RadUploadProgressArea.cm-progress_default .ruHeader {
    background-color: #fff;
    border: none !important;
}

.RadUploadProgressArea.cm-progress_default .ruHeader {
    border-bottom: solid;
    color: #646c9a !important;
}

.RadUploadProgressArea.cm-progress_default .ruFooter .radButton.ruCancel {
    background-color: rgba(93, 120, 255, 0.1);
    border: none;
    border-radius: 0.2rem;
    color: #0077c1;
    transition: all 0.3s ease 0s;
}

.RadUploadProgressArea.cm-progress_default .ruFooter .radButton:hover {
    background-color: #0077c1 !important;
    color: #fff !important;
}

.RadUploadProgressArea.cm-progress_default .ruBody .ruProgressBar {
    border-radius: 100%;
}

.RadUploadProgressArea.cm-progress_default .ruBody .ruProgress {
    border: none;
    border-radius: 5px;
    box-shadow: 0.35rem 0.35rem 0.35rem rgba(0, 0, 0, 0.075);
}

.rcbSlide > .RadComboBoxDropDown {
    font-size:12px !important;

}

/*@media (max-width: 419px) {
    .rcbSlide {
        background-color: rgba(0, 0, 0, 0.38) !important;
        bottom: 0 !important;
        height: 100% !important;
        left: 0 !important;
        padding: 10rem 2rem 0 !important;
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
    }

        .rcbSlide > .RadComboBoxDropDown {
            border: none !important;
            border-radius: 0;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
            color: #646c9a !important;
            height: 290px !important;
            padding: 5px !important;
            width: 100% !important;
        }
}*/

/*@media (max-width: 419px) and (max-width: 639px) {
    .rcbSlide > .RadComboBoxDropDown {*/
        /*font: normal 11px Prompt !important;*/
    /*}
} 

@media (max-width: 419px) {
    .rcbSlide > .RadComboBoxDropDown .rcbHeader {
        padding: 3px;
    } 

    .rcbSlide > .RadComboBoxDropDown .rcbHovered {
        cursor: pointer;
    }

    .rcbSlide > .RadComboBoxDropDown .rcbCheckAllItems,
    .rcbSlide > .RadComboBoxDropDown .rcbCheckAllItemsHovered,
    .rcbSlide > .RadComboBoxDropDown .rcbDisabled,
    .rcbSlide > .RadComboBoxDropDown .rcbHovered,
    .rcbSlide > .RadComboBoxDropDown .rcbItem,
    .rcbSlide > .RadComboBoxDropDown .rcbLoading {
        font-size: 1rem !important;
        padding: 10px 4px !important;
        text-align: center;
    }

    .rcbSlide > .RadComboBoxDropDown .rcbScroll {
        height: 280px;
        overflow: auto !important;
    }

    .rcbSlide > .RadComboBoxDropDown .rcbHeader td,
    .rcbSlide > .RadComboBoxDropDown .rcbHeader th,
    .rcbSlide > .RadComboBoxDropDown .rcbTemplate td,
    .rcbSlide > .RadComboBoxDropDown .rcbTemplate th {
        display: none;
    }

        .rcbSlide > .RadComboBoxDropDown .rcbHeader td:first-child,
        .rcbSlide > .RadComboBoxDropDown .rcbHeader th:first-child,
        .rcbSlide > .RadComboBoxDropDown .rcbTemplate td:first-child,
        .rcbSlide > .RadComboBoxDropDown .rcbTemplate th:first-child {
            display: block;
        }

    .rcbSlide > .RadComboBoxDropDown .rcbTemplate {
        padding: 10px !important;
    }
}*/  
 
.toast.toast-warning {
    background-color: #ffad37 !important;
}

.toast.toast-error {
    background-color: #ae1f25 !important;
}

.toast.toast-success {
    background-color: #00d76d !important;
}

.toast .toast-title {
    color: #fff !important;
}

.cm-highlight {
    background-color: #f8dedf !important;
}

/*tum ทำใหม่*/
.RadToolBar .rtbOuter {
    padding-top:0px !important;
}

.RadWindow {
    padding: 0 !important;
    border-width: 0px !important;
    font-family: "Poppins",Prompt !important;
}

.cmpopup.RadWindow {
    /*padding: 0 3px 3px 3px tum ไม่ต้องใส่ เพราะทำให้กรอบ windows ติด padding !important;*/
    border-color: transparent !important;
 /*   color: white !important;
    background-color: #0078C1 !important;
    background-color: #fff !important;*/
    border-radius: 10px !important;

}

.cmpopup.RadWindow .rwTitleWrapper {
    padding-top:10px !important;
}

    .cmpopup.RadWindow .rwTitleBar {
        font-family: "Poppins",Prompt !important;
        font-size: 14px !important;
 /*       color: white !important; 
        background-image: linear-gradient(#5892a3,#297c94) !important;*/
        margin: 0px !important;
        height: 40px !important; /*tum เพิ่มความสูง #297c94 header~*/
        border-radius : 9px 9px 0px 0px;
    }

    .cmpopup.RadWindow .rwIcon {
        content: none !important;
        background: url('../../Image/browser.png') !important; 
        /* top: 15% !important;*/
        top: 25% !important;
        left: 0.4em !important;
        background-size: cover !important;
    }

.RadWindow .rwIcon {
    margin: 0 0 0 0 !important;
    width: 1em;
    height: 1em;
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    position: absolute;
    top: 6% !important;
    left: 0.1em !important;
}



    .RadWindow .rwIcon:before {
        content: none !important;
    }

    /*tum แก้ style หัว column*/
.RadGrid.cm-grid_tools {
    /*border: 1px !important;*/ /*tum ไม่มีขอบ*/
   /* color: #000000;*/
    /*padding: 5px;*/
    /*padding: 1px;*/
    /*border-color: #c8cce6 !important;*/
  /*  border: 1px solid #e2e5ec !important;*/
    border-radius: 1px !important;
    font-size:12px !important;
}

.RadGrid .rgHeader, .RadGrid th.rgResizeCol, .RadGrid .rgHeaderWrapper {
    border: 0px solid !important; 
    /*background-color: #edf1f6 !important;*/
    /*background-image: linear-gradient( #005f7a,#057f94) !important;*/ /*tumไล่สีหัวGrid*/
    /*background-image: linear-gradient( #f1f4f6,#f5f5f5) !important;*/ /*tumไล่สีหัวGrid*/
}

/*.RadGrid .rgHeader {
    color: #1a1d21 !important;
} */

@media (min-width: 1025px) {
    .RadGrid.cm-grid_tools .rgHeader {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

.RadGrid.cm-grid_tools .rgAltRow > td,
.RadGrid.cm-grid_tools .rgEditRow > td,
.RadGrid.cm-grid_tools .rgFilterRow > td,
.RadGrid.cm-grid_tools .rgFooter > td,
.RadGrid.cm-grid_tools .rgHeader,
.RadGrid.cm-grid_tools .rgResizeCol,
.RadGrid.cm-grid_tools .rgRow > td {
    /* padding-bottom: 10 8 px;
    padding-left: 10px !important;
    padding-top: 10px 8;*/
    padding-bottom: 5px;
    padding-left: 5px !important;
    padding-top: 5px;
    padding-right: 5px;
    font-size: 12px !important;
}

.RadToolBar .rtbItemHovered .rtbWrap, .RadToolBar .rtbItemHovered .rtbChoiceArrow {
    border-color: #0092ab !important;
    color: #f9f9f9 !important;
    background-color: #0092ab !important;
    background-image: linear-gradient(#00acca, #0092ab) !important;
}

.RadGrid .rgHeader {    
    text-transform: none !important;
}


/*! Custom RadComboBox */
.RadComboBox.custom-select {
    background: none;
    border: none;
    color: #646c9a;
    font-weight: 400;
    padding: 0;
    width: 100%;
  /*  font-size:12px !important;*/
}

@media (max-width: 639px) {
    .RadComboBox.custom-select {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadComboBox.custom-select {
      
    }
}

@media (min-width: 1025px) {
    .RadComboBox.custom-select {
       
    }
}

.RadComboBox.custom-select .rcbInput {
    margin: 3px;
    padding: 2px;
}

.RadComboBox.custom-select .rcbInner {
    /*background-color: #fff; #d7d8db* tum /   
    font-weight: 400;
    height: 100%;
    padding: 3px 0.5rem 4px 4px; /*20250203*/
    border-radius: 0.375rem !important; /*tum เพิ่ม*/
    height: 29.2px !important; /*20250203*/
    border: 1px solid var(--bs-border-color);
    padding: 3px 0.5rem 4px 4px; /*20250506 tum เอากลับมาเพราะไม่เท่ากับ tool ตัวอื่น*/
} 

@media (max-width: 639px) {
    .RadComboBox.custom-select .rcbInner {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadComboBox.custom-select .rcbInner {
       /* font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 1025px) {
    .RadComboBox.custom-select .rcbInner {
      /*  font: normal 13px "Poppins",Prompt !important;*/
    }
}

.RadComboBox.custom-select .rcbInner.rcbReadOnly .rcbInput {
 /*   background-color: #fff;
    color: #1a1d21 !important;*/
    /*font-weight: 400 !important;*/
   /* font-size:12px !important;*/
}

@media (max-width: 639px) {
    .RadComboBox.custom-select .rcbInner.rcbReadOnly .rcbInput {
        /*font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadComboBox.custom-select .rcbInner.rcbReadOnly .rcbInput {
        
    }
}

@media (min-width: 1025px) {
    .RadComboBox.custom-select .rcbInner.rcbReadOnly .rcbInput {
        
    }
}

.RadComboBox.custom-select .rcbInner.rcbReadOnly.rcbExpanded,
.RadComboBox.custom-select .rcbInner.rcbReadOnly.rcbFocused,
.RadComboBox.custom-select .rcbInner.rcbReadOnly.rcbHovered {
    background-color: #fff;
   /* border: 1px solid #e2e5ec;*/
    border-color: var(--bs-border-color) !important;
    /*color: #646c9a;*/
    color: var(--bs-body-color) !important;
}

.RadComboBox.custom-select .rcbInner.rcbExpanded .rcbInput,
.RadComboBox.custom-select .rcbInner.rcbFocused .rcbInput,
.RadComboBox.custom-select .rcbInner.rcbHovered .rcbInput {
    background-position: 0 0;
}

.RadComboBox.custom-select .rcbInner.rcbExpanded button.rcbActionButton,
.RadComboBox.custom-select .rcbInner.rcbFocused button.rcbActionButton,
.RadComboBox.custom-select .rcbInner.rcbHovered button.rcbActionButton {
    /*background-color: #fff;*/
    border: none;
    /*color: #646c9a;*/
    color: var(--bs-body-color) !important;
    /*padding: 6px 7px 4px !important;*/
}

.RadComboBox.custom-select .rcbInner button.rcbActionButton {
    /*background-color: #fff;*/
    border: none;
    /*color: #646c9a;*/
    color: var(--bs-body-color) !important;
    /* margin-right: 1px;
    margin-top: 1px;*/
    padding: 7px 7px 4px 7px !important; /*20250203*/
    border-top-right-radius: 0.3rem !important;
    border-bottom-right-radius: 0.3rem !important;
}

.RadComboBox.cm-none .rcbInner {
    border: none;
}

    .RadComboBox.cm-none .rcbInner .rcbActionButton {
        display: none;
    }

.RadComboBox.mg-0 .rcbInput {
    margin: 3px;
    padding: 2px;
}

    .RadComboBox.mg-0 .rcbInner.rcbExpanded .rcbInput,
    .RadComboBox.mg-0 .rcbInner.rcbFocused .rcbInput,
    .RadComboBox.mg-0 .rcbInner.rcbHovered .rcbInput,
    .RadComboBox.mg-0 .rcbInput.rcbEmptyMessage {
        margin: 0 !important;
    }

.RadComboBox.cm-combo_btn {
    width: auto !important;
    font-size:12px !important;
}

@media (max-width: 639px) {
    .RadComboBox.cm-combo_btn {
       /* font: normal 12px Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadComboBox.cm-combo_btn {
    
    }
}

@media (min-width: 1025px) {
    .RadComboBox.cm-combo_btn {
      
    }
}

.RadComboBox.cm-combo_btn .rcbInputCell {
    display: none;
}

.RadComboBox.cm-combo_btn .rcbArrowCell,
.RadComboBox.cm-combo_btn .rcbHovered {
    cursor: pointer;
}

    .RadComboBox.cm-combo_btn .rcbArrowCell a {
        cursor: pointer;
        margin: 0.45rem 0.6rem;
    }

.RadComboBox.cm-combo_btn table td.rcbArrowCell,
.RadComboBox.cm-combo_btn table td.rcbInputCell {
    border-width: 0;
}

input, textarea, keygen, select, button { 
   border: 1px solid #e2e5ec
}

.ui-widget-header {
    /* background: #98c8d6 !important;*/
    border-color: var(--bs-border-color) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}

.ui-widget, .ui-widget select {
    font-family: "Poppins",Prompt !important;
}

img.ui-datepicker-trigger {
    height: 20px !important;
}

.ui-datepicker-trigger {
    padding-left:5px !important;
}

.rd {
    /*    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;*/
    font-family: "Poppins",Prompt !important;
}

.RadComboBox .rcbReadOnly {
    background-image: none !important;
}

.RadDataPager {
    font-family: "Poppins",Prompt !important;
    font-size: 12px !important;
   /* color: #1a1d21 !important;*/
    /*background-color: #f7f9f9 !important;*/
}

.RadComboBoxDropDown .rcbHeader {
    padding: 4px 10px !important;
    /*background-color: #447f91 !important;*/
 /*   background-image: linear-gradient(#5892a3,#297c94) !important;*/
    /*color: #fff !important;*/
}

.RadComboBoxDropDown .rcbHovered {
    /*background-color: var(--bs-info-bg-subtle) !important;*/
}

.RadComboBoxDropDown {
    border: none !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /*color: #1a1d21 !important;*/
    padding: 5px !important;
    font-size: 12px !important;
    font-family: "Poppins",Prompt !important;
}

/*.RadComboBox .rcbInput {
    color: #1a1d21 !important;
}*/

@media (max-width: 639px) {
    .RadComboBoxDropDown {
      /*  font: normal 12px "Poppins",Prompt !important;*/
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .RadComboBoxDropDown {
        
    }
}

@media (min-width: 1025px) {
    .RadComboBoxDropDown {
       
    }
}

.RadComboBoxDropDown .rcbHeader {
    padding: 3px;
}

/*.RadComboBoxDropDown .rcbCheckAllItems,
.RadComboBoxDropDown .rcbCheckAllItemsHovered,
.RadComboBoxDropDown .rcbDisabled,
.RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown .rcbItem,
.RadComboBoxDropDown .rcbLoading {
    padding: 4px !important;  tum บังไว้เพราะทำให้เกิด scoll แนวนอน
}*/

.RadComboBoxDropDown .rcbHovered {
    cursor: pointer;
    border-radius: 4px !important;
}

.RadComboBox .rcbReadOnly .rcbInputCell {
    background-image: none !important;
}

.RadComboBox .rcbFocused .rcbActionButton, .RadComboBox .rcbExpanded .rcbActionButton {
    background-color: #edf1f6 !important;
    background-color: var(--bs-secondary-bg-subtle) !important;
}

.RadComboBox .rcbActionButton {
    background-color: var(--bs-secondary-bg-subtle) !important;
    background-image: none !important;
}

.RadGrid .rgHeaderDiv {
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    /*margin-right:auto !important;*/
}

.RadToolBar .rtbDisabled {    
    opacity: .3 !important;
}

.RadToolBar_Bootstrap .rtbWrap {
    border :none !important;
}

/* 20250304 RadNumericTextBox */
html body .RadInput .riTextBox, html body .RadInputMgr {
    border-radius: 5px !important;
    font: normal 12px "Poppins",Prompt !important;
}

.RadInput, .RadInputMgr {
    /* font: normal 12px "Segoe UI", promt !important ; */
}

.riContSpinButtons {
    padding-right: 1px !important;
}

.RadInput.riSingle .riTextBox, .RadForm.RadForm.rfdTextbox input.riTextBox.rfdDecorated {
    height: 29.2px !important;
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}

.RadListBox {
    font-family: "Poppins",Prompt !important;
    font-size: 12px !important;
}

.cm-grid_tools .rgCommandRow {
    display: flex !important;
    justify-content: flex-end !important; /* จัดให้ปุ่มอยู่ขวา */
    padding-right: 0px !important; /* เพิ่มช่องว่างด้านขวา */
}

.RadGrid .form-check-input[type="checkbox"] {
    width: 1.25em !important;
}

.RadGrid .rgCommandCell {
    color: var(--bs-card-color) !important;
}

.RadGrid .rgFilterBox {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
    outline-width: 0px !important;
    border-radius: 3px !important;
}

.RadGrid .rgBatchCurrent .rgBatchContainer {
    outline-width: 0px !important;
}

input:focus-visible {
    outline-width: 0px !important;
    border-radius:5px !important;
}

.RadGrid .rgBatchContainer > [type="text"] {
    border-radius: 5px !important;
}

.RadInput .riTextBox {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}

.RadTreeView.cm-treeview {
    /*color: var(--bs-breadcrumb-item-active-color);*/
    color: var(--bs-body-color);
}

.RadDataPager {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}

.RadComboBox .rcbReadOnly .rcbInputCell {
    background-color: var(--bs-card-bg) !important;
}

.RadComboBox.custom-select .rcbInner {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}

.RadComboBox .rcbInput {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}

.RadComboBox.custom-select .rcbInner.rcbReadOnly .rcbInput {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}

/*div#ctl00_MainContent_RadListView1_RadDataPager1_ctl03_PageSizeComboBox_DropDown {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}*/

/*.RadComboBoxDropDown .rcbScroll  {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;   --bs-component-bg 
}*/

.RadComboBoxDropDown {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-body-bg2) !important;
}

    .RadComboBoxDropDown .rcbHeader {
        background-image: none !important;
        /*        background-color: #4da0ba !important;
        color: #fff !important;*/
        background-color: var(--bs-primary-bg-subtle) !important;
        border-bottom-width: 0px !important;
        border-radius: 4px !important;
    }

    .RadComboBoxDropDown .rcbHovered {
        /*background-color: #bceff8;*/
/*            background-color: var(--bs-primary-bg-subtle) !important;
        color: var(--bs-card-color) !important; */
        color: var(--bs-link-hover-color) !important;
        background-color: rgba(var(--bs-body-bg-rgb), 0.9) !important;
    }

.RadGrid .rgHeader, .RadGrid th.rgResizeCol, .RadGrid .rgHeaderWrapper {
    background-color: var(--bs-primary-bg-subtle) !important;
    /*background-color: rgba(41, 124, 148, 0.1) secondary !important;*/
}

.RadGrid.cm-grid_tools {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
    border: 1px solid var(--bs-body-bg) !important;
}

.RadGrid .rgHeader a {
    color: var(--bs-card-color) !important;
}

.RadGrid .rgHeader {
    color: var(--bs-card-color) !important;
}

.RadGrid.cm-grid_tools .rgPagerCell {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-card-bg) !important;
}

.RadGrid.cm-grid_tools .rgPageFirst,
.RadGrid.cm-grid_tools .rgPageLast,
.RadGrid.cm-grid_tools .rgPageNext,
.RadGrid.cm-grid_tools .rgPagePrev {
    background-color: var(--bs-card-bg) !important;
}

.RadGrid .rgFilterRow {
    background-color: var(--bs-card-bg) !important;
}

.RadGrid.cm-grid_tools .rgCommandCell {
    background-color: var(--bs-card-bg) !important;
    background-image: none !important;
}

.RadGrid .rgCommandCellRight .t-button {
    margin: 0 0 0 2px;
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-color) !important;
}

.RadToolBar .rtbWrap {
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-color) !important;
}

.cmpopup.RadWindow {
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-color) !important;
}

    .cmpopup.RadWindow .rwTitleBar {
        background-image: none !important;
        background-color: var(--bs-primary) !important;
        color: var(--bs-primary-color) !important;   
    }

.RadGrid .rgGroupHeader {
    text-transform:none !important;
}

.RadGrid .RadInput.riSingle .riTextBox {
    height:25px !important;
}

/*.ui-datepicker .ui-datepicker-title select {
    color: var(--bs-card-color) !important;
    background-color: var(--bs-body-bg2) !important;
}*/
/* สไตล์หัวข้อหลัก */
.custom_breadcrumb {
    font-size: 12px !important;
    color: var(--bs-primary) !important;
    font-weight: 500 !important;
}

/* สไตล์หัวข้อหลัก */
.breadcrumb-title {
    font-size: 12px !important;
    color: var(--bs-primary) !important;
    font-weight: 500 !important;
    display: block !important;
}

/* สไตล์หัวข้อย่อย */
.breadcrumb-subtitle {
    font-size: 12px !important;
    display: block !important;
    margin-top: 0px !important;
}

.breadcrumb {
    margin-bottom:5px !important;
}

.RadScheduler .rsHeader {
    background-image: none !important;
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-card-color) !important;
    text-align: center !important;
    font-size: large !important;
    padding: 0px !important;
    border: 1px solid var(--bs-body-bg) !important;
}

.RadScheduler .rsHeader h2 {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-card-color) !important;
}

.rsDateBox { 
    text-align: center !important;  
    background-image: none !important;
}

.RadScheduler a, .RadScheduler input, .RadScheduler select, .RadScheduler textarea {  
    text-decoration: none !important;
}

.RadScheduler .rsContentTable td { 
    height: 95px;
}

.RadScheduler {
    border: 1px solid var(--bs-body-bg) !important;
    background-color: var(--bs-card-bg) !important;
} 

.RadDataPager {
    border-color: var(--bs-border-color) !important;
}

.RadComboBox .rcbReadOnly .rcbInput {   
    font-family: "Poppins",Prompt !important;
}

.dropdown-toggle::after {
    opacity:0.8 !important;
}

.RadScheduler .rsHorizontalHeaderTable {
    background-image: none !important;
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-card-color) !important;
}

.RadScheduler .rsHorizontalHeaderTable th {
    border-color: var(--bs-card-border-color) !important;     
}

html body .RadInput .riTextBox, html body .RadInputMgr {
    border-color: var(--bs-border-color) !important;
}

.ui-datepicker .ui-datepicker-title select {
    margin: 1px 1px !important;
    border-radius: 3px !important;
    border-color: var(--bs-border-color) !important;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    background-color: var(--bs-body-bg2) !important;
    color: var(--bs-card-color) !important;
}

.ui-widget-content {
    background-color: var(--bs-body-bg2) !important;
    color: var(--bs-card-color) !important;
}

    .ui-state-default, .ui-widget-content .ui-state-default { 
        border: var(--bs-border-width) solid var(--bs-border-color) !important;
        background: var(--bs-body-bg3) !important;
        color: var(--bs-card-color) !important;
    }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #fffa90 !important;
    color: #777620 !important;
}

.ui-widget.ui-widget-content {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.RadDataPager .rdpActionButton {  
    border-color: var(--bs-border-color) !important;
    background-color: var(--bs-card-bg) !important;
    background-image: none !important;
    border-radius: 5px !important;
}

    .RadDataPager .rdpActionButton:hover {
        border-color: var(--bs-border-color) !important; 
        color: var(--bs-body-color) !important;       
    }

.RadComboBox .rcbReadOnly { 
    background-color: var(--bs-card-bg) !important;
    border-radius: 0.3rem !important;
}



.RadDataPager .rdpNumPart a {
    border-radius:5px !important;
}

.RadComboBox .rcbReadOnly .rcbActionButton, .RadComboBox .rcbReadOnly.rcbHovered .rcbActionButton, .RadComboBox .rcbReadOnly.rcbFocused .rcbActionButton, .RadComboBox .rcbReadOnly.rcbExpanded .rcbActionButton {
    color: var(--bs-body-color) !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.RadGrid .rgPagerCell .rgPagerButton, .RadGrid .rgPagerCell .rgActionButton {
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    background-color: var(--bs-card-bg) !important;
    background-image: none !important;
    border-radius: 5px !important; 
}

.RadGrid td.rgExpandCol {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

.RadGrid .rgActionButton {
    color: var(--bs-body-color) !important;
}

.RadDataPager .RadComboBox .rcbInner {
    border-color: var(--bs-border-color) !important;
}

.RadGrid:focus-visible {
    outline: -webkit-focus-ring-color auto 0px !important;
}

.RadComboBox .p-icon:before {
    font-size:15px !important;
    opacity:0.8 !important;
}

.RadDataPager .rdpWrapRight {     
    margin-top: 5px !important;
}

.RadUpload input {
    font: normal 12px "Poppins",Prompt !important;
}

.RadUpload .ruSelectWrap .ruButton {
    background-image: none !important;
    box-shadow: none !important;
    color: var(--bs-primary-color) !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    border-radius: 5px !important;
}

.RadUpload .ruBrowse {
    padding: 5px 10px !important;
}

.RadTreeView .rtHover .rtIn {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-body-color) !important;
}

.RadTreeView .rtSelected .rtIn {
    border-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-body-color) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}

/* Submenu (รองรับ hover ได้เหมือนกัน) */
.list-group-item-action:hover {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
    cursor: pointer;
    border-radius: var(--bs-border-radius);
}

.list-group-item-action.active {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
    font-weight: bold;
}

.RadGrid .rgMasterTable .rgSelectedCell, .RadGrid .rgSelectedRow {
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color) #fff )) !important;
    background-color: var(--bs-secondary-bg-subtle) !important;   
}

.RadComboBoxDropDown .rcbCheckBox,
.RadComboBoxDropDown .rcbCheckAllItemsCheckBox {
    width: 1.25em !important;
    height: 1.25em !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    appearance: none !important;
    background-color: var(--bs-form-check-bg) !important;
    background-image: var(--bs-form-check-bg-image) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 0.3em !important;
    border: var(--bs-border-width) solid var(--bs-secondary-color) !important;
    print-color-adjust: exact !important;
    accent-color: var(--bs-primary) !important;
    transition: box-shadow 0.35s;
}

    /* เมื่อ checkbox ถูกเลือก */
    .RadComboBoxDropDown .rcbCheckBox:checked,
    .RadComboBoxDropDown .rcbCheckAllItemsCheckBox:checked {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    }

.RadComboBoxDropDown .rcbCheckAllItemsHovered {
    color: var(--bs-link-hover-color) !important;
    background-color: rgba(var(--bs-body-bg-rgb), 0.9) !important;
}