a { cursor: pointer;}

/* layout */
body > header {position: fixed; top: 0; left: 0; right: 0; z-index: 1020; margin-bottom: 0; padding: 0; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.15); transition: box-shadow .2s linear; display: flex; align-items: center; justify-content: space-between; }
body > main {padding: 60px 1rem; min-height: 100%; background-color: var(--bs-gray-200); }

body.popup > header { padding: 0 1rem; height: 80px;}
body.popup > header h1 { margin: 0; line-height: 1; }
body.popup > main { padding: 100px 1rem 30px 1rem;}

body.hide_header > header { display: none;}
body.hide_header > main { padding-top: 0;}

.sign-in {display: flex; align-items: center; justify-content: center; min-height: 100%;}
.sign-in form {background-color: #fff; padding: 3rem; border-radius: 1rem; box-shadow: 0 0 5px rgba(0,0,0,.15);}
.sign-in .logo {width: 300px; margin-bottom: 2rem;}

/* loading-spinner */
.loading-spinner-wrapper {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: 2000; display: none; color: white; }
.loading-spinner {position: absolute; left: 47%; top: 42%; font-weight: 500; text-align: center; }
.loader {transform: translate(-50%, -50%); width: 3.5rem; height: 3.5rem; border: 8px solid #414141; border-bottom-color: #ffffff; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; margin-bottom: 0.5rem; -webkit-animation: rotation 1s linear infinite; }

@keyframes rotation {
    0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); }
    100% {transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); }
}

.form-control::placeholder {color: var(--bs-gray-400);}

/* search-form */
.search-form {display: flex; align-items: stretch; }
.search-input-wrap {display: flex; align-items: center; flex-wrap: wrap; grid-gap: 0.25rem}
.search-form .input-group {width:auto}
.search-form .input-group.w-500 {width:300px}
.search-form label {display: block; color: var(--bs-gray-600); font-size: 0.75rem; font-weight: 400;}
.search-button {margin-left: 1rem; white-space: nowrap; padding: 0.25rem 0.75rem}
.search-form .ts-control {padding: 0.35rem 0.5rem !important; border-radius: 0 0.25rem 0.25rem 0;}
.search-form .select-container .select-placeholder {border-radius: 0 0.25rem 0.25rem 0;}
.search-form div.form-control {white-space: nowrap; color: var(--bs-gray-600);}
.search-form div.form-control input:not(:first-child) {margin-left: 1rem;}
.search-form .form-select.selected { background-color: var(--bs-gray-200); color: var(--red-dark); font-weight: 500; }
/*---- end search-form */

