/* extended form */
.split-form .form-group {display: flex; align-items: center;}
.split-form .form-group > label {min-width: 120px}
.split-form .form-group > label, form.default .option-colspan label, form.default .beneficial-products label {color: var(--bs-gray-500); font-weight: 500;}
.split-form .right-col {flex: 1; display: flex; align-items: center; flex-wrap: wrap;}

.right-col .form-check {display: flex; align-items: center; margin: 0 1rem 0 0; padding: 0.25rem 0; min-height: auto;}
.right-col .form-check .form-check-input {margin: 0;}
.right-col .form-check .form-check-label {white-space: nowrap; flex-wrap: nowrap; flex: 1; margin-left: .25rem}
.right-col p { margin: 0;}

.right-col .form-select {width: auto;}
.split-form .form-group .editor-wrapper {width: calc(100% - 100px); }

.form-group .bi-info-circle {color: var(--bs-red);}
.form-group label .bi-info-circle {margin-left: .25rem;}

main .form-group:first-child {margin-top: 0;}
input.form-control::placeholder {color: var(--bs-gray-400);}

.handle {cursor: grab;}

/* product.detail */
.product-detail-layout {display: grid; grid-template-columns: 40% 60%; grid-gap: 1rem; margin-right: 1rem;}
.product-detail-layout section {margin:0}

