/* ส่วนเสริมเล็กน้อยของ b.srn8.com (ที่ต้นฉบับใช้ simplebar / react-select ทำให้) */
html, body { height: 100%; }
body { margin: 0; font-size: 14px; color: #000;
       font-family: ui-sans-serif, system-ui, sans-serif, "Segoe UI Emoji"; }
#root { height: 100%; }
#root > .layout { height: 100%; }
#page { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }

/* รายการเลื่อนได้ (แทน simplebar ของต้นฉบับ) */
.un-list-body > ._scroll { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
                           overflow-y: auto; overflow-x: hidden; }
.layout-menu { overflow-y: auto; }

/* select (แทน react-select) */
.un-input-select .s__control { display: flex; align-items: center; min-height: 2rem; }
.un-input-select .s__value-container { display: flex; align-items: center; flex: 1 1 0%;
                                       padding-left: .75rem; padding-right: .25rem; min-height: 2rem; }
.un-input-select .s__indicators { display: flex; align-items: center; }
.un-input-select .s__indicator { display: flex; align-items: center; justify-content: center;
                                 width: 2rem; color: #ccc; cursor: pointer; }
.un-input-select .s__indicator:hover { color: #999; }
.un-input-select .s__indicator-separator { align-self: stretch; width: 1px; background: #e0e1e4;
                                           margin-top: .5rem; margin-bottom: .5rem; }
.un-input-select .s__placeholder { color: #9ca3af; }
.un-input-select .s__menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
                            margin-top: 2px; background: #fff; border-radius: .25rem;
                            border: 1px solid #e0e1e4; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
                            max-height: 260px; overflow-y: auto; }
.un-input-select .s__option { padding: .5rem .75rem; cursor: pointer; }
.un-input-select .s__option:hover { background: #eff0f2; }
.un-input-select .s__option.-selected { background: #2776bd; color: #fff; }

/* ปฏิทิน (โครงเดียวกับ react-datepicker ที่ธีมรองรับอยู่แล้ว) */
.un-popup-date .react-datepicker { background: #fff; border: 1px solid #e0e1e4;
                                   border-radius: .25rem; }
.un-popup-date .react-datepicker__header { background: #f7f8f9; padding-bottom: .25rem; }
.un-popup-date .react-datepicker__month { margin: .25rem 0; }
.un-popup-date .react-datepicker__week,
.un-popup-date .react-datepicker__day-names { display: flex; justify-content: center; }
.un-popup-date .react-datepicker__day,
.un-popup-date .react-datepicker__day-name { display: block; width: 2.25rem; margin: .125rem; flex: 0 0 auto; }

/* toast */
.toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 90; display: flex;
              flex-direction: column; align-items: flex-end; }
.toast-root > ._t { margin-bottom: .5rem; border-radius: .375rem; padding: .625rem 1rem;
                    color: #fff; box-shadow: 0 10px 15px -3px rgba(0,0,0,.2); min-width: 15rem; }
.toast-root > ._t.-success { background: #4caf50; }
.toast-root > ._t.-error { background: #f44336; }

/* หน้า login */
.login-page { display: flex; height: 100%; align-items: center; justify-content: center;
              background: #dee9fd; }
.login-box { width: 22rem; background: #fff; border-radius: .5rem; padding: 1.5rem;
             box-shadow: 0 10px 15px -3px rgba(0,0,0,.15); }
.login-box > ._title { font-size: 1.25rem; text-align: center; margin-bottom: 1.25rem; }

/* แถบเลื่อนบาง ให้ใกล้เคียง simplebar ของต้นฉบับ */
.un-list-body > ._scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.un-list-body > ._scroll::-webkit-scrollbar-track { background: transparent; }
.un-list-body > ._scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 7px;
                                                   border: 3px solid transparent; background-clip: content-box; }
.un-list-body > ._scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.4);
                                                          border: 3px solid transparent; background-clip: content-box; }