/* section */
section {background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.15); border-radius: 0.75rem; border: solid 1px var(--bs-gray-500); position: relative;}
section > header {border: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; background-color: #eff7ff; color: #000; font-size: 14pt; font-weight: 500; padding: 0 1rem; height: 50px; border-radius: 0.75rem 0.75rem 0 0; border-bottom: solid 1px var(--bs-gray-300); white-space: nowrap;}

section.with-tab > header {padding: 0; }
section.with-tab > header ul {list-style: none; margin: 0; padding: 0; display: flex; line-height: 50px; }
section.with-tab > header ul li {padding: 0 1rem; }
section.with-tab > header ul li:hover {background-color: var(--blue-dark); }
section.with-tab > header ul li:first-child {border-top-left-radius: 0.375rem; }
section.with-tab > header ul li.active {background-color: var(--bs-blue);}
section.with-tab > header ul li.active a, section.with-tab > header ul li:hover a {color: #fff;}

section > header, section > header h6 {margin: 0 }
section > header a:link, section > header a:visited {color: #000; }
section > header .btn {display: inline-flex; align-items: center; justify-content: center; height: 24px; font-size: 12px; line-height: 24px; padding: 2px 6px; border-radius: 0.5rem;}
section > header .btn.btn-sm { font-size: 0.875rem; padding: 0.25rem 0.5rem; height: auto; line-height: auto; }
section > header .description {color: var(--bs-gray-600); font-size: 10pt; font-weight: 400; line-height: 24px;}
section > main {padding: 1rem; flex: 1 1 auto; position: relative; transition: opacity .5s;}
section > footer {padding: 1rem; }

section.collapsed {background-color: transparent; height: 50px; transition: all .5s;}
section.collapsed > header {border-radius: 0.75rem; border-bottom: solid 1px var(--bs-gray-500)}
section.collapsed > main, section.collapsed > footer {height: 0; overflow: hidden; padding: 0; opacity: 0;}

/* layout */
.layout-2-cols {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem;}
.layout-3-cols {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem;}

.layout-2-cols.lb-layout { grid-template-columns: 1fr 2fr;}
.layout-2-cols.rb-layout { grid-template-columns: 2fr 1fr;}

h1 {font-family: var(--font-title); margin-top: 1rem; display: flex; justify-content: space-between; align-items: center;}
h1 a:link, h1 a:visited {color: var(--bs-dark) !important;}
h1 .fixed-btns {position: fixed; right: 0; top: 70px; z-index: 99; padding: .25rem 1rem; background-color: rgba(255, 255, 255, 0.7); border-radius: 0.375rem 0 0 0.375rem; font-family: var(--font-gothic); font-size: medium; box-shadow: 0 0 5px rgba(0,0,0,.15);}
h1 .btn {font-family: var(--font-gothic);}

h6 strong {color: var(--bs-blue); }

.split {display: flex; justify-content: space-between; align-items: center;}
.alert {padding: .5rem 1rem !important; }

.page-header {display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; padding-top: 0.5rem; }
.page-header h2 {margin: 0; padding: 0; border: none; line-height: 1.35; font-weight: 500; }

.pagination-wrap {display: flex; align-items: center; }
.pagination-wrap select {width: auto; margin-left: 1rem; }

/* table */
.table {font-size: 0.9rem; }
.table thead th {padding: 0.25rem 0.5rem; border-bottom: solid 2px var(--bs-gray-700); font-weight: 400; white-space: nowrap; }

.table.table-bordered thead th {background-color: var(--bs-gray-200);}

.table tr.deactivated {opacity: 0.3; transition: opacity .3s; }
.table tr.deactivated:hover {opacity: 1; transition: opacity .3s; }

.table td.number, .table th.number {font-family: var(--bs-font-monospace); font-size: 0.9em; }
.table td.number-sm, .table th.number-sm {font-family: var(--bs-font-monospace); font-size: small;}

.table .align-right {text-align: right; }
.table .thumbnail {width: 30px; height: 30px; object-fit: cover; border-radius: 50%; transition: all .5s; }
.table .thumbnail:hover {transform: scale(3); transition: all .5s; }

.table > tbody > tr > td {vertical-align: middle; }

.table .bi-eye-slash {color: var(--bs-gray-400); }
.table .bi-info-circle {color: var(--bs-red); }

.table sup {color: var(--red-dark); }

.table tr.hidden {opacity: 0.3; transition: all .5s; }
.table tr.hidden:hover {opacity: 1; transition: all .5s; }

.table tr.provision td {background-color: var(--green-light); }

.table tr.selected {opacity: 1;}
.table tr.selected td {background-color: var(--yellow-light);;}

.table.table-sm td {font-size: 0.9em; line-height: 1.2;}

.table .badge {vertical-align: 2px;}

.table-horizon-scroll {  overflow-x: scroll ; --min-width: 2000px}
.table-horizon-scroll .table { min-width: var(--min-width); }

tr.ui-state-highlight td { background-color: var(--yellow-light) }

.custom-scroll::-webkit-scrollbar {width: 12px; height: 12px;}
.custom-scroll::-webkit-scrollbar-track { background: var(--bs-gray-200); }
.custom-scroll::-webkit-scrollbar-thumb {background-color: var(--bs-blue);border-radius: 8px;}

.message-wrap .custom-scroll::-webkit-scrollbar-track { background: transparent;}
.message-wrap .custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(var(--bs-secondary-rgb), 0.5);}

.price {text-align: right;}

.table input::-webkit-outer-spin-button, .table input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.table input[type=number] {-moz-appearance: textfield; appearance: textfield;}

/* form */
.required {position: relative }
.required:after {content: "*"; display: contents; color: var(--bs-red) }

header .required:after {font-size: large; font-weight: 900; color: var(--red-light); line-height: 1; }

.invalid-feedback {color: var(--bs-red); }

form.default label {margin: 0; color: var(--bs-gray-500); font-size: small; font-weight: 400; }
form.default label.form-check-label {font-size: 0.9em; font-weight: 400; color: var(--bs-gray-700); }
form.default label.form-check-label.disabled { color: var(--bs-gray-500); text-decoration: line-through;}

form.default .form-switch { display: inline-flex;}
form.default .form-switch label.form-check-label { margin: 0 .25rem; color: var(--bs-gray-700); }
form.default .btn-check + label { font-size: medium; margin-bottom: 3px; color: var(--bs-gray-700); }
form.default .row {margin-top: 1rem; }

.form-group {margin-top: 1rem; }
.form-check-division::after {content: '|'; margin-left: 8px; color: var(--bs-red); }

.img-upload-wrapper .thumbnail {position: relative; background: #f2f2f2; overflow: hidden; }
.img-upload-wrapper .thumbnail .btn-delete {position: absolute; right: 5px; top: 5px; }
.img-upload-wrapper .thumbnail img {border-radius: 0.375rem; }

input[type=text]:read-only, input[type=text]:read-only:focus {background-color: var(--bs-gray-200); outline: 0 none; box-shadow: none; border-color: var(--bs-gray-200); }

form.default.readonly button {display: none; }
form.default .error {color: var(--bs-red); margin: 0 0.75rem; font-size: 0.9em; background-color: var(--yellow-light); }

.form-check-label + .form-check-label { margin-left:12px !important;  }
.form-check-label { display: flex !important; align-items: center;}

.form-check-label input[type=radio],
.form-check-label input[type=checkbox] { margin-right: 6px; margin-top: 0px;}


.form-check-wrap { display: flex ; align-items: center; flex-wrap: wrap;}
.form-check-wrap .form-check-label { margin-right: 12px;;}
.form-check-wrap .form-check-label + .form-check-label { margin-left: 0px !important;}

.validation-wrap p {font-size: 0.8rem; color: #FF0000; text-align: left; margin: 0 !important;}

.note {font-size: 0.9em; color: var(--bs-info);}

/* permission */
ul.permissions {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; }
ul.permissions li {margin: 0; padding: 0; display: flex; align-items: center;}
ul.permissions li label {margin-left: 0.25rem;}
ul.error {list-style: none; margin: 0; padding: 0; }
ul.error li {border-top: solid 1px var(--bs-gray-200); text-align: left; padding: .5rem 1rem; }

/*  member-selector */
.member-selector {position: relative; border: none; border-bottom: solid 1px var(--bs-gray-500); font-size: 0.75rem; outline: none; background-color: transparent; }
.member-selector-result {background-color: #fff; display: flex; flex-wrap: wrap; padding: 1rem; border-radius: 0.375rem; }
.member-selector-result li {display: flex; align-items: center; list-style: none; margin: 0; padding: .25rem; white-space: nowrap; line-height: 1; }
.member-selector-result li span.group {margin-left: .25rem; white-space: normal; }
.member-selector-holder {list-style: none; padding: 1rem 0 0 0; margin: 0; background-color: transparent; display: flex; flex-wrap: wrap; }
.member-selector-holder li {display: flex; align-items: center; padding: 2px; }
.member-selector-holder li button {display: flex; align-items: center; justify-content: center; line-height: 1; color: var(--bs-gray-500); width: 20px; height: 20px; font-size: 1rem; }
.member-selector-holder li button:hover {color: var(--red-dark); }

/* promotion-flag */
.flag-color-list {display: flex; justify-content: center;}
.flag-color-list input {-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 24px; height: 24px; border: 1px solid var(--bs-gray-700); cursor: pointer; vertical-align: top; margin-right: -1px;}
.flag-color-list input:checked::after {content: '✔'; display: block; text-align: center;}

/* feedback */
.topic-question p {margin: 0}
.topic-question img {max-width: 100%;}
.table .topic-question img {max-height: 120px;}
.table .topic-question a { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 4.5em; }
.table .topic-question a:hover { -webkit-line-clamp: unset; line-clamp: unset; max-height: none; }

/*--------------------------------------------------------------------------
    popWin
--------------------------------------------------------------------------*/
.overlay {position: fixed; z-index: 9; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.7); animation: fadeIn .2s }

.popWin {z-index: 9995 !important; display: flex; justify-content: center; align-items: flex-end; }

.popWin.warning {align-items: center; }
.popWin.warning .popWin-content {margin: 1rem; border-radius: .5rem; }
.popWin.off {display: none; }
.popWin.off .popWin-content {animation: slideOutDown .3s; }

.popWin-header {display: flex; justify-content: space-between; align-items: center; padding: .5rem 1rem; background-color: rgba(0, 0, 0, 0.1); border-radius: .5rem .5rem 0 0; }
.popWin-body {line-height: 1.2; background-color: #fff; }
.popWin-footer {display: flex; align-items: center; justify-content: center; padding: .5rem; }

.popWin-content {width: 100%; height: auto; max-height: 90%; background-color: rgba(255, 255, 255, 0.9); padding: 0; border-radius: .5rem .5rem 0 0; animation: slideInUp; animation-duration: .5s; overflow: auto; }
.popWin-content button.close {border: none; width: 25px; height: 25px; border-radius: 50%; background-color: var(--bs-gray-100); color: var(--bs-gray-700); font-weight: 900; padding: 0; transition: all 1s ease; position: relative; }
.popWin-content button.close:hover {background-color: var(--red-dark); color: #fff; }
.popWin-content h5 {margin: 0; font-size: 1.25rem; color: var(--bs-black); font-weight: 700; }

@media (min-width: 576px) {
    .popWin {align-items: center; }
    .popWin .popWin-content {max-width: 520px; width: auto; border-radius: .5rem; animation: zoomIn; animation-duration: .3s; }
    .popWin.image-window .popWin-content {max-width: 100%; }
    .popWin .popWin-body {border-radius: .5rem; }
}

@media (min-width: 768px) {
    .popWin .popWin-content {max-width: 720px; }
}

@media (min-width: 992px) {
    .popWin .popWin-content {max-width: 920px; }
}

@media (min-width: 1200px) {
    .popWin .popWin-content {max-width: 1020px; }
}

/* user-detail: 기본정보에서 학생이 아닐 때 */
div.is_staff {opacity: 0.2; transition: all .3s; }
div.is_staff:hover {opacity: 1; transition: all .3s; }

/* alertify */
.alertify .ajs-header {border-radius: 0.375rem 0.375rem 0 0; background-color: var(--bs-dark) !important; color: #fff; padding: 0.5rem 1rem !important; }
.alertify .ajs-dialog {border-radius: .375rem; }
.alertify .ajs-footer {border-radius: 0 0 0.375rem 0.375rem; }
.alertify .ajs-body .ajs-content {padding: 1rem 0 !important; }
.alertify .ajs-commands {margin: -22px 0.5rem 0 0 !important; }

/* TAB Start */
.tab-wrap { width: 100%; }
.tab-list { display: flex; list-style: none; padding: 0px ; margin: 0px 0px 16px;border-bottom: 1px solid var(--bs-gray-500); }
.tab-list .tab-item { padding: 8px 24px; }
.tab-list .tab-item:hover { border-bottom: 3px solid var(--bs-blue); }
.tab-list .tab-item.active { border-bottom: 3px solid var(--bs-blue);}
.tab-list .tab-item .tab-text { color: var(--bs-black);font-size: 14px; transition: none; text-decoration: none;}
.tab-list .tab-item.active .tab-text { color: var(--bs-blue); font-weight: 600;}

.tab-content { display: none ;}
.tab-content.active { display: block}
/* TAB End */

/* Dropdown Start */
.dropdown-wrap { display: flex; align-items: start; justify-content: space-between; }
.dropdown-wrap .dropdown-list { width: 80%; list-style: none; padding: 0; margin: 0; }
.dropdown-wrap .dropdown-list .dropdown-item { transition: height 0.5s ease, opacity 0.5s ease; font-size: 14px;;}
.dropdown-wrap .dropdown-list .dropdown-item:not(:first-of-type) { opacity: 0;height: 0;}
.dropdown-wrap.active .dropdown-list { max-height: 120px; overflow-y: auto;}
.dropdown-wrap.active .dropdown-list .dropdown-item { margin-bottom: 8px;;}
.dropdown-wrap.active .dropdown-list .dropdown-item:not(:first-of-type) { opacity: 1;height: auto}
.dropdown-wrap .btn-area { width: 20%; }
.dropdown-wrap .btn-area button {     --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.3rem; }
.dropdown-wrap .btn-dropdown i::before { transition: all .5s;}
.dropdown-wrap.active .btn-dropdown i::before { transform: rotate(180deg); }
/* Dropdown End */

tr.active td { background: var(--bs-info-bg-subtle);  box-shadow: none;}
tr.sub td { background: var(--bs-gray-200);  box-shadow: none;}
tr.warning th, tr.warning td { background-color: var(--bs-warning-bg-subtle) !important; box-shadow: none;}
tr.cancel td { color: var(--bs-gray-600); text-decoration: line-through; background: var(--bs-gray-500)}
.font-sm { font-size: 0.75rem; }
.font-lg { font-size: 1.25rem;}

/* tomSelect */
.ts-control {padding: 5px 8px !important; border-color: var(--bs-border-color) !important; }
.ts-control > input {min-width: 8rem !important; }
.input-group .ts-control { border-radius: 0 0.25rem 0.25rem 0 !important; }
.input-group .ts-control input { padding: 2px 8px !important; }

/* tooltip */
.tooltip .tooltip-inner {text-align: left !important; }


/* toastui editor */
.toastui-editor-contents h3 {margin:1.5rem 0 !important}

/* misc */
.sub-table { width: 100%; --th-cols: 2 }
.sub-table th { font-weight: 500; background: var(--bs-gray-200); width: calc(30% / var(--th-cols) )}
.sub-table td { width: calc(70% / var(--th-cols) ) }
.sub-table th, .sub-table td { border: 1px solid var(--bs-table-border-color); font-size: 14px;  vertical-align: middle;}

.font-weight-500 { font-weight: 500;}
.font-weight-600 { font-weight: 600;}

.memo-form { box-shadow: 0px 0px 4px 1px #cdcdcd;padding: 8px 12px;border-radius: 8px; }
.memo-wrap .memo-item { background-color: #e9ecef; padding:8px;border-radius: 8px;  border: 1px solid var(--bs-gray-600); }
.memo-item .memo-image { justify-content: center; align-items: center;display: flex;width: 70px; height: 70px; }
.memo-item .memo-image i { font-size: 3rem; width: 70px; text-align: center;}
.memo-item .memo-desc { display: flex; align-items: center; flex-wrap: wrap; }
.memo-item .memo-desc * { width: 100% ;}

.memo-wrap .memo-item.reply { background-color: #f8f9fa; margin-left:3rem;  }
.memo-wrap .memo-item.reply textarea { background: #f8f9fa;}


.memo-wrap ul {  margin: 0px; padding: 0px; }
.memo-wrap ul li { list-style: none;}

.memo-flex { display: flex; align-items: flex-start; justify-content: space-between;  }
.memo-box { width: 100%;}
.memo-box + .memo-box { margin-left: 1rem;}

.memo-form .templates .template label { border-radius: 8px;border: 1px solid var(--bs-gray-400);padding: 8px;margin-bottom: 4px; width: 100%; background: rgba(207, 244, 252, 0.5); }
.memo-form .templates .template label span.name { font-size: 0.8rem ; font-weight: bold; letter-spacing: unset; margin-left: 4px;;}
.memo-form .templates .template label div.text { margin-top: 4px;}


.limit-height { --height: calc(100vh / 2); max-height: var(--height); overflow-y: scroll;}

.table-sticky thead { position: sticky ; top: 0 }
.table-sticky thead th { background: #ffffff ;}

.modal-body ul {text-align: left}

.align-right {text-align: right !important;}
.align-center {text-align: center !important}

.align-middle { align-items: center !important; }
.align-end { align-items: end !important; }


.nowrap {white-space: nowrap;}

.search-result-wrapper {padding: 1rem; margin-bottom: 1rem; border: solid 1px var(--bs-gray-400); border-radius: 0.75rem; background-color: #fff;}

.badge-primary {background: var(--bs-primary);border: 1px solid var(--bs-gray-200);}
.badge-danger {background: var(--bs-danger);border: 1px solid var(--bs-danger);}
.badge-secondary {background: var(--bs-gray-200);border: 1px solid var(--bs-gray-200);color: var(--bs-black);}
.badge-success {background: var(--bs-success);border: 1px solid var(--bs-success);color: var(--bs-white)}
.badge-warning {background: var(--bs-warning);border: 1px solid var(--bs-warning);color: var(--bs-black)}
.badge-outline-warning {background: var(--bs-white);border: 1px solid var(--bs-warning);color: var(--bs-black) ; font-weight: 400;}
.badge-info {background: var(--bs-info);border: 1px solid var(--bs-info);color: var(--bs-black)}
.badge-select {min-width: 70px;padding: 8px 12px;}
.badge-icon {padding: 0.3rem !important;border-radius: 50%;}
.badge-lg-icon {padding: 0.5rem !important;border-radius: 50%; font-size: 1rem;}
.badge-dark { background: var(--bs-black);}

.summary-wrap { width: 100%; display: flex; align-items: center;  flex-wrap: wrap; --summary-count: 4}

.summary-wrap .summary-box { position: relative; background: #fff; border: 1px solid var(--bs-gray-200); border-radius: 8px; padding: 0.7rem; margin-right: 0.5rem; width: calc(90% / var(--summary-count)); max-width: 200px;; color: var(--box-color); overflow: hidden;}
.summary-wrap .summary-box::before { content: ""; width: 100%;display: block;position: absolute;top: 0;left: 0;height: 4px;background: var(--box-color);}
.summary-wrap .summary-box .summary-title { font-size: 1.5rem;  display: flex; align-items: center;    flex-wrap: wrap;}
.summary-wrap .summary-box .summary-title span { margin-left: 12px ;color: #333; font-size: 1rem;}
.summary-wrap .summary-box .summary-text { text-align: right; margin-top: 10px; color: #000;font-weight: 600; }

.summary-wrap.dark .summary-box {     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); }

a.delete:link, a.delete:visited {color: var(--red-dark)}
a.delete:hover {color: var(--bs-black);}
a.delete .bi-check2-circle { color: var(--bs-primary); }


.product-category {font-size: 0.8em; font-weight: 500; padding: 2px; margin: 0 4px 0 0; display: inline-block; line-height: 1; color: var(--bs-cyan); background-color: var(--bs-info-bg-subtle); border: solid 1px var(--bs-cyan)}
.product-category > .product-sub-category {display: inline-block; color: #fff; background-color: var(--bs-teal); margin: 0; padding: 0 1px}

span.product {font-weight: 600;}
span.product-option {color: var(--bs-gray-600);}

.def-list { margin: 0px; padding: 0px;  }
.def-list li { list-style: none;}

.log-list { margin: 0px; padding: 0px; display: flex; align-items: center; flex-wrap: wrap;}
.log-list li { list-style: none;}
.log-list .log-title { font-weight: 600; padding: 4px 8px; margin-bottom: 4px;     border-bottom: 1px solid var(--bs-warning-border-subtle);width: 100%;background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis)}
.log-list .log-item { padding-left: 16px;color: #333;display: flex;align-items: center;width: 100%;font-size: 13px;letter-spacing: -1px;}
.log-list .log-item + .log-title { margin-top: 10px;}

.log-list.row { align-items: center;}
.log-list.row .log-title { width: 30%; }
.log-list.row .log-item { width: 65%; }

.log-icon { margin: 0px 0.5rem; font-size: 1rem; ;}


.fixed { position: fixed; right: 0;}

i.expired { color: var(--red-dark)}

.align-items-center { align-items: center !important;}
input.form-control-error {     border: var(--bs-border-width) solid var(--bs-danger); }
input.form-control-error:focus { box-shadow: 0 0 0 .25rem rgb(220 53 69 / 25%) ;    border-color: rgb(220 53 69 / 25%);}

.btn.btn-xsm { --bs-btn-padding-y: 0.15rem; --bs-btn-padding-x: 0.3rem;  --bs-btn-font-size: 0.875rem;}


/*--------------------------------------------------------------------------
    calendar
--------------------------------------------------------------------------*/
.calendar {font-size: small;}
.calendar a {text-decoration: none; color: var(--bs-gray-900);}
.fc-day.fc-day-sun a {color: var(--bs-red)}
.fc-day.fc-day-sat a {color: var(--bs-blue)}


/* product batch management */
.discount-wrap {flex-wrap: nowrap;}
.discount-wrap .form-select, .discount-wrap .form-control {flex: 1 1 40%}
.discount-wrap input[name^="discount_price"] {flex: 1 1 100px;}

.table-management thead td {vertical-align: middle; background-color: var(--bs-info-bg-subtle); border-bottom: solid 1px var(--bs-gray-700);}

.reservation-list-item {display: flex;}
.reservation-list-item > div, .reservation-list-item > select {flex: 1 1 50%}
.reservation-list-item > div {margin-left: 1px;}


/* datepicker css */
.tempus-dominus-widget { padding: 12px; }
.tempus-dominus-widget .calendar-header { margin-bottom: 12px; font-family: var(--font-title); font-weight: 400; font-size: 1.5rem;}
.tempus-dominus-widget.light .date-container-days .dow { color: var(--bs-black)}
.tempus-dominus-widget.light .date-container-days .dow:nth-child(1) { color: var(--bs-danger)}
.tempus-dominus-widget.light .date-container-days .dow:nth-child(7) { color: var(--bs-primary)}

.mr-3 { margin-right : 1rem}
.ml-1 { margin-left : 0.25rem}
.mr-1 { margin-right : 0.25rem}
.ml-3 { margin-left : 1rem}


/* template list */
.template-list { display: grid; --cols: 4; grid-template-columns: repeat(var(--cols), 1fr); padding: 0px; margin: 0px;    grid-column-gap: 12px;grid-row-gap: 12px; }
.template-item { list-style: none ; }
.template-list .template-item .template-box{  border-radius: 4px;padding: 1rem; border: 1px solid var(--bs-gray-400)}
.template-list .template-item .template-box.disabled {  background: var(--bs-gray-300); border: 1px solid var(--bs-gray-300) ;--message: ""  }
.template-list .template-box .template-header {height: 55px;align-items: start;}
.template-header {  display: flex; align-items: end; justify-content: space-between ;font-size: 1rem;  }

.template-header .title-box div:nth-child(2){ font-size: 1.2rem ;}
.template-header .dispatch-type { font-size: 1.1rem ; }
.talk-text .template-header .dispatch-type { color: #1C3BDF; }
.talk-image .template-header .dispatch-type { color: #FF0000; }
.talk-button .template-header .dispatch-type { color: #FF6B00; }


.template-box .template-body { margin: 0.5rem 0px;padding: 0.5rem 0px; position: relative;;}
.template-list .template-box .template-body { height: 400px; min-height: auto !important; margin: 0.5rem 0px;padding: 0.5rem 0px;overflow: hidden; position: relative;}

.template-box .message-box { height: 380px; margin-bottom: 0.75rem;}
.template-box .message-sm-box { height: 280px !important;}

.template-box .contents { max-height: 100px;}
.template-box .image-box img { width: 100%;; }

.template-box .contents { display: flex; align-items: start; justify-content: space-between;}
.template-box .contents .button-box { width: 49%;}
.template-box .contents .image-box { width: 49%;}

.template-box .message-box textarea {resize:  none !important; height: 100%; overflow-y: scroll;}

.template-list .template-item .template-box.disabled .template-body .message-box textarea { background: var(--bs-gray-300);}
.template-list .template-item .template-box.disabled .template-body::before{ content: ""; display: block; width: 100%; height: 100% ; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.4);}
.template-list .template-item .template-box.disabled .template-body::after { content: var(--message); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--bs-white); font-weight: 400;    width: 70%;
    text-align: center;}


@media (min-width : 2000px) {
    .template-list { --cols :6}
}

@media (max-width : 1600px) {
    .template-list { --cols :4}
}

@media (max-width : 1400px) {
    .template-list { --cols :3}
}

@media (max-width : 1000px) {
    .template-list { --cols :2}
}
@media (max-width : 700px) {
    .template-list { --cols :1}
}

.list-item-none { padding: 0px; margin: 0px;}
.list-item-none li {list-style: none; }


.code-list { display: grid; grid-template-columns: repeat(3, 1fr); }
.code-item { margin-bottom: 1rem; margin-bottom: 0.5rem;}
.code-item .code-buttons span { font-size: 0.75rem; margin-bottom: 0.2rem; font-weight: 400; padding: 0.5rem  0.75rem}

.icon-box {display: flex;align-items: center;}
.icon-box * + * { margin-left: 0.5rem}


.justify-content-between { justify-content: space-between !important;}
.overflow-ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center;}


.forbidden-words { display: flex; flex-wrap: wrap;}
.forbidden-words li { margin-right: 12px; margin-bottom: 12px;}
.forbidden-words li .badge { font-size: 1rem; font-weight: 400 ;     padding: 0.3rem 1rem;display: flex;align-items: center; width: fit-content; justify-content: space-between; border-radius: 50px;}
.forbidden-words li .badge a { color: black; text-decoration: none; margin-left: 8px;}

.extension-content { vertical-align: middle;}
.extension-content .inquiry, .extension-content .response {display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.extension-content:hover .inquiry, .extension-content:hover .response {display: block;}
.extension-content .response {color:var(--bs-teal);}
.extension-content textarea {field-sizing: content;}

.handle-wrap { display: flex ; align-items: center; }

.handle-wrap label { font-size: 1rem !important }
.handle-wrap .handle-box { margin-left: 1rem ; width: calc(100% - 1rem - 100px); text-align: center;  border : 1px solid rgba(var(--bs-secondary-rgb), 1) !important; padding: 1.5rem }

.handle-list { margin-top: 0.75rem }
.handle-list .attachment { display: flex; width: 450px; justify-content: space-between;  align-items: center; padding: 0.1rem 0.5rem 0.1rem 0.2rem;}
/* .handle-list .attachment + .attachment { margin-top : 0.5rem} */
.handle-list .attachment .attachment-info { display: flex; align-items: center; width: 100%;}
.handle-list .attachment .attachment-info .attachment-title {  width: 380px; color: var(--bs-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.handle-list .attachment a.btn-remove { font-size: 1.5rem;}
.attachment-icon { width: 24px;  text-align: center; font-size: 1.3rem ;}


.handle-list .flex { display: flex; flex-wrap: wrap; }
.handle-list .flex .attachment { width: auto; margin-right: 0.5rem; }
.handle-list .flex .attachment + .attachment { margin-top : 0rem}
.handle-list .flex .attachment .attachment-info .attachment-title { width: auto;}


.handle-list.sm .attachment { padding: 0.1rem 0.3rem 0.1rem 0.2rem}
.handle-list.sm .attachment .attachment-info { font-size: 0.75rem; }
.handle-list.sm .attachment a.btn-remove { font-size: 1rem;}
.handle-list.sm .attachment .attachment-icon { font-size: 1rem;}

.comment-buttons {    display: flex;align-items: end;justify-content: end;}
.comment-buttons a { font-size: 0.8rem;     color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important;text-decoration: underline !important;margin-right: 0.3rem; }

.reply-form { background: var(--bs-info-bg-subtle); border: 1px solid var(--bs-info-border-subtle); padding:0.5rem;margin-bottom: 0.5rem; font-size: 0.9rem;letter-spacing: -1px;display: flex;align-items: center;justify-content: space-between;}

.r { color: #FF7300 !important; } /* 빨강 */
.w { color: #0059FF !important; } /* 파랑 */
.s { color: #009F2D !important; } /* 초록 */
.l { color: #FF00E5 !important; } /* 분홍 */


#title-preview { text-align: left;font-weight: 600;font-size: 18px;width: calc(300px + 1rem);overflow-wrap: break-word;padding: 1rem;border-radius: 12px;height: 100px; border: 1px solid rgba(0, 0, 0, 0.3);background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);transition: all 0.3s ease; }
.text-left { text-align: left ;}


.summary { letter-spacing: -1px ; font-size: 0.8rem; display: grid; grid-template-columns: repeat( 2, 1fr) }

.brand-warp { display: flex; align-items: center ;  }
/* .brand-warp .brand-box { width: 25px; height: 25px; justify-content: center;align-items: center;display: flex; position: relative;border-radius: 50%;overflow: hidden;background: #fff;
    box-shadow: 0px 0px 2px 0px #000;}
.brand-warp .brand-box + .brand-box { margin-left: 3px;}
.brand-warp .brand-box.disabled { box-shadow: unset; opacity: 0.5;}
.brand-warp .brand-box.disabled::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block;    background: rgba(0, 0, 0, 0.35);} */
.brand-warp i {width: 22px;height: 22px; text-align: center;}
.brand-warp i + i { margin-left: 3px; ;}
.icon-naver {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/social/ico-naver.png');
    background-size: contain;
}

.icon-kakao {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/social/ico-kakao.png');
    background-size: contain;
}


.icon-google {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/social/ico-google.png');
    background-size: contain;
}

.review-text { font-size: 14PX;padding: 10px;border: 1px solid #dee2e6;border-radius: 8px;background: var(--bs-gray-200);}


.image-wrap { display: flex ; align-items: center; justify-content: flex-start; flex-wrap: wrap;}
.image-wrap .image-box { width: 150px; border-radius: 12px; height: 150px;  background-repeat: no-repeat !important;background-size: cover !important;background-position: center !important;overflow: hidden; margin-right: 16px;}
.image-wrap .image-box.docs { position: relative;}
.image-wrap .image-box.docs::before { content: ""; display: block; width: 100%; height: 100%; background:  rgba(0, 0, 0, 50%);}
.image-wrap .image-box.docs .docs-name { position: absolute; bottom: 10%; left: 50%; transform: translate(-50%, -10%); font-size: 0.75rem; color: var(--bs-white); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;    width: calc(100% - 32px);word-break: break-all;}
.image-wrap .image-box.docs i {     position: absolute;top: 25%;left: 50%;font-size: 2.3rem;height: 50px;color: #fff;transform: translate(-50%, -25%);}
.image-wrap .image-box img { width: 100%;object-fit: cover;height: 100%;}

.image-preview-lg { position: absolute;top: 0;left: 0;background: rgba(0, 0, 0, 50%);width: 100%;height: 100%;display: flex;align-items: center;justify-content: center; }


.delivery-books .header {  font-weight: 600;}
.delivery-books .header .delivery-summaries { display: flex; align-items: center ; justify-content: flex-start; }
.delivery-books .header .delivery-summaries .delivery-summary { margin-right: 20px;}

.delivery-books .textbooks { max-height: 150px; overflow-x: scroll ;}
.delivery-table tbody tr td{ vertical-align: top; }


.mobile-area { margin: 20px auto; padding: 8px;border-radius: 48px; max-width: 360px;aspect-ratio: 9 / 16; background: linear-gradient(135deg, #000, #222); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);position: relative;display: flex;justify-content: center;align-items: center;}
.mobile-area .mobile-camera { position: absolute;top: 12px;left: 50%;transform: translateX(-50%);background: linear-gradient(135deg, #000, #222);width: 16px;height: 16px ;   display: flex; border-radius: 50%;align-items: center;justify-content: center; z-index: 10;}
.mobile-area .mobile-camera span { position: relative;background: radial-gradient(circle at 30% 30%, #666, #000); display: block; width: 12px; height: 12px; border-radius: 50%;box-shadow:inset 0 2px 5px rgba(255, 255, 255, 0.4), inset 0 -2px 5px rgba(0, 0, 0, 0.6),  0 0 6px rgba(255, 255, 255, 0.3); }
.mobile-area .mobile-camera span::before { content: ""; position: absolute;top: 0%;left: 20%;width: 50%;height: 50%;background: rgba(255, 255, 255, 0.6);border-radius: 50%;filter: blur(2px);opacity: 0.8;}
.mobile-area .mobile-screen {position: relative;width: 100%;height: 100%;border-radius: 40px;padding: 20px 8px;background: linear-gradient(to top, #f2f2f2, #ffffff);
    /* box-shadow: inset 0 5px 12px rgba(255, 255, 255, 0.8), inset 0 -5px 8px rgba(0, 0, 0, 0.05); */
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.7), inset 0 -3px 5px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3);
 }

.message-wrap {height: 100%; z-index: 10;position: relative; padding: 8px; ; }

.message-wrap .message-header {margin: 0px auto 12px; display: block;font-size: 0.75rem;font-weight: 600;  display: flex; align-items: center; justify-content: space-between;}

.message-wrap .message-header .user-view { font-size: 1rem;}
.message-wrap .message-header .type-view {    border-radius: 50px; width: fit-content;padding: 3px 12px;font-size: 0.75rem;background: rgba(213, 240, 195, 1);  }

.message-wrap .message-body { overflow-y: scroll; height: 95%}
.message-wrap .message-body .date-view {  display: flex;border-radius: 50px;background: var(--bs-gray-200);width: fit-content;  padding: 3px 12px; margin: 0px auto 12px; font-size: 0.75rem;}
.message-wrap .message-body .message-item { display: flex; align-items: flex-end; margin-bottom: 12px;;}
.message-wrap .message-body .message-item .message { max-width: 80%; padding: 8px 12px; background: rgba(213, 240, 195, 1);border-radius: 8px; font-size: 0.75rem;}
.message-wrap .message-body .message-item .timer { margin-left: 8px ; font-size: 0.5rem;}

ul.teacher-list { list-style-type: none; margin: 0; padding: 0; }
ul.teacher-list li { display: flex; align-items: center; padding: 0.5rem 0px; }
ul.teacher-list li .input-group-text { width: 100px; }


td.subject-row { background: var(--bs-warning-bg-subtle); box-shadow: none;}
td.subject-row span { margin-right: 1rem ; color: var(--bs-danger) }

tr.bg-gray td { background: var(--bs-gray-100) ;}

.toastui-editor-popup::-webkit-scrollbar {width: 4px; height: 4px;}
.toastui-editor-popup::-webkit-scrollbar-track { background: var(--bs-gray-200); }
.toastui-editor-popup::-webkit-scrollbar-thumb {background-color: var(--bs-blue);border-radius: 2px;}
/* .toastui-editor-popup-body { padding: 0px 4px !important; } */
/* .toastui-editor-popup-body form { display: none ;} */
.toastui-editor-popup-body .drop-down-item:hover {background-color: #dff4ff !important;}
.toastui-editor-popup-color button { top: 47px !important;}
.toastui-editor-popup-body input[type=text].tui-colorpicker-palette-hex { width: 95px;}
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-preview { margin-top: 4px;}


/*--------------------------------------------------------------------------
    feedback
--------------------------------------------------------------------------*/
.feedback-request-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: dashed 1px var(--bs-gray-300); }
form.default .feedback-request-info label { margin: 0; margin-right: 0.5rem; }
form.default .feedback-request-info span { font-weight: 700; }

.feedback-request-info-table-wrap { height: 70px; overflow: hidden; }
.feedback-request-info-table-wrap .table { margin-bottom: 0; }
.feedback-request-info-table-wrap.open { height: auto; }

#handle { text-align: center; background-color: var(--bs-gray-400); border: solid 1px var(--bs-gray-400); border-radius: 0 0 0.5rem 0.5rem; border-top: solid 1px var(--bs-gray-500); margin-top: -1px; }
#handle:hover { cursor: ns-resize; background-color: var(--bs-gray-300); }

.chart-img { object-fit: contain; max-height: 100px; float: right; }

.request-text { margin-top: 1rem; border: solid 1px var(--bs-gray-300); border-radius: 0.5rem; }
.request-text label { background-color: var(--bs-gray-100); padding: 0.5rem 1rem; display: flex; justify-content: space-between; border-radius: 0.5rem 0.5rem 0 0; }
.request-text .content { padding: 1rem; height: 500px; max-height: 800px; overflow-y: scroll; }

.speaking-wrap { display: flex; grid-gap: 1rem; }
.speaking-wrap .part { flex: 1; }
.speaking-wrap .part h6 { font-weight: 700; background-color: var(--bs-gray-100); padding: 0.5rem; border-radius: 0.5rem 0.5rem 0 0; border: solid 1px var(--bs-border-color); margin-bottom: 0; border-bottom: none; }
.speaking-wrap .part .speaking-contents { padding: 1rem; border: solid 1px var(--bs-gray-300); border-radius: 0 0 0.5rem 0.5rem; height: 300px; overflow: hidden; overflow-y: scroll; margin-bottom: 1rem; }
.speaking-wrap .part audio { width: 100%; }

.feedback-status { display: flex; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: dashed 1px var(--bs-gray-300); }
.feedback-status .right-col { margin-left: 1rem;}

.feedback-grades { display: flex; grid-gap: 1rem; }
.feedback-grades .form-group { margin: 0; flex: 1 1 auto }
.feedback-grades .form-group label { background-color: var(--bs-gray-100); padding: 0.5rem; display: block; border-radius: 0.5rem 0.5rem 0 0; border: solid 1px var(--bs-border-color); border-bottom: none; }
.feedback-grades .form-group .form-select { border-radius: 0 0 0.5rem 0.5rem;}

.feedback-files h6 { margin: 2rem 0 0 0; background-color: var(--bs-gray-100); padding: 0.5rem; display: block; border-radius: 0.5rem 0.5rem 0 0; border: solid 1px var(--bs-border-color); border-bottom: none; }
.feedback-files input[type="file"] { margin-top: 0.25rem; }
.feedback-files ul { list-style: none; padding: 0; margin: 0 0 1rem 0; border: solid 1px var(--bs-gray-300); border-radius: 0 0 0.5rem 0.5rem; }
.feedback-files ul li { border-bottom: dashed 1px var(--bs-gray-300); padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.feedback-files ul li:last-child { border-bottom: none; }
.feedback-files ul li:hover { background-color: var(--bs-gray-100); }
.feedback-files textarea.form-control { border-radius: 0 0 0.5rem 0.5rem; }

.feedback-comments { list-style: none; margin: 0; padding: 0; margin-top: 1rem; }
.child-comment { list-style: none; margin: 0; padding: 0 }
.feedback-comments > li > .comment-wrap { background-color: var(--bs-gray-100); }

.comment-wrap { border-bottom: solid 1px var(--bs-gray-300); padding: 1rem; }
.comment-wrap .btn-delete { float: right; }
.comment-wrap .btn-delete:link, .comment-wrap .btn-delete:visited { color: var(--bs-danger); }
.comment-wrap .btn-delete:hover { color: var(--bs-gray-900); }
.comment-wrap .comment-info { display: flex; align-items: center; }
.comment-wrap .ico-profile { display: block; width: 40px; height: 40px; border-radius: 100%; margin-right: 12px; }
.comment-wrap .comment-info .id { font-weight: 700; font-size: 0.7em; margin-right: 1rem; }
.comment-wrap .comment-info .name { font-weight: 700; margin-right: 1rem; }
.comment-wrap .comment-info time { font-size: 0.9em; color: var(--bs-gray-600); }
.comment-wrap .comment-content { padding-left: 50px; color: var(--bs-gray-600); margin: 0.5rem 0 1rem 0; }
.comment-wrap .comment-actions { padding-left: 50px; }
.comment-wrap .comment-actions a { margin-right: 1rem; font-size: 0.9em; }
.comment-wrap .comment-actions a:link, .comment-wrap .comment-actions a:visited { color: var(--bs-gray-500); }
.comment-wrap .comment-actions a:hover { color: var(--bs-gray-900); }
.comment-wrap .comment-actions a span { font-weight: 700; color: var(--bs-red); }
.comment-wrap form { padding-left: 50px;}

.winner-summary-box { margin: 0.75rem 0 0; }

.winner-summary-box h6 { padding : 0.5rem 1rem; background-color: var(--bs-info-bg-subtle) ; color: var(--bs-info-text-emphasis); margin-bottom: 0px; border-radius: 8px 8px 0 0;}
.winner-summary-box ul { list-style: none; padding: 0.5rem 1rem; font-size: 0.75rem; border-radius: 0 0 8px 8px; border: 1px solid rgba(var(--bs-secondary-rgb), 0.2);border-top: none;}
.winner-summary-box ul div { padding : 0}


tr.post-disabled td { color: var(--bs-gray-600); background: var(--bs-gray-300);;}


.enrollment-wrap { display: flex; align-items: flex-start;}
.enrollment-wrap + .enrollment-wrap { margin-top: 1rem;}
.enrollment-wrap .enrollment-title { width:35%; margin-top: 0 ; padding: 0px 8px}
.enrollment-wrap .enrollment-card { width:10% ; margin-top: 0; padding: 0px 8px}
.enrollment-wrap .enrollment-edit { width: 20% ;margin-top: 0; padding: 0px 8px }
.enrollment-wrap .enrollment-edit div { display: flex; align-items: center; margin-top: 0.5rem; }
.enrollment-wrap .enrollment-edit div input[type=number] { width: 70px;}

.enrollment-wrap .enrollment-edit div span { margin: 0px 6px; font-size: 0.8rem; color: rgba(var(--bs-secondary-rgb), 1)}

.enrollment-group { display: grid;  grid-template-columns: repeat(4, 1fr); grid-column-gap: 12px ;}
.enrollment-group li { min-width: 200px;}

.enrollment-group li div.title { font-weight: 600; margin-bottom: 6px;;}

.toggle-children { transition: all 0.3s ease; }
.toggle-children.open { transform: rotate(180deg);}


.grid-list { display: grid; --cols: 2; grid-template-columns: repeat(var(--cols), 1fr );}


.treeWrap .treeBox.active, .treeWrap .treeBox.depth1 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.treeWrap .treeBox .treeItem { margin: 6px 0px; display: flex ; align-items: center; justify-content: flex-start; width: 100%;}
.treeWrap .treeBox .treeItem button.btnView {  width: 20px;height: 20px;background: #fff;border: 1px solid #888;border-radius: 6px;display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;transition: background 0.3s, box-shadow 0.3s, transform 0.3s;box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); padding: 0; margin-right: 6px;}
.treeWrap .treeBox .treeItem button.btnView:hover {  background: #f0f0f0;box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);transform: scale(1.1); }
.treeWrap .treeBox .treeItem button.btnView span { width: 10px; height: 2px; background: #333; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.treeWrap .treeBox .treeItem button.btnView span:nth-child(1) { transform: translate(-50%, -50%) rotate(90deg);}
.treeWrap .treeBox .treeItem label.on { font-weight: 600;color: var(--bs-primary);}
.treeWrap .treeBox .treeItem label.disabled { font-weight: 400; color: var(--bs-gray-200); }

.treeWrap .treeBox.active > .treeItem button.btnView span:nth-child(1) { display: none;}

.treeWrap .depth1 .treeBox {  max-height: 0;overflow: hidden;transition: max-height 0.3s ease-in-out; }
.treeWrap .treeBox.active > .treeBox { max-height: inherit;}

/* .treeWrap .treeBox.depth1 .treeBox { display: grid; grid-template-columns: repeat(2, 1fr);  } */
.treeWrap .treeBox.depth2 { margin-left: 1rem; width: calc(50% - 2rem); padding: 0px 4px}
.treeWrap .treeBox.depth2 .treeBox.depth3 {  margin-left: 2rem;  }
.treeWrap .treeBox.depth2.active .treeBox.depth3 {max-height: 500px;}
.treeWrap .treeBox.depth3 .treeItem::before { content: "-"; margin-right: 4px;; }


.sub-title { font-size: 1rem;font-weight: 600;border-bottom: 2px solid var(--bs-gray-600);padding-bottom: 8px;margin-bottom: 8px;color: #333; }
.sub-title.flex { display: flex; align-items: center; justify-content: space-between;}


.treeWrap .depth1 + .depth1 { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--bs-gray-600)}


.alert-sm { font-size: 0.8em; padding: 0.1rem 0.5rem !important; border-radius: 0.25rem; }


.term-wrap { display: none;}
.term-box { background: var(--bs-gray-200); padding: 8px; border-radius: 12px;;}
.term-box div { font-size: 0.75rem; margin-bottom: 4px;;}
.term-box div:last-of-type { margin-bottom: 0px;}
.term-box .title { font-weight:  600; margin-top: 10px;}
.term-box .title:first-of-type { margin-top: 0px;}

.table-static th { text-align: center; border-bottom: solid 1px var(--bs-gray-700) !important;}
.table-static td {     border: 1px solid var(--bs-table-border-color); }
.table-static td.sub-header { background: var(--bs-gray-200); box-shadow: unset }


.chart-wrap { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 12px; grid-row-gap: 12px; }
.chart-wrap .chart-box { box-shadow: 0 0 2px 2px var(--bs-gray-400); padding: 16px;}
.chart-wrap .chart-box canvas { width: 100%; aspect-ratio: 16 / 9;}

.static-wrap { padding: 24px 16px; }
.static-wrap + .static-wrap { margin-top: 1rem;}
.static-wrap .sub-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0px; font-size: 1.1rem;}
.static-wrap .sub-title .btn-open { transition: all .5s;}
.static-wrap .sub-title .btn-open.active { transform: rotate(180deg); }

.static-wrap .static-box { padding: 1rem; box-shadow: 0 0 2px 2px var(--bs-gray-400);border-bottom-right-radius: 8px;border-bottom-left-radius: 8px}
.static-wrap .static-box .table { margin-bottom: 0px !important;}


.empty-wrap { position: absolute; top: 50px; left: 0; width: 100%; height: calc(100% - 50px); z-index: 10; background: rgba(0,0,0, 0.2);}
.empty-wrap .empty-box { position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); color: red; }
.empty-wrap .empty-box .empty-title {  font-size: 2rem; font-weight: bold; text-align: center; }
.empty-wrap .empty-box .empty-desc { font-size: 1.5rem;font-weight: 600;text-align: center; }


table .no-arrow { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none !important; padding-right : .5rem;}


/* user-detail */
.user-enrollment { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 12px; grid-row-gap: 12px; }
.user-enrollment .card-title span { font-weight: 300; }
.user-enrollment .header { display: flex; justify-content: space-between; align-items: center; border-bottom: dashed 1px var(--bs-gray-300); margin-bottom: 1rem; }
.user-enrollment .status { font-weight: 500; color: var(--bs-primary)}
.user-enrollment .input-group { justify-content: flex-end; }
.user-enrollment .input-group .form-control { width: 100px !important; text-align: center; flex: 0 1 auto; }


.badge-outline-dark { border: 1px solid var(--bs-dark);color: var(--bs-dark);}
.badge-outline-success { border: 1px solid var(--bs-success);color: var(--bs-success);}
.badge-outline-danger { border: 1px solid var(--bs-danger);color: var(--bs-danger);}

.help-text { font-size: 0.75rem; letter-spacing: -1px; width: 100%; display: block;}
.spin { animation: spin 1s linear infinite; display: inline-block; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


.code-box strong { min-width: 120px; display: inline-block;}

.selector-buttons { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.selector-buttons #btn-remove { margin-right: 1rem; }


.dp-service { padding: 6px 12px; background: var(--dp-bg-color); color: var(--dp-txt-color); border-radius: 6px;    font-weight: 600; }
.dp-service.ielts { --dp-bg-color : var(--ielts-primary-light); --dp-txt-color: var(--ielts-primary)}
.dp-service.academy { --dp-bg-color : var(--academy-primary-light); --dp-txt-color: var(--academy-primary)}
.dp-service.toeic { --dp-bg-color : var(--toeic-primary-light); --dp-txt-color: var(--toeic-primary)}
.dp-service.hnd { --dp-bg-color : var(--hnd-primary-light); --dp-txt-color: var(--hnd-primary)}

.course-item { border: 2px solid var(--bs-gray-400); border-radius: 6px; padding: 6px;;}
.course-item + .course-item { margin-top: 1rem ;}
.course-info { padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; margin: 0; }

.course-item .lecture-list { margin: 12px 0px 12px 0px; max-height: 500px; overflow-y: scroll; display: none;border-top: 2px solid var(--bs-gray-400); padding: 1rem 6px 0px 24px;  }
.course-item .lecture-list .lecture-item { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px;;}
.course-item .lecture-list .lecture-item .lecture-title { font-size: 14px;}
.course-item .lecture-list .lecture-item .lecture-detail { font-size: 14px;}
.course-item .lecture-list .lecture-item .attendance-date { display: inline-flex; width: 120px;}
.course-item .lecture-list .lecture-item .attendance-rate { display: inline-flex; width: 150px; align-items: baseline; text-align: left; justify-content: flex-end;flex-wrap: wrap; margin-right: 12px;;}
.course-item .lecture-list .lecture-item .attendance-rate div { width: 100%; text-align: right;}
.course-item .lecture-list .lecture-item .badge { width: 70px;font-size: 14px;;}