#thumbnail-wrapper {display: flex; flex-direction: row; flex-wrap: wrap;}
.thumbnail-img-wrapper {position: relative;background: var(--bs-gray-100); padding: 1px}
.thumbnail-img-wrapper img {object-fit: cover; height: 250px;}
.thumbnail-img-wrapper .btn-delete {position: absolute; right: 0; z-index: 2; cursor: pointer; background: none; border: solid 1px transparent; color: var(--bs-red); transition: all .5s;}
.thumbnail-img-wrapper .btn-delete:hover {border: solid 1px var(--bs-red); transition: all .5s; background-color: #fff;}

.add-product-option {text-align: center; margin: 2rem 0; position: relative;}
.add-product-option:after {content: ''; position: absolute; top: 50%; height: 1px; border-bottom: dashed 1px var(--bs-gray-800); width: 100%; display: block; z-index: 0;}
.add-product-option button {z-index: 1; position: relative;}

#product-option-wrapper section > header > div.title {display: flex; align-items: center;}
#product-option-wrapper section > header > div.title .badge {font-size: 9pt; font-weight: 300; padding: 0.1em 0.5em; margin: 0 0.5rem;}

.discount_rate {text-align: center; color: #000; font-weight: 700; border: none; background-color: transparent !important; border-bottom: solid 1px var(--bs-gray-500) !important;}

.reset-width {width: initial !important; flex: 0 1 auto !important;}

.option-type-wrapper {list-style: none; margin: 0; padding: 0}
.option-type-wrapper li {margin: 0; padding: 1rem 0; display: none;}
.option-type-wrapper li.active {display: block;}
.option-type sup {color: var(--red-dark); font-weight: 900;}
.option-type a.disabled {color: var(--bs-gray-200);}
.option-type a.disabled sup {display: none;}
input[name^="option_name"] {font-weight: 700; color: #000;}

.option-colspan {display: flex; justify-content: space-between; align-items: flex-end; margin: 2rem 0 0 0;}
/*form.default .beneficial-products label {display: block; margin: 2rem 0 1rem 0; padding-bottom: .25rem;}*/

.additional-purchase-products {margin-top: 2rem;}
.additional-purchase-products .input-group-text {width: 95px;}
.additional-purchase-products > label {display: flex; align-items: center;}
.additional-purchase-products > label .form-switch {padding: .15rem 0; display: flex; align-items: center; margin-left: 1rem;}
.additional-purchase-products > label .form-switch .form-check-input {margin:0; margin-right: 3px;}
.additional-purchase-products .apOptions {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 3px; margin-bottom: 1.5rem;}
.additional-purchase-products .apOptions .apOptionItem {display: grid; grid-template-columns: 1fr 1fr; grid-gap: .25rem; background-color: var(--bs-gray-200); padding: 0.5rem;}
.additional-purchase-products .apOptions .apOptionItem .form-switch {padding: .15rem 0; display: flex; align-items: center; justify-content: flex-end; margin-bottom: 0;}
.additional-purchase-products .apOptions .apOptionItem .form-switch .form-check-input {margin:0;}

.ui-state-highlight { background-color: var(--yellow-light); width: 50px }

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow.validation-tooltip:before {border-right-color: red !important;}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow.validation-tooltip:before {border-top-color: red !important;}
.tooltip .tooltip-inner {border: solid 1px #fff}

/* course-detail */
.course-teacher-wrapper {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem;}

/* lecture-detail */
.upload-group input[type="file"] {flex: 0 1 50%}
.upload-group .input-group-text {flex: 1}

/* coupon-detail */
.coupon-detail-layout {display: grid; grid-template-columns: 1fr 400px; grid-template-rows: auto auto auto; grid-gap: 1rem; grid-template-areas:
    "left1 right"
    "left2 right"
    "left3 right";
}
.coupon-detail-layout section.left1 {grid-area: left1;}
.coupon-detail-layout section.left2 {grid-area: left2;}
.coupon-detail-layout section.left3 {grid-area: left3;}
.coupon-detail-layout section.right-col {grid-area: right;}

.validation-error {display: inline; color: red; font-size: 12px; padding: 0 5px; border-radius: 5px; margin: 4px 0;}
.invalid {outline: solid 1px rgb(255, 155, 155); background-color: #fffef5; padding: 0.5rem; border-radius: 0.5rem}

/* cdt-pass-detail */
.cdt-pass-layout {display: grid; grid-template-columns: 600px 1fr 1fr; grid-gap: 1rem;}

.cdt-pass-usage-limit { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.cdt-pass-usage-limit input[type=number] { width: 50px; max-width: 50px; }
.cdt-pass-usage-limit .input-group { flex-wrap: nowrap; flex: 0 }

.cdt-pass-users .table .form-control { flex: 0 1 auto; width: 50px; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { text-align: center; font-weight: 700; font-size: 0.9em; }

#manual-provide-options { margin-top: 1rem; }
#cdt-set-wrapper { border: dashed 1px var(--bs-gray-500); border-width: 1px 0; margin-top: 1.5rem; padding: 0.5rem 0; background-color: var(--bs-gray-100); }
#cdt-set-wrapper label { margin-left: 10px; min-width: 110px; }
#cdt-set-wrapper input[type=text] {text-align: center; }
#cdt-set-wrapper .input-group { flex-wrap: nowrap; }

.user-search-wrap { display: flex; align-items: center; margin-bottom: 2rem; }
.user-search-wrap .input-group { flex: 0 1 auto; }
.user-search-wrap .btn-dark { white-space: nowrap; }

button.toggle-cdt-set-table { float: right; height: 24px; line-height: 24px; padding-top: 0; padding-bottom: 0; margin-top: 3px; }

td.cdt-set-detail { padding: 0.5rem 1rem; background-color: var(--bs-gray-100); display: none; }
.cdt-set-detail-table { margin: 1px 0; }
.cdt-set-detail-table thead th { background-color: transparent !important; border-bottom: solid 1px var(--bs-gray-400);}
.cdt-set-detail-table th, .cdt-set-detail-table td { border-radius: 0; padding: 0; }
.cdt-set-detail-table .provide-date { width: 120px; }
.cdt-set-detail-table .provide-date .form-control { width: 100%; text-align: center;}
.cdt-set-detail-table .provide-date .btn, .cdt-set-detail-table .cdt-set .btn { margin-top: 1px; }
.cdt-set-detail-table input, .cdt-set-detail-table select { border: none; border-radius: 0; color: var(--bs-blue) }


#update-users-form .product-link { line-height: 30px;}

#cdt-set-fields input[name^="cdt_provide_date"], #cdt-set-fields input[name^="cdt_expiry_date"] { width: 100px !important; text-align: center; font-weight: 700; font-size: 0.9em; }
#products-table span.product { white-space: nowrap; }

/* cdt-set-answer-detail */
.cdt-set-answer-table td.number { width: 50px; text-align: center; }
.cdt-set-answer-table td.answer { width: 20%;}
.cdt-set-answer-table td.explanation { width: 40%; }

.answer-condition { margin-top: 0.5rem; text-align: center; }
.answer-condition label { margin-right: 1rem !important; }

.note-editor.note-airframe .note-editing-area .note-editable, .note-editor.note-frame .note-editing-area .note-editable { overflow-y: auto; overflow-x: hidden !important;}

.editor-container { width: 100%; }

.custom-bonus-item { margin: 1px; }
.old-enrollment-container { display: flex; align-items: center; flex-wrap: wrap; }
.old-enrollment-container .input-group { flex: 1 1 33%; margin: 0 1px; }