@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

body { font-size: 14px; font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 400; line-height: 20px; min-height: calc(var(--vh) * 100); overflow-x: hidden; color: #202B40; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; background-color: #F5F6F7;


}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }

.text-danger { color: #F24949 !important; }

.row { margin-left: -10px; margin-right: -10px; }
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding-left: 10px; padding-right: 10px; }

.container,
.container-fluid { padding-left: 24px; padding-right: 24px; max-width: 1280px !important; }

.btn { font-weight: 600; font-size: 14px; line-height: 20px; height: 40px; padding: 6px 15px; border: 2px solid; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-items: center; gap: 5px; box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03) !important; }
.btn i { display: flex; width: 28px; height: 28px; justify-content: center; align-items: center; font-size: 16px; border-width: 2px; }
.btn-primary { background-color: #F24949; border-color: #F24949; }
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus { background-color: #D33939 !important; border-color: #D33939 !important; }
.btn-outline-secondary { background-color: #FFFFFF; border-color: #EDEFF2; color: #6B7A99; }
.btn-outline-secondary i { color: #ADB8CC; }
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled).active, 
.btn-outline-secondary:not(:disabled):not(.disabled):active, 
.show>.btn-outline-secondary.dropdown-toggle { background-color: #fcfcfc; border-color: #EDEFF2; color: #6B7A99; }

.btn i[data-active="0"],
.btn.active i[data-active="1"] { display: none; }
.btn.active i[data-active="0"] { display: flex; }

.form-control { font-size: 14px; font-weight: 500; line-height: 20px; color: #202B40;  }
.form-control::-webkit-input-placeholder { color: #ADB8CC; }
.form-control:-ms-input-placeholder { color: #ADB8CC; }
.form-control::placeholder { color: #ADB8CC; }

.dropdown-toggle::after { content: "\f107"; font-family: "Font Awesome 6 Pro"; -webkit-font-smoothing: antialiased; display: inline-flex; justify-content: center; align-items: center; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; border: 0; font-size: 14px; margin: 0; color: #D9D9D9; width: 18px; min-width: 18px; height: 18px; }
.dropdown-menu { 
  width: 200px; flex-direction: column; align-items: stretch; border-radius: 15px; border: 2px solid #EDEFF2; background: #FFF; padding: 0; box-shadow: 0px 2px 5px 0px rgba(221, 223, 229, 0.03); }
.dropdown-menu.show { display: flex; }
.dropdown-menu .dropdown-item { padding: 10px; font-size: 14px; font-weight: 400; line-height: 20px; color: #202B40; }
.dropdown-item.active, 
.dropdown-item:active { background-color: #EDEFF2; }
.dropdown-item:focus, 
.dropdown-item:hover { background-color: #EDEFF2; }
.bootstrap-select > .dropdown-toggle { padding-left: 20px; padding-right: 12px; font-weight: 500; }
.bootstrap-select .dropdown-toggle .filter-option { display: flex; align-items: center; }
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; }
.bootstrap-select .dropdown-item { padding: 10px 20px; font-size: 16px; }
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle, 
.bootstrap-select .dropdown-toggle:focus { outline: none !important; outline-offset: 0 !important; }
.bootstrap-select > .dropdown-toggle:after { font-size: 18px; content: '\f0d7'; color: #ADB8CC; } 
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner { line-height: 24px; }

.s2t-navbar { height: 60px; background-color: #FFF; padding: 0; }
.s2t-navbar::before { z-index: 1; position: absolute; content: ''; background-image: url(../img/header.svg); top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center left; opacity: 0.25; }
.s2t-logo { display: flex; align-items: center; gap: 6px; text-decoration: none !important; }
.s2t-logo img { height: 40px; }
.s2t-logo-title { font-size: 15px; font-weight: 700; line-height: 22px; color: #D71921; }
.s2t-logo-subtitle { font-size: 12px; font-weight: 500; line-height: 14px; color: #C3CAD9; }
.s2t-navbar-left { width: 300px; padding: 10px 12px; border-right: 1px solid #F2F2F7; position: relative; z-index: 2; }
.s2t-btn-togglesidebar { background-color: #FFF; border-radius: 4px; border: 1px solid #ECE9F1; background-color: #FFF; display: flex; width: 32px; height: 32px; padding: 8px; align-items: center; gap: 10px; position: absolute; right: -16px; top: 13px; color: #62708C; }

.s2t-navbar-right { flex-grow: 1; display: flex; align-items: center; gap: 16px; padding: 10px 22px 10px 34px; border-bottom: 1px solid #F2F2F7; z-index: 2; }
.s2t-navbar .navbar-collapse .nav-link { color: #C3CAD9; font-size: 16px; font-weight: 600; line-height: 24px; position: relative; padding: 0; }
.s2t-navbar .nav-link:after { content: ""; display: block; width: 35px; height: 2px; background-color: #202B40; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); opacity: 0; }
.s2t-navbar .active .nav-link { color: #202B40; }
.s2t-navbar .active  .nav-link:after { opacity: 1; }
.s2t-navbar-search { height: 40px; max-width: 235px; width: 100%; border-radius: 30px; border: 2px solid #EDEFF2; background-color: #FFF; box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); gap: 10px; padding: 0 14px; display: flex; align-items: center; }
.s2t-navbar-search .input-group-prepend { padding: 4px; }
.s2t-navbar-search i { font-size: 16px; color: #202B40; }
.s2t-navbar-search .form-control { border: 0; height: 100%; background-color: transparent; box-shadow: none !important; outline: none !important; padding: 0; }
.s2t-navbar .navbar-collapse { flex-grow: 0; height: 40px; }
.s2t-navbar .navbar-collapse::after { content: ""; margin-left: 24px; display: block; width: 2px; height: 40px; border-radius: 18px; background: linear-gradient(180deg, rgba(238, 236, 250, 0.00) 0%, #F9F9F9 51.44%, rgba(238, 236, 250, 0.00) 100%); }
.s2t-navbar .navbar-nav { gap: 24px; }

.s2t-navbar-notificationdropdown { margin-left: auto; }
.s2t-navbar-notificationdropdown .dropdown-toggle { background-color: #FFFFFF; color: #6B7A99; padding: 0; width: 38px; min-width: 38px; height: 38px; justify-content: center; border: 2px solid #EDEFF2; }
.s2t-navbar-notificationdropdown .dropdown-toggle::after { display: none; }
.s2t-navbar-notificationdropdown .dropdown-item { display: flex; gap: 12px; padding: 8px 12px; white-space: normal; }
.s2t-navbar-notificationdropdown .dropdown-item.unread { background-color: #EDEFF2; }
.s2t-navbar-notificationdropdown-status { font-size: 8px; }
.s2t-navbar-notificationdropdown-name { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.s2t-navbar-notificationdropdown-time { font-size: 12px; line-height: 16px; }
.s2t-navbar-notificationdropdown-thumbnail { width: 36px; height: 36px; border-radius: 8px; min-width: 36px; display: flex; justify-content: center; align-items: center; border: 1px solid #EDEFF2; background-color: #FFF; color: #6B7A99; }
.readed .s2t-navbar-notificationdropdown-status { color: #a5abb3; }
.unread .s2t-navbar-notificationdropdown-status { color: #f1416c; }
.s2t-navbar-notificationdropdown .btn { margin: 0 auto; display: flex; width: fit-content; }
.s2t-navbar-notificationdropdown .dropdown-menu { max-width: 380px; min-width: 380px; overflow: auto; max-height: 300px; overflow-x: hidden; padding: 8px 0; }
.s2t-navbar-notificationdropdown-content { flex-grow: 1; width: 100%; }
.s2t-navbar-notificationdropdown .dropdown-header { padding: 8px 12px 2px 12px; font-size: 12px; line-height: 20px; font-weight: 600; color: #C3CAD9; }
.s2t-navbar-notificationdropdown .nav-badge { background-color: #f1416c; width: 6px; height: 6px; border-radius: 50%; position: absolute; top: 9px; right: 8px; }

/* .s2t-navbar-userdropdown { margin-left: auto; } */
.s2t-navbar-userdropdown .dropdown-toggle { display: flex; padding: 6px 8px; align-items: center; gap: 10px; align-self: stretch; border-radius: 30px; border: 2px solid #EDEFF2; background-color: #FFF; box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); height: 38px; }
.s2t-userdropdown-avatar { display: flex; width: 24px; height: 24px; flex-direction: column; justify-content: center; align-items: center; border-radius: 25px; background: rgba(218, 222, 230, 0.40); color: #7D8FB3; font-size: 12px; font-weight: 700; line-height: 20px; }
.s2t-navbar-userdropdown .dropdown-toggle::after { font-size: 14px; width: 18px; min-width: 18px; height: 18px; }

.oss-userdropdown-info { padding: 10px; display: flex; gap: 10px; }
.oss-userdropdown-info .s2t-userdropdown-avatar { width: 36px; height: 36px; font-size: 14px; }
.oss-userdropdown-name { font-weight: 600; color: #202B40; font-size: 14px; line-height: 20px; }
.oss-userdropdown-email { font-weight: 400; color: #ADB8CC; font-size: 12px; line-height: 16px; }
.s2t-navbar-userdropdown .dropdown-divider { margin: 0; }

.s2t-page { height: calc(var(--vh) * 100); display: flex; flex-direction: column; }

.s2t-body { display: flex; flex-grow: 1; overflow: auto; position: relative; }
.s2t-sidebar { width: 300px; min-width: 300px; background-color: #FFF; flex-direction: column; align-items: stretch; border-right: 1px solid #F2F2F7; position: sticky; top: 0; display: flex !important; transition: margin-left 0.2s ease; height: 100% !important; }
.s2t-sidebar::before { z-index: 1; position: absolute; content: ''; background-image: url(../img/header.svg); top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0.35; }
.s2t-sidebar > * { z-index: 2; position: relative; }
.s2t-sidebar:not(.show) { display: flex; margin-left: -300px; }
.s2t-sidebar.show { display: flex; }
.s2t-sidebar-line { padding: 1px 0 2px; }
.s2t-sidebar-line:before { content: ''; margin: 0 auto; display: block; width: 140px; height: 2px; border-radius: 18px; background: linear-gradient(180deg, rgba(238, 236, 250, 0.00) 0%, #F9F9F9 51.44%, rgba(238, 236, 250, 0.00) 100%); }
.s2t-sidebar-group { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.s2t-sidebar-group-title { font-size: 12px; font-style: normal; font-weight: 600; line-height: 16px; color: #C3CAD9; }
.s2t-sidebar-menuitem { padding: 8px 12px; border-radius: 4px; color: #202B40; font-weight: 500; }
.s2t-sidebar-menuitem.active { background: #EDEFF2; }
.s2t-sidebar-search { padding: 2px 12px; }
.s2t-sidebar-search .input-group { height: 40px; width: 100%; border-radius: 30px; border: 2px solid #F2F3F5; background-color: #F2F3F5; box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); gap: 10px; padding: 0 14px; display: flex; align-items: center; }
.s2t-sidebar-search .input-group .input-group-prepend { padding: 4px; }
.s2t-sidebar-search .input-group i { font-size: 16px; color: #202B40; }
.s2t-sidebar-search .input-group .form-control { border: 0; height: 100%; background-color: transparent; box-shadow: none !important; outline: none !important; padding: 0; }
.s2t-sidebar-listitem { padding-left: 12px; gap: 8px; display: flex; align-items: center; cursor: pointer; }
.s2t-sidebar-listico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 4px; background: #F2F2F7; display: flex; justify-content: center; align-items: center; }
.s2t-sidebar-listcontent { padding: 6px 12px; padding-left: 0; border-bottom: 1px solid #F2F2F7; flex-grow: 1; }
.s2t-sidebar-listdate { color: #C3CAD9; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; }
.s2t-sidebar-body { display: flex; flex-direction: column; overflow: auto; flex-grow: 1; overflow: auto; }
.s2t-sidebar .s2t-btn-close { display: none; }

.s2t-content { flex-grow: 1; padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; overflow: auto; overflow-x: hidden; }
.s2t-heading { display: flex; align-items: center; gap: 12px; }
.s2t-heading-label { margin-right: auto; font-size: 22px; font-style: normal; font-weight: 600; line-height: 40px; }
.s2t-heading-content { margin-right: auto; }
.s2t-heading-content .s2t-heading-label { font-size: 22px; font-style: normal; font-weight: 600; line-height: 32px; }

.table { margin: 0; min-width: 1000px; }
.table thead th { border-top: 0; border-bottom: 2px solid #F2F2F7; font-weight: 600; }
.table body th { font-weight: 600; }
.table th,
.table td { border-color: #F2F2F7; color: #202B40; padding: 10px 12px; }
.table .btn-link { text-decoration: underline; color: #202B40; }
.s2t-table-progress { display: flex; gap: 10px; align-items: center; }
.s2t-table-progress .progress { width: 176px; height: 5px; background-color: #DADEE6; }
.s2t-table-progress .progress-bar { background-color: #F24949; border-radius: 5px; }
.table .badge { font-size: 12px; line-height: 15px; display: inline-flex; align-items: center; padding: 4px 12px; font-weight: 600; }
.s2t-transcribe-status { font-size: 10px; display: inline-flex; justify-content: center; align-items: center;  border-radius: 5px; border: 2px solid #EDEFF2; background-color: #FFFFFF; width: 22px;
height: 22px; box-shadow: 0px 2px 10px 0px rgba(38, 51, 77, 0.03); }
.s2t-transcribe-status.active { color: #FFFFFF; background-color: #202B40; border-color: #202B40; }
.s2t-btn-play { height: 22px; padding: 0 10px; font-size: 12px;   font-style: normal;   font-weight: 600;   line-height: 17px }

.card { border-radius: 8px; background: #FFF; border: 0; }
.card-body { display: flex; padding: 20px 24px; flex-direction: column; gap: 16px; align-self: stretch; }
.card-body.scroll { overflow: auto; }
.s2t-card-title { font-size: 18px; font-weight: 600; line-height: 24px; display: flex; gap: 10px; align-items: center; }
.s2t-card-title [data-toggle="tooltip"] { color: #ADB8CC; }

.pagination { margin: 0; position: relative; z-index: 1; }

.filepond--root { font-family: inherit; border-radius: 15px; border: 2px solid #EDEFF2; background: #FFF; /* Shadows/Gray Blue 30/3%/5b */
  box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); height: 90px; margin: 0; }
.filepond--root *:not(text) { font-size: 14px; line-height: 20px; }
.filepond--root .filepond--credits { display: none; }
.filepond--panel-root { background-color: transparent; }
.filepond--root .filepond--drop-label { height: 100%; }

.form-label { margin-bottom: 4px; font-weight: 600; padding-left: 20px; }

.row-form { margin: -10px; }
.row-form > div { padding: 10px; }

.badge-success { background: #45E655; }

.modal .modal-dialog { max-width: 800px !important; width: 100% !important; max-height: 80vh; }
.modal .modal-dialog.modal-sm { max-width: 500px !important; }
.modal-header { border: 0; padding: 24px 24px 0; }
.modal-title { font-size: 18px; font-style: normal; font-weight: 600; line-height: 30px; }
.modal-header .close { padding: 0; font-size: 40px; display: flex; color: #ADB8CC; opacity: 1; margin: 0; }
.modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.modal-footer { border: 0; padding: 0 24px 24px; display: flex; gap: 20px; justify-content: flex-end; }
.modal-footer .btn { margin: 0; padding: 10px 20px; justify-content: center; }
.modal-footer .btn-primary { min-width: 120px; }
.modal-content { border-radius: 15px; background: #FFF; box-shadow: 0px 60px 120px 0px rgba(38, 51, 77, 0.05); border: 0; flex-direction: column; }
.modal .card { border: 2px solid #EDEFF2; max-height: 245px; ; }
.modal-backdrop { background: rgba(17, 38, 60, 0.25); }
.modal-backdrop.show { opacity: 1; }
.modal .card-body { overflow: auto; }
.s2t-card-listgroup { display: flex; flex-direction: column; gap: 20px; }
.s2t-card-listitem { display: flex; gap: 24px; opacity: 0.25; }
.s2t-card-listitem.active { opacity: 1; }
.s2t-card-listitem-duration { min-width: 60px; width: 60px; }

.s2t-mediaplayer { display: flex; align-items: center; padding: 12px 20px; gap: 16px; border-radius: 8px; border: 1px solid #F2F2F7; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); align-self: flex-start; width: 100%; max-width: 655px; }
.s2t-mediaplayer .btn { min-height: 14px; min-width: 14px; height: 14px; padding: 0; border: 0; box-shadow: none !important; }
.s2t-mediaplayer .btn i { font-size: 14px; width: 14px; min-width: 14px; height: 14px; }
.s2t-mediaplayer .s2t-btn-playpause { height: 32px; }
.s2t-mediaplayer .s2t-btn-playpause i { font-size: 32px; width: 32px; height: 32px; }
.s2t-mediaplayer-left { display: flex; gap: 12px; align-items: center; }
.s2t-mediaplayer-right { display: flex; gap: 12px; align-items: center; }
.s2t-mediaplayer-center { display: flex; gap: 12px; align-items: center; flex-grow: 1; }
.s2t-mediaplayer-duration { font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; }
.s2t-mediaplayer .s2t-player { width: 100%; height: auto !important; }
.s2t-mediaplayer .s2t-volume { width: 92px; height: auto !important; }
.s2t-mediaplayer .s2t-btn-playpause i::after { opacity: 1; color: #F2F2F7; }

input[type=range].s2t-player { height: 2.2em; -webkit-appearance: none; }
/*progress support*/
input[type=range].s2t-player.slider-progress { --range: calc(var(--max) - var(--min)); --ratio: calc((var(--value) - var(--min)) / var(--range)); --sx: calc(0.5 * 16px + var(--ratio) * (100% - 16px)); }
input[type=range].s2t-player:focus { outline: none; }
/*webkit*/
input[type=range].s2t-player::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 16px; background: #D71921; border: none; box-shadow: 0 0 0 4px rgba(215,25,33,0.15); margin-top: calc(6px * 0.5 - 16px * 0.5); }
input[type=range].s2t-player::-webkit-slider-runnable-track { height: 6px; border: none; border-radius: 6px; background: #F2F2F7; box-shadow: none; }
input[type=range].s2t-player.slider-progress::-webkit-slider-runnable-track { background: linear-gradient(#202B40,#202B40) 0/var(--sx) 100% no-repeat, #F2F2F7; }
/*mozilla*/
input[type=range].s2t-player::-moz-range-thumb { width: 16px; height: 16px; border-radius: 16px; background: #D71921; border: none; box-shadow: 0 0 0 4px rgba(215,25,33,0.15); }
input[type=range].s2t-player::-moz-range-track { height: 6px; border: none; border-radius: 6px; background: #F2F2F7; box-shadow: none; }
input[type=range].s2t-player.slider-progress::-moz-range-track { background: linear-gradient(#202B40,#202B40) 0/var(--sx) 100% no-repeat, #F2F2F7; }
/*ms*/
input[type=range].s2t-player::-ms-fill-upper { background: transparent; border-color: transparent; }
input[type=range].s2t-player::-ms-fill-lower { background: transparent; border-color: transparent; }
input[type=range].s2t-player::-ms-thumb { width: 16px; height: 16px; border-radius: 16px; background: #D71921; border: none; box-shadow: 0 0 0 4px rgba(215,25,33,0.15); margin-top: 0; box-sizing: border-box; }
input[type=range].s2t-player::-ms-track { height: 6px; border-radius: 6px; background: #F2F2F7; border: none; box-shadow: none; box-sizing: border-box; }
input[type=range].s2t-player.slider-progress::-ms-fill-lower { height: 6px; border-radius: 6px 0 0 6px; margin: -undefined 0 -undefined -undefined; background: #202B40; border: none; border-right-width: 0; }

input[type=range].s2t-volume { height: 2.2em; -webkit-appearance: none; }
/*progress support*/
input[type=range].s2t-volume.slider-progress { --range: calc(var(--max) - var(--min)); --ratio: calc((var(--value) - var(--min)) / var(--range)); --sx: calc(var(--ratio) * 100%); }
input[type=range].s2t-volume:focus { outline: none; }
/*webkit*/
input[type=range].s2t-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 6px; visibility: hidden; }
input[type=range].s2t-volume::-webkit-slider-runnable-track { height: 6px; border: none; border-radius: 6px; background: #F2F2F7; box-shadow: none; }
input[type=range].s2t-volume.slider-progress::-webkit-slider-runnable-track { background: linear-gradient(#202B40,#202B40) 0/var(--sx) 100% no-repeat, #F2F2F7; }
/*mozilla*/
input[type=range].s2t-volume::-moz-range-thumb { width: 0; height: 6px; visibility: hidden; }
input[type=range].s2t-volume::-moz-range-track { height: 6px; border: none; border-radius: 6px; background: #F2F2F7; box-shadow: none; }
input[type=range].s2t-volume.slider-progress::-moz-range-track { background: linear-gradient(#202B40,#202B40) 0/var(--sx) 100% no-repeat, #F2F2F7; }
/*ms*/
input[type=range].s2t-volume::-ms-fill-upper { background: transparent; border-color: transparent; }
input[type=range].s2t-volume::-ms-fill-lower { background: transparent; border-color: transparent; }
input[type=range].s2t-volume::-ms-thumb { width: 16px; height: 16px; border-radius: 16px; background: #D71921; border: none; box-shadow: 0 0 0 4px #FF0000; margin-top: 0; box-sizing: border-box; }
input[type=range].s2t-volume::-ms-track { height: 6px; border-radius: 6px; background: #F2F2F7; border: none; box-shadow: none; box-sizing: border-box; }
input[type=range].s2t-volume.slider-progress::-ms-fill-lower { height: 6px; border-radius: 6px 0 0 6px; margin: -undefined 0 -undefined -undefined; background: #202B40; border: none; border-right-width: 0; }

.form-group > .form-control:not(.datepicker) { height: 40px;   /* max-width: 235px; */
    width: 100%;   border-radius: 30px;   border: 2px solid #EDEFF2;   background-color: #FFF;   box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03);   gap: 10px;   padding: 0 20px;   display: flex;   align-items: center; }
.input-group-datepicker { height: 40px;   /* max-width: 235px; */
    width: 100%;   border-radius: 30px;   border: 2px solid #EDEFF2;   background-color: #FFF;   box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03);   gap: 10px;   padding: 0 14px;   display: flex;   align-items: center; }
.input-group-datepicker .form-control { border: 0; outline: 0 !important; box-shadow: none !important; padding: 0; height: 100%; }
.input-group-datepicker .input-group-prepend { padding: 4px; }
.input-group-datepicker i { font-size: 16px; color: #ADB8CC; }

.datepicker-dropdown.dropdown-menu { /* padding: 12px 6px 6px 6px; */
  padding: 0; width: 280px; }
.datepicker-dropdown.dropdown-menu table { width: 100%; }
.datepicker-dropdown.dropdown-menu th,
.datepicker-dropdown.dropdown-menu td { border: 2px solid #EDEFF2; font-size: 14px; line-height: 20px; }
.datepicker-dropdown.dropdown-menu th { height: 34px; text-align: center; padding: 0; color: #7D8FB3; font-weight: 600; cursor: default; border-top: 0; }
.datepicker-dropdown.dropdown-menu td { height: 34px; text-align: center; padding: 0; border-radius: 0; color: #4D5E80; cursor: pointer; position: relative; width: 1%; }
.datepicker-dropdown.dropdown-menu th:first-child,
.datepicker-dropdown.dropdown-menu td:first-child { border-left: 0; }
.datepicker-dropdown.dropdown-menu th:last-child,
.datepicker-dropdown.dropdown-menu td:last-child { border-right: 0; }
.datepicker-dropdown.dropdown-menu tbody tr:last-child td { border-bottom: 0; }
.datepicker-dropdown.dropdown-menu td.active { background-color: #F24949; color: #FFFFFF !important; }
.datepicker-dropdown.dropdown-menu td:hover { background-color: #f4f4f4; }
.datepicker-dropdown.dropdown-menu th.datepicker-switch { font-weight: 600; color: #181c32; cursor: pointer; }
.datepicker-dropdown.dropdown-menu th.prev,
.datepicker-dropdown.dropdown-menu th.next { font-size: 0; cursor: pointer; }
.datepicker-dropdown.dropdown-menu th.prev::before,
.datepicker-dropdown.dropdown-menu th.next::before { content: '\f104'; border: 0; font-family: "Font Awesome 6 Pro"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; line-height: 34px; text-rendering: auto; font-weight: 900; color: #a1a5b7; margin: 0; font-size: 14px; }
.datepicker-dropdown.dropdown-menu th.next::before { content: '\f105'; }
.datepicker-dropdown.dropdown-menu td.old,
.datepicker-dropdown.dropdown-menu td.new { color: #7D8FB3; }
.datepicker-dropdown.dropdown-menu td .month,
.datepicker-dropdown.dropdown-menu td .year { width: 25%; display: inline-flex; justify-content: center; align-items: center; height: 40px; padding: 0; border-radius: 0; color: #7D8FB3; border: 1px solid #EDEFF2; }
.datepicker-dropdown.dropdown-menu td .month:hover,
.datepicker-dropdown.dropdown-menu td .year:hover { background-color: #f4f4f4; }
.datepicker-dropdown.dropdown-menu td .month.active,
.datepicker-dropdown.dropdown-menu td .year.active { background-color: #F24949; color: #FFFFFF; }
.datepicker-dropdown.dropdown-menu .datepicker-months td:hover,
.datepicker-dropdown.dropdown-menu .datepicker-years td:hover { background-color: transparent; }
.datepicker-dropdown.dropdown-menu td.today::before { content: ''; width: 4px; height: 4px; display: block; position: absolute; bottom: 4px; border-radius: 50%; background-color: #F24949; left: 50%; margin-left: -2px; }
.datepicker-dropdown.dropdown-menu td .month:nth-child(1),
.datepicker-dropdown.dropdown-menu td .month:nth-child(2),
.datepicker-dropdown.dropdown-menu td .month:nth-child(3),
.datepicker-dropdown.dropdown-menu td .month:nth-child(4) { border-top: 0; }
.datepicker-dropdown.dropdown-menu td .month:nth-child(9),
.datepicker-dropdown.dropdown-menu td .month:nth-child(10),
.datepicker-dropdown.dropdown-menu td .month:nth-child(11),
.datepicker-dropdown.dropdown-menu td .month:nth-child(12) { border-bottom: 0; }
.datepicker-dropdown.dropdown-menu td .month:nth-child(1),
.datepicker-dropdown.dropdown-menu td .month:nth-child(5),
.datepicker-dropdown.dropdown-menu td .month:nth-child(7) { border-left: 0; }
.datepicker-dropdown.dropdown-menu td .month:nth-child(4),
.datepicker-dropdown.dropdown-menu td .month:nth-child(8),
.datepicker-dropdown.dropdown-menu td .month:nth-child(12) { border-right: 0; }

.s2t-btn-searchfrom { min-width: 150px; justify-content: center;}

.pagination { gap: 10px;}
.pagination .page-link { border: 2px solid #EDEFF2 !important; min-width: 32px; height: 32px; padding: 0 6px; display: inline-flex; justify-content: center; align-items: center; border-radius: 16px !important; color: #6B7A99;  }
    .pagination .page-item:not(.disabled) .page-link:hover { /*background-color: #FAFBFC;*/
    }
.pagination .disabled .page-link { opacity: 0.4; }
.pagination .active .page-link { font-weight: 600; background-color: #F24949; border-color: #F24949 !important; }

.s2t-login { padding: 0px; margin: 0 auto; max-width: 1280px; position: relative; width: 100%; height: 100%; flex-grow: 1; }
.s2t-login-bg { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; overflow: hidden; background-color: #000000; }
.s2t-login-bg video { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: auto; }
.s2t-login-container { max-width: 500px; width: 100%; margin: 0 auto; flex-grow: 1; padding: 60px 40px; padding-bottom: 60px; display: flex; flex-direction: column; justify-content: center; }
.s2t-login-input-group { color: #1E1E1E; height: 48px; display: flex; align-items: center; position: relative; gap: 4px; overflow: hidden; height: 40px;   /* max-width: 235px; */
    width: 100%;   border-radius: 24px;   border: 2px solid #EDEFF2;   background-color: #FFF;   box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03);   padding: 0 16px;   display: flex;   align-items: center; }
.s2t-login-form-group { margin-bottom: 24px; }
.s2t-login-form-group .form-control { border: 0; height: 100%; outline: none; flex-grow: 1; padding: 0; font-size: 16px; box-shadow: none !important; outline: 0 !important; }
.s2t-login-form-group .s2t-login-form-control[type="password"] { font-family: Verdana; letter-spacing: 0.125em; }
.s2t-login-form-icon { font-size: 20px; color: #7E8299; opacity: 0.5; }
.s2t-login-form-label { font-weight: 500; margin-bottom: 4px; }
.s2t-login-right { display: flex; align-items: center; flex-direction: column; justify-content: center; /*position: absolute;*/ max-width: 500px; width: 100%; background-color: #FFFFFF; /* height: 60%; */
  /*max-height: 90vh; top: 50%; transform: translateY(-50%); right: 100px;*/ border-radius: 16px; overflow: auto; }
.s2t-login-logo { margin-bottom: 48px; display: flex; align-items: center; flex-direction: column; text-align: center; font-size: 16px; line-height: 24px; gap: 16px; font-weight: 600; }
.s2t-login-logo img { max-width: 70px; width: 100%; }
.s2t-login .btn { height: 48px; border-radius: 24px; font-size: 16px; justify-content: center; }
.s2t-login-copyright { padding: 8px 12px; font-size: 12px; }
.s2t-page-dashboard .s2t-btn-togglesidebar { display: none; }
.s2t-page-dashboard .s2t-sidebar { display: none !important; }

.s2t-login > .row { min-height: calc(var(--vh) * 100); align-items: center; padding: 24px; }

.s2t-footer { width: 100%; padding: 8px 24px; text-align: center; background-color: #FFF; border-top: 1px solid #F2F2F7; font-size: 12px; color: #C3CAD9; }

.s2t-autocomplete-search { position: relative; }
.s2t-autocomplete-search .input-group { height: 40px; width: 100%; border-radius: 30px; border: 2px solid #EDEFF2; background-color: #FFF; box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); gap: 10px; padding: 0 14px; display: flex; align-items: center; }
.s2t-autocomplete-search .input-group-prepend { padding: 4px; }
.s2t-autocomplete-search i { font-size: 16px; color: #202B40; }
.s2t-autocomplete-search .form-control { border: 0; height: 100%; background-color: transparent; box-shadow: none !important; outline: none !important; padding: 0; }
.s2t-form-autocomplete { position: absolute; z-index: 8; top: 100%; width: 100%; max-height: 400px; font-size: 14px; overflow: auto; margin-top: 4px; background-color: #FFFFFF; color: #181C32; text-align: left; padding: 12px; border-radius: 8px; visibility: hidden; display: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 15px; border: 2px solid #EDEFF2; box-shadow: 0px 2px 5px 0px rgba(221, 223, 229, 0.03); }
.s2t-autocomplete-search.is-focus .s2t-form-autocomplete { visibility: visible; display: block; }
.s2t-autocomplete-group { margin-bottom: 8px; }
.s2t-autocomplete-group:last-child { margin-bottom: 0; }
.s2t-autocomplete-label { font-size: 12px; color: #C3CAD9; padding: 0 8px; font-weight: 600; }
.s2t-autocomplete-item { cursor: pointer; padding: 8px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; }
.s2t-autocomplete-item:hover { background-color: #EDEFF2; }
.s2t-autocomplete-item .highlight-search { color: #F24949; font-weight: 600; text-decoration: underline; }

@media (max-width: 992px) { .s2t-sidebar { position: fixed; z-index: 3; margin-left: -300px; }
  .s2t-sidebar.show,
  .s2t-sidebar.collapsing { margin-left: -300px; }
  .s2t-sidebar:not(.show) { margin-left: 0; }
  .s2t-sidebar .s2t-btn-close { display: flex; border: 0; background-color: transparent !important; box-shadow: none !important; color: #ADB8CC; align-self: flex-end; padding: 0; margin-right: 12px; }
  .s2t-sidebar .s2t-btn-close i { width: 32px; height: 32px; font-size: 32px; }
  .s2t-sidebar-backdrop { position: fixed; z-index: 2; background: rgba(17, 38, 60, 0.25); width: 100%; height: calc(var(--vh) * 100); display: none; top: 0; left: 0; }
  .s2t-sidebar:not(.show) + .s2t-sidebar-backdrop { display: block; }

  .s2t-content { padding-left: 16px; padding-right: 16px; }
  .card-body { padding: 20px 16px; }
  
  .s2t-page-dashboard .s2t-btn-togglesidebar { display: flex; }
  .s2t-page-dashboard .s2t-sidebar { display: flex !important; }

  .s2t-login-right { right: 24px; max-width: 400px; max-height: fit-content; }
  .s2t-login-container { padding: 60px 24px; }

  .form-control,
  .bootstrap-select .dropdown-toggle .filter-option-inner-inner { font-size: 16px; }
}

@media (max-width: 767px) { .s2t-navbar-left { width: 100%; padding: 4px 16px; padding-right: 0; height: 60px; align-items: center; display: flex; border-right: 0; }
  .s2t-logo-subtitle { font-size: 10px; line-height: 12px; }
  .s2t-navbar { flex-wrap: nowrap; border-bottom: 1px solid #F2F2F7; }
  .s2t-navbar-search { display: none; }
  .s2t-navbar-right { padding: 0 16px; border: 0; gap: 8px; padding-left: 8px; }

  .s2t-navbar-userdropdown .dropdown-toggle { gap: 4px; }

  .s2t-btn-togglesidebar { position: relative; top: inherit; right: inherit; margin-left: auto; }
  .modal .modal-dialog { padding: 0; margin: 0; height: calc(var(--vh) *100); max-height: calc(var(--vh) *100); }
  .modal .modal-content { min-height: calc(var(--vh) *100); border-radius: 0; }
  .modal-header .close { font-size: 32px; }
  .modal-header { padding-left: 16px; padding-right: 16px; padding-top: 20px; }
  .modal-body { padding-left: 16px; padding-right: 16px; }
  .modal-footer { padding-left: 16px; padding-right: 16px; padding-bottom: 20px; gap: 12px; }
  .s2t-mediaplayer { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .s2t-mediaplayer-left { width: 100%; justify-content: center; }
  .s2t-mediaplayer-right { display: none; }

  .s2t-heading { gap: 8px; }
  .s2t-heading-label { font-size: 20px; }
  .s2t-heading .btn { white-space: nowrap; padding-left: 4px; padding-right: 12px; gap: 0; }
  .s2t-login-right { position: fixed; right: 0; top: 0; transform: none; max-width: 100%; height: calc(var(--vh) * 100); border-radius: 0; background-color: rgba(0, 0, 0, 0.75); color: #FFF; }

  .s2t-sidebar-listico { font-size: 16px; }

  .s2t-navbar-notificationdropdown .dropdown-menu { position: fixed; right: 8px; top: 62px; width: calc(100% - 16px); min-width: calc(100% - 16px); max-width: calc(100% - 16px); height: calc((var(--vh) * 100) - 70px); max-height: calc((var(--vh) * 100) - 70px); }
}