@charset "UTF-8";
.btn {
display: inline-block;
padding: 8px 16px;
margin: 2px;
border: 1px solid transparent;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
user-select: none;
vertical-align: middle;
}
.btn:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn:disabled, .btn.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #004085;
}
.btn-primary:focus {
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-secondary:hover {
background-color: #545b62;
border-color: #4e555b;
}
.btn-secondary:focus {
box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-success:hover {
background-color: #1e7e34;
border-color: #1c7430;
}
.btn-success:focus {
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}
.btn-danger {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-danger:hover {
background-color: #bd2130;
border-color: #b21f2d;
}
.btn-danger:focus {
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}
.btn-warning {
color: #212529;
background-color: #ffc107;
border-color: #ffc107;
}
.btn-warning:hover {
background-color: #e0a800;
border-color: #d39e00;
}
.btn-warning:focus {
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25);
}
.btn-info {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
.btn-info:hover {
background-color: #117a8b;
border-color: #10707f;
}
.btn-info:focus {
box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.25);
}
.btn-outline-primary {
color: #007bff;
background-color: transparent;
border-color: #007bff;
}
.btn-outline-primary:hover {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-secondary {
color: #6c757d;
background-color: transparent;
border-color: #6c757d;
}
.btn-outline-secondary:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-outline-success {
color: #28a745;
background-color: transparent;
border-color: #28a745;
}
.btn-outline-success:hover {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-outline-danger {
color: #dc3545;
background-color: transparent;
border-color: #dc3545;
}
.btn-outline-danger:hover {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-sm {
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
}
.btn-lg {
padding: 12px 24px;
font-size: 16px;
border-radius: 6px;
}
.btn-block {
display: block;
width: 100%;
}
.btn-group {
display: inline-flex;
vertical-align: middle;
}
.btn-group .btn {
position: relative;
flex: 1 1 auto;
margin: 0;
}
.btn-group .btn:not(:first-child) {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .btn:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group .btn:hover {
z-index: 1;
}
.btn-group .btn:focus, .btn-group .btn:active {
z-index: 2;
}
.btn-close {
background: none;
border: none;
font-size: 18px;
font-weight: bold;
color: #999;
cursor: pointer;
padding: 4px 8px;
border-radius: 50%;
transition: all 0.2s ease;
}
.btn-close:hover {
color: #666;
background-color: rgba(0, 0, 0, 0.05);
}
.btn-close:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 16px;
}
.form-group:last-child {
margin-bottom: 0;
}
.form-control {
display: block;
width: 100%;
padding: 8px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 4px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.form-control:disabled, .form-control[readonly] {
background-color: #e9ecef;
opacity: 1;
}
.form-control:invalid {
border-color: #dc3545;
}
.form-control:invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}
.form-control.is-valid {
border-color: #28a745;
}
.form-control.is-valid:focus {
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}
.form-control.is-invalid {
border-color: #dc3545;
}
.form-control.is-invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}
textarea.form-control {
height: auto;
resize: vertical;
}
select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff;
}
.form-control-file {
display: block;
width: 100%;
}
.form-control-sm {
padding: 4px 8px;
font-size: 12px;
border-radius: 3px;
}
.form-control-lg {
padding: 12px 16px;
font-size: 16px;
border-radius: 6px;
}
.form-label {
margin-bottom: 4px;
font-weight: 500;
color: #495057;
}
.col-form-label {
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;
}
.form-text {
display: block;
margin-top: 4px;
font-size: 12px;
color: #6c757d;
}
.valid-feedback {
display: none;
width: 100%;
margin-top: 4px;
font-size: 12px;
color: #28a745;
}
.was-validated .form-control:valid ~ .valid-feedback, .form-control.is-valid ~ .valid-feedback {
display: block;
}
.invalid-feedback {
display: none;
width: 100%;
margin-top: 4px;
font-size: 12px;
color: #dc3545;
}
.was-validated .form-control:invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-feedback {
display: block;
}
.form-control.is-valid {
border-color: #28a745;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalid {
border-color: #dc3545;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23dc3545' d='M6 0C2.69 0 0 2.69 0 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10.5c-2.48 0-4.5-2.02-4.5-4.5S3.52 1.5 6 1.5s4.5 2.02 4.5 4.5-2.02 4.5-4.5 4.5z'/%3e%3cpath fill='%23dc3545' d='M6 3.5c.83 0 1.5.67 1.5 1.5S6.83 6.5 6 6.5 4.5 5.83 4.5 5.5S5.17 3.5 6 3.5z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.invalid-feedback {
display: block;
width: 100%;
margin-top: 4px;
font-size: 12px;
color: #dc3545;
font-weight: 500;
}
.valid-feedback {
display: block;
width: 100%;
margin-top: 4px;
font-size: 12px;
color: #28a745;
font-weight: 500;
}
.form-check {
position: relative;
display: block;
padding-left: 24px;
margin-bottom: 8px;
}
.form-check .form-check-input {
position: absolute;
margin-top: 2px;
margin-left: -24px;
}
.form-check .form-check-label {
cursor: pointer;
}
.form-check.form-check-inline {
display: inline-flex;
align-items: center;
padding-left: 0;
margin-right: 12px;
}
.form-check.form-check-inline .form-check-input {
position: static;
margin-top: 0;
margin-right: 6px;
margin-left: 0;
}
.form-check-input {
width: 16px;
height: 16px;
margin-top: 1px;
vertical-align: top;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.25);
appearance: none;
}
.form-check-input[type="checkbox"] {
border-radius: 2px;
}
.form-check-input[type="radio"] {
border-radius: 50%;
}
.form-check-input:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.form-check-input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input[type="radio"]:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
pointer-events: none;
filter: none;
opacity: 0.5;
}
.form-check-input.is-valid {
border-color: #28a745;
}
.form-check-input.is-valid:checked {
background-color: #28a745;
border-color: #28a745;
}
.form-check-input.is-invalid {
border-color: #dc3545;
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group > .form-control {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
margin-bottom: 0;
}
.input-group > .form-control:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-prepend,
.input-group-append {
display: flex;
}
.input-group-prepend .btn,
.input-group-append .btn {
position: relative;
z-index: 2;
}
.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
z-index: 3;
}
.input-group-prepend {
margin-right: -1px;
}
.input-group-append {
margin-left: -1px;
}
.input-group-text {
display: flex;
align-items: center;
padding: 8px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 4px;
}
.input-group-prepend .input-group-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-append .input-group-text {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.form-floating {
position: relative;
}
.form-floating > .form-control {
height: 56px;
padding: 16px 12px 4px;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
padding-top: 20px;
padding-bottom: 8px;
}
.form-floating > .form-control::placeholder {
color: transparent;
}
.form-floating > .form-control:focus::placeholder {
color: #6c757d;
}
.form-floating > label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 16px 12px;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
opacity: 0.65;
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
@media (max-width: 576px) {
.form-control {
font-size: 16px;
}
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease;
}
.card-header {
padding: 12px 16px;
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight: 600;
color: #495057;
}
.card-header:first-child {
border-radius: 5px 5px 0 0;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.card-body {
flex: 1 1 auto;
padding: 16px;
color: #495057;
}
.card-footer {
padding: 12px 16px;
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.card-title {
margin-bottom: 8px;
font-size: 1.1rem;
font-weight: 600;
color: #212529;
}
.card-subtitle {
margin-bottom: 8px;
font-size: 0.9rem;
color: #6c757d;
}
.card-text {
margin-bottom: 12px;
line-height: 1.5;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link {
color: #007bff;
text-decoration: none;
}
.card-link:hover {
color: #0056b3;
text-decoration: underline;
}
.card-link + .card-link {
margin-left: 12px;
}
.card-group {
display: flex;
flex-flow: row wrap;
gap: 16px;
}
.card-group .card {
flex: 1 0 0%;
margin-bottom: 0;
}
.card-deck {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 576px) {
.card-deck {
flex-flow: row wrap;
margin-left: -8px;
margin-right: -8px;
}
.card-deck .card {
flex: 1 0 0%;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0;
}
}
.card-columns {
column-count: 1;
column-gap: 16px;
orphans: 1;
widows: 1;
}
.card-columns .card {
display: inline-block;
width: 100%;
margin-bottom: 16px;
}
@media (min-width: 576px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 3;
}
}
.card-accordion .card {
border-radius: 0;
border-bottom: 0;
}
.card-accordion .card:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.card-accordion .card:last-child {
border-bottom: 1px solid #dee2e6;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.card-accordion .card-header {
cursor: pointer;
transition: background-color 0.2s ease;
}
.card-accordion .card-header:hover {
background-color: #e9ecef;
}
.card-accordion .card-header.collapsed {
border-bottom: none;
}
.card .list-group {
border-radius: 0;
}
.card .list-group .list-group-item {
border-left: 0;
border-right: 0;
}
.card .list-group .list-group-item:first-child {
border-top: 0;
}
.card .list-group .list-group-item:last-child {
border-bottom: 0;
}
.card .table {
margin-bottom: 0;
}
.card .table:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.card .table:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media (max-width: 576px) {
.card {
margin-bottom: 16px;
}
.card-header,
.card-body,
.card-footer {
padding: 12px;
}
}
.card-primary {
border-color: #007bff;
}
.card-primary .card-header {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
.card-success {
border-color: #28a745;
}
.card-success .card-header {
background-color: #28a745;
color: #fff;
border-color: #28a745;
}
.card-danger {
border-color: #dc3545;
}
.card-danger .card-header {
background-color: #dc3545;
color: #fff;
border-color: #dc3545;
}
.card-warning {
border-color: #ffc107;
}
.card-warning .card-header {
background-color: #ffc107;
color: #212529;
border-color: #ffc107;
}
.card-info {
border-color: #17a2b8;
}
.card-info .card-header {
background-color: #17a2b8;
color: #fff;
border-color: #17a2b8;
}
.dropzone-styled {
border: 2px dashed #ccc;
border-radius: 6px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background-color: #fafafa;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.dropzone-styled:hover {
border-color: #007bff;
background-color: #f8f9fa;
}
.dropzone-styled.dropzone-active {
border-color: #28a745;
background-color: #e8f5e9;
transform: scale(1.02);
}
.dropzone-styled .dz-message {
color: #6c757d;
font-size: 14px;
line-height: 1.5;
}
.dropzone-styled .dz-message i, .dropzone-styled .dz-message .icon-upload {
font-size: 2rem;
margin-bottom: 10px;
display: block;
color: #007bff;
}
.dropzone-styled .dz-message p {
margin: 10px 0 5px 0;
font-weight: 500;
color: #333;
}
.dropzone-styled .dz-message small {
color: #999;
font-size: 12px;
}
.dropzone-styled.dropzone-success {
border-color: #28a745;
background-color: #f8fff9;
}
.dropzone-styled.dropzone-success .dz-message {
color: #28a745;
}
.dropzone-styled.dropzone-success .dz-message .icon-check {
color: #28a745;
font-size: 2rem;
margin-bottom: 10px;
display: block;
}
.dropzone-styled.dropzone-success .dz-message p {
color: #155724;
font-weight: 600;
}
.dropzone-styled.dropzone-error {
border-color: #dc3545;
background-color: #fff5f5;
}
.dropzone-styled.dropzone-error .dz-message {
color: #dc3545;
}
.dropzone-styled.dropzone-error .dz-message .icon-error {
color: #dc3545;
font-size: 2rem;
margin-bottom: 10px;
display: block;
}
.dropzone-styled.dropzone-error .dz-message p {
color: #721c24;
font-weight: 600;
}
.dropzone-styled.dropzone-disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: #f5f5f5;
}
.dropzone-styled.dropzone-disabled:hover {
border-color: #ccc;
background-color: #f5f5f5;
transform: none;
}
@media (max-width: 768px) {
.dropzone-styled {
padding: 15px;
min-height: 100px;
}
.dropzone-styled .dz-message {
font-size: 13px;
}
.dropzone-styled .dz-message i, .dropzone-styled .dz-message .icon-upload {
font-size: 1.5rem;
margin-bottom: 8px;
}
.dropzone-styled .dz-message p {
margin: 8px 0 4px 0;
}
}
@keyframes dropzone-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.dropzone-styled.dropzone-uploading {
animation: dropzone-pulse 1.5s ease-in-out infinite;
border-color: #007bff;
background-color: #e3f2fd;
}
.lms-feedback-modal .modal-content {
background-color: #fff !important;
color: #212529 !important;
}
.lms-feedback-modal .modal-body {
color: #212529 !important;
}
.lms-feedback-modal .modal-body .result-summary {
background-color: #f8f9fa !important;
color: #212529 !important;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 16px;
}
.lms-feedback-modal .modal-body .feedback-details .feedback-content,
.lms-feedback-modal .modal-body .feedback-box,
.lms-feedback-modal .modal-body .feedback-text-readable {
background-color: #f8f9fa !important;
color: #212529 !important;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 16px;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
}
.lms-feedback-modal .modal-body .score-display-readable {
background-color: #e7f3ff !important;
color: #0d47a1 !important;
border-radius: 8px;
padding: 12px 16px;
font-weight: 600;
text-align: center;
}
.lms-feedback-modal {
color-scheme: light;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
display: none;
outline: 0;
overflow-x: hidden;
overflow-y: auto;
}
.modal.show {
display: block;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1040;
}
.modal-dialog {
position: relative;
width: auto;
margin: 1.75rem auto;
pointer-events: none;
max-width: 500px;
}
.modal-dialog.modal-sm {
max-width: 300px;
}
.modal-dialog.modal-lg {
max-width: 800px;
}
.modal-dialog.modal-fullscreen {
max-width: none;
width: 100vw;
height: 100vh;
margin: 0;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
.modal-header .modal-title {
margin: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
color: #495057;
}
.modal-header .modal-close {
padding: 0;
background: none;
border: 0;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: 0.5;
cursor: pointer;
transition: opacity 0.15s ease-in-out;
}
.modal-header .modal-close:hover {
opacity: 0.75;
}
.modal-header .modal-close:focus {
opacity: 0.75;
outline: 0;
}
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 1rem;
color: #495057;
line-height: 1.5;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
gap: 0.5rem;
}
.modal-footer .btn {
margin-left: 0.25rem;
}
.modal-fullscreen .modal-content {
height: 100vh;
border: 0;
border-radius: 0;
}
.modal-fullscreen .modal-header {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.modal-fullscreen .modal-footer {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
body.modal-open {
overflow: hidden;
}
.feedback-modal .feedback-container .feedback-score {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
text-align: center;
font-weight: 600;
font-size: 1.1rem;
}
.feedback-modal .feedback-container .feedback-content {
background-color: #f8f9fa;
padding: 16px;
border-radius: 8px;
line-height: 1.6;
color: #272727;
}
.loading-modal .loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.loading-modal .loading-container .loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
.loading-modal .loading-container .loading-message {
margin: 0;
color: #6c757d;
font-size: 1rem;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.modal {
transition: opacity 0.15s linear;
}
.modal.fade {
opacity: 0;
}
.modal.show {
opacity: 1;
}
.modal-dialog {
transition: transform 0.3s ease-out;
}
.modal:not(.show) .modal-dialog {
transform: translate(0, -50px);
}
.modal.show .modal-dialog {
transform: none;
}
@media (max-width: 576px) {
.modal-dialog {
margin: 0.5rem;
max-width: calc(100% - 1rem);
}
.modal-dialog.modal-fullscreen {
margin: 0;
max-width: 100%;
}
.modal-header {
padding: 0.75rem;
}
.modal-header .modal-title {
font-size: 1.1rem;
}
.modal-body {
padding: 0.75rem;
}
.modal-footer {
padding: 0.5rem 0.75rem;
flex-direction: column;
gap: 0.5rem;
}
.modal-footer .btn {
width: 100%;
margin-left: 0;
}
}
@media (prefers-color-scheme: dark) {
.modal-content {
border-color: #4a5568;
}
.modal-header {
border-bottom-color: #4a5568;
}
.modal-header .modal-close {
color: #e2e8f0;
text-shadow: 0 1px 0 #2d3748;
}
.modal-footer {
border-top-color: #4a5568;
}
.feedback-modal .feedback-container .feedback-content {
background-color: #4a5568;
border-left-color: #4299e1;
}
.loading-modal .loading-container .loading-message {
color: #a0aec0;
}
.modal .modal-content {
background-color: #1a1a1a;
color: #e2e8f0;
}
.modal .modal-content .modal-header {
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border-bottom-color: #404040;
}
.modal .modal-content .modal-header .modal-title {
color: #e2e8f0;
}
.modal .modal-content .modal-header .modal-title i {
color: white !important;
}
.modal .modal-content .modal-body:not(.evaluation-body) {
color: #e2e8f0;
}
.modal .modal-content .modal-body.evaluation-body,
.modal .modal-content .lms-feedback-modal .modal-body {
background-color: #fff !important;
color: #212529 !important;
}
.modal .modal-content .modal-footer {
border-top-color: #404040;
}
}
.modal:focus {
outline: none;
}
.modal-dialog:focus {
outline: none;
}
.modal-content:focus {
outline: none;
}
.modal.show .modal-content {
outline: 2px solid #007bff;
outline-offset: 2px;
}
.modal[aria-hidden="true"] {
display: none !important;
}
.modal[aria-hidden="false"] {
display: block;
}
.lms-feedback-modal,
#evaluationModal.lms-feedback-modal {
color-scheme: light;
}
.lms-feedback-modal .modal-content,
#evaluationModal.lms-feedback-modal .modal-content {
background-color: #fff !important;
color: #212529 !important;
}
.lms-feedback-modal .modal-body,
.lms-feedback-modal .evaluation-body,
#evaluationModal.lms-feedback-modal .modal-body,
#evaluationModal.lms-feedback-modal .evaluation-body {
padding: 1.25rem 1.5rem !important;
background-color: #fff !important;
color: #212529 !important;
text-align: left !important;
}
.lms-feedback-modal .evaluation-result-container,
.lms-feedback-modal .lms-evaluation-result,
.lms-feedback-modal .lms-evaluation-result__feedback,
.lms-feedback-modal .lms-evaluation-result__feedback p,
.lms-feedback-modal .feedback-content,
.lms-feedback-modal .feedback-text,
.lms-feedback-modal .feedback-details,
.lms-feedback-modal .feedback-box,
.lms-feedback-modal p,
.lms-feedback-modal li,
.lms-feedback-modal h4,
.lms-feedback-modal h5,
.lms-feedback-modal h6,
.lms-feedback-modal span,
.lms-feedback-modal ol,
.lms-feedback-modal ul,
#evaluationModal.lms-feedback-modal .evaluation-result-container,
#evaluationModal.lms-feedback-modal .lms-evaluation-result,
#evaluationModal.lms-feedback-modal .lms-evaluation-result__feedback,
#evaluationModal.lms-feedback-modal .lms-evaluation-result__feedback p,
#evaluationModal.lms-feedback-modal .feedback-content,
#evaluationModal.lms-feedback-modal .feedback-text,
#evaluationModal.lms-feedback-modal .feedback-details,
#evaluationModal.lms-feedback-modal .feedback-box,
#evaluationModal.lms-feedback-modal p,
#evaluationModal.lms-feedback-modal li,
#evaluationModal.lms-feedback-modal h4,
#evaluationModal.lms-feedback-modal h5,
#evaluationModal.lms-feedback-modal h6,
#evaluationModal.lms-feedback-modal span,
#evaluationModal.lms-feedback-modal ol,
#evaluationModal.lms-feedback-modal ul {
color: #212529 !important;
}
.lms-evaluation-result__message {
border-radius: 12px;
font-size: 1.05rem;
background-color: #e7f3ff !important;
border: 1px solid #b6d4fe;
color: #0d47a1 !important;
}
.lms-evaluation-result__message-label {
display: block;
font-size: 0.85rem;
color: #0d6efd !important;
font-weight: 700;
}
.lms-evaluation-result__message p {
color: #0d47a1 !important;
font-size: 1.05rem;
font-weight: 600;
}
.lms-evaluation-result__score {
text-align: center;
font-size: 2rem;
font-weight: 800;
color: #0d47a1 !important;
background: #e7f3ff;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 1rem;
}
.lms-evaluation-result__score-unit {
font-size: 1rem;
margin-left: 4px;
}
.lms-evaluation-result__feedback-label {
font-size: 1.05rem;
font-weight: 700;
color: #212529 !important;
margin-bottom: 0.75rem;
}
.lms-student-feedback {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lms-student-feedback__section {
background: #fff;
border: 2px solid #e9ecef;
border-radius: 14px;
padding: 1rem 1.15rem;
color: #212529 !important;
}
.lms-student-feedback__section--good {
border-color: #6bc99a;
background: #f4fdf8;
}
.lms-student-feedback__section--textbook {
border-color: #6ea8fe;
background: #f5f9ff;
}
.lms-student-feedback__section--next {
border-color: #ffc107;
background: #fffbea;
text-align: center;
}
.lms-student-feedback__heading {
font-size: 1.1rem;
font-weight: 800;
margin: 0 0 0.65rem;
color: #1a1a2e !important;
display: flex;
align-items: center;
gap: 0.4rem;
}
.lms-student-feedback__heading i {
font-size: 1.25rem;
color: #0d6efd;
}
.lms-student-feedback ul,
.lms-student-feedback ol {
margin: 0;
padding-left: 1.35rem;
font-size: 1.05rem;
line-height: 1.75;
color: #212529 !important;
}
.lms-student-feedback li {
color: #212529 !important;
}
.lms-student-feedback li + li {
margin-top: 0.45rem;
}
.lms-student-feedback__closing {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.6;
color: #1a1a2e !important;
}
.sortable-ghost {
opacity: 0.5;
background: #f8f9fa !important;
border: 2px dashed #dee2e6 !important;
}
.sortable-chosen {
background: #e3f2fd !important;
border: 2px solid #2196f3 !important;
box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
transform: rotate(2deg) scale(1.02);
z-index: 1000;
}
.sortable-drag {
background: #fff3e0 !important;
border: 2px solid #ff9800 !important;
box-shadow: 0 8px 16px rgba(255, 152, 0, 0.4) !important;
transform: rotate(-2deg) scale(0.98);
z-index: 1001;
}
.sortable-fallback {
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.sorting {
cursor: grabbing !important;
user-select: none;
}
.lesson-ghost {
opacity: 0.4;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border: 2px dashed #6c757d !important;
border-radius: 8px;
}
.lesson-chosen {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
border: 2px solid #2196f3 !important;
box-shadow: 0 6px 12px rgba(33, 150, 243, 0.4) !important;
transform: rotate(1deg) scale(1.01);
border-radius: 8px;
}
.lesson-drag {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
border: 2px solid #ff9800 !important;
box-shadow: 0 10px 20px rgba(255, 152, 0, 0.5) !important;
transform: rotate(-1deg) scale(0.99);
border-radius: 8px;
}
.step-ghost {
opacity: 0.4;
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%) !important;
border: 2px dashed #9c27b0 !important;
border-radius: 6px;
}
.step-chosen {
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%) !important;
border: 2px solid #4caf50 !important;
box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4) !important;
transform: rotate(1deg) scale(1.01);
border-radius: 6px;
}
.step-drag {
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
border: 2px solid #ffc107 !important;
box-shadow: 0 10px 20px rgba(255, 193, 7, 0.5) !important;
transform: rotate(-1deg) scale(0.99);
border-radius: 6px;
}
.item-ghost {
opacity: 0.4;
background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%) !important;
border: 2px dashed #e91e63 !important;
border-radius: 4px;
}
.item-chosen {
background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%) !important;
border: 2px solid #009688 !important;
box-shadow: 0 6px 12px rgba(0, 150, 136, 0.4) !important;
transform: rotate(1deg) scale(1.01);
border-radius: 4px;
}
.item-drag {
background: linear-gradient(135deg, #f3e5f5 0%, #d1c4e9 100%) !important;
border: 2px solid #673ab7 !important;
box-shadow: 0 10px 20px rgba(103, 58, 183, 0.5) !important;
transform: rotate(-1deg) scale(0.99);
border-radius: 4px;
}
.drag-handle {
cursor: grab;
padding: 8px;
margin-right: 8px;
color: #6c757d;
transition: all 0.2s ease;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.drag-handle:hover {
background: #e9ecef;
color: #495057;
transform: scale(1.1);
}
.drag-handle:active {
cursor: grabbing;
background: #dee2e6;
transform: scale(0.95);
}
.drag-handle::before {
content: '⋮⋮';
font-size: 16px;
font-weight: bold;
line-height: 1;
}
.sortable-list {
min-height: 50px;
transition: all 0.3s ease;
}
.sortable-list.sortable-empty {
background: #f8f9fa;
border: 2px dashed #dee2e6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
font-style: italic;
min-height: 100px;
}
.sortable-row {
transition: all 0.2s ease;
cursor: move;
}
.sortable-row:hover {
background: #f8f9fa;
transform: translateX(4px);
}
.sortable-row.sortable-ghost {
opacity: 0.3;
background: #e9ecef !important;
}
.sortable-row.sortable-chosen {
background: #e3f2fd !important;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2) !important;
}
.sortable-card {
transition: all 0.2s ease;
cursor: move;
}
.sortable-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sortable-card.sortable-ghost {
opacity: 0.3;
transform: scale(0.95);
}
.sortable-card.sortable-chosen {
transform: scale(1.02);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}
.sortable-move {
transition: transform 0.3s ease;
}
.sortable-enter-active,
.sortable-leave-active {
transition: all 0.3s ease;
}
.sortable-enter,
.sortable-leave-to {
opacity: 0;
transform: translateY(30px);
}
.sortable-indicator {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #007bff;
border-radius: 1px;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.sortable-indicator.active {
opacity: 1;
}
.sortable-preview {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: 9999;
pointer-events: none;
display: none;
}
.sortable-preview.active {
display: block;
}
@media (max-width: 768px) {
.drag-handle {
padding: 6px;
margin-right: 6px;
}
.drag-handle::before {
font-size: 14px;
}
.sortable-row:hover {
transform: translateX(2px);
}
.sortable-card:hover {
transform: translateY(-1px);
}
}
@media (prefers-color-scheme: dark) {
.sortable-ghost {
border-color: #4a5568 !important;
}
.sortable-chosen {
background: #1a365d !important;
border-color: #3182ce !important;
box-shadow: 0 4px 8px rgba(49, 130, 206, 0.3) !important;
}
.sortable-drag {
background: #744210 !important;
border-color: #d69e2e !important;
box-shadow: 0 8px 16px rgba(214, 158, 46, 0.4) !important;
}
.drag-handle {
color: #a0aec0;
}
.drag-handle:hover {
background: #4a5568;
color: #e2e8f0;
}
.drag-handle:active {
background: #718096;
}
.sortable-list.sortable-empty {
background: #2d3748;
border-color: #4a5568;
color: #a0aec0;
}
.sortable-row:hover {
background: #2d3748;
}
.sortable-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
}
.sortable-list:focus-within {
outline: 2px solid #007bff;
outline-offset: 2px;
}
.sortable-row:focus,
.sortable-card:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
.sortable-list[tabindex="0"]:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
.sortable-list[aria-label] {
position: relative;
}
.sortable-list[aria-label]::before {
content: attr(aria-label);
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.lms-screen-guide-help-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
border: 1px solid #d0d7de;
border-radius: 50%;
background: #fff;
color: #036eb8;
font-size: 1rem;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.lms-screen-guide-help-btn--floating {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99990;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
body.lms-screen-guide-tour-active .lms-screen-guide-help-btn--floating {
display: none;
}
.lms-screen-guide-hero-toolbar {
position: relative;
z-index: 1;
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
}
.lms-screen-guide-hero-toolbar__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
}
.lms-screen-guide-hero-toolbar .lms-screen-guide-help-btn {
position: static;
top: auto;
right: auto;
margin: 0;
}
.school-list-hero .lms-screen-guide-hero-toolbar .lms-screen-guide-help-btn,
.school-student-hero .lms-screen-guide-hero-toolbar .lms-screen-guide-help-btn {
width: auto;
height: auto;
min-width: 2rem;
min-height: 2rem;
padding: 0.38rem 0.45rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
color: #036eb8;
font-size: 0.875rem;
box-shadow: none;
}
.school-list-hero .lms-screen-guide-hero-toolbar .lms-screen-guide-help-btn:hover,
.school-student-hero .lms-screen-guide-hero-toolbar .lms-screen-guide-help-btn:hover {
background: #fff;
color: #025a96;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.lesson-detail__toolbar {
display: flex;
justify-content: flex-end;
margin: 0 0 1rem;
}
.chat-page__header-row .lms-screen-guide-help-btn {
flex-shrink: 0;
}
header .header-top .nav-list li.lms-screen-guide-header-help {
display: inline-flex;
align-items: center;
flex-shrink: 0;
margin: 0;
padding: 8px 10px;
list-style: none;
}
header .header-top .nav-list li.lms-screen-guide-header-help .lms-screen-guide-help-btn--icon {
width: 44px;
height: 44px;
min-width: 44px;
border: none;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: inherit;
font-weight: inherit;
box-shadow: none;
}
header .header-top .nav-list li.lms-screen-guide-header-help .lms-screen-guide-help-btn--icon i {
font-size: 24px !important;
color: #272727;
}
header .header-top .nav-list li.lms-screen-guide-header-help .lms-screen-guide-help-btn--icon:hover {
background: #f0f7ff;
}
header .header-top .nav-list li.lms-screen-guide-header-help .lms-screen-guide-help-btn--icon:hover i {
color: #036eb8;
}
header .header-top .nav-list li.lms-screen-guide-header-help .lms-screen-guide-help-btn:not(.lms-screen-guide-help-btn--icon) {
width: 2.25rem;
height: 2.25rem;
min-width: 2.25rem;
border: 1px solid #d0d7de;
border-radius: 8px;
background: #fff;
color: #036eb8;
font-size: 0.9375rem;
font-weight: 700;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
header .header-top .nav-list li.lms-screen-guide-header-help .lms-screen-guide-help-btn:not(.lms-screen-guide-help-btn--icon):hover {
background: #f0f7ff;
border-color: #036eb8;
color: #025a96;
}
.lms-screen-guide {
position: fixed;
inset: 0;
z-index: 1000500;
pointer-events: none;
}
.lms-screen-guide[hidden] {
display: none !important;
}
.lms-screen-guide .lms-screen-guide__tour {
position: fixed;
inset: 0;
z-index: 1000500;
pointer-events: none;
}
.lms-screen-guide .lms-screen-guide__shade {
position: fixed;
background: rgba(0, 0, 0, 0.52);
z-index: 1000500;
pointer-events: none;
will-change: top, left, width, height;
}
.lms-screen-guide .lms-screen-guide__shade--animate,
.lms-screen-guide .lms-screen-guide__hole--animate {
transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease;
}
.lms-screen-guide .lms-screen-guide__hole {
position: fixed;
border: 2px solid #036eb8;
border-radius: 12px;
box-sizing: border-box;
z-index: 1000501;
pointer-events: none;
will-change: top, left, width, height;
}
.lms-screen-guide .lms-screen-guide__card {
position: fixed;
z-index: 1000502;
background: #fff;
border-radius: 16px;
padding: 20px 20px 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
pointer-events: auto;
max-height: min(45vh, calc(100vh - 32px));
overflow-y: auto;
box-sizing: border-box;
}
.lms-screen-guide .lms-screen-guide__card--docked {
max-height: min(38vh, calc(100vh - 48px));
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}
.lms-screen-guide .lms-screen-guide__card--safe {
max-height: min(50vh, calc(100vh - 96px));
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.lms-screen-guide .lms-screen-guide__tour {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lms-screen-guide .lms-screen-guide__progress {
margin: 0 0 8px;
font-size: 0.8rem;
color: #6c757d;
}
.lms-screen-guide .lms-screen-guide__title {
margin: 0 0 10px;
font-size: 1.15rem;
line-height: 1.35;
}
.lms-screen-guide .lms-screen-guide__body {
margin: 0 0 8px;
font-size: 0.95rem;
line-height: 1.65;
}
.lms-screen-guide .lms-screen-guide__hint {
margin: 0 0 12px;
font-size: 0.8rem;
color: #6c757d;
}
.lms-screen-guide .lms-screen-guide__dots {
display: flex;
gap: 6px;
justify-content: center;
margin-bottom: 16px;
}
.lms-screen-guide .lms-screen-guide__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #d0d7de;
}
.lms-screen-guide .lms-screen-guide__dot.active {
background: #036eb8;
}
.lms-screen-guide .lms-screen-guide__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lms-screen-guide .lms-screen-guide__skip {
border: none;
background: none;
color: #6c757d;
font-size: 0.85rem;
padding: 8px 0;
cursor: pointer;
}
.lms-screen-guide .lms-screen-guide__nav {
display: flex;
gap: 8px;
margin-left: auto;
}
.lms-screen-guide .lms-screen-guide__nav .btn {
position: relative;
z-index: 1;
pointer-events: auto;
cursor: pointer;
flex-shrink: 0;
}
.lms-screen-guide [data-tour-next] {
min-width: 5.5rem;
}
.lms-screen-guide-target--active {
position: relative;
z-index: auto;
pointer-events: none;
}
body.lms-screen-guide-tour-active .sidebar-submenu {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.lms-screen-guide-tour-active .main-content.with-submenu,
body.lms-screen-guide-tour-active .col-10.with-submenu,
body.lms-screen-guide-tour-active .school_main-content.with-submenu {
margin-left: 0 !important;
padding-left: 0 !important;
max-width: none !important;
}
#lms-screen-guide-help-modal.lms-screen-guide-help.modal {
display: none;
background: transparent !important;
height: auto !important;
overflow: visible;
}
#lms-screen-guide-help-modal.lms-screen-guide-help.modal.show {
display: block;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .modal-backdrop {
background-color: rgba(15, 23, 42, 0.45) !important;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__dialog {
max-width: 440px;
width: calc(100% - 32px);
margin: 1.5rem auto;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__header,
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__footer {
flex-shrink: 0;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__panel.modal-content {
display: flex;
flex-direction: column;
width: 100% !important;
height: auto !important;
max-height: min(90vh, 720px);
margin: 0;
overflow: hidden;
border: 1px solid rgba(3, 110, 184, 0.12);
border-radius: 20px;
background: #fff !important;
box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 24px 48px rgba(15, 23, 42, 0.14);
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 22px 18px;
border-bottom: 1px solid #e8eef4;
background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
color: #1e293b;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__header-text {
flex: 1;
min-width: 0;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__eyebrow {
margin: 0 0 6px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #036eb8;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.35;
color: #0f172a;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__subtitle {
margin: 8px 0 0;
font-size: 0.9rem;
line-height: 1.5;
color: #64748b;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__subtitle[hidden] {
display: none;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__close {
flex-shrink: 0;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: #fff;
color: #64748b;
font-size: 1.25rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 0 1px #e2e8f0;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__close:hover {
background: #f1f5f9;
color: #0f172a;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__close:focus-visible {
outline: 2px solid #036eb8;
outline-offset: 2px;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__body.modal-body {
flex: 1 1 auto;
min-height: 0;
padding: 18px 22px 8px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__picker-lead {
margin: 0 0 14px;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.5;
color: #334155;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__picker-list {
display: flex;
flex-direction: column;
gap: 10px;
}
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__picker-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
margin: 0;
padding: 14px 16px;
border: 1px solid #e8eef4 !important;
border-radius: 12px !important;
background: #f6f9fc !important;
color: #0f172a !important;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.4;
text-align: left;
cursor: pointer;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
}
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__picker-item:hover, #lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__picker-item:focus-visible {
background: #eef5fb !important;
border-color: #b8d4ea !important;
outline: none;
}
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__picker-item .lms-screen-guide-help__picker-title {
flex: 1;
min-width: 0;
}
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__picker-item .las {
flex-shrink: 0;
color: #64748b;
font-size: 1.15rem;
}
#lms-screen-guide-help-modal.lms-screen-guide-help a.lms-screen-guide-help__back,
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__back {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0 0 14px;
padding: 0;
border: 0 !important;
background: none !important;
color: #036eb8 !important;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
}
#lms-screen-guide-help-modal.lms-screen-guide-help a.lms-screen-guide-help__back:hover, #lms-screen-guide-help-modal.lms-screen-guide-help a.lms-screen-guide-help__back:focus-visible,
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__back:hover,
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__back:focus-visible {
text-decoration: underline;
outline: none;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__empty {
margin: 0;
color: #6c757d;
font-size: 0.95rem;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__section {
margin: 0 0 12px;
padding: 14px 16px;
border-radius: 12px;
background: #f6f9fc;
border: 1px solid #e8eef4;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__section:last-child {
margin-bottom: 4px;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__section.lms-screen-guide-help__picker-item:last-child {
margin-bottom: 0;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__section-title {
margin: 0 0 8px;
padding-left: 12px;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.4;
color: #0f172a;
border: 1px solid #036eb8;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__section-body {
margin: 0;
font-size: 0.9rem;
line-height: 1.7;
color: #475569;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__footer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 22px 22px;
border-top: 1px solid #e8eef4;
background: #fafbfc;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__btn i {
font-size: 1.15rem;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__btn--primary {
border: none;
background: #036eb8;
color: #fff;
box-shadow: 0 4px 14px rgba(3, 110, 184, 0.28);
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__btn--primary:hover {
background: #025a9a;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__btn--secondary {
border: 1px solid #cbd5e1;
background: #fff;
color: #334155;
font-size: 0.9rem;
font-weight: 600;
box-shadow: none;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__btn--secondary:hover {
border-color: #94a3b8;
background: #f8fafc;
color: #0f172a;
}
@media (prefers-reduced-motion: reduce) {
.lms-screen-guide__shade--animate,
.lms-screen-guide__hole--animate {
transition: none !important;
}
}
.lms-pwa-back {
display: inline-flex;
align-items: center;
gap: 0.15rem;
margin: 0;
padding: 0;
border: none;
background: none;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity 0.15s ease;
text-decoration: none;
}
.lms-pwa-back:hover {
opacity: 0.85;
}
.lms-pwa-back__chevron {
font-size: 1.25rem;
line-height: 1;
}
.lms-pwa-back--hero {
margin-bottom: 0.65rem;
color: rgba(255, 255, 255, 0.95);
}
.lms-pwa-back--hero:hover {
color: #fff;
}
.lms-pwa-back--forward, .lms-pwa-back.lms-pwa-forward {
text-decoration: none;
}
.lms-pwa-back--forward:hover, .lms-pwa-back.lms-pwa-forward:hover {
color: #fff;
text-decoration: none;
}
.lms-pwa-back__chevron--forward {
margin-left: 0.1rem;
}
.lms-pwa-back--inline {
margin-bottom: 1rem;
color: #036eb8;
}
.lms-pwa-back--bar {
margin: 0;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: #eff6ff;
border: 1px solid #bfdbfe;
color: #036eb8;
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
}
.lms-pwa-back--bar:hover {
background: #036eb8;
border-color: #036eb8;
color: #fff;
opacity: 1;
text-decoration: none;
}
.lms-pwa-back--header {
flex-shrink: 0;
margin: 0 0.5rem 0 0;
padding: 0.38rem 0.8rem;
border-radius: 999px;
background: #eff6ff;
border: 1px solid #bfdbfe;
color: #036eb8;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.lms-pwa-back--header:hover {
background: #036eb8;
border-color: #036eb8;
color: #fff;
opacity: 1;
text-decoration: none;
}
.lms-pwa-back--sidebar {
margin: 0 0 0.65rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #eff6ff;
border: 1px solid #bfdbfe;
color: #036eb8;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
align-self: flex-start;
}
.lms-pwa-back--sidebar:hover {
background: #036eb8;
border-color: #036eb8;
color: #fff;
opacity: 1;
text-decoration: none;
}
.lms-pwa-back-bar {
padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 1.25rem 0.5rem;
background: #fff;
border-bottom: 1px solid #e2e8f0;
}
.school_page .lms-pwa-back-bar, #school_student .lms-pwa-back-bar {
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 0;
}
.school-list-hero__content .lms-pwa-back--hero {
position: relative;
z-index: 1;
}
.lesson-detail__toolbar .lms-pwa-back--inline,
.school-student-hero__toolbar .lms-pwa-back--inline {
margin-bottom: 0;
margin-right: auto;
}
.lms-screen-guide-hero-toolbar {
flex-wrap: wrap;
}
.lms-screen-guide-hero-toolbar > .lms-pwa-back--inline {
flex: 0 0 auto;
margin-right: auto;
margin-bottom: 0.35rem;
}
:root {
--scratch-editor-min-height: 660px;
--scratch-editor-min-height-tablet: 560px;
--scratch-editor-min-height-mobile: 480px;
--scratch-editor-min-width: 480px;
--scratch-sidebar-max-height: 38vh;
--scratch-sidebar-max-height-mobile: 32vh;
--textbook-btn-font-size: 12px;
--textbook-btn-font-weight: 600;
--textbook-btn-line-height: 1.35;
--textbook-btn-padding: 8px 10px;
--textbook-btn-radius: 8px;
--textbook-btn-icon-size: 14px;
--textbook-btn-bg: #036eb8;
--textbook-btn-border: #036eb8;
--textbook-btn-color: #fff;
--textbook-btn-bg-hover: #025aa0;
--textbook-btn-margin-top: 10px;
}
header .header-top .nav-list li.scratch-header-actions,
header .nav-list li.scratch-header-actions {
display: inline-flex !important;
align-items: center;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 12px;
margin-right: 8px;
padding: 0 8px !important;
border: none !important;
background: none !important;
list-style: none;
vertical-align: middle;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn,
header .nav-list li.scratch-header-actions .scratch-header-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
gap: 6px;
white-space: nowrap;
font-weight: 600;
font-size: 14px !important;
line-height: 1.2;
min-height: 36px;
padding: 0 8px !important;
margin: 0 !important;
border-radius: 4px !important;
border: 1px solid #dee2e6 !important;
cursor: pointer;
box-shadow: none !important;
transform: none !important;
transition: none !important;
appearance: none;
-webkit-appearance: none;
position: static !important;
width: auto !important;
min-width: 0;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn:hover, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn:focus, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn:active,
header .nav-list li.scratch-header-actions .scratch-header-btn:hover,
header .nav-list li.scratch-header-actions .scratch-header-btn:focus,
header .nav-list li.scratch-header-actions .scratch-header-btn:active {
box-shadow: none !important;
transform: none !important;
outline: none;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn i,
header .nav-list li.scratch-header-actions .scratch-header-btn i {
font-size: 18px !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn .scratch-header-btn__label {
color: inherit !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save .scratch-header-btn__label {
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:hover, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:focus, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:active,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:hover,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:focus,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:active {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:hover i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:hover .scratch-header-btn__label, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:focus i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:focus .scratch-header-btn__label, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:active i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:active .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:hover i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:hover .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:focus i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:focus .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:active i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--save:active .scratch-header-btn__label {
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit {
background-color: #036eb8 !important;
border-color: #036eb8 !important;
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit .scratch-header-btn__label {
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:hover, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:focus, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:active,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:hover,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:focus,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:active {
background-color: #036eb8 !important;
border-color: #036eb8 !important;
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:hover i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:hover .scratch-header-btn__label, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:focus i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:focus .scratch-header-btn__label, header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:active i,
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:active .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:hover i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:hover .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:focus i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:focus .scratch-header-btn__label,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:active i,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:active .scratch-header-btn__label {
color: #ffffff !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:disabled,
header .nav-list li.scratch-header-actions .scratch-header-btn.scratch-header-btn--submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
body.scratch-step-layout,
body.school-steps-layout {
height: 100%;
margin: 0;
}
body.scratch-step-layout,
body.school-steps-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
body.scratch-step-layout > header,
body.school-steps-layout > header {
flex-shrink: 0;
}
body.scratch-step-layout > main,
body.scratch-step-layout > main.scratch-step-main,
body.scratch-step-layout > main.step-container,
body.school-steps-layout > main,
body.school-steps-layout > main.scratch-step-main,
body.school-steps-layout > main.step-container {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.scratch-step-layout > main > .alert,
body.scratch-step-layout > main > .flash,
body.scratch-step-layout > main > [class*="flash"],
body.scratch-step-layout > main.scratch-step-main > .alert,
body.scratch-step-layout > main.scratch-step-main > .flash,
body.scratch-step-layout > main.scratch-step-main > [class*="flash"],
body.scratch-step-layout > main.step-container > .alert,
body.scratch-step-layout > main.step-container > .flash,
body.scratch-step-layout > main.step-container > [class*="flash"],
body.school-steps-layout > main > .alert,
body.school-steps-layout > main > .flash,
body.school-steps-layout > main > [class*="flash"],
body.school-steps-layout > main.scratch-step-main > .alert,
body.school-steps-layout > main.scratch-step-main > .flash,
body.school-steps-layout > main.scratch-step-main > [class*="flash"],
body.school-steps-layout > main.step-container > .alert,
body.school-steps-layout > main.step-container > .flash,
body.school-steps-layout > main.step-container > [class*="flash"] {
flex-shrink: 0;
}
body.scratch-step-layout > main > .step-show-container--scratch,
body.scratch-step-layout > main.scratch-step-main > .step-show-container--scratch,
body.scratch-step-layout > main.step-container > .step-show-container--scratch,
body.school-steps-layout > main > .step-show-container--scratch,
body.school-steps-layout > main.scratch-step-main > .step-show-container--scratch,
body.school-steps-layout > main.step-container > .step-show-container--scratch {
flex: 1 1 auto;
min-height: 0;
height: auto !important;
}
body.scratch-step-layout > .footer,
body.scratch-step-layout > footer.footer,
body.school-steps-layout > .footer,
body.school-steps-layout > footer.footer {
flex-shrink: 0;
padding: 0.75rem 0 !important;
margin-top: 0 !important;
}
body.scratch-step-layout .step-show-container--scratch,
body.school-steps-layout .step-show-container--scratch {
flex: 1 1 auto;
min-height: calc(100vh - 10rem);
min-height: calc(100dvh - 10rem);
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.scratch-step-layout .step-show-container--scratch .scratch-step-row,
body.school-steps-layout .step-show-container--scratch .scratch-step-row {
flex: 1 1 auto;
min-height: calc(100dvh - 10rem);
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
body.scratch-step-layout .step-show-container--scratch .col-2,
body.scratch-step-layout .step-show-container--scratch .scratch-step-sidebar,
body.school-steps-layout .step-show-container--scratch .col-2,
body.school-steps-layout .step-show-container--scratch .scratch-step-sidebar {
overflow-y: auto;
max-height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
body.scratch-step-layout .step-show-container--scratch .col-10,
body.scratch-step-layout .step-show-container--scratch .editor-area,
body.scratch-step-layout .step-show-container--scratch .scratch-editor-col,
body.school-steps-layout .step-show-container--scratch .col-10,
body.school-steps-layout .step-show-container--scratch .editor-area,
body.school-steps-layout .step-show-container--scratch .scratch-editor-col {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: calc(100vh - 11rem);
min-height: calc(100dvh - 11rem);
min-width: 0;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
body.scratch-step-layout .step-show-container--scratch .scratch-editor-container,
body.scratch-step-layout .step-show-container--scratch .scratch-editor-frame,
body.scratch-step-layout .step-show-container--scratch .scratch-project-container,
body.scratch-step-layout .step-show-container--scratch .editor-loading-container,
body.school-steps-layout .step-show-container--scratch .scratch-editor-container,
body.school-steps-layout .step-show-container--scratch .scratch-editor-frame,
body.school-steps-layout .step-show-container--scratch .scratch-project-container,
body.school-steps-layout .step-show-container--scratch .editor-loading-container {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
body.scratch-step-layout .step-show-container--scratch #xcratchEditor,
body.scratch-step-layout .step-show-container--scratch .xcratch-lms-iframe,
body.school-steps-layout .step-show-container--scratch #xcratchEditor,
body.school-steps-layout .step-show-container--scratch .xcratch-lms-iframe {
flex: 1 1 auto;
width: 100%;
height: 100% !important;
min-height: 0;
border: 0;
}
.scratch-editor-col,
.step-show-container .col-10.editor-area,
.step-show-container .col-10:has(.scratch-editor-container) {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: none;
}
.scratch-editor-viewport,
.editor-frame-container,
#scratch-editor,
#editor-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: var(--scratch-editor-min-height);
min-height: 50dvh;
width: 100%;
position: relative;
overflow-x: hidden;
overflow-y: visible;
}
.scratch-editor-viewport .scratch-iframe-wrapper,
.editor-frame-container .scratch-iframe-wrapper,
#scratch-editor .scratch-iframe-wrapper,
#editor-container .scratch-iframe-wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
}
.scratch-editor-viewport .scratch-iframe-wrapper--fixed,
.editor-frame-container .scratch-iframe-wrapper--fixed,
#scratch-editor .scratch-iframe-wrapper--fixed,
#editor-container .scratch-iframe-wrapper--fixed {
min-height: inherit;
}
.scratch-editor-viewport .scratch-iframe-wrapper--fixed iframe,
.editor-frame-container .scratch-iframe-wrapper--fixed iframe,
#scratch-editor .scratch-iframe-wrapper--fixed iframe,
#editor-container .scratch-iframe-wrapper--fixed iframe {
min-height: var(--scratch-editor-min-height);
}
.scratch-editor-viewport iframe,
.scratch-editor-viewport .xcratch-lms-iframe,
.editor-frame-container iframe,
.editor-frame-container .xcratch-lms-iframe,
#scratch-editor iframe,
#scratch-editor .xcratch-lms-iframe,
#editor-container iframe,
#editor-container .xcratch-lms-iframe {
flex: 1 1 auto;
width: 100%;
height: 100% !important;
min-height: 0;
border: 0;
}
.scratch-step-row,
.scratch-two-column,
.scratch-editor-container > .row,
.scratch-editor-page > .row,
.step-show-container--scratch > .scratch-step-row {
flex: 1 1 auto;
min-height: 0;
width: 100%;
align-items: stretch;
}
.scratch-step-row > .col-2,
.scratch-step-row > .scratch-step-sidebar,
.scratch-two-column > .col-2,
.scratch-two-column > .scratch-step-sidebar,
.scratch-editor-container > .row > .col-2,
.scratch-editor-container > .row > .scratch-step-sidebar,
.scratch-editor-page > .row > .col-2,
.scratch-editor-page > .row > .scratch-step-sidebar,
.step-show-container--scratch > .scratch-step-row > .col-2,
.step-show-container--scratch > .scratch-step-row > .scratch-step-sidebar {
display: flex;
flex-direction: column;
min-height: 0;
flex: 0 0 auto;
}
.scratch-step-row > .col-10,
.scratch-step-row > .editor-area,
.scratch-step-row > .scratch-editor-col,
.scratch-two-column > .col-10,
.scratch-two-column > .editor-area,
.scratch-two-column > .scratch-editor-col,
.scratch-editor-container > .row > .col-10,
.scratch-editor-container > .row > .editor-area,
.scratch-editor-container > .row > .scratch-editor-col,
.scratch-editor-page > .row > .col-10,
.scratch-editor-page > .row > .editor-area,
.scratch-editor-page > .row > .scratch-editor-col,
.step-show-container--scratch > .scratch-step-row > .col-10,
.step-show-container--scratch > .scratch-step-row > .editor-area,
.step-show-container--scratch > .scratch-step-row > .scratch-editor-col {
flex: 1 1 0%;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
width: auto;
max-width: none;
}
@media (min-width: 992px) {
body.scratch-step-layout .step-show-container--scratch .scratch-step-row > .scratch-editor-col,
body.scratch-step-layout .step-show-container--scratch .scratch-step-row > .col-10.scratch-editor-col,
body.scratch-step-layout .step-show-container--scratch .scratch-step-row > .col-10:has(.scratch-editor-container),
body.scratch-step-layout .scratch-step-row.scratch-two-column > .scratch-editor-col,
body.scratch-step-layout .scratch-step-row.scratch-two-column > .col-10.scratch-editor-col,
body.scratch-step-layout .scratch-step-row.scratch-two-column > .col-10:has(.scratch-editor-container),
body.school-steps-layout .step-show-container--scratch .scratch-step-row > .scratch-editor-col,
body.school-steps-layout .step-show-container--scratch .scratch-step-row > .col-10.scratch-editor-col,
body.school-steps-layout .step-show-container--scratch .scratch-step-row > .col-10:has(.scratch-editor-container),
body.school-steps-layout .scratch-step-row.scratch-two-column > .scratch-editor-col,
body.school-steps-layout .scratch-step-row.scratch-two-column > .col-10.scratch-editor-col,
body.school-steps-layout .scratch-step-row.scratch-two-column > .col-10:has(.scratch-editor-container) {
flex: 1 1 0% !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
body.scratch-step-layout .step-show-container--scratch .scratch-step-row > .scratch-step-sidebar,
body.scratch-step-layout .step-show-container--scratch .scratch-step-row > .col-2.scratch-step-sidebar,
body.scratch-step-layout .scratch-step-row.scratch-two-column > .scratch-step-sidebar,
body.scratch-step-layout .scratch-step-row.scratch-two-column > .col-2.scratch-step-sidebar,
body.school-steps-layout .step-show-container--scratch .scratch-step-row > .scratch-step-sidebar,
body.school-steps-layout .step-show-container--scratch .scratch-step-row > .col-2.scratch-step-sidebar,
body.school-steps-layout .scratch-step-row.scratch-two-column > .scratch-step-sidebar,
body.school-steps-layout .scratch-step-row.scratch-two-column > .col-2.scratch-step-sidebar {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
}
body.scratch-editor-layout-sized .scratch-editor-container,
body.scratch-editor-layout-sized .scratch-editor-frame,
body.scratch-editor-layout-sized .scratch-iframe-wrapper {
overflow: visible !important;
}
body.scratch-editor-layout-sized .scratch-editor-scroll-host,
body.scratch-editor-layout-sized .scratch-editor-col.scratch-editor-scroll-host,
body.scratch-editor-layout-sized .editor-area.scratch-editor-scroll-host {
flex: 1 1 0% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-y: auto !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
body.scratch-editor-layout-sized .xcratch-lms-iframe,
body.scratch-editor-layout-sized #xcratch-editor-iframe,
body.scratch-editor-layout-sized #xcratchEditor {
display: block !important;
}
.scratch-iframe-wrapper {
flex: 1 1 auto;
min-height: 0;
height: 100%;
width: 100%;
max-width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
}
.scratch-iframe-wrapper iframe,
.scratch-iframe-wrapper .xcratch-lms-iframe {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
height: 100% !important;
min-height: var(--scratch-editor-min-height);
min-width: 0;
border: 0;
}
.scratch-editor-container,
.scratch-editor-frame {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: visible;
}
.scratch-editor-container .scratch-iframe-wrapper,
.scratch-editor-frame .scratch-iframe-wrapper {
flex: 1 1 auto;
min-height: 0;
}
.scratch-editor-container .scratch-project-container,
.scratch-editor-container .editor-loading-container {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: none;
}
.scratch-editor-container .scratch-editor-frame {
min-width: 0;
}
.scratch-editor-container .editor-loading-container {
min-width: 0;
width: 100%;
max-width: none;
}
@media (min-width: 992px) {
body.scratch-step-layout .scratch-editor-col .scratch-editor-container,
body.scratch-step-layout .scratch-editor-col .scratch-editor-frame,
body.scratch-step-layout .scratch-editor-col .scratch-iframe-wrapper,
body.scratch-step-layout .step-show-container--scratch .editor-area .scratch-editor-container,
body.scratch-step-layout .step-show-container--scratch .editor-area .scratch-editor-frame,
body.scratch-step-layout .step-show-container--scratch .editor-area .scratch-iframe-wrapper,
body.school-steps-layout .scratch-editor-col .scratch-editor-container,
body.school-steps-layout .scratch-editor-col .scratch-editor-frame,
body.school-steps-layout .scratch-editor-col .scratch-iframe-wrapper,
body.school-steps-layout .step-show-container--scratch .editor-area .scratch-editor-container,
body.school-steps-layout .step-show-container--scratch .editor-area .scratch-editor-frame,
body.school-steps-layout .step-show-container--scratch .editor-area .scratch-iframe-wrapper {
min-height: calc(100vh - 11rem);
min-height: calc(100dvh - 11rem);
}
}
@media (max-width: 991.98px) {
body.scratch-step-layout,
body.school-steps-layout {
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow: auto;
}
body.scratch-step-layout > main,
body.scratch-step-layout > main.scratch-step-main,
body.scratch-step-layout > main.step-container,
body.school-steps-layout > main,
body.school-steps-layout > main.scratch-step-main,
body.school-steps-layout > main.step-container {
overflow: visible;
}
.step-show-container--scratch {
overflow: visible;
min-height: 0;
height: auto !important;
}
.step-show-container--scratch .scratch-step-row, .step-show-container--scratch.scratch-step-row {
flex-wrap: wrap !important;
height: auto !important;
flex: 1 1 auto;
}
.scratch-step-row,
.scratch-two-column,
.scratch-editor-container > .row,
.scratch-editor-page > .row {
flex-direction: column !important;
flex-wrap: nowrap !important;
height: auto !important;
}
.scratch-step-row > .col-2,
.scratch-step-row > [class*="col-2"],
.scratch-two-column > .col-2,
.scratch-two-column > [class*="col-2"],
.scratch-editor-container > .row > .col-2,
.scratch-editor-container > .row > [class*="col-2"],
.scratch-editor-page > .row > .col-2,
.scratch-editor-page > .row > [class*="col-2"] {
flex: 0 0 auto;
width: 100% !important;
max-width: 100% !important;
max-height: var(--scratch-sidebar-max-height);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.scratch-step-row > .col-10,
.scratch-step-row > .editor-area,
.scratch-step-row > .scratch-editor-col,
.scratch-step-row > [class*="col-10"],
.scratch-two-column > .col-10,
.scratch-two-column > .editor-area,
.scratch-two-column > .scratch-editor-col,
.scratch-two-column > [class*="col-10"],
.scratch-editor-container > .row > .col-10,
.scratch-editor-container > .row > .editor-area,
.scratch-editor-container > .row > .scratch-editor-col,
.scratch-editor-container > .row > [class*="col-10"],
.scratch-editor-page > .row > .col-10,
.scratch-editor-page > .row > .editor-area,
.scratch-editor-page > .row > .scratch-editor-col,
.scratch-editor-page > .row > [class*="col-10"] {
flex: 1 1 auto;
width: 100% !important;
max-width: 100% !important;
min-height: var(--scratch-editor-min-height-tablet);
min-height: 520px;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 991.98px) and (min-height: 897pxpx) {
.scratch-step-row > .col-10,
.scratch-step-row > .editor-area,
.scratch-step-row > .scratch-editor-col,
.scratch-step-row > [class*="col-10"],
.scratch-two-column > .col-10,
.scratch-two-column > .editor-area,
.scratch-two-column > .scratch-editor-col,
.scratch-two-column > [class*="col-10"],
.scratch-editor-container > .row > .col-10,
.scratch-editor-container > .row > .editor-area,
.scratch-editor-container > .row > .scratch-editor-col,
.scratch-editor-container > .row > [class*="col-10"],
.scratch-editor-page > .row > .col-10,
.scratch-editor-page > .row > .editor-area,
.scratch-editor-page > .row > .scratch-editor-col,
.scratch-editor-page > .row > [class*="col-10"] {
min-height: 58dvh;
}
}
@media (max-width: 991.98px) {
.scratch-step-row > .col-10 .scratch-iframe-wrapper,
.scratch-step-row > .editor-area .scratch-iframe-wrapper,
.scratch-step-row > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-step-row > [class*="col-10"] .scratch-iframe-wrapper,
.scratch-two-column > .col-10 .scratch-iframe-wrapper,
.scratch-two-column > .editor-area .scratch-iframe-wrapper,
.scratch-two-column > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-two-column > [class*="col-10"] .scratch-iframe-wrapper,
.scratch-editor-container > .row > .col-10 .scratch-iframe-wrapper,
.scratch-editor-container > .row > .editor-area .scratch-iframe-wrapper,
.scratch-editor-container > .row > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-editor-container > .row > [class*="col-10"] .scratch-iframe-wrapper,
.scratch-editor-page > .row > .col-10 .scratch-iframe-wrapper,
.scratch-editor-page > .row > .editor-area .scratch-iframe-wrapper,
.scratch-editor-page > .row > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-editor-page > .row > [class*="col-10"] .scratch-iframe-wrapper {
flex: 1 1 auto;
min-height: var(--scratch-editor-min-height-tablet);
min-height: 520px;
}
}
@media (max-width: 991.98px) and (min-height: 897pxpx) {
.scratch-step-row > .col-10 .scratch-iframe-wrapper,
.scratch-step-row > .editor-area .scratch-iframe-wrapper,
.scratch-step-row > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-step-row > [class*="col-10"] .scratch-iframe-wrapper,
.scratch-two-column > .col-10 .scratch-iframe-wrapper,
.scratch-two-column > .editor-area .scratch-iframe-wrapper,
.scratch-two-column > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-two-column > [class*="col-10"] .scratch-iframe-wrapper,
.scratch-editor-container > .row > .col-10 .scratch-iframe-wrapper,
.scratch-editor-container > .row > .editor-area .scratch-iframe-wrapper,
.scratch-editor-container > .row > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-editor-container > .row > [class*="col-10"] .scratch-iframe-wrapper,
.scratch-editor-page > .row > .col-10 .scratch-iframe-wrapper,
.scratch-editor-page > .row > .editor-area .scratch-iframe-wrapper,
.scratch-editor-page > .row > .scratch-editor-col .scratch-iframe-wrapper,
.scratch-editor-page > .row > [class*="col-10"] .scratch-iframe-wrapper {
min-height: 58dvh;
}
}
@media (max-width: 991.98px) {
.scratch-editor-col,
.step-show-container .col-10:has(.scratch-editor-container) {
overflow-x: auto;
overflow-y: auto;
min-height: 520px;
}
}
@media (max-width: 991.98px) and (min-height: 897pxpx) {
.scratch-editor-col,
.step-show-container .col-10:has(.scratch-editor-container) {
min-height: 58dvh;
}
}
@media (max-width: 991.98px) {
.scratch-editor-container .scratch-editor-frame,
.scratch-editor-container .scratch-project-container,
.scratch-editor-container .editor-loading-container,
.scratch-editor-page .scratch-editor-frame,
.scratch-editor-page .scratch-project-container,
.scratch-editor-page .editor-loading-container {
overflow-x: auto;
overflow-y: auto;
min-height: 520px;
}
}
@media (max-width: 991.98px) and (min-height: 897pxpx) {
.scratch-editor-container .scratch-editor-frame,
.scratch-editor-container .scratch-project-container,
.scratch-editor-container .editor-loading-container,
.scratch-editor-page .scratch-editor-frame,
.scratch-editor-page .scratch-project-container,
.scratch-editor-page .editor-loading-container {
min-height: 58dvh;
}
}
@media (max-width: 991.98px) {
.scratch-editor-viewport,
.editor-frame-container,
#scratch-editor,
#editor-container {
min-height: 520px;
}
}
@media (max-width: 991.98px) and (min-height: 897pxpx) {
.scratch-editor-viewport,
.editor-frame-container,
#scratch-editor,
#editor-container {
min-height: 58dvh;
}
}
@media (max-width: 991.98px) {
.scratch-editor-container .sidebar,
.scratch-editor-page .sidebar {
height: auto;
max-height: var(--scratch-sidebar-max-height);
}
}
@media (max-width: 768px) {
:root {
--scratch-sidebar-max-height: var(--scratch-sidebar-max-height-mobile);
}
.scratch-step-row > .col-2,
.scratch-step-row > [class*="col-2"],
.scratch-two-column > .col-2,
.scratch-two-column > [class*="col-2"],
.scratch-editor-container > .row > .col-2,
.scratch-editor-container > .row > [class*="col-2"],
.scratch-editor-page > .row > .col-2,
.scratch-editor-page > .row > [class*="col-2"] {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.scratch-editor-col,
.step-show-container .col-10:has(.scratch-editor-container),
.scratch-editor-container .scratch-editor-frame,
.scratch-editor-container .scratch-project-container,
.scratch-editor-container .editor-loading-container,
.scratch-editor-viewport,
.editor-frame-container,
#scratch-editor,
#editor-container {
min-height: 480px;
}
}
@media (max-width: 768px) and (min-height: 739pxpx) {
.scratch-editor-col,
.step-show-container .col-10:has(.scratch-editor-container),
.scratch-editor-container .scratch-editor-frame,
.scratch-editor-container .scratch-project-container,
.scratch-editor-container .editor-loading-container,
.scratch-editor-viewport,
.editor-frame-container,
#scratch-editor,
#editor-container {
min-height: 65dvh;
}
}
@media (max-width: 768px) {
.scratch-editor-container .container-fuild .col-10 iframe,
.scratch-iframe-wrapper--fixed iframe {
min-height: 480px !important;
height: 100% !important;
}
}
@media (max-width: 768px) and (min-height: 739px) {
.scratch-editor-container .container-fuild .col-10 iframe,
.scratch-iframe-wrapper--fixed iframe {
min-height: 65dvh !important;
}
}
@media (max-width: 576px) {
.scratch-step-row > .col-2 .step-controls,
.scratch-step-row > .col-2 .step-info-sidebar,
.scratch-two-column > .col-2 .step-controls,
.scratch-two-column > .col-2 .step-info-sidebar {
font-size: 0.9rem;
}
header .header-top .nav-list li.scratch-header-actions {
gap: 6px;
margin-right: 4px;
padding: 0 4px !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn {
font-size: 12px !important;
min-height: 32px;
padding: 0 6px !important;
}
header .header-top .nav-list li.scratch-header-actions .scratch-header-btn .scratch-header-btn__label {
display: none;
}
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .step-info h4 {
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .step-info h5 {
color: #666;
margin-bottom: 15px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 h6 {
font-weight: bold;
color: #495057;
margin-bottom: 10px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 .alert {
font-size: 12px;
margin-bottom: 10px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 .deco-file .file-select-label {
cursor: pointer;
display: inline-block;
padding: 10px;
border: 2px dashed #ccc;
border-radius: 5px;
text-align: center;
min-width: 150px;
transition: all 0.3s ease;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 .deco-file .file-select-label:hover {
border-color: #007bff;
background-color: #f8f9fa;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 .deco-file .file-name {
margin-top: 10px;
font-weight: bold;
color: #28a745;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 .deco-file .file-status {
margin-top: 10px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 .deco-file .file-status .text-success {
color: #28a745;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .mb-3 .deco-file .file-debug {
background: #f8f9fa;
padding: 8px;
border-radius: 4px;
font-size: 11px;
margin-top: 10px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .action-buttons .btn {
margin-right: 12px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .action-buttons .btn:last-child {
margin-right: 0;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls #submission-status {
margin-top: 20px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls #submission-status .status-content h6 {
font-weight: bold;
color: #495057;
margin-bottom: 10px;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls #submission-status .status-content .message .btn {
margin-top: 10px;
}
.scratch-editor-container .container-fuild .row .col-10 iframe {
width: 100%;
height: 100%;
min-height: 0;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.score-info {
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid #dee2e6;
margin: 15px 0;
text-align: center;
}
.score-info strong {
font-size: 1.2em;
color: #333;
margin-right: 10px;
}
.score-info .badge {
font-size: 0.9em;
padding: 8px 12px;
}
.submission-details {
background: #f8f9fa;
padding: 10px;
border-radius: 6px;
margin: 15px 0;
border: 1px solid #e9ecef;
}
.resubmission-notice {
background: #d1ecf1;
border: 1px solid #bee5eb;
border-radius: 6px;
padding: 10px;
margin: 15px 0;
}
.next-step-button {
text-align: center;
margin-top: 20px;
}
#pdfModal .modal-dialog {
max-width: 100vw;
max-height: 100vh;
margin: 0;
padding: 0;
}
#pdfModal .modal-content {
height: 100vh;
border-radius: 0;
border: none;
}
#pdfModal .modal-header {
padding: 10px 20px;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
#pdfModal .modal-body {
height: calc(100vh - 60px);
position: relative;
overflow: hidden;
}
#pdfModal #pdfContent {
width: 100%;
height: 100%;
position: relative;
}
#pdfModal #pdfContent iframe {
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
border: none !important;
}
.feedback-display {
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
}
.feedback-display h6 {
font-weight: bold;
color: #495057;
margin-bottom: 15px;
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
}
.feedback-display .feedback-content p {
margin-bottom: 10px;
line-height: 1.6;
}
.feedback-display .feedback-content strong {
color: #333;
font-weight: 600;
}
.custom-alert {
padding: 0.75rem 1rem;
border-radius: 4px;
margin-bottom: 1rem;
}
.custom-alert.custom-alert-info {
background-color: #d1ecf1;
border: 1px solid #bee5eb;
color: #0c5460;
}
#evaluatingModal {
z-index: 9999 !important;
}
.evaluating-content h6 {
color: #495057;
margin-bottom: 15px;
text-align: center;
}
.evaluating-content p {
text-align: center;
color: #6c757d;
}
#feedbackModal {
z-index: 9998 !important;
}
@media (max-width: 768px) {
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .deco-file .file-select-label {
min-width: 120px;
padding: 8px;
}
.scratch-editor-container .container-fuild .row .col-10 iframe {
min-height: 400px;
}
}
@media (prefers-color-scheme: dark) {
.scratch-editor-container .container-fuild .row .col-2 .step-controls .step-info h4, .scratch-editor-container .container-fuild .row .col-2 .step-controls .step-info h5 {
color: #e2e8f0;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .deco-file .file-select-label {
border-color: #4a5568;
color: #e2e8f0;
}
.scratch-editor-container .container-fuild .row .col-2 .step-controls .file-controls .deco-file .file-select-label:hover {
border-color: #3182ce;
background-color: #2d3748;
}
.score-info,
.submission-details,
.feedback-display {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.resubmission-notice {
background: #1a365d;
border-color: #3182ce;
color: #bee3f8;
}
}
.btn-open-textbook,
.step-header .btn-open-textbook,
.step-info-sidebar .btn-open-textbook,
#showPdfBtn.btn-open-textbook {
display: block;
align-items: center;
justify-content: center;
gap: 6px;
width: 80%;
max-width: 80%;
margin: 1rem auto;
box-sizing: border-box;
padding: var(--textbook-btn-padding) !important;
font-size: var(--textbook-btn-font-size) !important;
font-weight: var(--textbook-btn-font-weight) !important;
line-height: var(--textbook-btn-line-height);
border-radius: var(--textbook-btn-radius);
background: var(--textbook-btn-bg);
color: var(--textbook-btn-color) !important;
border: 1px solid var(--textbook-btn-border);
cursor: pointer;
text-decoration: none;
box-shadow: none;
transform: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-open-textbook i,
.step-header .btn-open-textbook i,
.step-info-sidebar .btn-open-textbook i,
#showPdfBtn.btn-open-textbook i {
font-size: var(--textbook-btn-icon-size);
flex-shrink: 0;
}
.btn-open-textbook:hover, .btn-open-textbook:focus,
.step-header .btn-open-textbook:hover,
.step-header .btn-open-textbook:focus,
.step-info-sidebar .btn-open-textbook:hover,
.step-info-sidebar .btn-open-textbook:focus,
#showPdfBtn.btn-open-textbook:hover,
#showPdfBtn.btn-open-textbook:focus {
background: var(--textbook-btn-bg-hover);
border-color: var(--textbook-btn-bg-hover);
color: var(--textbook-btn-color) !important;
box-shadow: none;
transform: none;
}
.step-container .row .col-2 .step_description h4 {
color: #0d6efd;
margin-bottom: 10px;
}
.step-container .row .col-2 .step_description h4 span {
color: #0d6efd;
}
.step-container .row .col-2 .step_description .card-text {
color: #212529;
margin-bottom: 15px;
}
.control-panel {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100vh;
background-color: #f8f9fa;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
z-index: 1000;
overflow-y: auto;
border-right: 1px solid #dee2e6;
}
.control-panel.collapsed {
transform: translateX(-100%);
}
.control-panel .control-panel-content {
padding: 20px;
height: 100%;
}
.control-toggle {
position: absolute;
top: 20px;
left: 120px;
z-index: 1001;
transition: left 0.3s ease-in-out;
}
.control-panel:not(.collapsed) + .main-content .control-toggle {
left: 270px;
}
.main-content {
margin-left: 0;
padding: 20px;
transition: margin-left 0.3s ease-in-out;
min-height: 100vh;
}
.control-panel:not(.collapsed) + .main-content {
margin-left: 250px;
}
.editor-container {
width: 100%;
min-height: var(--scratch-editor-min-height);
min-height: 50dvh;
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
.editor-container iframe {
width: 100%;
flex: 1 1 auto;
height: 100% !important;
min-height: var(--scratch-editor-min-height);
min-height: 50dvh;
border: none;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.control-panel {
width: 100%;
transform: translateY(-100%);
}
.control-panel.collapsed {
transform: translateY(-100%);
}
.control-panel:not(.collapsed) {
transform: translateY(0);
}
.control-toggle {
left: 20px !important;
top: 20px;
}
.main-content {
margin-left: 0 !important;
padding: 10px;
}
.editor-container {
height: auto;
min-height: var(--scratch-editor-min-height-mobile);
min-height: 40dvh;
padding-bottom: 16px;
}
.editor-container iframe {
min-height: var(--scratch-editor-min-height-mobile);
min-height: 40dvh;
}
}
#toggle-control-panel {
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
#toggle-control-panel:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.step-controls {
background-color: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
.step-controls .step-info h4 {
color: #272727;
margin-bottom: 10px;
font-size: 1.1em;
}
.step-controls .step-info h4 span {
margin-bottom: .5rem;
}
.step-controls .step-info h5 {
color: #495057;
margin-bottom: 15px;
font-size: 1em;
}
.step-controls .step-info .step-description {
font-size: 0.9em;
line-height: 1.5;
padding: 10px;
border-radius: 6px;
}
.file-controls {
margin-top: 8px;
}
.file-controls h6 {
color: #6c757d;
font-size: 0.9em;
margin-bottom: 10px;
font-weight: 600;
}
.editor-container iframe {
height: 100% !important;
min-height: 0;
}
@media (prefers-color-scheme: dark) {
.step-container .row .col-2 .step_description h4 {
color: #e2e8f0;
}
.step-container .row .col-2 .step_description h4 span {
color: #3182ce;
}
.step-container .row .col-2 .step_description .card-text {
color: #a0aec0;
}
.control-panel {
background-color: #2d3748;
border-right-color: #4a5568;
}
.control-panel .step-controls {
background-color: #4a5568;
color: #e2e8f0;
}
.control-panel .step-controls .step-info h4 {
color: #3182ce;
}
.control-panel .step-controls .step-info h5 {
color: #cbd5e0;
}
.control-panel .step-controls .step-info .step-description {
background-color: #4a5568;
color: #a0aec0;
border-left-color: #3182ce;
}
.editor-container iframe {
background-color: #2d3748;
}
}
.file-controls .alert {
display: block !important;
margin: 1rem 0 !important;
padding: 8px !important;
}
#submission-status .message .submission-status-note {
display: block !important;
margin: 0 0 8px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.feedback-section .feedback-content {
color: #272727 !important;
}
.status-content {
margin-bottom: 2rem;
}
.step-info-sidebar,
.step-info-sidebar .step-header,
.step-controls {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.teacher-trial-section {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 12px !important;
}
.teacher-trial-section h6.text-primary {
font-size: 14px;
font-weight: 700;
color: #036eb8 !important;
margin-bottom: 10px;
}
.teacher-trial-section .trial-steps p {
font-size: 12px;
line-height: 1.5;
margin-bottom: 0;
}
.teacher-trial-section .trial-actions h6 {
font-size: 12px;
font-weight: 700;
color: #495057;
margin: 1rem 0 0.5rem;
}
.teacher-trial-section .trial-actions {
width: 100%;
}
.teacher-trial-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
max-width: 100%;
margin: 0 0 8px;
padding: 10px 12px;
box-sizing: border-box;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
box-shadow: none;
transform: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.teacher-trial-btn:hover, .teacher-trial-btn:focus {
transform: none;
box-shadow: none;
}
.teacher-trial-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.teacher-trial-btn i {
font-size: 16px;
flex-shrink: 0;
}
.teacher-trial-btn--student {
background: #fff;
border-color: #036eb8;
color: #036eb8;
}
.teacher-trial-btn--student:hover:not(:disabled), .teacher-trial-btn--student:focus:not(:disabled) {
background: #e8f4fc;
border-color: #025aa0;
color: #025aa0;
}
.teacher-trial-btn--answer {
background: #fff;
border-color: #e67e22;
color: #c06510;
}
.teacher-trial-btn--answer:hover:not(:disabled), .teacher-trial-btn--answer:focus:not(:disabled) {
background: #fff8f0;
border-color: #d35400;
color: #a04000;
}
.teacher-trial-btn--download {
background: #fff;
border-color: #adb5bd;
color: #495057;
}
.teacher-trial-btn--download:hover, .teacher-trial-btn--download:focus {
background: #f1f3f5;
border-color: #868e96;
color: #212529;
}
.teacher-trial-btn--evaluate {
background: #28a745;
border-color: #28a745;
color: #fff;
margin-bottom: 6px;
}
.teacher-trial-btn--evaluate:hover:not(:disabled), .teacher-trial-btn--evaluate:focus:not(:disabled) {
background: #218838;
border-color: #1e7e34;
color: #fff;
}
.teacher-trial-section .trial-hint {
font-size: 11px;
color: #6c757d;
line-height: 1.4;
margin: 0;
}
.step-info-sidebar .step-navigation-compact {
width: 100%;
}
.step-info-sidebar .step-navigation-compact .btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
}
.lesson-overview-sidebar {
width: 100%;
max-width: 100%;
margin-bottom: 12px;
flex-shrink: 0;
box-sizing: border-box;
}
.lesson-overview-sidebar__panel {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 14px 12px;
background: #f8f9fc;
border: 1px solid #dee2e6;
border-radius: 10px;
}
.lesson-overview-sidebar__heading {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
color: #0d6efd;
line-height: 1.3;
}
.lesson-overview-sidebar__heading i {
font-size: 16px;
}
.lesson-overview-sidebar__course {
margin: 0 0 4px;
font-size: 11px;
color: #868e96;
line-height: 1.35;
}
.lesson-overview-sidebar__title {
margin: 0 0 12px;
font-size: 16px;
font-weight: 700;
color: #212529;
line-height: 1.35;
}
.lesson-overview-sidebar__goal {
margin-bottom: 4px;
}
.lesson-overview-sidebar__goal-label, .lesson-overview-sidebar__points-label {
display: block;
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
color: #6c757d;
}
.lesson-overview-sidebar__goal-text {
margin: 0 0 12px;
font-size: 12px;
color: #495057;
line-height: 1.5;
}
.lesson-overview-sidebar__points {
margin-bottom: 12px;
}
.lesson-overview-sidebar__point-item {
margin-bottom: 4px;
border-radius: 6px;
background: #fff;
border: 1px solid #e9ecef;
}
.lesson-overview-sidebar__point-item[open] .lesson-overview-sidebar__point-summary {
border-bottom: 1px solid #e9ecef;
}
.lesson-overview-sidebar__point-summary {
padding: 12px 8px;
font-size: 12px;
font-weight: 600;
color: #495057;
cursor: pointer;
list-style: none;
}
.lesson-overview-sidebar__point-summary::-webkit-details-marker {
display: none;
}
.lesson-overview-sidebar__point-summary::after {
content: '＋';
float: right;
color: #adb5bd;
font-weight: 400;
}
.lesson-overview-sidebar__point-item[open] .lesson-overview-sidebar__point-summary::after {
content: '－';
}
.lesson-overview-sidebar__point-body {
margin: 0;
padding: 6px 8px 8px;
font-size: 10px;
color: #495057;
line-height: 1.45;
}
.lesson-overview-sidebar__textbook {
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid #e9ecef;
}
.lesson-overview-sidebar__textbook .btn-open-textbook {
width: 100%;
margin-top: 0;
}
.lesson-overview-sidebar__textbook--only {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.lesson-overview-sidebar__textbook-note {
margin: 0;
}
.step-header .lesson-overview-sidebar {
margin-bottom: 10px;
}
.step-controls--scratch-sidebar {
display: flex;
flex-direction: column;
min-height: 100%;
height: 100%;
}
.scratch-reload-controls-wrap {
margin-top: auto;
padding-top: 10px;
border-top: 1px solid #e9ecef;
flex-shrink: 0;
}
.scratch-reload-controls {
margin-bottom: 0;
}
.scratch-reload-controls h6 {
font-size: 12px;
font-weight: 700;
color: #495057;
}
.scratch-reload-controls--compact .scratch-reload-controls__label {
margin: 1rem 0;
font-size: 14px;
font-weight: 700;
color: #666;
line-height: 1.3;
}
.scratch-reload-controls--compact .scratch-reload-controls__hint {
margin: 4px 0 0;
font-size: 10px;
color: #adb5bd;
line-height: 1.35;
}
.scratch-reload-controls--compact .scratch-reload-controls__hint--spaced {
margin-bottom: 0.75rem;
}
.scratch-reload-controls__file-input {
display: none;
}
.scratch-reload-btn--upload {
border-color: #0d6efd;
color: #0d6efd;
}
.scratch-reload-btn--upload:hover:not(:disabled) {
background: #e7f1ff;
color: #0d6efd;
}
.scratch-reload-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 80%;
max-width: 100%;
margin: 1rem auto;
padding: 10px 12px;
box-sizing: border-box;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
border-radius: 8px;
border: 1px solid #6c757d;
background: #fff;
color: #495057;
cursor: pointer;
}
.scratch-reload-btn:hover:not(:disabled) {
background: #f1f3f5;
border-color: #495057;
color: #212529;
}
.scratch-reload-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.scratch-reload-btn i {
font-size: 16px;
}
.scratch-reload-btn--compact {
padding: 10px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 6px;
gap: 4px;
}
.scratch-reload-btn--compact i {
font-size: 13px;
}
.step-container .row .col-2 .step_description h4 {
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.step-container .row .col-2 .step_description h4 span {
color: #007bff;
font-weight: bold;
}
.step-container .row .col-2 .step_description .card-text {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.step-container .row .col-2 .step_description .btn-info {
margin-top: 10px;
}
.step-container .row .col-10 .quiz-content .quiz-header {
text-align: center;
margin-bottom: 30px;
}
.step-container .row .col-10 .quiz-content .quiz-header h4 {
color: #333;
font-weight: bold;
margin-bottom: 10px;
}
.step-container .row .col-10 .quiz-content .quiz-header p {
color: #666;
font-size: 16px;
}
.step-container .row .col-10 .quiz-content .quiz-questions.submitted .quiz-question {
opacity: 0.7;
}
.step-container .row .col-10 .quiz-content .quiz-questions.submitted .quiz-question .form-check .form-check-input:disabled + .form-check-label {
color: #6c757d;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question {
margin-bottom: 20px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card {
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body {
padding: 20px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .card-title {
color: #333;
font-weight: bold;
margin-bottom: 15px;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .question-text {
color: #495057;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check {
margin-bottom: 15px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-input {
margin-right: 10px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-input:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-label {
color: #495057;
font-size: 16px;
cursor: pointer;
padding-left: 5px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-label:hover {
color: #007bff;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check.disabled .form-check-input:disabled + .form-check-label {
cursor: not-allowed;
color: #6c757d;
}
.step-container .row .col-10 .quiz-content .quiz-form .btn-primary {
margin-top: 20px;
padding: 12px 30px;
font-size: 16px;
font-weight: bold;
}
.alert-success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
border-radius: 8px;
padding: 15px 20px;
}
.alert-success h5 {
color: #155724;
margin-bottom: 10px;
}
.alert-success h5 i {
margin-right: 8px;
}
.alert-success p {
margin-bottom: 0;
font-size: 16px;
}
.quiz-results {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.quiz-results h5 {
color: #155724;
margin-bottom: 15px;
}
.quiz-results h5 i {
margin-right: 10px;
font-size: 20px;
}
.quiz-results p {
margin-bottom: 0;
font-size: 16px;
line-height: 1.6;
}
.invalid-feedback {
display: block;
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
.invalid-feedback.d-block {
display: block !important;
}
.quiz-form.loading .btn-primary {
opacity: 0.7;
cursor: not-allowed;
}
.quiz-form.loading .form-check-input {
pointer-events: none;
}
@media (max-width: 768px) {
.step-container .row .col-2 .step_description h4 {
font-size: 18px;
}
.step-container .row .col-2 .step_description .card-text {
font-size: 14px;
}
.step-container .row .col-10 .quiz-content .quiz-header h4 {
font-size: 20px;
}
.step-container .row .col-10 .quiz-content .quiz-header p {
font-size: 14px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body {
padding: 15px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .card-title {
font-size: 18px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .question-text {
font-size: 14px;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-label {
font-size: 14px;
}
}
.step-detail {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-header {
margin-bottom: 20px;
}
.step-header h5 span {
background: #007bff;
color: white;
padding: 4px 8px;
border-radius: 4px;
margin-right: 10px;
font-size: 0.9em;
}
.step-content {
color: #666;
line-height: 1.6;
}
.step-navigation {
display: flex;
justify-content: space-between;
align-items: center;
}
.back-link {
display: inline-block;
margin-bottom: 20px;
color: #666;
text-decoration: none;
}
.back-link:hover {
color: #333;
}
@media (prefers-color-scheme: dark) {
.step-container .row .col-2 .step_description h4 {
color: #e2e8f0;
}
.step-container .row .col-2 .step_description h4 span {
color: #3182ce;
}
.step-container .row .col-2 .step_description .card-text {
color: #a0aec0;
}
.step-container .row .col-10 .quiz-content .quiz-header h4 {
color: #e2e8f0;
}
.step-container .row .col-10 .quiz-content .quiz-header p {
color: #a0aec0;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card {
background: #2d3748;
border-color: #4a5568;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .card-title {
color: #e2e8f0;
border-bottom-color: #3182ce;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .question-text {
color: #cbd5e0;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-label {
color: #cbd5e0;
}
.step-container .row .col-10 .quiz-content .quiz-questions .quiz-question .card .card-body .options-container .form-check .form-check-label:hover {
color: #3182ce;
}
.alert-success {
background-color: #1a365d;
border-color: #3182ce;
color: #bee3f8;
}
.alert-success h5 {
color: #bee3f8;
}
.quiz-results {
background-color: #1a365d;
border-color: #3182ce;
color: #bee3f8;
}
.quiz-results h5 {
color: #bee3f8;
}
.step-detail {
background: #2d3748;
color: #e2e8f0;
}
.step-content {
color: #cbd5e0;
}
.back-link {
color: #a0aec0;
}
.back-link:hover {
color: #e2e8f0;
}
}
.step-quiz_content {
padding: 2rem 1.5rem 3rem;
min-height: auto;
height: auto;
position: relative;
}
.step-quiz_content .inner_contents {
position: static;
top: auto;
left: auto;
transform: none;
width: 100%;
max-width: 760px;
margin: 0 auto;
}
.step-quiz_content .step-header {
text-align: center;
}
.step-quiz_content .step-header h2 {
font-size: 1.8rem;
}
.step-quiz_content .step-header h2::after {
content: '';
display: block;
width: 50px;
height: 2px;
background-color: #036EB8 !important;
margin: 0 auto;
margin-top: 1rem;
}
.step-quiz_content .step-header p {
font-size: .8rem;
}
.step-quiz_content .quiz-container {
text-align: center;
}
.step-quiz_content .quiz-container .quiz-instructions ol li {
list-style-type: none;
}
.coding-editor-container {
padding-left: 1rem;
padding-right: 1rem;
}
.coding-editor-container .row .col-2 {
padding-left: 1.25rem !important;
padding-right: 1rem !important;
}
.coding-editor-container .row .col-2 .step-header {
margin-bottom: 1rem;
}
.coding-editor-container .row .col-2 .step-header .step-info h4 {
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.35rem;
}
.coding-editor-container .row .col-2 .step-header .step-description {
font-size: 0.8125rem;
color: #555;
line-height: 1.45;
margin-bottom: 0.75rem;
}
.coding-editor-container .row .col-2 .step-header .alert.alert-warning {
font-size: 0.75rem;
padding: 0.5rem 0.6rem;
margin-bottom: 0;
border-radius: 6px;
background: #fef9e7;
border-color: #f0e6c8;
color: #856404;
}
.coding-editor-container .row .col-2 .solution-copy-card {
border-radius: 8px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid #e0e8eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.coding-editor-container .row .col-2 .solution-copy-card-header {
display: flex;
align-items: center;
gap: 6px;
padding: 0.5rem 0.75rem;
background: #b8d4d9;
color: #2d6a73;
font-size: 0.8125rem;
font-weight: 600;
}
.coding-editor-container .row .col-2 .solution-copy-card-icon {
width: 16px;
height: 16px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232d6a73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") no-repeat center;
flex-shrink: 0;
}
.coding-editor-container .row .col-2 .solution-copy-card-filename {
flex: 1;
}
.coding-editor-container .row .col-2 .solution-copy-card-body {
background: #fff;
padding: 0.75rem 0.9rem;
}
.coding-editor-container .row .col-2 .solution-copy-instruction {
font-size: 0.8125rem;
color: #333;
line-height: 1.5;
margin-bottom: 0.6rem;
}
.coding-editor-container .row .col-2 .solution-copy-chip {
display: inline-flex;
align-items: center;
gap: 0;
margin: 0.25rem 0.25rem 0.25rem 0;
border: 1px solid #dee2e6;
border-radius: 6px;
background: #f1f3f4;
overflow: hidden;
}
.coding-editor-container .row .col-2 .solution-copy-code {
padding: 0.35rem 0.5rem;
font-size: 0.8rem;
font-family: ui-monospace, monospace;
color: #333;
border: none;
background: transparent;
}
.coding-editor-container .row .col-2 .solution-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-left: 1px solid #dee2e6;
background: #f1f3f4;
color: #5f6368;
cursor: pointer;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.coding-editor-container .row .col-2 .solution-copy-btn:hover {
background: #e8eaed;
color: #333;
}
.coding-editor-container .row .col-2 .solution-copy-btn.solution-copy-btn-copied {
background: #d1e7dd;
color: #198754;
}
.coding-editor-container .row .col-2 .solution-copy-btn.solution-copy-btn-copied .solution-copy-icon {
display: none;
}
.coding-editor-container .row .col-2 .solution-copy-btn.solution-copy-btn-copied::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
}
.coding-editor-container .row .col-2 .solution-copy-icon {
display: block;
}
.coding-editor-container .row .col-2 #submission-status {
margin-top: 1rem;
}
.coding-editor-container .row .col-2 #submission-status .status-content {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.75rem 0.9rem;
}
.coding-editor-container .row .col-2 #submission-status .status-content h6 {
font-size: 0.8125rem;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.coding-editor-container .row .col-2 #submission-status .status-content .btn-secondary.disabled,
.coding-editor-container .row .col-2 #submission-status .status-content .btn-secondary:disabled {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
border-radius: 6px;
opacity: 0.9;
}
.coding-editor-container .row .col-2 .coding-controls .form-group {
margin-bottom: 1rem;
}
.coding-editor-container .row .col-2 .coding-controls .form-group label {
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
}
.coding-editor-container .row .col-2 .coding-controls .form-group .form-control {
border-radius: 6px;
border: 1px solid #ced4da;
}
.coding-editor-container .row .col-2 .coding-controls .form-group .form-control:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.coding-editor-container .row .col-2 .coding-controls .file-controls .btn {
border-radius: 6px;
font-size: 0.875rem;
padding: 0.5rem 1rem;
transition: all 0.2s ease;
}
.coding-editor-container .row .col-2 .coding-controls .file-controls .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.coding-editor-container .row .col-2 .coding-controls .action-buttons .btn {
border-radius: 6px;
font-size: 0.875rem !important;
padding: 0.5rem 1rem;
transition: all 0.2s ease;
}
.coding-editor-container .row .col-2 .coding-controls .action-buttons .btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.coding-editor-container .row .col-10 .main-contents {
align-items: flex-start;
}
.coding-editor-container .row .col-10 .editor-body-only-hint {
padding: 0 6px;
font-size: 0.75rem;
line-height: 1.35;
color: #6c757d;
}
.coding-editor-container .row .col-10 .editor-area {
height: 600px;
user-select: text !important;
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
border-radius: 8px 8px 0 0;
overflow: hidden;
border: none;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.coding-editor-container .row .col-10 .editor-file-tabs {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
min-height: 40px;
padding: 0;
background: #f1f3f4;
border-bottom: 1px solid #dee2e6;
gap: 0;
}
.coding-editor-container .row .col-10 .editor-file-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px 10px;
margin: 0;
border: none;
background: transparent;
color: #5f6368;
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: background 0.15s, color 0.15s;
position: relative;
top: 1px;
}
.coding-editor-container .row .col-10 .editor-file-tab.active {
background: white !important;
color: #004085 !important;
font-weight: 700 !important;
margin-bottom: -2px;
z-index: 2;
box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.3);
}
.coding-editor-container .row .col-10 .editor-file-tab:hover:not(.active) {
background: rgba(255, 255, 255, 0.7);
color: #202124;
}
.coding-editor-container .row .col-10 .editor-file-tab-icon {
font-size: 14px;
line-height: 1;
}
.coding-editor-container .row .col-10 .editor-file-tab-name {
white-space: nowrap;
}
.coding-editor-container .row .col-10 .editor-panes {
min-height: 200px;
background: #fff;
height: 100%;
}
.coding-editor-container .row .col-10 .editor-area .CodeMirror-selected,
.coding-editor-container .row .col-10 .editor-area .CodeMirror-focused .CodeMirror-selected {
background: rgba(59, 130, 246, 0.5) !important;
}
.coding-editor-container .row .col-10 .editor-area .CodeMirror-line::selection,
.coding-editor-container .row .col-10 .editor-area .CodeMirror-line *::selection,
.coding-editor-container .row .col-10 .editor-area .code-pane textarea::selection {
background: rgba(59, 130, 246, 0.5) !important;
color: inherit !important;
}
.coding-editor-container .row .col-10 .mt-2 {
margin-top: 0 !important;
}
.coding-editor-container .row .col-10 .coding-editor-run-box {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 0 2rem;
padding: 0;
background: #1a202c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.coding-editor-container .row .col-10 .coding-editor-run-box .coding-editor-run-btn {
min-width: auto;
margin: 8px;
padding: 8px 24px;
background: #198754 !important;
color: white;
}
.coding-editor-container .row .col-10 .coding-editor-run-box .coding-editor-run-btn .coding-editor-run-btn-label {
margin-left: 0.35em;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-layout {
width: 100%;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-main {
height: 420px;
overflow: hidden;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-main .CodeMirror {
height: 420px !important;
max-height: 420px;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-main .CodeMirror-scroll {
min-height: 420px;
max-height: 420px;
overflow: auto !important;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-main textarea#jsInput {
height: 420px;
max-height: 420px;
resize: none;
overflow: auto;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-actions {
width: 100%;
padding: 0.5rem 0;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-actions .coding-editor-run-btn {
padding: 0.5rem 1.25rem;
background: #198754 !important;
border-color: #198754 !important;
color: #fff !important;
font-weight: 600;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-actions .btn-warning {
font-weight: 600;
}
.coding-editor-container .row .col-10.coding-editor-container--gas .gas-editor-console .gas-run-output {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 13px;
}
.coding-editor-container .row .col-10 .gas-run-output {
font-family: ui-monospace, monospace;
font-size: 12px;
line-height: 1.4;
}
.coding-editor-container .row .col-10 .run-output {
padding: 8px 12px;
border-radius: 6px;
background: #f8f9fa;
border: 1px solid #e9ecef;
color: #495057;
min-height: 2.5em;
}
.coding-editor-container .row .col-10 .run-output:not(:empty) {
margin-bottom: 0.5rem;
}
.coding-editor-container .row .col-10 .preview-live-wrap #preview-live-slot iframe {
display: block;
max-width: 100%;
}
.coding-editor-container .row .col-10 .editor-area #monaco-editor {
border-radius: 8px;
overflow: hidden;
}
.coding-editor-container .row .col-10 .editor-area .CodeMirror,
.coding-editor-container .row .col-10 .editor-area .code-pane textarea {
user-select: text !important;
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
}
.coding-editor-container .row .col-10 .coding-editor-phone-frame {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 200px;
margin: 0 auto;
padding: 0;
overflow: hidden;
border: 8px solid #303030;
border-radius: 24px;
box-sizing: content-box;
box-shadow: 0 12px 24px -6px rgba(0, 12, 66, 0.25);
background: #303030;
}
.coding-editor-container .row .col-10 .coding-editor-phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 60px;
height: 18px;
border-radius: 0 0 14px 14px;
background-color: #303030;
}
.coding-editor-container .row .col-10 .coding-editor-phone-screen {
width: 100%;
height: 360px;
border: none;
background: #fff;
display: block;
}
.coding-editor-container .row .col-10 .coding-editor-phone-screen-wrap {
width: 100%;
height: 360px;
border: none;
background: #fff;
display: block;
overflow: hidden;
}
.coding-editor-container .row .col-10 .coding-editor-phone-screen-wrap iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.coding-editor-container .row .col-10 .coding-editor-phone-home {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 4px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.85);
}
.coding-editor-container .row .col-10 .output-area .card {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.coding-editor-container .row .col-10 .output-area .card .card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.coding-editor-container .row .col-10 .output-area .card .card-header .nav-tabs {
border-bottom: none;
}
.coding-editor-container .row .col-10 .output-area .card .card-header .nav-tabs .nav-link {
border: none;
color: #6c757d;
border-radius: 6px 6px 0 0;
margin-right: 0.25rem;
}
.coding-editor-container .row .col-10 .output-area .card .card-header .nav-tabs .nav-link.active {
background-color: #007bff;
color: white;
}
.coding-editor-container .row .col-10 .output-area .card .card-header .nav-tabs .nav-link:hover:not(.active) {
background-color: #e9ecef;
color: #495057;
}
.coding-editor-container .row .col-10 .output-area .card .card-body .console-output {
background-color: #f8f9fa;
border-radius: 6px;
padding: 1rem;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
max-height: 300px;
overflow-y: auto;
}
.coding-editor-container .row .col-10 .output-area .card .card-body .console-output .console-line {
margin-bottom: 0.5rem;
color: #495057;
}
.coding-editor-container .row .col-10 .output-area .card .card-body .console-output .console-line:last-child {
margin-bottom: 0;
}
.coding-editor-container .row .col-10 .output-area .card .card-body .result-output {
background-color: #f8f9fa;
border-radius: 6px;
padding: 1rem;
min-height: 200px;
}
@media (max-width: 768px) {
.coding-editor-container .row .col-2 .coding-controls .form-group {
margin-bottom: 0.75rem;
}
.coding-editor-container .row .col-2 .coding-controls .file-controls .btn,
.coding-editor-container .row .col-2 .coding-controls .action-buttons .btn {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.coding-editor-container .row .col-10 .main-contents .col-9, .coding-editor-container .row .col-10 .main-contents .col-3 {
max-width: 100%;
flex: 0 0 100%;
}
.coding-editor-container .row .col-10 .coding-editor-phone-frame {
max-width: 220px;
}
.coding-editor-container .row .col-10 .editor-area #monaco-editor {
height: 400px !important;
}
.coding-editor-container .row .col-10 .output-area .card .card-body .console-output,
.coding-editor-container .row .col-10 .output-area .card .card-body .result-output {
max-height: 200px;
font-size: 0.8rem;
}
}
@media (prefers-color-scheme: dark) {
.coding-editor-container .row .col-2 .coding-controls .form-group label {
color: #e2e8f0;
}
.coding-editor-container .row .col-2 .coding-controls .form-group .form-control {
background-color: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.coding-editor-container .row .col-2 .coding-controls .form-group .form-control:focus {
border-color: #3182ce;
box-shadow: 0 0 0 0.2rem rgba(49, 130, 206, 0.25);
}
.coding-editor-container .row .col-10 .output-area .card {
background-color: #2d3748;
border-color: #4a5568;
}
.coding-editor-container .row .col-10 .output-area .card .card-header {
background-color: #4a5568;
border-bottom-color: #4a5568;
}
.coding-editor-container .row .col-10 .output-area .card .card-header .nav-tabs .nav-link {
color: #a0aec0;
}
.coding-editor-container .row .col-10 .output-area .card .card-header .nav-tabs .nav-link.active {
background-color: #3182ce;
color: white;
}
.coding-editor-container .row .col-10 .output-area .card .card-header .nav-tabs .nav-link:hover:not(.active) {
background-color: #4a5568;
color: #e2e8f0;
}
.coding-editor-container .row .col-10 .output-area .card .card-body {
background-color: #2d3748;
color: #e2e8f0;
}
.coding-editor-container .row .col-10 .output-area .card .card-body .console-output,
.coding-editor-container .row .col-10 .output-area .card .card-body .result-output {
background-color: #4a5568;
color: #cbd5e0;
}
}
.gas-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid #dee2e6;
border-radius: 6px;
background: #fff;
color: #495057;
line-height: 1;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gas-icon-btn i {
font-size: 1.1rem;
}
.gas-icon-btn:hover {
background: #f8f9fa;
border-color: #adb5bd;
color: #212529;
}
.gas-icon-btn:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
.gas-icon-btn--primary {
border-color: #a3cfbb;
color: #198754;
}
.gas-icon-btn--primary:hover {
background: #d1e7dd;
border-color: #198754;
color: #146c43;
}
.gas-icon-btn--danger {
border-color: #f1aeb5;
color: #dc3545;
}
.gas-icon-btn--danger:hover {
background: #f8d7da;
border-color: #dc3545;
color: #b02a37;
}
.gas-icon-btn.gas-icon-btn--copied {
border-color: #198754;
color: #198754;
background: #d1e7dd;
}
.gas-ws-head-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border-radius: 8px;
border: 1px solid #dee2e6;
background: #fff;
color: #495057;
line-height: 1;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gas-ws-head-btn i {
font-size: 1.15rem;
}
.gas-ws-head-btn:hover {
background: #f8f9fa;
border-color: #adb5bd;
color: #212529;
}
.gas-ws-head-btn:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
.gas-ws-head-btn--guide {
border-color: #b6d4fe;
color: #0d6efd;
}
.gas-ws-head-btn--guide:hover {
background: #e7f1ff;
border-color: #6ea8fe;
color: #084298;
}
.gas-ws-head-btn--textbook {
border-color: #ced4da;
color: #6c757d;
}
.gas-ws-head-btn--textbook:hover {
background: #f1f3f5;
color: #212529;
}
.gas-ws-head-btn--web {
border-color: #a5b4fc;
color: #4f46e5;
}
.gas-ws-head-btn--web:hover {
background: #eef2ff;
border-color: #818cf8;
color: #4338ca;
}
.gas-ws-head-btn--preview {
border-color: #b6d4fe;
color: #0d6efd;
}
.gas-ws-head-btn--preview:hover {
background: #e7f1ff;
border-color: #6ea8fe;
color: #084298;
}
.gas-ws-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border-radius: 10px;
border: 1px solid transparent;
line-height: 1;
transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.gas-ws-action-btn i {
font-size: 1.25rem;
}
.gas-ws-action-btn:hover {
transform: translateY(-1px);
}
.gas-ws-action-btn:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
.gas-ws-action-btn--run {
background: #198754;
color: #fff;
box-shadow: 0 2px 6px rgba(25, 135, 84, 0.35);
}
.gas-ws-action-btn--run:hover {
background: #157347;
color: #fff;
}
.gas-ws-action-btn--web {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}
.gas-ws-action-btn--web:hover {
color: #fff;
filter: brightness(1.05);
}
.gas-ws-action-btn--preview {
background: #fff;
border-color: #6ea8fe;
color: #0d6efd;
}
.gas-ws-action-btn--preview:hover {
background: #e7f1ff;
}
.gas-ws-action-btn--save {
background: #fff;
border-color: #ced4da;
color: #6c757d;
}
.gas-ws-action-btn--save:hover {
background: #f8f9fa;
color: #212529;
}
.gas-workspace--school-student {
width: 100%;
max-width: 100%;
}
.gas-workspace__aside {
display: flex;
flex-direction: column;
}
.gas-workspace__header {
margin: 1rem;
padding: 0.75rem 1rem;
border: 1px solid #cfe2ff;
border-radius: 10px;
background: linear-gradient(135deg, #f8fbff 0%, #f6fffa 100%);
}
.gas-workspace__header-top {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.gas-workspace__header-title {
display: flex;
align-items: flex-start;
gap: 0.65rem;
min-width: 0;
}
.gas-workspace__project-icon {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #fff;
color: #0d6efd;
font-size: 1.2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.gas-workspace__title {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #212529;
line-height: 1.3;
}
.gas-workspace__chapter-select {
margin-top: 0.15rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
max-width: 100%;
}
.gas-workspace__chapter-label {
margin: 0;
font-size: 0.7rem;
font-weight: 500;
color: #6c757d;
white-space: nowrap;
}
.gas-workspace__chapter-select-input {
width: auto;
max-width: min(100%, 18rem);
min-width: 0;
padding: 0 0.9rem 0 0;
margin: 0;
font-size: 0.7rem;
line-height: 1.3;
font-weight: 600;
color: #0d6efd;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236c757d' d='M1 2l3 3 3-3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 0.45rem;
}
.gas-workspace__chapter-select-input:hover {
color: #084298;
}
.gas-workspace__chapter-select-input:focus, .gas-workspace__chapter-select-input:focus-visible {
outline: none;
border: none;
box-shadow: none;
}
.gas-workspace__header-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.gas-workspace__guide-meta {
margin-right: 0.15rem;
}
.gas-workspace__editor-area {
border: 1px solid #ced4da;
border-radius: 6px;
overflow: hidden;
background: #fff;
margin: 0 1rem;
}
.gas-workspace__file-tabs {
display: flex;
align-items: flex-end;
flex-wrap: nowrap;
gap: 0;
padding: 0.25rem 0.35rem 0;
background: #e9ecef;
border-bottom: 1px solid #ced4da;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gas-workspace__file-tabs .gas-file-tab-action {
margin-left: auto;
}
.gas-workspace__file-body {
min-height: 200px;
}
.gas-workspace__code-pane {
display: flex;
flex-direction: column;
background: #1e1e1e;
border-top: 1px solid #2d2d2d;
}
.gas-workspace__editor {
position: relative;
flex-shrink: 0;
overflow: hidden;
}
.gas-workspace__editor-copy {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 5;
border-color: #4a4a4a;
background: rgba(45, 45, 45, 0.92);
color: #d4d4d4;
}
.gas-workspace__editor-copy:hover {
background: #3c3c3c;
border-color: #6a6a6a;
color: #fff;
}
.gas-workspace__editor-body {
height: 420px;
overflow: hidden;
background: #1e1e1e;
}
.gas-workspace .gas-code-textarea {
width: 100%;
height: 420px;
min-height: 0;
max-height: 420px;
border: 0;
padding: 12px;
font-family: ui-monospace, Menlo, Monaco, monospace;
font-size: 13px;
line-height: 1.5;
resize: none;
overflow: auto;
background: #1e1e1e;
color: #d4d4d4;
box-sizing: border-box;
}
.gas-workspace .gas-code-textarea--plain {
display: block !important;
}
.gas-workspace .CodeMirror {
height: 420px !important;
max-height: 420px;
font-size: 13px;
background: #1e1e1e;
}
.gas-workspace .CodeMirror-gutters {
background: #252526;
border-right: 1px solid #2d2d2d;
}
.gas-workspace .CodeMirror-scroll {
min-height: 420px;
max-height: 420px;
overflow: auto !important;
}
.gas-workspace .CodeMirror-sizer {
min-height: auto !important;
}
.gas-workspace__console {
flex-shrink: 0;
border-top: 1px solid #2d2d2d;
background: #1e1e1e;
}
.gas-workspace__console-label {
padding: 0.3rem 0.75rem;
font-family: ui-monospace, Menlo, Monaco, monospace;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #858585;
background: #252526;
border-bottom: 1px solid #2d2d2d;
user-select: none;
}
.gas-workspace .gas-run-output {
min-height: 140px;
max-height: min(35vh, 240px);
overflow-y: auto;
padding: 0.65rem 0.75rem;
font-family: ui-monospace, Menlo, Monaco, monospace;
font-size: 13px;
line-height: 1.45;
background: #1e1e1e;
color: #d4d4d4;
}
.gas-workspace .gas-run-output .text-primary {
color: #4fc3f7 !important;
}
.gas-workspace .gas-run-output .text-success {
color: #73c991 !important;
}
.gas-workspace .gas-run-output .text-danger {
color: #f48771 !important;
}
.gas-workspace .gas-run-output .text-warning {
color: #dcdcaa !important;
}
.gas-file-tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
margin: 0;
padding: 0.35rem 0.7rem;
border: 1px solid transparent;
border-bottom: none;
border-radius: 5px 5px 0 0;
background: transparent;
color: #6c757d;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.72rem;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.gas-file-tab i {
font-size: 0.85rem;
opacity: 0.85;
}
.gas-file-tab:hover {
background: rgba(255, 255, 255, 0.55);
color: #495057;
}
.gas-file-tab--active {
background: #fff;
border-color: #ced4da;
color: #212529;
font-weight: 600;
margin-bottom: -1px;
padding-bottom: calc(0.35rem + 1px);
}
.gas-file-tab--active i {
opacity: 1;
}
.gas-file-tab-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0 0.2rem 0.2rem 0.35rem;
padding: 0;
border: none;
line-height: 1;
cursor: pointer;
transition: transform 0.12s, box-shadow 0.15s, background 0.15s, opacity 0.15s;
}
.gas-file-tab-action:focus-visible {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
.gas-file-tab-action--run {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
color: #fff;
box-shadow: 0 1px 4px rgba(22, 163, 74, 0.45);
}
.gas-file-tab-action--run i {
font-size: 1.05rem;
margin-left: 0.1rem;
}
.gas-file-tab-action--run:hover {
background: linear-gradient(145deg, #4ade80 0%, #22c55e 100%);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
transform: scale(1.06);
}
.gas-file-tab-action--run:active {
transform: scale(0.98);
box-shadow: 0 1px 2px rgba(22, 163, 74, 0.35);
}
.gas-file-panel {
display: none;
}
.gas-file-panel--active {
display: block;
}
.gas-file-panel[data-file='code'] {
background: #1e1e1e;
}
.gas-lms-db {
border: 1px solid #a3cfbb;
overflow: hidden;
}
.gas-lms-db--embedded {
margin-bottom: 0;
border: none;
border-radius: 0;
}
.gas-lms-db--embedded .gas-lms-db__embedded-bar {
border-bottom: 1px solid #f1f3f5;
}
.gas-lms-db--embedded .gas-lms-db__table-wrap {
max-height: min(55vh, 420px);
}
.gas-lms-db__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background: #f0fdf4;
border-bottom: 1px solid #a3cfbb;
}
.gas-lms-db__title {
display: flex;
align-items: center;
gap: 0.35rem;
font-weight: 600;
font-size: 0.9rem;
color: #198754;
}
.gas-lms-db__title i {
font-size: 1.1rem;
}
.gas-lms-db__hint {
line-height: 1.4;
}
.gas-lms-db__tabs {
border-bottom: 1px solid #dee2e6;
}
.gas-lms-db__tabs .nav-link {
padding: 0.35rem 0.65rem;
font-size: 0.8rem;
color: #6c757d;
}
.gas-lms-db__tabs .nav-link.active {
font-weight: 600;
color: #198754;
}
.gas-lms-db__toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
border-bottom: 1px solid #f1f3f5;
}
.gas-lms-db__table-wrap {
max-height: 200px;
overflow: auto;
}
.gas-lms-db__table {
font-size: 0.72rem;
margin-bottom: 0;
table-layout: fixed;
}
.gas-lms-db__table thead th {
position: sticky;
top: 0;
z-index: 1;
background: #f8f9fa;
font-weight: 600;
white-space: nowrap;
padding: 0.25rem 0.2rem;
}
.gas-lms-db__table tbody td {
vertical-align: middle;
padding: 0.2rem;
}
.gas-lms-db__table input.form-control-sm {
width: 100%;
min-width: 0;
padding: 0.2rem 0.35rem;
font-size: 0.72rem;
}
.gas-lms-db__actions-col {
width: 4.5rem;
text-align: center;
}
.gas-lms-db__row-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.gas-step-guide-bar {
border: 1px solid #cfe2ff;
background: #f8fbff;
}
.gas-step-guide-bar__title {
font-size: 0.95rem;
margin-left: 0.35rem;
}
.gas-step-guide-bar__focus {
margin-top: 0.15rem;
}
.gas-step-guide-bar__checks {
border-top: 1px dashed #dee2e6;
padding-top: 0.35rem !important;
}
.gas-drive-photos {
margin-top: 0.65rem;
}
.gas-drive-photos__panel {
margin: 1rem 0;
padding: 1rem 1.5rem;
}
.gas-drive-photos__heading {
display: flex;
align-items: center;
gap: 0.3rem;
margin: 0 0 0.35rem;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.3;
color: #198754;
}
.gas-drive-photos__heading i {
font-size: 0.85rem;
}
.gas-drive-photos__hint {
margin: 0 0 0.45rem;
font-size: 0.68rem;
line-height: 1.45;
color: #6c757d;
}
.gas-drive-photos__hint code {
font-size: 0.65rem;
color: #c45c7a;
}
.gas-drive-photos__meta, .gas-drive-photos__waiting {
margin: 0.4rem 0 0;
font-size: 0.65rem;
line-height: 1.4;
color: #868e96;
}
.gas-drive-photos__actions {
display: flex;
align-items: stretch;
gap: 0.4rem;
}
.gas-drive-photos__form {
flex: 1;
min-width: 0;
margin: 0;
}
.gas-drive-photos__open-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
min-width: 2rem;
height: auto;
padding: 0;
color: #0d6efd;
background: #fff;
border: 1px solid #0d6efd;
border-radius: 6px;
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
}
.gas-drive-photos__open-btn i {
font-size: 1rem;
line-height: 1;
}
.gas-drive-photos__open-btn:hover, .gas-drive-photos__open-btn:focus-visible {
color: #fff;
background: #0d6efd;
}
.gas-drive-photos__upload-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
width: 100%;
margin: 0;
padding: 0.4rem 0.55rem;
font-size: 0.7rem;
font-weight: 600;
line-height: 1.2;
color: #fff;
background: linear-gradient(135deg, #6f5af8 0%, #4f8cff 100%);
border: none;
border-radius: 6px;
cursor: pointer;
transition: filter 0.15s ease, transform 0.1s ease;
}
.gas-drive-photos__upload-btn span {
font-size: inherit;
}
.gas-drive-photos__upload-btn i {
font-size: 0.95rem;
line-height: 1;
}
.gas-drive-photos__upload-btn:hover {
filter: brightness(1.05);
}
.gas-drive-photos__upload-btn:active {
transform: scale(0.99);
}
.gas-drive-photos__input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.gas-drive-photos__gallery {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
max-height: 220px;
overflow-y: auto;
}
.gas-drive-photos__item {
display: flex;
align-items: flex-start;
gap: 0.45rem;
padding: 0.35rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
}
.gas-drive-photos__thumb-link {
flex-shrink: 0;
display: block;
border-radius: 4px;
overflow: hidden;
line-height: 0;
}
.gas-drive-photos__thumb {
display: block;
width: 56px;
height: 56px;
object-fit: cover;
background: #dee2e6;
}
.gas-drive-photos__item-body {
flex: 1;
min-width: 0;
}
.gas-drive-photos__item-name {
display: block;
font-size: 0.62rem;
color: #6c757d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.25rem;
}
.gas-drive-photos__item-actions {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.gas-drive-photos__copy-btn, .gas-drive-photos__apply-btn {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.2rem 0.35rem;
font-size: 0.62rem;
font-weight: 600;
line-height: 1.2;
color: #495057;
background: #fff;
border: 1px solid #ced4da;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.gas-drive-photos__copy-btn i, .gas-drive-photos__apply-btn i {
font-size: 0.75rem;
}
.gas-drive-photos__copy-btn:hover, .gas-drive-photos__copy-btn:focus-visible, .gas-drive-photos__apply-btn:hover, .gas-drive-photos__apply-btn:focus-visible {
color: #0d6efd;
border-color: #0d6efd;
}
.gas-drive-photos__apply-btn {
color: #198754;
border-color: #a3cfbb;
}
.gas-drive-photos__apply-btn:hover, .gas-drive-photos__apply-btn:focus-visible {
color: #fff;
background: #198754;
border-color: #198754;
}
.gas-drive-photos__empty {
margin: 0.45rem 0 0;
font-size: 0.65rem;
color: #868e96;
}
.gas-step-textbook {
margin-bottom: 0.75rem;
}
.gas-step-textbook__panel {
overflow: hidden;
padding: 0 16px;
}
.gas-step-textbook__heading {
margin: 1rem 0;
padding: 0.6rem 0.75rem;
font-size: 0.88rem;
font-weight: 700;
color: #272727;
}
.gas-step-textbook__heading i {
margin-right: 0.25rem;
}
.gas-step-textbook__intro {
margin: 0;
padding: 0.5rem 0.75rem;
font-size: 0.78rem;
color: #495057;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.gas-step-textbook__section {
border-bottom: 1px solid #e9ecef;
}
.gas-step-textbook__section:last-of-type {
border-bottom: none;
}
.gas-step-textbook__summary {
padding: 0.45rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
color: #212529;
cursor: pointer;
list-style: none;
background: #fafbfc;
}
.gas-step-textbook__summary::-webkit-details-marker {
display: none;
}
.gas-step-textbook__summary i {
margin-right: 0.3rem;
color: #0d6efd;
}
.gas-step-textbook__body {
padding: 0.5rem 0.75rem 0.65rem;
font-size: 0.78rem;
line-height: 1.55;
color: #333;
}
.gas-step-textbook__body p {
margin: 0 0 0.45rem;
}
.gas-step-textbook__body p:last-child {
margin-bottom: 0;
}
.gas-step-textbook__meaning-item {
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed #e9ecef;
}
.gas-step-textbook__meaning-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.gas-step-textbook__meaning-title {
display: block;
font-size: 0.76rem;
color: #0d6efd;
margin-bottom: 0.15rem;
}
.gas-step-textbook__meaning-body {
margin: 0;
color: #495057;
}
.gas-step-textbook__copy-section {
padding: 0.55rem 0.75rem 0.65rem;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
}
.gas-step-textbook__copy-heading {
margin: 0 0 0.25rem;
font-size: 0.78rem;
font-weight: 600;
}
.gas-step-textbook__copy-hint {
margin: 0 0 0.35rem;
font-size: 0.6rem;
line-height: 1.35;
color: #868e96;
}
.gas-step-textbook__copy-chip {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.35rem;
padding: 0.3rem 0.4rem;
border: 1px solid #dee2e6;
border-radius: 6px;
background: #fff;
}
.gas-step-textbook__copy-label {
flex-shrink: 0;
font-size: 0.68rem;
font-weight: 600;
color: #6c757d;
min-width: 4.5rem;
}
.gas-step-textbook__copy-text {
flex: 1;
min-width: 0;
font-size: 0.72rem;
padding: 0.15rem 0.35rem;
background: #f1f3f5;
border-radius: 4px;
word-break: break-all;
}
.gas-step-textbook__copy-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 1px solid #ced4da;
border-radius: 5px;
background: #fff;
color: #495057;
cursor: pointer;
}
.gas-step-textbook__copy-btn:hover {
background: #e7f1ff;
border-color: #6ea8fe;
color: #0d6efd;
}
.gas-step-textbook__copy-btn.gas-step-textbook__copy-btn--done {
border-color: #198754;
color: #198754;
background: #d1e7dd;
}
.gas-step-textbook__pdf {
padding: 0 0.75rem 0.65rem;
}
.gas-step-guide-modal .modal-dialog {
max-width: 40rem;
width: calc(100% - 2.5rem);
margin: 1.25rem auto;
}
.gas-step-guide-modal__dialog {
max-width: 40rem;
width: calc(100% - 2.5rem);
margin: 1.25rem auto;
}
.gas-step-guide-modal__content {
border: none;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
}
.gas-step-guide-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 1.5rem 1rem;
background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
border-bottom: 1px solid #e2e8f0;
}
.gas-step-guide-modal__header-main {
flex: 1;
min-width: 0;
}
.gas-step-guide-modal__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.45rem;
}
.gas-step-guide-modal__mode {
font-size: 0.68rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 999px;
}
.gas-step-guide-modal__mode--web {
color: #084298;
background: #cfe2ff;
}
.gas-step-guide-modal__mode--log {
color: #41464b;
background: #e9ecef;
}
.gas-step-guide-modal__focus {
display: flex;
align-items: flex-start;
gap: 0.35rem;
margin: 0.4rem 0 0;
font-size: 0.84rem;
line-height: 1.45;
color: #64748b;
}
.gas-step-guide-modal__focus i {
margin-top: 0.15rem;
color: #94a3b8;
}
.gas-step-guide-modal__close-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin: 0;
padding: 0;
color: white;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
background: transparent;
}
.gas-step-guide-modal .modal-title {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
color: #0f172a;
}
.gas-step-guide-modal__body {
padding: 1.25rem 1.5rem 1.5rem;
background: #f1f5f9;
line-height: 1.55;
}
.gas-step-guide-modal__sections {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 16px;
}
.gas-step-guide-card {
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.gas-step-guide-card--teacher {
border: 1px solid #f59e0b;
}
.gas-step-guide-card--student {
border: 1px solid #3b82f6;
}
.gas-step-guide-card--code {
border: 1px solid #22c55e;
}
.gas-step-guide-card--preview {
border: 1px solid #8b5cf6;
}
.gas-step-guide-card__head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.9rem;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.gas-step-guide-card__head--split {
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}
.gas-step-guide-card__head-left {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.gas-step-guide-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 8px;
background: #e2e8f0;
color: #475569;
font-size: 1rem;
flex-shrink: 0;
}
.gas-step-guide-card__icon--code {
background: #dcfce7;
color: #15803d;
}
.gas-step-guide-card--teacher .gas-step-guide-card__icon {
background: #fef3c7;
color: #b45309;
}
.gas-step-guide-card--student .gas-step-guide-card__icon {
background: #dbeafe;
color: #1d4ed8;
}
.gas-step-guide-card--preview .gas-step-guide-card__icon {
background: #ede9fe;
color: #6d28d9;
}
.gas-step-guide-card__title {
margin: 0;
font-size: 0.9rem;
font-weight: 700;
color: #0f172a;
}
.gas-step-guide-card__body {
padding: 1rem 1.2rem 1.1rem;
}
.gas-step-guide-card__body--flush {
padding: 0;
}
.gas-step-guide-card__lead {
margin: 0 0 0.65rem;
font-size: 0.88rem;
line-height: 1.6;
color: #334155;
}
.gas-step-guide-card__lead--muted {
color: #64748b;
}
.gas-step-guide-card__lead:last-child {
margin-bottom: 0;
}
.gas-step-guide__badge {
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: 4px;
white-space: nowrap;
}
.gas-step-guide__badge--add {
background: #d1e7dd;
color: #0f5132;
}
.gas-step-guide__badge--change {
background: #fff3cd;
color: #664d03;
}
.gas-step-guide__badge--review {
background: #e2e3e5;
color: #41464b;
}
.gas-step-guide__badge--db {
background: #cff4fc;
color: #055160;
}
.gas-step-guide__list {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.84rem;
line-height: 1.5;
}
.gas-step-guide__list--teacher li {
position: relative;
padding-left: 1rem;
margin-bottom: 0.4rem;
color: #475569;
}
.gas-step-guide__list--teacher li::before {
content: "•";
position: absolute;
left: 0;
color: #f59e0b;
font-weight: 700;
}
.gas-step-guide__tasks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.gas-step-guide__tasks li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.55rem 0.65rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
font-size: 0.84rem;
line-height: 1.5;
}
.gas-step-guide__task-num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: #3b82f6;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
}
.gas-step-guide__task-text {
flex: 1;
min-width: 0;
color: #334155;
}
.gas-step-guide__preview-flow {
margin-bottom: 0.85rem;
padding: 0.65rem 0.75rem;
border-radius: 8px;
background: #f5f3ff;
border: 1px solid #e9d5ff;
}
.gas-step-guide__preview-flow-label, .gas-step-guide__checks-label {
margin: 0 0 0.45rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #64748b;
}
.gas-step-guide__preview-steps {
margin: 0;
padding-left: 1.15rem;
font-size: 0.84rem;
line-height: 1.55;
color: #334155;
}
.gas-step-guide__preview-steps li + li {
margin-top: 0.25rem;
}
.gas-step-guide__code {
margin: 0;
padding: 0.85rem 1rem;
font-size: 0.74rem;
line-height: 1.5;
max-height: 220px;
overflow: auto;
background: #1e1e1e;
color: #d4d4d4;
white-space: pre-wrap;
word-break: break-word;
border-radius: 0 0 9px 9px;
}
.gas-step-guide__checks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.gas-step-guide__check {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.5rem 0.65rem;
font-size: 0.84rem;
line-height: 1.45;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
}
.gas-step-guide__check-box {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
margin-top: 0.12rem;
border: 2px solid #cbd5e1;
border-radius: 4px;
background: #fff;
}
.gas-step-guide__check--ok {
border-color: #bbf7d0;
background: #f0fdf4;
}
.gas-step-guide__check--ok .gas-step-guide__check-box {
border-color: #22c55e;
background: #22c55e;
box-shadow: inset 0 0 0 2px #fff;
}
.gas-step-guide__check--ok .gas-step-guide__check-label {
color: #166534;
}
.gas-step-guide__check--fail {
border-color: #fecaca;
background: #fef2f2;
}
.gas-step-guide__check--fail .gas-step-guide__check-label {
color: #b91c1c;
}
.gas-step-guide__troubleshoot {
margin-top: 0.65rem;
border: 1px dashed #fcd34d;
border-radius: 8px;
background: #fffbeb;
overflow: hidden;
}
.gas-step-guide__troubleshoot summary {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.65rem;
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
color: #92400e;
list-style: none;
}
.gas-step-guide__troubleshoot summary::-webkit-details-marker {
display: none;
}
.gas-step-guide__troubleshoot ul {
margin: 0;
padding: 0.5rem 0.75rem 0.65rem 1.5rem;
font-size: 0.82rem;
line-height: 1.5;
color: #78350f;
}
.gas-work-publish {
margin-top: 0.65rem;
}
.gas-work-publish__panel {
margin: 1rem 0;
padding: 1rem 1.25rem;
border: 1px solid #c7d2fe;
border-radius: 10px;
background: linear-gradient(180deg, #f5f7ff 0%, #fff 100%);
}
.gas-work-publish__heading {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.4rem;
font-size: 0.78rem;
font-weight: 700;
color: #4338ca;
}
.gas-work-publish__heading i {
font-size: 1rem;
}
.gas-work-publish__hint {
margin: 0 0 0.65rem;
font-size: 0.68rem;
line-height: 1.45;
color: #6c757d;
}
.gas-work-publish__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
padding: 0.5rem 0.65rem;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
border: none;
border-radius: 8px;
cursor: pointer;
}
.gas-work-publish__btn:disabled {
opacity: 0.65;
cursor: wait;
}
.gas-work-publish__result--hidden {
display: none;
}
.gas-work-publish__url-label {
margin: 0.75rem 0 0.25rem;
font-size: 0.68rem;
font-weight: 700;
color: #495057;
}
.gas-work-publish__url-row {
display: flex;
align-items: flex-start;
gap: 0.35rem;
}
.gas-work-publish__url-link {
flex: 1;
min-width: 0;
font-size: 0.62rem;
line-height: 1.4;
word-break: break-all;
color: #0d6efd;
}
.gas-work-publish__copy-btn {
flex-shrink: 0;
width: 2rem;
height: 2rem;
padding: 0;
color: #495057;
background: #fff;
border: 1px solid #ced4da;
border-radius: 6px;
cursor: pointer;
}
.gas-work-publish__qr-wrap {
margin-top: 0.65rem;
text-align: center;
}
.gas-work-publish__qr {
display: inline-block;
max-width: 100%;
height: auto;
border: 1px solid #dee2e6;
border-radius: 8px;
background: #fff;
}
.gas-work-publish__qr-hint {
margin: 0.35rem 0 0;
font-size: 0.65rem;
color: #868e96;
}
.gas-work-publish__status {
margin: 0.5rem 0 0;
font-size: 0.68rem;
line-height: 1.4;
}
.gas-work-publish__status--hidden {
display: none;
}
.gas-workspace .CodeMirror .gas-cm-line-highlight {
background: rgba(255, 213, 79, 0.25) !important;
}
@media (max-width: 991.98px) {
.gas-workspace__grid {
flex-direction: column-reverse;
}
.gas-workspace__aside {
order: 2;
}
.gas-workspace__main {
order: 1;
}
}
.steps-index-container {
padding: 2rem 0;
}
.steps-index-container .lesson-header {
text-align: center;
margin-bottom: 3rem;
}
.steps-index-container .lesson-header h2 {
color: #2c3e50;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.steps-index-container .lesson-header .lesson-description {
color: #6c757d;
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.steps-index-container .steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.steps-index-container .steps-grid .step-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.steps-index-container .steps-grid .step-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: #007bff;
}
.steps-index-container .steps-grid .step-card .step-header {
margin-bottom: 1rem;
text-align: center;
}
.steps-index-container .steps-grid .step-card .step-header h4 {
color: #007bff;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #007bff, #0056b3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.steps-index-container .steps-grid .step-card .step-header h5 {
color: #2c3e50;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0;
}
.steps-index-container .steps-grid .step-card .step-content {
margin-bottom: 1.5rem;
}
.steps-index-container .steps-grid .step-card .step-content p {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1rem;
text-align: center;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator {
text-align: center;
padding: 0.5rem 1rem;
background: #f8f9fa;
border-radius: 20px;
display: inline-block;
margin: 0 auto;
font-weight: 500;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator i {
margin-right: 0.5rem;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator.text-primary {
background: rgba(0, 123, 255, 0.1);
color: #007bff;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator.text-success {
background: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator.text-warning {
background: rgba(255, 193, 7, 0.1);
color: #ffc107;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator.text-info {
background: rgba(23, 162, 184, 0.1);
color: #17a2b8;
}
.steps-index-container .steps-grid .step-card .step-actions {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.steps-index-container .steps-grid .step-card .step-actions .btn {
border-radius: 25px;
padding: 0.5rem 1.5rem;
font-weight: 500;
transition: all 0.3s ease;
}
.steps-index-container .steps-grid .step-card .step-actions .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.steps-index-container .steps-grid .step-card .step-actions .badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}
.steps-index-container .steps-grid .step-card .step-actions .badge.bg-success {
background: linear-gradient(135deg, #28a745, #20c997) !important;
}
.steps-index-container .steps-grid .step-card .step-actions .badge.bg-warning {
background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
color: #212529 !important;
}
.steps-index-container .steps-grid .step-card .step-actions .badge.bg-secondary {
background: linear-gradient(135deg, #6c757d, #495057) !important;
}
.steps-index-container .steps-grid .step-card .step-actions .badge i {
margin-right: 0.25rem;
}
@media (max-width: 768px) {
.steps-index-container {
padding: 1rem 0;
}
.steps-index-container .lesson-header {
margin-bottom: 2rem;
}
.steps-index-container .lesson-header h2 {
font-size: 2rem;
}
.steps-index-container .lesson-header .lesson-description {
font-size: 1rem;
}
.steps-index-container .steps-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.steps-index-container .steps-grid .step-card {
padding: 1.25rem;
}
.steps-index-container .steps-grid .step-card .step-header h4 {
font-size: 1.25rem;
}
.steps-index-container .steps-grid .step-card .step-header h5 {
font-size: 1.1rem;
}
.steps-index-container .steps-grid .step-card .step-actions {
flex-direction: column;
align-items: stretch;
}
.steps-index-container .steps-grid .step-card .step-actions .btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 576px) {
.steps-index-container .steps-grid .step-card {
padding: 1rem;
}
.steps-index-container .steps-grid .step-card .step-header h4 {
font-size: 1.1rem;
}
.steps-index-container .steps-grid .step-card .step-header h5 {
font-size: 1rem;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator {
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}
}
@media (prefers-color-scheme: dark) {
.steps-index-container .lesson-header h2 {
color: #e2e8f0;
}
.steps-index-container .lesson-header .lesson-description {
color: #a0aec0;
}
.steps-index-container .steps-grid .step-card {
background: #2d3748;
border-color: #4a5568;
}
.steps-index-container .steps-grid .step-card .step-header h5 {
color: #e2e8f0;
}
.steps-index-container .steps-grid .step-card .step-content p {
color: #a0aec0;
}
.steps-index-container .steps-grid .step-card .step-content .step-type-indicator {
background: #4a5568;
color: #cbd5e0;
}
.steps-index-container .steps-grid .step-card .step-actions .badge.bg-secondary {
background: linear-gradient(135deg, #4a5568, #2d3748) !important;
}
}
.step-show-container {
padding: 0;
position: relative;
}
.step-show-container .sidebar-toggle-header {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
font-weight: 500;
color: white;
transition: all 0.3s ease;
}
.step-show-container .sidebar-toggle-header:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
}
.step-show-container .sidebar-toggle-header i {
margin-right: 0.4rem;
transition: transform 0.3s ease;
}
.step-show-container .sidebar-toggle-container-header {
display: flex;
align-items: center;
margin: 0 1rem;
}
.step-show-container .sidebar-toggle-container-header .sidebar-toggle-header {
background: rgba(0, 123, 255, 0.1);
border: 1px solid rgba(0, 123, 255, 0.3);
color: #007bff;
}
.step-show-container .sidebar-toggle-container-header .sidebar-toggle-header:hover {
background: rgba(0, 123, 255, 0.2);
border-color: rgba(0, 123, 255, 0.5);
}
.step-show-container .sidebar-toggle-container {
position: fixed;
top: 80px;
left: 20px;
z-index: 1000;
display: none;
}
.step-show-container .sidebar-toggle-container .sidebar-toggle {
background: rgba(255, 255, 255, 0.95);
border: 2px solid #007bff;
border-radius: 25px;
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.step-show-container .sidebar-toggle-container .sidebar-toggle:hover {
background: #007bff;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.step-show-container .sidebar-toggle-container .sidebar-toggle i {
margin-right: 0.5rem;
transition: transform 0.3s ease;
}
.step-show-container.sidebar-closed .sidebar-toggle {
background: #007bff;
color: white;
}
.step-show-container.sidebar-closed .sidebar-toggle i {
transform: rotate(180deg);
}
.step-show-container.sidebar-closed #sidebarColumn {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
display: none !important;
}
.step-show-container.sidebar-closed .col-10 {
width: 100% !important;
max-width: 100% !important;
flex: 1 !important;
transition: all 0.3s ease;
}
.step-show-container.sidebar-closed .editor-area {
width: 100% !important;
max-width: 100% !important;
flex: 1 !important;
}
.step-show-container #sidebarColumn {
transition: all 0.3s ease;
transform-origin: top;
}
.step-show-container .col-10 {
transition: width 0.3s ease;
}
.step-show-container .step-controls {
background: white;
border-radius: 8px;
padding: .5rem;
height: fit-content;
}
.step-show-container .step-controls #submission-status .status-content h6 {
color: #2c3e50;
font-weight: 600;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.step-show-container .step-controls #submission-status .status-content .message .btn {
display: block;
width: 80%;
margin: 1rem auto;
border-radius: 6px;
font-size: 0.85rem;
padding: 0.5rem 0.75rem;
}
.step-show-container .step-controls .quiz-section {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e9ecef;
}
.step-show-container .step-controls .quiz-section h4 {
color: #2c3e50;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
}
.step-show-container .step-controls .quiz-section h4 i {
margin-right: 0.5rem;
color: #28a745;
}
.step-show-container .step-controls .quiz-section .quiz-question {
margin-bottom: 1.5rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 6px;
}
.step-show-container .step-controls .quiz-section .quiz-question h5 {
color: #495057;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.step-show-container .step-controls .quiz-section .quiz-question p {
color: #6c757d;
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.step-show-container .step-controls .quiz-section .quiz-question .form-check {
margin-bottom: 0.5rem;
}
.step-show-container .step-controls .quiz-section .quiz-question .form-check .form-check-input {
margin-top: 0.2rem;
}
.step-show-container .step-controls .quiz-section .quiz-question .form-check .form-check-label {
color: #495057;
font-size: 0.9rem;
cursor: pointer;
}
.step-show-container .step-controls .quiz-section .btn-primary {
background: linear-gradient(135deg, #007bff, #0056b3);
border: none;
border-radius: 25px;
padding: 0.75rem 2rem;
font-weight: 500;
transition: all 0.3s ease;
}
.step-show-container .step-controls .quiz-section .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.step-show-container iframe {
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.step-show-container iframe:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
#evaluationModal .modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
#evaluationModal .modal-content .modal-header {
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border-radius: 12px 12px 0 0;
border-bottom: none;
}
#evaluationModal .modal-content .modal-header .modal-title {
font-weight: 600;
}
#evaluationModal .modal-content .modal-header .modal-title i {
color: white !important;
}
#evaluationModal .modal-content .modal-header .btn-close {
filter: brightness(0) invert(1);
}
#evaluationModal .modal-content .modal-body02 {
padding: 1.5rem;
}
#evaluationModal .modal-content .modal-body02.evaluation-body {
text-align: center;
font-size: 1.1rem;
color: #2c3e50;
}
#evaluationModal .modal-content .modal-footer {
border-top: none;
padding: 1rem 1.5rem 1.5rem;
}
#evaluationModal .modal-content .modal-footer .btn {
border-radius: 25px;
padding: 0.5rem 1.5rem;
font-weight: 500;
}
@media (max-width: 768px) {
.step-show-container .step-controls {
margin-bottom: 1rem;
padding: 1rem;
}
.step-show-container .step-controls .quiz-section {
margin-top: 1.5rem;
padding-top: 1rem;
}
.step-show-container .step-controls .quiz-section .quiz-question {
padding: 0.75rem;
}
.step-show-container .step-controls .quiz-section .quiz-question h5 {
font-size: 0.95rem;
}
.step-show-container .step-controls .quiz-section .quiz-question p {
font-size: 0.85rem;
}
.step-show-container .step-controls .quiz-section .btn-primary {
padding: 0.6rem 1.5rem;
font-size: 0.9rem;
}
.step-show-container iframe {
height: 100%;
}
}
@media (max-width: 576px) {
.step-show-container .step-controls {
padding: 0.75rem;
}
.step-show-container .step-controls #submission-status .status-content h6 {
font-size: 0.85rem;
}
.step-show-container .step-controls #submission-status .status-content .message .btn {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
}
.step-show-container .step-controls .quiz-section h4 {
font-size: 1rem;
}
.step-show-container .step-controls .quiz-section .quiz-question {
padding: 0.5rem;
}
.step-show-container .step-controls .quiz-section .quiz-question h5 {
font-size: 0.9rem;
}
.step-show-container .step-controls .quiz-section .quiz-question p {
font-size: 0.8rem;
}
.step-show-container .step-controls .quiz-section .quiz-question .form-check-label {
font-size: 0.85rem;
}
.step-show-container iframe {
height: 100%;
}
}
@media (prefers-color-scheme: dark) {
.step-show-container .step-controls #submission-status .status-content h6 {
color: #666;
}
.step-show-container .step-controls .quiz-section {
border-top-color: #4a5568;
}
.step-show-container .step-controls .quiz-section h4 {
color: #e2e8f0;
}
.step-show-container .step-controls .quiz-section .quiz-question {
background: #4a5568;
}
.step-show-container .step-controls .quiz-section .quiz-question h5 {
color: #cbd5e0;
}
.step-show-container .step-controls .quiz-section .quiz-question p {
color: #a0aec0;
}
.step-show-container .step-controls .quiz-section .quiz-question .form-check-label {
color: #cbd5e0;
}
}
.lesson-content {
font-size: .8rem;
}
.lesson-content ol {
padding: 0;
}
.lesson-content ol li {
font-size: .8rem;
display: inline-block !important;
width: auto !important;
}
.lesson-content ol li span {
font-weight: 600;
width: auto;
text-align: center;
}
.lesson-content .btn {
background: none;
padding: 0 2rem;
}
.grade-display-header {
display: flex;
align-items: center;
}
.grade-display-header h6 {
font-size: .8rem !important;
margin-right: 8px;
}
.grade-settings .btn {
background: #2E8B57;
color: white;
padding: 6px 12px;
font-size: 12px;
margin: 1rem 0;
border-radius: 6px;
}
.lesson-header p {
margin-top: 1rem;
}
#submission-status .submission-status-note {
display: block;
margin: 0 0 8px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-size: 0.85rem;
line-height: 1.45;
color: #6c757d;
}
#submission-status .submission-status-note i {
margin-right: 4px;
}
#submission-status .submission-status-note--muted {
color: #6c757d;
}
#submission-status .submission-status-note--info {
color: #495057;
}
#submission-status .submission-status-note--warning {
color: #856404;
}
#submission-status .status-message.submission-status-note {
margin-bottom: 8px;
}
.grade-display-section {
border: 1px solid #dee2e6;
background-color: #f8f9fa;
}
.grade-display-section h6 {
color: #17a2b8;
font-weight: 600;
}
.current-grades-display {
min-height: 40px;
}
.selected-grades .badge {
font-size: 0.85rem;
padding: 0.5rem 0.75rem;
border-radius: 20px;
background-color: #007bff;
color: white;
font-weight: 500;
}
.selected-grades .badge:hover {
background-color: #0056b3;
transform: translateY(-1px);
transition: all 0.2s ease;
}
.grade-selection .grade-group {
margin-bottom: 1.5rem;
}
.grade-selection .grade-group .grade-category {
font-weight: 600;
color: #495057;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e9ecef;
}
.grade-selection .grade-group .grade-checkboxes .form-check {
margin-bottom: 0.5rem;
}
.grade-selection .grade-group .grade-checkboxes .form-check .form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.grade-selection .grade-group .grade-checkboxes .form-check .form-check-label {
font-size: 0.9rem;
color: #495057;
cursor: pointer;
}
.grade-selection .grade-group .grade-checkboxes .form-check .form-check-label:hover {
color: #007bff;
}
.quick-actions .btn-group .btn {
font-size: 0.8rem;
padding: 0.375rem 0.75rem;
}
.quick-actions .btn-group .btn:hover {
background-color: #6c757d;
border-color: #6c757d;
color: white;
}
.learning-plan-section .learning-plan-card .card {
border: 1px solid #dee2e6;
transition: all 0.3s ease;
}
.learning-plan-section .learning-plan-card .card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.learning-plan-section .learning-plan-card .card .card-body {
padding: 1.5rem;
}
.learning-plan-section .learning-plan-card .card .card-body i {
margin-bottom: 0.5rem;
}
.learning-plan-section .learning-plan-card .card .card-body h6 {
color: #495057;
font-weight: 600;
}
.learning-plan-section .learning-plan-card .card .card-body .text-muted {
font-size: 0.85rem;
}
.learning-plan-section .learning-plan-card .card .card-body .btn {
border-radius: 20px;
padding: 0.5rem 1rem;
font-weight: 500;
transition: all 0.2s ease;
}
.learning-plan-section .learning-plan-card .card .card-body .btn:hover {
transform: translateY(-1px);
}
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
}
.toast {
min-width: 300px;
margin-bottom: 10px;
}
.toast .toast-body {
padding: 0.75rem 1rem;
}
.toast .toast-body i {
font-size: 1.1rem;
}
@media (max-width: 768px) {
.grade-selection .row .col-md-6 {
margin-bottom: 1rem;
}
.quick-actions .btn-group {
flex-direction: column;
}
.quick-actions .btn-group .btn {
margin-bottom: 0.25rem;
border-radius: 0.375rem !important;
}
}
#lesson_page {
padding: 3rem 2rem;
}
.lesson-detail-hero {
background: #fff;
margin-bottom: 2rem;
}
.lesson-detail-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.65rem;
margin-bottom: 1.25rem;
}
.lesson-detail-hero__chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.38rem 0.8rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 999px;
font-size: 0.8125rem;
line-height: 1.2;
}
.lesson-detail-hero__chip > i {
color: #036eb8;
font-size: 1rem;
line-height: 1;
}
.lesson-detail-hero__chip-label {
color: #64748b;
font-weight: 600;
}
.lesson-detail-hero__chip-value {
font-weight: 700;
color: #0f172a;
}
.lesson-detail-hero__admin-files {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.lesson-detail-hero__file-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #fff;
color: #036eb8;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lesson-detail-hero__file-link:hover {
background: #eff6ff;
border-color: rgba(3, 110, 184, 0.28);
color: #025a96;
}
.lesson-detail-hero__file-link--student {
color: #036eb8;
background: #eff6ff;
border-color: #bfdbfe;
}
.lesson-detail-hero__file-link--student:hover {
background: #dbeafe;
border-color: #93c5fd;
color: #025a96;
}
.lesson-detail-hero__file-link--answer {
color: #b45309;
background: #fffbeb;
border-color: #fcd34d;
}
.lesson-detail-hero__file-link--answer:hover {
background: #fef3c7;
border-color: #fbbf24;
color: #92400e;
}
.lesson-detail-hero__course {
margin: 0 0 0.75rem;
font-size: 0.875rem;
color: #64748b;
}
.lesson-detail-hero__course-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #036eb8;
font-weight: 600;
text-decoration: none;
}
.lesson-detail-hero__course-link:hover {
color: #025a96;
text-decoration: underline;
}
.lesson-detail-hero__title-row {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.lesson-detail-hero__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 14px;
background: linear-gradient(135deg, #025a96 0%, #036eb8 52%, #0ea5e9 100%);
color: #fff;
font-size: 1.45rem;
line-height: 1;
box-shadow: 0 8px 18px rgba(3, 110, 184, 0.22);
}
.lesson-detail-hero__title-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.65rem;
}
.lesson-detail-hero__title {
margin: 0;
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: 800;
line-height: 1.35;
color: #0f172a;
}
.lesson-detail-hero__edit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin-left: 0;
border-radius: 8px;
background: #f1f5f9;
color: #036eb8;
vertical-align: middle;
text-decoration: none;
transition: background 0.2s ease;
}
.lesson-detail-hero__edit:hover {
background: #e2e8f0;
color: #025a96;
}
.lesson-detail-hero__type-badge {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.7rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.lesson-detail-hero__type-badge--scratch {
background: #ecfeff;
color: #0e7490;
border: 1px solid #a5f3fc;
}
.lesson-detail-hero__type-badge--coding {
background: #eff6ff;
color: #036eb8;
border: 1px solid #bfdbfe;
}
.lesson-detail-hero__type-badge--minecraft {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.lesson-detail-hero__type-badge--gas {
background: #fff7ed;
color: #c2410c;
border: 1px solid #fed7aa;
}
.lesson-detail-hero__type-badge--default {
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
}
.lesson-detail-hero__lead {
margin: 0;
font-size: 1rem;
line-height: 1.7;
color: #475569;
max-width: 72ch;
}
.lesson-detail-goals {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
margin-top: 1.5rem;
padding-top: 1.35rem;
border-top: 1px solid #f1f5f9;
}
@media (min-width: 768px) {
.lesson-detail-goals {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lesson-detail-goals__card {
padding: 1.1rem 1.2rem;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.lesson-detail-goals__heading {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.7rem;
font-size: 0.9rem;
font-weight: 700;
color: #036eb8;
}
.lesson-detail-goals__heading i {
font-size: 1.1rem;
line-height: 1;
}
.lesson-detail-goals__text {
margin: 0;
font-size: 0.875rem;
line-height: 1.7;
color: #334155;
}
.lesson-detail-goals__list {
margin: 0;
padding-left: 1.15rem;
font-size: 0.875rem;
line-height: 1.65;
color: #334155;
}
.lesson-detail-goals__list li + li {
margin-top: 0.4rem;
}
.lesson_detileBox .grade-settings {
margin-top: 1rem;
margin-bottom: 0;
padding: 1rem;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 12px;
}
.lesson_detileBox .lesson-title .edit_btn i {
background: #f8f8f8 !important;
color: #036EB8 !important;
margin-right: 8px !important;
}
.quiz-question {
margin: 2rem 0;
}
.quiz-question h6 {
font-size: 1.2rem;
margin: 2rem 0 1rem;
}
.quiz-question .form-check {
padding: .5rem 2rem;
}
.quiz-question .form-check-label {
font-size: 1rem !important;
}
.quiz-question .form-check {
font-size: 1rem !important;
}
.admin-step-management {
margin: 2rem 0;
padding: 1.5rem;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
}
.admin-step-management .admin-section-title {
font-size: 1.1rem;
font-weight: 600;
color: #495057;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #dee2e6;
}
.admin-step-management .step-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.admin-step-management .step-actions .btn-create-step {
background-color: #28a745;
border-color: #28a745;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s ease;
}
.admin-step-management .step-actions .btn-create-step:hover {
background-color: #218838;
border-color: #1e7e34;
color: white;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.admin-step-management .step-actions .btn-create-step i {
font-size: 1rem;
}
.admin-step-management .step-actions .btn-edit-step {
background-color: #007bff;
border-color: #007bff;
color: white;
padding: 0.375rem 0.75rem;
border-radius: 4px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.admin-step-management .step-actions .btn-edit-step:hover {
background-color: #0056b3;
border-color: #0056b3;
color: white;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-step-management .step-actions .btn-edit-step i {
font-size: 0.9rem;
}
.admin-step-management .step-actions .btn-delete-step {
background-color: #dc3545;
border-color: #dc3545;
color: white;
padding: 0.375rem 0.75rem;
border-radius: 4px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.admin-step-management .step-actions .btn-delete-step:hover {
background-color: #c82333;
border-color: #bd2130;
color: white;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.admin-step-management .step-actions .btn-delete-step i {
font-size: 0.9rem;
}
.admin-step-management .step-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.admin-step-management .step-list-header .step-count {
font-size: 0.9rem;
color: #6c757d;
font-weight: 500;
}
.admin-step-card {
width: 100%;
}
@media (max-width: 768px) {
.admin-step-management .step-actions {
flex-direction: column;
align-items: stretch;
}
.admin-step-management .step-actions .btn-create-step {
justify-content: center;
}
}
.lessons-content {
padding: 3rem 2rem;
min-height: 100vh;
height: 100%;
}
.lessons-content .lesson-card {
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1);
background: white;
position: relative;
padding: 2rem 2rem !important;
width: 90%;
}
.lessons-content .lesson-card a {
display: block;
font-size: .8rem;
margin: 1rem 0;
text-align: center;
font-weight: 700;
}
.lessons-content .lesson-card h5 {
margin: 1rem 0 0 !important;
}
.lessons-content .lesson-card h5 a {
text-align: left;
font-size: 1rem;
display: inline-block;
}
.lessons-content .lesson-card p {
font-size: .8rem !important;
}
.lessons-content .lesson-card ol {
padding: 0;
margin: 0;
}
.lessons-content .lesson-card ol li {
list-style-type: none;
display: inline-block;
font-size: .7rem !important;
font-weight: 700;
padding: 4px 4px;
background: #e9ecef;
color: #036EB8 !important;
}
.lessons-content .lesson-card ul li {
list-style-type: none;
font-size: .8rem !important;
}
.lessons-content .lesson-card .lesson-actions a {
background: #036EB8;
color: white;
border: none;
font-size: .8rem;
font-weight: 700;
padding: 10px 4px;
border-radius: 30px;
}
.lessons-content .lesson-card .lesson-actions a i {
margin-right: 8px;
}
.lessons-content .lesson-card .badge-content {
position: absolute;
top: -24px;
left: -24px;
background: #ff8800;
color: white;
padding: 0.5rem .8rem;
border-radius: 50%;
font-size: .9rem;
text-align: center;
}
.grade-settings-row {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 1rem;
}
.grade-settings-row .btn {
flex-shrink: 0;
white-space: nowrap;
}
.grade-display-section {
background-color: #f8f9fa;
border-radius: 8px;
padding: 1rem;
flex: 1;
}
.grade-display-section h6 {
color: #6c757d;
margin-bottom: 0.75rem;
font-weight: 400;
font-size: 0.9rem;
}
.grade-display-section .selected-grades {
margin-bottom: 0.5rem;
}
.grade-display-section .selected-grades .badge {
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
}
.grade-display-section .text-muted {
font-size: 0.875rem;
}
.grade-display-section .current-grades-display .selected-grades {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.grade-display-section .current-grades-display .selected-grades .badge {
flex-shrink: 0;
}
.grade-display-section .current-grades-display .selected-grades .text-muted {
margin: 0;
flex: 1;
}
.grade-display-section .grade-display-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.grade-display-section .grade-display-header h6 {
margin: 0;
flex-shrink: 0;
}
.grade-display-section .grade-display-header .current-grades-display {
flex: 1;
}
@media (max-width: 768px) {
.grade-settings-row {
flex-direction: column;
gap: 1rem;
}
.grade-settings-row .btn {
align-self: flex-start;
}
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-muted {
color: #6c757d !important;
}
.text-primary {
color: #007bff !important;
}
.text-success {
color: #28a745 !important;
}
.text-danger {
color: #dc3545 !important;
}
.text-warning {
color: #ffc107 !important;
}
.text-info {
color: #17a2b8 !important;
}
.bg-primary {
background-color: #007bff !important;
}
.bg-success {
background-color: #28a745 !important;
}
.bg-danger {
background-color: #dc3545 !important;
}
.bg-warning {
background-color: #ffc107 !important;
}
.bg-info {
background-color: #17a2b8 !important;
}
.bg-light {
background-color: #f8f9fa !important;
}
.bg-dark {
background-color: #343a40 !important;
}
.m-0 {
margin: 0 !important;
}
.m-1 {
margin: 4px !important;
}
.m-2 {
margin: 8px !important;
}
.m-3 {
margin: 16px !important;
}
.m-4 {
margin: 24px !important;
}
.m-5 {
margin: 32px !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: 4px !important;
}
.mt-2 {
margin-top: 8px !important;
}
.mt-3 {
margin-top: 16px !important;
}
.mt-4 {
margin-top: 24px !important;
}
.mt-5 {
margin-top: 32px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: 4px !important;
}
.mb-2 {
margin-bottom: 8px !important;
}
.mb-3 {
margin-bottom: 16px !important;
}
.mb-4 {
margin-bottom: 24px !important;
}
.mb-5 {
margin-bottom: 32px !important;
}
.ml-0 {
margin-left: 0 !important;
}
.ml-1 {
margin-left: 4px !important;
}
.ml-2 {
margin-left: 8px !important;
}
.ml-3 {
margin-left: 16px !important;
}
.ml-4 {
margin-left: 24px !important;
}
.ml-5 {
margin-left: 32px !important;
}
.mr-0 {
margin-right: 0 !important;
}
.mr-1 {
margin-right: 4px !important;
}
.mr-2 {
margin-right: 8px !important;
}
.mr-3 {
margin-right: 16px !important;
}
.mr-4 {
margin-right: 24px !important;
}
.mr-5 {
margin-right: 32px !important;
}
.p-0 {
padding: 0 !important;
}
.p-1 {
padding: 4px !important;
}
.p-2 {
padding: 8px !important;
}
.p-3 {
padding: 16px !important;
}
.p-4 {
padding: 24px !important;
}
.p-5 {
padding: 32px !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pt-1 {
padding-top: 4px !important;
}
.pt-2 {
padding-top: 8px !important;
}
.pt-3 {
padding-top: 16px !important;
}
.pt-4 {
padding-top: 24px !important;
}
.pt-5 {
padding-top: 32px !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pb-1 {
padding-bottom: 4px !important;
}
.pb-2 {
padding-bottom: 8px !important;
}
.pb-3 {
padding-bottom: 16px !important;
}
.pb-4 {
padding-bottom: 24px !important;
}
.pb-5 {
padding-bottom: 32px !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pl-1 {
padding-left: 4px !important;
}
.pl-2 {
padding-left: 8px !important;
}
.pl-3 {
padding-left: 16px !important;
}
.pl-4 {
padding-left: 24px !important;
}
.pl-5 {
padding-left: 32px !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pr-1 {
padding-right: 4px !important;
}
.pr-2 {
padding-right: 8px !important;
}
.pr-3 {
padding-right: 16px !important;
}
.pr-4 {
padding-right: 24px !important;
}
.pr-5 {
padding-right: 32px !important;
}
.d-none {
display: none !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-block {
display: block !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.w-25 {
width: 25% !important;
}
.w-50 {
width: 50% !important;
}
.w-75 {
width: 75% !important;
}
.w-100 {
width: 100% !important;
}
.h-25 {
height: 25% !important;
}
.h-50 {
height: 50% !important;
}
.h-75 {
height: 75% !important;
}
.h-100 {
height: 100% !important;
}
.position-static {
position: static !important;
}
.position-relative {
position: relative !important;
}
.position-absolute {
position: absolute !important;
}
.position-fixed {
position: fixed !important;
}
.position-sticky {
position: sticky !important;
}
.border {
border: 1px solid #dee2e6 !important;
}
.border-top {
border-top: 1px solid #dee2e6 !important;
}
.border-right {
border-right: 1px solid #dee2e6 !important;
}
.border-bottom {
border-bottom: 1px solid #dee2e6 !important;
}
.border-left {
border-left: 1px solid #dee2e6 !important;
}
.border-0 {
border: 0 !important;
}
.border-top-0 {
border-top: 0 !important;
}
.border-right-0 {
border-right: 0 !important;
}
.border-bottom-0 {
border-bottom: 0 !important;
}
.border-left-0 {
border-left: 0 !important;
}
.rounded {
border-radius: 4px !important;
}
.rounded-sm {
border-radius: 2px !important;
}
.rounded-lg {
border-radius: 6px !important;
}
.rounded-circle {
border-radius: 50% !important;
}
.rounded-0 {
border-radius: 0 !important;
}
.shadow-sm {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) !important;
}
.shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.shadow-lg {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
.shadow-none {
box-shadow: none !important;
}
@media (max-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-flex {
display: flex !important;
}
}
@media (min-width: 577px) and (max-width: 768px) {
.d-md-none {
display: none !important;
}
.d-md-block {
display: block !important;
}
.d-md-flex {
display: flex !important;
}
}
@media (min-width: 769px) {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-flex {
display: flex !important;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
background-color: #fff;
color: #1f2430;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
font-weight: 600;
line-height: 1.2;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
h2 {
font-size: 2rem;
margin-bottom: 1.25rem;
}
h3 {
font-size: 1.75rem;
margin-bottom: 1rem;
}
h4 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
h5 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
h6 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
p {
margin-bottom: 1rem;
}
a {
color: #036EB8;
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #025086;
}
ul, ol {
margin-bottom: 1rem;
padding-left: 2rem;
}
li {
margin-bottom: 0.5rem;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.text-muted {
color: #6c757d;
}
.text-primary {
color: #036EB8;
}
.text-success {
color: #28a745;
}
.text-danger {
color: #dc3545;
}
.text-warning {
color: #ffc107;
}
.text-info {
color: #17a2b8;
}
.text-sm {
font-size: 0.875rem;
}
.text-lg {
font-size: 1.25rem;
}
.text-xl {
font-size: 1.5rem;
}
.font-weight-normal {
font-weight: normal;
}
.font-weight-bold {
font-weight: bold;
}
.font-weight-light {
font-weight: 300;
}
.line-height-1 {
line-height: 1;
}
.line-height-2 {
line-height: 1.5;
}
.line-height-3 {
line-height: 2;
}
.container-fuild {
width: 100%;
padding-left: 1rem;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 0) {
.container {
max-width: 100%;
}
}
@media screen and (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media screen and (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media screen and (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media screen and (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media screen and (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
.row {
display: flex;
flex-wrap: wrap;
}
.col-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
@media screen and (min-width: 0) {
.col-xs-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-xs-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xs-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xs-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-xs-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-xs-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xs-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-xs-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-xs-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xs-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-xs-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-xs-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media screen and (min-width: 576px) {
.col-sm-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-sm-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-sm-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-sm-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-sm-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media screen and (min-width: 768px) {
.col-md-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-md-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-md-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-md-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-md-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media screen and (min-width: 992px) {
.col-lg-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-lg-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-lg-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-lg-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-lg-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media screen and (min-width: 1200px) {
.col-xl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-xl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-xl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-xl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-xl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media screen and (min-width: 1400px) {
.col-xxl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.col-xxl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xxl-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-xxl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.col-xxl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.col-xxl-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-xxl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.col-xxl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.col-xxl-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-xxl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.col-xxl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.col-xxl-12 {
flex: 0 0 100%;
max-width: 100%;
}
}
.offset-1 {
margin-left: 8.3333333333%;
}
.offset-2 {
margin-left: 16.6666666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.3333333333%;
}
.offset-5 {
margin-left: 41.6666666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
margin-left: 58.3333333333%;
}
.offset-8 {
margin-left: 66.6666666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
margin-left: 83.3333333333%;
}
.offset-11 {
margin-left: 91.6666666667%;
}
@media screen and (min-width: 0) {
.offset-xs-1 {
margin-left: 8.3333333333%;
}
.offset-xs-2 {
margin-left: 16.6666666667%;
}
.offset-xs-3 {
margin-left: 25%;
}
.offset-xs-4 {
margin-left: 33.3333333333%;
}
.offset-xs-5 {
margin-left: 41.6666666667%;
}
.offset-xs-6 {
margin-left: 50%;
}
.offset-xs-7 {
margin-left: 58.3333333333%;
}
.offset-xs-8 {
margin-left: 66.6666666667%;
}
.offset-xs-9 {
margin-left: 75%;
}
.offset-xs-10 {
margin-left: 83.3333333333%;
}
.offset-xs-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (min-width: 576px) {
.offset-sm-1 {
margin-left: 8.3333333333%;
}
.offset-sm-2 {
margin-left: 16.6666666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.3333333333%;
}
.offset-sm-5 {
margin-left: 41.6666666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.3333333333%;
}
.offset-sm-8 {
margin-left: 66.6666666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.3333333333%;
}
.offset-sm-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (min-width: 768px) {
.offset-md-1 {
margin-left: 8.3333333333%;
}
.offset-md-2 {
margin-left: 16.6666666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.3333333333%;
}
.offset-md-5 {
margin-left: 41.6666666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.3333333333%;
}
.offset-md-8 {
margin-left: 66.6666666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.3333333333%;
}
.offset-md-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (min-width: 992px) {
.offset-lg-1 {
margin-left: 8.3333333333%;
}
.offset-lg-2 {
margin-left: 16.6666666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.3333333333%;
}
.offset-lg-5 {
margin-left: 41.6666666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.3333333333%;
}
.offset-lg-8 {
margin-left: 66.6666666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.3333333333%;
}
.offset-lg-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (min-width: 1200px) {
.offset-xl-1 {
margin-left: 8.3333333333%;
}
.offset-xl-2 {
margin-left: 16.6666666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.3333333333%;
}
.offset-xl-5 {
margin-left: 41.6666666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.3333333333%;
}
.offset-xl-8 {
margin-left: 66.6666666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.3333333333%;
}
.offset-xl-11 {
margin-left: 91.6666666667%;
}
}
@media screen and (min-width: 1400px) {
.offset-xxl-1 {
margin-left: 8.3333333333%;
}
.offset-xxl-2 {
margin-left: 16.6666666667%;
}
.offset-xxl-3 {
margin-left: 25%;
}
.offset-xxl-4 {
margin-left: 33.3333333333%;
}
.offset-xxl-5 {
margin-left: 41.6666666667%;
}
.offset-xxl-6 {
margin-left: 50%;
}
.offset-xxl-7 {
margin-left: 58.3333333333%;
}
.offset-xxl-8 {
margin-left: 66.6666666667%;
}
.offset-xxl-9 {
margin-left: 75%;
}
.offset-xxl-10 {
margin-left: 83.3333333333%;
}
.offset-xxl-11 {
margin-left: 91.6666666667%;
}
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-end {
justify-content: flex-end;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
.align-items-start {
align-items: flex-start;
}
.align-items-end {
align-items: flex-end;
}
.align-items-center {
align-items: center;
}
.align-items-baseline {
align-items: baseline;
}
.align-items-stretch {
align-items: stretch;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-fill {
flex: 1 1 auto;
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-shrink-1 {
flex-shrink: 1;
}
.order-first {
order: -1;
}
.order-last {
order: 13;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
}
.order-6 {
order: 6;
}
.order-7 {
order: 7;
}
.order-8 {
order: 8;
}
.order-9 {
order: 9;
}
.order-10 {
order: 10;
}
.order-11 {
order: 11;
}
.order-12 {
order: 12;
}
header .container-fluid {
padding: 0;
}
header .container-fluid .header-top {
padding: 1rem;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
header .container-fluid .header-top .logo-area {
display: flex;
align-items: center;
gap: 1rem;
}
header .container-fluid .header-top .logo-area .logo {
height: 40px;
width: auto;
}
header .container-fluid .header-top .logo-area .shop-info {
font-size: 0.9rem;
color: #666;
}
header .container-fluid .header-top nav .nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
align-items: center;
}
header .container-fluid .header-top nav .nav-list .btn {
padding: 0.5rem .5rem !important;
}
header .container-fluid .header-top nav .nav-list li {
display: inline-block;
}
header .container-fluid .header-top nav .nav-list li a, header .container-fluid .header-top nav .nav-list li button {
display: flex;
align-items: center;
gap: 0.5rem;
color: #333;
text-decoration: none;
font-size: 16px;
padding: 0.5rem .5rem !important;
border-radius: 4px;
transition: all 0.3s ease;
}
header .container-fluid .header-top nav .nav-list li a:hover, header .container-fluid .header-top nav .nav-list li button:hover {
background-color: #f5f5f5;
}
header .container-fluid .header-top nav .nav-list li a i, header .container-fluid .header-top nav .nav-list li button i {
font-size: 1rem;
}
header .container-fluid .header-top nav .nav-list li .btn {
background: #036EB8;
border: none;
color: white;
padding: 12px 16px !important;
}
header .container-fluid .header-top nav .nav-list li .btn:hover {
background-color: #fff1f1;
}
.operation-list {
display: flex;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.operation-list li a, .operation-list li button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 4px;
border: 1px solid #ddd;
background: none;
color: #666;
text-decoration: none;
transition: all 0.3s ease;
}
.operation-list li a:hover, .operation-list li button:hover {
background: #f8f9fa;
color: #333;
}
.operation-list li a i, .operation-list li button i {
font-size: 1.2rem;
}
.operation-list li button {
color: #dc3545;
}
.operation-list li button:hover {
background: #dc3545;
color: #fff;
border-color: #dc3545;
}
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
transition: all 0.2s ease;
}
.badge-primary {
background-color: #036EB8;
}
.badge-primary:hover {
background-color: #025086;
}
.badge-secondary {
background-color: #6c757d;
}
.badge-secondary:hover {
background-color: #545b62;
}
.badge-success {
background-color: #28a745;
}
.badge-success:hover {
background-color: #1e7e34;
}
.badge-danger {
background-color: #dc3545;
}
.badge-danger:hover {
background-color: #bd2130;
}
.badge-warning {
background-color: #ffc107;
color: #000;
}
.badge-warning:hover {
background-color: #d39e00;
}
.badge-info {
background-color: #17a2b8;
}
.badge-info:hover {
background-color: #117a8b;
}
.badge-light {
background-color: #f8f9fa;
color: #000;
}
.badge-light:hover {
background-color: #dae0e5;
}
.badge-dark {
background-color: #343a40;
}
.badge-dark:hover {
background-color: #1d2124;
}
.badge-status--draft {
background-color: #6c757d;
}
.badge-status--published {
background-color: #28a745;
}
.badge-status--archived {
background-color: #dc3545;
}
.badge-sm {
padding: 0.25em 0.5em;
font-size: 0.65em;
}
.badge-lg {
padding: 0.5em 0.75em;
font-size: 0.85em;
}
.badge-top-right {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
.badge-top-left {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
.badge-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.notification-btn {
position: relative;
}
.notification-btn .notification-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
background-color: #ff4444;
border-radius: 10px;
color: white;
font-size: 10px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.notification-btn .notification-badge[data-count="99+"] {
min-width: 22px;
font-size: 9px;
}
.notification-btn-65 {
display: inline-flex;
justify-content: center;
align-items: center;
align-self: center;
position: relative;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
border: none;
border-radius: 50%;
background-color: #f2f2f2;
color: #aaaaaa;
text-decoration: none;
line-height: 1;
vertical-align: middle;
flex-shrink: 0;
transition: background-color 0.2s, color 0.2s;
}
.notification-btn-65:hover {
background-color: #e8e8e8;
color: #2589d0;
}
.notification-btn-65__icon {
width: 20px;
height: 20px;
fill: currentColor;
}
.notification-btn-65__badge {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -12%;
right: -12%;
min-width: 16px;
height: 16px;
padding: 0 3px;
border-radius: 50%;
background-color: #2589d0;
color: #fff;
font-size: 0.65rem;
font-weight: 600;
line-height: 1;
box-sizing: border-box;
}
.notification-btn-65__badge[hidden] {
display: none !important;
}
.nav-list li:has(.notification-btn-65) {
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.notification-modal.modal {
display: none;
background: transparent !important;
height: auto !important;
overflow: visible;
}
.notification-modal.modal.show {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.notification-modal .modal-backdrop {
background-color: rgba(15, 23, 42, 0.45) !important;
}
.notification-modal .notification-modal__dialog {
max-width: 440px;
width: calc(100% - 32px);
margin: 0;
}
.notification-modal .notification-modal__panel.modal-content {
display: flex;
flex-direction: column;
width: 100% !important;
height: auto !important;
max-height: min(88vh, 560px);
margin: 0;
overflow: hidden;
border: 1px solid rgba(3, 110, 184, 0.12);
border-radius: 20px;
background: #fff !important;
box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 24px 48px rgba(15, 23, 42, 0.14);
}
.notification-modal .notification-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 22px 18px;
border-bottom: 1px solid #e8eef4;
background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.notification-modal .notification-modal__header-text {
flex: 1;
min-width: 0;
}
.notification-modal .notification-modal__eyebrow {
margin: 0 0 6px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #036eb8;
}
.notification-modal .notification-modal__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.35;
color: #0f172a;
}
.notification-modal .notification-modal__title-icon {
font-size: 1.35rem;
color: #036eb8;
}
.notification-modal .notification-modal__lead {
margin: 8px 0 0;
font-size: 0.875rem;
line-height: 1.55;
color: #64748b;
}
.notification-modal .notification-modal__close {
flex-shrink: 0;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: #fff;
color: #64748b;
font-size: 1.25rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 0 1px #e2e8f0;
transition: background 0.15s ease, color 0.15s ease;
}
.notification-modal .notification-modal__close:hover {
background: #f1f5f9;
color: #0f172a;
}
.notification-modal .notification-modal__close:focus-visible {
outline: 2px solid #036eb8;
outline-offset: 2px;
}
.notification-modal .notification-modal__body.modal-body {
flex: 1 1 auto;
min-height: 0;
padding: 16px 22px 8px;
overflow-y: auto;
background: #fff;
}
.notification-modal .notification-modal__empty {
margin: 0;
padding: 12px 0 8px;
color: #64748b;
font-size: 0.9rem;
text-align: center;
}
.notification-modal .notification-modal__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.notification-modal .notification-modal__item {
margin: 0;
}
.notification-modal .notification-modal__card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid #e8eef4;
background: #f6f9fc;
color: inherit;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.notification-modal .notification-modal__card:hover {
background: #eef6fc;
border-color: #cfe3f3;
color: inherit;
box-shadow: 0 4px 12px rgba(3, 110, 184, 0.08);
}
.notification-modal .notification-modal__card--alert {
border-color: rgba(220, 53, 69, 0.25);
background: #fff5f5;
}
.notification-modal .notification-modal__card--alert:hover {
background: #ffecec;
border-color: rgba(220, 53, 69, 0.35);
}
.notification-modal .notification-modal__card--alert .notification-modal__card-icon {
background: #fee2e2;
color: #dc3545;
}
.notification-modal .notification-modal__card--alert .notification-modal__badge {
background: #dc3545;
color: #fff;
}
.notification-modal .notification-modal__card-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: #e8f4fc;
color: #036eb8;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
}
.notification-modal .notification-modal__card-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.notification-modal .notification-modal__card-label {
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: #0f172a;
}
.notification-modal .notification-modal__card-desc {
font-size: 0.8rem;
line-height: 1.5;
color: #64748b;
}
.notification-modal .notification-modal__card-meta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
}
.notification-modal .notification-modal__badge {
min-width: 2rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: #036eb8;
color: #fff;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.notification-modal .notification-modal__badge--zero {
background: #e2e8f0;
color: #64748b;
}
.notification-modal .notification-modal__arrow {
color: #94a3b8;
font-size: 1.1rem;
}
.notification-modal .notification-modal__footer {
flex-shrink: 0;
padding: 14px 22px 22px;
border-top: 1px solid #e8eef4;
background: #fafbfc;
}
.notification-modal .notification-modal__footer-btn {
width: 100%;
padding: 12px 16px;
border: 1px solid #cbd5e1;
border-radius: 12px;
background: #fff;
color: #334155;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.notification-modal .notification-modal__footer-btn:hover {
background: #f8fafc;
border-color: #94a3b8;
}
.notification-modal .notification-modal__footer-btn:focus-visible {
outline: 2px solid #036eb8;
outline-offset: 2px;
}
@media (max-width: 576px) {
.notification-modal .notification-modal__dialog {
width: calc(100% - 16px);
}
}
.trix-editor-container {
margin-bottom: 1rem;
}
.trix-editor-container .trix-content {
min-height: 200px;
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
background-color: #fff;
}
.trix-editor-container .trix-content:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.trix-toolbar {
margin-bottom: 0.5rem;
padding: 0.5rem;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
background-color: #f8f9fa;
}
.trix-toolbar .trix-button-group {
margin-right: 0.5rem;
}
.trix-toolbar .trix-button-group:last-child {
margin-right: 0;
}
.trix-toolbar .trix-button {
padding: 0.25rem 0.5rem;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
background-color: #fff;
}
.trix-toolbar .trix-button:hover {
background-color: #e9ecef;
}
.trix-toolbar .trix-button.trix-active {
background-color: #e9ecef;
}
.history_form {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.history_form th, .history_form td {
padding: 12px;
border-bottom: 1px solid #e0e0e0;
text-align: left;
}
.history_form th {
width: 120px;
font-weight: 600;
color: #333;
}
.history_form td {
width: calc(100% - 120px);
}
.other-lesson-container {
display: none;
margin-top: 8px;
}
.preview-container {
background: #f8f9fa;
border: 1px solid #dee2e6;
padding: 20px;
height: fit-content;
position: sticky;
top: 20px;
}
.preview-container h5 {
color: #495057;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #007bff;
}
.preview-content .preview-item {
margin-bottom: 15px;
padding: 10px;
background: white;
border-radius: 6px;
}
.preview-content .preview-item strong {
color: #495057;
display: block;
margin-bottom: 5px;
font-size: 0.9em;
}
.preview-content .preview-item span, .preview-content .preview-item div {
color: #212529;
font-size: 1em;
word-wrap: break-word;
}
.preview-content .preview-message {
min-height: 60px;
white-space: pre-wrap;
line-height: 1.5;
background: #f8f9fa;
padding: 8px;
border-radius: 4px;
border: 1px solid #e9ecef;
}
.line-preview-content .line-message-preview {
background: #f8f9fa;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
margin: 8px auto;
max-width: 90%;
}
.line-preview-content .line-message-header {
background: #00B900;
color: white;
padding: 8px 12px;
font-weight: 500;
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
border-radius: 8px 8px 0 0;
}
.line-preview-content .line-message-header i {
font-size: 14px;
}
.line-preview-content .line-message-body {
background: white;
padding: 12px;
border-radius: 0 0 20px 20px;
}
.line-preview-content .line-message-body .line-message-item {
margin-bottom: 8px;
display: flex;
align-items: flex-start;
gap: 6px;
}
.line-preview-content .line-message-body .line-message-item:last-child {
margin-bottom: 0;
}
.line-preview-content .line-message-body .line-label {
font-weight: 500;
color: #666;
min-width: 60px;
font-size: 11px;
}
.line-preview-content .line-message-body span {
color: #333;
font-size: 11px;
line-height: 1.3;
}
.line-preview-content .line-message-body .line-message-text {
color: #333;
font-size: 11px;
line-height: 1.4;
white-space: pre-wrap;
background: #f0f0f0;
padding: 6px 8px;
border-radius: 12px;
margin-top: 2px;
min-height: 30px;
word-break: break-word;
}
.line-preview-container {
background: #f8f9fa;
padding: 16px;
border: 1px solid #e9ecef;
}
.line-preview-container .line-preview-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: #333;
font-weight: 600;
font-size: 14px;
}
.line-preview-container .line-preview-header i {
color: #00B900;
}
@media (max-width: 768px) {
.preview-container {
position: static;
margin-top: 20px;
}
.history_form th {
width: 100%;
font-size: 0.9em;
background: none !important;
}
.history_form td {
width: calc(100% - 100px);
}
}
.lesson-content {
padding: 3rem 2rem;
}
.lesson-content h2 {
font-size: 1.5rem;
}
.lesson-content h2 span {
display: block;
font-size: 12px;
}
.lesson-content h5 i {
margin-right: 8px;
}
.lesson-content .detail-list li {
list-style-type: none;
padding-left: 28px;
font-size: 14px;
}
.lesson-content .detail-list li:first-of-type {
margin-bottom: 16px;
}
.step-form {
display: none;
border: 1px solid #ddd;
padding: 15px;
margin: 10px 0;
background-color: #f9f9f9;
}
.step-form.active {
display: block;
background-color: #e8f5e8;
border-color: #28a745;
}
.step-form::before {
content: "STEP" attr(data-step-number);
display: block;
font-weight: bold;
color: #666;
margin-bottom: 10px;
}
.pagination,
.pagination--single {
gap: 4px;
padding: 4px;
}
.pagination .page,
.pagination--single .page {
min-width: 40px;
height: 40px;
padding: 0 12px;
color: #4a5568;
font-weight: 600;
border: 1px solid transparent;
background: transparent;
transition: all 0.2s ease;
}
.pagination .page a,
.pagination .page span,
.pagination--single .page a,
.pagination--single .page span {
color: inherit;
text-decoration: none;
}
.pagination .page.current,
.pagination--single .page.current {
color: #fff;
background: #036EB8;
}
.pagination .page.disabled,
.pagination--single .page.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination .prev .page,
.pagination .next .page,
.pagination .first .page,
.pagination .last .page,
.pagination--single .prev .page,
.pagination--single .next .page,
.pagination--single .first .page,
.pagination--single .last .page {
font-size: 1.1rem;
min-width: 32px;
}
.lesson-evaluation-container {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 24px;
margin: 20px 0;
}
.evaluation-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 2px solid #e9ecef;
}
.evaluation-title {
color: #2c3e50;
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.overall-score {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
}
.evaluation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.evaluation-item {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
}
.evaluation-item-title {
color: #495057;
margin: 0 0 16px 0;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.evaluation-item-title i {
color: #007bff;
}
.evaluation-scores {
margin-bottom: 16px;
}
.score-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding: 8px 0;
}
.score-label {
font-weight: 500;
color: #495057;
}
.score-value {
font-weight: 600;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.9rem;
}
.score-excellent {
background: #d4edda;
color: #155724;
}
.score-good {
background: #d1ecf1;
color: #0c5460;
}
.score-average {
background: #fff3cd;
color: #856404;
}
.score-poor {
background: #f8d7da;
color: #721c24;
}
.score-very-poor {
background: #f5c6cb;
color: #721c24;
}
.step2-details,
.step3-details {
background: white;
padding: 12px;
border-radius: 6px;
margin-top: 12px;
}
.quiz-info,
.project-info {
margin: 0 0 8px 0;
font-size: 0.9rem;
color: #6c757d;
}
.project-feedback {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #dee2e6;
}
.project-feedback h5 {
margin: 0 0 8px 0;
color: #495057;
font-size: 0.9rem;
}
.project-feedback p {
margin: 0;
font-size: 0.85rem;
color: #6c757d;
line-height: 1.4;
}
.detailed-feedback,
.improvement-suggestions {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
}
.feedback-title,
.suggestions-title {
color: #495057;
margin: 0 0 16px 0;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.feedback-title i,
.suggestions-title i {
color: #28a745;
}
.suggestions-list {
list-style: none;
padding: 0;
margin: 0;
}
.suggestion-item {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
padding: 8px 0;
color: #495057;
}
.suggestion-item i {
color: #007bff;
margin-top: 2px;
}
.no-feedback,
.no-suggestions {
color: #6c757d;
font-style: italic;
margin: 0;
}
@media (max-width: 768px) {
.evaluation-header {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.evaluation-grid {
grid-template-columns: 1fr;
}
.lesson-evaluation-container {
padding: 16px;
}
}
#admin_dashboard main {
padding: 3rem 1rem;
}
#admin_dashboard ul,
#admin_dashboard ol {
padding: 0;
}
#admin_dashboard ul li,
#admin_dashboard ol li {
list-style-type: none;
}
#admin_dashboard .table {
margin: 3rem 0;
}
#admin_dashboard .table th,
#admin_dashboard .table td {
padding: 16px 8px;
}
#admin_dashboard .table th {
text-align: left;
}
#admin_dashboard .table td a {
text-decoration: none;
font-size: 20px;
margin: 0 4px;
color: #036EB8;
}
#admin_dashboard .table thead th {
background: #f2f2f2;
}
#admin_dashboard .shop {
border-collapse: collapse;
border: #ccc 1px solid;
}
#admin_dashboard .shop th,
#admin_dashboard .shop td {
border: #ccc 1px solid;
}
#admin_dashboard .shop th:first-of-type,
#admin_dashboard .shop td:first-of-type {
width: 15%;
}
#admin_dashboard .shop th:nth-of-type(2),
#admin_dashboard .shop td:nth-of-type(2) {
width: 15%;
}
#admin_dashboard .shop th:nth-of-type(3),
#admin_dashboard .shop td:nth-of-type(3) {
width: 25%;
}
#admin_dashboard .shop th:nth-of-type(4),
#admin_dashboard .shop td:nth-of-type(4) {
width: 20%;
}
#admin_dashboard .shop th:nth-of-type(5),
#admin_dashboard .shop td:nth-of-type(5) {
width: 15%;
}
#admin_dashboard .shop th:last-of-type,
#admin_dashboard .shop td:last-of-type {
width: 10%;
}
#admin_dashboard .title {
font-size: 18px;
color: #272727;
margin-bottom: 1rem;
}
#admin_dashboard .pageTitle {
font-size: 24px;
font-weight: 600;
color: #272727;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e9ecef;
}
#admin_dashboard .pageTitle i {
color: #036EB8;
margin-right: 8px;
}
#admin_dashboard .pageTitle span {
margin-left: 16px;
}
#admin_dashboard .pageTitle a {
color: #036EB8;
text-decoration: none;
font-size: 14px;
}
#admin_dashboard .admin_main-content {
padding: 2rem;
background: #f8f9fa;
min-height: calc(100vh - 200px);
}
#admin_dashboard .admin-system-desc {
font-size: 0.9375rem;
}
#admin_dashboard .admin-system-state-label {
font-size: 0.8125rem;
font-weight: 600;
}
#admin_dashboard .admin-system-badge {
font-size: 0.875rem;
padding: 0.35rem 0.75rem;
}
#admin_dashboard .admin-system-alert.alert-warning {
background: #fff8e6 !important;
}
#admin_dashboard .admin-system-alert.alert-info {
background: #e8f4fd !important;
}
#admin_dashboard .system-settings-card {
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}
#admin_dashboard .system-settings-card .card-header {
background: linear-gradient(135deg, #036EB8 0%, #0284c7 100%);
border: none;
padding: 1.25rem 1.5rem;
}
#admin_dashboard .system-settings-card .card-header h5 {
font-size: 1.25rem;
font-weight: 600;
}
#admin_dashboard .system-settings-card .card-body {
padding: 2rem;
}
#admin_dashboard .system-settings-card .disaster-mode-control {
background: #f8f9fa;
padding: 1.25rem;
border-radius: 10px;
border: 1px solid #e9ecef;
}
#admin_dashboard .system-settings-card .disaster-mode-control h6 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-container {
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-label {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:checked + .disaster-mode-switch-slider {
background-color: #dc3545;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:checked + .disaster-mode-switch-slider:before {
transform: translateX(60px);
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:checked ~ .disaster-mode-switch-text .switch-label-off {
opacity: 0;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:checked ~ .disaster-mode-switch-text .switch-label-on {
opacity: 1;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:not(:checked) ~ .disaster-mode-switch-text .switch-label-off {
opacity: 1;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:not(:checked) ~ .disaster-mode-switch-text .switch-label-on {
opacity: 0;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:disabled {
cursor: not-allowed;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-input:disabled + .disaster-mode-switch-slider {
opacity: 0.6;
cursor: not-allowed;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-slider {
position: relative;
width: 120px;
height: 60px;
background-color: #ccc;
border-radius: 60px;
transition: background-color 0.3s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-slider:before {
content: "";
position: absolute;
width: 52px;
height: 52px;
left: 4px;
top: 4px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-text {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
pointer-events: none;
font-weight: 600;
font-size: 1rem;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-text .switch-label-off,
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-text .switch-label-on {
transition: opacity 0.3s ease;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-text .switch-label-off {
padding-left: 8px;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-text .switch-label-on {
padding-right: 8px;
}
#admin_dashboard .system-settings-card .alert {
border-radius: 8px;
padding: 1.25rem 1.5rem;
margin-bottom: 0;
}
#admin_dashboard .system-settings-card .alert i {
flex-shrink: 0;
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn {
min-width: 250px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
border: none;
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn:active:not(:disabled) {
transform: translateY(0);
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
#admin_dashboard .box {
box-shadow: none;
}
#admin_dashboard .box .col-6 {
margin: 1rem 0;
padding: 0 1rem;
border-radius: 6px;
}
#admin_dashboard .box h6 {
font-size: 14px;
color: #666;
margin-bottom: 1rem;
padding: 8px 0;
}
#admin_dashboard .box .stats-top {
border-bottom: 1px solid #eee;
}
#admin_dashboard .box .item-count {
font-size: 24px;
text-align: center;
font-weight: 600;
}
#admin_dashboard .ad-info_conatnets .col-4:last-of-type .abmin_infoBox {
border-right: none;
}
#admin_dashboard .abmin_infoBox {
margin-top: 3rem;
padding: 1rem;
border-right: 1px solid #f2f2f2;
}
#admin_dashboard .abmin_infoBox .list-group {
border-bottom: 1px solid #f2f2f2;
padding: 1rem 0;
}
#admin_dashboard .abmin_infoBox .list-group small {
padding-left: 8px;
float: right;
}
#admin_dashboard .abmin_infoBox .list-group-item {
display: flex;
justify-content: space-between;
}
#admin_dashboard canvas {
min-height: 150px;
height: 200px !important;
}
#admin_dashboard table {
width: 100%;
table-layout: fixed;
}
#admin_dashboard .admin_course_contents {
padding: 0 2rem;
margin: 2rem 0;
}
#admin_dashboard .admin_course_contents .course-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f8f9fa;
}
#admin_dashboard .admin_course_contents .course-header h6 {
font-size: 1.25rem;
color: #2c3e50;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
#admin_dashboard .admin_course_contents .course-header h6 i {
color: #036EB8;
background: linear-gradient(135deg, #e8f4ff 0%, #d5edfe 100%);
padding: 0.75rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
}
#admin_dashboard .admin_course_contents .course-header .create_btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: #036EB8;
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
#admin_dashboard .admin_course_contents .course-header .create_btn i {
font-size: 1.1rem;
}
#admin_dashboard .admin_course_contents .course-header .create_btn:hover {
background: #035f9f;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
}
#admin_dashboard .admin_course_contents .table {
margin: 0;
}
#admin_dashboard .admin_course_contents .table thead th {
background: #f8f9fa;
color: #495057;
font-weight: 600;
padding: 1rem;
border-bottom: 2px solid #e9ecef;
}
#admin_dashboard .admin_course_contents .table tbody tr {
transition: all 0.2s ease;
}
#admin_dashboard .admin_course_contents .table tbody tr:hover {
background-color: #f8f9fa;
}
#admin_dashboard .admin_course_contents .table tbody tr td {
padding: 1rem;
vertical-align: middle;
color: #495057;
}
#admin_dashboard .admin_course_contents .table tbody tr td .lesson-link {
color: #2c3e50;
text-decoration: none;
display: inline-flex;
align-items: center;
font-size: 16px;
gap: 0.5rem;
transition: all 0.2s ease;
}
#admin_dashboard .admin_course_contents .table tbody tr td .lesson-link i {
font-size: 0.9rem;
opacity: 0.7;
}
#admin_dashboard .admin_course_contents .table tbody tr td .lesson-link:hover {
color: #036EB8;
}
#admin_dashboard .admin_course_contents .table tbody tr td .lesson-link:hover i {
opacity: 1;
}
#admin_dashboard .admin_course_contents .table tbody tr td .grade-badge {
display: inline-block;
padding: 0.5rem 0.75rem;
background: #e8f4ff;
color: #036EB8;
border-radius: 6px;
font-weight: 500;
font-size: 0.875rem;
}
#admin_dashboard .admin_course_contents .table tbody tr td .step-count {
display: inline-block;
padding: 0.5rem 0.75rem;
background: #f8f9fa;
color: #495057;
border-radius: 6px;
font-weight: 500;
font-size: 0.875rem;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons {
display: flex;
gap: 0.5rem;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons .btn {
padding: 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons .btn.btn-outline-primary {
color: #036EB8;
border-color: #036EB8;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons .btn.btn-outline-primary:hover {
background: #036EB8;
color: white;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons .btn.btn-outline-danger {
color: #dc3545;
border-color: #dc3545;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons .btn.btn-outline-danger:hover {
background: #dc3545;
color: white;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons .btn i {
font-size: 1rem;
}
#admin_dashboard .course_form, #admin_dashboard .shop_form {
margin: 2rem 0;
}
#admin_dashboard .course_form table, #admin_dashboard .shop_form table {
table-layout: fixed;
width: 60%;
}
#admin_dashboard .course_form table th,
#admin_dashboard .course_form table td, #admin_dashboard .shop_form table th,
#admin_dashboard .shop_form table td {
padding: 16px;
vertical-align: top;
}
#admin_dashboard .course_form table th, #admin_dashboard .shop_form table th {
width: 20%;
text-align: left;
font-weight: 600;
color: #272727;
}
#admin_dashboard .course_form table th.check, #admin_dashboard .shop_form table th.check {
padding-top: 24px;
}
#admin_dashboard .course_form table td, #admin_dashboard .shop_form table td {
width: 80%;
}
#admin_dashboard .course_form table td input,
#admin_dashboard .course_form table td textarea,
#admin_dashboard .course_form table td select, #admin_dashboard .shop_form table td input,
#admin_dashboard .shop_form table td textarea,
#admin_dashboard .shop_form table td select {
width: 100%;
height: 45px;
padding: 8px 16px;
background: #fafafa;
border: 1px solid #eee;
border-radius: 4px;
transition: all 0.3s ease;
}
#admin_dashboard .course_form table td input:focus,
#admin_dashboard .course_form table td textarea:focus,
#admin_dashboard .course_form table td select:focus, #admin_dashboard .shop_form table td input:focus,
#admin_dashboard .shop_form table td textarea:focus,
#admin_dashboard .shop_form table td select:focus {
outline: none;
border-color: #036EB8;
box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
}
#admin_dashboard .course_form table td .checkbox, #admin_dashboard .shop_form table td .checkbox {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
border: 2px solid #ddd;
border-radius: 4px;
background-color: white;
transition: all 0.3s ease;
}
#admin_dashboard .course_form table td .checkbox:checked, #admin_dashboard .shop_form table td .checkbox:checked {
background-color: #036EB8;
border-color: #036EB8;
}
#admin_dashboard .course_form table td .checkbox:checked::after, #admin_dashboard .shop_form table td .checkbox:checked::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 4px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
#admin_dashboard .course_form table td .checkbox:hover, #admin_dashboard .shop_form table td .checkbox:hover {
border-color: #036EB8;
}
#admin_dashboard .course_form table td .checkbox:focus, #admin_dashboard .shop_form table td .checkbox:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
}
#admin_dashboard .course_form table td .form-check-label, #admin_dashboard .shop_form table td .form-check-label {
display: inline-block;
vertical-align: middle;
font-size: 14px;
color: #666;
cursor: pointer;
}
#admin_dashboard .course_form table td .row, #admin_dashboard .shop_form table td .row {
margin: 0 -8px;
}
#admin_dashboard .course_form table td .row .col-3, #admin_dashboard .shop_form table td .row .col-3 {
padding: 0 8px;
}
#admin_dashboard .course_form table td .row .col-3 label, #admin_dashboard .shop_form table td .row .col-3 label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #666;
}
#admin_dashboard .course_form table td small, #admin_dashboard .shop_form table td small {
display: block;
margin-top: 8px;
font-size: 12px;
color: #666;
}
#admin_dashboard .course_form table td .url-copy-group, #admin_dashboard .shop_form table td .url-copy-group {
display: flex;
align-items: center;
gap: 8px;
}
#admin_dashboard .course_form table td .url-copy-group input, #admin_dashboard .shop_form table td .url-copy-group input {
flex: 1;
}
#admin_dashboard .course_form table td .url-copy-group .btn-icon, #admin_dashboard .shop_form table td .url-copy-group .btn-icon {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid #ddd;
border-radius: 4px;
color: #666;
transition: all 0.3s ease;
}
#admin_dashboard .course_form table td .url-copy-group .btn-icon i, #admin_dashboard .shop_form table td .url-copy-group .btn-icon i {
font-size: 18px;
}
#admin_dashboard .course_form table td .url-copy-group .btn-icon:hover, #admin_dashboard .shop_form table td .url-copy-group .btn-icon:hover {
background: #f5f5f5;
border-color: #036EB8;
color: #036EB8;
}
#admin_dashboard .course_form table td .url-copy-group .btn-icon:focus, #admin_dashboard .shop_form table td .url-copy-group .btn-icon:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
}
#admin_dashboard .course_form table td .shop-search-container .search-input-group, #admin_dashboard .shop_form table td .shop-search-container .search-input-group {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
#admin_dashboard .course_form table td .shop-search-container .search-input-group input, #admin_dashboard .shop_form table td .shop-search-container .search-input-group input {
flex: 1;
}
#admin_dashboard .course_form table td .shop-search-container .search-input-group .btn, #admin_dashboard .shop_form table td .shop-search-container .search-input-group .btn {
padding: 8px 16px;
display: flex;
align-items: center;
gap: 4px;
}
#admin_dashboard .course_form table td .shop-search-container .search-input-group .btn i, #admin_dashboard .shop_form table td .shop-search-container .search-input-group .btn i {
font-size: 16px;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper {
display: flex;
gap: 8px;
align-items: center;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .shop-select, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .shop-select {
flex: 1;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group {
display: flex;
gap: 8px;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn i, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn i {
font-size: 18px;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-danger, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-danger {
background-color: #dc3545;
border-color: #dc3545;
color: white;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-danger:hover, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-danger:hover {
background-color: #d32535;
border-color: #d32535;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-primary, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-primary {
background-color: #036EB8;
border-color: #036EB8;
color: white;
}
#admin_dashboard .course_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-primary:hover, #admin_dashboard .shop_form table td .shop-search-container .shop-select-container .select-box-wrapper .button-group .btn.btn-primary:hover {
background-color: #035f9f;
border-color: #035f9f;
}
#admin_dashboard .course_form .actions, #admin_dashboard .shop_form .actions {
margin-top: 2rem;
padding: 0;
list-style: none;
}
#admin_dashboard .course_form .actions li, #admin_dashboard .shop_form .actions li {
display: inline-block;
margin-right: 1rem;
}
#admin_dashboard .course_form .actions li .btn, #admin_dashboard .shop_form .actions li .btn {
font-weight: 600;
padding: 8px 24px;
border-radius: 4px;
transition: all 0.3s ease;
}
#admin_dashboard .course_form .actions li .btn.btn-primary, #admin_dashboard .shop_form .actions li .btn.btn-primary {
background-color: #036EB8;
border-color: #036EB8;
}
#admin_dashboard .course_form .actions li .btn.btn-primary:hover, #admin_dashboard .shop_form .actions li .btn.btn-primary:hover {
background-color: #035f9f;
border-color: #035f9f;
}
#admin_dashboard .course_form .actions li a, #admin_dashboard .shop_form .actions li a {
color: #036EB8;
text-decoration: none;
font-weight: 600;
padding: 8px 24px;
border: 1px solid #036EB8;
border-radius: 4px;
transition: all 0.3s ease;
}
#admin_dashboard .course_form .actions li a:hover, #admin_dashboard .shop_form .actions li a:hover {
background-color: #036EB8;
color: white;
}
#admin_dashboard .course_form #error_explanation, #admin_dashboard .shop_form #error_explanation {
margin-bottom: 2rem;
padding: 1rem;
background-color: #fff3f3;
border: 1px solid #ffcdd2;
border-radius: 4px;
}
#admin_dashboard .course_form #error_explanation h2, #admin_dashboard .shop_form #error_explanation h2 {
font-size: 16px;
color: #d32f2f;
margin-bottom: 1rem;
}
#admin_dashboard .course_form #error_explanation ul, #admin_dashboard .shop_form #error_explanation ul {
margin: 0;
padding-left: 1.5rem;
color: #d32f2f;
}
#admin_dashboard .modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1050;
}
#admin_dashboard .modal.show {
display: block;
}
#admin_dashboard .modal .modal-content {
border: none;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#admin_dashboard .modal .modal-header {
border-bottom: 1px solid #e9ecef;
padding: 1.25rem 1.5rem;
}
#admin_dashboard .modal .modal-header .modal-title {
display: flex;
align-items: center;
gap: 0.75rem;
color: #dc3545;
font-weight: 600;
}
#admin_dashboard .modal .modal-header .modal-title i {
font-size: 1.25rem;
}
#admin_dashboard .modal .modal-body {
padding: 0rem;
}
#admin_dashboard .modal .modal-body p {
margin-bottom: 0.5rem;
color: #495057;
}
#admin_dashboard .modal .modal-body p.text-danger {
color: #dc3545;
font-size: 0.875rem;
}
#admin_dashboard .modal .modal-footer {
border-top: 1px solid #e9ecef;
padding: 1.25rem 1.5rem;
}
#admin_dashboard .modal .modal-footer .btn {
padding: 0.75rem 1.5rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
#admin_dashboard .modal .modal-footer .btn.btn-danger {
background: #dc3545;
border-color: #dc3545;
}
#admin_dashboard .modal .modal-footer .btn.btn-danger:hover {
background: #d32535;
border-color: #d32535;
}
.line_contents .lineTitle {
font-size: 20px;
margin: 2rem 0;
}
.line_contents #setupGuide {
border: none;
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
background: #f8f9fa;
}
.line_contents #setupGuide .alert-heading {
color: #036EB8;
font-size: 16px;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 8px;
}
.line_contents #setupGuide .alert-heading::before {
content: '\f0b1';
font-family: 'Line Awesome Free';
font-weight: 900;
font-size: 18px;
}
.line_contents #setupGuide ol {
margin: 0;
padding-left: 1.5rem;
color: #666;
}
.line_contents #setupGuide ol li {
position: relative;
padding: 0.5rem 0;
font-size: 14px;
line-height: 1.5;
}
.line_contents #setupGuide ol li::marker {
color: #036EB8;
font-weight: bold;
}
.line_contents #setupGuide ol li:not(:last-child) {
margin-bottom: 0.5rem;
}
.form-container {
padding: 2rem;
}
.form-section {
background: #ffffff;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #036EB8, #0288d1);
opacity: 0;
transition: opacity 0.3s ease;
}
.form-section .section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f8f9fa;
}
.form-section .section-header i {
font-size: 1.5rem;
color: #036EB8;
background: linear-gradient(135deg, #e8f4ff 0%, #d5edfe 100%);
padding: 0.75rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
}
.form-section .section-header h5 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
position: relative;
padding-left: 1rem;
}
.form-section .section-header h5::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 1.2rem;
background: linear-gradient(to bottom, #036EB8, #0288d1);
border-radius: 2px;
}
.form-group {
margin-bottom: 1.5rem;
position: relative;
}
.form-group:last-child {
margin-bottom: 0;
}
.form-label {
display: block;
font-weight: 500;
color: #495057;
margin-bottom: 0.5rem;
font-size: 0.95rem;
position: relative;
padding-left: 0.5rem;
}
.form-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 1rem;
background: #036EB8;
border-radius: 2px;
}
.form-control, .form-select {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.95rem;
border: 1px solid #dee2e6;
border-radius: 8px;
background-color: #ffffff;
transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
border-color: #036EB8;
outline: none;
background-color: #ffffff;
}
.form-control::placeholder, .form-select::placeholder {
color: #adb5bd;
}
.form-text {
display: block;
margin-top: 0.5rem;
font-size: 0.85rem;
color: #6c757d;
padding-left: 0.5rem;
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e9ecef;
background: linear-gradient(to right, transparent, rgba(3, 110, 184, 0.05), transparent);
}
.form-actions .btn {
min-width: 120px;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
.form-actions .btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.form-actions .btn:hover::before {
transform: translateX(100%);
}
.form-actions .btn.btn-primary {
background: linear-gradient(135deg, #036EB8, #0288d1);
border: none;
color: white;
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.2);
}
.form-actions .btn.btn-primary:hover {
background: linear-gradient(135deg, #0288d1, #036EB8);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(3, 110, 184, 0.3);
}
.form-actions .btn.btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.2);
}
.form-actions .btn.btn-primary::after {
content: '\f00c';
font-family: 'Line Awesome Free';
font-weight: 900;
font-size: 1rem;
}
.form-actions .btn.btn-outline-secondary {
background: transparent;
border: 2px solid #dee2e6;
color: #6c757d;
font-weight: 500;
}
.form-actions .btn.btn-outline-secondary:hover {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-actions .btn.btn-outline-secondary:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-actions .btn.btn-outline-secondary::after {
content: '\f060';
font-family: 'Line Awesome Free';
font-weight: 900;
font-size: 1rem;
}
.alert {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
border-radius: 8px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.alert.alert-danger {
background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
border: 1px solid #feb2b2;
color: #c53030;
}
.alert.alert-danger .alert-icon {
color: #c53030;
font-size: 1.5rem;
background: rgba(254, 178, 178, 0.2);
padding: 0.75rem;
border-radius: 8px;
}
.alert.alert-danger .alert-content h4 {
color: #c53030;
font-size: 1.1rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.alert.alert-danger .alert-content ul {
margin: 0;
padding-left: 1.5rem;
font-size: 0.95rem;
}
.billing-container {
padding: 2rem;
min-height: 100vh;
}
.billing-header {
margin-bottom: 2rem;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
}
.billing-header .header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.billing-header .header-content h6 {
font-size: 1.25rem;
color: #2c3e50;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.billing-header .header-content h6 i {
color: #036EB8;
background: linear-gradient(135deg, #e8f4ff 0%, #d5edfe 100%);
padding: 0.75rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
}
.billing-header .header-content .header-stats {
display: flex;
gap: 2rem;
}
.billing-header .header-content .header-stats .stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.billing-header .header-content .header-stats .stat-item .stat-label {
font-size: 0.875rem;
color: #6c757d;
}
.billing-header .header-content .header-stats .stat-item .stat-value {
font-size: 1.5rem;
font-weight: 600;
color: #2c3e50;
}
.billing-header .header-content .header-stats .stat-item .stat-value.warning {
color: #ffc107;
}
.billing-header .header-content .header-stats .stat-item .stat-value.success {
color: #28a745;
}
.billing-card {
overflow: hidden;
}
.billing-card .nav-tabs {
border-bottom: 1px solid #e9ecef;
padding: 0 1.5rem;
margin: 0;
}
.billing-card .nav-tabs .nav-item {
margin-bottom: -1px;
}
.billing-card .nav-tabs .nav-item .nav-link {
border: none;
padding: 1rem 1.5rem;
color: #6c757d;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.billing-card .nav-tabs .nav-item .nav-link i {
font-size: 1rem;
}
.billing-card .nav-tabs .nav-item .nav-link:hover {
color: #036EB8;
border: none;
background: transparent;
}
.billing-card .nav-tabs .nav-item .nav-link.active {
color: #036EB8;
background: transparent;
border: none;
border-bottom: 2px solid #036EB8;
}
.billing-card .tab-content {
padding: 1.5rem;
}
.billing-card .tab-content .table {
margin: 0;
}
.billing-card .tab-content .table thead th {
background: #f8f9fa;
color: #495057;
font-weight: 600;
padding: 1rem;
border-bottom: 2px solid #e9ecef;
}
.billing-card .tab-content .table tbody tr {
transition: all 0.2s ease;
}
.billing-card .tab-content .table tbody tr:hover {
background-color: #f8f9fa;
}
.billing-card .tab-content .table tbody tr td {
padding: 1rem;
vertical-align: middle;
color: #495057;
}
.billing-card .tab-content .table tbody tr td.amount {
font-weight: 600;
color: #2c3e50;
}
.billing-card .tab-content .table tbody tr td .status-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
.billing-card .tab-content .table tbody tr td .status-container .badge {
padding: 0.5rem 0.75rem;
font-weight: 500;
font-size: 0.875rem;
}
.billing-card .tab-content .table tbody tr td .status-container .status-form .status-select {
width: auto;
min-width: 120px;
padding: 0.25rem 2rem 0.25rem 0.75rem;
font-size: 0.875rem;
border-radius: 4px;
border: 1px solid #dee2e6;
background-color: #ffffff;
cursor: pointer;
}
.billing-card .tab-content .table tbody tr td .status-container .status-form .status-select:focus {
border-color: #036EB8;
box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
}
.billing-card .tab-content .table tbody tr td .btn-info {
background: transparent;
border: none;
color: #036EB8;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.2s ease;
}
.billing-card .tab-content .table tbody tr td .btn-info:hover {
background: rgba(3, 110, 184, 0.1);
color: #036EB8;
}
.billing-card .tab-content .table tbody tr td .btn-info i {
font-size: 1rem;
}
.toast {
background: #ffffff;
border: none;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.toast .toast-header {
background: transparent;
border-bottom: 1px solid #e9ecef;
padding: 0.75rem 1rem;
}
.toast .toast-header i {
font-size: 1.25rem;
}
.toast .toast-header .btn-close {
padding: 0.75rem;
margin: -0.75rem -0.75rem -0.75rem auto;
}
.toast .toast-body {
padding: 1rem;
color: #495057;
}
#statusModal {
display: none;
}
#statusModal.show {
display: block;
}
#statusModal .modal-dialog {
max-width: 400px;
}
#statusModal .modal-content {
border: none;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
animation: modalFadeIn 0.3s ease;
}
#statusModal .modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 1rem 1.5rem;
}
#statusModal .modal-header .modal-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
display: flex;
align-items: center;
}
#statusModal .modal-header .modal-title i {
font-size: 1.25rem;
}
#statusModal .modal-header .btn-close {
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
#statusModal .modal-body {
padding: 1.5rem;
text-align: center;
font-size: 1rem;
color: #2c3e50;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.announcements-container {
min-height: 100vh;
}
.announcements-container h6 span a {
background: none;
border: none;
color: #036EB8;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
}
.announcements-container h6 span a::before {
display: none;
}
.announcements-header {
margin-bottom: 2rem;
padding: 1.5rem;
}
.announcements-header .header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.announcements-header .header-content h6 {
font-size: 1.25rem;
color: #2c3e50;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.announcements-header .header-content h6 i {
color: #036EB8;
background: linear-gradient(135deg, #e8f4ff 0%, #d5edfe 100%);
padding: 0.75rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
}
.announcements-header .header-content .header-stats {
display: flex;
gap: 2rem;
}
.announcements-header .header-content .header-stats .stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.announcements-header .header-content .header-stats .stat-item .stat-label {
font-size: 0.875rem;
color: #6c757d;
}
.announcements-header .header-content .header-stats .stat-item .stat-value {
font-size: 1.5rem;
font-weight: 600;
color: #2c3e50;
}
.announcements-card {
overflow: hidden;
}
.announcement-form {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
padding: 2rem;
}
.announcement-form .form-group {
margin-bottom: 1.5rem;
}
.announcement-form .form-group label {
font-weight: 500;
color: #495057;
margin-bottom: 0.5rem;
}
.announcement-form .form-group .form-control, .announcement-form .form-group .form-select {
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 0.75rem 1rem;
transition: all 0.2s ease;
}
.announcement-form .form-group .form-control:focus, .announcement-form .form-group .form-select:focus {
border-color: #036EB8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
}
.announcement-form .form-group textarea.form-control {
min-height: 150px;
}
.announcement-form .form-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e9ecef;
}
.announcement-form .form-actions .btn {
min-width: 120px;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
}
.announcement-form .form-actions .btn.btn-primary {
background: #036EB8;
border-color: #036EB8;
}
.announcement-form .form-actions .btn.btn-primary:hover {
background: #035f9f;
border-color: #035f9f;
}
.announcement-form .form-actions .btn.btn-secondary {
background: #6c757d;
border-color: #6c757d;
}
.announcement-form .form-actions .btn.btn-secondary:hover {
background: #60686f;
border-color: #60686f;
}
.lesson_detileBox {
padding: 0;
position: relative;
}
.lesson_detileBox h6 {
font-size: 1.25rem;
color: #2c3e50;
margin-bottom: .5rem;
}
.lesson_detileBox h6 i {
margin-right: 8px;
}
.lesson_detileBox h6 span .edit_btn {
color: #036EB8;
text-decoration: none;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
}
.lesson_detileBox h6 span .edit_btn:hover {
background: rgba(3, 110, 184, 0.1);
transform: translateY(-2px);
}
.lesson_detileBox h6 span .edit_btn i {
font-size: 1.1rem;
}
.lesson_detileBox h6 .delete_btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
color: #dc3545;
text-decoration: none;
padding: 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
}
.lesson_detileBox h6 .delete_btn:hover {
background: rgba(220, 53, 69, 0.1);
transform: translateY(-2px);
}
.lesson_detileBox h6 .delete_btn i {
font-size: 1.1rem;
}
.lesson_detileBox ol {
margin: 0;
padding: 0;
list-style: none;
}
.lesson_detileBox ol li {
padding: 1rem 0;
border-bottom: 1px solid #f8f9fa;
display: flex;
align-items: center;
gap: 1rem;
}
.lesson_detileBox ol li:last-child {
border-bottom: none;
}
.lesson_detileBox ol li p {
line-height: 2;
letter-spacing: .03em;
margin-top: 1rem;
}
.lesson_detileBox ol li strong {
color: #495057;
font-weight: 600;
}
.lesson_detileBox ol li span {
color: #495057;
}
.lesson_detileBox ol li a {
color: #036EB8;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #f8f9fa;
border-radius: 6px;
transition: all 0.2s ease;
}
.lesson_detileBox ol li a:hover {
background: #e9ecef;
transform: translateY(-2px);
}
.lesson_detileBox ol li a i {
font-size: 0.9rem;
}
#admin_dashboard .lesson-show-container {
width: 100%;
max-width: 100%;
}
#admin_dashboard .lesson-show-container .lesson-content,
#admin_dashboard .lesson-show-container .lesson_detileBox {
width: 100%;
max-width: 100%;
display: block !important;
}
.stepTitle {
font-size: 1.25rem;
font-weight: 600;
}
.stepTitle i {
color: #036EB8;
margin-right: 0.75rem;
}
.stepTitle span .add-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
color: #036EB8;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.stepTitle span .add-link:hover {
background: #035f9f;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
}
.stepTitle span .add-link i {
font-size: 1.1rem;
color: white;
margin-right: 0;
}
#sortable-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
#sortable-steps .lesson_listbox {
background: #f8f8f8;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
padding-top: 2rem;
margin-top: 2rem;
height: 100%;
}
#sortable-steps .lesson_listbox:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#sortable-steps .lesson_listbox .step-content {
height: 100%;
display: flex;
flex-direction: column;
}
#sortable-steps .lesson_listbox .step-content a {
text-decoration: none;
color: inherit;
flex: 1;
}
#sortable-steps .lesson_listbox .step-content a h5 {
font-size: 1.1rem;
color: #2c3e50;
margin-bottom: 0.75rem;
gap: 0.75rem;
}
#sortable-steps .lesson_listbox .step-content a h5 span {
color: #036EB8;
font-weight: 600;
display: block;
font-size: 70%;
padding-bottom: 8px;
}
#sortable-steps .lesson_listbox .step-content a h5 i {
font-size: 0.9rem;
color: #6c757d;
transition: all 0.2s ease;
}
#sortable-steps .lesson_listbox .step-content a h5:hover i {
color: #036EB8;
}
#sortable-steps .lesson_listbox .step-content a p {
color: #6c757d;
margin: 0;
font-size: 0.8rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#sortable-steps .lesson_listbox .step-content ul {
display: flex;
gap: 0.5rem;
margin: 1rem 0 0;
padding: 0;
list-style: none;
}
#sortable-steps .lesson_listbox .step-content ul li .edit_btn, #sortable-steps .lesson_listbox .step-content ul li .delete_btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
transition: all 0.2s ease;
}
#sortable-steps .lesson_listbox .step-content ul li .edit_btn i, #sortable-steps .lesson_listbox .step-content ul li .delete_btn i {
font-size: 1rem;
}
#sortable-steps .lesson_listbox .step-content ul li .edit_btn {
color: #036EB8;
background: rgba(3, 110, 184, 0.1);
}
#sortable-steps .lesson_listbox .step-content ul li .edit_btn:hover {
background: rgba(3, 110, 184, 0.2);
transform: translateY(-2px);
}
#sortable-steps .lesson_listbox .step-content ul li .delete_btn {
color: #dc3545;
background: rgba(220, 53, 69, 0.1);
border: none;
cursor: pointer;
}
#sortable-steps .lesson_listbox .step-content ul li .delete_btn:hover {
background: rgba(220, 53, 69, 0.2);
transform: translateY(-2px);
}
@media (max-width: 1200px) {
#sortable-steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
#sortable-steps {
grid-template-columns: 1fr;
}
}
.mt-4 .btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: #6c757d;
border: none;
border-radius: 8px;
color: white;
font-weight: 500;
transition: all 0.3s ease;
}
.mt-4 .btn-secondary:hover {
background: #60686f;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
}
.mt-4 .btn-secondary i {
font-size: 1.1rem;
}
.admin-container {
display: flex;
min-height: 100vh;
}
.admin-sidebar {
width: 250px;
background: #2c3e50;
color: white;
padding: 1rem 0;
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 1000;
}
.admin-sidebar .sidebar-header {
padding: 0 1.5rem;
margin-bottom: 2rem;
}
.admin-sidebar .sidebar-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
}
.admin-sidebar .sidebar-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.admin-sidebar .sidebar-nav ul li .nav-link {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
}
.admin-sidebar .sidebar-nav ul li .nav-link i {
font-size: 1.25rem;
margin-right: 0.75rem;
width: 24px;
text-align: center;
}
.admin-sidebar .sidebar-nav ul li .nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.admin-sidebar .sidebar-nav ul li .nav-link.active {
background: #036EB8;
color: white;
}
.admin-main {
background: #f8f9fa;
min-height: 100vh;
}
.admin-header {
background: white;
padding: 1rem 1.5rem;
border-bottom: 1px solid #e9ecef;
margin-bottom: 2rem;
}
.admin-header .breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.9rem;
}
.admin-header .breadcrumb a {
color: #036EB8;
text-decoration: none;
}
.admin-header .breadcrumb a:hover {
text-decoration: underline;
}
.admin-header .breadcrumb i {
color: #6c757d;
font-size: 0.8rem;
}
.admin-header .breadcrumb .active {
color: #6c757d;
}
.admin-content {
padding: 0 2rem 2rem;
}
#step_page {
padding: 3rem 0;
}
#step_page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
#step_page .container h4 {
color: #2c3e50;
margin: 2rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
#step_page .container h4 i {
color: #036EB8;
}
.test_formContents {
background: white;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
padding: 2rem;
margin-top: 2rem;
}
.test_formContents h5 {
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 600;
}
.test_formContents p {
color: #495057;
margin-bottom: 1.5rem;
}
.test_formContents .form-check {
margin-bottom: 1rem;
}
.test_formContents .form-check .form-check-input {
margin-right: 0.5rem;
}
.test_formContents .form-check .form-check-label {
color: #495057;
}
.test_formContents .submit_btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: #036EB8;
color: white;
border: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.test_formContents .submit_btn:hover {
background: #035f9f;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
}
.step_description {
background: white;
padding: 3rem 1rem;
height: 100%;
position: relative;
}
.step_description h2 {
color: #2c3e50;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.step_description h2 i {
color: #036EB8;
}
.step_description p {
color: #495057;
margin-bottom: 1.5rem;
font-size: 14px;
line-height: 1.75;
letter-spacing: .03em;
}
.step_description p span {
font-weight: 600;
color: #2c3e50;
}
.step_description .curriculum_btn {
display: block;
width: 90%;
margin: 0 auto;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: #036EB8;
color: white;
border: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
margin-bottom: 1rem;
}
.step_description .curriculum_btn:hover {
background: #036EB8;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
}
.step_description .curriculum_btn i {
font-size: 1.1rem;
}
.step_description .btn {
position: absolute;
bottom: 10px;
left: 50%;
width: 90%;
transform: translateX(-50%);
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
background: none;
color: #036EB8;
font-weight: 600;
transition: all 0.3s ease;
}
.step_description .btn i {
font-size: 1.1rem;
}
#editor-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
overflow: hidden;
height: 90vh;
}
#editor-container #xcratch-editor {
width: 100%;
height: 100%;
border: none;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group .form-label {
color: #2c3e50;
font-weight: 500;
margin-bottom: 0.5rem;
}
.form-group .form-control {
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 0.75rem 1rem;
transition: all 0.2s ease;
}
.form-group .form-control:focus {
border-color: #036EB8;
box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.form-group .form-control:disabled {
background-color: #f8f9fa;
cursor: not-allowed;
}
#quiz-section .card {
border: none;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 1.5rem;
}
#quiz-section .card .card-body {
padding: 1.5rem;
}
#quiz-section .card .card-title {
color: #2c3e50;
font-weight: 600;
margin-bottom: 1rem;
}
#quiz-section .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
#quiz-section .btn i {
font-size: 1.1rem;
}
.dropzone-container {
margin: 1.5rem 0;
}
.dropzone {
border: 2px dashed #dee2e6;
border-radius: 12px;
padding: 2rem;
text-align: center;
background: #f8f9fa;
transition: all 0.3s ease;
}
.dropzone.dragover {
border-color: #036EB8;
background: rgba(3, 110, 184, 0.1);
}
.dropzone .dropzone-content {
color: #6c757d;
}
.dropzone .dropzone-content i {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #036EB8;
}
.dropzone .dropzone-content p {
margin: 0.5rem 0;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.form-actions .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.form-actions .btn i {
font-size: 1.1rem;
}
.course_indexBox .col-3 {
max-width: calc(25% - 16px);
margin: 0 auto;
}
.course_indexBox .courseBox {
height: 100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-radius: 12px;
padding: 2rem 1rem;
}
.course_indexBox .courseBox h5 {
margin: 1rem 0 2rem !important;
}
.course-info {
margin-bottom: .5rem;
}
.course-info a {
color: #272727 !important;
}
.lesson-title i {
background: #036EB8 !important;
padding: 8px 8px;
border-radius: 30px;
color: white !important;
margin-right: 8px !important;
}
.admin-steps-content {
padding: 0;
}
.admin-steps-content .admin-step-show {
max-width: 960px;
margin: 0 auto;
}
.admin-steps-content .admin-step-show__title {
margin: 0 0 0.5rem;
color: #212529;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.35;
}
.admin-steps-content .admin-step-show__desc {
margin: 0 0 1.5rem;
color: #343a40;
font-size: 1.05rem;
line-height: 1.6;
}
.admin-steps-content .admin-step-show__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
padding-top: 1rem;
border-top: 1px solid #dee2e6;
}
.admin-steps-content .admin-step-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.1rem;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
border: 1px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-steps-content .admin-step-btn--secondary {
background: #e9ecef;
color: #212529 !important;
border-color: #ced4da;
}
.admin-steps-content .admin-step-btn--secondary:hover {
background: #dee2e6;
color: #000 !important;
}
.admin-steps-content .admin-step-btn--primary {
background: #0d6efd;
color: #fff !important;
border-color: #0d6efd;
}
.admin-steps-content .admin-step-btn--primary:hover {
background: #0b5ed7;
border-color: #0a58ca;
color: #fff !important;
}
.admin-steps-content .admin-step-panel {
margin-bottom: 1.5rem;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.admin-steps-content .admin-step-panel__head {
padding: 0.75rem 1.125rem;
background: #f1f3f5;
border-bottom: 1px solid #dee2e6;
}
.admin-steps-content .admin-step-panel__title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #212529;
}
.admin-steps-content .admin-step-panel__title i {
margin-right: 0.4rem;
color: #495057;
}
.admin-steps-content .admin-step-panel__body {
padding: 1.125rem 1.25rem;
}
.admin-steps-content .admin-step-panel__body--flush {
padding: 0;
}
.admin-steps-content .admin-step-task {
margin-bottom: 1rem;
padding: 1rem 1.125rem;
border: 1px solid #dee2e6;
border-radius: 10px;
background: #fafbfc;
}
.admin-steps-content .admin-step-task:last-child {
margin-bottom: 0;
}
.admin-steps-content .admin-step-task__title {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 700;
color: #212529;
}
.admin-steps-content .admin-step-task__body {
margin: 0;
color: #343a40;
line-height: 1.55;
}
.admin-steps-content .admin-step-msg {
padding: 0.75rem 1rem;
border-radius: 10px;
margin-bottom: 1rem;
line-height: 1.55;
font-size: 0.9375rem;
}
.admin-steps-content .admin-step-msg:last-child {
margin-bottom: 0;
}
.admin-steps-content .admin-step-msg i {
margin-right: 0.35rem;
}
.admin-steps-content .admin-step-msg--info {
background: #e7f1ff;
border: 1px solid #9ec5fe;
color: #052c65;
}
.admin-steps-content .admin-step-msg--warning {
background: #fff3cd;
border: 1px solid #e0c36a;
color: #664d03;
}
.admin-steps-content .admin-step-msg__link {
font-weight: 700;
text-decoration: underline;
color: inherit;
}
.admin-steps-content .admin-step-quiz-preview {
margin-bottom: 1.5rem;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
.admin-steps-content .admin-step-quiz-preview__header {
padding: 0.75rem 1.125rem;
background: #0d6efd;
color: #fff;
}
.admin-steps-content .admin-step-quiz-preview__title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
color: #fff !important;
}
.admin-steps-content .admin-step-quiz-preview__title i {
opacity: 0.95;
font-size: 1.05rem;
}
.admin-steps-content .admin-step-quiz-preview__body {
padding: 1.125rem 1.25rem;
background: #f1f5f9;
}
.admin-steps-content .admin-step-quiz-question {
margin-bottom: 1rem;
padding: 1rem 1.125rem;
background: #fff;
border: 1px solid #ced4da;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.admin-steps-content .admin-step-quiz-question:last-child {
margin-bottom: 0;
}
.admin-steps-content .admin-step-quiz-question__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem 1rem;
margin-bottom: 0.65rem;
}
.admin-steps-content .admin-step-quiz-question__num {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #212529;
}
.admin-steps-content .admin-step-quiz-question__tag {
display: inline-block;
padding: 0.2rem 0.55rem;
font-size: 0.75rem;
font-weight: 600;
color: #fff;
background: #6c757d;
border-radius: 999px;
line-height: 1.2;
}
.admin-steps-content .admin-step-quiz-qtext {
margin: 0 0 1rem;
color: #212529;
font-size: 1.0625rem;
line-height: 1.65;
font-weight: 500;
}
.admin-steps-content .admin-step-quiz-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.admin-steps-content .admin-step-quiz-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.125rem;
border: 1px solid #dee2e6;
border-radius: 10px;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-steps-content .admin-step-quiz-option:hover {
border-color: #86b7fe;
box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
}
.admin-steps-content .admin-step-quiz-option--correct {
border-color: #0d6efd;
border-width: 2px;
background: linear-gradient(90deg, #eef6ff 0%, #fff 60%);
box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.12);
}
.admin-steps-content .admin-step-quiz-option--correct:hover {
border-color: #0a58ca;
box-shadow: 0 2px 10px rgba(13, 110, 253, 0.16);
}
.admin-steps-content .admin-step-quiz-option--correct .admin-step-quiz-option-letter {
color: #0a58ca;
font-weight: 800;
}
.admin-steps-content .admin-step-quiz-option--correct .admin-step-quiz-option__input:checked:disabled {
accent-color: #0d6efd;
opacity: 1;
}
.admin-steps-content .admin-step-quiz-option__label {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
min-width: 0;
margin: 0;
cursor: default;
}
.admin-steps-content .admin-step-quiz-option__input {
width: 1.25rem;
height: 1.25rem;
margin: 0;
flex-shrink: 0;
accent-color: #495057;
cursor: default;
}
.admin-steps-content .admin-step-quiz-option__input:disabled {
opacity: 0.95;
cursor: default;
}
.admin-steps-content .admin-step-quiz-option__text {
flex: 1;
color: #1a1a1a;
font-size: 1rem;
line-height: 1.5;
}
.admin-steps-content .admin-step-quiz-option-letter {
font-weight: 700;
color: #0d6efd;
margin-right: 0.35rem;
}
.admin-steps-content .admin-step-quiz-option-mark {
margin-left: auto;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.7rem;
background: #0d6efd;
color: #fff !important;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 999px;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(13, 110, 253, 0.35);
}
.admin-steps-content .admin-step-quiz-option-mark i {
font-size: 0.875rem;
}
.admin-steps-content .admin-step-quiz-answer-key {
margin-top: 1rem;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, #e7f1ff 0%, #d3e8ff 100%);
border: 2px solid #0d6efd;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.12);
}
.admin-steps-content .admin-step-quiz-answer-key__main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
.admin-steps-content .admin-step-quiz-answer-key__tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
background: #0d6efd;
color: #fff !important;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.02em;
border-radius: 999px;
flex-shrink: 0;
}
.admin-steps-content .admin-step-quiz-answer-key__tag i {
font-size: 1rem;
opacity: 0.95;
}
.admin-steps-content .admin-step-quiz-answer-key__letter {
display: inline-flex;
align-items: center;
justify-content: center;
color: #0d6efd !important;
font-size: 1.5rem;
font-weight: 800;
line-height: 1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
.admin-steps-content .admin-step-quiz-answer-key__value {
flex: 1;
min-width: 12rem;
color: #052c65 !important;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.5;
}
.admin-steps-content .admin-step-quiz-answer-key__value--fallback {
color: #495057 !important;
font-weight: 500;
font-size: 1rem;
}
.admin-steps-content .admin-step-quiz-answer-key__hint {
margin: 0;
color: #495057 !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
padding-top: 0.35rem;
border-top: 1px solid rgba(13, 110, 253, 0.2);
}
.admin-quiz-edit-page {
max-width: 960px;
margin: 0 auto;
padding: 0 0.25rem;
}
.admin-quiz-edit-page__head {
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #dee2e6;
}
.admin-quiz-edit-page__title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
color: #212529;
display: flex;
align-items: center;
gap: 0.5rem;
}
.admin-quiz-edit-page__title i {
color: #0d6efd;
}
.admin-quiz-edit-page__main {
margin-top: 0.5rem;
}
.admin-quiz-settings__panel {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 14px;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.admin-quiz-settings__panel-head {
padding: 0.9rem 1.25rem;
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: #fff;
}
.admin-quiz-settings__panel-title {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
letter-spacing: 0.02em;
}
.admin-quiz-settings__panel-title i {
opacity: 0.95;
}
.admin-quiz-settings__panel-body {
padding: 1.35rem 1.35rem 1.5rem;
background: #f8fafc;
}
.admin-quiz-settings__form {
margin: 0;
}
.admin-quiz-settings__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
.admin-quiz-settings__grid {
grid-template-columns: 1fr;
}
}
.admin-quiz-settings__field {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.admin-quiz-settings__field--full {
margin-bottom: 1.25rem;
}
.admin-quiz-settings__label {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 700;
color: #212529;
}
.admin-quiz-settings__label-bar {
width: 4px;
height: 1.1em;
border-radius: 2px;
background: #0d6efd;
flex-shrink: 0;
}
.admin-quiz-settings__label-text {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.admin-quiz-settings__label-text i {
color: #0d6efd;
font-size: 0.9em;
}
.admin-quiz-settings__input, .admin-quiz-settings__select, .admin-quiz-settings__textarea {
width: 100%;
padding: 0.6rem 0.85rem;
font-size: 1rem;
line-height: 1.5;
color: #212529;
background: #fff;
border: 1px solid #ced4da;
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-quiz-settings__input:focus, .admin-quiz-settings__select:focus, .admin-quiz-settings__textarea:focus {
outline: none;
border-color: #86b7fe;
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
}
.admin-quiz-settings__input:disabled, .admin-quiz-settings__select:disabled, .admin-quiz-settings__textarea:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.admin-quiz-settings__textarea {
min-height: 6rem;
resize: vertical;
}
.admin-quiz-settings__hint {
margin: 0;
font-size: 0.8125rem;
color: #6c757d;
line-height: 1.45;
}
.admin-quiz-settings__hint-inline {
display: block;
margin-top: 0.35rem;
font-size: 0.8125rem;
color: #6c757d;
}
.admin-quiz-settings__actions {
text-align: center;
padding-top: 0.25rem;
}
.admin-quiz-settings__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-size: 1.05rem;
font-weight: 700;
color: #fff !important;
background: linear-gradient(180deg, #3d8bfd 0%, #0d6efd 100%);
border: 1px solid #0a58ca;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.35);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.admin-quiz-settings__submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(13, 110, 253, 0.4);
}
.admin-quiz-settings__submit:disabled {
opacity: 0.75;
cursor: not-allowed;
transform: none;
}
.admin-quiz-settings__actions-note {
margin: 0.65rem 0 0;
font-size: 0.875rem;
color: #6c757d;
}
.admin-quiz-settings__status {
margin-top: 1.25rem;
}
.admin-quiz-settings__status-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1rem;
padding: 0.85rem 1rem;
border-radius: 10px;
border: 1px solid transparent;
}
.admin-quiz-settings__status-box--info {
background: #e7f1ff;
border-color: #9ec5fe;
color: #052c65;
}
.admin-quiz-settings__status-box--success {
background: #d1e7dd;
border-color: #a3cfbb;
color: #0a3622;
}
.admin-quiz-settings__status-box--danger {
background: #f8d7da;
border-color: #f1aeb5;
color: #58151c;
}
.admin-quiz-settings__status-icon {
flex-shrink: 0;
font-size: 1.25rem;
line-height: 1;
}
.admin-quiz-settings__status-msg {
flex: 1;
min-width: 12rem;
font-size: 0.9375rem;
line-height: 1.5;
}
.admin-quiz-settings__status-msg--error {
font-weight: 600;
}
.admin-quiz-settings__status-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.admin-quiz-settings__retry {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.85rem;
font-size: 0.8125rem;
font-weight: 700;
color: #664d03 !important;
background: #ffecb5;
border: 1px solid #e0a800;
border-radius: 8px;
cursor: pointer;
}
.admin-quiz-settings__retry:hover {
background: #ffe066;
}
.admin-quiz-generated {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid #dee2e6;
}
.admin-quiz-generated__panel {
border: 1px solid #badbcc;
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 12px rgba(25, 135, 84, 0.08);
}
.admin-quiz-generated__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
padding: 0.85rem 1.15rem;
background: linear-gradient(135deg, #198754 0%, #146c43 100%);
color: #fff;
}
.admin-quiz-generated__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.45rem;
}
.admin-quiz-generated__count {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.65rem;
font-size: 0.8125rem;
font-weight: 700;
color: #198754;
background: #fff;
border-radius: 999px;
}
.admin-quiz-generated__body {
padding: 1.15rem 1.25rem 1.35rem;
background: #f8fff9;
}
.admin-quiz-generated__summary {
margin-bottom: 1.25rem;
}
.admin-quiz-generated__summary-box {
padding: 1rem 1.1rem;
background: #d1e7dd;
border: 1px solid #a3cfbb;
border-radius: 10px;
color: #0a3622;
}
.admin-quiz-generated__summary-title {
margin: 0 0 0.65rem;
font-size: 1rem;
font-weight: 700;
}
.admin-quiz-generated__summary-list {
margin: 0;
padding-left: 1.2rem;
font-size: 0.9rem;
line-height: 1.65;
}
.admin-quiz-generated__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.admin-quiz-generated__loading {
text-align: center;
padding: 2rem 1rem;
color: #6c757d;
}
.admin-quiz-generated__loading i {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.admin-quiz-generated__loading p {
margin: 0;
}
.admin-quiz-qcard {
border: 1px solid #9ec5fe;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 1px 6px rgba(13, 110, 253, 0.08);
}
.admin-quiz-qcard__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.65rem 1rem;
background: linear-gradient(90deg, #0d6efd 0%, #0a58ca 100%);
color: #fff;
}
.admin-quiz-qcard__title {
margin: 0;
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.4rem;
}
.admin-quiz-qcard__badge {
font-size: 0.75rem;
font-weight: 700;
padding: 0.2rem 0.55rem;
background: rgba(255, 255, 255, 0.95);
color: #0d6efd;
border-radius: 999px;
}
.admin-quiz-qcard__body {
padding: 1rem 1.1rem;
}
.admin-quiz-qcard__block {
margin-bottom: 1rem;
}
.admin-quiz-qcard__block:last-of-type {
margin-bottom: 0.75rem;
}
.admin-quiz-qcard__subhead {
margin: 0 0 0.4rem;
font-size: 0.8125rem;
font-weight: 700;
color: #0d6efd;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-quiz-qcard__subhead--choices {
color: #198754;
}
.admin-quiz-qcard__subhead--explain {
color: #0dcaf0;
}
.admin-quiz-qcard__text {
margin: 0;
color: #212529;
line-height: 1.6;
}
.admin-quiz-qcard__choices {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.admin-quiz-qcard__choice {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
border: 1px solid #dee2e6;
border-radius: 8px;
background: #fff;
}
.admin-quiz-qcard__choice--correct {
border-color: #198754;
background: linear-gradient(90deg, #e8f5e9 0%, #fff 100%);
}
.admin-quiz-qcard__choice-text {
flex: 1;
min-width: 0;
font-size: 0.9375rem;
color: #343a40;
}
.admin-quiz-qcard__choice--correct .admin-quiz-qcard__choice-text {
font-weight: 700;
color: #146c43;
}
.admin-quiz-qcard__correct-mark {
flex-shrink: 0;
padding: 0.15rem 0.5rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.06em;
color: #fff;
background: #198754;
border-radius: 999px;
}
.admin-quiz-qcard__meta {
margin-top: 0.75rem;
padding-top: 0.65rem;
border-top: 1px dashed #dee2e6;
font-size: 0.78rem;
color: #6c757d;
}
.admin-quiz-actions {
margin-top: 1.25rem;
padding: 1.1rem 1.15rem;
background: #f1f3f5;
border: 1px solid #dee2e6;
border-radius: 12px;
}
.admin-quiz-actions__title {
margin: 0 0 0.85rem;
font-size: 1rem;
font-weight: 700;
color: #0d6efd;
display: flex;
align-items: center;
gap: 0.4rem;
}
.admin-quiz-actions__buttons {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.admin-quiz-actions__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.55rem 1.1rem;
font-size: 0.9375rem;
font-weight: 700;
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
transition: filter 0.12s ease, transform 0.12s ease;
}
.admin-quiz-actions__btn:hover:not(:disabled) {
filter: brightness(1.05);
transform: translateY(-1px);
}
.admin-quiz-actions__btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.admin-quiz-actions__btn--save {
color: #fff !important;
background: #198754;
border-color: #146c43;
}
.admin-quiz-actions__btn--preview {
color: #fff !important;
background: #0dcaf0;
border-color: #0aa2c0;
}
.admin-quiz-actions__btn--regen {
color: #664d03 !important;
background: #ffc107;
border-color: #e0a800;
}
.admin-quiz-actions__btn--clear {
color: #fff !important;
background: #6c757d;
border-color: #565e64;
}
.admin-quiz-dialog {
border: none;
padding: 0;
width: 96vw;
max-width: 960px;
background: transparent;
}
.admin-quiz-dialog::backdrop {
background: rgba(15, 23, 42, 0.55);
}
.admin-quiz-dialog__inner {
display: flex;
flex-direction: column;
height: 88vh;
max-height: 900px;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.admin-quiz-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.1rem;
background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
color: #fff;
}
.admin-quiz-dialog__title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.45rem;
}
.admin-quiz-dialog__close {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 1.5rem;
line-height: 1;
color: #fff;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 8px;
cursor: pointer;
}
.admin-quiz-dialog__close:hover {
background: rgba(255, 255, 255, 0.35);
}
.admin-quiz-dialog__body {
flex: 1;
overflow: auto;
padding: 1.1rem 1.25rem;
background: #f8fafc;
}
.admin-quiz-dialog__footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.6rem;
padding: 0.85rem 1.1rem;
border-top: 1px solid #dee2e6;
background: #fff;
}
.admin-quiz-dialog__btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 1.1rem;
font-size: 0.9375rem;
font-weight: 700;
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
}
.admin-quiz-dialog__btn--secondary {
color: #212529 !important;
background: #e9ecef;
border-color: #ced4da;
}
.admin-quiz-dialog__btn--primary {
color: #fff !important;
background: #198754;
border-color: #146c43;
}
.admin-quiz-preview__intro {
padding: 0.85rem 1rem;
margin-bottom: 1rem;
background: #e7f1ff;
border: 1px solid #9ec5fe;
border-radius: 10px;
color: #052c65;
}
.admin-quiz-preview__intro-title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
}
.admin-quiz-preview__intro-text {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
}
.admin-quiz-preview__questions {
display: flex;
flex-direction: column;
gap: 1rem;
}
.admin-quiz-preview__question {
padding: 1rem;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 10px;
}
.admin-quiz-preview__qhead {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.65rem;
}
.admin-quiz-preview__qtitle {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #0d6efd;
}
.admin-quiz-preview__qbadge {
font-size: 0.75rem;
font-weight: 700;
padding: 0.2rem 0.55rem;
background: #e9ecef;
color: #495057;
border-radius: 999px;
}
.admin-quiz-preview__qbody {
margin: 0 0 0.85rem;
font-weight: 600;
color: #212529;
line-height: 1.55;
}
.admin-quiz-preview__choices-title {
margin: 0 0 0.45rem;
font-size: 0.8125rem;
font-weight: 700;
color: #198754;
}
.admin-quiz-preview__choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
@media (max-width: 560px) {
.admin-quiz-preview__choice-grid {
grid-template-columns: 1fr;
}
}
.admin-quiz-preview__choice {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.65rem;
border: 1px solid #dee2e6;
border-radius: 8px;
font-size: 0.875rem;
}
.admin-quiz-preview__choice--correct {
border-color: #198754;
background: #e8f5e9;
}
.admin-quiz-preview__choice-label {
flex: 1;
min-width: 0;
}
.admin-quiz-preview__choice--correct .admin-quiz-preview__choice-label {
font-weight: 700;
color: #146c43;
}
.admin-quiz-preview__correct-tag {
flex-shrink: 0;
padding: 0.1rem 0.45rem;
font-size: 0.65rem;
font-weight: 800;
color: #fff;
background: #198754;
border-radius: 999px;
}
.admin-quiz-preview__summary {
margin-top: 1.25rem;
padding: 1rem;
background: #f1f3f5;
border-radius: 10px;
border: 1px solid #dee2e6;
}
.admin-quiz-preview__summary-title {
margin: 0 0 0.65rem;
font-size: 1rem;
font-weight: 700;
}
.admin-quiz-preview__summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem 1rem;
font-size: 0.875rem;
}
@media (max-width: 480px) {
.admin-quiz-preview__summary-grid {
grid-template-columns: 1fr;
}
}
.admin-textbook-hub__card {
border: 1px solid #dee2e6;
}
.admin-textbook-hub__actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.4rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-textbook-hub__actions .btn,
.admin-textbook-hub__actions a.btn,
.admin-textbook-hub__actions button,
.admin-textbook-hub__actions form {
flex-shrink: 0;
margin: 0;
}
.admin-textbook-hub__actions .admin-textbook-hub__btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 2rem;
padding: 0.3rem 0.65rem;
border-radius: 8px;
border: 1px solid transparent;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.admin-textbook-hub__actions .admin-textbook-hub__btn--primary {
color: #fff;
background: #036eb8;
border-color: #036eb8;
}
.admin-textbook-hub__actions .admin-textbook-hub__btn--primary:hover {
color: #fff;
background: #025a9a;
}
.admin-textbook-hub__actions .admin-textbook-hub__btn--ghost {
color: #036eb8;
background: #fff;
border-color: #cbd5e1;
}
.admin-textbook-hub__actions .admin-textbook-hub__btn--ghost:hover {
background: #f8fafc;
}
.tb-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem 0.65rem;
font-size: 0.8125rem;
line-height: 1.3;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: #495057;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.tb-btn:hover {
background: #f1f3f5;
color: #212529;
}
.tb-btn--primary {
background: #0d6efd;
border-color: #0d6efd;
color: #fff;
}
.tb-btn--primary:hover {
background: #0b5ed7;
color: #fff;
}
.tb-btn--outline {
border-color: #ced4da;
background: #fff;
}
.tb-btn--outline:hover {
border-color: #adb5bd;
background: #f8f9fa;
}
.tb-btn--ghost {
color: #6c757d;
}
.tb-btn--danger-ghost {
color: #dc3545;
}
.tb-btn--danger-ghost:hover {
background: #fdecea;
color: #b02a37;
}
.tb-btn--icon {
padding: 0.25rem 0.45rem;
}
.tb-editor {
max-width: 1100px;
margin: 0 auto;
padding: 0.75rem 1rem 5.5rem;
}
.tb-editor__header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e9ecef;
}
.tb-editor__header-center {
flex: 1;
min-width: 0;
}
.tb-editor__meta {
margin: 0;
font-size: 0.75rem;
color: #868e96;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-editor__title {
margin: 0.1rem 0 0;
font-size: 1.1rem;
font-weight: 600;
}
.tb-editor__header-actions {
flex-shrink: 0;
}
.tb-editor__layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
align-items: start;
}
@media (max-width: 768px) {
.tb-editor__layout {
grid-template-columns: 1fr;
}
}
.tb-editor__sidebar {
position: sticky;
top: 0.75rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.65rem;
}
.tb-editor__sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.tb-editor__sidebar-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #868e96;
}
.tb-chapter-list,
.textbook-reader__toc-list {
list-style: none;
margin: 0;
padding: 0;
}
.tb-chapter-list__item {
display: flex;
align-items: flex-start;
gap: 0.4rem;
width: 100%;
text-align: left;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
padding: 0.4rem 0.35rem;
margin-bottom: 0.15rem;
cursor: pointer;
font-size: 0.8125rem;
}
.tb-chapter-list__item:hover {
background: #fff;
border-color: #dee2e6;
}
.tb-chapter-list__item.is-active {
background: #fff;
border-color: #0d6efd;
box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
}
.tb-chapter-list__num {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
font-size: 0.7rem;
font-weight: 600;
color: #868e96;
background: #e9ecef;
border-radius: 4px;
}
.tb-chapter-list__item.is-active .tb-chapter-list__num {
background: #0d6efd;
color: #fff;
}
.tb-chapter-list__text {
flex: 1;
min-width: 0;
}
.tb-chapter-list__title {
display: block;
font-weight: 500;
color: #212529;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-chapter-list__key {
display: block;
font-size: 0.65rem;
font-family: ui-monospace, monospace;
color: #adb5bd;
}
.tb-editor__hint {
margin: 0.5rem 0 0.65rem;
font-size: 0.65rem;
color: #adb5bd;
line-height: 1.4;
}
.tb-editor__status {
padding-top: 0.65rem;
border-top: 1px solid #e9ecef;
}
.tb-editor__status-label {
display: block;
font-size: 0.7rem;
color: #868e96;
margin-bottom: 0.2rem;
}
.tb-editor__main {
min-width: 0;
}
.tb-chapter-pane {
display: none;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.85rem 1rem;
}
.tb-chapter-pane.is-active {
display: block;
}
.tb-chapter-pane__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.tb-chapter-pane__heading {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
}
.tb-chapter-pane__fields {
display: grid;
grid-template-columns: 1fr 140px;
gap: 0.65rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f1f3f5;
}
@media (max-width: 576px) {
.tb-chapter-pane__fields {
grid-template-columns: 1fr;
}
}
.tb-field__label {
display: block;
font-size: 0.7rem;
font-weight: 500;
color: #868e96;
margin-bottom: 0.15rem;
}
.tb-field__hint {
display: block;
font-size: 0.6rem;
color: #ced4da;
margin-top: 0.1rem;
}
.tb-chapter-pane__blocks-label {
margin: 0 0 0.5rem;
font-size: 0.8rem;
font-weight: 600;
}
.tb-block-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
margin-bottom: 0.65rem;
padding: 0.45rem 0.5rem;
background: #f8f9fa;
border-radius: 6px;
}
.tb-block-toolbar__label {
font-size: 0.7rem;
color: #868e96;
flex-shrink: 0;
}
.tb-block-toolbar__btns {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.textbook-blocks-list {
min-height: 2rem;
}
.textbook-blocks-list__empty {
margin: 0;
padding: 1rem;
text-align: center;
font-size: 0.8rem;
color: #adb5bd;
border: 1px dashed #dee2e6;
border-radius: 6px;
background: #fafbfc;
}
.textbook-block-card {
border: 1px solid #e9ecef;
border-radius: 6px;
margin-bottom: 0.5rem;
background: #fff;
overflow: hidden;
}
.textbook-block-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.35rem 0.5rem;
background: #f8f9fa;
border-bottom: 1px solid #f1f3f5;
}
.textbook-block-card__type {
font-size: 0.7rem;
font-weight: 600;
color: #495057;
}
.textbook-block-card__actions {
display: flex;
gap: 0.1rem;
}
.textbook-block-card__actions .tb-btn {
padding: 0.15rem 0.35rem;
font-size: 0.75rem;
}
.textbook-figure-grid-item {
padding: 0.55rem 0.65rem;
margin-bottom: 0.5rem;
border: 1px dashed #dee2e6;
border-radius: 6px;
background: #fafbfc;
}
.textbook-figure-grid-items .textbook-figure-grid-item:last-child {
margin-bottom: 0.35rem;
}
.textbook-image-upload {
margin-bottom: 0.65rem;
padding: 0.5rem 0.55rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
}
.textbook-image-upload__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.65rem;
}
.textbook-image-upload__status {
font-size: 0.7rem;
color: #198754;
}
.textbook-image-preview {
margin: 0.5rem 0 0.35rem;
max-width: 220px;
border-radius: 6px;
overflow: hidden;
border: 1px solid #dee2e6;
background: #fff;
}
.textbook-image-preview img {
display: block;
width: 100%;
height: auto;
max-height: 140px;
object-fit: contain;
}
.textbook-image-preview--empty, .textbook-image-preview[hidden] {
display: none;
}
.textbook-block-ai {
margin-bottom: 0.65rem;
padding: 0.55rem 0.65rem;
background: #f8f9fa;
border: 1px dashed #ced4da;
border-radius: 6px;
}
.textbook-block-ai__label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.7rem;
font-weight: 600;
color: #495057;
}
.textbook-block-ai__actions {
margin-top: 0.4rem;
}
.textbook-block-ai-generate.is-loading {
pointer-events: none;
opacity: 0.7;
}
.textbook-block-card__body {
padding: 0.5rem 0.65rem;
}
.textbook-block-card__body .form-label {
font-size: 0.7rem;
margin-bottom: 0.15rem;
color: #868e96;
}
.textbook-block-card__body .form-control {
font-size: 0.8125rem;
}
.textbook-block-card__body textarea.form-control {
min-height: 4.5rem;
}
.textbook-block-card__body .textbook-block-step-add {
margin-top: 0.25rem;
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
}
.textbook-step-row {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.35rem;
}
.textbook-step-row .form-control {
flex: 1;
min-width: 0;
}
.textbook-icon-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
margin: 0;
border: 1px solid #ced4da !important;
border-radius: 4px;
background: #fff !important;
color: #868e96 !important;
font-size: 0.95rem;
font-weight: 400;
line-height: 1;
cursor: pointer;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
}
.textbook-icon-btn:hover {
background: #fdecea !important;
border-color: #f5c2c7 !important;
color: #dc3545 !important;
}
.tb-editor__savebar {
position: sticky;
bottom: 0;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-top: 1.25rem;
padding: 0.55rem 0.85rem;
background: #fff !important;
color: #495057 !important;
text-align: left !important;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
.tb-editor__savebar-hint {
margin: 0;
font-size: 0.75rem;
color: #868e96 !important;
}
.tb-editor__savebar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.tb-savebar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 2rem;
padding: 0.35rem 0.85rem;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.2;
border-radius: 6px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.tb-savebar-btn--cancel {
background: #fff !important;
border-color: #ced4da !important;
color: #495057 !important;
}
.tb-savebar-btn--cancel:hover {
background: #f8f9fa !important;
border-color: #adb5bd !important;
color: #212529 !important;
text-decoration: none;
}
.tb-savebar-btn--save {
background: #036eb8 !important;
border-color: #036eb8 !important;
color: #fff !important;
}
.tb-savebar-btn--save:hover {
background: #025a96 !important;
border-color: #025a96 !important;
color: #fff !important;
}
.tb-savebar-btn--save:active {
background: #024a7d !important;
border-color: #024a7d !important;
}
.tb-savebar-btn--save i {
font-size: 1rem;
}
.textbook-preview-layout {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
.html-textbook-modal {
display: none;
position: fixed;
inset: 0;
z-index: 10050;
background: rgba(0, 0, 0, 0.85);
}
.html-textbook-modal.show {
display: block;
}
.html-textbook-modal__dialog {
width: 100%;
height: 100%;
}
.html-textbook-modal__content {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: #fff;
}
.html-textbook-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-shrink: 0;
padding: 0.65rem 1rem;
background: #f8f9fa !important;
border-bottom: 1px solid #dee2e6;
color: #212529 !important;
text-align: left !important;
}
.html-textbook-modal__title {
margin: 0;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
color: #212529 !important;
}
.html-textbook-modal__badge {
font-size: 0.65rem;
font-weight: 600;
padding: 0.15rem 0.45rem;
border-radius: 4px;
background: #fff3cd;
color: #664d03;
border: 1px solid #ffc107;
}
.html-textbook-modal__header-actions {
display: flex;
gap: 0.35rem;
}
.html-textbook-modal__btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.7rem;
font-size: 0.8125rem;
border-radius: 6px;
border: 1px solid #ced4da;
background: #fff;
color: #495057;
text-decoration: none;
cursor: pointer;
}
.html-textbook-modal__btn:hover {
background: #f1f3f5;
color: #212529;
text-decoration: none;
}
.html-textbook-modal__body {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem 2rem;
background: #fff;
}
.textbook-reader {
max-width: 1200px;
margin: 0 auto;
}
.textbook-reader--in-modal {
max-width: 1200px;
}
.textbook-reader--preview .textbook-reader__preview-banner {
background: #fff3cd;
border: 1px solid #ffc107;
color: #664d03;
padding: 0.5rem 0.75rem;
border-radius: 6px;
margin-bottom: 1rem;
font-size: 0.85rem;
}
.textbook-reader__header {
margin-bottom: 1.25rem;
padding: 1rem 1.15rem;
background: #fff;
border: 1px solid #e3e7ee;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(31, 36, 48, 0.05);
}
.textbook-reader__course {
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: #2bb3a3;
}
.textbook-reader__title {
margin: 0.2rem 0 0;
font-size: 1.35rem;
font-weight: 800;
line-height: 1.35;
color: #1f2430;
}
.textbook-reader__layout {
display: grid;
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
.textbook-reader__main {
min-width: 0;
}
.textbook-reader__toc {
position: static;
width: 100%;
min-width: 0;
max-width: none;
max-height: none;
order: 0;
}
.textbook-reader__toc-inner {
padding: 0.75rem 0.65rem;
background: #fff;
border: 1px solid #e3e7ee;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(31, 36, 48, 0.04);
}
.textbook-reader__toc-heading {
margin: 0 0 0.55rem;
padding: 0 0.35rem 0.45rem;
border-bottom: 1px solid #edf0f5;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #5b6472;
}
.textbook-reader__toc-list {
display: flex;
flex-direction: column;
gap: 0.2rem;
max-height: none;
}
.textbook-reader__toc-item {
margin: 0;
list-style: none;
}
.textbook-reader__toc-link {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.45rem 0.5rem;
border: 1px solid transparent;
border-radius: 8px;
text-decoration: none;
color: #3d4654;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.4;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.textbook-reader__toc-link:hover {
background: #f4fbfb;
border-color: #d4f0ec;
color: #14776c;
text-decoration: none;
}
.textbook-reader__toc-link.is-current {
background: #e6f7f4;
border-color: #2bb3a3;
color: #14776c;
box-shadow: none;
}
.textbook-reader__toc-item.is-done .textbook-reader__toc-link:not(.is-current) {
color: #5b6472;
}
.textbook-reader__toc-num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.45rem;
height: 1.45rem;
border-radius: 6px;
background: #f1f4f8;
color: #5b6472;
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
transition: background 0.15s ease, color 0.15s ease;
}
.textbook-reader__toc-num i {
font-size: 0.85rem;
}
.textbook-reader__toc-link.is-current .textbook-reader__toc-num {
background: #2bb3a3;
color: #fff;
}
.textbook-reader__toc-item.is-done .textbook-reader__toc-num {
background: #e6f7f4;
color: #2bb3a3;
}
.textbook-reader__toc-title {
flex: 1;
min-width: 0;
white-space: normal;
word-break: break-word;
}
.textbook-reader__toc-link.is-current .textbook-reader__toc-title {
font-weight: 800;
}
.textbook-chapter {
margin-bottom: 1.25rem;
padding: 1.15rem 1.25rem 1.25rem;
background: #fff;
border: 2px solid #e3e7ee;
border-radius: 16px;
box-shadow: 0 2px 10px rgba(31, 36, 48, 0.06);
scroll-margin-top: 1rem;
}
.textbook-chapter:last-child {
margin-bottom: 0;
border-bottom: 2px solid #e3e7ee;
}
.textbook-chapter__head {
margin-bottom: 1.25rem;
}
.textbook-chapter__num {
display: flex;
align-items: baseline;
gap: 0.35rem;
margin: 0 0 0.35rem;
line-height: 1;
}
.textbook-chapter__num-label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
color: #036eb8;
}
.textbook-chapter__num-value {
font-size: 2rem;
font-weight: 800;
color: #036eb8;
line-height: 1;
}
.textbook-chapter__title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.4;
color: #212529;
}
.textbook-chapter__figures {
margin-bottom: 1.5rem;
}
.textbook-chapter__body > .textbook-block:first-child {
margin-top: 0;
}
.textbook-block--figure-grid {
margin-bottom: 1rem;
}
.textbook-block--figure-grid:last-child {
margin-bottom: 0;
}
.textbook-figure-grid {
display: grid;
grid-template-columns: repeat(var(--figure-grid-cols, 1), minmax(0, 1fr));
gap: 0.75rem 1rem;
}
.textbook-figure-grid__cell {
min-width: 0;
}
.textbook-figure-grid__frame {
display: inline-block;
max-width: 100%;
padding: 0.2rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
line-height: 0;
}
.textbook-figure-grid__image {
display: block;
width: auto;
max-width: 100%;
height: auto;
border-radius: 4px;
}
.textbook-block--figure-grid-1 .textbook-figure-grid__frame {
width: fit-content;
}
.textbook-block--figure-grid-2 .textbook-figure-grid__frame,
.textbook-block--figure-grid-3 .textbook-figure-grid__frame {
display: block;
width: 100%;
}
.textbook-block--figure-grid-2 .textbook-figure-grid__image,
.textbook-block--figure-grid-3 .textbook-figure-grid__image {
width: 100%;
}
.textbook-figure-grid__caption {
margin: 0.4rem 0 0;
font-size: 0.8rem;
color: #6c757d;
text-align: center;
line-height: 1.35;
}
@media (max-width: 576px) {
.textbook-block--figure-grid-2 .textbook-figure-grid,
.textbook-block--figure-grid-3 .textbook-figure-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.textbook-reader__layout {
grid-template-columns: 1fr;
}
.textbook-reader__toc {
margin-bottom: 0.85rem;
}
}
.textbook-reader .textbook-chapter__body > .textbook-block + .textbook-block {
margin-top: 1.75rem;
}
.textbook-block {
margin-bottom: 0;
}
.textbook-block__head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.65rem;
}
.textbook-block__badge {
flex-shrink: 0;
display: inline-block;
padding: 0.12rem 0.45rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.3;
border-radius: 4px;
text-transform: uppercase;
}
.textbook-block__badge--explain {
color: #495057;
background: #e9ecef;
border: 1px solid #ced4da;
}
.textbook-block__badge--steps {
color: #0b5ed7;
background: #e7f1ff;
border: 1px solid #b6d4fe;
}
.textbook-block__label {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: #212529;
}
.textbook-block__label i {
font-size: 1.1rem;
line-height: 1;
}
.textbook-block__body {
font-size: 0.9375rem;
line-height: 1.85;
color: #343a40;
}
.textbook-block__body p {
margin: 0 0 0.9em;
}
.textbook-block__body p:last-child {
margin-bottom: 0;
}
.textbook-block__body ul,
.textbook-block__body ol {
margin: 0.35em 0 1em;
padding-left: 1.35em;
}
.textbook-block__body li {
margin-bottom: 0.4em;
line-height: 1.75;
}
.textbook-block__body li:last-child {
margin-bottom: 0;
}
.textbook-block--intro .textbook-block__body {
font-size: 1rem;
line-height: 1.9;
color: #495057;
}
.textbook-block--goal {
padding: 0.85rem 1rem 0.95rem;
background: #e7f1ff;
border-radius: 10px;
border: 1px solid #cfe2ff;
}
.textbook-block--goal .textbook-block__label {
margin-bottom: 0.45rem;
color: #036eb8;
}
.textbook-block--goal .textbook-block__body {
line-height: 1.8;
}
.textbook-block--explain {
padding: 1rem 1.1rem 1.1rem;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 12px;
}
.textbook-block--explain .textbook-block__label {
color: #495057;
}
.textbook-block--explain .textbook-block__label i {
color: #6c757d;
}
.textbook-block--explain .textbook-block__body {
font-size: 0.9375rem;
line-height: 1.9;
color: #343a40;
}
.textbook-block--steps {
padding: 1rem 1rem 1.05rem;
background: #fff;
border: 1px solid #cfe2ff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(3, 110, 184, 0.08);
}
.textbook-block--steps .textbook-block__label {
color: #036eb8;
}
.textbook-block--steps .textbook-block__label i {
color: #0d6efd;
}
.textbook-block__steps-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.textbook-block__step {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin: 0;
padding: 0.7rem 0.75rem;
background: #f8fbff;
border: 1px solid #e7f1ff;
border-radius: 8px;
}
.textbook-block__step-num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
font-size: 0.8rem;
font-weight: 800;
line-height: 1;
color: #fff;
background: #036eb8;
border-radius: 50%;
}
.textbook-block__step-text {
flex: 1;
min-width: 0;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.65;
color: #212529;
}
.textbook-block--tip {
padding: 0.85rem 1rem;
background: #fff8e1;
border-radius: 0 10px 10px 0;
}
.textbook-block--tip .textbook-block__body {
line-height: 1.8;
}
.textbook-block--warning {
padding: 0.85rem 1rem;
background: #fdecea;
border-radius: 0 10px 10px 0;
}
.textbook-block--warning .textbook-block__body {
line-height: 1.8;
}
.textbook-block--figure-wide .textbook-block__figure-frame {
display: inline-block;
max-width: 100%;
padding: 0.2rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
line-height: 0;
}
.textbook-block--figure-wide .textbook-block__image {
display: block;
width: auto;
max-width: 100%;
height: auto;
border-radius: 4px;
}
.textbook-block__caption {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #6c757d;
text-align: center;
}
.textbook-chapter__checkpoint {
margin-top: 1.25rem;
padding-top: 0.85rem;
border-top: 1px dashed #dee2e6;
background: transparent !important;
color: inherit !important;
text-align: left !important;
}
.textbook-checkpoint-btn {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
max-width: 360px;
margin: 2rem auto;
padding: 0.55rem 0.75rem;
border: 1px solid #b6d4fe;
border-radius: 10px;
background: #f8fbff;
color: #0d6efd;
text-align: left;
cursor: not-allowed;
box-shadow: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.textbook-checkpoint-btn:disabled {
opacity: 0.85;
}
.textbook-checkpoint-btn:not(:disabled) {
cursor: pointer;
}
.textbook-checkpoint-btn:not(:disabled):hover {
border-color: #0d6efd;
}
.textbook-checkpoint-btn__icon {
flex-shrink: 0;
font-size: 1.35rem;
line-height: 1;
color: #0d6efd;
}
.textbook-checkpoint-btn__text {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.textbook-checkpoint-btn__label {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
}
.textbook-checkpoint-btn__hint {
font-size: 0.7rem;
font-weight: 400;
color: #6c757d;
line-height: 1.3;
}
.textbook-checkpoint-btn--finish {
border-color: #a3cfbb;
background: #f4faf7;
color: #198754;
}
.textbook-checkpoint-btn--finish .textbook-checkpoint-btn__icon {
color: #198754;
}
.textbook-checkpoint-btn--finish:not(:disabled):hover {
border-color: #198754;
}
.html-textbook-modal .textbook-chapter__checkpoint,
.html-textbook-modal footer {
background: transparent !important;
padding: 0 !important;
color: inherit !important;
text-align: left !important;
}
.admin-line-content-form__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
gap: 1rem;
align-items: start;
}
@media (max-width: 992px) {
.admin-line-content-form__layout {
grid-template-columns: 1fr;
}
}
.admin-line-content-form__main {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.admin-line-content-form__section + .admin-line-content-form__section {
margin-top: 0;
}
.admin-line-content-form__preview {
position: sticky;
top: 1rem;
padding: 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
@media (max-width: 992px) {
.admin-line-content-form__preview {
position: static;
}
}
.admin-line-content-form__preview-desc {
margin: -0.35rem 0 0.75rem;
font-size: 0.75rem;
color: #64748b;
}
.admin-line-content-form__current-image {
display: block;
max-width: 100%;
max-height: 10rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
object-fit: contain;
}
.admin-line-content-form__checks {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.admin-line-content-form__status-select {
max-width: 12rem;
}
.line-phone-preview__device {
width: 100%;
max-width: 18.75rem;
margin: 0 auto;
padding: 0.55rem;
background: linear-gradient(145deg, #1f2937 0%, #0f172a 100%);
border-radius: 2rem;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 16px 40px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.line-phone-preview__bezel {
position: relative;
overflow: hidden;
border-radius: 1.55rem;
background: #000;
}
.line-phone-preview__dynamic-island {
position: absolute;
top: 0.45rem;
left: 50%;
z-index: 3;
width: 4.6rem;
height: 1.15rem;
background: #000;
border-radius: 999px;
transform: translateX(-50%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.line-phone-preview__status {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
height: 2.35rem;
padding: 0.65rem 1rem 0.2rem;
background: #fff;
color: #111;
}
.line-phone-preview__status-time {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.line-phone-preview__status-icons {
display: inline-flex;
align-items: center;
gap: 0.28rem;
color: #111;
}
.line-phone-preview__line-header {
display: grid;
grid-template-columns: 2rem 1fr auto;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.55rem 0.45rem;
background: #fff;
border-bottom: 1px solid #e8e8e8;
}
.line-phone-preview__header-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
background: transparent;
color: #111;
cursor: default;
}
.line-phone-preview__header-center {
display: flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
}
.line-phone-preview__header-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: linear-gradient(135deg, #06c755 0%, #00a44a 100%);
color: #fff;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: -0.02em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.line-phone-preview__header-name {
overflow: hidden;
font-size: 0.78rem;
font-weight: 700;
color: #111;
white-space: nowrap;
text-overflow: ellipsis;
}
.line-phone-preview__header-actions {
display: inline-flex;
align-items: center;
gap: 0.1rem;
}
.line-phone-preview__chat {
min-height: 19.5rem;
max-height: 24rem;
overflow-y: auto;
padding: 0.65rem 0.55rem 0.85rem;
background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 42%), radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.04) 0%, transparent 38%), linear-gradient(180deg, #728ea4 0%, #6a869c 100%);
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.line-phone-preview__date-chip {
width: fit-content;
margin: 0 auto 0.75rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.92);
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.line-phone-preview__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 14rem;
padding: 1rem;
text-align: center;
color: rgba(255, 255, 255, 0.72);
font-size: 0.72rem;
line-height: 1.45;
}
.line-phone-preview__empty i {
margin-bottom: 0.45rem;
font-size: 1.75rem;
color: rgba(255, 255, 255, 0.85);
}
.line-phone-preview__empty p {
margin: 0;
}
.line-phone-preview__message {
display: flex;
align-items: flex-start;
gap: 0.35rem;
max-width: 92%;
margin-bottom: 0.55rem;
}
.line-phone-preview__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.55rem;
height: 1.55rem;
margin-top: 1.05rem;
border-radius: 50%;
background: linear-gradient(135deg, #06c755 0%, #00a44a 100%);
color: #fff;
font-size: 0.58rem;
font-weight: 800;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.line-phone-preview__message-body {
min-width: 0;
flex: 1;
}
.line-phone-preview__sender {
margin-bottom: 0.12rem;
padding-left: 0.1rem;
font-size: 0.58rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
line-height: 1.2;
}
.line-phone-preview__bubble-wrap {
display: flex;
align-items: flex-end;
gap: 0.28rem;
}
.line-phone-preview__bubble {
position: relative;
max-width: 100%;
padding: 0.48rem 0.62rem;
background: #fff;
border-radius: 1.05rem;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.line-phone-preview__bubble::before {
content: "";
position: absolute;
left: -0.38rem;
bottom: 0.42rem;
width: 0.55rem;
height: 0.75rem;
background: #fff;
border-bottom-right-radius: 0.55rem;
}
.line-phone-preview__bubble::after {
content: "";
position: absolute;
left: -0.62rem;
bottom: 0.42rem;
width: 0.62rem;
height: 0.75rem;
background: #728ea4;
border-bottom-right-radius: 0.55rem;
}
.line-phone-preview__bubble--image {
padding: 0.18rem;
background: #fff;
border-radius: 0.85rem;
}
.line-phone-preview__bubble--image::before, .line-phone-preview__bubble--image::after {
display: none;
}
.line-phone-preview__text {
position: relative;
z-index: 1;
font-size: 0.72rem;
line-height: 1.55;
color: #111;
word-break: break-word;
white-space: pre-wrap;
}
.line-phone-preview__meta {
flex-shrink: 0;
align-self: flex-end;
margin-bottom: 0.12rem;
font-size: 0.52rem;
line-height: 1.2;
color: rgba(255, 255, 255, 0.72);
white-space: nowrap;
}
.line-phone-preview__image-card {
position: relative;
z-index: 1;
overflow: hidden;
border-radius: 0.65rem;
line-height: 0;
}
.line-phone-preview__image {
display: block;
width: 100%;
max-width: 11.5rem;
height: auto;
border-radius: 0.65rem;
}
.line-phone-preview__link-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.35rem 0.45rem;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 0.58rem;
font-weight: 600;
line-height: 1;
}
.line-phone-preview__link-badge i {
font-size: 0.72rem;
}
.line-phone-preview__composer {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.55rem 0.35rem;
background: #fff;
border-top: 1px solid #ececec;
}
.line-phone-preview__composer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
padding: 0;
border: none;
background: transparent;
color: #666;
cursor: default;
}
.line-phone-preview__composer-btn--plus {
color: #555;
}
.line-phone-preview__composer-input {
min-height: 1.65rem;
padding: 0.28rem 0.65rem;
border: 1px solid #ddd;
border-radius: 999px;
background: #fafafa;
color: #aaa;
font-size: 0.68rem;
line-height: 1.2;
display: flex;
align-items: center;
}
.line-phone-preview__home-indicator {
height: 1.15rem;
background: #fff;
}
.line-phone-preview__home-indicator::after {
content: "";
display: block;
width: 4.2rem;
height: 0.22rem;
margin: 0.45rem auto 0;
border-radius: 999px;
background: #111;
}
.side-menu {
display: flex;
min-height: 100vh;
z-index: 1000;
}
.side-menu i {
color: #036EB8;
margin: 0 !important;
}
.sidebar-icons {
width: 34%;
padding: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.sidebar-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
margin-bottom: 15px;
border-radius: 8px;
position: relative;
z-index: 1000;
}
.sidebar-icon:hover {
background: #036EB8;
}
.sidebar-icon:hover i {
color: white !important;
}
.sidebar-icon.active {
background: #036EB8;
}
.sidebar-icon.active i {
color: white !important;
}
.sidebar-submenu {
width: 90%;
background: white;
border-right: 1px solid #e0e0e0;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
left: 0;
position: relative;
display: block;
}
.sidebar-submenu i {
color: white;
}
.submenu-content {
display: none;
padding-top: 0;
}
.submenu-content.active {
display: block;
}
.submenu-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.submenu-content li {
margin-bottom: 8px;
}
.submenu-content a {
display: flex;
align-items: center;
padding: 10px 4px;
color: #2c3e50;
text-decoration: none;
border-radius: 6px;
font-size: 0.8rem;
}
.submenu-content a:hover {
background: #f8f9fa;
color: #3498db;
}
.submenu-content a i {
margin-right: 10px;
width: 16px;
text-align: center;
color: #036EB8 !important;
}
.stepTitle {
padding: 3rem 2rem 0;
}
#sortable-steps {
padding: 1rem 2rem 3rem;
}
.button_to .btn {
min-width: 180px;
}
.admin-api-settings .pageTitle {
font-size: 1.5rem;
font-weight: 600;
color: #272727;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e2e8f0;
}
.admin-api-settings .pageTitle i {
color: #036EB8;
margin-right: 0.5rem;
}
.admin-api-settings > .card {
border: none;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border-radius: 10px;
overflow: hidden;
margin-bottom: 1.5rem;
}
.admin-api-settings > .card .card-header {
background: linear-gradient(135deg, #036EB8 0%, #0284c7 100%);
color: #fff;
border: none;
padding: 1rem 1.25rem;
font-weight: 600;
}
.admin-api-settings > .card .card-header h5 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.admin-api-settings > .card .card-header h5 i {
opacity: 0.95;
margin-right: 0.35rem;
}
.admin-api-settings > .card .card-body {
padding: 1.5rem 1.25rem;
}
.admin-api-settings .alert-success,
.admin-api-settings .alert-warning {
border-radius: 8px;
border: none;
padding: 0.875rem 1rem;
}
.admin-api-settings .alert-success code,
.admin-api-settings .alert-warning code {
background: rgba(0, 0, 0, 0.06);
padding: 0.2em 0.45em;
border-radius: 4px;
font-size: 0.9em;
}
.admin-api-settings .alert-success {
background: #ecfdf5;
color: #065f46;
}
.admin-api-settings .alert-warning {
background: #fffbeb;
color: #92400e;
}
.admin-api-settings .api-endpoint-group {
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid #e2e8f0;
}
.admin-api-settings .api-endpoint-group:first-of-type {
margin-top: 1rem;
padding-top: 0;
border-top: none;
}
.admin-api-settings .api-endpoint-group > h6 {
font-size: 0.95rem;
font-weight: 600;
color: #334155;
margin-bottom: 0.35rem;
}
.admin-api-settings .api-endpoint-group > h6::before {
content: '■';
padding-right: 8px;
}
.admin-api-settings .api-endpoint-group > p.small {
margin-bottom: 0.75rem;
color: #64748b;
line-height: 1.5;
font-size: 14px;
}
.admin-api-settings .table {
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
margin-bottom: 1rem;
width: 100%;
}
.admin-api-settings .table thead th {
background: #f8fafc;
font-weight: 600;
font-size: 0.8rem;
color: #475569;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid #e2e8f0;
}
.admin-api-settings .table tbody tr {
transition: background 0.15s ease;
}
.admin-api-settings .table tbody tr:hover {
background: #f8fafc;
}
.admin-api-settings .table tbody tr td {
padding: 0.6rem 0.75rem;
vertical-align: middle;
font-size: 0.9rem;
}
.admin-api-settings .table code {
background: #f1f5f9;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.8rem;
word-break: break-all;
overflow-wrap: anywhere;
display: inline-block;
max-width: 100%;
color: #333;
white-space: normal;
}
.admin-api-settings .api-endpoint-group .api-endpoint-table th:first-child,
.admin-api-settings .api-endpoint-group .api-endpoint-table td:first-child {
width: 15% !important;
word-break: break-all;
}
.admin-api-settings .api-endpoint-group .api-endpoint-table th:nth-child(2),
.admin-api-settings .api-endpoint-group .api-endpoint-table td:nth-child(2) {
width: 65% !important;
word-break: break-all;
}
.admin-api-settings .api-endpoint-group .api-endpoint-table th:last-child,
.admin-api-settings .api-endpoint-group .api-endpoint-table td:last-child {
width: 20%;
text-align: center;
}
.admin-api-settings .logflow-shop-url-table {
table-layout: fixed;
width: 100%;
}
.admin-api-settings .logflow-shop-url-table th:nth-child(1),
.admin-api-settings .logflow-shop-url-table td:nth-child(1) {
width: 14% !important;
word-break: normal;
white-space: normal;
}
.admin-api-settings .logflow-shop-url-table th:nth-child(2),
.admin-api-settings .logflow-shop-url-table td:nth-child(2) {
width: 72px !important;
text-align: center;
white-space: nowrap;
}
.admin-api-settings .logflow-shop-url-table th:nth-child(3),
.admin-api-settings .logflow-shop-url-table td:nth-child(3) {
width: auto !important;
min-width: 0;
}
.admin-api-settings .logflow-shop-url-table th:nth-child(4),
.admin-api-settings .logflow-shop-url-table td:nth-child(4) {
width: 100px !important;
text-align: center;
white-space: nowrap;
}
.admin-api-settings .logflow-shop-url-table .logflow-url-value {
display: block;
background: #f1f5f9;
padding: 0.45em 0.6em;
border-radius: 4px;
font-size: 0.8rem;
font-family: var(--bs-font-monospace, ui-monospace, monospace);
color: #333;
word-break: break-all;
overflow-wrap: anywhere;
white-space: normal;
line-height: 1.5;
}
.admin-api-settings .logflow-settings-table {
table-layout: fixed;
width: 100%;
}
.admin-api-settings .logflow-settings-table th:first-child,
.admin-api-settings .logflow-settings-table td:first-child {
width: 22% !important;
word-break: normal;
white-space: normal;
}
.admin-api-settings .logflow-settings-table th:nth-child(2),
.admin-api-settings .logflow-settings-table td:nth-child(2) {
width: auto !important;
word-break: normal;
}
.admin-api-settings .logflow-settings-table th:last-child:nth-child(3),
.admin-api-settings .logflow-settings-table td:last-child:nth-child(3) {
width: 100px !important;
text-align: center;
white-space: nowrap;
}
.admin-api-settings .logflow-settings-table th:last-child:nth-child(2),
.admin-api-settings .logflow-settings-table td:last-child:nth-child(2) {
width: auto !important;
text-align: left;
}
.admin-api-settings .logflow-settings-table .logflow-url-value {
display: block;
background: #f1f5f9;
padding: 0.45em 0.6em;
border-radius: 4px;
font-size: 0.8rem;
font-family: var(--bs-font-monospace, ui-monospace, monospace);
color: #333;
word-break: break-all;
overflow-wrap: anywhere;
white-space: normal;
line-height: 1.5;
}
.admin-api-settings .logflow-settings-table .form-control {
width: 100%;
min-width: 0;
}
.admin-api-settings .logflow-api-spec-table {
table-layout: auto;
}
.admin-api-settings .logflow-api-spec-table th:nth-child(3),
.admin-api-settings .logflow-api-spec-table td:nth-child(3) {
min-width: 240px;
max-width: 360px;
}
.admin-api-settings .logflow-api-spec-table code {
display: block;
white-space: normal;
word-break: break-all;
overflow-wrap: anywhere;
line-height: 1.5;
}
.admin-api-settings .copy-api-url {
white-space: nowrap;
font-size: 0.8rem;
padding: 8px 0 !important;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
}
.admin-api-settings .copy-api-url i {
font-size: 0.9rem;
margin-right: 0.25rem;
}
.admin-api-settings .card.border-info {
border-radius: 8px;
border-color: #bae6fd !important;
overflow: hidden;
color: white !important;
}
.admin-api-settings .card.border-info .card-header {
background: #f0f9ff !important;
color: #0c4a6e;
font-size: 0.95rem;
}
.admin-api-settings .card.border-info .card-header code {
color: white;
}
.admin-api-settings .card.border-info .card-body {
font-size: 0.875rem;
}
.admin-api-settings .card.border-info .table td code {
background: #f1f5f9;
padding: 0.15em 0.35em;
border-radius: 4px;
}
.admin-api-settings .card.border-info pre {
border-radius: 6px;
font-size: 0.75rem;
margin: 0;
}
.admin-api-settings .api-response-examples {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px dashed #e2e8f0;
}
.admin-api-settings .api-response-examples h6 {
font-size: 0.9rem;
font-weight: 600;
color: #475569;
margin-bottom: 0.5rem;
}
.admin-api-settings .api-response-examples pre {
background: #1e293b;
color: #333;
padding: 1rem 1.25rem;
border-radius: 8px;
font-size: 0.75rem;
line-height: 1.5;
overflow-x: auto;
margin-bottom: 1rem;
border: 1px solid #334155;
}
.admin-api-settings .api-response-examples pre code {
background: none;
color: inherit;
padding: 0;
}
.admin-api-settings .card-header.bg-secondary {
background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
color: #fff;
border: none;
}
.admin-api-settings .admin-api-settings-webhook-form {
max-width: 36rem;
}
.admin-api-settings .admin-api-settings-webhook-form .form-label {
font-weight: 600;
color: #334155;
}
.admin-api-settings .admin-api-settings-webhook-form .form-control {
border-radius: 6px;
border-color: #e2e8f0;
}
.admin-api-settings .admin-api-settings-webhook-form .form-control:focus {
border-color: #036EB8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.15);
}
.admin-api-settings .admin-api-settings-webhook-form .form-text {
font-size: 0.8rem;
color: #64748b;
margin-top: 0.35rem;
}
.admin-api-settings .admin-api-settings-webhook-form .btn-primary {
background: #036EB8;
border-color: #036EB8;
border-radius: 6px;
padding: 0.5rem 1.25rem;
}
.admin-api-settings .admin-api-settings-webhook-form .btn-primary:hover {
background: #035c9a;
border-color: #035c9a;
}
.text-light code {
color: white !important;
}
.student_page .mission_information h6 i {
margin-right: 8px;
}
.student_page .mission_information .list-group {
margin: 20px 0;
}
.student_page .mission_information .list-group li {
list-style-type: none;
padding: 8px 0;
border-bottom: 1px solid #f2f2f2;
}
.student_page .mission_information .list-group li span {
margin: 0 1rem;
}
.student_page .lessons-section {
margin-top: 2rem;
}
.student_page .lessons-section h5 {
color: #333;
font-weight: 500;
}
.student_page .lessons-section .lesson-card {
height: 100%;
transition: transform 0.2s;
border: 1px solid #f2f2f2;
}
.student_page .lessons-section .lesson-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.student_page .lessons-section .lesson-card .card-body {
padding: 1.5rem;
}
.student_page .lessons-section .lesson-card h5 {
margin: 1rem 0 !important;
}
.student_page .lessons-section .lesson-card .lesson-title {
font-size: 18px;
font-weight: 500;
margin-top: 0 !important;
margin-bottom: 1rem;
color: #333;
}
.student_page .lessons-section .lesson-card .lesson-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.student_page .lessons-section .lesson-card .lesson-info .badge {
font-weight: 500;
padding: 0.5rem 1rem;
}
.student_page .lessons-section .lesson-card .lesson-info .steps-count {
color: #666;
font-size: 14px;
}
.student_page .lessons-section .lesson-card .lesson-info .steps-count i {
margin-right: 4px;
}
.student_page .lessons-section .lesson-card .progress {
height: 8px;
background-color: #f8f9fa;
}
.student_page .lessons-section .lesson-card .progress .progress-bar {
background-color: #036EB8;
}
.student_page .courses-section .course-block .course-title {
color: #333;
font-weight: 500;
}
.student_page .courses-section .course-block .lesson-card {
height: 100%;
text-align: left !important;
}
.student_page .courses-section .course-block .lesson-card h5, .student_page .courses-section .course-block .lesson-card h6 {
text-align: left;
}
.student_page .courses-section .course-block .lesson-card .card {
height: 100%;
transition: transform 0.2s;
border: 1px solid #f2f2f2;
}
.student_page .courses-section .course-block .lesson-card .card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.student_page .courses-section .course-block .lesson-card .lesson-title {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 1rem;
color: #333;
}
.student_page .courses-section .course-block .lesson-card .lesson-info {
display: flex;
align-items: center;
}
.student_page .courses-section .course-block .lesson-card .lesson-info .badge {
font-weight: normal;
padding: 0.5rem 1rem;
}
.lessons-index {
padding: 2rem 0;
background: #f2f2f2;
}
.lessons-index h2 {
margin: 3rem 0 4rem;
}
.lessons-index h2 i {
margin-right: 8px;
color: #036EB8;
}
.lessons-index .row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: 16px;
margin-left: 16px;
background: none;
min-height: auto;
}
.lessons-index .row .col-12 {
width: 90%;
margin: 0 auto;
}
.lessons-index .row .col-12 .card {
border: 1px solid #ccc !important;
padding: 8px;
background: white;
}
.lessons-index .row .col-12 .card a {
text-decoration: none !important;
position: relative;
display: block;
color: #666;
}
.lessons-index .row .col-12 .card a::after, .lessons-index .row .col-12 .card a::before {
transition: right 0.3s ease;
}
.lessons-index .row .col-12 .card a::after {
content: "";
position: absolute;
top: 50%;
right: 24px;
width: 48px;
height: 1px;
background-color: #036EB8;
transform: translateY(-50%);
}
.lessons-index .row .col-12 .card a::before {
content: "";
position: absolute;
top: calc(50% - 0.5px);
right: 24px;
width: 16px;
height: 1px;
background-color: #036EB8;
transform: rotate(37deg);
transform-origin: calc(100% - 0.5px) 50%;
z-index: 1;
}
.lessons-index .row .col-12 .card a:hover::after, .lessons-index .row .col-12 .card a:hover::before {
right: 56px;
}
.lessons-index .row .col-12 .card .card-body {
padding: 1rem;
padding-right: 100px;
}
.lessons-index .row .col-12 .card .card-body .lesson-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.lessons-index .row .col-12 .card .card-body .lesson-header .card-title {
margin: 0;
}
.lessons-index .row .col-12 .card .card-body .lesson-header .card-title span {
margin-right: 16px;
}
.lessons-index .row .col-12 .card .card-body .lesson-header .step-count {
color: #666;
font-size: 14px;
}
.lessons-index .row .col-12 .card .card-body .lesson-header .step-count i {
margin-right: 4px;
color: #036EB8;
}
.lessons-index .container {
max-width: 1200px;
margin: 0 auto;
}
.lesson-detail {
min-height: 100vh;
position: relative;
}
.lesson-detail .container {
max-width: 960px;
margin: 0 auto;
}
.lesson-detail .lesson_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: white;
padding: 4rem 2rem;
border-radius: 10px;
}
.lesson-detail .lesson_box .lesson-header h2 {
font-size: 24px;
text-align: center;
}
.lesson-detail .lesson_box .lesson-header h2 i {
margin-right: 8px;
}
.lesson-detail .lesson_box h6 {
font-size: 18px;
margin: 1rem 0;
text-align: center;
}
.lesson-detail .lesson_box .steps-list .btn {
background: #036EB8;
color: white;
border-radius: 5px;
padding: 0.5rem 1rem;
margin: 2rem 0;
display: block;
text-align: center;
text-decoration: none;
}
.student_page {
background: #f2f2f2;
padding: 2rem 0;
}
.student_page .container {
padding: 0 16px;
width: calc(1200px - 32px);
margin: 0 auto;
}
.student_page .cord {
background: white;
}
.student_page .mission_information {
background: white;
border-radius: 12px;
padding: 16px;
}
.student_page .mission_information h6 {
font-size: 18px;
margin-bottom: 1rem;
}
.student_page .row {
min-height: auto !important;
padding: 2rem 0;
background: none;
}
.student_page .courses-section {
background: white;
margin: 2rem 0;
padding: 16px;
}
.student_page .courses-section .course-title {
font-size: 24px;
margin: 1rem 0;
}
.student_page .courses-section .course-title i {
margin-right: 8px;
}
.student_page .courses-section .row .col-4 a {
text-decoration: none;
text-align: center;
}
.student_page .courses-section .row .col-4 a .lesson-card {
border: 1px solid #ccc;
border-radius: 12px;
padding: 24px 16px;
}
.student_page .courses-section .row .col-4 a .lesson-card .lesson-title {
font-size: 18px;
margin-bottom: 1rem;
}
.student_page .courses-section .row .col-4 a .lesson-card .lesson-info {
margin: 8px 0;
}
.student_page .courses-section .row .col-4 a .lesson-card .lesson-info p {
background: #036EB8;
color: white;
padding: 8px 8px;
border-radius: 4px;
display: block;
width: 60%;
margin: 0 auto;
}
#ai-feedback {
padding: 8px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
margin-top: 3rem;
}
#ai-feedback h3 {
color: #2c3e50;
margin-bottom: 15px;
}
#ai-feedback .score {
font-size: 1.2em;
font-weight: bold;
color: #e67e22;
margin-bottom: 10px;
}
#ai-feedback .feedback {
line-height: 1.6;
color: #34495e;
}
#school_student .row {
margin: 0;
}
#school_student .col-2 {
padding: 0 !important;
}
#school_student .col-2 .card .card-body .card-title {
font-size: 18px;
margin-bottom: 1rem;
}
#school_student .col-2 .card .card-body table {
table-layout: fixed;
width: 100%;
}
#school_student .col-2 .card .card-body table td, #school_student .col-2 .card .card-body table th {
text-align: center;
width: 33.33%;
font-size: 14px;
}
#school_student .col-4 .lesson-card {
border: 1px solid #ccc;
border-radius: 12px;
padding: 16px;
}
#school_student .col-4 .lesson-card .lesson-title {
font-size: 18px;
margin-bottom: 1rem;
}
#school_student .col-4 .lesson-card h5 {
padding: 0;
margin: 1rem 0 !important;
}
#school_student .col-4 .lesson-card h5 i {
background: #eef8ff;
padding: 8px;
border-radius: 50%;
color: #036EB8;
}
#school_student .col-4 .lesson-card p {
font-size: 14px;
}
.step-controls {
padding-left: 0 16px;
}
.small-calendar .table {
font-size: 0.8rem;
}
.small-calendar .table th, .small-calendar .table td {
padding: 0.3rem;
height: 2rem;
width: 2rem;
vertical-align: middle;
}
#clock {
font-size: 2rem;
font-weight: bold;
color: #036EB8;
margin: 1rem 0;
}
.lesson-detail {
padding: 2rem 2rem 5rem;
}
.lesson-detail .back-link {
color: #036EB8;
font-size: 18px;
font-weight: 600;
margin: 1rem 0;
display: block;
text-decoration: none;
}
.lesson-detail h4 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.lesson-detail h4 i {
margin-right: 12px;
}
.lesson-detail .step_box {
background: white;
padding: 1rem 1.5rem 2rem;
border-radius: 8px;
box-shadow: none;
margin: 1rem auto;
}
.lesson-detail .step_box:hover {
background-color: rgba(3, 110, 184, 0.05);
transition: background-color 0.3s ease;
}
.school_student_show .chart-container {
padding-bottom: 1rem;
height: auto !important;
}
.school_student_show .chart-container::after {
content: '';
display: block;
clear: both;
}
.school_student_show .chart-container canvas {
width: auto !important;
height: 350px !important;
}
.school_student_show h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .table {
width: 100%;
}
.school_student_show .table th, .school_student_show .table td {
font-size: 14px;
padding: 12px 0;
}
.school_student_show .table th {
width: 20%;
}
.school_student_show .table td {
width: 80%;
}
.school_student_show .overall-score {
margin-top: 3rem;
}
.school_student_show .overall-score h3 {
font-size: 64px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .overall-score h3 span {
font-size: 20px;
font-weight: 600;
color: #272727;
margin-right: 16px;
}
.school_student_show .learning-stats {
text-align: center;
}
.school_student_show .learning-stats .stat-label {
font-size: 14px;
font-weight: 600;
color: #272727;
}
.school_student_show .learning-stats .stat-value {
font-size: 24px;
font-weight: 600;
color: #272727;
}
.school_student_show .course-progress {
margin-top: 2rem;
}
.school_student_show .course-progress h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .recent-submissions h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .score-items .score-item h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0;
}
.school_student_show .score-items .score-item p {
font-size: 14px;
font-weight: 400;
color: #272727;
margin: 0;
}
.step_description h4 {
margin-top: 2rem;
}
.step_description h4 span {
display: block;
font-size: 14px;
margin-bottom: 0.5rem;
color: #666;
}
.step_description p span {
display: block;
font-size: 14px;
margin: 1rem 0;
color: #666;
}
.step_description ul li {
display: block;
list-style-type: none;
}
.step_description ul li a {
display: block;
font-size: 14px;
margin: 1rem auto;
color: #036EB8;
width: fit-content;
border: 1px solid #036EB8;
padding: 8px 18px;
border-radius: 4px;
text-align: center;
}
.quiz-section {
padding: 80px 0;
}
.quiz-section .btn {
margin: 2rem 0;
background: #036EB8;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
}
.quiz-section .quiz-question {
margin: 2rem 0;
padding: 2rem 0;
border-bottom: 1px solid #eee;
}
.quiz-section .quiz-question h5 {
font-size: 16px;
display: inline-block;
margin-bottom: 1rem;
border: 1px solid #272727;
padding: 8px 18px;
}
.modal .modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
z-index: 1040;
}
.modal .modal-dialog {
z-index: 1050;
position: relative;
}
.modal .modal-content {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background-color: white;
position: relative;
z-index: 1051;
}
.modal .modal-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
padding: 1rem 1.5rem;
}
.modal .modal-header .modal-title {
font-size: 1.25rem;
font-weight: 600;
color: #272727;
}
.modal .modal-header .btn-close {
padding: 0.5rem;
margin: -0.5rem -0.5rem -0.5rem auto;
}
.modal .modal-body {
padding: 1.5rem;
}
.modal .modal-body .submission-result h6 {
font-size: 1rem;
font-weight: 600;
color: #272727;
margin-bottom: 0.5rem;
}
.modal .modal-body .submission-result .score-display {
margin-bottom: 1rem;
}
.modal .modal-body .submission-result .score-display .badge {
font-size: 1.2rem;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.modal .modal-body .submission-result .feedback-display {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
}
.modal .modal-body .submission-result .feedback-display p {
margin: 0;
color: #272727;
line-height: 1.5;
}
.modal .modal-body .submission-result .submission-date {
color: #6c757d;
font-size: 0.9rem;
}
.modal .modal-footer {
border-top: 1px solid #dee2e6;
padding: 1rem 1.5rem;
}
.modal .modal-footer .btn {
padding: 0.5rem 1.5rem;
font-weight: 500;
border-radius: 4px;
}
.modal .modal-footer .btn.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
color: white;
}
.modal .modal-footer .btn.btn-secondary:hover {
background-color: #5a6268;
border-color: #545b62;
}
#pdfContent {
height: 100% !important;
}
.history_box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: none;
margin-bottom: 1rem;
position: relative;
}
.history_box .btn {
position: absolute;
right: 0;
top: 1rem;
color: #036EB8;
font-size: 16px;
font-weight: 500;
}
.history_box h5 {
margin: .5rem 0 2rem !important;
font-size: 20px;
padding: 0 !important;
}
.history_box table {
width: 100%;
}
.history_box table th, .history_box table td {
font-size: 14px;
padding: 12px 0;
}
.history_box table th {
border-bottom: 1px solid #eee;
}
.history_box table tbody {
border-top: 1px solid #eee !important;
}
.history_box table td {
padding: 16px 0;
font-size: 0.75em;
}
.history_box table td span {
font-size: 0.75em !important;
}
.history_box table td .bg-info {
background: none !important;
color: #15be7d !important;
border: 1px solid #15be7d !important;
padding: 0.25rem 0.5rem;
}
.history_box table td .bg-primary {
background: none !important;
color: #036EB8 !important;
border: 1px solid #036EB8 !important;
padding: 0.25rem 0.5rem;
}
.history_box table td .bg-success {
background: none !important;
color: #15be7d !important;
border: 1px solid #15be7d !important;
padding: 0.25rem 0.5rem;
}
.history_box table td a {
position: relative;
bottom: auto;
right: auto;
top: auto;
left: auto;
}
.step-progress {
margin: 1rem 0;
}
.step-progress .steps {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.step-progress .steps .step {
position: relative;
width: 30%;
padding: 0.1rem .5rem;
border-radius: 30px;
transition: all 0.3s ease;
z-index: 3;
}
.step-progress .steps .step.completed {
background-color: rgba(3, 110, 184, 0.1);
border: 1px solid #036EB8;
}
.step-progress .steps .step.completed .step-number {
color: #036EB8;
font-weight: 600;
}
.step-progress .steps .step.completed .step-status {
color: #28a745;
margin-top: 0.25rem;
}
.step-progress .steps .step.incomplete {
background-color: transparent;
border: 1px dashed #ccc;
}
.step-progress .steps .step.incomplete .step-number {
color: #6c757d;
}
.step-progress .steps .step.disabled {
background-color: transparent;
border: 1px solid #eee;
opacity: 0.5;
}
.step-progress .steps .step.disabled .step-number {
color: #ccc;
}
.step-progress .steps .step .step-number {
font-size: 0.9rem;
}
.feedback-list {
padding: 2rem 1rem;
background: white;
}
.feedback-list h4 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 3rem;
}
.feedback-list h4 i {
margin-right: 10px;
color: #036EB8;
}
.feedback-list .table {
table-layout: fixed;
}
.feedback-list .table th {
font-weight: 600;
color: #272727;
}
.feedback-list .table tbody {
border-top: 1px solid #eee;
}
.feedback-list .table th, .feedback-list .table td {
padding: 16px;
}
.feedback-list .table th:first-of-type, .feedback-list .table td:first-of-type {
width: 40%;
}
.feedback-list .table th:nth-of-type(2), .feedback-list .table th:nth-of-type(3), .feedback-list .table td:nth-of-type(2), .feedback-list .table td:nth-of-type(3) {
width: 10%;
}
.feedback-list .table td a {
padding: 0;
}
.feedback-list .table td .bg-info {
background: none !important;
color: #15be7d;
border: 1px solid #15be7d;
}
.feedback-list .table td .bg-primary {
background: none !important;
color: #036EB8;
border: 1px solid #036EB8;
}
.feedback-list .table .badge {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
}
.feedback-detail {
padding: 2rem 0;
}
.feedback-detail .back-link {
color: #036EB8;
font-size: 16px;
font-weight: 500;
margin-bottom: 1.5rem;
display: inline-block;
text-decoration: none;
}
.feedback-detail .back-link:hover {
text-decoration: underline;
}
.feedback-detail .feedback-card {
background: white;
padding: 1.5rem;
margin-bottom: 2rem;
}
.feedback-detail .feedback-card .feedback-header {
border-bottom: 1px solid #eee;
padding-bottom: 1rem;
margin-bottom: 1.5rem;
}
.feedback-detail .feedback-card .feedback-header h4 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 0.5rem;
}
.feedback-detail .feedback-card .feedback-header h4 span {
font-size: 14px;
display: block;
margin: 0.5rem 0 1rem;
color: #666;
}
.feedback-detail .feedback-card .feedback-header h4 i {
margin-right: 10px;
color: #036EB8;
}
.feedback-detail .feedback-card .feedback-header .submission-info {
display: flex;
align-items: center;
}
.feedback-detail .feedback-card .feedback-header .submission-info .badge {
margin-right: 1rem;
}
.feedback-detail .feedback-card .feedback-header .submission-info .submission-date {
color: #6c757d;
font-size: 0.9rem;
}
.feedback-detail .feedback-card .feedback-header .submission-info .submission-date i {
margin-right: 5px;
}
.feedback-detail .feedback-card .feedback-content {
background: none;
}
.feedback-detail .feedback-card .feedback-content h5 {
font-size: 16px;
font-weight: 600;
color: #272727;
margin: 1.5rem 0 0.75rem;
}
.feedback-detail .feedback-card .feedback-content h5:first-child {
margin-top: 0;
}
.feedback-detail .feedback-card .feedback-content .feedback-section h5 {
margin: 1rem 0 !important;
font-size: 18px !important;
padding: 0 !important;
}
.feedback-detail .feedback-card .feedback-content .feedback-section .feedback-display {
padding: 0 !important;
}
.feedback-detail .feedback-card .feedback-content .score-display {
margin-bottom: 1.5rem;
}
.feedback-detail .feedback-card .feedback-content .score-display .badge {
font-size: 1.2rem;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.feedback-detail .feedback-card .feedback-content .feedback-display {
padding: 1rem;
border-radius: 4px;
margin-bottom: 1.5rem;
}
.feedback-detail .feedback-card .feedback-content .feedback-display p {
margin: 0;
color: #272727;
line-height: 1.5;
}
.feedback-detail .feedback-card .feedback-content .project-preview .preview-frame {
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
}
.feedback-detail .feedback-card .feedback-content .quiz-answers .table th {
background-color: #f8f9fa;
font-weight: 600;
}
.feedback-detail .feedback-card .feedback-content .quiz-answers .table .badge {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
}
.lesson-card {
padding: 2rem 2rem !important;
margin: 3rem 0 2rem;
}
.lesson-card h3 {
background: #eef8ff;
display: inline-block;
font-size: 14px;
padding: 4px 6px;
}
.lesson-title {
margin: 1rem 0 !important;
}
.text-center {
margin: 1rem 0 !important;
}
.history_page {
padding: 2rem 0 5rem;
}
.history_page a {
color: #036EB8;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.history_page a:hover {
text-decoration: underline;
}
.history_page h5 {
font-size: 28px !important;
padding-left: 0 !important;
}
.history_page h5 i {
margin-right: 8px;
}
.history_page .submission-detail {
border-bottom: 1px solid #eee;
}
.history_page .submission-detail p {
background: #eef8ff;
color: #036EB8;
padding: 4px 16px;
border-radius: 8px;
margin-bottom: 1rem;
display: inline-block;
}
.history_page .submission-detail h6 {
margin-top: 1rem;
font-size: 24px;
}
.history_page .submission-detail h6 span {
font-size: 80%;
}
.history_page .submission-detail h6 span:first-of-type {
margin-right: 1rem;
}
.history_page .submission-detail h6 span:last-of-type {
margin-left: 1rem;
}
.history_page .submission-detail h5 {
font-size: 20px !important;
margin-top: 1rem !important;
margin-bottom: 2rem !important;
}
.history_page .submission-detail h5 span {
font-size: 24px;
font-weight: 600;
color: #036EB8;
margin-left: 8px;
margin-right: 8px;
}
.history_page .submission-detail h5 i {
font-size: 16px;
margin: 0 !important;
color: #036EB8;
}
.history_page .project-detail {
padding-top: 2rem;
}
.history_page .project-detail h6 {
font-size: 20px;
margin-bottom: 1rem;
}
.history_page .quiz-detail {
padding-top: 2rem;
}
.history_page .quiz-detail h5 {
font-size: 18px !important;
}
.history_page .quiz-detail h5::before {
content: "Q.";
font-size: 150%;
margin-right: 8px;
}
.history_page .quiz-detail h5 span {
font-size: 60%;
margin-left: 8px;
}
.history_page .quiz-detail p span {
margin: 0 16px;
}
.lesson_box {
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: none;
margin: 1rem 0;
}
.advice-content .btn {
display: block;
width: 200px !important;
}
.evaluation-chart {
background: white;
padding: 20px;
border-radius: 8px;
}
.chart-container {
position: relative;
height: 300px;
width: 100%;
margin: 0 auto;
}
.evaluation-details {
padding: 0 20px;
}
.overall-score {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.overall-score h2 {
font-size: 48px;
color: #036EB8;
margin: 0;
font-weight: bold;
}
.score-label {
color: #666;
margin: 5px 0 0;
font-size: 14px;
}
.score-items {
margin-top: 20px;
}
.score-item {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
.score-item:last-child {
border-bottom: none;
}
.score-item h6 {
color: #036EB8;
margin-bottom: 8px;
font-weight: bold;
}
.score-description {
font-size: 0.9rem;
color: #666;
margin-bottom: 0;
}
.score_modal {
background: white !important;
}
.icon_btn {
background: none !important;
border: none !important;
color: #036EB8 !important;
font-size: 20px;
}
.advice-section {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.advice-content {
font-size: 0.9rem;
line-height: 1.6;
margin-top: 15px;
color: #272727 !important;
}
.advice-content p {
margin-bottom: 0;
padding: 15px;
border-radius: 4px;
}
.advice-content strong {
font-size: 1.1rem;
margin-bottom: 10px;
display: block;
}
.advice-item {
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 10px;
overflow: hidden;
}
.advice-header {
padding: 10px 15px;
background: #f8f9fa;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.advice-header:hover {
background: #f1f1f1;
}
.advice-details {
padding: 15px;
display: none;
background: white;
}
.ai-evaluation-section {
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
.ai-evaluation-section h6 {
margin-bottom: 10px;
font-weight: bold;
}
.ai-evaluation-section small {
color: rgba(255, 255, 255, 0.8);
}
.ai-evaluation-section .btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
transition: all 0.3s ease;
}
.ai-evaluation-section .btn:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
color: white;
}
.ai-comment {
padding: 15px;
border-radius: 8px;
margin: 10px 0;
font-size: 1.1em;
line-height: 1.5;
}
.student_portal {
min-height: calc(100vh - 120px);
background: #f1f5f9;
}
.student_portal__layout {
min-height: calc(100vh - 120px);
}
.student_portal__sidebar {
padding: 0 !important;
background: #fff;
border-right: 1px solid #e2e8f0;
}
.student_portal__main {
padding: 1.25rem 1.5rem 2rem;
min-width: 0;
}
.student_portal__aside {
padding: 1.25rem 1rem 2rem;
border-left: 1px solid #e2e8f0;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
display: flex;
flex-direction: column;
gap: 1rem;
}
.student-portal-hero {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
padding: 1.35rem 1.5rem;
background: linear-gradient(125deg, #013d66 0%, #036eb8 45%, #0891d4 100%);
border-radius: 16px;
color: #fff;
box-shadow: 0 14px 36px rgba(1, 61, 102, 0.2);
overflow: hidden;
}
.student-portal-hero__glow {
position: absolute;
top: -45%;
right: -8%;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 68%);
pointer-events: none;
}
.student-portal-hero__content {
position: relative;
z-index: 1;
min-width: 0;
}
.student-portal-hero__eyebrow {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.student-portal-hero__datetime {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 0.85rem;
margin: 0 0 0.45rem;
}
.student-portal-hero__date {
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.student-portal-hero__time {
font-size: 1.05rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
color: #fff;
}
.student-portal-hero__time-sep {
opacity: 0.55;
animation: student-clock-blink 1s step-end infinite;
}
.student-portal-hero__title {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.35rem;
font-size: clamp(1.15rem, 2vw, 1.55rem);
font-weight: 800;
line-height: 1.3;
}
.student-portal-hero__title i {
font-size: 1.2rem;
opacity: 0.95;
}
.student-portal-hero__lead {
margin: 0;
max-width: 52ch;
font-size: 0.8125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.92);
}
.student-portal-hero__count {
position: relative;
z-index: 1;
flex-shrink: 0;
align-self: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
font-size: 0.75rem;
font-weight: 700;
}
.student-portal-section {
margin-bottom: 1.25rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.student-portal-section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.15rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e2e8f0;
}
.student-portal-section__title {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 800;
color: #0f172a;
}
.student-portal-section__title i {
color: #036eb8;
}
.student-portal-section__link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
font-weight: 700;
color: #036eb8;
text-decoration: none;
white-space: nowrap;
}
.student-portal-section__link:hover {
color: #025a96;
text-decoration: underline;
}
.student-portal-section--submissions .student-portal-section__head + .table-responsive,
.student-portal-section--submissions .student-portal-section__head + .student-portal-empty {
padding: 0 1.15rem 1.15rem;
}
.student-portal-section--submissions .student-portal-section__head + .table-responsive {
padding-top: 0.5rem;
}
.student-portal-section .student-lesson-grid {
padding: 1rem 1.15rem 1.15rem;
}
.student-data-table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.student-data-table thead th {
padding: 0.55rem 0.5rem;
border-bottom: 1px solid #e2e8f0;
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
text-align: left;
white-space: nowrap;
}
.student-data-table tbody td {
padding: 0.75rem 0.5rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.8125rem;
color: #334155;
vertical-align: middle;
}
.student-data-table tbody tr:last-child td {
border-bottom: none;
}
.student-score-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
}
.student-score-badge small {
font-weight: 600;
opacity: 0.85;
}
.student-score-badge--base {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.student-score-badge--mid {
background: #eff6ff;
color: #036eb8;
border: 1px solid #bfdbfe;
}
.student-score-badge--high {
background: #eef2ff;
color: #4338ca;
border: 1px solid #c7d2fe;
}
.student-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 8px;
background: #f8fafc;
color: #036eb8;
text-decoration: none;
}
.student-table-action:hover {
background: #eff6ff;
color: #025a96;
}
.student-lesson-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.student-lesson-grid--wide {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 1200px) {
.student-lesson-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.student-lesson-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.student-lesson-card-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.student-lesson-card-link:hover .student-lesson-card {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
border-color: #bfdbfe;
}
.student-lesson-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 1rem 1.1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.student-lesson-card__head {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.student-lesson-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
border-radius: 12px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #036eb8;
flex-shrink: 0;
}
.student-lesson-card__icon i {
font-size: 1.15rem;
}
.student-lesson-card__title {
margin: 0;
font-size: 0.9375rem;
font-weight: 800;
line-height: 1.35;
color: #0f172a;
}
.student-lesson-card__desc {
display: -webkit-box;
margin: 0 0 0.85rem;
font-size: 0.78rem;
line-height: 1.55;
color: #64748b;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.student-lesson-card__progress-label {
margin: 0 0 0.45rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #94a3b8;
text-transform: uppercase;
}
.student-lesson-card__action {
margin-top: auto;
padding-top: 0.85rem;
}
.student-lesson-card__cta, .student-lesson-card__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: 10px;
background: #036eb8;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
}
.student-lesson-card__btn:hover {
background: #025a96;
color: #fff;
}
.student-lesson-card__badge {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 700;
}
.student-lesson-card__badge--done {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.student-lesson-card__badge--progress {
background: #fffbeb;
color: #b45309;
border: 1px solid #fde68a;
}
.student-step-track {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.student-step-track__item {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.student-step-track__item:not(:last-child)::after {
content: "";
position: absolute;
top: 0.85rem;
left: calc(50% + 0.85rem);
width: calc(100% - 1.7rem);
height: 2px;
background: #e2e8f0;
z-index: 0;
}
.student-step-track__item--completed:not(:last-child)::after {
background: #93c5fd;
}
.student-step-track__dot {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
border: 2px solid #cbd5e1;
background: #fff;
color: #fff;
font-size: 0.75rem;
}
.student-step-track__item--completed .student-step-track__dot {
background: #036eb8;
border-color: #036eb8;
}
.student-step-track__item--incomplete .student-step-track__dot {
border-style: dashed;
border-color: #94a3b8;
}
.student-step-track__item--disabled .student-step-track__dot {
opacity: 0.45;
border-color: #e2e8f0;
}
.student-step-track__label {
font-size: 0.62rem;
font-weight: 700;
color: #64748b;
white-space: nowrap;
}
.student-step-track__item--completed .student-step-track__label {
color: #036eb8;
}
.student-widget {
margin-bottom: 1rem;
padding: 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.student-widget__title {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.75rem;
font-size: 0.8125rem;
font-weight: 800;
color: #0f172a;
}
.student-widget__title i {
color: #036eb8;
}
.student-digital-clock {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.1rem;
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: 800;
font-variant-numeric: tabular-nums;
color: #036eb8;
letter-spacing: 0.04em;
}
.student-digital-clock__sep {
opacity: 0.55;
animation: student-clock-blink 1s step-end infinite;
}
@keyframes student-clock-blink {
50% {
opacity: 0.15;
}
}
.student-mini-calendar {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.student-mini-calendar th,
.student-mini-calendar td {
padding: 0.28rem 0;
font-size: 0.68rem;
text-align: center;
vertical-align: middle;
}
.student-mini-calendar th {
font-weight: 700;
color: #64748b;
}
.student-mini-calendar td {
color: #334155;
border-radius: 6px;
}
.student-mini-calendar td.is-muted {
color: #cbd5e1;
}
.student-mini-calendar td.is-today {
background: #036eb8;
color: #fff;
font-weight: 800;
}
.student-portal-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 2.5rem 1rem;
text-align: center;
color: #64748b;
}
.student-portal-empty i {
font-size: 2rem;
color: #94a3b8;
}
.student-portal-empty p {
margin: 0;
font-size: 0.875rem;
}
.student-portal-empty--compact {
padding: 1.5rem 1rem;
}
.student-portal-empty__btn {
display: inline-flex;
align-items: center;
margin-top: 0.35rem;
padding: 0.45rem 0.85rem;
border-radius: 8px;
background: #036eb8;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
}
.student-portal-empty__btn:hover {
background: #025a96;
color: #fff;
}
.page-student-dashboard .student-lesson-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1200px) {
.page-student-dashboard .student-lesson-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 992px) {
.page-student-dashboard .student-lesson-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.page-student-dashboard .student-lesson-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.page-student-lessons .student_portal__main {
padding-bottom: 2.5rem;
}
.page-student-lessons .student-lesson-grid {
margin-top: 0.25rem;
}
.student-typing-widget {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
padding: 1rem;
overflow: hidden;
}
.student-typing-widget__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.student-typing-widget__title {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0;
font-size: 0.875rem;
font-weight: 800;
color: #0f172a;
}
.student-typing-widget__title i {
color: #036eb8;
}
.student-typing-widget__expand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
color: #036eb8;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.student-typing-widget__expand:hover {
background: #eff6ff;
border-color: #bfdbfe;
}
.student-typing-widget__lead {
margin: 0 0 0.75rem;
font-size: 0.72rem;
line-height: 1.55;
color: #64748b;
}
.student-typing-widget__best {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.85rem;
padding: 0.55rem 0.65rem;
border-radius: 10px;
background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
border: 1px solid #dbeafe;
}
.student-typing-widget__best--modal {
margin-bottom: 1.25rem;
}
.student-typing-widget__best-label {
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
}
.student-typing-widget__best-value {
font-size: 0.78rem;
color: #334155;
}
.student-typing-widget__best-value strong {
font-size: 0.9375rem;
font-weight: 800;
color: #036eb8;
}
.student-typing-widget__best-sep {
margin: 0 0.15rem;
color: #94a3b8;
}
.student-typing-widget__start {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 0.65rem 0.85rem;
border: none;
border-radius: 10px;
background: #036eb8;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease;
}
.student-typing-widget__start:hover {
background: #025a96;
}
.student-typing-widget__start--large {
padding: 0.85rem 1rem;
font-size: 0.9375rem;
}
.student-typing-game__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.35rem;
margin-bottom: 0.75rem;
}
.student-typing-game__stats--modal {
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.student-typing-game__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
padding: 0.45rem 0.25rem;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.student-typing-game__stat-label {
font-size: 0.62rem;
font-weight: 700;
color: #94a3b8;
}
.student-typing-game__stat-value {
font-size: 0.9375rem;
font-weight: 800;
color: #0f172a;
font-variant-numeric: tabular-nums;
}
.student-typing-game__stat-value small {
margin-left: 0.1rem;
font-size: 0.62rem;
font-weight: 700;
color: #64748b;
}
.student-typing-game__stat-value--timer {
color: #036eb8;
}
.student-typing-game__word {
min-height: 2.5rem;
margin-bottom: 0.65rem;
padding: 0.55rem 0.65rem;
border-radius: 10px;
background: #0f172a;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.06em;
text-align: center;
line-height: 1.5;
}
.student-typing-game__word--modal {
min-height: 4rem;
padding: 1rem;
font-size: clamp(1.5rem, 4vw, 2.25rem);
border-radius: 14px;
}
.student-typing-game__char {
color: #94a3b8;
}
.student-typing-game__char.is-correct {
color: #4ade80;
}
.student-typing-game__char.is-wrong {
color: #f87171;
}
.student-typing-game__char.is-current {
color: #fff;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.student-typing-game__input {
width: 100%;
padding: 0.55rem 0.65rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
background: #fff;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.875rem;
color: #0f172a;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.student-typing-game__input:focus {
border-color: #036eb8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.15);
}
.student-typing-game__input--modal {
padding: 0.85rem 1rem;
font-size: 1.125rem;
border-radius: 12px;
}
.student-typing-game__result {
text-align: center;
}
.student-typing-game__result--modal {
padding: 0.5rem 0 0.25rem;
}
.student-typing-game__result-title {
margin: 0 0 0.75rem;
font-size: 0.9375rem;
font-weight: 800;
color: #036eb8;
}
.student-typing-game__result-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
margin: 0 0 0.85rem;
}
.student-typing-game__result-stats--modal {
gap: 1rem;
margin-bottom: 1.25rem;
}
.student-typing-game__result-stats div {
padding: 0.65rem;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.student-typing-game__result-stats dt {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
}
.student-typing-game__result-stats dd {
margin: 0;
font-size: 1.125rem;
font-weight: 800;
color: #0f172a;
}
.student-typing-modal__content {
border: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}
.student-typing-modal__header {
padding: 1rem 1.25rem;
background: linear-gradient(125deg, #013d66 0%, #036eb8 100%);
border-bottom: none;
color: #fff;
}
.student-typing-modal__header .btn-close {
filter: invert(1) grayscale(1) brightness(2);
}
.student-typing-modal__title {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 1.05rem;
font-weight: 800;
}
.student-typing-modal__body {
padding: 1.25rem 1.5rem 1.5rem;
}
.student-typing-modal__lead {
margin: 0 0 1rem;
font-size: 0.875rem;
color: #64748b;
text-align: center;
}
.student-typing-weekly {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
padding: 1rem;
}
.student-typing-weekly__title {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.75rem;
font-size: 0.8125rem;
font-weight: 800;
color: #0f172a;
}
.student-typing-weekly__title i {
color: #036eb8;
}
.student-typing-weekly__list {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.student-typing-weekly__row {
display: grid;
grid-template-columns: 1.1rem 1fr auto;
align-items: center;
gap: 0.45rem;
}
.student-typing-weekly__row.is-today .student-typing-weekly__day {
color: #036eb8;
font-weight: 800;
}
.student-typing-weekly__row.is-today .student-typing-weekly__score {
color: #036eb8;
font-weight: 800;
}
.student-typing-weekly__row.is-empty .student-typing-weekly__fill {
opacity: 0.35;
}
.student-typing-weekly__day {
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
text-align: center;
}
.student-typing-weekly__track {
display: block;
height: 0.45rem;
border-radius: 999px;
background: #e2e8f0;
overflow: hidden;
}
.student-typing-weekly__fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #60a5fa 0%, #036eb8 100%);
transition: width 0.35s ease;
}
.student-typing-weekly__row.is-today .student-typing-weekly__fill {
background: linear-gradient(90deg, #0891d4 0%, #013d66 100%);
}
.student-typing-weekly__score {
min-width: 2.2rem;
font-size: 0.68rem;
font-weight: 600;
color: #64748b;
text-align: right;
white-space: nowrap;
}
.student-typing-weekly__note {
margin: 0.65rem 0 0;
font-size: 0.6rem;
color: #94a3b8;
line-height: 1.4;
}
.student-programming-tip {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
padding: 1rem;
}
.student-programming-tip__title {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.65rem;
font-size: 0.8125rem;
font-weight: 800;
color: #0f172a;
}
.student-programming-tip__title i {
color: #f59e0b;
}
.student-programming-tip__card {
padding: 0.75rem 0.85rem;
border-radius: 12px;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 1px solid #fde68a;
}
.student-programming-tip__term {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
margin: 0 0 0.45rem;
}
.student-programming-tip__term code {
padding: 0.15rem 0.45rem;
border-radius: 6px;
background: rgba(15, 23, 42, 0.08);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.8125rem;
font-weight: 700;
color: #0f172a;
}
.student-programming-tip__term-label {
font-size: 0.72rem;
font-weight: 800;
color: #b45309;
}
.student-programming-tip__body {
margin: 0;
font-size: 0.75rem;
line-height: 1.65;
color: #78350f;
}
.student-chapter-track {
display: flex;
align-items: center;
gap: 0.6rem;
}
.student-chapter-track__bar {
flex: 1;
height: 8px;
border-radius: 999px;
background: #e6eaf2;
overflow: hidden;
}
.student-chapter-track__bar i {
display: block;
height: 100%;
border-radius: 999px;
background: #1f9d63;
}
.student-chapter-track__count {
flex: none;
margin: 0;
font-size: 0.78rem;
font-weight: 700;
color: #5b6472;
white-space: nowrap;
}
.student-chapter-track__count b {
font-size: 0.95rem;
color: #1f2430;
}
.student-file-upload .evaluation-result .result-icon-large {
font-size: 4rem;
}
.student-file-upload .evaluation-result .result-icon-warning {
font-size: 4rem;
}
.student-file-upload .evaluation-result .feedback-content-error {
white-space: pre-line;
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
.student-file-upload .evaluation-result .textbook-content-info {
background: #e7f3ff;
padding: 15px;
border-radius: 8px;
}
.student-file-upload .previous-result-area .alert .btn-outline-primary {
border-radius: 20px;
padding: 6px 16px;
font-size: 12px;
}
.student-file-upload .previous-result-area .alert .btn-outline-primary:hover {
background-color: #007bff;
border-color: #007bff;
color: white;
}
.student-file-upload .previous-result-area .alert .result-score .badge {
font-size: 14px;
padding: 8px 12px;
border-radius: 20px;
}
.student-file-upload .previous-result-area .alert .result-status .badge {
font-size: 12px;
padding: 6px 10px;
border-radius: 16px;
}
.student-file-upload .previous-result-area .alert .result-timestamp {
border-top: 1px solid #bee5eb;
padding-top: 8px;
margin-top: 8px;
}
.student-file-upload .previous-result-area .alert .result-timestamp small {
font-size: 11px;
}
.student-file-upload .modal .modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.student-file-upload .modal .modal-content .modal-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #dee2e6;
border-radius: 12px 12px 0 0;
}
.student-file-upload .modal .modal-content .modal-header .modal-title {
color: #272727;
font-weight: 600;
}
.student-file-upload .modal .modal-content .modal-header .modal-title i {
color: #007bff;
}
.student-file-upload .modal .modal-content .modal-body {
padding: 24px;
}
.student-file-upload .modal .modal-content .modal-body .result-summary {
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
}
.student-file-upload .modal .modal-content .modal-body .result-summary .result-status {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.student-file-upload .modal .modal-content .modal-body .result-summary .result-status.success {
background-color: #d4edda;
color: #155724;
}
.student-file-upload .modal .modal-content .modal-body .result-summary .result-status.warning {
background-color: #fff3cd;
color: #856404;
}
.student-file-upload .modal .modal-content .modal-body .result-summary .result-status.error {
background-color: #f8d7da;
color: #721c24;
}
.student-file-upload .modal .modal-content .modal-body .feedback-details .feedback-title {
color: #272727;
font-weight: 600;
border-bottom: 2px solid #007bff;
padding-bottom: 8px;
margin-bottom: 16px;
}
.student-file-upload .modal .modal-content .modal-body .feedback-details .feedback-title i {
color: #007bff;
}
.student-file-upload .modal .modal-content .modal-body .feedback-details .feedback-content {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 16px;
line-height: 1.6;
color: #272727;
}
.student-file-upload .modal .modal-content .modal-footer {
border-top: 1px solid #dee2e6;
padding: 16px 24px;
}
.student-file-upload .modal .modal-content .modal-footer .btn-secondary {
border-radius: 6px;
padding: 8px 20px;
}
.school_page {
min-height: 100vh;
}
.school_page .row {
margin: 0 !important;
}
.school_page .row .col-2 {
padding: 0 !important;
}
.school_page .row .col-10 {
padding: 0 !important;
}
.school_page .row .col-10 .main-content {
padding: 3rem 2rem;
}
.school_page .row .col-10 .main-content .card {
box-shadow: none !important;
}
.school_page .row .col-10 .main-content .announcements-section {
border-top: 1px solid #eee;
padding: 3rem 0 0;
}
.school_page .row .col-10 .main-content .announcements-section h5 {
margin: 0;
text-align: left;
color: #333;
font-size: 20px;
}
.school_page .row .col-10 .main-content .announcements-section h5 span {
display: block;
font-size: 12px;
margin-top: 8px;
}
.school_page .row .col-10 .main-content .info {
width: 100%;
table-layout: fixed;
margin: 4rem 0 0 !important;
}
.school_page .row .col-10 .main-content .info th,
.school_page .row .col-10 .main-content .info td {
font-size: 16px;
padding: 12px 0;
}
.school_page .row .col-10 .main-content .info tr {
border-bottom: 1px solid #eee;
}
.school_page .row .col-10 .main-content .info th {
width: 20%;
font-weight: 500;
}
.school_page .row .col-10 .main-content .info td {
width: 80%;
}
.school_page .row .col-10 .main-content .row {
min-height: auto !important;
margin-bottom: 2rem;
height: auto !important;
}
.school_page .row .col-10 .main-content .row .col-12 {
width: 100%;
}
.school_page .row .col-10 .main-content .row .col-12 .card .card-body {
background: #fff;
}
.school_page .row .col-10 .main-content .row .col-12 .card .card-body h6 {
font-size: 18px;
font-weight: 600;
margin-bottom: 1rem;
}
.school_page .row .col-10 .main-content .row .col-12 .card .card-body .card-title {
font-size: 24px;
}
.school_page .row .col-10 .main-content .row .col-12 .card .card-body .card-title span {
font-size: 48px;
font-weight: 600;
margin-left: 8px;
}
.school_page .row .col-10 .main-content .row .col-12 .card .card-body .row {
background: white;
}
.school_page .row .col-10 .main-content .row .col-12 .card .card-body .row .col-2 .grade-stat {
background: #fff;
border-right: 1px solid #f2f2f2;
border-radius: 0;
padding: 0 16px;
}
.student_list {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.student_list h4 {
color: #333;
font-weight: 500;
font-size: 20px;
}
.student_list h4 i {
margin-right: 8px;
color: #036EB8;
}
.student_list .link-list li {
list-style-type: none;
display: inline-block;
}
.student_list .link-list li a {
background: #036EB8;
color: white;
border-radius: 4px;
padding: 8px 16px !important;
margin-right: 1rem;
text-decoration: none;
font-size: 14px;
border: none !important;
font-weight: 600;
}
.student_list .link-list li a i {
margin-right: 8px;
}
.student_list .link-list li:last-of-type a {
background: none;
color: #036EB8;
border: none;
}
.student_list .accordion .accordion-item {
border: 1px solid #e9ecef;
margin-bottom: 0.5rem;
border-radius: 4px;
overflow: hidden;
}
.student_list .accordion .accordion-item:first-of-type {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.student_list .accordion .accordion-item:last-of-type {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.student_list .accordion .accordion-item .accordion-header {
margin: 0;
}
.student_list .accordion .accordion-item .accordion-header .accordion-button {
padding: 1rem 1.25rem;
font-weight: 500;
color: #333;
background-color: #fff;
border: none;
box-shadow: none;
}
.student_list .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
color: #036EB8;
background-color: #f8f9fa;
}
.student_list .accordion .accordion-item .accordion-header .accordion-button::after {
background-size: 1.25rem;
transition: transform 0.2s ease-in-out;
}
.student_list .accordion .accordion-item .accordion-header .accordion-button .badge {
font-size: 0.75rem;
padding: 0.35em 0.65em;
}
.student_list .accordion .accordion-item .accordion-body {
padding: 1.25rem;
}
.student_list .accordion .accordion-item .accordion-body .table {
margin-bottom: 0;
}
.student_list .accordion .accordion-item .accordion-body .table thead th {
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
color: #495057;
font-weight: 500;
padding: 0.75rem;
}
.student_list .accordion .accordion-item .accordion-body .table tbody td {
padding: 0.75rem;
vertical-align: middle;
}
.student_list .accordion .accordion-item .accordion-body .btn-group .btn {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
.student_list .accordion .accordion-item .accordion-body .btn-group .btn:not(:last-child) {
margin-right: 0.25rem;
}
.student_list .accordion .accordion-item .accordion-body .btn-group .btn i {
font-size: 1rem;
}
.student_list .search-form {
border-radius: 8px;
margin-bottom: 2rem;
}
.student_list .search-form .form-label {
font-weight: 500;
color: #495057;
margin-bottom: 0.5rem;
}
.student_list .search-form .form-select,
.student_list .search-form .form-control {
border: 1px solid #ced4da;
border-radius: 4px;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.student_list .search-form .form-select:focus,
.student_list .search-form .form-control:focus {
border-color: #036EB8;
box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.student_list .search-form .btn-primary {
background-color: #036EB8;
border-color: #036EB8;
}
.student_list .search-form .btn-primary:hover {
background-color: #025aa5;
border-color: #025aa5;
}
.student_detail {
background: #fff;
}
.student_detail .card {
box-shadow: none;
}
.student_detail .row {
background: white !important;
}
.student_detail .icon_btn {
color: white;
background: #036EB8;
text-decoration: none;
margin-bottom: 0 !important;
padding: 8px 10px !important;
line-height: 1 !important;
}
.student_detail .icon_btn.btn-danger {
background: #dc3545;
}
.student_detail .icon_btn.btn-danger:hover {
background: #c82333;
}
.student_detail h4 {
font-size: 24px;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.student_detail h4 i {
margin-right: 8px;
}
.student_detail table {
width: 100%;
table-layout: fixed;
}
.student_detail table th {
width: 20%;
}
.student_detail table td {
width: 80%;
text-align: left !important;
}
.student_detail .link-list {
margin-bottom: 2rem 0;
}
.student_detail .link-list li a {
color: #036EB8;
text-decoration: none;
background: none;
margin-bottom: 0;
}
.student_detail .link-list li a i {
margin-right: 8px;
}
.student_detail .form-group {
max-width: 960px;
margin: 1rem auto !important;
}
.student_detail .form-group .col-2 {
text-align: left !important;
}
.student_detail .form-group .col-2 label {
text-align: left;
}
.student_detail .form-group .col-2 span {
display: block;
font-size: 12px;
color: #666;
}
.student_detail .form-group .col-10 input,
.student_detail .form-group .col-10 select {
font-size: 18px;
padding: 4px 16px;
width: 100%;
}
.student_detail ul.link-list:not(.shop-toolbar) {
margin: 2rem 0;
display: flex;
justify-content: space-between;
}
.student_detail ul.link-list:not(.shop-toolbar) li {
list-style-type: none;
display: inline-block;
padding: 0 24px;
}
.student_detail ul.link-list:not(.shop-toolbar) li a {
color: #333;
font-weight: 500;
text-decoration: none;
font-size: 18px;
}
.student_detail ul.link-list:not(.shop-toolbar) li a i {
margin-right: 8px;
}
.student_detail ul.link-list:not(.shop-toolbar) li .icon_btn {
background: #036EB8;
color: white;
border-radius: 4px;
padding: 8px 10px !important;
line-height: 1 !important;
}
.student_detail h4 {
margin-bottom: 0;
color: #333;
font-weight: 500;
}
.student_detail .card {
background: #fff;
border-radius: 8px;
box-shadow: none;
}
.student_detail .card:hover {
box-shadow: none;
}
.student_detail .card .card-body {
padding: 2rem;
}
.student_detail .card .card-body table {
table-layout: fixed;
width: 100%;
}
.student_detail .card .card-body table th {
color: #666;
font-weight: 500;
padding: 1rem;
width: 20% !important;
text-align: left;
}
.student_detail .card .card-body table td {
padding: 1rem;
width: 80%;
}
.student_detail .card .card-body table td .form-control,
.student_detail .card .card-body table td .form-select {
width: 100%;
padding: 12px;
border: 1px solid #f2f2f2;
}
.student_detail .card .card-body table td .input-group {
width: 100%;
}
.student_detail .card .card-body table td .input-group .input-group-text {
background: none;
border-left: none;
color: #666;
border: 1px solid #f2f2f2;
}
.student_detail .learning-stats .stat-card {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
}
.student_detail .learning-stats .stat-card .stat-label {
color: #666;
font-size: 14px;
margin-bottom: 0.5rem;
}
.student_detail .learning-stats .stat-card .stat-value {
color: #333;
font-size: 24px;
font-weight: 500;
}
.student_detail .course-progress h6 {
color: #666;
font-weight: 500;
}
.student_detail .course-progress .progress {
height: 1.5rem;
background-color: #f8f9fa;
}
.student_detail .course-progress .progress .progress-bar {
font-size: 12px;
line-height: 1.5rem;
}
.student_detail .recent-submissions h6 {
color: #666;
font-weight: 500;
}
.student_detail .recent-submissions .table th {
background: #f8f9fa;
font-weight: 500;
font-size: 14px;
}
.student_detail .recent-submissions .table td {
font-size: 14px;
vertical-align: middle;
}
.student_detail .alert {
margin-bottom: 1.5rem;
}
.student_detail .alert.alert-success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.student_detail .alert.alert-danger {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
.student_detail .alert .btn-close {
padding: 0.75rem;
}
.action .btn {
background: #036EB8;
color: white;
border-radius: 4px;
border: none;
padding: 12px 40px;
margin: 2rem 0;
}
.d-flex .current {
padding: 4px 16px !important;
background: none;
color: #036EB8;
border: 1px solid #036EB8;
border-radius: 0px;
}
.d-flex a {
color: #666;
padding: 4px 16px !important;
background: none;
border-radius: 0px;
border: 1px solid #666;
margin-bottom: 3rem;
display: inline-block;
text-decoration: none;
}
.back {
background: none !important;
color: #333 !important;
margin: 2rem 0;
}
.csv-import-guide h5 {
font-size: 20px;
margin: 2rem 0;
}
.csv-import-guide table {
margin: 2rem 0 !important;
}
.template {
margin: 2rem 0;
}
.template a {
background: #036EB8;
color: white;
border-radius: 4px;
border: none;
padding: 12px 40px;
margin: 2rem 0;
display: inline-block;
text-decoration: none;
}
.template a i {
margin-right: 8px;
}
.file-label {
margin: 1rem 0 !important;
display: block;
}
.input-group .btn {
background: #036EB8;
color: white;
border-radius: 4px;
border: none;
padding: 12px 40px;
margin: 2rem 0 !important;
display: block;
}
#school_page .form-group {
width: 960px;
margin: 1rem 0;
}
#school_page .form-group label {
font-size: 18px;
width: 20%;
display: inline-block;
float: left;
padding-left: 8px;
}
#school_page .form-group input,
#school_page .form-group select {
font-size: 18px;
padding: 4px 16px;
width: 80%;
display: inline-block;
}
#school_page .form-actions .btn {
background: #036EB8;
color: white;
border-radius: 4px;
border: none;
padding: 12px 40px;
text-align: left;
margin: 2rem 0 0 2rem !important;
}
.transfer-graduation-radios .transfer-radios-wrap {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: fit-content;
}
.transfer-graduation-radios .transfer-radio-option {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
margin: 0;
}
.transfer-graduation-radios .transfer-radio-input {
width: 1rem;
height: 1rem;
margin: 0;
flex-shrink: 0;
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.transfer-graduation-radios .transfer-radio-input:checked {
border-width: 0.35rem;
border-color: #0d6efd;
background-color: #fff;
}
.transfer-graduation-radios .transfer-radio-label {
margin: 0;
padding: 0;
white-space: nowrap;
}
.school_student_form .form-group {
width: 80% !important;
margin: 2rem !important;
}
.school_student_form .form-group label {
font-size: 18px;
width: 100%;
display: block;
padding-left: 0;
}
.school_student_form .form-group label::before {
display: none;
}
.school_student_form .form-group input,
.school_student_form .form-group select {
font-size: 18px;
padding: 16px 16px;
width: 100%;
display: block;
}
.student-transfer-section {
width: 80%;
margin: 1rem 2rem 0;
padding-top: 1.5rem;
border-top: 1px solid #e9ecef;
}
.student-form-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 2rem;
}
.student-form-buttons .btn {
border-radius: 4px !important;
}
.student-form-buttons a {
background: none !important;
color: #036EB8 !important;
}
.student-delete-icon {
color: #dc3545 !important;
font-size: 20px !important;
padding: 0.25rem;
line-height: 1;
text-decoration: none !important;
background: none !important;
}
.student-delete-icon:hover {
color: #a71d2a !important;
}
.stu-status-cell {
white-space: nowrap;
}
.stu-status-select {
width: auto;
min-width: 90px;
font-size: 13px;
padding: 0.2rem 1.8rem 0.2rem 0.5rem;
border-radius: 4px;
border: 1px solid #dee2e6;
background-color: #fff;
cursor: pointer;
}
.stu-status-select:focus {
border-color: #036EB8;
box-shadow: 0 0 0 0.15rem rgba(3, 110, 184, 0.2);
}
.stu-transfer-info {
display: block;
font-size: 11px;
color: #e67e22;
margin-top: 3px;
font-weight: 600;
}
.stu-transfer-dialog {
max-width: 480px;
}
.stu-transfer-header {
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.stu-transfer-body .form-label {
font-weight: 600;
font-size: 14px;
}
.stu-transfer-body .form-select,
.stu-transfer-body .form-control {
font-size: 14px;
}
.link {
color: #036EB8;
background: none;
text-decoration: none;
margin-bottom: 0 !important;
margin-top: 2rem;
}
.link:hover {
color: #036EB8;
}
.link i {
color: #036EB8;
margin-right: 8px;
}
.school-announcements .date-column {
width: 120px;
white-space: nowrap;
}
.school-announcements .announcement-link {
color: #333;
text-decoration: none;
}
.school-announcements .announcement-link:hover {
color: #007bff;
text-decoration: underline;
}
.announcements-section {
padding: 3rem 1.5rem;
border-top: 1px solid #f2f2f2;
margin-top: 3rem;
}
.announcements-section .row .col-11 {
background: none !important;
}
.announcements-section p {
margin: 0;
}
.announcements-section h5 {
margin: 0;
}
.announcement-detail {
max-width: 800px;
margin: 2rem auto;
padding: 3rem 0;
}
.announcement-detail h5 {
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.school-announcements {
padding: 4rem 0;
}
.school-announcements .container {
width: calc(1200px - 32px);
margin: 0 auto;
}
.school-announcements .container h5 {
font-size: 24px;
margin: 0;
color: #333;
}
.school-announcements .container h5 span {
font-size: 50%;
display: block;
}
.school-announcements .container table {
margin: 2rem 0 0;
width: 100%;
table-layout: fixed;
}
.school-announcements .container table th,
.school-announcements .container table td {
font-size: 16px;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.school-announcements .container table th {
width: 20%;
font-weight: 500;
text-align: left;
}
.school-announcements .container table td {
width: 80%;
}
.school_main-content {
padding: 2rem;
}
.school_main-content .col-6 {
padding: 8px 0;
}
.school_main-content h4 {
font-size: 20px;
margin-bottom: 2rem;
}
.school_main-content h4 i {
margin-right: 8px;
color: #036EB8;
}
.school_main-content h6,
.school_main-content h5 {
font-size: 20px !important;
}
.school_main-content h6 i,
.school_main-content h5 i {
margin-right: 8px;
color: #036EB8;
font-size: 28px;
vertical-align: top;
}
.school_main-content h3 {
font-size: 20px;
}
.school_main-content h3 span {
font-size: 40px;
margin-left: 8px;
}
.school_main-content .course_detail-header a {
background: none;
color: #036EB8;
text-decoration: none;
margin-left: 16px;
}
.school_main-content .course_detail-header a i {
margin-right: 8px;
color: #036EB8;
}
.school_main-content .lesson_list_contents h5 {
font-size: 20px;
margin: 0 0 2rem;
}
.school_main-content .lesson_list_contents .lesson_card_link {
text-decoration: none;
color: inherit;
display: block;
width: 100%;
height: 50px;
}
.school_main-content .lesson_list_contents .lesson_card_link::after {
content: "";
display: block;
clear: both;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card {
border: 1px solid #eee;
border-radius: 6px;
padding: 16px;
margin: 0;
background: #fafafa;
transition: background-color 0.2s;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card:hover {
background-color: rgba(3, 110, 184, 0.05);
transition: background-color 0.3s ease;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body h6 {
font-size: 18px;
margin: 0;
color: #333;
min-width: 200px;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body .lesson-meta {
color: #666;
flex: 1;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body .lesson-meta i {
color: #036EB8;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body .lesson-materials {
display: flex;
gap: 0.5rem;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body .lesson-materials .btn {
padding: 8px 16px;
pointer-events: none;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body .lesson-materials .btn:hover {
opacity: 0.8;
}
.school_main-content .card_box {
border: 1px solid #eee;
border-radius: 6px;
padding: 16px;
margin: 2rem 0;
width: 80%;
}
.school_main-content .card_box h5 {
font-size: 20px;
margin: 0;
}
.school_main-content table {
width: 100%;
}
.school_main-content table tr.clickable-row {
cursor: pointer;
width: 80%;
border: 1px solid #eee;
display: block;
padding: 16px;
border-radius: 6px;
background: #fafafa;
}
.school_main-content table tr.clickable-row .text-end i {
margin-left: 8px;
}
.school_main-content table tr.clickable-row:hover {
background-color: #f8f9fa;
}
.school_main-content table tr.clickable-row td {
color: #333;
}
.school_main-content table tr.clickable-row td:last-child {
color: #ccc;
}
.lesson_list_contents table {
width: 80%;
table-layout: fixed;
}
.lesson_list_contents table tr {
border: 1px solid #eee;
border-radius: 6px;
display: block;
}
.lesson_list_contents table tr td {
width: 70%;
padding: 16px;
}
.lesson_list_contents table tr th {
width: 40%;
text-align: left;
padding: 16px;
}
.school_lesson-content {
padding: 3rem 1rem !important;
background: #fff;
border-radius: 8px;
}
.school_lesson-content h4 {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.school_lesson-content h4 span {
font-size: 16px;
color: #666;
font-weight: normal;
display: inline;
margin-left: 0.5rem;
}
.school_lesson-content h5.card-title {
font-size: 18px;
color: #444;
margin: 1.5rem 0 1rem;
font-weight: 500;
}
.school_lesson-content p {
color: #666;
line-height: 1.6;
margin-bottom: 2rem;
}
.school_lesson-content ul.list-unstyled {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
}
.school_lesson-content ul.list-unstyled li {
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.school_lesson-content ul.list-unstyled li:last-child {
margin-bottom: 0;
}
.school_lesson-content ul.list-unstyled li span {
font-weight: 500;
color: #444;
min-width: 100px;
}
.school_lesson-content ul.list-unstyled li small.text-muted {
display: block;
margin-top: 0.25rem;
font-size: 0.875rem;
}
.school_lesson-content ol {
display: flex;
gap: 1rem;
margin: 2rem 0;
padding: 0;
list-style: none;
}
.school_lesson-content ol li .btn {
padding: 0.75rem 1.5rem;
border-radius: 6px;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.school_lesson-content ol li .btn:hover {
transform: translateY(-1px);
}
.school_lesson-content ol li .btn i {
font-size: 1.25rem;
}
.school_lesson-content ol li .btn-info {
background: #e3f2fd;
color: #1976d2;
border: none;
}
.school_lesson-content ol li .btn-info:hover {
background: #bbdefb;
}
.school_lesson-content ol li .btn-success {
background: #ffa500;
border: none;
}
.school_lesson-content ol li .btn-success:hover {
background: #ff8c00;
}
.school_lesson-content ol li .btn-primary {
background: #1976d2;
border: none;
}
.school_lesson-content ol li .btn-primary:hover {
background: #1565c0;
}
.school_lesson-content .link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #1976d2;
text-decoration: none;
font-weight: 500;
margin-top: 2rem;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: all 0.2s ease;
}
.school_lesson-content .link:hover {
background: #f5f5f5;
color: #1565c0;
}
.school_lesson-content .link i {
font-size: 1.25rem;
}
.school_page .school-lesson-card-meta {
width: 100%;
margin: 0;
padding: 0;
font-size: 0.75rem;
color: #6b7280;
}
.school_page .school-lesson-card-meta .school-lesson-card-meta__row {
margin: 0.15rem 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.25rem;
}
.school_page .school-lesson-card-meta .school-lesson-card-meta__label {
flex-shrink: 0;
font-weight: 600;
color: #374151;
}
.school_course-content {
padding: 2rem 1rem;
min-height: 100vh;
}
.school_course-content .school_lesson_info {
background: white;
padding: 1rem 1rem 2rem;
border-radius: 6px;
margin-bottom: 3rem;
}
.school_course-content .school_lesson_info h2 {
font-size: 20px;
color: #036EB8;
font-weight: 600;
margin: 0;
padding: 1rem 0;
}
.school_course-content .school_lesson_info h2 i {
margin-right: 8px;
}
.school_course-content .school_lesson_info h3 {
font-size: 24px;
color: #036EB8;
font-weight: 600;
margin: 1rem 0 0;
}
.school_course-content .school_lesson_info h3 span {
font-size: 16px;
color: #888;
margin-bottom: 0.5rem;
margin-right: 16px;
}
.school_course-content .school_lesson_info p {
margin: 0;
}
.school_course-content .lesson-card .card {
display: block;
margin: 0 auto 1rem;
width: 90%;
padding: 2rem 1rem;
border: 1px solid #eee !important;
border-radius: 6px;
}
.school_course-content .lesson-card .card h3 {
margin: 1rem 0 0;
font-size: 18px;
font-weight: 600;
}
.school_course-content .lesson-card .card h3 i {
margin-right: 8px;
background: #d5edfe;
padding: 8px;
border-radius: 50%;
color: #036EB8;
}
.school_course-content .lesson-card .card p {
margin: 1rem 0;
font-size: 14px;
}
.school_course-content .lesson-card .card small {
margin: 8px 0;
display: block;
}
.school_course-content .lesson-card .card ul {
padding: 0;
margin: 0 0 2rem;
}
.school_course-content .lesson-card .card ul li {
list-style-type: none;
margin-bottom: 0;
padding-bottom: 0;
margin: 8px 0;
}
.school_course-content .lesson-card .card ul li span {
background: #036EB8;
color: white;
padding: 4px 8px;
font-size: 12px;
margin-right: 8px;
}
.school_course-content .lesson-card a {
text-decoration: none;
}
.steps-title {
margin: 2rem 0;
}
.school_lesson_content {
padding: 3rem 1rem !important;
}
.school_lesson_content h4 {
font-size: 20px;
font-weight: 600;
color: #272727;
}
.school_lesson_content h4 span {
font-size: 14px;
display: block;
margin: 1rem 0;
color: #888;
font-weight: 600;
}
.school_lesson_content h5 {
font-size: 14px;
margin: 1rem 0;
color: #888;
font-weight: 600;
}
.school_lesson_content p {
margin: 8px 0;
}
.school_lesson_content ul {
margin-top: 1rem;
}
.school_lesson_content ul li {
list-style-type: none;
padding: 8px 0;
}
.school_lesson_content ol {
margin-bottom: 3rem;
}
.school_lesson_content ol li {
list-style-type: none;
display: inline-block;
margin: 0 8px;
}
.school_lesson_content ol li .btn {
padding: 8px;
border: none;
}
.school_lesson_content ol li .btn-success {
background: #036EB8 !important;
padding: 12px 16px;
border: none;
border-radius: 4px;
}
.school_lesson_content ol li:first-of-type .btn {
color: #036EB8;
background: #d5edfe;
padding: 12px;
}
.school_lesson_content ol li:first-of-type .btn i {
font-size: 24px;
}
.school_lesson_content ol li:last-of-type {
border-radius: 4px;
}
.school_lesson_content ol li:last-of-type a {
text-decoration: none;
color: #036EB8;
background: none;
padding: 0;
}
.school_lesson_content ol li:last-of-type .btn {
background: #036EB8;
color: white !important;
padding: 8px 24px !important;
font-weight: 600;
line-height: 1.5;
}
.school_lesson_content .lesson-steps {
margin: 2rem 0;
padding: 2rem;
background: #f8f9fa;
border-radius: 12px;
}
.school_lesson_content .lesson-steps .btn {
color: #1976d2;
border: none;
font-weight: 600;
font-size: 16px;
display: block;
text-align: center;
}
.school_lesson_content .lesson-steps .btn:hover {
background: #bbdefb;
}
.school_lesson_content .lesson-steps .steps-title {
font-size: 24px;
color: #333;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e9ecef;
}
.school_lesson_content .lesson-steps .steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.school_lesson_content .lesson-steps .step-card {
background: white;
width: 90%;
margin: 0 auto;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.school_lesson_content .lesson-steps .step-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.school_lesson_content .lesson-steps .step-card .text-truncate-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
max-height: 4.5em;
}
.school_lesson_content .lesson-steps .step-card .step-icon {
width: 48px;
height: 48px;
background: #e3f2fd;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.school_lesson_content .lesson-steps .step-card .step-icon i {
font-size: 24px;
color: #1976d2;
}
.school_lesson_content .lesson-steps .step-card h6 {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
}
.school_lesson_content .lesson-steps .step-card h6 span {
font-size: 16px;
color: #888;
font-weight: 600;
display: block;
margin-bottom: 8px;
}
.school_lesson_content .lesson-steps .step-card p {
font-size: 14px;
color: #666;
margin-bottom: 1rem;
}
.school_lesson_content .lesson-steps .step-card .btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
gap: 0.5rem;
padding: 0.75rem;
border-radius: 6px;
margin: 2rem 0;
transition: all 0.2s ease;
}
.school_lesson_content .lesson-steps .step-card .btn:hover {
transform: translateY(-1px);
}
.school_lesson_content .lesson-steps .step-card .btn i {
font-size: 1.1rem;
}
.school_lesson_content .lesson-steps .step-card .btn-outline-primary {
border-color: #1976d2;
color: #1976d2;
}
.school_lesson_content .lesson-steps .step-card .btn-outline-primary:hover {
background: #1976d2;
color: white;
}
.alert {
margin: 1rem;
padding: 1rem;
border-radius: 4px;
position: relative;
}
.alert.alert-success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.alert.alert-danger {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
.alert .btn-close {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.school_students_page .container {
width: calc(1200px - 32px);
margin: 0 auto;
}
.school_students_page .container h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 2rem 0;
}
#school_student h5 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 1rem 0;
padding-left: 24px;
}
#school_student h5 i {
margin-right: 8px;
}
#school_student .clock_box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: none;
margin-bottom: 1rem;
}
#school_student .clock_box h5 {
margin: 0;
}
#school_student #calendar {
background: white;
padding: 0rem;
border-radius: 8px;
box-shadow: none;
margin-bottom: 1rem;
}
#school_student #calendar h6 {
font-size: 18px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
#school_student #calendar table {
width: 100%;
}
#school_student #calendar table th,
#school_student #calendar table td {
text-align: center;
}
#school_student #calendar table td {
padding: 12px 16px;
}
#school_student #calendar table .today {
background-color: #036EB8;
color: white;
font-weight: bold;
width: 15px;
border-radius: 0px !important;
}
#school_student .lesson-detail img {
width: 70%;
margin: 0 auto;
}
#school_student .lesson-detail .row {
margin-bottom: 2rem;
}
#school_student .detile_box {
background: white;
padding: 1rem;
margin: 0 0 2rem;
border-radius: 8px;
}
#school_student .detile_box h3 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 1rem 0 2rem;
}
#school_student .detile_box h3 span {
font-size: 16px;
margin-right: 12px;
margin-bottom: 1rem;
display: block;
}
#school_student .detile_box h3 span::before {
content: "【 コース名 】";
font-size: 14px;
color: #888;
font-weight: 600;
}
#school_student .detile_box p {
margin: 0 0 1rem;
font-size: 14px;
letter-spacing: .03em;
line-height: 1.75;
width: 80%;
}
#school_student .detile_box p span {
font-size: 18px;
font-weight: 600;
color: #888;
}
#school_student .detile_box h4 {
border-top: 1px solid #eee;
padding-top: 2rem;
font-size: 18px;
font-weight: 600;
color: #272727;
}
#school_student .lesson_list a {
text-decoration: none;
color: #036EB8;
background: none;
display: block;
text-align: center;
}
#school_student .lesson_list .btn {
font-weight: 600;
background: #036EB8;
color: white;
}
#school_student .lesson_list .lesson_card {
background: white !important;
padding: 1rem 0.5rem 2rem;
border-radius: 8px;
box-shadow: none;
margin: 1rem auto;
width: 100%;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
#school_student .lesson_list .lesson_card h5 {
font-size: 16px !important;
margin: 1rem 0;
padding-left: 0 !important;
display: block;
text-align: left;
}
#school_student .lesson_list .lesson_card h5 i {
background: #eef8ff;
padding: 8px;
border-radius: 50%;
color: #036EB8;
font-weight: 900;
margin-right: 12px;
margin-bottom: 1rem;
display: block;
width: 32px;
}
#school_student .lesson_list .lesson_card h6 {
font-size: 14px;
margin: 1rem 0;
text-align: center;
}
#school_student .lesson_list .lesson_card p {
margin: 0 0 2rem;
font-size: 12px;
}
#school_student .lesson_list .lesson_card .step-progres {
margin: 1rem 0;
}
#school_student .lesson_list .lesson_card button {
background: #4caf50;
border: none;
color: white;
font-size: 14px;
font-weight: 600;
padding: 4px 24px;
}
.analog-clock {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 20px auto;
position: relative;
background: white;
border: 4px solid #333;
}
.analog-clock .clock-face {
width: 100%;
height: 100%;
position: relative;
}
.analog-clock .hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: 50% 100%;
border-radius: 4px;
}
.analog-clock .hour {
width: 4px;
height: 50px;
background: #333;
margin-left: -2px;
z-index: 3;
}
.analog-clock .minute {
width: 3px;
height: 70px;
background: #666;
margin-left: -1.5px;
z-index: 2;
}
.analog-clock .second {
width: 2px;
height: 80px;
background: #f00;
margin-left: -1px;
z-index: 1;
}
.analog-clock .center-dot {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #333;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 4;
}
.analog-clock .numbers {
position: absolute;
width: 100%;
height: 100%;
}
.analog-clock .numbers .number {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 14px;
font-weight: bold;
padding: 5px;
}
.small-calendar .table {
font-size: 0.8rem;
}
.small-calendar .table th,
.small-calendar .table td {
padding: 0.3rem;
height: 2rem;
width: 2rem;
vertical-align: middle;
}
.small-calendar .table .today {
background-color: #036EB8;
color: white;
font-weight: bold;
border-radius: 50%;
}
.small-calendar .table .text-muted {
color: #999;
}
.digital-clock {
font-size: 2.5rem;
font-weight: bold;
text-align: center;
font-family: monospace;
color: #333;
padding: 1rem;
}
.digital-clock span {
display: inline-block;
min-width: 1.5em;
}
.step-progress {
padding: 10px 15px;
margin-bottom: 10px;
}
.step-progress .steps {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 10px;
}
.step-progress .steps::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: #e9ecef;
z-index: 1;
}
.step-progress .steps .step {
background: white;
color: #adb5bd;
border: 2px solid #e9ecef;
border-radius: 20px;
padding: 4px 12px;
font-size: 12px;
position: relative;
z-index: 2;
}
.step-progress .steps .step.completed {
background: #036EB8;
color: white;
border-color: #036EB8;
}
.description {
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1rem;
}
.accordion-button:not(.collapsed) {
background-color: #f8f9fa;
color: #0d6efd;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-item h2 {
margin: 0;
}
.lessons-list {
background: #f2f2f2;
padding: 3rem 1rem;
min-height: 100vh;
}
.lessons-list h2 {
margin: 0 0 3rem;
padding: 2rem 1rem;
font-weight: 600;
}
.lessons-list h2 i {
margin-right: 8px;
}
.lessons-list .lesson_card {
background: white;
padding: 2rem 1rem;
border-radius: 8px;
width: 90%;
margin: 2rem auto;
}
.lessons-list .lesson_card h5 {
margin: 1rem 0;
font-size: 16px !important;
font-weight: 600;
}
.lessons-list .lesson_card h5 i {
margin-right: 8px;
}
.lessons-list .lesson_card p {
margin: 1rem 0;
}
.lessons-list .lesson_card a {
display: block;
margin: 3rem auto 1rem;
text-align: center;
text-decoration: none;
font-weight: 600;
color: #036EB8;
}
.lessons-list .lesson_card ul {
padding: 0;
margin: 2rem 0;
}
.lessons-list .lesson_card ul li {
list-style-type: none;
margin: 16px 0;
padding: 0;
font-size: 14px;
}
.lessons-list .lesson_card ul li span {
background: #036EB8;
color: white;
padding: 4px 8px;
margin-right: 8px;
}
.lessons-list .lesson_card ul li span i {
color: white !important;
}
.student_list {
box-shadow: none;
}
.student_list h4 {
font-weight: 600;
font-size: 20px;
}
.student_list h4 i {
margin-right: 8px;
font-size: 150%;
}
.student_list .student-status-badge {
color: #333 !important;
}
.student_list .info_table {
width: 100% !important;
table-layout: auto !important;
min-width: 1000px;
}
.student_list .info_table th, .student_list .info_table td {
white-space: nowrap;
padding: 16px 12px !important;
}
.student_list .info_table th:nth-of-type(2), .student_list .info_table td:nth-of-type(2) {
min-width: 150px;
}
.student_list .info_table th:nth-of-type(3), .student_list .info_table td:nth-of-type(3) {
min-width: 100px;
}
.student_list .info_table th:nth-of-type(4), .student_list .info_table td:nth-of-type(4) {
min-width: 80px;
}
.student_list .info_table th:nth-of-type(5), .student_list .info_table td:nth-of-type(5) {
min-width: 120px;
}
.student_list .info_table th:nth-of-type(6), .student_list .info_table td:nth-of-type(6) {
min-width: 200px;
}
.student_list .info_table th:nth-of-type(7), .student_list .info_table td:nth-of-type(7) {
min-width: 200px;
}
.student_list .info_table th:last-of-type, .student_list .info_table td:last-of-type {
min-width: 150px;
}
.student_list .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.student_list .table-responsive::-webkit-scrollbar {
height: 8px;
}
.student_list .table-responsive::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.student_list .table-responsive::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.student_list .table-responsive::-webkit-scrollbar-thumb:hover {
background: #555;
}
.student_list .student-name-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.student_list .student-name-link {
color: #036EB8;
text-decoration: none;
flex: 1;
}
.student_list .student-name-link:hover {
color: #0256a3;
text-decoration: underline;
}
.student_list .edit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 6px;
color: #6c757d;
text-decoration: none;
transition: all 0.2s ease;
flex-shrink: 0;
}
.student_list .edit-btn:hover {
background-color: #e9ecef;
border-color: #adb5bd;
color: #495057;
text-decoration: none;
}
.student_list .edit-btn i {
font-size: 14px;
}
.student_list .search-fields {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
}
.student_list .search-field {
flex: 1;
min-width: 200px;
}
.student_list .search-field .form-label {
font-weight: 600;
margin-bottom: 5px;
color: #495057;
}
.student_list .search-buttons {
display: flex;
justify-content: center;
gap: 10px;
}
.student_list .search-buttons .btn {
min-width: 100px;
padding: 6px 48px;
background: #036EB8;
}
.student_list .search-buttons a {
border: none !important;
color: #036EB8 !important;
background: none !important;
padding: 6px 24px !important;
}
.accordion {
border: none;
}
.accordion .accordion-item {
border: none;
}
.accordion .accordion-item .accordion-button {
background: none;
color: #036EB8;
font-weight: 600;
}
.file-drop-area {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 1rem;
text-align: center;
background: #f8f9fa;
transition: all 0.3s ease;
cursor: pointer;
}
.file-drop-area:hover,
.file-drop-area.dragover {
border-color: #036EB8;
background: #f0f7fc;
}
.drag-text {
margin-bottom: 0.5rem;
color: #666;
}
.drag-text i {
font-size: 2rem;
color: #036EB8;
margin-bottom: 0.5rem;
display: block;
}
.drag-text small {
display: block;
margin: 0.5rem 0;
color: #999;
}
.upload-group {
max-width: 500px;
margin: 0 auto;
}
.upload-group .form-control {
height: 38px;
border: 1px solid #e0e0e0;
border-right: none;
}
.upload-group .btn {
height: 38px;
padding: 0 1.5rem;
margin: 0 !important;
}
.test-preview {
padding: 2rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.test-preview .step_description {
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}
.test-preview .step_description h2 {
font-size: 20px;
color: #333;
margin-bottom: 1rem;
}
.test-preview .step_description p {
color: #666;
margin-bottom: 1.5rem;
}
.test-preview .step_description .btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.test-preview .test_formContents .question-card {
background: #f8f9fa;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.test-preview .test_formContents .question-card:last-child {
margin-bottom: 0;
}
.test-preview .test_formContents .question-card .question-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.test-preview .test_formContents .question-card .question-header h5 {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
}
.test-preview .test_formContents .question-card .question-header .question-type {
font-size: 0.875rem;
color: #666;
background: #e9ecef;
padding: 0.25rem 0.75rem;
border-radius: 4px;
}
.test-preview .test_formContents .question-card .question-body .question-text {
font-size: 1.1rem;
color: #333;
margin-bottom: 1rem;
}
.test-preview .test_formContents .question-card .question-body .choices {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.test-preview .test_formContents .question-card .question-body .choices .choice {
background: white;
padding: 1rem;
border-radius: 6px;
border: 1px solid #dee2e6;
position: relative;
}
.test-preview .test_formContents .question-card .question-body .choices .choice.correct {
background: #e8f5e9;
border-color: #4caf50;
}
.test-preview .test_formContents .question-card .question-body .choices .choice.correct .correct-badge {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: #4caf50;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.875rem;
}
.test-preview .test_formContents .no-questions {
text-align: center;
padding: 3rem;
background: #f8f9fa;
border-radius: 8px;
color: #666;
}
.entry_box {
padding: 2rem;
}
.entry_box .grade-list {
background: #fafafa;
padding: 1rem;
margin: 1rem;
text-align: center;
}
.entry_box .grade-list h6 {
font-size: 16px !important;
}
.entry_box .grade-list span {
font-size: 32px !important;
font-weight: 600;
}
.dashboard-comment-section {
padding: 1.5rem;
}
.dashboard-comment-section .dashboard-comment-title {
font-size: 1.1rem;
font-weight: 600;
color: #212529;
margin-bottom: 0.25rem;
}
.dashboard-comment-section .dashboard-comment-title i {
margin-right: 0.35rem;
color: #036EB8;
}
.dashboard-comment-section .dashboard-comment-desc {
color: #6c757d;
margin-bottom: 1rem;
font-size: 14px;
margin: 1rem 0 2rem !important;
}
.dashboard-comment-section .dashboard-grade-label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: #495057;
margin-bottom: 0.35rem;
text-align: center;
}
.dashboard-comment-section .dashboard-comment-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 0.75rem;
border-radius: 8px;
min-height: 80px;
color: #212529;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dashboard-comment-section .dashboard-comment-card:hover {
background: #e7f1fa;
border-color: #036EB8;
color: #036EB8;
}
.dashboard-comment-section .dashboard-comment-card.has-comments {
border-color: #036EB8;
background: #f0f7fc;
}
.dashboard-comment-section .dashboard-comment-count {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
}
.dashboard-comment-section .dashboard-comment-count::after {
content: "件";
font-size: 0.85rem;
font-weight: 500;
color: #6c757d;
margin-left: 0.15rem;
}
.dashboard-comment-section .dashboard-comment-unit {
font-size: 0.85rem;
font-weight: 500;
color: #6c757d;
margin-top: 0.15rem;
}
.dashboard-comment-card:hover .dashboard-comment-section .dashboard-comment-unit {
color: inherit;
}
.mental-health-alerts-table {
font-size: 0.9375rem;
margin-bottom: 0;
}
.mental-health-alerts-table .mental-health-alerts-th-date {
width: 4rem;
white-space: nowrap;
}
.mental-health-alerts-table .mental-health-alerts-th-name {
width: 8rem;
white-space: nowrap;
}
.mental-health-alerts-table .mental-health-alerts-th-icon {
width: 4rem;
}
.mental-health-alerts-table .mental-health-alerts-th-comment {
min-width: 10rem;
}
.mental-health-alerts-table .mental-health-alerts-td-date {
width: 4rem;
vertical-align: middle;
font-size: 0.8125rem;
}
.mental-health-alerts-table .mental-health-alerts-td-name {
width: 8rem;
vertical-align: middle;
padding: 16px;
}
.mental-health-alerts-table .mental-health-alerts-td-icon {
width: 4rem;
vertical-align: middle;
text-align: center;
}
.mental-health-alerts-table .mental-health-alerts-td-comment {
vertical-align: middle;
font-size: 0.8125rem;
}
.mental-health-loadmore-wrap {
position: relative;
}
.mental-health-loadmore-area {
text-align: center;
margin-bottom: 12px;
}
#mental-health-loadmore-btn {
font-size: 0.8125rem;
padding: 4px 20px;
border-radius: 20px;
transition: background-color 0.2s, color 0.2s;
}
#mental-health-loadmore-btn:hover {
background-color: #036EB8;
color: #fff;
border-color: #036EB8;
}
.school-dashboard__message-list-link, .school-dashboard__mental-health-link {
background: #036EB8;
color: white !important;
border: none !important;
padding: 1rem;
border-radius: 4px;
display: block;
max-width: 200px;
margin: 3rem auto;
text-align: center;
font-size: 14px !important;
font-weight: 600;
border-radius: 30px;
padding: 8px 16px !important;
text-decoration: none;
transition: all 0.3s ease;
}
.school-dashboard__mental-health-link {
max-width: 270px;
}
.dash-header {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 0.5rem 0;
border-bottom: 2px solid #e9ecef;
}
.dash-header__greeting {
font-size: 1.15rem;
font-weight: 600;
color: #212529;
margin: 0;
}
.dash-header__icon {
color: #f59e0b;
margin-right: 0.25rem;
}
.dash-header__date {
font-size: 0.85rem;
color: #6c757d;
}
.school-disaster-alert {
margin: 8px 8px 1.5rem;
}
.school-disaster-alert__inner {
position: relative;
overflow: hidden;
padding: 1.35rem 1.5rem 1.5rem;
border: 1px solid #f3c0b8;
border-radius: 12px;
background: linear-gradient(180deg, #fff8f7 0%, #fff 42%);
box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}
.school-disaster-alert__header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
}
.school-disaster-alert__icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 12px;
background: #fce4ec;
color: #dc3545;
font-size: 1.6rem;
}
.school-disaster-alert__heading {
flex: 1;
min-width: 0;
}
.school-disaster-alert__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-bottom: 0.45rem;
}
.school-disaster-alert__badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background: #dc3545;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.school-disaster-alert__date {
color: #6c757d;
font-size: 0.82rem;
font-weight: 600;
}
.school-disaster-alert__title {
margin: 0 0 0.35rem;
color: #212529;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.35;
}
.school-disaster-alert__text {
margin: 0;
color: #5f6b7a;
font-size: 0.9rem;
line-height: 1.6;
}
.school-disaster-alert__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
flex-shrink: 0;
min-height: 42px;
padding: 0.55rem 1rem;
border-radius: 999px;
background: #dc3545;
color: #fff !important;
font-size: 0.88rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 16px rgba(220, 53, 69, 0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.school-disaster-alert__cta:hover {
transform: translateY(-1px);
background: #c82333;
color: #fff !important;
box-shadow: 0 8px 18px rgba(220, 53, 69, 0.24);
}
.school-disaster-alert__progress {
margin-bottom: 1.15rem;
}
.school-disaster-alert__progress-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.45rem;
color: #495057;
font-size: 0.82rem;
font-weight: 600;
}
.school-disaster-alert__progress-label strong {
color: #dc3545;
font-size: 0.95rem;
}
.school-disaster-alert__progress-track {
overflow: hidden;
height: 8px;
border-radius: 999px;
background: #f1f3f5;
}
.school-disaster-alert__progress-bar {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #ff8a8a 0%, #dc3545 100%);
transition: width 0.3s ease;
}
.school-disaster-alert__stats {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.75rem;
}
.school-disaster-alert__stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
min-height: 100%;
padding: 0.85rem 0.65rem;
border: 1px solid #e9ecef;
border-radius: 10px;
background: #fff;
text-align: center;
}
.school-disaster-alert__stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: #f8f9fa;
color: #6c757d;
font-size: 1.1rem;
}
.school-disaster-alert__stat-value {
color: #212529;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.1;
}
.school-disaster-alert__stat-label {
color: #6c757d;
font-size: 0.72rem;
font-weight: 600;
}
.school-disaster-alert__stat--confirmed .school-disaster-alert__stat-icon {
background: #eef4ff;
color: #036eb8;
}
.school-disaster-alert__stat--safe .school-disaster-alert__stat-icon,
.school-disaster-alert__stat--safe .school-disaster-alert__stat-value {
color: #198754;
}
.school-disaster-alert__stat--safe .school-disaster-alert__stat-icon {
background: #e8f5e9;
}
.school-disaster-alert__stat--unsafe .school-disaster-alert__stat-icon,
.school-disaster-alert__stat--unsafe .school-disaster-alert__stat-value {
color: #e67e22;
}
.school-disaster-alert__stat--unsafe .school-disaster-alert__stat-icon {
background: #fff3e0;
}
.school-disaster-alert__stat--injured .school-disaster-alert__stat-icon,
.school-disaster-alert__stat--injured .school-disaster-alert__stat-value {
color: #dc3545;
}
.school-disaster-alert__stat--injured .school-disaster-alert__stat-icon {
background: #fce4ec;
}
.school-disaster-alert__stat--unknown .school-disaster-alert__stat-icon,
.school-disaster-alert__stat--unknown .school-disaster-alert__stat-value {
color: #6c757d;
}
@media (max-width: 1199.98px) {
.school-disaster-alert__stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.school-disaster-alert__header {
flex-direction: column;
}
.school-disaster-alert__cta {
width: 100%;
}
.school-disaster-alert__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.dash-stat-row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.75rem;
}
.dash-stat-row .dash-stat-card {
margin: 0;
padding: 0.85rem 0.7rem;
min-width: 0;
}
.dash-stat-row .dash-stat-card__body {
min-width: 0;
}
.dash-stat-row .dash-stat-card__icon {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.dash-stat-row .dash-stat-card__label {
font-size: 0.7rem;
}
.dash-stat-row__item {
min-width: 0;
}
.dash-stat-card {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 8px;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 1rem 1.1rem;
transition: transform 0.15s, box-shadow 0.15s;
}
.dash-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dash-stat-card--alert {
border: 1px solid #e67e22;
}
.dash-stat-card--danger {
border: 1px solid #dc3545;
}
.dash-stat-card--keyword-comment {
border: 2px solid #dc3545;
box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.12);
}
.dash-stat-card__icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
}
.dash-stat-card__icon--blue {
background: #e3f2fd;
color: #036EB8;
}
.dash-stat-card__icon--green {
background: #e8f5e9;
color: #28a745;
}
.dash-stat-card__icon--orange {
background: #fff3e0;
color: #e67e22;
}
.dash-stat-card__icon--red {
background: #fce4ec;
color: #dc3545;
}
.dash-stat-card__body {
display: flex;
flex-direction: column;
}
.dash-stat-card__value {
font-size: 1.5rem;
font-weight: 700;
color: #212529;
line-height: 1.2;
}
.dash-stat-card__label {
font-size: 0.75rem;
color: #6c757d;
font-weight: 500;
white-space: nowrap;
}
.dash-homeroom-class-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.dash-homeroom-class-item {
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 0.85rem 1rem;
background: #f8fafc;
}
.dash-homeroom-class-item__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.dash-homeroom-class-item__name {
font-weight: 600;
color: #212529;
}
.dash-homeroom-class-item__count {
font-size: 0.875rem;
color: #036EB8;
font-weight: 600;
}
.dash-homeroom-class-item__links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.dash-homeroom-class-item__link {
font-size: 0.8125rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: #fff;
border: 1px solid #dee2e6;
color: #495057;
text-decoration: none;
}
.dash-homeroom-class-item__link:hover {
border-color: #036EB8;
color: #036EB8;
}
.dash-widget {
background: #fff;
border: 1px solid #e9ecef;
border-radius: 10px;
margin: 8px;
padding: 1.25rem;
height: 100%;
display: flex;
flex-direction: column;
}
.dash-widget__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.dash-widget__title {
font-size: 0.95rem;
font-weight: 600;
color: #212529;
margin: 0;
}
.dash-widget__title i {
margin-right: 0.3rem;
}
.dash-widget__link {
font-size: 0.75rem;
color: #036EB8;
text-decoration: none;
white-space: nowrap;
}
.dash-widget__link:hover {
text-decoration: underline;
}
.dash-widget__desc {
font-size: 0.8rem;
color: #6c757d;
margin-bottom: 0.75rem;
}
.toggle-switch {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.toggle-switch__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.toggle-switch__track {
display: inline-block;
width: 2.5rem;
height: 1.25rem;
background: #dee2e6;
border-radius: 9999px;
position: relative;
flex-shrink: 0;
transition: background 0.2s ease;
}
.toggle-switch__track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(1.25rem - 4px);
height: calc(1.25rem - 4px);
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.toggle-switch__input:checked + .toggle-switch__track {
background: #036EB8;
}
.toggle-switch__input:checked + .toggle-switch__track::after {
transform: translateX(1.25rem);
}
.toggle-switch__input:focus-visible + .toggle-switch__track {
outline: 2px solid #036EB8;
outline-offset: 2px;
}
.toggle-switch__label {
font-size: 0.875rem;
font-weight: 600;
color: #212529;
}
.toggle-switch--block {
display: flex;
width: 100%;
}
.afternoon-picker-section__label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #64748b;
}
.afternoon-class-picker {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.afternoon-class-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0.45rem 0.75rem;
border: 1px solid #dbe3ec;
border-radius: 999px;
background: #f8fafc;
cursor: pointer;
user-select: none;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.afternoon-class-chip:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.afternoon-class-chip__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.afternoon-class-chip__box {
flex-shrink: 0;
width: 1rem;
height: 1rem;
border: 2px solid #94a3b8;
border-radius: 4px;
background: #fff;
position: relative;
transition: background 0.15s ease, border-color 0.15s ease;
}
.afternoon-class-chip__box::after {
content: "";
position: absolute;
top: 1px;
left: 4px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform 0.12s ease;
}
.afternoon-class-chip__text {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.3;
color: #334155;
white-space: nowrap;
}
.afternoon-class-chip__input:checked ~ .afternoon-class-chip__box {
background: #036eb8;
border-color: #036eb8;
}
.afternoon-class-chip__input:checked ~ .afternoon-class-chip__box::after {
transform: rotate(45deg) scale(1);
}
.afternoon-class-chip__input:checked ~ .afternoon-class-chip__text {
color: #013d66;
}
.afternoon-class-chip:has(.afternoon-class-chip__input:checked) {
background: #eef6fc;
border-color: #7eb8e0;
box-shadow: 0 0 0 1px rgba(3, 110, 184, 0.08);
}
.afternoon-class-chip__input:focus-visible ~ .afternoon-class-chip__box {
outline: 2px solid #036eb8;
outline-offset: 2px;
}
.dash-widget__mini-stats {
display: flex;
gap: 1rem;
}
.dash-mini-stat {
display: flex;
flex-direction: column;
align-items: center;
background: #f8f9fa;
border-radius: 8px;
padding: 0.5rem 1rem;
flex: 1;
}
.dash-mini-stat__value {
font-size: 1.35rem;
font-weight: 700;
color: #212529;
line-height: 1.2;
}
.dash-mini-stat__value small {
font-size: 0.7rem;
font-weight: 500;
color: #6c757d;
}
.dash-mini-stat__label {
font-size: 0.7rem;
color: #6c757d;
}
.dash-course-bar {
display: flex;
align-items: center;
gap: 0.5rem;
}
.dash-course-bar__name {
width: 110px;
flex-shrink: 0;
color: #495057;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-course-bar__track {
flex: 1;
height: 8px;
background: #e9ecef;
border-radius: 4px;
overflow: hidden;
}
.dash-course-bar__fill {
height: 100%;
background: #28a745;
border-radius: 4px;
min-width: 2px;
transition: width 0.3s;
}
.dash-course-bar__count {
width: 40px;
text-align: right;
color: #495057;
flex-shrink: 0;
}
.dash-top-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.dash-top-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0;
}
.dash-top-item__rank {
width: 22px;
height: 22px;
border-radius: 50%;
background: #e3f2fd;
color: #036EB8;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dash-top-item__name {
font-size: 0.85rem;
color: #212529;
font-weight: 500;
}
.dash-top-item__name:hover {
color: #036EB8;
}
.dash-top-item__score {
margin-left: auto;
font-size: 0.7rem;
}
.dash-comment-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 20px;
padding: 0.35rem 0.75rem;
transition: all 0.15s;
}
.dash-comment-chip:hover {
background: #e7f1fa;
border-color: #036EB8;
}
.dash-comment-chip--active {
background: #e3f2fd;
border-color: #036EB8;
}
.dash-comment-chip--priority-1 {
border-width: 2px;
border-color: #ffc107;
background: #fffbeb;
}
.dash-comment-chip--priority-2 {
border-width: 2px;
border-color: #fd7e14;
background: #fff4ed;
}
.dash-comment-chip--priority-3 {
border-width: 2px;
border-color: #dc3545;
background: #fff5f5;
}
.dash-comment-chip__flag {
display: inline-flex;
align-items: center;
font-size: 1rem;
line-height: 1;
margin-left: 0.15rem;
}
.dash-comment-chip__grade {
font-size: 0.8rem;
color: #495057;
font-weight: 500;
}
.dash-comment-chip__count {
font-size: 0.9rem;
font-weight: 700;
color: #036EB8;
}
.dash-comment-chip__count::after {
content: "件";
font-size: 0.65rem;
font-weight: 400;
color: #6c757d;
margin-left: 1px;
}
.dash-consent-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 8px 0;
}
.dash-consent-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0;
border-bottom: 1px solid #f2f2f2;
}
.dash-consent-item:last-child {
border-bottom: none;
}
.dash-consent-item__title {
font-size: 0.85rem;
color: #212529;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-consent-item__title:hover {
color: #036EB8;
}
.dash-consent-item__meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
font-size: 14px;
}
.dash-grade-bars {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.dash-grade-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.dash-grade-row__label {
width: 80px;
flex-shrink: 0;
color: #495057;
}
.dash-grade-row__track {
flex: 1;
height: 10px;
background: #e9ecef;
border-radius: 5px;
overflow: hidden;
}
.dash-grade-row__fill {
height: 100%;
background: #036EB8;
border-radius: 5px;
min-width: 3px;
transition: width 0.3s;
}
.dash-grade-row__count {
width: 40px;
text-align: right;
color: #495057;
flex-shrink: 0;
}
.dash-announce-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dash-announce-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 0;
border-bottom: 1px solid #f2f2f2;
}
.dash-announce-item:last-child {
border-bottom: none;
}
.dash-announce-item__date {
font-size: 0.75rem;
flex-shrink: 0;
width: 40px;
}
.dash-announce-item__title {
font-size: 0.85rem;
color: #212529;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-announce-item__title:hover {
color: #036EB8;
}
.chatbot-container--inline {
height: 220px;
border-radius: 8px;
border: 1px solid #e9ecef;
display: flex;
flex-direction: column;
}
.chatbot-container--inline .chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 0.75rem;
}
.chatbot-container--inline .chatbot-input--disabled {
border-top: 1px solid #e9ecef;
background: #f8f9fa;
border-radius: 0 0 8px 8px;
}
.school_indexBox {
margin-top: 3rem;
}
.school_indexBox h6 {
margin: 2rem 0;
}
.school_indexBox p {
font-size: 16px;
margin-top: 1rem;
}
.import_btn {
margin: 3rem auto;
width: 200px;
display: block;
background: #036EB8;
color: white;
border: none;
padding: 1rem;
border-radius: 4px;
}
.grade-section h6 {
margin: 2rem 0 .5rem;
}
.grade-section .course-name {
font-size: 0.8rem !important;
color: #888;
}
.grade-section .lesson-item {
font-size: 0.9rem !important;
font-weight: 800;
}
.school_courseBox {
padding: 3rem 1rem;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
width: 90%;
border-radius: 8px;
margin: 0 auto;
}
.school_courseBox h5 {
font-size: 1.2rem !important;
text-transform: capitalize;
font-weight: 600;
margin-bottom: 1rem;
vertical-align: middle;
line-height: 1;
}
.school_courseBox h5 i {
margin-bottom: 8px;
background: #bbdefb;
width: 36px;
border-radius: 30px;
padding: 4px;
display: block;
}
.school_courseBox p {
font-size: .7rem;
margin-bottom: 2rem !important;
}
.school_courseBox .small {
margin: 1rem 0;
}
.school_courseBox .school_lesson_info {
height: auto !important;
}
.registra_form {
padding-top: 80px;
}
.registra_form .form_fiuld {
margin: 1rem 0;
}
.registra_form h4 {
font-size: 20px;
margin-bottom: 3rem !important;
}
.coding_school_editor {
padding: 3rem 2rem;
}
.coding_school_editor .row {
margin: 2rem 0;
}
.sidebar {
padding: 1rem;
}
.sidebar h5 {
margin-top: 1rem;
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
}
.sidebar p {
font-size: 14px;
}
.sidebar p span {
display: block;
font-size: 14px;
color: #888;
font-weight: 600;
margin-right: 8px;
margin-bottom: 8px;
}
.sidebar .btn {
display: block;
width: 100%;
}
.sidebar .back_btn {
background: none;
color: #036EB8;
font-size: 14px;
display: block;
text-align: center;
width: 100%;
}
.sidebar .back_btn i {
margin-right: 8px;
}
.scoll-setting {
padding: 3rem 2rem;
color: #212529;
}
.scoll-setting .pageTitle {
color: #212529;
}
.scoll-setting .form-container {
padding: 2rem 0;
}
.scoll-setting .form-section {
border: none;
padding: 0;
}
.scoll-setting .section-header {
color: #212529;
}
.scoll-setting .section-header h5 {
color: #212529;
}
.scoll-setting .section-header i {
color: #036EB8;
}
.scoll-setting .form-actions {
background: none;
justify-content: flex-start;
align-items: center;
}
.scoll-setting .form-actions .back-btn i {
margin-right: 8px;
}
.scoll-setting .settings-status-box {
color: #212529;
}
.scoll-setting .settings-status-box .col-2 {
border: 1px solid #f2f2f2;
padding-top: 1rem !important;
border-radius: 8px;
}
.scoll-setting .settings-status-title {
color: #212529;
font-weight: 600;
}
.scoll-setting .settings-status-desc {
color: #495057;
}
.scoll-setting .settings-status-empty {
color: #6c757d;
}
.scoll-setting .settings-grade-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: #212529;
margin-bottom: 0.5rem;
text-align: center;
}
.scoll-setting .settings-grade-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 0.75rem;
color: #212529;
min-height: 88px;
transition: background 0.2s, border-color 0.2s;
}
.scoll-setting .settings-grade-card.settings-grade-card-link {
color: #212529;
}
.scoll-setting .settings-grade-card.settings-grade-card-link:hover {
background: #e9ecef;
border-color: #036EB8;
color: #036EB8;
}
.scoll-setting .settings-grade-count {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.2;
color: #212529;
}
.scoll-setting .settings-grade-count::after {
content: "名";
font-size: 0.85rem;
font-weight: 500;
color: #6c757d;
}
.settings-grade-card-link .scoll-setting .settings-grade-count {
color: inherit;
}
.scoll-setting .settings-grade-unit {
font-size: 0.9rem;
font-weight: 500;
color: #495057;
margin-top: 0.15rem;
}
.settings-grade-card-link .scoll-setting .settings-grade-unit {
color: inherit;
}
.load-more-btn {
background: #036EB8;
color: white;
width: 80%;
margin-top: 1rem;
font-weight: 600;
font-size: .8rem;
padding: 10px 4px;
border-radius: 30px;
border: none;
}
.load-more-btn i {
margin-right: 8px;
}
.course-settings-info {
margin-top: 2rem;
}
.course-settings-info__heading {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.4rem;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.3;
color: #212529;
}
.course-settings-info__heading i {
font-size: 0.9rem;
color: #0d6efd;
}
.course-settings-info__text {
margin: 0 0 0.2rem;
font-size: 0.78rem;
line-height: 1.45;
color: #212529;
}
.course-settings-info__note {
display: block;
margin: 0 0 0.45rem;
font-size: 0.68rem;
color: #6c757d;
}
.course-settings-info__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
margin-top: 0.35rem;
padding: 0.35rem 0.65rem;
font-size: 0.7rem;
font-weight: 600;
line-height: 1.2;
color: #0d6efd;
background: #fff;
border: 1px solid #0d6efd;
border-radius: 6px;
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.course-settings-info__btn span {
font-size: inherit;
}
.course-settings-info__btn i {
font-size: 0.95rem;
line-height: 1;
}
.course-settings-info__btn:hover, .course-settings-info__btn:focus-visible {
color: #fff;
background: #0d6efd;
border-color: #0d6efd;
text-decoration: none;
}
.chatbot-container {
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
height: 600px;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chatbot-container .chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
background: #f8f9fa;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar {
width: 6px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.chatbot-container .chatbot-messages .message {
display: flex;
animation: fadeIn 0.3s ease-in;
margin-bottom: 0.25rem;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chatbot-container .chatbot-messages .message .message-content {
max-width: 75%;
padding: 0.75rem 1rem;
border-radius: 18px;
word-wrap: break-word;
line-height: 1.5;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.chatbot-container .chatbot-messages .message .message-content .bot-icon {
font-size: 1.2rem;
color: #036EB8;
}
.chatbot-container .chatbot-messages .message .message-content .message-text {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
}
.chatbot-container .chatbot-messages .message .message-content .message-link {
margin-top: 0.5rem;
}
.chatbot-container .chatbot-messages .message .message-content .message-link a {
background-color: #036EB8 !important;
color: white !important;
text-decoration: none;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
display: inline-block;
font-size: 0.875rem;
transition: background-color 0.2s ease;
}
.chatbot-container .chatbot-messages .message .message-content .message-link a:hover {
background-color: #025a9a !important;
color: white !important;
}
.chatbot-container .chatbot-messages .message.bot-message .message-content {
flex-direction: row;
align-items: flex-start;
}
.chatbot-container .chatbot-messages .message.bot-message .message-content .message-text {
flex-direction: column;
align-items: flex-start;
}
.chatbot-container .chatbot-messages .message.user-message {
justify-content: flex-end;
}
.chatbot-container .chatbot-messages .message.user-message .message-content {
background-color: #036EB8 !important;
color: white !important;
border-bottom-right-radius: 4px;
}
.chatbot-container .chatbot-messages .message.bot-message {
justify-content: flex-start;
}
.chatbot-container .chatbot-messages .message.bot-message .message-content {
background-color: white !important;
color: #272727 !important;
border-bottom-left-radius: 4px;
border: 1px solid #e9ecef !important;
}
.chatbot-container .chatbot-input {
padding: 0.75rem 1rem;
border-top: 1px solid #e9ecef;
background-color: white;
border-radius: 0 0 12px 12px;
}
.chatbot-container .chatbot-input .input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
background: #f8f9fa;
border-radius: 24px;
border: 1px solid #d1d5db;
padding: 0.5rem 0.5rem 0.5rem 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.chatbot-container .chatbot-input .input-wrapper:focus-within {
border-color: #036EB8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
background: #fff;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
line-height: 1.5;
resize: none;
padding: 0.25rem 0;
min-height: 24px;
max-height: 120px;
overflow-y: auto;
font-family: inherit;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea:focus {
outline: none;
box-shadow: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::placeholder {
color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #036EB8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:hover {
background: #025a9a;
transform: scale(1.05);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:active {
transform: scale(0.95);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:disabled {
background: #adb5bd;
cursor: not-allowed;
transform: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn i {
margin: 0;
line-height: 1;
}
.chatbot-container {
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
height: 500px;
max-height: 70vh;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chatbot-container .chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
background: #f8f9fa;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar {
width: 6px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.chatbot-container .chatbot-messages .message {
display: flex;
animation: fadeIn 0.3s ease-in;
margin-bottom: 0.25rem;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chatbot-container .chatbot-messages .message .message-content {
max-width: 75%;
padding: 0.75rem 1rem;
border-radius: 18px;
word-wrap: break-word;
line-height: 1.5;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
}
.chatbot-container .chatbot-messages .message .message-content .bot-icon {
font-size: 1.2rem;
color: #036EB8;
}
.chatbot-container .chatbot-messages .message.user-message {
justify-content: flex-end;
}
.chatbot-container .chatbot-messages .message.user-message .message-content {
background-color: #036EB8 !important;
color: white !important;
border-bottom-right-radius: 4px;
}
.chatbot-container .chatbot-messages .message.bot-message {
justify-content: flex-start;
}
.chatbot-container .chatbot-messages .message.bot-message .message-content {
background-color: white !important;
color: #272727 !important;
border-bottom-left-radius: 4px;
border: 1px solid #e9ecef !important;
}
.chatbot-container .chatbot-input {
padding: 1rem 1.25rem;
border-top: 1px solid #e9ecef;
background-color: white;
}
.chatbot-container .chatbot-input--disabled {
background-color: #f8f9fa;
}
.chatbot-container .chatbot-input--disabled .input-wrapper {
background: #f1f3f5;
border-color: #dee2e6;
cursor: not-allowed;
}
.chatbot-container .chatbot-input .input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
background: #f8f9fa;
border-radius: 24px;
border: 1px solid #d1d5db;
padding: 0.5rem 0.5rem 0.5rem 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.chatbot-container .chatbot-input .input-wrapper:focus-within {
border-color: #036EB8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
background: #fff;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
line-height: 1.5;
resize: none;
padding: 0.25rem 0;
min-height: 24px;
max-height: 120px;
overflow-y: auto;
font-family: inherit;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea:focus {
outline: none;
box-shadow: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::placeholder {
color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #036EB8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:hover {
background: #025a9a;
transform: scale(1.05);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:active {
transform: scale(0.95);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:disabled {
background: #adb5bd;
cursor: not-allowed;
transform: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn i {
margin: 0;
line-height: 1;
}
.school_student_comments_index {
padding: 3rem 2rem;
}
.school_student_comments_index #student_comments_filter_form .col-2,
.school_student_comments_index #student_comments_filter_form .col-3,
.school_student_comments_index #student_comments_filter_form .col-4 {
padding: 0 8px !important;
}
.school_student_comments_index #student_comments_filter_form .form-control,
.school_student_comments_index #student_comments_filter_form .form-select {
height: calc(1.5em + 0.75rem + 10px);
box-sizing: border-box;
}
.consent-forms-page {
padding: 2rem;
}
.consent-forms-page .consent-forms-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.consent-forms-page .consent-forms-header h4 {
margin: 0;
font-weight: 600;
color: #333;
}
.consent-forms-page .consent-forms-header h4 i {
color: #036EB8;
margin-right: 0.4rem;
}
.consent-forms-page .consent-forms-header .consent-new-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.consent-forms-page .consent-header-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.consent-forms-page .consent-header-actions--icon-only .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
}
.consent-forms-page .consent-forms-table:first-of-type th, .consent-forms-page .consent-forms-table:first-of-type td {
text-align: left;
}
.consent-forms-page .consent-forms-table th {
font-size: 0.85rem;
font-weight: 600;
color: #555;
border-bottom: 2px solid #dee2e6;
white-space: nowrap;
}
.consent-forms-page .consent-forms-table td {
vertical-align: middle;
font-size: 0.9rem;
}
.consent-forms-page .consent-forms-table td .btn-primary {
background: none !important;
color: #036EB8 !important;
border: none !important;
padding: 0 8px !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
box-shadow: none !important;
}
.consent-forms-page .consent-forms-table td .btn-primary:hover {
background: none !important;
color: #025aa5 !important;
}
.consent-forms-page .consent-forms-table .consent-form-link {
color: #036EB8;
text-decoration: none;
font-weight: 500;
}
.consent-forms-page .consent-forms-table .consent-form-link:hover {
text-decoration: underline;
}
.consent-forms-page .consent-forms-table .consent-actions {
white-space: nowrap;
display: flex;
gap: 0.25rem;
}
.consent-forms-page .consent-forms-table .consent-actions button.btn {
color: red !important;
padding: 0 8px !important;
}
.consent-forms-page .consent-forms-table .consent-actions .btn {
background: none !important;
color: #036EB8 !important;
border: none !important;
padding: 0 8px !important;
font-size: 18px !important;
transition: all 0.3s ease !important;
}
.consent-forms-page .consent-forms-table .consent-actions .btn:hover {
background: none !important;
color: #025aa5 !important;
}
.consent-forms-page .consent-empty {
text-align: center;
padding: 4rem 2rem;
color: #999;
}
.consent-forms-page .consent-empty i {
font-size: 3rem;
display: block;
margin-bottom: 1rem;
}
.consent-forms-page .consent-empty p {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.consent-forms-page .consent-detail-card {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.consent-forms-page .consent-detail-card h5 {
font-size: 1rem;
font-weight: 600;
color: #333;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #f0f0f0;
}
.consent-forms-page .consent-detail-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
}
.consent-forms-page .consent-info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.consent-forms-page .consent-info-item:first-of-type {
grid-column: span 1;
width: 100px;
}
.consent-forms-page .consent-info-label {
font-size: 0.8rem;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.consent-forms-page .consent-response-count {
font-size: 1.1rem;
font-weight: 600;
color: #036EB8;
}
.consent-forms-page .consent-url-section {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid #f0f0f0;
}
.consent-forms-page .consent-url-copy {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.consent-forms-page .consent-url-copy input {
flex: 1;
font-size: 0.85rem;
background: #f8f9fa;
}
.consent-forms-page .consent-description {
line-height: 1.8;
color: #444;
}
.consent-forms-page .consent-summary-stats {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.consent-forms-page .consent-stat-box {
flex: 1;
min-width: 120px;
text-align: center;
padding: 1.2rem 1rem;
border-radius: 10px;
background: #f8f9fa;
}
.consent-forms-page .consent-stat-box .consent-stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
}
.consent-forms-page .consent-stat-box .consent-stat-label {
display: block;
font-size: 0.8rem;
color: #666;
margin-top: 0.25rem;
}
.consent-forms-page .consent-stat-box.consent-stat-agreed {
background: #e8f5e9;
}
.consent-forms-page .consent-stat-box.consent-stat-agreed .consent-stat-number {
color: #2e7d32;
}
.consent-forms-page .consent-stat-box.consent-stat-disagreed {
background: #fce4ec;
}
.consent-forms-page .consent-stat-box.consent-stat-disagreed .consent-stat-number {
color: #c62828;
}
.consent-forms-page .consent-stat-box.consent-stat-total {
background: #e3f2fd;
}
.consent-forms-page .consent-stat-box.consent-stat-total .consent-stat-number {
color: #1565c0;
}
.consent-forms-page .consent-responses-table th {
font-size: 0.85rem;
font-weight: 600;
color: #555;
white-space: nowrap;
}
.consent-forms-page .consent-responses-table td {
vertical-align: middle;
font-size: 0.9rem;
}
.consent-forms-page .consent-empty-responses {
text-align: center;
padding: 2rem;
}
.consent-forms-page .consent-form-edit {
max-width: 860px;
}
.consent-forms-page .consent-form-edit .form-label {
font-weight: 500;
color: #444;
}
.consent-forms-page .consent-form-actions {
display: flex;
gap: 0.75rem;
margin-top: 2rem;
}
.consent-forms-page .consent-form-actions a {
background: none !important;
color: #036EB8 !important;
border: none !important;
padding: 4px 16px !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
line-height: 30px;
}
.consent-forms-page .consent-form-actions a:hover {
background: none !important;
color: #025aa5 !important;
}
.consent-forms-page .consent-field-builder {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 2px solid #e9ecef;
}
.consent-forms-page .consent-field-builder-header {
margin-bottom: 1rem;
}
.consent-forms-page .consent-field-builder-header h5 {
font-weight: 600;
color: #333;
margin-bottom: 0.25rem;
}
.consent-forms-page .consent-field-builder-header h5 i {
color: #036EB8;
margin-right: 0.3rem;
}
.consent-forms-page .consent-field-builder-header p {
font-size: 0.85rem;
margin-bottom: 0;
}
.consent-forms-page .consent-field-row {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 0.75rem;
overflow: hidden;
transition: box-shadow 0.15s;
}
.consent-forms-page .consent-field-row:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.consent-forms-page .consent-field-row .btn {
background: none !important;
color: red !important;
border: none !important;
padding: 0 !important;
font-size: 18px !important;
transition: all 0.3s ease !important;
}
.consent-forms-page .consent-field-row .btn:hover {
background: none !important;
color: #025aa5 !important;
}
.consent-forms-page .consent-field-row-top {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 10px 12px;
background: #e9ecef;
}
.consent-forms-page .consent-field-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: grab;
color: #999;
font-size: 1.2rem;
flex-shrink: 0;
padding: 0 2px;
transition: color 0.15s;
}
.consent-forms-page .consent-field-drag-handle:hover {
color: #555;
}
.consent-forms-page .consent-field-drag-handle:active {
cursor: grabbing;
}
.consent-forms-page .consent-field-row-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
min-width: 24px;
border-radius: 50%;
background: #036EB8;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
}
.consent-forms-page .consent-field-row.consent-field-dragging {
opacity: 0.4;
}
.consent-forms-page .consent-field-row.consent-field-dragover {
border-color: #036EB8;
border-style: dashed;
}
.consent-forms-page .consent-field-label-input {
flex: 1;
min-width: 0;
}
.consent-forms-page .consent-field-required-check {
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
flex-shrink: 0;
}
.consent-forms-page .consent-field-required-check .form-check-input {
margin-top: 0;
margin-right: 0 !important;
}
.consent-forms-page .consent-field-required-check .form-check-label {
font-size: 0.85rem;
color: #555;
margin-left: 0 !important;
}
.consent-forms-page .consent-field-row-actions {
display: flex;
gap: 0.25rem;
flex-shrink: 0;
}
.consent-forms-page .consent-field-row-bottom {
padding: 10px 12px;
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.consent-forms-page .consent-field-row-bottom .consent-field-type-select {
width: 160px;
flex-shrink: 0;
}
.consent-forms-page .consent-field-options-area {
flex: 1;
min-width: 0;
}
.consent-forms-page .consent-field-add-area {
display: block;
margin: 1rem 0 3rem;
padding-top: 1rem;
}
.consent-forms-page .consent-field-quick-add {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 2rem 0;
}
.consent-forms-page .consent-field-quick-add span.text-muted {
font-size: 0.8rem;
}
.consent-forms-page .consent-field-quick-add .btn {
background: none !important;
color: #036EB8 !important;
border: none !important;
padding: 0 16px !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
}
.consent-forms-page .consent-field-quick-add .btn:hover {
background: none !important;
color: #025aa5 !important;
}
.consent-forms-page .consent-fields-preview {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.consent-forms-page .consent-field-preview-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 6px;
font-size: 0.9rem;
}
.consent-forms-page .consent-field-preview-type {
font-size: 0.8rem;
color: #036EB8;
font-weight: 500;
white-space: nowrap;
}
.consent-forms-page .consent-field-preview-type i {
margin-right: 0.2rem;
}
.consent-forms-page .consent-field-preview-label {
font-weight: 500;
color: #333;
}
.consent-forms-page .consent-radio-summary {
margin-bottom: 1.5rem;
}
.consent-forms-page .consent-radio-summary:last-child {
margin-bottom: 0;
}
.consent-forms-page .consent-radio-summary h6 {
font-weight: 600;
color: #444;
}
.consent-forms-page .consent-footer {
margin-top: 1rem;
}
.consent-forms-page {
padding: 2rem 3rem;
}
.consent-forms-page .btn {
font-size: 14px !important;
background: #036EB8 !important;
color: white !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 4px !important;
transition: all 0.3s ease !important;
}
.consent-forms-page .btn:hover {
background: #025aa5 !important;
}
.consent-forms-page .consent-header-actions form,
.consent-forms-page .consent-actions form {
display: inline;
}
.consent-forms-page .table-responsive table {
width: 100%;
}
.consent-forms-page .table-responsive table td {
text-align: center;
}
.consent-forms-page .table-responsive table th, .consent-forms-page .table-responsive table td {
padding: 16px 8px;
}
.consent-forms-page .table-responsive table th {
background: none !important;
}
.consent-forms-page .table-responsive table th:first-of-type {
width: 15%;
}
.consent-forms-page .table-responsive table th:nth-of-type(2) {
width: 40%;
}
.consent-forms-page .table-responsive table th:nth-of-type(3) {
width: 10%;
}
.consent-forms-page .table-responsive table th:nth-of-type(4) {
width: 15%;
}
.consent-forms-page .table-responsive table th:nth-of-type(5) {
width: 10%;
}
.consent-forms-page .table-responsive table th:last-of-type {
width: 10%;
}
.consent-forms-page .table-responsive table td:first-of-type {
width: 15%;
}
.consent-forms-page .table-responsive table td:nth-of-type(2) {
width: 40%;
text-align: left !important;
}
.consent-forms-page .table-responsive table td:nth-of-type(3) {
width: 10%;
}
.consent-forms-page .table-responsive table td:nth-of-type(4) {
width: 15%;
}
.consent-forms-page .table-responsive table td:nth-of-type(5) {
width: 10%;
}
.consent-forms-page .table-responsive table td:last-of-type {
width: 10%;
}
.consent-forms-page .table-responsive table td:last-of-type .btn {
min-width: 20px !important;
padding: 0 !important;
border: none !important;
}
.consent-forms-page .consent-response-list-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
.consent-forms-page .consent-response-list-header h5 {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.consent-forms-page .consent-filter-buttons {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.consent-forms-page .consent-response-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.consent-forms-page .consent-response-detail-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.consent-forms-page .consent-response-detail-label {
font-size: 0.8rem;
font-weight: 600;
color: #888;
}
.consent-forms-page .consent-response-detail-value {
font-size: 0.95rem;
color: #333;
font-weight: 500;
}
.consent-forms-page .consent-response-answers {
display: flex;
flex-direction: column;
gap: 0;
}
.consent-forms-page .consent-response-answer-item {
padding: 1rem 0;
border-bottom: 1px solid #f0f0f0;
}
.consent-forms-page .consent-response-answer-item:last-child {
border-bottom: none;
}
.consent-forms-page .consent-response-answer-label {
font-size: 0.85rem;
font-weight: 600;
color: #555;
margin-bottom: 0.4rem;
}
.consent-forms-page .consent-response-answer-label .badge {
font-size: 0.7rem;
vertical-align: middle;
margin-left: 0.3rem;
}
.consent-forms-page .consent-response-answer-value {
font-size: 0.95rem;
color: #333;
}
.consent-forms-page .consent-response-check-list {
list-style: none;
padding: 0;
margin: 0;
}
.consent-forms-page .consent-response-check-list li {
padding: 2px 0;
}
.consent-forms-page .consent-response-check-list li i {
color: #28a745;
margin-right: 0.3rem;
}
.consent-forms-page .consent-response-text-block {
background: #f8f9fa;
border-radius: 6px;
padding: 10px 14px;
line-height: 1.7;
white-space: pre-wrap;
}
.school-announcements-list {
padding: 1.5rem;
border-radius: 8px;
}
.school-announcements-list__heading {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
color: #036EB8;
}
.school-announcements-list__heading span {
font-size: 40%;
display: block;
color: #888;
font-weight: 600;
margin-top: 8px;
}
.school-announcements-list__category-nav {
display: flex;
gap: 1.5rem;
margin-bottom: 3rem;
font-size: 1rem;
}
.school-announcements-list__category-link {
color: #555;
text-decoration: none;
font-size: 16px;
padding: 0 8px;
margin: 0 8px;
font-weight: 600;
}
.school-announcements-list__category-link.is-active {
color: #036EB8;
text-decoration: none;
position: relative;
}
.school-announcements-list__category-link.is-active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 3px;
border-bottom: 1px solid #036EB8;
}
.school-announcements-list__category-link:not(.is-active):hover {
color: #333;
}
.school-announcements-list__year-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid #e0e0e0;
font-size: 0.9rem;
}
.school-announcements-list__year-sep {
color: #888;
pointer-events: none;
}
.school-announcements-list__year-link {
color: #555;
text-decoration: none;
font-size: 14px;
margin: 0 8px;
padding: 0 8px;
}
.school-announcements-list__year-link.is-active {
color: #036EB8;
font-weight: 500;
}
.school-announcements-list__year-link:hover {
color: #333;
}
.school-announcements-list__items {
list-style: none;
padding: 0;
margin: 0;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.school-announcements-list__item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid #eee;
}
.school-announcements-list__item:last-child {
border-bottom: 1px solid #eee;
}
.school-announcements-list__date {
color: #666;
font-size: 0.9rem;
flex-shrink: 0;
padding-right: 16px;
}
.school-announcements-list__badge {
display: inline-block;
padding: 0.2em 0.8em;
font-size: 0.75rem;
font-weight: 500;
color: #fff;
background: #036EB8;
border-radius: 4px;
flex-shrink: 0;
margin-right: 16px;
}
.school-announcements-list__title {
color: #333;
text-decoration: none;
flex: 1;
min-width: 0;
font-size: 16px;
font-weight: 500;
}
.school-announcements-list__title:hover {
color: #036EB8;
text-decoration: underline;
}
.school-announcements-list__pagination {
margin-top: 1.5rem;
}
.school-announcements-manage {
background: #fff;
border: 1px solid #e8edf2;
border-radius: 10px;
overflow: hidden;
}
.school-announcements-manage__head, .school-announcements-manage__row {
display: grid;
grid-template-columns: 132px 118px minmax(0, 1fr) 92px 108px;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
.school-announcements-manage__head {
background: #f6f8fa;
border-bottom: 1px solid #e8edf2;
color: #667085;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.school-announcements-manage__list {
list-style: none;
margin: 0;
padding: 0;
}
.school-announcements-manage__row {
border-bottom: 1px solid #eef1f4;
transition: background-color 0.15s ease;
}
.school-announcements-manage__row:last-child {
border-bottom: none;
}
.school-announcements-manage__row:hover {
background: #fafbfc;
}
.school-announcements-manage__col-date {
display: flex;
flex-direction: column;
gap: 2px;
color: #475467;
font-size: 0.88rem;
line-height: 1.3;
white-space: nowrap;
}
.school-announcements-manage__col-date small {
color: #98a2b3;
font-size: 0.76rem;
}
.school-announcements-manage__col-audience, .school-announcements-manage__col-status, .school-announcements-manage__col-actions {
display: flex;
align-items: center;
}
.school-announcements-manage__col-title {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.45;
}
.school-announcements-manage__col-actions {
justify-content: flex-end;
gap: 4px;
}
.school-announcements-manage__audience-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.22rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.school-announcements-manage__audience-badge--staff {
color: #036eb8;
background: #e8f3fc;
}
.school-announcements-manage__audience-badge--parents {
color: #0f766e;
background: #e6f7f4;
}
.school-announcements-manage__audience-badge--both {
color: #7a4b00;
background: #fff4df;
}
.school-announcements-manage__important {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 0.18rem 0.45rem;
border-radius: 4px;
background: #fee4e2;
color: #b42318;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
}
.school-announcements-manage__title-link {
color: #1d2939;
font-size: 0.94rem;
font-weight: 600;
text-decoration: none;
word-break: break-word;
}
.school-announcements-manage__title-link:hover {
color: #036eb8;
text-decoration: underline;
}
.school-announcements-manage__status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 0.22rem 0.5rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.school-announcements-manage__status--published {
color: #027a48;
background: #ecfdf3;
}
.school-announcements-manage__status--draft {
color: #475467;
background: #f2f4f7;
}
.school-announcements-manage__status--archived {
color: #667085;
background: #f9fafb;
}
.school-announcements-manage__action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: transparent;
color: #667085;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.school-announcements-manage__action:hover {
background: #eef2f6;
color: #036eb8;
}
.school-announcements-manage__action--danger:hover {
background: #fef3f2;
color: #d92d20;
}
@media (max-width: 992px) {
.school-announcements-manage__head {
display: none;
}
.school-announcements-manage__row {
grid-template-columns: 1fr;
gap: 8px;
padding: 14px 16px;
}
.school-announcements-manage__col-date, .school-announcements-manage__col-audience, .school-announcements-manage__col-status, .school-announcements-manage__col-actions {
justify-content: flex-start;
}
.school-announcements-manage__col-actions {
padding-top: 4px;
}
}
.page-school-announcement-form .school-list-section {
box-shadow: none;
}
.page-school-announcement-form .school-announcement-form {
max-width: 640px;
}
.page-school-announcement-form .school-announcement-form__field {
margin-bottom: 1.25rem;
}
.page-school-announcement-form .school-announcement-form__row {
display: flex;
flex-wrap: wrap;
gap: 16px 20px;
margin-bottom: 1.25rem;
}
.page-school-announcement-form .school-announcement-form__field--half {
flex: 1 1 280px;
margin-bottom: 0;
}
.page-school-announcement-form .school-announcement-form__field--narrow {
flex: 0 0 140px;
margin-bottom: 0;
}
.page-school-announcement-form .school-announcement-form__field--narrow .form-select {
min-width: 0;
}
.page-school-announcement-form .school-announcement-form__label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.875rem;
font-weight: 700;
color: #344054;
}
.page-school-announcement-form .school-announcement-form__hint {
margin: 0.45rem 0 0;
font-size: 0.8125rem;
color: #667085;
line-height: 1.5;
}
.page-school-announcement-form .school-announcement-form .form-control,
.page-school-announcement-form .school-announcement-form .form-select {
width: 100%;
border: 1px solid #d0d5dd;
border-radius: 8px;
font-size: 0.9375rem;
}
.page-school-announcement-form .school-announcement-form .form-control:focus,
.page-school-announcement-form .school-announcement-form .form-select:focus {
border-color: #036eb8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-school-announcement-form .school-announcement-form__select {
max-width: 100%;
}
.page-school-announcement-form .school-announcement-form .form-check-label {
font-size: 0.9375rem;
color: #344054;
}
.page-school-announcement-form .school-announcement-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid #eaecf0;
}
.page-school-announcement-form .school-announcement-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 140px;
padding: 0.75rem 1.75rem;
border: none;
border-radius: 8px;
background: #036eb8;
color: #fff;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.page-school-announcement-form .school-announcement-form__submit:hover {
background: #025a96;
box-shadow: 0 4px 12px rgba(3, 110, 184, 0.25);
}
.page-school-announcement-form .school-announcement-form__cancel {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.25rem;
border: 1px solid #d0d5dd;
border-radius: 8px;
background: #fff;
color: #475467;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.page-school-announcement-form .school-announcement-form__cancel:hover {
background: #f9fafb;
border-color: #98a2b3;
color: #344054;
}
.school-grade-section {
padding: 0.75rem 0 0;
border-top: 1px solid #e9ecef;
}
.school-grade-section:first-of-type {
border-top: none;
padding-top: 0;
}
.school-grade-section__title {
margin: 0 0 0.75rem;
font-weight: 700;
color: #212529;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.le-header-card {
padding: 18px 24px;
margin: 2rem 0;
}
.le-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.le-header-student {
display: flex;
align-items: center;
gap: 14px;
}
.le-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.15em;
flex-shrink: 0;
}
.le-student-name {
font-size: 1.05rem;
font-weight: 600;
color: #212529;
}
.le-student-meta {
font-size: 0.82rem;
color: #868e96;
}
.le-header-lesson {
text-align: right;
}
.le-lesson-label {
font-size: 0.75rem;
color: #adb5bd;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.le-lesson-title {
font-size: 0.95rem;
font-weight: 600;
color: #212529;
}
.le-lesson-meta {
font-size: 0.8rem;
color: #868e96;
margin-top: 1px;
}
.le-badge {
display: inline-block;
font-size: 0.68rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
vertical-align: middle;
margin-left: 6px;
}
.le-badge--test {
background: #fff3cd;
color: #856404;
}
.le-badge--normal {
background: #d1ecf1;
color: #0c5460;
}
.le-header-lesson-only {
padding: 4px 0;
}
.le-header-lesson-only .le-lesson-label {
margin-bottom: 4px;
}
.le-header-lesson-only .le-lesson-title {
font-size: 1rem;
}
.le-header-lesson-only .le-lesson-meta {
margin-top: 2px;
}
.le-overall-simple {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 24px 32px;
margin-bottom: 24px;
text-align: center;
max-width: 200px;
}
.le-overall-simple-num {
font-size: 3rem;
font-weight: 700;
color: #036EB8;
line-height: 1.1;
}
.le-overall-simple-label {
font-size: 0.85rem;
color: #868e96;
margin-top: 6px;
}
.le-section-card {
padding: 24px;
margin-bottom: 20px;
}
.le-section-title {
font-size: 1rem;
font-weight: 700;
color: #343a40;
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid #f1f3f5;
}
.le-section-title i {
color: #667eea;
}
.le-chart-wrap {
max-width: 340px;
margin: 0 auto;
}
.le-scores-list {
padding-top: 4px;
}
.le-score-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.le-score-label {
width: 100px;
font-size: 0.82rem;
font-weight: 600;
color: #495057;
flex-shrink: 0;
}
.le-score-bar-wrap {
flex: 1;
height: 8px;
background: #f1f3f5;
border-radius: 4px;
overflow: hidden;
}
.le-score-bar {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #667eea, #5a67d8);
transition: width 0.6s ease;
}
.le-score-bar--teal {
background: linear-gradient(90deg, #38b2ac, #319795);
}
.le-score-bar--orange {
background: linear-gradient(90deg, #ed8936, #dd6b20);
}
.le-score-bar--purple {
background: linear-gradient(90deg, #9f7aea, #805ad5);
}
.le-score-bar--green {
background: linear-gradient(90deg, #48bb78, #38a169);
}
.le-score-num {
width: 36px;
text-align: right;
font-size: 0.9rem;
font-weight: 700;
color: #212529;
flex-shrink: 0;
}
.le-score-num span {
font-size: 0.7rem;
font-weight: 400;
color: #adb5bd;
}
.le-score-desc {
font-size: 0.72rem;
color: #adb5bd;
margin: 0 0 14px 110px;
}
.le-info-banner {
margin-top: 16px;
padding: 10px 16px;
background: #f0f4ff;
border-radius: 8px;
font-size: 0.82rem;
color: #495057;
}
.le-info-banner i {
color: #667eea;
}
.le-detail-card {
padding: 20px;
height: 100%;
position: relative;
}
.le-detail-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
margin-bottom: 10px;
}
.le-detail-icon--blue {
background: linear-gradient(135deg, #667eea, #5a67d8);
}
.le-detail-icon--purple {
background: linear-gradient(135deg, #9f7aea, #805ad5);
}
.le-detail-title {
font-size: 0.9rem;
font-weight: 600;
color: #343a40;
margin: 0 0 14px;
}
.le-detail-stats {
display: flex;
gap: 20px;
margin-bottom: 14px;
}
.le-stat {
background: white;
border-radius: 8px;
padding: 10px 16px;
text-align: center;
flex: 1;
}
.le-stat-value {
font-size: 1.3rem;
font-weight: 700;
color: #212529;
}
.le-stat-label {
font-size: 0.72rem;
color: #868e96;
margin-top: 2px;
}
.le-detail-submitted {
display: inline-block;
background: #d4edda;
color: #155724;
padding: 4px 12px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
margin-bottom: 12px;
}
.le-detail-feedback {
background: white;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
}
.le-detail-feedback-label {
font-size: 0.78rem;
font-weight: 600;
color: #667eea;
margin-bottom: 6px;
}
.le-detail-feedback p {
margin: 0;
font-size: 0.82rem;
color: #495057;
line-height: 1.5;
}
.le-detail-comments {
border-top: 1px solid #e9ecef;
padding-top: 12px;
}
.le-detail-comments p {
margin: 0 0 4px;
font-size: 0.8rem;
color: #495057;
line-height: 1.5;
}
.le-detail-comments strong {
color: #5a67d8;
}
.le-overall {
display: flex;
align-items: center;
gap: 28px;
}
.le-overall-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.le-overall-num {
font-size: 2.2rem;
font-weight: 700;
line-height: 1;
}
.le-overall-max {
font-size: 0.85rem;
opacity: 0.75;
}
.le-overall-text h6 {
margin: 0 0 4px;
font-size: 0.95rem;
font-weight: 600;
color: #343a40;
}
.le-overall-text p {
margin: 0;
font-size: 0.85rem;
color: #868e96;
line-height: 1.5;
}
.le-score-card {
padding: 24px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.le-score-card-status {
margin-bottom: 4px;
}
.le-status {
display: inline-flex;
align-items: center;
padding: 5px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.le-status--done {
background: #d4edda;
color: #155724;
}
.le-status--pending {
background: #fff3cd;
color: #856404;
}
.le-score-card-body {
padding: 20px 28px;
width: 100%;
}
.le-score-card-body--empty {
background: #f1f3f5;
color: #adb5bd;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 0.85rem;
padding: 24px;
border-radius: 12px;
width: 100%;
}
.le-score-card-body--empty i {
font-size: 1.4rem;
}
.le-score-card-label {
font-size: 0.78rem;
color: #555;
margin-bottom: 4px;
}
.le-score-card-value {
font-size: 2.6rem;
font-weight: 700;
color: #2e7d32;
line-height: 1.1;
}
.le-score-card-value span {
font-size: 1rem;
font-weight: 400;
color: #666;
}
.le-score-card-note {
font-size: 0.72rem;
color: #888;
margin-top: 6px;
}
.le-reflect-card {
padding: 24px;
height: 100%;
}
.le-reflect-title {
font-size: 0.9rem;
font-weight: 600;
color: #343a40;
margin: 0 0 16px;
}
.le-reflect-title i {
color: #667eea;
}
.le-reflect-items {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.le-reflect-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
}
.le-reflect-item-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
flex-shrink: 0;
}
.le-reflect-item-icon--blue {
background: linear-gradient(135deg, #667eea, #5a67d8);
}
.le-reflect-item-icon--green {
background: linear-gradient(135deg, #48bb78, #38a169);
}
.le-reflect-item-name {
font-size: 0.82rem;
font-weight: 600;
color: #343a40;
}
.le-reflect-item-desc {
font-size: 0.75rem;
color: #868e96;
margin-top: 1px;
}
.le-reflect-item-weight {
margin-left: auto;
font-size: 1.05rem;
font-weight: 700;
color: #667eea;
flex-shrink: 0;
}
.le-reflect-note {
text-align: center;
font-size: 0.78rem;
color: #adb5bd;
padding-top: 12px;
border-top: 1px solid #e9ecef;
}
.le-reflect-note i {
color: #667eea;
}
.le-back-wrap {
text-align: center;
margin-top: 32px;
margin-bottom: 24px;
}
.le-back-btn {
display: inline-flex;
align-items: center;
padding: 10px 24px;
background: #036EB8;
color: #fff;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: background 0.2s;
}
.le-back-btn:hover {
background: #025a9e;
color: #fff;
}
@media (max-width: 768px) {
.le-header-inner {
flex-direction: column;
align-items: flex-start;
}
.le-header-lesson {
text-align: left;
}
.le-overall {
flex-direction: column;
text-align: center;
}
.le-score-desc {
margin-left: 0;
}
.le-detail-stats {
flex-direction: column;
gap: 8px;
}
}
.page-school-student-show.school_student_show .evaluation-chart,
.page-school-student-show.school_student_show .link-list,
.page-school-student-show.school_student_show .school_contents_title {
display: none;
}
.shop_page {
min-height: 100vh;
}
.shop_page .row {
margin: 0;
min-height: auto;
}
.shop_page .row .col-2 {
background: white;
padding: 0;
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
}
.shop_page .row .col-10 {
padding: 0;
}
.main-content {
height: 100%;
padding: 0 0 2rem;
overflow-y: auto;
}
.main-content .col-12,
.main-content .col-10 {
padding: 16px 8px !important;
}
.main-content .link {
color: #036EB8;
background: none;
text-decoration: none;
margin-bottom: 0 !important;
}
.main-content .link:hover {
color: #036EB8;
}
.main-content .form-actions {
border-top: none;
text-align: left !important;
}
.main-content .form-actions .btn {
display: inline-block;
}
.main-content .form-actions a {
background: none;
color: #036EB8;
text-decoration: none;
margin-left: 3rem;
}
.main-content .form-actions a:hover {
color: #036EB8;
}
.main-content .student_index_card {
padding: 16px;
}
.main-content .student_index_card h4 {
margin: 1rem 0;
font-size: 20px;
}
.main-content .student_index_card h4 i {
margin-right: 8px;
color: #036EB8;
}
.main-content .student_index_card h4 span {
margin-left: 1rem;
font-size: 12px;
}
.main-content .student_index_card h4 span a {
background: none;
color: #036EB8;
text-decoration: none;
}
.main-content .student_index_card h4 span a:hover {
color: #036EB8;
}
.main-content .student_index_card table {
table-layout: fixed;
text-align: left;
}
.main-content .student_index_card table tr td {
text-align: left;
font-size: 16px;
}
.main-content .student_index_card table tr td ul {
padding: 0;
margin: 0;
}
.main-content .student_index_card table tr td ul li {
display: inline-block;
margin-right: 1rem;
}
.main-content .student_index_card table tr td span {
font-size: 16px;
}
.main-content .student_index_card table tr td::after {
display: none;
}
.main-content .student_index_card table tr td::before {
display: none;
}
.main-content .student_index_card table tr td i {
font-size: 18px;
color: #036EB8;
}
.main-content .announcements-section {
background: white;
margin: 16px 8px;
padding: 8px 16px;
border-radius: 12px;
}
.main-content .announcements-section h5 {
color: #666;
font-size: 1rem;
font-weight: bold;
margin-bottom: 1rem;
}
.main-content .card {
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin: 1rem 0;
background: white;
height: 100%;
}
.main-content .card:last-child {
margin-bottom: 0;
}
.main-content .card .card-body {
padding: 1.5rem;
}
.main-content .table {
width: 100%;
}
.main-content .table th {
background: #f8f9fa;
padding: 16px;
font-weight: 500;
color: #666;
}
.main-content .table td {
padding: 16px;
vertical-align: middle;
}
.student_card {
background: white;
width: 100%;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.student_card h4 {
font-size: 24px;
margin: 2rem 0;
}
.student_card h4 i {
color: #036EB8;
margin-right: 8px;
}
.student_card h4 a {
background: none;
color: #036EB8;
text-decoration: none;
font-size: 80%;
margin-left: 16px;
}
.student_card h4 a i {
margin-right: 4px;
}
.student_card h4 a:hover {
color: #036EB8;
}
.student_card .btn {
background: #036EB8;
color: white;
padding: 12px 40px;
text-decoration: none;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
margin: 2rem 0;
display: block;
width: 200px;
}
.student_card .btn:hover {
background: #036EB8;
}
.student_card .table-responsive .table {
margin-bottom: 0;
width: 100%;
}
.student_card .table-responsive .table thead {
text-align: left;
}
.student_card .table-responsive .table tbody td .btn {
background: none;
border: none;
padding: 0;
color: #036EB8;
display: inline-block;
width: auto !important;
margin: 0 !important;
}
.student_card .table-responsive .table tbody td .btn:hover {
background: none;
}
.student_card form {
max-width: 600px;
}
.student_card form .alert {
background-color: #fff3f3;
border: 1px solid #ffcdd2;
border-radius: 4px;
padding: 1rem;
margin-bottom: 2rem;
}
.student_card form .alert h2 {
color: #d32f2f;
font-size: 1rem;
margin-bottom: 1rem;
}
.student_card form .alert ul {
color: #d32f2f;
margin: 0;
padding-left: 1.5rem;
}
.student_card form .form-group {
margin-bottom: 1.5rem;
}
.student_card form .form-group .form-label {
font-weight: 500;
color: #333;
margin-bottom: 0.5rem;
}
.student_card form .form-group .form-control,
.student_card form .form-group .form-select {
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.75rem;
width: 100%;
font-size: 1rem;
}
.student_card form .form-group .form-control:focus,
.student_card form .form-group .form-select:focus {
border-color: #036EB8;
box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.student_card form .form-actions {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #eee;
text-align: center;
}
.student_card form .form-actions .btn {
min-width: 200px;
margin: 0 0.5rem;
padding: 0.75rem 1rem;
font-weight: 500;
}
.student_card form .form-actions .btn:not(.btn-secondary) {
background: #036EB8;
color: white;
}
.student_card form .form-actions .btn:not(.btn-secondary):hover {
background: #035f9f;
}
.student_card form .form-actions .btn.btn-secondary {
background: #f5f5f5;
color: #666;
border: 1px solid #ddd;
}
.student_card form .form-actions .btn.btn-secondary:hover {
background: #eee;
}
.student_card .minecraft-credentials {
background: #f8f9fa;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.student_card .minecraft-credentials .credential-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.student_card .minecraft-credentials .credential-item:last-child {
margin-bottom: 0;
}
.student_card .minecraft-credentials .credential-item label {
font-weight: 500;
color: #666;
width: 120px;
margin-right: 1rem;
}
.student_card .minecraft-credentials .credential-item span {
color: #333;
font-family: monospace;
font-size: 1.1rem;
}
.student_card table {
width: 100%;
table-layout: fixed;
}
.student_card table tr th {
width: 10%;
text-align: left;
}
.student_card table tr td {
width: 90%;
}
.student_card .section-title {
font-size: 1.2rem;
color: #333;
margin: 2rem 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #f5f5f5;
}
.student_card .section-title i {
color: #036EB8;
}
.student_card .progress-section {
margin: 2rem 0;
}
.student_card .progress-section .course-progress {
margin-bottom: 1.5rem;
}
.student_card .progress-section .course-progress h6 {
margin-bottom: 0.5rem;
color: #333;
}
.student_card .progress-section .course-progress .progress {
height: 0.8rem;
background-color: #e9ecef;
border-radius: 0.4rem;
margin-bottom: 0.5rem;
}
.student_card .progress-section .course-progress .progress .progress-bar {
background-color: #036EB8;
border-radius: 0.4rem;
}
.student_card .progress-section .course-progress small {
color: #666;
}
.student_card .submission-section {
margin: 2rem 0;
}
.student_card .submission-section .table th {
background-color: #f8f9fa;
font-weight: 500;
}
.student_card .submission-section .table .badge {
padding: 0.5em 0.8em;
font-weight: 500;
}
.student_card .submission-section .table .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.action-buttons ul li {
display: inline-block;
margin-right: 1rem;
}
.action-buttons ul li:last-of-type a {
background: #666;
}
.grade-stat {
padding: 1rem;
border-radius: 0.5rem;
background-color: #f8f9fa;
}
.grade-stat h6 {
color: #666;
font-size: 0.875rem;
}
.grade-stat .h4 {
color: #036EB8;
font-weight: 500;
}
.announcement_index_card,
.announcement_show_card {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.announcement_index_card h4,
.announcement_show_card h4 {
margin-bottom: 20px;
}
.announcement_index_card h4 i,
.announcement_show_card h4 i {
margin-right: 8px;
}
.announcements .announcement-item {
border-bottom: 1px solid #eee;
padding: 15px 0;
}
.announcements .announcement-item:last-child {
border-bottom: none;
}
.announcements .announcement-link {
display: block;
color: inherit;
text-decoration: none;
}
.announcements .announcement-link:hover .title {
color: #007bff;
}
.announcements .announcement-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px;
}
.announcements .announcement-header .date {
color: #666;
font-size: 0.9em;
}
.announcements .title {
margin: 0;
font-size: 1.1em;
transition: color 0.2s;
}
.announcement-show-card .announcement-header {
margin-bottom: 20px;
}
.announcement-show-card .announcement-header .meta {
color: #666;
font-size: 0.9em;
margin-top: 5px;
}
.announcement-show-card .announcement-body {
margin-bottom: 30px;
line-height: 1.6;
}
.search-area {
flex: 1;
max-width: 500px;
margin: 0 2rem;
}
.search-area .search-form {
width: 100%;
}
.search-area .search-form .input-group {
display: flex;
align-items: center;
background: white;
border-radius: 30px;
overflow: hidden;
border: 1px solid #eee;
}
.search-area .search-form .input-group .search-input {
border: none;
padding: 0.75rem 1rem;
font-size: 0.9rem;
flex: 1;
}
.search-area .search-form .input-group .search-input:focus {
outline: none;
box-shadow: none;
}
.search-area .search-form .input-group .search-input::placeholder {
color: #999;
}
.search-area .search-form .input-group .btn-search {
background: none;
border: none;
padding: 0.75rem 1rem;
color: #666;
transition: color 0.2s ease;
}
.search-area .search-form .input-group .btn-search:hover {
color: #036EB8;
}
.search-area .search-form .input-group .btn-search i {
font-size: 1.2rem;
}
.shop_page_content {
padding: 3rem 1rem;
background: #f2f2f2;
}
.shop_page_content .dashboard-total-students {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0;
text-align: center;
}
.shop_page_content .row .col-2,
.shop_page_content .row .col-3,
.shop_page_content .row .col-7,
.shop_page_content .row .col-6 {
margin: 16px 0 !important;
padding: 0 8px !important;
background: none !important;
}
.shop_page_content .row .box {
background: white;
border-radius: 10px;
height: 100%;
}
.shop_page_content .row .box .card-body canvas {
min-height: 250px;
}
.box {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
height: 100%;
padding-bottom: 2rem;
}
.box h5 i {
font-size: 1.5rem;
margin-right: 8px;
}
.box table {
width: calc(100% - 32px);
margin: 0 auto;
table-layout: fixed;
}
.box table thead tr th {
font-size: 14px;
text-align: left;
padding: 8px;
}
.box table tr {
border-bottom: 1px solid #eee;
}
.box table tr td {
width: 20%;
font-size: 14px;
padding: 8px;
}
.box .box-body {
padding: 1.5rem;
position: relative;
}
.box .box-body .more {
position: absolute;
right: 16px;
top: 2.8rem;
background: none;
color: #036EB8;
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
.box .box-body .more:hover {
color: #036EB8;
}
.box .box-body canvas {
width: 100% !important;
}
.box .box-body canvas#courseChart {
height: auto !important;
min-height: 80px !important;
}
.box .box-body canvas#registrationChart {
min-height: auto !important;
height: 150px !important;
}
.box .box-body h5.card-title {
font-size: 1rem;
color: #333;
margin-bottom: 1.5rem;
}
.shop_contents {
padding: 32px;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.shop_contents h4 {
font-size: 24px;
margin-bottom: 24px;
font-weight: 600;
}
.shop_contents h5 {
font-size: 20px;
margin-bottom: 2rem;
}
.shop_contents .col-2 {
border: 1px solid #272727;
padding: 0;
flex: 0 0 16.666667%;
max-width: 16.666667%;
overflow: hidden;
}
.shop_contents .col-2 h6 {
background: #f8f9fa;
text-align: center;
padding: 12px 4px;
font-weight: bold;
color: #007bff;
font-size: 13px;
margin: 0;
white-space: nowrap;
}
.shop_contents .form-check-input {
float: none;
padding-left: 0;
margin-right: 4px;
margin-top: 0;
flex-shrink: 0;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.shop_contents .form-check {
min-height: 0 !important;
margin: 6px 4px;
padding-left: 0;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.shop_contents .form-check .form-check-input {
margin-left: 0 !important;
position: relative;
margin-bottom: 0 !important;
}
.shop_contents .form-check.form-switch {
padding-left: 8px;
}
.shop_contents .form-check.form-switch .form-check-input {
width: 1em;
height: 1em;
margin-right: 6px;
}
.shop_contents .form-check .form-check-label {
font-size: 10px;
line-height: 1.2;
white-space: normal;
word-break: break-word;
margin: 0;
padding: 0;
flex: 1;
overflow: hidden;
}
.shop_contents .holiday_input input {
width: 50%;
margin-bottom: 0 !important;
}
.shop_contents .holiday_input .btn {
line-height: 1;
margin-left: 1rem;
}
.shop_contents .setting_box {
background: white;
border-radius: 8px;
padding: 24px;
margin-bottom: 32px;
}
.shop_contents .setting_box h6 {
font-size: 16px;
margin-bottom: 1rem;
}
.shop_contents .setting_box select {
width: 20%;
padding: 8px 16px;
margin-bottom: 2rem;
}
.shop_contents .setting_box input {
margin-bottom: 2rem;
}
.shop_contents .setting_box table .date_input {
display: inline-block;
}
.shop_contents .setting_box .form-switch .form-check-label {
font-size: 12px;
}
.shop_contents .setting_box .day_section {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
}
.shop_contents .setting_box .table,
.shop_contents .setting_box .time_slot_table {
width: 100%;
table-layout: fixed;
margin-bottom: 0;
}
.shop_contents .setting_box .table .delete_button,
.shop_contents .setting_box .time_slot_table .delete_button {
background: none;
color: red;
padding: 8px;
}
.shop_contents .setting_box .table td,
.shop_contents .setting_box .time_slot_table td {
padding: 4px 2px;
vertical-align: middle;
border: none;
}
.shop_contents .setting_box .table td:first-child,
.shop_contents .setting_box .time_slot_table td:first-child {
width: 45%;
}
.shop_contents .setting_box .table td:nth-child(2),
.shop_contents .setting_box .time_slot_table td:nth-child(2) {
width: 40%;
}
.shop_contents .setting_box .table td:last-child,
.shop_contents .setting_box .time_slot_table td:last-child {
width: 15%;
}
.shop_contents .setting_box .table td span,
.shop_contents .setting_box .time_slot_table td span {
font-size: 10px;
margin-left: 2px;
white-space: nowrap;
}
.shop_contents .setting_box .table input,
.shop_contents .setting_box .time_slot_table input {
margin: 0;
padding: 4px 2px !important;
font-size: 11px;
width: 100%;
border: 1px solid #ddd;
border-radius: 3px;
}
.shop_contents .setting_box .table input[type="time"],
.shop_contents .setting_box .time_slot_table input[type="time"] {
padding: 4px !important;
}
.shop_contents .setting_box .table input[type="number"],
.shop_contents .setting_box .time_slot_table input[type="number"] {
padding: 4px 2px !important;
}
.shop_contents .setting_box .table .btn,
.shop_contents .setting_box .time_slot_table .btn {
padding: 2px 4px;
background: none;
border: none;
color: crimson;
font-size: 12px;
min-width: auto;
width: 100%;
}
.shop_contents .setting_box .table .btn i,
.shop_contents .setting_box .time_slot_table .btn i {
font-size: 12px;
}
.shop_contents .setting_box .add_time_button {
background: #f8f9fa;
color: #036EB8;
display: block;
margin: 8px auto;
font-weight: 600;
padding: 4px 8px;
font-size: 11px;
border: 1px solid #036EB8;
border-radius: 3px;
white-space: nowrap;
width: 90%;
}
.shop_contents .setting_box .time_slots {
padding: 8px 4px;
}
.shop_contents .setting_box .time_slots .text-end {
text-align: center !important;
margin-top: 4px;
}
.shop_contents .add_button {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #6c757d;
color: white;
}
.shop_contents .add_button i {
font-size: 1.1em;
}
.shop_contents .delete_button {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #dc3545;
color: white;
}
.shop_contents .delete_button i {
font-size: 1.1em;
}
.shop_contents .add_time_button {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #036EB8;
color: white;
}
.shop_contents .add_time_button i {
font-size: 1.1em;
}
.shop_contents .save_button {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #28a745;
color: white;
min-width: 200px;
}
.shop_contents .save_button i {
font-size: 1.1em;
}
.shop_contents .holiday_input .holiday_tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.shop_contents .holiday_input .holiday_tags .holiday_tag {
background: #036EB8;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.shop_contents .holiday_input .holiday_tags .holiday_tag i {
cursor: pointer;
color: white !important;
font-size: 12px;
}
.shop_contents .holiday_input .holiday_tags .holiday_tag i:hover {
color: #bd2130;
}
.shop_contents .modal:not(.time-slots-detail-modal) {
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50%;
padding: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 6px;
}
.shop_contents .modal:not(.time-slots-detail-modal) .modal-header {
background: none;
padding: 0;
position: relative;
}
.shop_contents .modal:not(.time-slots-detail-modal) .modal-header .btn-close {
top: 0;
padding: 0;
}
.shop_contents .modal:not(.time-slots-detail-modal) .modal-header h5 {
margin: 1rem 0;
}
.shop_contents .modal:not(.time-slots-detail-modal) .modal-body {
width: 100%;
height: auto;
margin: 0;
background: white;
padding: 1rem;
}
.shop_contents .modal:not(.time-slots-detail-modal) .modal-content {
width: 100%;
height: auto;
margin: 0;
box-shadow: none;
position: relative;
}
.auto-message-settings {
background: #f8f9fa;
padding: 16px;
border-radius: 6px;
}
.auto-message-settings .form-check-input:checked {
background-color: #036EB8;
border-color: #036EB8;
}
.message-contents h6 {
font-size: 14px;
font-weight: 600;
color: #495057;
}
.message-contents .form-label {
font-size: 14px;
color: #495057;
margin-bottom: 4px;
}
.message-contents .form-control {
font-size: 14px;
}
.message-contents .form-control::placeholder {
font-size: 12px;
color: #666;
}
.lesson_contents {
padding: 3rem 2rem;
}
.lesson_contents h4 {
margin-bottom: 3rem;
font-size: 20px;
font-weight: 600;
}
.lesson_contents h4 span {
margin-left: 16px;
font-size: 16px;
}
.lesson_contents h4 span i {
margin-right: 8px;
}
.lesson_contents h4 span a {
color: #036EB8;
text-decoration: none;
}
.lesson_contents h4 span a:hover {
color: #036EB8;
}
.lesson_contents table {
width: 100%;
table-layout: fixed;
}
.lesson_contents table th,
.lesson_contents table td {
padding: 16px 8px;
border-bottom: 1px solid #eee;
}
.lesson_contents table td a {
text-decoration: none;
color: #036EB8;
}
.lesson_contents table td a:hover {
color: #036EB8;
}
.nav-tabs {
margin-bottom: 1rem;
}
.nav-tabs .nav-item {
margin-bottom: -1px;
list-style-type: none;
display: inline-block;
}
.nav-tabs .nav-link {
color: #495057;
background-color: transparent;
border: none;
padding: 0.5rem 1rem;
margin-bottom: -1px;
transition: all 0.2s ease-in-out;
}
.nav-tabs .nav-link:hover {
border-color: #e9ecef #e9ecef #dee2e6;
isolation: isolate;
}
.nav-tabs .nav-link.active {
color: #036EB8;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
font-weight: 500;
}
.tab-content .tab-pane {
display: none;
opacity: 0;
transition: opacity 0.15s linear;
}
.tab-content .tab-pane.show {
display: block;
opacity: 1;
}
.line_table {
table-layout: fixed;
}
.line_table th,
.line_table td {
text-align: left;
padding: 8px 0;
}
.line_table th:first-of-type,
.line_table td:first-of-type {
width: 20%;
}
.line_table th:nth-child(2),
.line_table td:nth-child(2) {
width: 15%;
}
.line_table th:nth-child(3),
.line_table td:nth-child(3) {
width: 15%;
}
.line_table th:nth-child(4),
.line_table td:nth-child(4) {
width: 15%;
}
.line_table th:last-of-type,
.line_table td:last-of-type {
width: 35%;
}
.line-connection-form {
display: flex;
align-items: center;
justify-content: flex-end;
}
.line-connection-form .form-select {
height: 40px;
padding: 12px 16px;
font-size: 0.875rem;
border: 1px solid #dee2e6;
border-radius: 6px 0 0 6px;
background-color: #fff;
color: #495057;
}
.line-connection-form .form-select:focus {
border-color: #036EB8;
box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.line-connection-form .btn-primary {
height: 40px;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
background-color: #036EB8;
border-color: #036EB8;
border-radius: 0 6px 6px 0 !important;
color: #fff;
white-space: nowrap;
margin: 0 !important;
}
.line-connection-form .btn-primary:hover {
background-color: #035f9f;
border-color: #035f9f;
}
.lesson_contents .filter-box a {
background: none;
margin-bottom: 0;
color: #036EB8;
padding: 7px 24px !important;
font-size: 16px;
font-weight: 600;
}
.lesson_history_contents {
padding: 3rem 1rem;
}
.lesson_history_contents h4 {
font-size: 20px;
margin-bottom: 3rem;
}
.lesson_history_contents h4 span {
margin-left: 8px;
}
.lesson_history_contents h4 span a {
text-decoration: none;
font-size: 16px;
color: #036EB8;
}
.student_card .card.mb-4 {
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 1.5rem !important;
}
.student_card .card.mb-4 .card-body {
padding: 1.5rem;
}
.student_card .card.mb-4 .card-body .row.g-3 {
margin: 0;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 {
margin-bottom: 0;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-label {
font-size: 0.875rem;
font-weight: 500;
color: #495057;
margin-bottom: 0.5rem;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-select,
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-control {
height: 40px;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
border: 1px solid #dee2e6;
border-radius: 6px;
background-color: #fff;
color: #333;
transition: all 0.2s ease;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-select:focus,
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-control:focus {
border-color: #036EB8;
box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
outline: none;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-select::placeholder,
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-control::placeholder {
color: #999;
}
.student_card .card.mb-4 .card-body .row.mt-3 {
margin-top: 1rem !important;
border-top: 1px solid #e9ecef;
padding-top: 1rem;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex {
gap: 0.75rem;
justify-content: flex-end;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex .btn {
height: 40px;
padding: 0.5rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 6px;
white-space: nowrap;
transition: all 0.2s ease;
min-width: 100px;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex .btn.btn-primary {
background-color: #036EB8;
border-color: #036EB8;
color: white;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex .btn.btn-primary:hover {
background-color: #035f9f;
border-color: #035f9f;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex .btn.btn-outline-secondary {
color: #6c757d;
border-color: #dee2e6;
background-color: white;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex .btn.btn-outline-secondary:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
color: #495057;
}
.student_card .alert-info {
background-color: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 6px;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
color: #004085;
}
.student_card .alert-info i {
color: #036EB8;
margin-right: 0.5rem;
}
.student_card .alert-info strong {
color: #036EB8;
font-weight: 600;
}
.student_card .table-responsive {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-top: 1rem;
}
.student_card .table-responsive .table {
margin-bottom: 0;
width: 100%;
}
.student_card .table-responsive .table thead {
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
.student_card .table-responsive .table thead tr th {
padding: 1rem 0.75rem;
font-weight: 600;
font-size: 0.875rem;
color: #495057;
text-align: left;
vertical-align: middle;
border-bottom: 2px solid #dee2e6;
white-space: nowrap;
}
.student_card .table-responsive .table thead tr th:first-child {
padding-left: 1.25rem;
}
.student_card .table-responsive .table thead tr th:last-child {
padding-right: 1.25rem;
}
.student_card .table-responsive .table tbody tr {
transition: background-color 0.2s ease;
border-bottom: 1px solid #e9ecef;
}
.student_card .table-responsive .table tbody tr:hover {
background-color: rgba(3, 110, 184, 0.02);
}
.student_card .table-responsive .table tbody tr:last-child {
border-bottom: none;
}
.student_card .table-responsive .table tbody tr td {
padding: 1rem 0.75rem;
font-size: 0.875rem;
color: #333;
vertical-align: middle;
border-bottom: 1px solid #e9ecef;
}
.student_card .table-responsive .table tbody tr td:first-child {
padding-left: 1.25rem;
font-weight: 500;
color: #495057;
}
.student_card .table-responsive .table tbody tr td:last-child {
padding-right: 1.25rem;
}
.student_card .table-responsive .table tbody tr td a.text-decoration-none {
color: #036EB8;
font-weight: 500;
text-decoration: none !important;
transition: color 0.2s ease;
}
.student_card .table-responsive .table tbody tr td a.text-decoration-none:hover {
color: #025086;
text-decoration: underline !important;
}
.student_card .table-responsive .table tbody tr td a.ms-2 {
color: #6c757d;
font-size: 1rem;
transition: color 0.2s ease;
}
.student_card .table-responsive .table tbody tr td a.ms-2:hover {
color: #036EB8;
}
.student_card .table-responsive .table tbody tr td .btn {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
border-radius: 4px;
transition: all 0.2s ease;
white-space: nowrap;
}
.student_card .table-responsive .table tbody tr td .btn.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.8125rem;
}
.student_card .table-responsive .table tbody tr td .btn.btn-outline-primary {
border-color: #036EB8;
color: #036EB8;
background-color: transparent;
}
.student_card .table-responsive .table tbody tr td .btn.btn-outline-primary:hover {
background-color: #036EB8;
color: white;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
}
.student_card .table-responsive .table tbody tr td .btn.btn-outline-danger {
border-color: #dc3545;
color: #dc3545;
background-color: transparent;
}
.student_card .table-responsive .table tbody tr td .btn.btn-outline-danger:hover {
background-color: #dc3545;
color: white;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
.student_card .table-responsive .table tbody tr td .btn.btn-outline-danger i {
font-size: 1rem;
}
.student_card .table-responsive .table tbody tr td .text-muted {
color: #6c757d;
font-size: 0.8125rem;
font-style: italic;
}
.student_card .alert-info:last-child {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 2rem;
text-align: center;
color: #6c757d;
font-size: 0.9375rem;
}
.student_card h4 {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e9ecef;
}
.student_card h4 i {
color: #036EB8;
margin-right: 0.5rem;
font-size: 1.5rem;
}
.student_card h4 span {
margin-left: auto;
}
.student_card h4 span a {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
background-color: #036EB8;
color: white;
border-radius: 6px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.student_card h4 span a i {
margin-right: 0.5rem;
color: white;
font-size: 1rem;
}
.student_card h4 span a:hover {
background-color: #035f9f;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
}
.student_card form.d-inline {
display: inline-block;
}
.student_card h5 {
margin: 4rem 0 2rem;
font-size: 20px;
}
@media (max-width: 768px) {
.student_card h4 {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.student_card h4 span {
margin-left: 0;
width: 100%;
}
.student_card h4 span a {
width: 100%;
justify-content: center;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 {
margin-bottom: 1rem;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex {
flex-direction: column;
width: 100%;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex .btn {
width: 100%;
margin-bottom: 0.5rem;
}
.student_card .card.mb-4 .card-body .row.mt-3 .col-12.d-flex .btn:last-child {
margin-bottom: 0;
}
.student_card .table-responsive .table thead {
display: none;
}
.student_card .table-responsive .table tbody tr {
display: block;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 1rem;
}
.student_card .table-responsive .table tbody tr td {
display: block;
padding: 0.5rem 0;
border-bottom: 1px solid #f0f0f0;
text-align: left;
}
.student_card .table-responsive .table tbody tr td:before {
content: attr(data-label);
font-weight: 600;
color: #495057;
display: block;
margin-bottom: 0.25rem;
}
.student_card .table-responsive .table tbody tr td:first-child {
padding-left: 0;
}
.student_card .table-responsive .table tbody tr td:last-child {
padding-right: 0;
border-bottom: none;
}
}
.student_card .search-table a {
background: none !important;
color: #036EB8 !important;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.2s ease;
width: fit-content;
margin: 0 !important;
}
.student_card .history_form {
width: 100%;
table-layout: fixed;
}
.student_card .history_form th,
.student_card .history_form td {
font-size: 16px;
padding: 16px 0;
vertical-align: top;
}
.student_card .history_form th {
width: 20%;
text-align: left;
}
.student_card .history_form td {
width: 80%;
}
.student_card .history_form td select,
.student_card .history_form td input {
height: 45px;
padding: 8px 16px;
}
.student_card .history_table {
background: white;
border-radius: 12px;
overflow: hidden;
margin: 4rem 0;
}
.student_card .history_table th,
.student_card .history_table td {
text-align: left;
padding: 1.25rem;
vertical-align: middle;
border-bottom: 1px solid #eee;
}
.student_card .history_table th:first-of-type,
.student_card .history_table td:first-of-type {
width: 20%;
}
.student_card .history_table th:nth-child(2),
.student_card .history_table td:nth-child(2) {
width: 15%;
}
.student_card .history_table th:nth-child(3),
.student_card .history_table td:nth-child(3) {
width: 15%;
}
.student_card .history_table th:nth-child(4),
.student_card .history_table td:nth-child(4) {
width: 40%;
}
.student_card .history_table th:last-of-type,
.student_card .history_table td:last-of-type {
width: 10%;
}
.student_card .history_table th {
background: #f8f9fa;
font-weight: 500;
color: #666;
font-size: 0.9rem;
}
.student_card .history_table td {
font-size: 0.95rem;
color: #333;
}
.student_card .history_table td a {
text-decoration: none;
background: none !important;
color: #036EB8 !important;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.2s ease;
width: fit-content;
margin: 0 !important;
}
.student_card .history_table td a:hover {
background: rgba(3, 110, 184, 0.1);
}
.student_card .history_table td a i {
font-size: 1rem;
}
.student_card .history_table tbody tr {
transition: all 0.2s ease;
}
.student_card .history_table tbody tr:hover {
background-color: rgba(3, 110, 184, 0.02);
}
.student_card .history_table tbody tr:last-child td {
border-bottom: none;
}
.student_card .text-end {
margin: 2rem 0;
padding: 0;
}
.student_card .text-end a {
color: #036EB8;
text-decoration: none;
margin-left: 16px;
font-weight: 600;
}
.student_card .text-end ul li {
display: inline-block;
}
.student_card .search_table_contents tr {
display: inline-block;
background: white;
padding: 0 16px;
}
.student_card .search_table_contents tr th {
padding-right: 8px;
}
.student_card .search_table_contents tr td input,
.student_card .search_table_contents tr td select {
height: 40px;
padding: 8px 16px;
border: 1px solid #eee;
border-radius: 4px;
}
.student_card .search_table_contents ul {
margin: 2rem 0;
}
.student_card .search_table_contents ul li {
list-style-type: none;
display: inline-block;
}
.student_card .search_table_contents ul li .btn {
width: 150px;
margin-right: 16px;
}
.student_card .search_table_contents ul li a {
color: #036EB8;
text-decoration: none;
font-weight: 600;
}
.line_setteing {
padding: 3rem 1rem;
}
.line_setteing h4 {
margin-bottom: 3rem;
font-size: 20px;
}
.line_setteing h5 {
font-size: 18px;
color: #666;
margin-bottom: 1rem;
}
.line_setteing h5 span {
margin-left: 16px;
}
.line_setteing h5 span a {
color: #036EB8;
font-size: 16px;
text-decoration: none;
}
.line_setteing h6 {
font-size: 16px;
color: #666;
margin-bottom: 1rem;
}
.line_setteing .mb-3 {
margin: 2rem 0;
}
.line_setteing .mb-3 li {
list-style-type: none;
padding: 8px 0;
}
.line_setteing .mb-3 .MessageTitle {
display: none;
}
.line_setteing .mb-3 .form-label {
margin: 1rem 0;
display: block;
}
.shop_course-content .row,
.shop_lesson-content .row {
min-height: auto !important;
}
.shop_course-content .row .col-3,
.shop_lesson-content .row .col-3 {
max-width: calc(25% - 16px);
margin: 0 auto;
}
.shop_course-content h4,
.shop_lesson-content h4 {
font-size: 1.2rem;
font-weight: 600;
color: #343a40;
margin-bottom: 1.5rem;
}
.shop_course-content h4 i,
.shop_lesson-content h4 i {
color: #036EB8;
}
.shop_course-content h3,
.shop_lesson-content h3 {
font-size: 1.35rem;
font-weight: 600;
color: #343a40;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.shop_course-content h3 i,
.shop_lesson-content h3 i {
color: #036EB8;
}
.shop_course-content h3 span,
.shop_lesson-content h3 span {
font-size: 60%;
}
.shop_course-content h3 .badge,
.shop_lesson-content h3 .badge {
font-size: 0.9rem;
font-weight: 500;
padding: 0.5em 0.8em;
}
.shop_course-content .course-title,
.shop_lesson-content .course-title {
background: #eef8ff;
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
margin-bottom: 1rem;
font-size: 16px;
color: #036EB8;
}
.shop_course-content .course-title::before,
.shop_lesson-content .course-title::before {
content: "コース名:";
font-weight: 600;
margin-right: 8px;
}
.shop_course-content .lesson-title,
.shop_lesson-content .lesson-title {
font-size: 20px;
}
.shop_course-content .lessons,
.shop_lesson-content .lessons {
margin: 4rem 0 2rem;
}
.shop_course-content .lessons .shop-uiverse-cards,
.shop_lesson-content .lessons .shop-uiverse-cards {
min-height: auto !important;
}
.shop-uiverse-card {
width: 100%;
min-height: 260px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 0;
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.shop-uiverse-card__top {
position: relative;
padding: 3rem 2rem;
background: linear-gradient(135deg, #025a96 0%, #036eb8 52%, #0ea5e9 100%);
min-height: 84px;
}
.shop-uiverse-card__top::after {
content: "";
position: absolute;
right: -1.5rem;
bottom: -2rem;
width: 6rem;
height: 6rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.shop-uiverse-card__index {
position: absolute;
top: 0.85rem;
right: 1rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.88);
}
.shop-uiverse-card__icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
font-size: 1.3rem;
line-height: 1;
}
.shop-uiverse-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 1rem 1.15rem 0.35rem;
}
.shop-uiverse-card__heading {
margin: 0;
font-size: 1.25rem !important;
font-weight: 700;
line-height: 1.35;
color: #0f172a;
}
.shop-uiverse-card__content {
margin: 0;
font-size: 0.8125rem;
line-height: 1.55;
color: #64748b;
}
.shop-uiverse-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
margin-top: auto;
padding: 0.8rem 1.15rem 1rem;
border-top: 1px solid #f1f5f9;
}
.shop-uiverse-card__meta {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin: 0;
padding: 0.28rem 0.6rem;
font-size: 0.72rem;
font-weight: 700;
color: #036eb8;
background: #eff6ff;
border-radius: 999px;
white-space: nowrap;
}
.shop-uiverse-card__cta {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.72rem;
font-weight: 600;
color: #94a3b8;
white-space: nowrap;
transition: color 0.2s ease, transform 0.2s ease;
}
.shop-uiverse-card:hover {
transform: translateY(-4px);
border-color: rgba(3, 110, 184, 0.28);
box-shadow: 0 14px 28px rgba(3, 110, 184, 0.14);
color: inherit;
}
.shop-uiverse-card:hover .shop-uiverse-card__cta {
color: #036eb8;
transform: translateX(2px);
}
.shop-uiverse-card__btn {
display: inline-flex;
align-items: center;
font-size: 12px;
padding: 6px 12px;
border-radius: 8px;
background: #036eb8;
color: #fff;
text-decoration: none;
font-weight: 600;
transition: all 0.2s;
margin-bottom: 0 !important;
}
.shop-uiverse-card__btn:hover {
color: #fff;
opacity: 0.95;
}
.shop-uiverse-card__btn--outline {
background: transparent;
color: #036eb8;
border: 1.5px solid #036eb8;
}
.shop-uiverse-card__btn--outline:hover {
color: #036eb8;
background: rgba(3, 110, 184, 0.1);
}
.shop-uiverse-card__btn--secondary {
background: #e5e7eb;
color: #374151;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.shop-uiverse-card__btn--secondary:hover {
color: #111;
background: #d1d5db;
}
.shop-uiverse-cards {
--shop-course-card-gap-x: 2rem;
--shop-course-card-gap-y: 2rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--shop-course-card-gap-y) var(--shop-course-card-gap-x);
margin: 0 0 2.5rem;
}
@media (min-width: 576px) {
.shop-uiverse-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.shop-uiverse-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1400px) {
.shop-uiverse-cards {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.shop-uiverse-cards .shop-uiverse-card {
max-width: none;
width: 100%;
}
.shop-uiverse-cards--steps {
margin-top: 1.25rem;
}
.shop-uiverse-cards--steps .shop-uiverse-card--admin {
width: 100%;
max-width: none;
}
.shop-uiverse-card--step {
min-height: 240px;
}
.shop-uiverse-card--admin {
cursor: default;
text-decoration: none;
}
.shop-uiverse-card--admin:hover {
transform: translateY(-4px);
border-color: rgba(3, 110, 184, 0.28);
box-shadow: 0 14px 28px rgba(3, 110, 184, 0.14);
}
.shop-uiverse-card--admin .shop-uiverse-card__main {
display: flex;
flex-direction: column;
flex: 1;
color: inherit;
text-decoration: none;
}
.shop-uiverse-card--admin .shop-uiverse-card__main:hover {
color: inherit;
}
.shop-uiverse-card--admin .shop-uiverse-card__footer--admin {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: nowrap;
}
.shop-uiverse-card--admin .shop-uiverse-card__footer-tools {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.shop-uiverse-card--admin .shop-uiverse-card__admin-actions {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding-left: 0.35rem;
margin-left: 0.15rem;
border-left: 1px solid #e2e8f0;
}
.shop-uiverse-card--admin .shop-uiverse-card__admin-form {
display: inline-flex;
margin: 0;
}
.shop-uiverse-card--admin .shop-uiverse-card__admin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: #64748b;
font-size: 1rem;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.shop-uiverse-card--admin .shop-uiverse-card__admin-btn:hover {
background: #eff6ff;
color: #036eb8;
}
.shop-uiverse-card--admin .shop-uiverse-card__admin-btn--danger:hover {
background: #fef2f2;
color: #dc2626;
}
.shop-uiverse-card__step-label {
margin: 0 0 0.15rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #64748b;
}
.steps-section h5 {
font-size: 1.15rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0;
}
.shop_course-content--index {
padding: 1.5rem 1rem 2rem;
}
.shop_course-content .steps-grid {
margin-bottom: 3rem;
}
.shop_course-content .steps-grid i {
margin: 0 16px;
}
.shop_course-content .lesson-steps {
padding: 3rem 0;
}
.shop_course-content .lesson-steps h5 {
font-size: 20px;
}
.shop_course-content .lesson-steps h5 i {
margin-right: 8px;
}
.shop_course-content .lesson-steps h5 span {
font-size: 60%;
}
.shop_course-content .back_btn {
color: #036EB8;
}
.shop_course-content .card {
border: none;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.shop_course-content .card .card-body {
padding: 1.5rem;
}
.shop_course-content .card .card-body h4 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
color: #343a40;
}
.shop_course-content .card .card-body p {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1rem;
}
.shop_course-content .lesson-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.shop_course-content .lesson-meta .badge {
font-size: 0.9rem;
font-weight: 500;
padding: 0.5em 0.8em;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.shop_course-content .lesson-meta .badge i {
font-size: 1.1em;
}
.shop_course-content .lesson-meta .badge.bg-info {
background-color: rgba(23, 162, 184, 0.1) !important;
color: #17a2b8;
}
.shop_course-content .lesson-meta .badge.bg-primary {
background-color: rgba(3, 110, 184, 0.1) !important;
color: #036EB8;
}
.shop_course-content .lesson-actions {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #dee2e6;
display: flex;
}
.shop_course-content .lesson-actions a {
padding: 8px 0;
}
.shop_course-content .lesson-actions .btn {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 12px;
padding: 8px;
margin: 0 4px;
}
.shop_course-content .lesson-actions .btn i {
font-size: 1.1em;
}
.shop_course-content .lesson-actions .btn-outline-primary {
border: 1px solid #036EB8;
color: #036EB8;
}
.shop_course-content .lesson-actions .btn-outline-primary:hover {
background: #036EB8;
color: white;
}
.shop_course-content .lesson-actions .btn-outline-info {
border: 1px solid #17a2b8;
color: #17a2b8;
}
.shop_course-content .lesson-actions .btn-outline-info:hover {
background: #17a2b8;
color: white;
}
.shop_course-content .lesson-actions .btn-outline-secondary {
border: 1px solid #6c757d;
color: #6c757d;
}
.shop_course-content .lesson-actions .btn-outline-secondary:hover {
background: #6c757d;
color: white;
}
.shop_courses .table {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.shop_courses .table tbody tr {
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #dee2e6;
}
.shop_courses .table tbody tr:last-child {
border-bottom: none;
}
.shop_courses .table tbody tr:hover {
background-color: rgba(3, 110, 184, 0.02);
}
.shop_courses .table tbody tr td {
padding: 1.25rem;
vertical-align: middle;
}
.shop_courses .table tbody tr td h5 {
font-size: 1.1rem;
font-weight: 600;
color: #343a40;
margin-bottom: 0.5rem;
}
.shop_courses .table tbody tr td p {
color: #6c757d;
margin: 0;
font-size: 0.9rem;
}
.shop_courses .table tbody tr td:last-child {
color: #036EB8;
width: 50px;
text-align: right;
}
.shop_courses .table tbody tr td:last-child i {
font-size: 1.2rem;
}
.lesson-resources .card {
height: 100%;
}
.lesson-resources .card .card-title {
display: flex;
align-items: center;
gap: 0.5rem;
color: #343a40;
}
.lesson-resources .card .card-title i {
color: #036EB8;
font-size: 1.3em;
}
.lesson-resources .card .btn {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
width: 100%;
justify-content: center;
margin-top: 1rem;
}
.lesson-resources .card .btn i {
font-size: 1.1em;
}
.lesson-resources .card .btn-primary {
background: #036EB8;
border: none;
color: white;
}
.lesson-resources .card .btn-primary:hover {
background: #035f9f;
}
.lesson-resources .card .btn-info {
background: #17a2b8;
border: none;
color: white;
}
.lesson-resources .card .btn-info:hover {
background: #148ea1;
}
.test-questions .question-item:not(:last-child) {
border-bottom: 1px solid #dee2e6;
margin-bottom: 2rem;
padding-bottom: 2rem;
}
.test-questions .question-item h4 {
font-size: 1.1rem;
font-weight: 600;
color: #343a40;
}
.test-questions .question-item h4 .badge {
background: rgba(3, 110, 184, 0.1);
color: #036EB8;
font-weight: 500;
padding: 0.5em 0.8em;
}
.test-questions .question-item .options .form-check {
margin-bottom: 1rem;
}
.test-questions .question-item .options .form-check:last-child {
margin-bottom: 0;
}
.test-questions .question-item .options .form-check .form-check-input:checked {
background-color: #28a745;
border-color: #28a745;
}
.test-questions .question-item .options .form-check .form-check-label {
color: #343a40;
}
.test-questions .question-item .options .form-check .form-check-label.text-success {
color: #28a745 !important;
}
.test-questions .question-item .options .form-check .form-check-label i {
font-size: 1.1em;
}
.modal .modal-header {
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
padding: 1rem 1.5rem;
}
.modal .modal-header .modal-title {
font-size: 1.2rem;
font-weight: 600;
color: #343a40;
display: flex;
align-items: center;
gap: 0.5rem;
}
.modal .modal-header .modal-title i {
color: #036EB8;
}
.modal .modal-footer {
background: #f8f9fa;
border-top: 1px solid #dee2e6;
padding: 1rem 1.5rem;
}
.modal .modal-footer .btn-secondary {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #6c757d;
border: none;
color: white;
}
.modal .modal-footer .btn-secondary i {
font-size: 1.1em;
}
.modal .modal-footer .btn-secondary:hover {
background: #60686f;
}
.lesson_info {
padding: 3rem 1rem;
position: relative;
min-height: 90vh;
}
.lesson_info h2 {
font-size: 20px !important;
}
.lesson_info h2 i {
margin-right: 8px;
}
.lesson_info h2 span {
display: block;
font-size: 14px;
color: #888;
margin-top: 8px;
}
.lesson_info .btn {
display: block;
margin: 2rem auto;
width: fit-content;
background: #036EB8;
color: white;
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
}
.lesson_info .btn:hover {
background: #036EB8;
}
.lesson_info a {
color: #036EB8;
background: none;
position: absolute;
width: 75%;
bottom: 2rem;
font-weight: 600;
left: 50%;
transform: translateX(-50%);
}
.shop_course-content {
padding: 3rem 2rem;
}
.shop_course-content .box {
border: none;
box-shadow: none;
margin: 0 !important;
padding: 2rem 0;
}
.shop_course-content .row {
margin: 3rem 0;
}
.shop_course-content .row .lesson_box {
border-radius: 4px;
padding: 3rem 1rem 2rem;
margin-bottom: 16px;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.shop_course-content .row .lesson_box:hover {
background: white !important;
}
.shop_course-content .row .lesson_box h5 {
font-size: 20px;
font-weight: 600;
margin-bottom: 1rem;
text-transform: capitalize;
}
.shop_course-content .row .lesson_box h5 i {
background: #eef8ff;
padding: 8px;
border-radius: 50%;
margin-right: 8px;
color: #036EB8;
}
.shop_course-content .row .lesson_box p {
font-size: 14px;
}
.shop_course-content .row .lesson_box .show_btn {
background: none;
color: #036EB8;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
display: block;
margin: 2rem 0;
width: fit-content;
font-weight: 600;
}
.shop_course-content .row .lesson_box .show_btn:hover {
background: #036EB8;
color: white;
}
.test-questions {
background: white;
padding: 4rem 2rem;
}
.test-questions h6 {
font-size: 18px;
display: inline-block;
margin-bottom: 1rem;
border: 1px solid #272727;
padding: 4px 16px;
}
.test-questions .quiz-question {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
width: 60%;
}
.filter-box {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
}
.filter-box h5 {
font-size: 1.1rem;
color: #333;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #f5f5f5;
}
.filter-box h5 i {
color: #036EB8;
margin-right: 8px;
}
.filter-box .form-group {
margin-bottom: 0;
}
.filter-box .form-group .form-label {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.5rem;
font-weight: 500;
}
.filter-box .form-group .form-select,
.filter-box .form-group .form-control {
height: 40px;
padding: 0.5rem 1rem;
font-size: 0.9rem;
border: 1px solid #dee2e6;
border-radius: 6px;
background-color: #fff;
color: #333;
}
.filter-box .form-group .form-select:focus,
.filter-box .form-group .form-control:focus {
border-color: #036EB8;
box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.filter-box .form-group .form-select::placeholder,
.filter-box .form-group .form-control::placeholder {
color: #999;
}
.filter-box .btn {
height: 40px;
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
border-radius: 6px;
}
.filter-box .btn-primary {
background-color: #036EB8;
border-color: #036EB8;
}
.filter-box .btn-primary:hover {
background-color: #035f9f;
border-color: #035f9f;
}
.filter-box .btn-outline-secondary {
color: #666;
border-color: #dee2e6;
}
.filter-box .btn-outline-secondary:hover {
background-color: #f8f9fa;
color: #333;
}
@media (max-width: 768px) {
.filter-box .col-3 {
margin-bottom: 1rem;
}
.filter-box .d-flex.align-items-end {
margin-top: 1rem;
justify-content: flex-start;
}
}
.page-shop-students-index .students-table_contants .index_table {
width: 100%;
font-size: 14px;
}
.page-shop-students-index .students-table_contants .index_table th,
.page-shop-students-index .students-table_contants .index_table td {
padding: 10px 12px;
}
.page-shop-students-index .students-table_contants .index_table th:nth-of-type(6),
.page-shop-students-index .students-table_contants .index_table td:nth-of-type(6) {
width: 20%;
}
.page-shop-students-index .students-table_contants .index_table th:nth-of-type(8),
.page-shop-students-index .students-table_contants .index_table td:nth-of-type(8) {
width: 8%;
}
.page-shop-students-index .filter-box .filter-selectbox {
position: relative;
display: block;
}
.page-shop-students-index .filter-box .filter-selectbox::before, .page-shop-students-index .filter-box .filter-selectbox::after {
position: absolute;
right: 15px;
width: 9px;
height: 6px;
background-color: #535353;
content: '';
pointer-events: none;
}
.page-shop-students-index .filter-box .filter-selectbox::before {
top: calc(50% - 9px);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.page-shop-students-index .filter-box .filter-selectbox::after {
top: calc(50% + 3px);
bottom: auto;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.page-shop-students-index .filter-box .filter-selectbox select.form-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
min-width: 0;
height: 2.8em;
padding: 0.4em calc(0.8em + 30px) 0.4em 0.8em;
border: 1px solid #d0d0d0;
border-radius: 3px;
background-color: #fff;
color: #333333;
font-size: 1em;
cursor: pointer;
}
.page-shop-students-index .filter-box .form-group input.form-control {
height: 2.8em;
padding: 0.4em 0.8em;
border: 1px solid #d0d0d0;
border-radius: 3px;
font-size: 1em;
box-sizing: border-box;
}
.page-shop-students-index .filter-box .filter-buttons-row {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin: 2rem 0;
}
.page-shop-students-index .filter-box .filter-buttons-row .btn {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.375rem 0.75rem;
background: #036EB8 !important;
padding: 4px 40px !important;
}
.page-shop-students-index .filter-box .filter-buttons-row a {
background: none !important;
border: none !important;
padding: 8 16px;
margin-left: 15px;
}
.students-table_contants {
background: white;
}
.students-table_contants .index_table thead {
border-bottom: 1px solid #ccc;
}
.students-table_contants .index_table thead th,
.students-table_contants .index_table thead td,
.students-table_contants .index_table tbody th,
.students-table_contants .index_table tbody td {
font-size: 12px;
}
.students-table_contants .index_table thead th:first-of-type,
.students-table_contants .index_table thead td:first-of-type,
.students-table_contants .index_table tbody th:first-of-type,
.students-table_contants .index_table tbody td:first-of-type {
width: 10%;
}
.students-table_contants .index_table thead th:nth-of-type(2),
.students-table_contants .index_table thead td:nth-of-type(2),
.students-table_contants .index_table tbody th:nth-of-type(2),
.students-table_contants .index_table tbody td:nth-of-type(2) {
width: 10%;
}
.students-table_contants .index_table thead th:nth-of-type(3),
.students-table_contants .index_table thead td:nth-of-type(3),
.students-table_contants .index_table tbody th:nth-of-type(3),
.students-table_contants .index_table tbody td:nth-of-type(3) {
width: 10%;
}
.students-table_contants .index_table thead th:nth-of-type(4),
.students-table_contants .index_table thead td:nth-of-type(4),
.students-table_contants .index_table tbody th:nth-of-type(4),
.students-table_contants .index_table tbody td:nth-of-type(4) {
width: 10%;
}
.students-table_contants .index_table thead th:nth-of-type(5),
.students-table_contants .index_table thead td:nth-of-type(5),
.students-table_contants .index_table tbody th:nth-of-type(5),
.students-table_contants .index_table tbody td:nth-of-type(5) {
width: 15%;
}
.students-table_contants .index_table thead th:nth-of-type(6),
.students-table_contants .index_table thead td:nth-of-type(6),
.students-table_contants .index_table tbody th:nth-of-type(6),
.students-table_contants .index_table tbody td:nth-of-type(6) {
width: 10%;
color: #272727;
}
.students-table_contants .index_table thead th:nth-of-type(7),
.students-table_contants .index_table thead td:nth-of-type(7),
.students-table_contants .index_table tbody th:nth-of-type(7),
.students-table_contants .index_table tbody td:nth-of-type(7) {
width: 10%;
}
.students-table_contants .index_table thead th:nth-of-type(8),
.students-table_contants .index_table thead td:nth-of-type(8),
.students-table_contants .index_table tbody th:nth-of-type(8),
.students-table_contants .index_table tbody td:nth-of-type(8) {
width: 15%;
}
.students-table_contants td .btn-group .btn {
padding: 4px 10px;
font-size: 12px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
}
.students-table_contants td .btn-group .btn-warning {
background-color: transparent !important;
color: #036EB8;
border: none;
}
.students-table_contants td .btn-group .btn-warning:hover {
background-color: #e0a800;
}
.students-table_contants td .btn-group .btn-danger {
background-color: transparent;
color: #dc3545;
min-width: 20px !important;
border: none;
font-size: 16px;
}
.students-table_contants td .btn-group .btn-danger:hover {
background-color: #c82333;
}
.students-table_contants td > span.bg-success,
.students-table_contants td > span.bg-warning,
.students-table_contants td > span.bg-secondary,
.students-table_contants td > span.bg-light {
display: inline-block;
padding: 4px 10px;
border-radius: 0px;
color: white;
}
.students-table_contants .student-name-link {
color: #1976d2;
text-decoration: none;
font-weight: 500;
}
.students-table_contants .student-name-link:hover {
color: #1565c0;
text-decoration: underline;
}
.students-table_contants .edit-icon {
color: #666;
font-size: 14px;
}
.students-table_contants .edit-icon:hover {
color: #1976d2;
}
.students-table_contants td a.btn-primary.btn-sm {
padding: 4px 12px;
font-size: 12px;
border-radius: 0px;
font-weight: 500;
background: #036EB8;
box-shadow: none;
}
.students-table_contants .line-connected {
display: inline-flex;
align-items: center;
background: #e8f5e8;
border: 1px solid #4caf50;
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
color: #2e7d32;
}
.students-table_contants .line-connected i.las.la-link {
margin-right: 6px;
}
.students-table_contants .line-connected .btn.btn-link {
padding: 0 4px;
margin-left: 4px;
font-size: 14px;
color: #c62828;
min-height: auto;
line-height: 1;
}
.students-table_contants .line-connected .btn.btn-link:hover {
color: #b71c1c;
}
.students-table_contants .bg-success {
background-color: #28a745 !important;
}
.students_contents {
padding: 3rem 2rem;
}
.students_contents .student-form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #eee;
}
.students_contents .student-form-actions .btn {
min-width: 140px;
margin: 0;
padding: 0.7rem 1.5rem;
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
border-radius: 8px;
}
.students_contents .student-form-actions .btn-save {
background: #036EB8;
border: 1px solid #036EB8;
color: #fff;
}
.students_contents .student-form-actions .btn-save:hover {
background: #02598f;
border-color: #02598f;
color: #fff;
}
.students_contents .student-form-actions .btn-back {
background: #f5f5f5;
border: 1px solid #ddd;
color: #666;
}
.students_contents .student-form-actions .btn-back:hover {
background: #eee;
color: #444;
}
.students_contents h4 {
margin-bottom: 3rem;
font-size: 24px;
}
.students_contents h4 i {
margin-right: 8px;
}
.students_contents h4 span {
margin-left: 16px;
font-size: 60%;
}
.students_contents h4 span i {
margin-right: 0;
}
.students_contents .col-3 {
padding: 0 8px !important;
}
.shop-detail {
padding: 2rem;
}
.shop-detail .shop_info h5 {
margin: 2rem 0;
}
.shop-detail .shop_info h5 span {
font-size: 80%;
color: #888;
padding-right: 8px;
}
.shop-detail .shop_info ul {
margin: 2rem 0;
}
.shop-detail .shop_info ul li {
margin-bottom: 1rem;
}
.shop-detail .shop_info ul li span {
font-size: 16px;
margin-right: 8px;
}
.shop-detail .shop_info ul li strong {
font-size: 32px;
font-weight: 500;
margin-right: 8px;
}
.shop-detail .trash_btn {
color: crimson;
font-size: 24px;
background: none;
}
.shop-detail .btn {
background: none;
color: #036EB8;
font-size: 24px;
padding: 0;
margin: 0 2rem;
}
.shop-detail .btn:hover {
background: none;
}
.shop_student_table thead tr th {
padding: 16px 0;
border-bottom: 1px solid #eee;
}
.shop_student_table tbody tr:nth-of-type(odd) {
background: #f8f9fa;
}
.shop_student_table tbody tr td {
padding: 16px;
border-bottom: 1px solid #eee;
}
.reservation-detail-modal .modal-content {
border-radius: 18px;
box-shadow: 0 8px 32px rgba(3, 110, 184, 0.15);
border: 2px solid #036EB8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 400px;
height: 400px !important;
z-index: 999;
}
.reservation-detail-modal .modal-header {
background: #036EB8;
color: #fff;
border-bottom: none;
border-radius: 18px 18px 0 0;
}
.reservation-detail-modal .modal-header .modal-title {
font-size: 1.3rem;
color: white;
}
.reservation-detail-modal .modal-header .modal-title i {
margin-right: 8px;
}
.reservation-detail-modal .modal-header .btn-close {
filter: invert(1);
}
.reservation-detail-modal .modal-body {
background: white;
color: #222;
font-size: 1.1rem;
padding: 1rem;
}
.reservation-detail-modal .modal-body p {
margin-bottom: 1.2em;
}
.reservation-detail-modal .modal-body p span {
font-weight: bold;
color: #036EB8;
}
.show-reservation-detail {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 80px;
height: 40px;
padding: 0 18px;
background: #036EB8 !important;
color: #fff !important;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
border: none;
margin: 0 8px 0 0;
box-shadow: none;
transition: background 0.2s;
}
.show-reservation-detail i {
margin-right: 6px;
font-size: 1.2em;
}
.show-reservation-detail:hover {
background: #025a97 !important;
color: #fff !important;
}
.monthly-calendar {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.monthly-calendar .calendar-header {
background: #036EB8;
color: white;
padding: 16px;
}
.monthly-calendar .calendar-header .month-title {
font-size: 18px;
font-weight: 600;
text-align: center;
margin-bottom: 12px;
}
.monthly-calendar .calendar-header .weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.monthly-calendar .calendar-header .weekdays .weekday {
text-align: center;
font-weight: 600;
font-size: 14px;
padding: 8px;
}
.monthly-calendar .calendar-grid .calendar-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 1px solid #e9ecef;
}
.monthly-calendar .calendar-grid .calendar-week:last-child {
border-bottom: none;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day {
min-height: 80px;
border-right: 1px solid #e9ecef;
padding: 8px;
position: relative;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day:last-child {
border-right: none;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day.other-month {
background: #f8f9fa;
color: #999;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day .date-number {
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
color: #333;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day .day-slots .slot-count {
background: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 3px;
padding: 2px 4px;
margin-bottom: 2px;
font-size: 10px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day .day-slots .slot-count:hover {
background: #bbdefb;
border-color: #1976d2;
transform: scale(1.05);
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day .day-slots .slot-count .count {
font-weight: 600;
color: #1976d2;
font-size: 12px;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day .day-slots .slot-count .label {
color: #666;
font-size: 8px;
margin-left: 2px;
}
.payment-content {
padding: 2rem;
}
.payment-content h4 {
font-size: 20px;
margin: 1rem 0;
}
.payment-content .col-2 {
background: none !important;
box-shadow: none !important;
}
.payment-content .year_select {
margin-bottom: 2rem;
}
.payment-content .payment_box {
padding: 40px 0;
background: none !important;
}
.payment-content .payment_box .col-2 {
background: none;
box-shadow: 0 !important;
}
.payment-content .payment_box .col-2 .card {
width: 90%;
margin: 0 auto;
box-shadow: none !important;
}
.payment-content .payment_box .col-2 .card h4 {
margin: 0;
}
.payment-content .month_paymentBox {
background: white;
padding: 1rem;
}
.payment-content .month_paymentBox table {
width: 100%;
}
.payment-content .month_paymentBox table th,
.payment-content .month_paymentBox table td {
padding: 16px !important;
}
.payment-content .month_paymentBox table th {
text-align: left;
}
.payment-content .month_paymentBox table tbody td {
padding: 8px 0;
}
.payment-content .month_paymentBox .btn {
background: #036EB8;
color: white;
border-radius: 30px;
display: block;
margin: 1rem auto;
width: 60%;
text-align: center;
font-size: 12px;
}
.lesson-prices-container {
padding: 3rem 2rem;
}
.lesson-prices-container .table_box {
background: white;
padding: 1rem;
margin: 2rem 0;
}
.lesson-prices-container .btn {
background: #036EB8;
color: white;
border-radius: 6px;
display: block;
margin: 0 auto;
width: 150px;
text-align: center;
font-size: 14px;
}
.lesson-prices-container .table {
width: 100%;
}
.lesson-prices-container .table th {
text-align: left;
}
.lesson-prices-container .table td {
padding: 8px 0;
}
.trial-contents {
padding: 3rem 2rem;
}
.trial-contents .trial_detile {
margin: 3rem 0;
background: white;
padding: 1rem;
}
.trial-contents .trial_detile .table {
width: 100%;
}
.trial-contents .trial_detile .table th {
text-align: left;
}
.trial-contents .trial_detile .table th,
.trial-contents .trial_detile .table td {
font-size: 14px;
}
.trial-contents .trial_detile .table th:first-of-type,
.trial-contents .trial_detile .table td:first-of-type {
width: 20%;
}
.trial-contents .trial_detile .table th:nth-of-type(2),
.trial-contents .trial_detile .table td:nth-of-type(2) {
width: 20%;
}
.trial-contents .trial_detile .table th:nth-of-type(3),
.trial-contents .trial_detile .table td:nth-of-type(3) {
width: 15%;
}
.trial-contents .trial_detile .table th:nth-of-type(4),
.trial-contents .trial_detile .table td:nth-of-type(4) {
width: 10%;
}
.trial-contents .trial_detile .table th:nth-of-type(5),
.trial-contents .trial_detile .table td:nth-of-type(5) {
width: 15%;
}
.trial-contents .trial_detile .table th:nth-of-type(6),
.trial-contents .trial_detile .table td:nth-of-type(6) {
width: 10%;
}
.trial-contents .trial_detile .table th:last-of-type,
.trial-contents .trial_detile .table td:last-of-type {
width: 5%;
}
.lesson_history_contents .inner_contents {
background: white;
padding: 1rem;
}
.lesson_history_contents table th,
.lesson_history_contents table td {
width: 100% !important;
display: block;
padding: 0 !important;
}
.lesson_history_contents table th {
padding: 16px 0 8px !important;
font-size: 14px !important;
color: #888;
}
.lesson_history_contents table td {
padding: 8px 0 16px !important;
border-bottom: 1px solid #f2f2f2;
}
.lesson_history_contents .btn_group {
display: flex;
margin: 3rem 0;
justify-content: space-between;
}
.lesson_history_contents .btn_group .btn:nth-of-type(2) {
background: #036EB8;
color: white;
padding: 8px 40px;
}
#flash-toast {
position: fixed;
top: 32px;
right: 32px;
z-index: 9999;
min-width: 300px;
max-width: 400px;
}
#flash-toast .flash-message {
animation: fadeIn 0.5s;
}
#flash-toast .alert-success {
background-color: #d1f2eb;
border-color: #a8e6cf;
color: #0f5132;
}
#flash-toast .alert-danger {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.trial_entry {
background: #f2f2f2;
padding: 3rem 2rem;
}
.trial_entry .inner_contents {
background: white;
padding: 2rem;
margin-top: 4rem;
}
.trial_entry .inner_contents .mb-3 {
margin: 2rem 0;
}
.line_customContents {
background: #f2f2f2;
padding: 3rem 2rem;
}
.line_customContents .btn-group {
display: block;
}
.line_customContents h4 {
margin-bottom: 3rem;
}
.line_customContents h5 {
font-style: 20px;
margin: 2rem 0;
}
.line_customContents ul {
margin-bottom: 3rem;
}
.line_customContents ul li {
display: inline-block;
}
.line_customContents ul li:last-of-type a {
background: #ff9900;
}
.line_customContents ul li a {
text-decoration: none;
background: #036EB8;
color: white;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
}
.line_customContents .table-responsive {
background: white;
}
.line_customContents table {
width: 100%;
color: #272727;
}
.line_customContents table th:first-of-type,
.line_customContents table td:first-of-type {
width: 10%;
}
.line_customContents table th:nth-of-type(2),
.line_customContents table td:nth-of-type(2) {
width: 10%;
}
.line_customContents table th:nth-of-type(3),
.line_customContents table td:nth-of-type(3) {
width: 30%;
}
.line_customContents .half {
width: 47%;
display: block;
}
.line_customContents ul li {
display: inline-block;
}
.line_customContents .check-box {
margin-top: 2rem;
}
.line_customContents .btn-Box {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
}
.line_customContents .btn-Box .back-btn {
color: #036EB8;
padding: 8px 24px;
}
.line_customContents .btn-Box .cancel-btn {
color: red;
}
.line_customContents .btn-Box .btn {
background: #036EB8;
color: white;
padding: 8px 40px;
}
.sidebar-submenu {
width: 90%;
background: white;
border-right: 1px solid #e0e0e0;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
left: 0;
position: relative;
display: block;
padding: 2rem .5rem;
}
.sidebar-submenu i {
color: #036EB8;
margin-right: 16px !important;
}
.line_connections_contents {
background: #f2f2f2;
padding: 3rem 2rem;
min-height: 100%;
}
.line_connections_contents .btn-Box {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 2rem;
}
.line_connections_contents .btn-Box a {
display: inline-block;
margin-right: 1rem;
color: #036EB8;
padding: 8px 24px;
border-radius: 6px;
text-decoration: none;
background: none;
}
.announcements {
padding: 3rem 2rem;
min-height: 100vh;
height: 100%;
}
.announcements .inner_contents {
background: white;
padding: 2rem;
margin-top: 4rem;
}
.announcements h4 {
color: #036EB8;
font-size: 2.5rem;
}
.announcements h4 span {
display: block;
font-size: 14px;
color: #888;
font-weight: 500;
}
.Message-setting {
background: #f2f2f2;
padding: 3rem 2rem;
min-height: 100vh;
}
.Message-setting .inner_contents {
background: white;
padding: 2rem;
margin-top: 4rem;
}
.history_index {
padding: 2rem;
}
.history_index h4 span {
font-size: 50%;
margin-left: 16px;
}
.history_index .row:first-of-type {
margin: 2rem 0 0 !important;
}
.history_index .row .col-3 {
padding: 0 8px !important;
}
.history_index .row .col-3 label {
padding-left: 0;
}
.history_index .row .col-3 label::before {
display: none;
}
.history_index .row .col-3 select {
padding: 15px;
}
.history_index .row .col-12 {
text-align: center;
}
.history_index .row .col-12 input,
.history_index .row .col-12 a {
padding: 8px 16px;
border-radius: 6px;
color: #333;
font-size: 14px;
font-weight: 500;
display: inline-block;
}
.history_index .row .col-12 input {
background: #036EB8;
color: white;
}
.history_index .row .col-12 a {
border: none;
}
.bg-white {
background: white !important;
border-radius: 6px;
padding: 16px;
margin: 2rem 0;
}
.selectbox-double-arrow {
position: relative;
display: block;
}
.selectbox-double-arrow::before, .selectbox-double-arrow::after {
position: absolute;
right: 12px;
width: 9px;
height: 6px;
background-color: #535353;
content: '';
pointer-events: none;
}
.selectbox-double-arrow::before {
top: calc(50% - 9px);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.selectbox-double-arrow::after {
top: calc(50% + 3px);
bottom: auto;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.selectbox-double-arrow select.form-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
min-height: 38px;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
border: 1px solid #d0d0d0;
border-radius: 6px;
background-color: #fff;
color: #333;
font-size: 1rem;
cursor: pointer;
}
.selectbox-double-arrow select.form-select:focus {
outline: none;
border-color: #036EB8;
}
.selectbox-double-arrow.selectbox-period-type {
width: 30%;
}
.selectbox-double-arrow.selectbox-period-type::before {
top: calc(25% - 9px);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.selectbox-double-arrow.selectbox-period-type::after {
top: calc(25% + 3px);
bottom: auto;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.trial-new-register-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: #036EB8;
color: #fff;
border: none;
padding: 8px 24px !important;
border-radius: 4px !important;
font-size: 14px !important;
font-weight: 500;
cursor: pointer;
}
.trial-new-register-btn::before {
content: '\002B';
font-size: 1.1em;
font-weight: 600;
line-height: 1;
}
.trial-new-register-btn:hover {
background: #02548a;
}
.trial-delete-btn {
width: 20px !important;
height: 20px;
min-width: 20px !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
background: none !important;
border: none !important;
}
.trial-delete-btn .las {
font-size: inherit;
color: red;
}
.reservation-submit-btn {
background: #036EB8;
color: #fff !important;
border: none;
padding: 4px 32px !important;
border-radius: 4px !important;
font-size: 14px !important;
font-weight: 600;
cursor: pointer;
}
.reservation-back-to-list-btn {
color: #036EB8 !important;
border: none !important;
padding: 4px 24px !important;
border-radius: 4px !important;
font-size: 14px !important;
font-weight: 600;
cursor: pointer;
}
.reservation-back-to-list-btn:hover {
color: #025a97 !important;
background: none !important;
}
.shop-lesson-histories-index .lesson-history-actions {
width: 20px !important;
}
.shop-lesson-histories-index .lesson-history-actions .btn {
min-width: 20px !important;
border: none !important;
padding: 8px !important;
}
.trial-users-list-wrap .trial-users-list-table th {
padding-left: 8px !important;
background: none !important;
}
.trial-users-list-wrap .trial-users-list-table td,
.trial-users-list-wrap .trial-users-list-table th {
padding: 16px 8px;
}
.trial-users-list-wrap .trial-users-list-table td .form-select {
padding: 8px !important;
}
.shop-announcements-list {
padding: 1.5rem;
border-radius: 8px;
}
.shop-announcements-list__heading {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
color: #036EB8;
}
.shop-announcements-list__heading span {
font-size: 40%;
display: block;
color: #888;
font-weight: 600;
margin-top: 8px;
}
.shop-announcements-list__category-nav {
display: flex;
gap: 1.5rem;
margin-bottom: 3rem;
font-size: 1rem;
}
.shop-announcements-list__category-link {
color: #555;
text-decoration: none;
font-size: 16px;
padding: 0 8px;
margin: 0 8px;
font-weight: 600;
}
.shop-announcements-list__category-link.is-active {
color: #036EB8;
text-decoration: none;
position: relative;
}
.shop-announcements-list__category-link.is-active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 3px;
border-bottom: 1px solid #036EB8;
}
.shop-announcements-list__category-link:not(.is-active):hover {
color: #333;
}
.shop-announcements-list__year-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid #e0e0e0;
font-size: 0.9rem;
}
.shop-announcements-list__year-sep {
color: #888;
pointer-events: none;
}
.shop-announcements-list__year-link {
color: #555;
text-decoration: none;
font-size: 14px;
margin: 0 8px;
padding: 0 8px;
}
.shop-announcements-list__year-link.is-active {
color: #036EB8;
font-weight: 500;
}
.shop-announcements-list__year-link:hover {
color: #333;
}
.shop-announcements-list__items {
list-style: none;
padding: 0;
margin: 0;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.shop-announcements-list__item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid #eee;
}
.shop-announcements-list__item:last-child {
border-bottom: 1px solid #eee;
}
.shop-announcements-list__date {
color: #666;
font-size: 0.9rem;
flex-shrink: 0;
padding-right: 16px;
}
.shop-announcements-list__badge {
display: inline-block;
padding: 0.2em 0.8em;
font-size: 0.75rem;
font-weight: 500;
color: #fff;
background: #036EB8;
border-radius: 4px;
flex-shrink: 0;
margin-right: 16px;
}
.shop-announcements-list__title {
color: #333;
text-decoration: none;
flex: 1;
min-width: 0;
font-size: 16px;
font-weight: 500;
}
.shop-announcements-list__title:hover {
color: #036EB8;
text-decoration: underline;
}
.shop-announcements-list__pagination {
margin-top: 1.5rem;
}
.page-shop-list.page-shop-parent-messages.pm-split-page {
max-width: none;
width: 100%;
margin: 0;
}
.page-shop-list.page-shop-parent-messages .shop-list-hero__lead {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.75rem;
max-width: none;
}
.page-shop-list.page-shop-parent-messages .pm-hero-stats {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-left: 0.25rem;
}
.page-shop-list.page-shop-parent-messages .pm-hero-stats__item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
white-space: nowrap;
}
.page-shop-list.page-shop-parent-messages .pm-hero-stats__item strong {
font-weight: 800;
color: #fff;
}
.page-shop-list.page-shop-parent-messages .pm-hero-stats__item--alert {
background: rgba(254, 226, 226, 0.22);
border-color: rgba(254, 202, 202, 0.45);
color: #fecaca;
}
.page-shop-list.page-shop-parent-messages .pm-hero-stats__item--alert strong {
color: #fff;
}
.page-shop-list.page-shop-parent-messages .pm-split {
display: flex;
align-items: stretch;
width: 100%;
min-height: calc(100vh - 220px);
max-height: calc(100vh - 180px);
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.students_contents.page-shop-parent-messages-index, .students_contents.page-shop-parent-messages-show {
padding: 1.25rem 1.5rem 3rem;
}
.students_contents.page-shop-parent-messages-index > h4, .students_contents.page-shop-parent-messages-show > h4 {
display: none;
}
.students_contents.pm-split-page {
max-width: none;
width: 100%;
margin: 0;
padding: 0 0 12px;
}
.pm-split-page__header {
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 0 0 8px;
border-bottom: 1px solid #e2e8f0;
}
.pm-split-page__header-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
min-width: 0;
}
.pm-split-page__title {
margin: 2rem 1rem;
font-size: 1.15rem;
font-weight: 700;
color: #1e293b;
}
.pm-split-page__title > i {
color: #036eb8;
margin-right: 0.25rem;
}
.pm-split-page__stats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
}
.pm-split-page__stat {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 500;
color: #64748b;
white-space: nowrap;
}
.pm-split-page__stat > i {
font-size: 1.05rem;
color: #036eb8;
line-height: 1;
}
.pm-split-page__stat strong {
font-weight: 700;
color: #1e293b;
margin: 0 1px;
}
.pm-split-page__stat--alert {
color: #b91c1c;
}
.pm-split-page__stat--alert > i {
color: #dc3545;
}
.pm-split-page__stat--alert strong {
color: #dc3545;
}
.pm-split {
display: flex;
align-items: stretch;
width: 100%;
min-height: calc(100vh - 132px);
max-height: calc(100vh - 112px);
border: 1px solid #e2e8f0;
border-radius: 0;
overflow: hidden;
background: #fff;
box-shadow: none;
}
.page-shop-list.page-shop-parent-messages .pm-split {
min-height: calc(100vh - 220px);
max-height: calc(100vh - 180px);
border-radius: 14px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.pm-split__sidebar {
width: 20%;
min-width: 200px;
max-width: 280px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid #e2e8f0;
background: #fafbfc;
min-height: 0;
overflow: hidden;
}
.pm-split__sidebar-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.pm-split__threads {
flex-shrink: 0;
}
.pm-split__list-scroll {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.pm-split__list-empty {
padding: 2rem 1rem;
text-align: center;
color: #64748b;
font-size: 0.85rem;
}
.pm-split__list-empty p {
margin: 0;
}
.pm-split__new-chat {
flex-shrink: 0;
border-top: 1px solid #e2e8f0;
padding: 0.5rem 0 0.75rem;
background: #fff;
}
.pm-split__new-chat-title {
margin: 0;
padding: 0.35rem 0.75rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
}
.pm-split__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: #f4f7fa;
}
.pm-split__placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
color: #64748b;
text-align: center;
}
.pm-split__placeholder i {
font-size: 3.5rem;
color: #cbd5e1;
margin-bottom: 1rem;
}
.pm-split__placeholder-title {
margin: 0 0 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: #475569;
}
.pm-split__placeholder-desc {
margin: 0;
font-size: 0.9rem;
}
.pm-split-thread {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 0.85rem;
text-decoration: none;
color: inherit;
border-bottom: 1px solid #e2e8f0;
transition: background 0.12s ease;
}
.pm-split-thread:hover {
background: #e8f4fc;
color: inherit;
}
.pm-split-thread--active {
background: #fff;
}
.pm-split-thread--active .pm-split-thread__name {
color: #025a96;
}
.pm-split-thread--unread:not(.pm-split-thread--active) {
background: rgba(232, 244, 252, 0.85);
}
.pm-split-thread--new {
padding: 0.55rem 0.85rem;
border-bottom: none;
}
.pm-split-thread__avatar {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
color: #fff;
font-size: 0.9rem;
font-weight: 700;
border-radius: 50%;
}
.pm-split-thread__body {
flex: 1;
min-width: 0;
}
.pm-split-thread__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
}
.pm-split-thread__name {
font-size: 0.88rem;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pm-split-thread__preview {
display: block;
margin-top: 0.15rem;
font-size: 0.75rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pm-split-thread__badge {
flex-shrink: 0;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #dc3545;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
border-radius: 999px;
}
.pm-chat--split {
flex: 1;
min-height: 0;
max-height: none;
border: none;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
}
@media (max-width: 991px) {
.pm-split {
flex-direction: column;
max-height: none;
min-height: 640px;
}
.pm-split__sidebar {
width: 100%;
max-width: none;
max-height: 240px;
border-right: none;
border-bottom: 1px solid #e2e8f0;
}
.pm-split__main {
min-height: 480px;
}
}
.pm-page-header {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2rem;
padding: 1.5rem 1.75rem;
background: linear-gradient(135deg, #036eb8 0%, #025a96 100%);
border-radius: 14px;
color: #fff;
box-shadow: 0 4px 24px rgba(3, 110, 184, 0.08);
}
.pm-page-header__icon {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
font-size: 1.75rem;
}
.pm-page-header__body {
flex: 1;
min-width: 0;
}
.pm-page-header__title {
margin: 0 0 0.35rem;
font-size: 1.35rem;
font-weight: 700;
color: #fff;
}
.pm-page-header__title .badge {
vertical-align: middle;
font-size: 0.7rem;
font-weight: 600;
}
.pm-page-header__desc {
margin: 0;
font-size: 0.9rem;
opacity: 0.92;
line-height: 1.5;
}
.pm-page-header__stats {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.pm-stat {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
background: rgba(255, 255, 255, 0.18);
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.pm-stat--alert {
background: #fff;
color: #dc3545;
}
.pm-inbox {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 24px rgba(3, 110, 184, 0.08);
overflow: hidden;
}
.pm-inbox-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
text-decoration: none;
color: inherit;
border-bottom: 1px solid #e2e8f0;
transition: background 0.15s ease;
}
.pm-inbox-item:last-child {
border-bottom: none;
}
.pm-inbox-item:hover {
background: #e8f4fc;
color: inherit;
}
.pm-inbox-item--unread {
background: rgba(232, 244, 252, 0.6);
}
.pm-inbox-item--unread .pm-inbox-item__name {
color: #025a96;
}
.pm-inbox-item--unread .pm-inbox-item__preview {
font-weight: 600;
color: #1e293b;
}
.pm-inbox-item__avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
color: #fff;
font-size: 1.1rem;
font-weight: 700;
border-radius: 50%;
letter-spacing: 0.02em;
}
.pm-inbox-item__main {
flex: 1;
min-width: 0;
}
.pm-inbox-item__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.pm-inbox-item__name {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
}
.pm-inbox-item__time {
flex-shrink: 0;
font-size: 0.75rem;
color: #64748b;
}
.pm-inbox-item__meta {
display: block;
font-size: 0.75rem;
color: #64748b;
margin-bottom: 0.2rem;
}
.pm-inbox-item__preview {
margin: 0;
font-size: 0.9rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pm-inbox-item__badge {
flex-shrink: 0;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.45rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #dc3545;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
border-radius: 999px;
}
.pm-inbox-item__chevron {
flex-shrink: 0;
font-size: 1.25rem;
color: #cbd5e1;
}
.pm-empty {
text-align: center;
padding: 3.5rem 1.5rem;
color: #64748b;
}
.pm-empty__icon {
font-size: 3rem;
color: #cbd5e1;
margin-bottom: 1rem;
display: block;
}
.pm-empty__title {
font-size: 1.05rem;
font-weight: 600;
color: #475569;
margin: 0 0 0.5rem;
}
.pm-empty p {
margin: 0;
font-size: 0.9rem;
}
.pm-section {
margin-top: 2rem;
}
.pm-section__title {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
margin: 0 0 0.75rem;
}
.pm-new-chat {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.pm-new-chat__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
text-decoration: none;
color: inherit;
border-bottom: 1px solid #e2e8f0;
transition: background 0.15s ease;
}
.pm-new-chat__item:last-child {
border-bottom: none;
}
.pm-new-chat__item:hover {
background: #f4f7fa;
color: inherit;
}
.pm-new-chat__name {
font-weight: 600;
color: #1e293b;
}
.pm-new-chat__btn {
flex-shrink: 0;
padding: 0.4rem 0.9rem;
font-size: 0.8rem;
font-weight: 600;
color: #036eb8;
border: 1.5px solid #036eb8;
border-radius: 8px;
background: #fff;
transition: all 0.15s ease;
}
.pm-new-chat__item:hover .pm-new-chat__btn {
background: #036eb8;
color: #fff;
}
.pm-chat {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 560px;
max-height: calc(100vh - 180px);
}
.pm-chat__header {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 1rem;
background: #036eb8;
color: #fff;
flex-shrink: 0;
border-radius: 0;
}
.pm-chat__back {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(255, 255, 255, 0.15);
border-radius: 0;
text-decoration: none;
font-size: 1.2rem;
transition: background 0.15s ease;
}
.pm-chat__back:hover {
background: rgba(255, 255, 255, 0.28);
color: #fff;
}
.pm-chat__avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
font-size: 1rem;
font-weight: 700;
}
.pm-chat__info {
flex: 1;
min-width: 0;
}
.pm-chat__name {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
}
.pm-chat__status {
margin: 0.15rem 0 0;
font-size: 0.75rem;
opacity: 0.9;
}
.pm-chat__status--warn {
opacity: 1;
color: rgba(255, 255, 255, 0.95);
}
.pm-chat__status--warn .badge {
font-size: 0.65rem;
vertical-align: middle;
background: rgba(255, 255, 255, 0.18) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.pm-chat__actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.pm-chat__action-btn {
padding: 0.35rem 0.65rem;
font-size: 0.75rem;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 0;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease;
}
.pm-chat__action-btn:hover {
background: rgba(255, 255, 255, 0.28);
color: #fff;
}
.pm-chat__action-btn i {
margin-right: 0.2rem;
}
.pm-chat__thread {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1.5rem;
background: #f4f7fa;
min-height: 280px;
}
.pm-bubble {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
max-width: 78%;
}
.pm-bubble--incoming {
align-items: flex-start;
margin-right: auto;
}
.pm-bubble--incoming .pm-bubble__inner {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 4px 14px 14px 14px;
color: #1e293b;
}
.pm-bubble--incoming .pm-bubble__role {
color: #036eb8;
}
.pm-bubble--outgoing {
align-items: flex-end;
margin-left: auto;
}
.pm-bubble--outgoing .pm-bubble__inner {
background: #036eb8;
border-radius: 14px 4px 14px 14px;
color: #fff;
}
.pm-bubble--outgoing .pm-bubble__role {
color: #64748b;
}
.pm-bubble--outgoing .pm-bubble__time {
text-align: right;
}
.pm-bubble--outgoing .pm-bubble__text p {
color: inherit;
}
.pm-bubble__inner {
padding: 0.65rem 1rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.pm-bubble__role {
display: block;
font-size: 0.68rem;
font-weight: 600;
margin-bottom: 0.3rem;
padding: 0 0.25rem;
letter-spacing: 0.02em;
}
.pm-bubble__text {
font-size: 0.95rem;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.pm-bubble__text p {
margin: 0 0 0.35rem;
}
.pm-bubble__text p:last-child {
margin-bottom: 0;
}
.pm-bubble__time {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.35rem;
font-size: 0.7rem;
color: #64748b;
}
.pm-bubble__read {
font-size: 0.62rem;
font-weight: 700;
color: #036eb8;
letter-spacing: 0.02em;
}
.pm-thread-empty {
text-align: center;
padding: 3rem 1rem;
color: #64748b;
}
.pm-thread-empty i {
font-size: 2.5rem;
color: #cbd5e1;
display: block;
margin-bottom: 0.75rem;
}
.pm-thread-empty p {
margin: 0;
font-size: 0.9rem;
}
.shop-sidebar-icon {
overflow: visible !important;
}
.shop-sidebar-icon__badge {
position: absolute;
top: -2px;
right: -2px;
z-index: 5;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #dc3545;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
line-height: 1;
border-radius: 999px;
border: 2px solid #1a252f;
box-sizing: border-box;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.submenu-content ul li a.shop-submenu-link {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-right: 12px !important;
}
.shop-submenu-link__text {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.shop-submenu-badge {
flex-shrink: 0;
min-width: 22px;
height: 22px;
padding: 0 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #dc3545;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
border-radius: 999px;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pm-new-message-modal .modal-content {
border: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 48px rgba(1, 61, 102, 0.2);
}
.pm-new-message-modal .modal-header {
background: linear-gradient(125deg, #013d66 0%, #036eb8 45%, #0891d4 100%);
color: #fff;
border: none;
padding: 1.15rem 1.35rem;
}
.pm-new-message-modal .modal-header .modal-title {
display: flex;
align-items: center;
gap: 0.45rem;
color: #fff;
font-weight: 700;
}
.pm-new-message-modal .modal-header .btn-close {
filter: brightness(0) invert(1);
opacity: 0.85;
}
.pm-new-message-modal .modal-body {
padding: 1.35rem;
background: #f8fafc;
}
.pm-new-message-modal .modal-footer {
display: flex;
justify-content: flex-end;
background: #fff;
border-top: 1px solid #e2e8f0;
padding: 0.85rem 1.35rem;
gap: 0.65rem;
}
.pm-new-message-modal .pm-new-message-modal__btn {
min-width: 7.5rem;
padding: 0.55rem 1.35rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
border-radius: 8px;
border: 1.5px solid transparent;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pm-new-message-modal .pm-new-message-modal__btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.pm-new-message-modal .pm-new-message-modal__btn--cancel {
background: #fff;
border-color: #cbd5e1;
color: #475569;
}
.pm-new-message-modal .pm-new-message-modal__btn--cancel:hover:not(:disabled) {
background: #f8fafc;
border-color: #94a3b8;
color: #334155;
}
.pm-new-message-modal .pm-new-message-modal__btn--submit {
background: #036eb8;
border-color: #036eb8;
color: #fff;
}
.pm-new-message-modal .pm-new-message-modal__btn--submit:hover:not(:disabled) {
background: #025a96;
border-color: #025a96;
}
.pm-new-message-modal .pm-new-message-modal__section {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1rem 1.1rem;
}
.pm-new-message-modal .pm-new-message-modal__section + .pm-new-message-modal .pm-new-message-modal__section {
margin-top: 0.85rem;
}
.pm-new-message-modal .pm-new-message-modal__section-title {
margin: 0 0 0.75rem;
font-size: 0.8125rem;
font-weight: 700;
color: #025a96;
display: flex;
align-items: center;
gap: 0.35rem;
}
.pm-new-message-modal .guest-student-picker__panel {
max-height: none;
border-color: #dbeafe;
background: #f8fbff;
}
.pm-new-message-modal .guest-student-picker__panel-head {
background: #eff6ff;
border-bottom-color: #dbeafe;
}
.pm-new-message-modal .guest-student-picker__list {
max-height: 200px;
}
.pm-new-message-modal .form-label {
font-size: 0.8125rem;
font-weight: 600;
color: #334155;
}
.page-shop-list {
padding: 1.25rem 1.5rem 2rem !important;
background: #f1f5f9 !important;
box-shadow: none !important;
border-radius: 14px;
}
.page-shop-list .shop-list-hero {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin: 0 0 1.25rem;
padding: 1.5rem 1.75rem;
background: linear-gradient(125deg, #013d66 0%, #036eb8 45%, #0891d4 100%);
border-radius: 16px;
color: #fff;
box-shadow: 0 16px 40px rgba(1, 61, 102, 0.22);
overflow: hidden;
}
.page-shop-list .shop-list-hero__glow {
position: absolute;
top: -40%;
right: -5%;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 68%);
pointer-events: none;
}
.page-shop-list .shop-list-hero__content {
position: relative;
z-index: 1;
min-width: 0;
}
.page-shop-list .shop-list-hero__eyebrow {
margin: 0 0 0.3rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.page-shop-list .shop-list-hero__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.35rem;
font-size: clamp(1.2rem, 2.2vw, 1.6rem);
font-weight: 800;
line-height: 1.25;
}
.page-shop-list .shop-list-hero__title i {
font-size: 1.25rem;
opacity: 0.95;
}
.page-shop-list .shop-list-hero__lead {
margin: 0;
max-width: 48ch;
font-size: 0.8125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.page-shop-list .shop-list-hero__actions {
position: relative;
z-index: 1;
flex-shrink: 0;
align-self: center;
}
.page-shop-list .shop-list-hero__actions--stack {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
align-self: flex-start;
}
.page-shop-list .shop-list-hero__action-form {
display: inline;
margin: 0;
}
.page-shop-list .shop-list-hero__btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.55rem 1rem;
border: none;
border-radius: 10px;
background: rgba(255, 255, 255, 0.95);
color: #036eb8;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-shop-list .shop-list-hero__btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
color: #025a96;
}
.page-shop-list .shop-list-hero__btn--compact {
padding: 0.35rem 0.7rem;
font-size: 0.75rem;
border-radius: 8px;
}
.page-shop-list .shop-list-hero__btn--compact i {
font-size: 0.85rem;
}
.page-shop-list .shop-list-hero__btn--ghost {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
}
.page-shop-list .shop-list-hero__btn--ghost:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.page-shop-list .shop-list-section {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
overflow: hidden;
margin-bottom: 1.25rem;
}
.page-shop-list .shop-list-section__head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e2e8f0;
}
.page-shop-list .shop-list-section__title {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 800;
color: #0f172a;
}
.page-shop-list .shop-list-section__title i {
color: #036eb8;
font-size: 1.05rem;
}
.page-shop-list .shop-list-section__body {
padding: 1.15rem 1.25rem 1.25rem;
}
.page-shop-list .shop-list-filter .form-label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.8125rem;
font-weight: 700;
color: #475569;
}
.page-shop-list .shop-list-filter .form-select,
.page-shop-list .shop-list-filter .form-control {
min-height: 40px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 0.875rem;
}
.page-shop-list .shop-list-filter .form-select:focus,
.page-shop-list .shop-list-filter .form-control:focus {
border-color: #036eb8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-shop-list .shop-list-filter .filter-selectbox,
.page-shop-list .shop-list-filter .selectbox-double-arrow {
display: block;
}
.page-shop-list .shop-list-filter .filter-buttons-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
}
.page-shop-list .shop-list-filter .btn-primary {
background: #036eb8;
border-color: #036eb8;
border-radius: 8px;
font-weight: 700;
font-size: 0.8125rem;
}
.page-shop-list .shop-list-filter .btn-outline-secondary {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.85rem;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #64748b;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
}
.page-shop-list .shop-list-filter .btn-outline-secondary:hover {
background: #f8fafc;
color: #334155;
}
.page-shop-list .shop-list-table-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.page-shop-list .shop-list-table-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.15rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e2e8f0;
}
.page-shop-list .shop-list-table-card__head--tabs {
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
.page-shop-list .shop-list-table-card__title {
margin: 0;
font-size: 0.875rem;
font-weight: 800;
color: #0f172a;
}
.page-shop-list .shop-list-table-card__count {
font-size: 0.75rem;
font-weight: 700;
color: #64748b;
}
.page-shop-list .shop-data-table {
width: 100%;
margin: 0;
border-collapse: collapse;
font-size: 0.8125rem;
}
.page-shop-list .shop-data-table thead th {
padding: 0.65rem 0.85rem;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
font-size: 0.68rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.page-shop-list .shop-data-table tbody td {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid #f1f5f9;
color: #334155;
vertical-align: middle;
}
.page-shop-list .shop-data-table tbody tr {
transition: background 0.12s ease;
}
.page-shop-list .shop-data-table tbody tr:hover {
background: #f8fafc;
}
.page-shop-list .shop-data-table tbody tr:last-child td {
border-bottom: none;
}
.page-shop-list .shop-data-table .shop-table-empty {
padding: 2.5rem 1rem !important;
text-align: center;
color: #94a3b8;
font-size: 0.875rem;
}
.page-shop-list .student-name-link {
font-weight: 700;
color: #036eb8;
text-decoration: none;
}
.page-shop-list .student-name-link:hover {
color: #025a96;
text-decoration: underline;
}
.page-shop-list .edit-icon {
color: #94a3b8;
text-decoration: none;
}
.page-shop-list .edit-icon:hover {
color: #036eb8;
}
.page-shop-list .shop-status-badge {
display: inline-flex;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.page-shop-list .shop-status-badge--active {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.page-shop-list .shop-status-badge--suspended {
background: #fffbeb;
color: #b45309;
border: 1px solid #fde68a;
}
.page-shop-list .shop-status-badge--withdrawn {
background: #f1f5f9;
color: #64748b;
border: 1px solid #cbd5e1;
}
.page-shop-list .line-connected {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
font-size: 0.8125rem;
color: #334155;
}
.page-shop-list .line-connected i {
color: #036eb8;
}
.page-shop-list .shop-line-link-btn {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.15rem 0.45rem;
border: 1px solid #bfdbfe;
border-radius: 6px;
background: #eff6ff;
color: #036eb8;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.page-shop-list .shop-line-link-btn i {
font-size: 0.72rem;
line-height: 1;
}
.page-shop-list .shop-line-link-btn:hover {
background: #dbeafe;
color: #025a96;
}
.page-shop-list .shop-table-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.page-shop-list .shop-table-actions form {
display: inline-flex;
margin: 0;
}
.page-shop-list .shop-table-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 7px;
background: #fff;
color: #64748b;
cursor: pointer;
text-decoration: none;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.page-shop-list .shop-table-action-btn i {
font-size: 0.95rem;
line-height: 1;
}
.page-shop-list .shop-table-action-btn:hover {
background: #f8fafc;
color: #036eb8;
border-color: #bfdbfe;
}
.page-shop-list .shop-table-action-btn--danger:hover {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
}
.page-shop-list .shop-table-action-btn--warning:hover {
background: #fffbeb;
color: #b45309;
border-color: #fde68a;
}
.page-shop-list .shop-list-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
@media (max-width: 992px) {
.page-shop-list .shop-list-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.page-shop-list .shop-list-stat-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.page-shop-list .shop-list-stat {
padding: 0.85rem 0.9rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.page-shop-list .shop-list-stat__label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
letter-spacing: 0.03em;
}
.page-shop-list .shop-list-stat__value {
display: block;
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.page-shop-list .shop-list-stat--paid {
background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
border-color: #6ee7b7;
}
.page-shop-list .shop-list-stat--paid .shop-list-stat__value {
color: #047857;
}
.page-shop-list .shop-list-stat--pending {
background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
border-color: #fcd34d;
}
.page-shop-list .shop-list-stat--pending .shop-list-stat__value {
color: #b45309;
}
.page-shop-list .shop-list-stat--overdue {
background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
border-color: #fca5a5;
}
.page-shop-list .shop-list-stat--overdue .shop-list-stat__value {
color: #dc2626;
}
.page-shop-list .shop-list-stat--total {
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
border-color: #93c5fd;
}
.page-shop-list .shop-list-stat--total .shop-list-stat__value {
color: #036eb8;
}
.page-shop-list .shop-list-tabs {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-right: auto;
}
.page-shop-list .shop-list-tabs__item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #fff;
color: #64748b;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-shop-list .shop-list-tabs__item i {
font-size: 0.95rem;
line-height: 1;
}
.page-shop-list .shop-list-tabs__item:hover {
background: #f8fafc;
color: #334155;
border-color: #94a3b8;
}
.page-shop-list .shop-list-tabs__item.is-active {
background: #036eb8;
border-color: #036eb8;
color: #fff;
}
.page-shop-list .shop-list-tabs__item.is-active .shop-list-tabs__count {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.page-shop-list .shop-list-tabs__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
padding: 0.05rem 0.35rem;
border-radius: 999px;
background: #f1f5f9;
font-size: 0.68rem;
font-weight: 800;
line-height: 1.3;
color: #475569;
}
.page-shop-list .shop-list-year-select {
max-width: 360px;
}
.page-shop-list .shop-list-year-select .form-select {
min-height: 42px;
border: 2px solid #cbd5e1;
border-radius: 10px;
font-weight: 600;
}
.page-shop-list .shop-list-year-select .form-select:focus {
border-color: #036eb8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-shop-list .shop-line-form-panel {
display: none;
margin-bottom: 1.25rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.page-shop-list .shop-line-form-panel.is-open {
display: block;
}
.page-shop-list .shop-line-form-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1.15rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e2e8f0;
}
.page-shop-list .shop-line-form-panel__title {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 800;
color: #0f172a;
}
.page-shop-list .shop-line-form-panel__title i {
color: #036eb8;
font-size: 1.05rem;
line-height: 1;
}
.page-shop-list .shop-line-form-panel__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: 8px;
background: #f1f5f9;
color: #64748b;
cursor: pointer;
}
.page-shop-list .shop-line-form-panel__close i {
font-size: 1.1rem;
line-height: 1;
}
.page-shop-list .shop-line-form-panel__close:hover {
background: #e2e8f0;
color: #0f172a;
}
.page-shop-list .shop-line-form-panel__body {
padding: 1.15rem 1.25rem 1.25rem;
}
.page-shop-list .shop-line-form__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.page-shop-list .shop-line-form__row {
grid-template-columns: minmax(0, 1fr);
}
}
.page-shop-list .shop-line-form__field {
min-width: 0;
}
.page-shop-list .shop-line-form__field .form-label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.8125rem;
font-weight: 700;
color: #475569;
}
.page-shop-list .shop-line-form__field .form-select {
min-height: 40px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 0.875rem;
}
.page-shop-list .shop-line-form__field .form-select:focus {
border-color: #036eb8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-shop-list .shop-line-form__hint {
margin: 0.35rem 0 0;
font-size: 0.75rem;
color: #94a3b8;
}
.page-shop-list .shop-line-form__hint--warn {
color: #b45309;
}
.page-shop-list .shop-line-form__footer {
display: flex;
justify-content: flex-end;
}
.page-shop-list .shop-line-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1.1rem;
border: none;
border-radius: 8px;
background: #036eb8;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
}
.page-shop-list .shop-line-form__submit:hover {
background: #025a96;
}
.page-shop-list .shop-list-empty {
padding: 3rem 1.5rem;
text-align: center;
}
.page-shop-list .shop-list-empty i {
display: block;
margin-bottom: 0.75rem;
font-size: 2.5rem;
color: #cbd5e1;
}
.page-shop-list .shop-list-empty h4 {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
color: #64748b;
}
.page-shop-list .shop-list-empty p {
margin: 0 0 0.75rem;
font-size: 0.8125rem;
color: #94a3b8;
}
.page-shop-list .shop-list-empty__btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.7rem;
border: none;
border-radius: 8px;
background: #036eb8;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.page-shop-list .shop-list-empty__btn i {
font-size: 0.85rem;
line-height: 1;
}
.page-shop-list .shop-list-empty__btn:hover {
background: #025a96;
color: #fff;
}
.page-shop-list .pagination-wrapper {
padding: 0.85rem 1rem;
border-top: 1px solid #e2e8f0;
background: #fafbfc;
}
.page-shop-list code {
padding: 0.15rem 0.35rem;
border-radius: 4px;
background: #f1f5f9;
font-size: 0.75rem;
color: #475569;
}
.page-shop-list .shop-form-modal {
position: fixed;
inset: 0;
z-index: 1050;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.page-shop-list .shop-form-modal.is-open {
display: flex;
}
.page-shop-list .shop-form-modal__overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
}
.page-shop-list .shop-form-modal__dialog {
position: relative;
z-index: 1;
width: min(100%, 640px);
max-height: calc(100vh - 2rem);
overflow: auto;
background: #fff;
border-radius: 14px;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}
.page-shop-list .shop-form-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.15rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e2e8f0;
}
.page-shop-list .shop-form-modal__title {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 800;
color: #0f172a;
}
.page-shop-list .shop-form-modal__title i {
color: #036eb8;
font-size: 1.05rem;
}
.page-shop-list .shop-form-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: 8px;
background: #f1f5f9;
color: #64748b;
cursor: pointer;
}
.page-shop-list .shop-form-modal__close:hover {
background: #e2e8f0;
color: #0f172a;
}
.page-shop-list .shop-form-modal__body {
padding: 1.15rem 1.25rem 1.25rem;
}
.page-shop-list .shop-payment-form__course-name {
margin: 0;
padding: 0.55rem 0.75rem;
min-height: 40px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #f8fafc;
font-size: 0.875rem;
font-weight: 600;
color: #0f172a;
}
.page-shop-list .shop-payment-form__course-placeholder {
margin: 0;
padding: 0.55rem 0.75rem;
min-height: 40px;
border: 1px dashed #cbd5e1;
border-radius: 8px;
background: #f8fafc;
font-size: 0.8125rem;
color: #94a3b8;
}
.page-shop-list .shop-payment-form__course-placeholder--warn {
color: #b45309;
border-color: #fcd34d;
background: #fffbeb;
}
.page-shop-list .shop-payment-form__cancel {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1rem;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #64748b;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
}
.page-shop-list .shop-payment-form__cancel:hover {
background: #f8fafc;
color: #334155;
}
.page-shop-list .shop-payment-form .shop-line-form__footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.page-shop-list .shop-payment-form textarea.form-control {
min-height: 88px;
resize: vertical;
}
.withdrawal-modal .withdrawal-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.withdrawal-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: 8px;
background: #f1f5f9;
color: #64748b;
cursor: pointer;
}
.withdrawal-modal__close i {
font-size: 1.1rem;
}
.withdrawal-modal__close:hover {
background: #e2e8f0;
color: #0f172a;
}
.scratch-editor-container .sidebar {
background-color: #f8f9fa;
border-right: 1px solid #dee2e6;
height: auto;
max-height: calc(100vh - 60px);
max-height: calc(100dvh - 60px);
overflow-y: auto;
padding: 15px;
}
.scratch-editor-container .sidebar .card {
margin-bottom: 1rem;
}
.scratch-editor-container .sidebar .card .card-body {
padding: 1rem;
}
.scratch-editor-container #scratch-editor {
width: 100%;
height: 100%;
}
.scratch-editor-container #scratch-editor iframe {
border: none;
background: white;
width: 100%;
height: 100%;
}
@media (max-width: 991.98px) {
.scratch-editor-container .sidebar,
.scratch-editor-page .sidebar {
max-height: var(--scratch-sidebar-max-height, 42vh);
border-right: none;
border-bottom: 1px solid #dee2e6;
}
}
.card {
margin-bottom: 1rem;
border: none !important;
}
.card .card-body {
padding: .5rem !important;
}
.card .card-body .card-title {
background: none;
font-size: 16px;
padding: 0;
}
.card .card-body .btn {
background: #036EB8;
color: white;
padding: 8px 32px;
border-radius: 30px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
margin: 1rem 0;
border: none;
display: block;
margin: 0 auto 2rem;
width: 140px;
}
.step-card {
border: 1px solid #f2f2f2;
border-radius: 10px;
padding: 1rem;
margin: 1rem 0;
}
.d-grid h6 {
font-size: 14px;
margin-bottom: 1rem;
}
.deco-file {
margin-bottom: 1rem;
}
.deco-file p {
font-size: .6rem;
margin: 8px 0;
}
.deco-file label {
display: inline-block;
border: 2px solid #1E88E5;
color: #1E88E5;
text-align: center;
padding: 8px 24px;
border-radius: 4px;
transition: all 0.3s ease;
width: 100%;
font-size: 14px;
}
.deco-file label:hover {
cursor: pointer;
background-color: #1E88E5;
color: white;
}
.deco-file input[type="file"] {
display: none;
}
.deco-file .file-names {
margin-top: 0.5rem;
font-size: 0.875rem;
color: #666;
word-break: break-all;
}
.step-info {
padding: 1rem;
}
.step-info .btn-info {
background: #17a2b8;
color: white;
border: none;
padding: 8px 16px;
margin-top: 10px;
border-radius: 4px;
}
.step-info .btn-info i {
margin-right: 8px;
}
.step-info .btn-info:hover {
background: #138496;
}
.modal-header {
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
position: relative;
padding: 1rem;
}
.modal-title {
font-size: 1.1rem;
color: #666;
}
.close-button {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 24px;
color: #666;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
opacity: 0.5;
transition: opacity 0.2s;
}
.close-button:hover {
opacity: 1;
}
.modal-dialog.modal-lg {
max-width: 80%;
margin: 1.75rem auto;
}
.modal-body {
background: #fff;
}
.modal-body iframe {
width: 100%;
border: none;
}
.pdf-error {
padding: 2rem;
text-align: center;
}
.pdf-error .pdf-options {
margin-top: 1rem;
display: flex;
gap: 1rem;
justify-content: center;
}
.pdf-error .pdf-options .btn i {
margin-right: 0.5rem;
}
@media print {
* {
display: none !important;
}
}
.step-info h4 {
font-size: 18px;
margin-bottom: .5rem;
color: #666;
}
.step-info h4 span {
font-size: 12px;
display: block;
margin-top: 1rem;
}
.file-controls {
margin: 1rem 0 2rem;
padding: 0 16px;
}
.file-controls h6 {
font-size: 16px;
margin-bottom: 1.5rem;
}
.file-controls .action-buttons {
margin-top: 2rem;
display: flex;
border-radius: 6px;
}
.file-controls .action-buttons .btn {
font-size: .8rem !important;
padding: 0.5rem 1rem;
margin: 0 8px 0;
}
.file-controls .action-buttons #save-button {
border: 1px solid #036EB8;
color: #036EB8;
background: none;
}
.file-controls .action-buttons #save-button i {
margin-right: 8px;
}
.file-controls .action-buttons #submit-button {
background: #036EB8;
color: white;
border: none;
}
.file-controls .action-buttons #submit-button i {
margin-right: 8px;
}
.feedback-content {
background: #f8f9fa;
padding: 8px;
border-radius: 5px;
margin: 1rem 0;
}
.feedback-content h6 {
font-size: 16px;
}
.score {
font-size: 1.2em;
font-weight: bold;
color: #28a745;
margin-bottom: 10px;
}
.message {
color: #666;
line-height: 1.4;
font-size: 12px;
}
.next-step-button {
text-align: center;
}
.steps-list a {
text-decoration: none;
}
.steps-list .row {
padding: 0 16px;
}
.steps-list .row .col-3 {
padding: 1rem 0 !important;
}
.steps-list .row .col-3 .step-card {
width: 90%;
margin: 0 auto !important;
display: block;
height: 100%;
background: white;
border: 1px solid #f2f2f2;
border-radius: 10px;
padding: 2rem 1rem;
margin: 0;
position: relative;
border: 1px solid #ddd;
border-radius: 8px;
}
.steps-list .row .col-3 .step-card .status-label {
display: block;
margin-top: 10px;
font-weight: bold;
box-sizing: border-box;
}
.steps-list .row .col-3 .step-card .status-label span {
padding: 10px 8px;
border-radius: 4px;
display: block;
text-align: center;
}
.steps-list .row .col-3 .step-card .status-label span.submitted {
background-color: #28a745;
color: white;
}
.steps-list .row .col-3 .step-card .status-label span.in-progress {
background-color: #ffc107;
color: #000;
}
.steps-list .row .col-3 .step-card .status-label span.start {
background-color: #007bff;
color: white;
}
.steps-list .row .col-3 .step-card h6 {
font-size: 12px;
margin: 1rem 0 0;
}
.steps-list .row .col-3 .step-card h5 {
margin: .5rem 0 1rem !important;
padding-left: 0 !important;
font-size: 16px !important;
}
.steps-list .row .col-3 .step-card h5 span {
font-size: 12px;
color: #666;
display: block;
margin-bottom: .5rem;
}
.steps-list .row .col-3 .step-card h5 i {
color: #036EB8;
background: #eef8ff;
padding: 6px;
border-radius: 50%;
margin-right: 8px;
}
.steps-list .row .col-3 .step-card p {
margin-bottom: 2rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 2.8rem;
font-size: 14px !important;
}
.steps-list .row .col-3 .step-card .step-description {
margin-top: 10px;
color: #666;
line-height: 1.5;
}
.steps-list .row .col-3 .step-card small {
position: relative;
font-size: 12px;
color: #666;
font-weight: 600;
display: block;
}
.step-progress {
padding: 0 !important;
margin: 1rem 0 2rem;
}
.step-progress .steps {
display: flex;
gap: 10px;
margin: 15px 0;
padding: 0 !important;
}
.step-progress .steps .step {
flex: 1;
text-align: center;
padding: 5px 12px;
border-radius: 30px;
font-size: 10px;
}
.step-progress .steps .step.completed {
background-color: #036EB8;
color: white;
border: 1px solid #036EB8;
}
.step-progress .steps .step.in-progress {
background-color: transparent;
color: #28a745;
border: 2px solid #28a745;
}
.safety_box {
background-color: #fff3cd;
border: 2px solid #ffc107;
border-radius: 8px;
padding: 20px;
margin: 2rem 0;
}
.safety_box h5 i {
color: #ff6b6b;
margin: .5rem 0 !important;
}
.safety_box .btn-success {
background: #15be7d !important;
}
.small-calendar .table {
font-size: 0.8rem;
}
.small-calendar .table th, .small-calendar .table td {
padding: 0.3rem;
height: 2rem;
width: 2rem;
vertical-align: middle;
}
#clock {
font-size: 2rem;
font-weight: bold;
color: #036EB8;
margin: 1rem 0;
}
.lesson-detail {
padding: 2rem 2rem 5rem;
}
.lesson-detail .back-link {
color: #036EB8;
font-size: 16px;
font-weight: 600;
margin: 1rem 0;
display: block;
text-decoration: none;
text-align: center;
}
.lesson-detail .back-link i {
margin-right: 8px;
}
.lesson-detail h4 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.lesson-detail h4 i {
margin-right: 12px;
}
.lesson-detail h5 {
text-align: left;
}
.lesson-detail .step_box {
background: white;
padding: 1rem 1.5rem 2rem;
border-radius: 8px;
box-shadow: none;
margin: 1rem auto;
}
.lesson-detail .step_box:hover {
background-color: rgba(3, 110, 184, 0.05);
transition: background-color 0.3s ease;
}
.school_student_show .chart-container {
padding-bottom: 1rem;
height: auto !important;
}
.school_student_show .chart-container::after {
content: '';
display: block;
clear: both;
}
.school_student_show .chart-container canvas {
width: auto !important;
height: 350px !important;
}
.school_student_show h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .table {
width: 100%;
}
.school_student_show .table th, .school_student_show .table td {
font-size: 14px;
padding: 12px 0;
}
.school_student_show .table th {
width: 20%;
}
.school_student_show .table td {
width: 80%;
}
.school_student_show .overall-score {
margin-top: 3rem;
}
.school_student_show .overall-score h3 {
font-size: 64px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .overall-score h3 span {
font-size: 20px;
font-weight: 600;
color: #272727;
margin-right: 16px;
}
.school_student_show .learning-stats {
text-align: center;
}
.school_student_show .learning-stats .stat-label {
font-size: 14px;
font-weight: 600;
color: #272727;
}
.school_student_show .learning-stats .stat-value {
font-size: 24px;
font-weight: 600;
color: #272727;
}
.school_student_show .course-progress {
margin-top: 2rem;
}
.school_student_show .course-progress h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .recent-submissions h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 1rem;
}
.school_student_show .score-items .score-item h6 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0;
}
.school_student_show .score-items .score-item p {
font-size: 14px;
font-weight: 400;
color: #272727;
margin: 0;
}
.health_box {
background: white;
padding: 1.5rem;
}
.health_box .health-record-summary .text-muted {
font-size: 0.875rem;
}
.health_box .health-fadable-block {
max-height: 400px;
overflow: hidden;
transition: opacity 0.6s ease-out, max-height 0.5s ease-out, margin 0.5s ease-out, padding 0.5s ease-out;
}
.health_box .health-fadable-block.health-block-faded {
opacity: 0;
pointer-events: none;
max-height: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.health_box h5 {
font-size: 18px;
font-weight: 600;
color: #272727;
margin-bottom: 1rem;
line-height: 1.5;
padding: 0 !important;
}
.health_box .comment-form input.btn-save-comment[type="submit"] {
display: inline-block !important;
font-weight: 400 !important;
line-height: 1.5 !important;
text-align: center !important;
text-decoration: none !important;
vertical-align: middle !important;
cursor: pointer !important;
user-select: none !important;
border: 1px solid #036EB8 !important;
padding: 0.3rem 1rem !important;
font-size: 0.875rem !important;
border-radius: 0.375rem !important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
background-color: #036EB8 !important;
border-color: #036EB8 !important;
color: white !important;
min-width: 80px !important;
font-family: inherit !important;
margin: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
box-sizing: border-box !important;
}
.health_box .comment-form input.btn-save-comment[type="submit"]:hover {
background-color: #025a9a !important;
border-color: #025a9a !important;
color: white !important;
text-decoration: none !important;
}
.health_box .comment-form input.btn-save-comment[type="submit"]:focus {
background-color: #036EB8 !important;
border-color: #036EB8 !important;
color: white !important;
box-shadow: 0 0 0 0.25rem rgba(3, 110, 184, 0.25) !important;
outline: 0 !important;
}
.health_box .comment-form input.btn-save-comment[type="submit"]:active {
background-color: #025a9a !important;
border-color: #025a9a !important;
color: white !important;
}
.health_box .comment-form input.btn-save-comment[type="submit"]:disabled {
opacity: 0.65 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.floating-image {
animation: floatUpDown 4s ease-in-out infinite;
will-change: transform;
}
@keyframes floatUpDown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
.chatbot-container {
background: white;
border-radius: 12px;
display: flex;
flex-direction: column;
height: 600px;
max-height: 80vh;
overflow: hidden;
}
.chatbot-container .chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
background: #f8f9fa;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar {
width: 6px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
.chatbot-container .chatbot-messages::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.chatbot-container .chatbot-messages .message {
display: flex;
animation: fadeIn 0.3s ease-in;
margin-bottom: 0.25rem;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chatbot-container .chatbot-messages .message .message-content {
max-width: 75%;
background-color: #036EB8 !important;
color: white !important;
padding: 0.75rem 1rem;
border-radius: 18px;
word-wrap: break-word;
line-height: 1.5;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.chatbot-container .chatbot-messages .message.user-message {
justify-content: flex-end;
}
.chatbot-container .chatbot-messages .message.user-message .message-content {
border-bottom-right-radius: 4px;
}
.chatbot-container .chatbot-messages .message.bot-message {
justify-content: flex-start;
}
.chatbot-container .chatbot-messages .message.bot-message .message-content {
background-color: white !important;
color: #272727 !important;
border-bottom-left-radius: 4px;
border: 1px solid #e9ecef !important;
}
.chatbot-container .chatbot-input {
padding: 0.75rem 1rem;
border-top: 1px solid #e9ecef;
background-color: white;
border-radius: 0 0 12px 12px;
}
.chatbot-container .chatbot-input .input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
background: #f8f9fa;
border-radius: 24px;
border: 1px solid #d1d5db;
padding: 0.5rem 0.5rem 0.5rem 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.chatbot-container .chatbot-input .input-wrapper:focus-within {
border-color: #036EB8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
background: #fff;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
line-height: 1.5;
resize: none;
padding: 0.25rem 0;
min-height: 24px;
max-height: 120px;
overflow-y: auto;
font-family: inherit;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea:focus {
outline: none;
box-shadow: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::placeholder {
color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #036EB8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:hover {
background: #025a9a;
transform: scale(1.05);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:active {
transform: scale(0.95);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:disabled {
background: #adb5bd;
cursor: not-allowed;
transform: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn i {
margin: 0;
line-height: 1;
}
.step_description h4 {
margin-top: 2rem;
font-size: 16px;
}
.step_description h4 span {
display: block;
font-size: 14px;
margin-bottom: 0.5rem;
color: #666;
}
.step_description p {
font-size: 12px;
}
.step_description p span {
display: block;
font-size: 14px;
margin: 1rem 0;
color: #666;
}
.step_description ul li {
display: block;
list-style-type: none;
}
.step_description ul li a {
display: block;
font-size: 14px;
margin: 1rem auto;
color: #036EB8;
width: fit-content;
border: 1px solid #036EB8;
padding: 8px 18px;
border-radius: 4px;
text-align: center;
}
.quiz-section {
padding: 40px 0;
}
.quiz-section .btn {
margin: 2rem 0;
background: #036EB8;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
}
.quiz-section .quiz-question {
margin: 2rem 0;
padding: 2rem 0;
border-bottom: 1px solid #eee;
}
.quiz-section .quiz-question h5 {
font-size: 16px;
display: inline-block;
margin-bottom: 1rem;
border: 1px solid #272727;
padding: 8px 18px !important;
}
.modal .modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
z-index: 1040;
}
.modal .modal-dialog {
z-index: 1050;
position: relative;
}
.modal .modal-content {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background-color: white;
position: relative;
z-index: 1051;
}
.modal .modal-header {
background-color: #036EB8;
border-bottom: 1px solid #dee2e6;
padding: 1rem 1.5rem;
}
.modal .modal-header .modal-title {
font-size: 1.25rem;
font-weight: 600;
color: white;
}
.modal .modal-header .btn-close {
padding: 0.5rem;
margin: -2rem -0.5rem -0.5rem auto;
color: white;
}
.modal .modal-body {
padding: 0rem;
}
.modal .modal-body .submission-result h6 {
font-size: 1rem;
font-weight: 600;
color: #272727;
margin-bottom: 0.5rem;
}
.modal .modal-body .submission-result .score-display {
margin-bottom: 1rem;
}
.modal .modal-body .submission-result .score-display .badge {
font-size: 1.2rem;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.modal .modal-body .submission-result .feedback-display {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
}
.modal .modal-body .submission-result .feedback-display p {
margin: 0;
color: #272727;
line-height: 1.5;
}
.modal .modal-body .submission-result .submission-date {
color: #6c757d;
font-size: 0.9rem;
}
.modal .modal-footer {
border-top: 1px solid #dee2e6;
padding: 1rem 1.5rem;
}
.modal .modal-footer .btn {
padding: 0.5rem 1.5rem;
font-weight: 500;
border-radius: 4px;
}
.modal .modal-footer .btn.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
color: white;
}
.modal .modal-footer .btn.btn-secondary:hover {
background-color: #5a6268;
border-color: #545b62;
}
#pdfContent {
height: 100% !important;
}
.history_box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: none;
margin-bottom: 1rem;
position: relative;
}
.history_box a {
position: absolute;
right: 0;
top: 1rem;
color: #036EB8;
font-size: 16px;
font-weight: 500;
}
.history_box h5 {
margin: .5rem 0 2rem !important;
font-size: 20px;
padding: 0 !important;
}
.history_box table {
width: 100%;
}
.history_box table th, .history_box table td {
font-size: 14px;
padding: 12px 0;
}
.history_box table th {
border-bottom: 1px solid #eee;
}
.history_box table tbody {
border-top: 1px solid #eee !important;
}
.history_box table td {
padding: 16px 0;
}
.history_box table td .bg-info {
background: none !important;
color: #15be7d !important;
border: 1px solid #15be7d !important;
}
.history_box table td .bg-primary {
background: none !important;
color: #036EB8 !important;
border: 1px solid #036EB8 !important;
}
.history_box table td .bg-success {
background: none !important;
color: #15be7d !important;
border: 1px solid #15be7d !important;
}
.step-progress {
margin: 1rem 0;
}
.step-progress .steps {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.step-progress .steps .step {
position: relative;
width: 30%;
padding: 0.1rem .5rem;
border-radius: 30px;
transition: all 0.3s ease;
z-index: 3;
}
.step-progress .steps .step.completed {
border: 1px solid #036EB8;
font-size: 12px;
}
.step-progress .steps .step.completed .step-number {
color: white;
font-weight: 600;
}
.step-progress .steps .step.completed .step-status {
color: #28a745;
margin-top: 0.25rem;
}
.step-progress .steps .step.incomplete {
background-color: white;
border: 1px dashed #ccc;
}
.step-progress .steps .step.incomplete .step-number {
color: #036EB8;
font-size: 8px;
}
.step-progress .steps .step.disabled {
background-color: white;
border: 1px solid #eee;
opacity: 0.8;
}
.step-progress .steps .step.disabled .step-number {
color: #036EB8;
}
.step-progress .steps .step .step-number {
font-size: 8px;
}
.feedback-list {
padding: 2rem 1rem;
background: white;
}
.feedback-list h4 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 3rem;
}
.feedback-list h4 i {
margin-right: 10px;
color: #036EB8;
}
.feedback-list .table {
table-layout: fixed;
}
.feedback-list .table th {
font-weight: 600;
color: #272727;
}
.feedback-list .table tbody {
border-top: 1px solid #eee;
}
.feedback-list .table th, .feedback-list .table td {
padding: 16px;
}
.feedback-list .table th:first-of-type, .feedback-list .table td:first-of-type {
width: 40%;
}
.feedback-list .table th:nth-of-type(2), .feedback-list .table th:nth-of-type(3), .feedback-list .table td:nth-of-type(2), .feedback-list .table td:nth-of-type(3) {
width: 10%;
}
.feedback-list .table td a {
padding: 0;
}
.feedback-list .table td .bg-info {
background: none !important;
color: #15be7d;
border: 1px solid #15be7d;
}
.feedback-list .table td .bg-primary {
background: none !important;
color: #036EB8;
border: 1px solid #036EB8;
}
.feedback-list .table .badge {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
}
.feedback-detail {
padding: 2rem 0;
}
.feedback-detail .back-link {
color: #036EB8;
font-size: 16px;
font-weight: 500;
margin-bottom: 1.5rem;
display: inline-block;
text-decoration: none;
}
.feedback-detail .back-link:hover {
text-decoration: underline;
}
.feedback-detail .feedback-card {
background: white;
padding: 1.5rem;
margin-bottom: 2rem;
}
.feedback-detail .feedback-card .feedback-header {
border-bottom: 1px solid #eee;
padding-bottom: 1rem;
margin-bottom: 1.5rem;
}
.feedback-detail .feedback-card .feedback-header h4 {
font-size: 20px;
font-weight: 600;
color: #272727;
margin: 0 0 0.5rem;
}
.feedback-detail .feedback-card .feedback-header h4 span {
font-size: 14px;
display: block;
margin: 0.5rem 0 1rem;
color: #666;
}
.feedback-detail .feedback-card .feedback-header h4 i {
margin-right: 10px;
color: #036EB8;
}
.feedback-detail .feedback-card .feedback-header .submission-info {
display: flex;
align-items: center;
}
.feedback-detail .feedback-card .feedback-header .submission-info .badge {
margin-right: 1rem;
}
.feedback-detail .feedback-card .feedback-header .submission-info .submission-date {
color: #6c757d;
font-size: 0.9rem;
}
.feedback-detail .feedback-card .feedback-header .submission-info .submission-date i {
margin-right: 5px;
}
.feedback-detail .feedback-card .feedback-content {
background: none;
}
.feedback-detail .feedback-card .feedback-content h5 {
font-size: 16px;
font-weight: 600;
color: #272727;
margin: 1.5rem 0 0.75rem;
}
.feedback-detail .feedback-card .feedback-content h5:first-child {
margin-top: 0;
}
.feedback-detail .feedback-card .feedback-content .feedback-section h5 {
margin: 1rem 0 !important;
font-size: 18px !important;
padding: 0 !important;
}
.feedback-detail .feedback-card .feedback-content .feedback-section .feedback-display {
padding: 0 !important;
}
.feedback-detail .feedback-card .feedback-content .score-display {
margin-bottom: 1.5rem;
}
.feedback-detail .feedback-card .feedback-content .score-display .badge {
font-size: 1.2rem;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.feedback-detail .feedback-card .feedback-content .feedback-display {
padding: 1rem;
border-radius: 4px;
margin-bottom: 1.5rem;
}
.feedback-detail .feedback-card .feedback-content .feedback-display p {
margin: 0;
color: #272727;
line-height: 1.5;
}
.feedback-detail .feedback-card .feedback-content .project-preview .preview-frame {
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
}
.feedback-detail .feedback-card .feedback-content .quiz-answers .table th {
background-color: #f8f9fa;
font-weight: 600;
}
.feedback-detail .feedback-card .feedback-content .quiz-answers .table .badge {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
}
.control-panel-content {
padding: 1rem 0 !important;
}
.control-panel-content .col-2 {
flex: 0 0 100%;
max-width: 100%;
}
.control-panel-content .col-2 .step-controls {
padding: 0;
border-radius: 0;
}
.control-panel-content .col-2 .step-controls .feedback-content {
padding: 0 !important;
}
.control-panel-content .col-2 .step-controls .feedback-content span {
font-size: 12px;
}
.quiz-form {
margin-bottom: 80px;
}
.quiz-submit .btn {
background: #036EB8;
color: white;
padding: 8px 32px;
}
.chatbot-container {
margin: 0 0 2rem;
}
.comment-form .form-label {
font-size: 1rem !important;
margin-bottom: 0.25rem !important;
}
.comment-form .form-control {
font-size: 0.75rem !important;
padding: 0.25rem 0.5rem !important;
height: 32px !important;
line-height: 1.5 !important;
}
.comment-form .d-flex {
align-items: center;
}
.comment-form input.btn-save-comment[type="submit"],
input.btn-save-comment[type="submit"],
.health_box .comment-form input.btn-save-comment[type="submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 400 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
vertical-align: middle !important;
cursor: pointer !important;
user-select: none !important;
border: 1px solid #036EB8 !important;
padding: 0.25rem 1rem !important;
height: 32px !important;
font-size: 0.75rem !important;
border-radius: 0.375rem !important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
background-color: #036EB8 !important;
border-color: #036EB8 !important;
color: white !important;
min-width: 80px !important;
font-family: inherit !important;
margin: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
box-sizing: border-box !important;
}
.comment-form input.btn-save-comment[type="submit"]:hover,
input.btn-save-comment[type="submit"]:hover,
.health_box .comment-form input.btn-save-comment[type="submit"]:hover {
background-color: #025a9a !important;
border-color: #025a9a !important;
color: white !important;
text-decoration: none !important;
}
.comment-form input.btn-save-comment[type="submit"]:focus,
input.btn-save-comment[type="submit"]:focus,
.health_box .comment-form input.btn-save-comment[type="submit"]:focus {
background-color: #036EB8 !important;
border-color: #036EB8 !important;
color: white !important;
box-shadow: 0 0 0 0.25rem rgba(3, 110, 184, 0.25) !important;
outline: 0 !important;
}
.comment-form input.btn-save-comment[type="submit"]:active,
input.btn-save-comment[type="submit"]:active,
.health_box .comment-form input.btn-save-comment[type="submit"]:active {
background-color: #025a9a !important;
border-color: #025a9a !important;
color: white !important;
}
.comment-form input.btn-save-comment[type="submit"]:disabled,
input.btn-save-comment[type="submit"]:disabled,
.health_box .comment-form input.btn-save-comment[type="submit"]:disabled {
opacity: 0.65 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.lesson_list .row {
margin-bottom: 0.5rem;
}
.lesson_list .row .col-4 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.lesson_list .lesson_card {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 2px solid #dee2e6;
border-radius: 12px;
padding: 0.625rem 0.75rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.lesson_list .lesson_card .lesson_card_icon {
font-size: 80px;
line-height: 1;
margin-bottom: 0.5rem;
display: block;
}
.lesson_list .lesson_card .lesson_card_icon i {
font-size: inherit;
}
.lesson_list .lesson_card .lesson_card_icon.lesson_card_icon_coding {
color: #036EB8;
}
.lesson_list .lesson_card .lesson_card_icon.lesson_card_icon_scratch {
color: #f7a81b;
}
.lesson_list .lesson_card .lesson_card_heading {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 600;
}
.lesson_list .lesson_card .lesson_card_heading i {
flex-shrink: 0;
display: inline-flex !important;
}
.lesson_list .lesson_card .lesson_card_heading .lesson_card_title_text {
flex: 1;
min-width: 0;
}
.lesson_list .lesson_card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(3, 110, 184, 0.15);
border-color: #036EB8;
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}
.lesson_list .lesson_card .lesson-icon-wrapper {
flex-shrink: 0;
}
.lesson_list .lesson_card .lesson-icon-wrapper i {
font-size: 1.5rem;
color: #036EB8;
background: rgba(3, 110, 184, 0.1);
padding: 0.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
}
.lesson_list .lesson_card .lesson-title {
font-size: 0.9375rem;
font-weight: 600;
color: #272727;
line-height: 1.3;
flex: 1;
}
.lesson_list .lesson_card .lesson-description {
font-size: 0.75rem;
color: #6c757d;
line-height: 1.4;
margin-top: 0.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lesson_list .lesson_card .description.lesson_card_description_2lines,
.lesson_list .lesson_card p.description.lesson_card_description_2lines {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
white-space: normal !important;
max-height: 3.5rem;
}
#school_student .lesson_list .lesson_card h5.lesson_card_heading {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
.health_box .col-2 .speech-bubble,
.health_box .speech-bubble,
.speech-bubble {
background: #fff !important;
border: 2px solid #036EB8 !important;
border-radius: 12px !important;
padding: 0.75rem 1rem !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
min-width: 200px !important;
max-width: 250px !important;
margin-bottom: 1rem !important;
position: relative !important;
display: block !important;
}
.health_box .col-2 .speech-bubble::after,
.health_box .speech-bubble::after,
.speech-bubble::after {
content: '' !important;
position: relative !important;
display: block !important;
margin: 0.5rem auto 0 auto !important;
width: 0 !important;
height: 0 !important;
border-left: 12px solid transparent !important;
border-right: 12px solid transparent !important;
border-top: 12px solid #036EB8 !important;
}
.health_box .col-2 .speech-bubble::before,
.health_box .speech-bubble::before,
.speech-bubble::before {
content: '' !important;
position: relative !important;
display: block !important;
margin: -14px auto 0 auto !important;
width: 0 !important;
height: 0 !important;
border-left: 10px solid transparent !important;
border-right: 10px solid transparent !important;
border-top: 10px solid #fff !important;
z-index: 1 !important;
}
.health_box .col-2 .speech-bubble p,
.health_box .speech-bubble p,
.speech-bubble p {
font-size: 0.875rem !important;
font-weight: 600 !important;
color: #272727 !important;
text-align: center !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.school_student_comments_index .row {
margin: 2rem 0 !important;
}
.school_student_comments_index .col-3, .school_student_comments_index .col-2, .school_student_comments_index .col-4 {
padding: 0 8px !important;
}
.school_student_comments_index .student-comments-table-wrap {
width: 100%;
}
.school_student_comments_index .student-comments-table {
width: 100% !important;
}
.school_student_comments_index .student-comments-table th:first-child,
.school_student_comments_index .student-comments-table td:first-child {
white-space: nowrap;
}
.school_student_comments_index .student-comments-table p {
margin-bottom: 0;
}
.school_student_comments_index .student-comments-table .student-name-cell {
max-width: 160px;
width: 160px;
}
.school_student_comments_index .student-comments-table .student-comments-mood-cell {
white-space: nowrap;
vertical-align: middle;
}
.school_student_comments_index .student-comments-table th:last-child,
.school_student_comments_index .student-comments-table td:last-child {
text-align: center;
}
.school_student_comments_index .col-12.d-flex {
padding: 0 8px !important;
}
.school_student_comments_index .col-12.d-flex .btn {
padding: 8px 32px !important;
width: 160px;
background: #036EB8;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
text-align: center;
margin: 1rem auto !important;
display: block;
}
#afternoon-observation-settings h6 {
font-weight: 600;
}
#afternoon-observation-settings p {
font-size: 14px;
}
.coding-editor-container .editor-area,
.coding-editor-container .editor-area *,
.coding-editor-container .CodeMirror,
.coding-editor-container .CodeMirror *,
.coding-editor-container .code-pane,
.coding-editor-container .code-pane textarea {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
.coding-editor-container .editor-area {
margin: 0 0 0;
}
.coding_area {
margin: 2rem 0 0 !important;
}
.sidebar-icon--link {
text-decoration: none;
color: inherit;
}
.sidebar-icon--link:hover, .sidebar-icon--link:focus {
text-decoration: none;
color: inherit;
}
#school_student.school-student-portal,
.school-layout.school-student-portal {
min-height: calc(100vh - 120px);
background: #f1f5f9;
}
#school_student.school-student-portal > .row,
.school-layout.school-student-portal > .row {
min-height: calc(100vh - 120px);
}
#school_student.school-student-portal .col-2:first-child,
.school-layout.school-student-portal .col-2:first-child {
padding: 0 !important;
background: #fff;
border-right: 1px solid #e2e8f0;
}
#school_student.school-student-portal .col-7,
#school_student.school-student-portal .col-10,
.school-layout.school-student-portal .col-7,
.school-layout.school-student-portal .col-10 {
padding: 1.25rem 1.5rem 2rem;
min-width: 0;
}
#school_student.school-student-portal .col-3:last-child,
.school-layout.school-student-portal .col-3:last-child {
padding: 1.25rem 1rem 2rem;
border-left: 1px solid #e2e8f0;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.school-student-hero {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
padding: 1.35rem 1.5rem;
background: linear-gradient(125deg, #013d66 0%, #036eb8 45%, #0891d4 100%);
border-radius: 16px;
color: #fff;
box-shadow: 0 14px 36px rgba(1, 61, 102, 0.2);
overflow: hidden;
}
.school-student-hero__toolbar {
position: absolute;
top: 1rem;
right: 1.25rem;
z-index: 2;
flex-shrink: 0;
align-self: auto;
}
.school-student-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.school-student-hero__glow {
position: absolute;
top: -45%;
right: -8%;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 68%);
pointer-events: none;
}
.school-student-hero__content {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
}
.school-student-hero__eyebrow {
margin: 0 0 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
.school-student-hero__title {
margin: 0 0 0.35rem;
font-size: clamp(1.15rem, 2vw, 1.55rem);
font-weight: 800;
}
.school-student-hero__lead {
margin: 0;
font-size: 0.8125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.92);
}
.school-student-panel {
margin-bottom: 1.25rem;
padding: 1rem 1.15rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.school-student-panel__title {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.75rem;
font-size: 0.9375rem;
font-weight: 800;
color: #0f172a;
}
.school-student-panel__title i {
color: #036eb8;
}
.school-student-panel--safety {
border-color: #fecaca;
background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
}
.school-student-panel--safety .school-student-panel__title i {
color: #dc2626;
}
.school-student-panel--health {
border: 1px solid #036eb8;
}
.lesson-detail__nav {
margin-bottom: 0.75rem;
}
.lesson-detail__nav .lms-pwa-back--hero {
color: #036eb8;
}
.lesson-detail__nav .lms-pwa-back--hero:hover {
color: #025690;
}
.school-student-lesson-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 992px) {
.school-student-lesson-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.school-student-lesson-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.school-student-lesson-card {
display: block;
height: 100%;
padding: 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
color: inherit;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.school-student-lesson-card:hover {
transform: translateY(-2px);
border-color: #bfdbfe;
box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
color: inherit;
}
.school-student-lesson-card__head {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 0.5rem;
}
.school-student-lesson-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
border-radius: 12px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #036eb8;
flex-shrink: 0;
}
.school-student-lesson-card__title {
margin: 0;
font-size: 0.9375rem;
font-weight: 800;
line-height: 1.35;
color: #0f172a;
}
.school-student-lesson-card__desc {
margin: 0;
font-size: 0.78rem;
line-height: 1.55;
color: #64748b;
}
.school-student-portal .safety_box,
.school-student-portal .health_box {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.school-student-portal .health_box h5,
.school-student-portal .health-period__lead,
.school-student-portal .safety_box h5 {
font-size: 1.0625rem;
font-weight: 800;
line-height: 1.55;
margin-bottom: 1rem;
}
.school-student-portal .health-period {
margin-bottom: 0 !important;
}
.school-student-portal .chatbot-container {
border-radius: 14px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.school-student-portal .school-student-portal__aside {
padding: 0 0.75rem 1.5rem 0;
}
.school-chat-fab {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 1040;
}
.school-chat-fab__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
padding: 0;
border: 2px solid #fff;
border-radius: 999px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
box-shadow: 0 8px 24px rgba(3, 110, 184, 0.22);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.school-chat-fab__toggle:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(3, 110, 184, 0.28);
}
.school-chat-fab__avatar {
width: 2.25rem;
height: 2.25rem;
object-fit: contain;
}
.school-chat-fab.is-open .school-chat-fab__toggle {
opacity: 0;
pointer-events: none;
transform: scale(0.85);
}
.school-chat-panel {
position: absolute;
right: 0;
bottom: calc(100% + 0.65rem);
width: min(360px, calc(100vw - 2rem));
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
overflow: hidden;
}
.school-chat-panel[hidden] {
display: none !important;
}
.school-chat-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.65rem 0.85rem;
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border-bottom: 1px solid #e2e8f0;
}
.school-chat-panel__title {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
font-weight: 800;
color: #0f172a;
}
.school-chat-panel__avatar {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
}
.school-chat-panel__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: #64748b;
font-size: 1rem;
cursor: pointer;
}
.school-chat-panel__close:hover {
background: #f1f5f9;
color: #334155;
}
.school-chat-panel__body.chatbot-container {
height: 420px;
max-height: min(420px, calc(100vh - 8rem));
border-radius: 0;
box-shadow: none;
}
.school-chat-panel__body.chatbot-container .chatbot-messages {
padding: 0 0.75rem 0.75rem;
gap: 0.5rem;
}
.school-chat-panel__body.chatbot-container .message:first-child {
margin-top: 0;
}
.school-chat-bot-avatar {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
vertical-align: middle;
}
.school-chat-panel .bot-icon {
display: inline-flex;
align-items: center;
margin-right: 0.35rem;
line-height: 1;
}
.student-typing-hub {
display: flex;
flex-direction: column;
gap: 1rem;
}
.student-typing-hub__tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem;
margin-bottom: 0.85rem;
padding: 0.2rem;
border-radius: 10px;
background: #f1f5f9;
}
.student-typing-hub__tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.45rem 0.5rem;
border: none;
border-radius: 8px;
background: transparent;
color: #64748b;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.student-typing-hub__tab i {
font-size: 0.9rem;
}
.student-typing-hub__tab.is-active {
background: #fff;
color: #036eb8;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.student-typing-hub__tab:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.student-typing-hub.is-battle-locked .student-typing-hub__tab[data-typing-hub-mode="solo"] {
opacity: 0.45;
cursor: not-allowed;
}
.student-typing-hub[data-mode="battle"] .student-typing-widget__expand {
display: none;
}
.student-typing-hub .student-typing-widget__head {
margin-bottom: 0.35rem;
}
.student-typing-hub .student-typing-widget__lead {
margin-bottom: 0.75rem;
}
.student-typing-battle__lead {
margin: 0 0 0.85rem;
font-size: 0.75rem;
line-height: 1.5;
color: #64748b;
}
.student-typing-battle__label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.6875rem;
font-weight: 700;
color: #475569;
}
.student-typing-battle__join-row {
display: flex;
gap: 0.5rem;
}
.student-typing-battle__input {
flex: 1;
min-width: 0;
padding: 0.45rem 0.65rem;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 0.8125rem;
}
.student-typing-battle__input:focus {
outline: none;
border-color: #036eb8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.student-typing-battle__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.45rem 0.75rem;
border-radius: 8px;
border: none;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.student-typing-battle__btn--primary {
background: #036eb8;
color: #fff;
}
.student-typing-battle__btn--primary:hover {
background: #025a96;
}
.student-typing-battle__btn--primary.is-ready {
background: #059669;
}
.student-typing-battle__btn--ghost {
background: #f8fafc;
color: #475569;
border: 1px solid #e2e8f0;
}
.student-typing-battle__btn--ghost:hover {
background: #f1f5f9;
}
.student-typing-battle__hint {
margin: 0.5rem 0 0;
font-size: 0.6875rem;
color: #dc2626;
}
.student-typing-battle__room-code {
margin: 0 0 0.65rem;
font-size: 0.75rem;
color: #475569;
}
.student-typing-battle__room-code strong {
color: #036eb8;
font-size: 0.875rem;
}
.student-typing-battle__players {
list-style: none;
margin: 0 0 0.65rem;
padding: 0;
display: grid;
gap: 0.35rem;
}
.student-typing-battle__player {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.45rem 0.65rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
font-size: 0.75rem;
color: #334155;
}
.student-typing-battle__player.is-me {
border-color: #bfdbfe;
background: #eff6ff;
}
.student-typing-battle__player span span {
color: #64748b;
font-size: 0.6875rem;
}
.student-typing-battle__status {
margin: 0 0 0.75rem;
font-size: 0.75rem;
color: #64748b;
text-align: center;
}
.student-typing-battle__actions {
display: flex;
gap: 0.5rem;
}
.student-typing-battle__panel--countdown {
text-align: center;
padding: 1.25rem 0.5rem;
}
.student-typing-battle__countdown-label {
margin: 0 0 0.35rem;
font-size: 0.75rem;
color: #64748b;
}
.student-typing-battle__countdown-value {
margin: 0;
font-size: 2.5rem;
font-weight: 800;
color: #036eb8;
line-height: 1;
}
.student-typing-battle__turn-status {
margin: 0 0 0.65rem;
padding: 0.45rem 0.6rem;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 700;
text-align: center;
background: #f8fafc;
color: #64748b;
}
.student-typing-battle__turn-status.is-my-turn {
background: #eff6ff;
color: #036eb8;
border: 1px solid #bfdbfe;
}
.student-typing-battle__turn-status.is-waiting {
background: #fffbeb;
color: #b45309;
border: 1px solid #fde68a;
}
.student-typing-battle__role-badge {
display: inline-block;
margin-left: 0.2rem;
padding: 0.05rem 0.3rem;
border-radius: 4px;
background: #f1f5f9;
color: #64748b;
font-size: 0.5625rem;
font-weight: 700;
vertical-align: middle;
}
.student-typing-battle .student-typing-game__stat-value--turn {
color: #ea580c;
}
.student-typing-battle__versus {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.student-typing-battle__versus-me, .student-typing-battle__versus-opponent {
padding: 0.5rem 0.65rem;
border-radius: 8px;
font-size: 0.6875rem;
text-align: center;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.student-typing-battle__versus-me strong, .student-typing-battle__versus-opponent strong {
display: block;
margin-top: 0.15rem;
font-size: 1.125rem;
color: #0f172a;
}
.student-typing-battle__versus-me.is-active-turn, .student-typing-battle__versus-opponent.is-active-turn {
box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.35);
}
.student-typing-battle__versus-me {
background: #eff6ff;
border: 1px solid #bfdbfe;
}
.student-typing-battle__versus-opponent {
background: #fef3c7;
border: 1px solid #fde68a;
}
.student-typing-battle__versus-label {
color: #64748b;
font-weight: 700;
}
.student-typing-battle__play-body {
position: relative;
}
.student-typing-battle__wait-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.75rem;
border-radius: 8px;
background: rgba(255, 251, 235, 0.96);
border: 1px dashed #fbbf24;
text-align: center;
z-index: 2;
}
.student-typing-battle__wait-title {
margin: 0;
font-size: 0.875rem;
font-weight: 800;
color: #b45309;
}
.student-typing-battle__wait-hint {
margin: 0;
font-size: 0.6875rem;
color: #92400e;
}
.student-typing-battle .student-typing-game--battle.is-my-turn .student-typing-game__input {
border-color: #036eb8;
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.student-typing-battle .student-typing-game--battle.is-waiting-turn .student-typing-game__input {
visibility: hidden;
pointer-events: none;
}
.student-typing-battle__hidden-word {
display: inline-block;
letter-spacing: 0.35em;
font-size: 1.25rem;
font-weight: 800;
color: #94a3b8;
}
.student-typing-battle__player-turn-badge {
display: inline-block;
margin-left: 0.25rem;
padding: 0.05rem 0.35rem;
border-radius: 999px;
background: #036eb8;
color: #fff;
font-size: 0.5625rem;
font-weight: 800;
}
.student-typing-battle__result-title {
margin: 0 0 0.75rem;
font-size: 1.125rem;
font-weight: 800;
text-align: center;
color: #0f172a;
}
.student-typing-battle__result-list {
list-style: none;
margin: 0 0 0.85rem;
padding: 0;
display: grid;
gap: 0.4rem;
}
.student-typing-battle__result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.65rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 0.75rem;
color: #334155;
}
.student-typing-battle__result-row.is-me {
border-color: #bfdbfe;
background: #eff6ff;
}
.student-typing-battle__winner-badge {
display: inline-block;
margin-left: 0.25rem;
padding: 0.05rem 0.35rem;
border-radius: 999px;
background: #036eb8;
color: #fff;
font-size: 0.5625rem;
font-weight: 800;
vertical-align: middle;
}
.page-school-student-lessons {
padding-bottom: 2.5rem;
}
.school-student-hero--lessons .school-student-hero__inner {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.school-student-hero--lessons .school-student-hero__title {
display: flex;
align-items: center;
gap: 0.45rem;
}
.school-student-hero--lessons .school-student-hero__title i {
font-size: 1.2rem;
opacity: 0.95;
}
.school-student-hero--lessons .school-student-hero__count {
flex-shrink: 0;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
.school-student-lessons-kpi {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1.25rem;
}
@media (max-width: 768px) {
.school-student-lessons-kpi {
grid-template-columns: 1fr;
}
}
.school-student-lessons-kpi__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
padding: 0.85rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.school-student-lessons-kpi__value {
font-size: 1.35rem;
font-weight: 800;
line-height: 1;
color: #036eb8;
}
.school-student-lessons-kpi__label {
font-size: 0.6875rem;
font-weight: 700;
color: #64748b;
}
.school-student-lessons-section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.school-student-lessons-section__head .school-student-panel__title {
margin: 0;
}
.school-student-lessons-section__count {
flex-shrink: 0;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: #eff6ff;
color: #036eb8;
font-size: 0.6875rem;
font-weight: 700;
}
.school-student-lesson-grid--wide {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.school-student-lesson-card-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.school-student-lesson-card-link:hover .school-student-lesson-card {
transform: translateY(-2px);
border-color: #bfdbfe;
box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
}
.school-student-lesson-card--list {
display: flex;
flex-direction: column;
height: 100%;
}
.school-student-lesson-card--list .school-student-lesson-card__head-text {
min-width: 0;
}
.school-student-lesson-card--list .school-student-lesson-card__course {
margin: 0.15rem 0 0;
font-size: 0.6875rem;
font-weight: 600;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.school-student-lesson-card--list .school-student-lesson-card__desc {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 0.85rem;
}
.school-student-lesson-card--list .school-student-lesson-card__icon--coding {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #036eb8;
}
.school-student-lesson-card--list .school-student-lesson-card__icon--scratch {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
color: #ea580c;
}
.school-student-lesson-card--list .school-student-lesson-card__icon--gas {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
}
.school-student-lesson-card--list .school-student-lesson-card__icon--minecraft {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
color: #16a34a;
}
.school-student-lesson-card--list .school-student-lesson-card__progress-label {
margin: 0 0 0.45rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #94a3b8;
text-transform: uppercase;
}
.school-student-lesson-card--list .school-student-lesson-card__action {
margin-top: auto;
padding-top: 0.85rem;
}
.school-student-lesson-card--list .school-student-lesson-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: 10px;
background: #036eb8;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
}
.school-student-lesson-card--list .school-student-lesson-card__badge {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 700;
}
.school-student-lesson-card--list .school-student-lesson-card__badge--done {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.school-student-lesson-card--list .school-student-lesson-card__badge--progress {
background: #fffbeb;
color: #b45309;
border: 1px solid #fde68a;
}
.school-student-step-track {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.school-student-step-track__item {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.school-student-step-track__item:not(:last-child)::after {
content: "";
position: absolute;
top: 0.85rem;
left: calc(50% + 0.85rem);
width: calc(100% - 1.7rem);
height: 2px;
background: #e2e8f0;
z-index: 0;
}
.school-student-step-track__item--completed:not(:last-child)::after {
background: #93c5fd;
}
.school-student-step-track__dot {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
border: 2px solid #cbd5e1;
background: #fff;
color: #fff;
font-size: 0.75rem;
}
.school-student-step-track__item--completed .school-student-step-track__dot {
border-color: #036eb8;
background: #036eb8;
}
.school-student-step-track__item--incomplete .school-student-step-track__dot {
border-color: #bfdbfe;
background: #eff6ff;
}
.school-student-step-track__item--disabled .school-student-step-track__dot {
border-color: #e2e8f0;
background: #f8fafc;
}
.school-student-step-track__label {
font-size: 0.625rem;
font-weight: 700;
color: #64748b;
text-align: center;
}
.school-student-portal-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 3rem 1.5rem;
border: 1px dashed #cbd5e1;
border-radius: 14px;
background: #fff;
text-align: center;
}
.school-student-portal-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 999px;
background: #eff6ff;
color: #036eb8;
font-size: 1.35rem;
}
.school-student-portal-empty__title {
margin: 0;
font-size: 1rem;
font-weight: 800;
color: #0f172a;
}
.school-student-portal-empty__text {
margin: 0;
max-width: 36ch;
font-size: 0.8125rem;
line-height: 1.6;
color: #64748b;
}
.school-student-portal-empty__btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
padding: 0.5rem 1rem;
border-radius: 10px;
background: #036eb8;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
}
.school-student-portal-empty__btn:hover {
background: #025a96;
color: #fff;
}
.page-school-student-lesson-show {
padding: 0 1.5rem 2.5rem;
background: radial-gradient(circle at 10% 0%, rgba(3, 110, 184, 0.07) 0%, transparent 42%), radial-gradient(circle at 90% 20%, rgba(8, 145, 212, 0.06) 0%, transparent 38%);
}
#school_student.school-student-portal .school-student-lesson-hero__mascot-img {
width: 100% !important;
max-width: 5.5rem;
height: auto !important;
margin: 0 !important;
display: block;
}
.school-student-lesson-hero {
position: relative;
flex-wrap: nowrap !important;
align-items: stretch !important;
min-height: 11rem;
margin-bottom: 1.35rem;
overflow: hidden;
background: linear-gradient(125deg, #013d66 0%, #036eb8 45%, #0891d4 100%) !important;
box-shadow: 0 14px 36px rgba(3, 110, 184, 0.22);
}
.school-student-lesson-hero__deco {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.school-student-lesson-hero__deco-star {
position: absolute;
color: rgba(255, 255, 255, 0.7);
font-size: 1.1rem;
animation: ss-lesson-sparkle 2.5s ease-in-out infinite;
}
.school-student-lesson-hero__deco-star--1 {
top: 14%;
left: 8%;
}
.school-student-lesson-hero__deco-star--2 {
top: 22%;
right: 22%;
font-size: 0.85rem;
animation-delay: 0.7s;
}
.school-student-lesson-hero__deco-star--3 {
bottom: 18%;
left: 42%;
font-size: 0.95rem;
animation-delay: 1.4s;
}
.school-student-lesson-hero__deco-bubble {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
}
.school-student-lesson-hero__deco-bubble--1 {
width: 80px;
height: 80px;
top: -20px;
right: 18%;
}
.school-student-lesson-hero__deco-bubble--2 {
width: 48px;
height: 48px;
bottom: 10px;
left: 55%;
}
.school-student-lesson-hero__content {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
padding-right: 6rem;
}
.school-student-lesson-hero__title-row {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.65rem;
}
.school-student-lesson-hero__type-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.22);
border: 1px solid rgba(255, 255, 255, 0.35);
font-size: 1.35rem;
flex-shrink: 0;
}
.school-student-lesson-hero__course {
margin: 0 0 0.15rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
opacity: 0.9;
}
.school-student-lesson-hero__title {
margin: 0 !important;
font-size: clamp(1.25rem, 2.5vw, 1.65rem) !important;
line-height: 1.3;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.school-student-lesson-hero__goal {
margin-top: 0.5rem;
padding: 0.7rem 0.85rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.28);
max-width: 42rem;
}
.school-student-lesson-hero__goal-label {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.3rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
opacity: 0.95;
}
.school-student-lesson-hero__goal-label i {
font-size: 1rem;
}
.school-student-lesson-hero__goal-text {
font-size: 0.84rem;
line-height: 1.65;
opacity: 0.96;
}
.school-student-lesson-hero__goal-text div, .school-student-lesson-hero__goal-text p {
margin: 0;
}
.school-student-lesson-hero__mascot {
position: absolute;
right: 1.25rem;
bottom: 0;
z-index: 1;
width: 5.5rem;
pointer-events: none;
animation: ss-lesson-mascot-bounce 2.6s ease-in-out infinite;
}
@media (max-width: 768px) {
.school-student-lesson-hero__mascot {
right: 0.75rem;
width: 4.25rem;
opacity: 0.85;
}
}
.school-student-lesson-hero__mascot-img {
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}
.school-student-lesson-steps-section {
border: 2px solid #bfdbfe;
border-radius: 18px;
background: linear-gradient(180deg, #fff 0%, #f0f9ff 100%);
box-shadow: 0 8px 24px rgba(3, 110, 184, 0.1);
}
.school-student-lesson-steps-section .school-student-panel__title i {
color: #036eb8;
}
.school-student-lesson-steps-section__cheer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 1.35rem 0 0;
padding: 0.75rem 1rem;
border-radius: 14px;
background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 50%, #eff6ff 100%);
border: 2px dashed #93c5fd;
color: #1e40af;
font-size: 0.9375rem;
font-weight: 800;
}
.school-student-lesson-steps-section__cheer-emoji {
font-size: 1.2rem;
animation: ss-lesson-sparkle 2s ease-in-out infinite;
}
.school-student-lesson-steps-section--empty {
text-align: center;
}
.school-student-lesson-steps-section__empty {
margin: 0;
color: #64748b;
font-size: 0.9rem;
}
.school-student-lesson-step-track {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0 0 1.35rem;
padding: 0.65rem 1rem;
list-style: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
}
.school-student-lesson-step-track--show {
max-width: 32rem;
margin-left: auto;
margin-right: auto;
}
.school-student-lesson-step-track__item {
display: flex;
align-items: center;
flex: 1;
}
.school-student-lesson-step-track__item:not(:last-child)::after {
content: "";
flex: 1;
height: 4px;
margin: 0 0.2rem;
border-radius: 999px;
background: #e2e8f0;
}
.school-student-lesson-step-track__item--done:not(:last-child)::after {
background: linear-gradient(90deg, #036eb8, #0891d4);
}
.school-student-lesson-step-track__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: #fff;
border: 3px solid #93c5fd;
color: #036eb8;
font-size: 0.8rem;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(3, 110, 184, 0.15);
}
.school-student-lesson-step-track__item--done .school-student-lesson-step-track__dot {
background: linear-gradient(135deg, #036eb8, #0891d4);
border-color: #036eb8;
color: #fff;
}
.school-student-step-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.1rem;
}
.school-student-step-grid--solo {
grid-template-columns: minmax(0, 1fr);
max-width: 36rem;
margin: 0 auto;
}
.school-student-step-card-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.school-student-step-card-link--featured .school-student-step-card {
padding: 1.35rem 1.25rem 1.15rem;
}
.school-student-step-card-link:hover .school-student-step-card:not(.school-student-step-card--locked) {
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(3, 110, 184, 0.18);
}
.school-student-step-card-link:hover .school-student-step-card__cta--start {
animation: ss-lesson-cta-pulse 0.8s ease-in-out infinite;
}
.school-student-step-card-link--disabled {
cursor: not-allowed;
pointer-events: none;
}
.school-student-step-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 1.25rem 1.1rem 1rem;
border: 3px solid #bfdbfe;
border-radius: 20px;
background: linear-gradient(165deg, #fff 0%, #f8fafc 55%, #eff6ff 100%);
box-shadow: 0 8px 20px rgba(3, 110, 184, 0.1);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.school-student-step-card--featured {
border-width: 4px;
border-color: #036eb8;
box-shadow: 0 12px 32px rgba(3, 110, 184, 0.18);
}
.school-student-step-card--featured .school-student-step-card__icon-wrap {
width: 3.5rem;
height: 3.5rem;
font-size: 1.65rem;
}
.school-student-step-card--featured .school-student-step-card__title {
font-size: 1.2rem;
}
.school-student-step-card--featured .school-student-step-card__cta {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
}
.school-student-step-card__ribbon {
position: absolute;
top: 0.85rem;
right: -2rem;
width: 8rem;
padding: 0.2rem 0;
background: linear-gradient(90deg, #036eb8, #0891d4);
color: #fff;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
text-align: center;
transform: rotate(32deg);
box-shadow: 0 2px 8px rgba(3, 110, 184, 0.3);
}
.school-student-step-card__body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
padding-top: 0.35rem;
}
.school-student-step-card__icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 0.65rem;
border-radius: 50%;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #036eb8;
font-size: 1.45rem;
box-shadow: 0 4px 14px rgba(3, 110, 184, 0.2);
}
.school-student-step-card__icon-wrap--coding {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #036eb8;
box-shadow: 0 4px 14px rgba(3, 110, 184, 0.2);
}
.school-student-step-card__title {
margin: 0 0 0.4rem;
font-size: 1.05rem;
font-weight: 800;
line-height: 1.35;
color: #0f172a;
}
.school-student-step-card__desc {
margin: 0;
font-size: 0.8125rem;
line-height: 1.55;
color: #64748b;
max-width: 28ch;
}
.school-student-step-card__footer {
margin-top: 1rem;
width: 100%;
}
.school-student-step-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 0.65rem 0.85rem;
border-radius: 12px;
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.school-student-step-card__cta--start {
background: linear-gradient(135deg, #036eb8 0%, #025a96 100%);
color: #fff;
box-shadow: 0 6px 16px rgba(3, 110, 184, 0.35);
}
.school-student-step-card__cta--progress {
background: linear-gradient(135deg, #38bdf8 0%, #036eb8 100%);
color: #fff;
box-shadow: 0 6px 16px rgba(3, 110, 184, 0.28);
}
.school-student-step-card__cta--done {
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.school-student-step-card__cta--locked {
background: #f1f5f9;
color: #94a3b8;
border: 2px solid #e2e8f0;
}
.school-student-step-card--locked {
opacity: 0.7;
filter: grayscale(0.15);
}
@keyframes ss-lesson-mascot-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes ss-lesson-sparkle {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.12);
}
}
@keyframes ss-lesson-cta-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.03);
}
}
body.guest-portal {
background: #eef2f7;
min-height: 100vh;
min-height: 100dvh;
color: #1e293b;
-webkit-font-smoothing: antialiased;
}
.guest-portal__shell {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0.75rem;
padding-top: max(0.75rem, env(safe-area-inset-top));
padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
.guest-portal__shell {
padding: 1.25rem 1rem 2rem;
}
}
body.guest-portal--messages .guest-portal__shell {
max-width: 920px;
padding-inline: 0.5rem;
}
@media (min-width: 768px) {
body.guest-portal--messages .guest-portal__shell {
padding-inline: 1rem;
}
}
body.guest-portal--messages .guest-portal__header {
margin-bottom: 0.5rem;
border-radius: 0 0 16px 16px;
}
@media (min-width: 768px) {
body.guest-portal--messages .guest-portal__header {
margin-bottom: 0.75rem;
border-radius: 16px;
}
}
.guest-portal__shell:has(.guest-portal--messages--chat-open) .guest-portal__tabs {
display: none;
}
.guest-portal__shell:has(.guest-portal--messages--chat-open) .guest-portal__header {
margin-bottom: 0.35rem;
padding: 0.55rem 0.75rem;
border-radius: 12px;
}
.guest-portal__shell:has(.guest-portal--messages--chat-open) .guest-portal__brand > i {
width: 2.1rem;
height: 2.1rem;
font-size: 1rem;
}
.guest-portal__shell:has(.guest-portal--messages--chat-open) .guest-portal__brand-label {
font-size: 0.875rem;
}
.guest-portal__shell:has(.guest-portal--messages--chat-open) .guest-portal__user-name {
display: none;
}
.guest-portal__shell:has(.guest-portal--messages--chat-open) .guest-portal__nav-btn {
min-height: 2.35rem;
padding-inline: 0.6rem;
font-size: 0.75rem;
}
.guest-portal__header {
position: sticky;
top: 0;
z-index: 100;
margin-bottom: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(8px);
}
@media (min-width: 768px) {
.guest-portal__header {
margin-bottom: 1rem;
padding: 0.875rem 1.125rem;
}
}
.guest-portal__header-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.guest-portal__brand {
display: flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
text-decoration: none;
color: inherit;
}
.guest-portal__brand:hover {
color: inherit;
text-decoration: none;
}
.guest-portal__brand > i {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
color: #fff;
font-size: 1.25rem;
}
.guest-portal__brand-text {
min-width: 0;
}
.guest-portal__brand-label {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: #036eb8;
line-height: 1.2;
}
.guest-portal__user-name {
display: block;
margin-top: 0.1rem;
font-size: 0.8rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.guest-portal__nav {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.guest-portal__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 2.75rem;
padding: 0.45rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #fff;
color: #1e293b;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.guest-portal__nav-btn i {
font-size: 1.1rem;
}
.guest-portal__nav-btn:hover {
background: #e8f4fc;
border-color: rgba(3, 110, 184, 0.25);
color: #025a96;
}
.guest-portal__nav-btn--active {
background: #e8f4fc;
border-color: rgba(3, 110, 184, 0.35);
color: #025a96;
}
@media (max-width: 479px) {
.guest-portal__nav-btn {
min-width: 2.75rem;
padding-inline: 0.65rem;
}
.guest-portal__nav-btn span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
.guest-portal__nav-form {
margin: 0;
display: inline-flex;
}
.guest-portal__tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(226, 232, 240, 0.9);
}
.guest-portal__tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 2.35rem;
padding: 0.4rem 0.65rem;
border-radius: 12px;
background: transparent;
color: #64748b;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.guest-portal__tab i {
font-size: 1.05rem;
}
.guest-portal__tab:hover {
background: #e8f4fc;
color: #025a96;
text-decoration: none;
}
.guest-portal__tab--active {
background: #e8f4fc;
color: #025a96;
box-shadow: inset 0 0 0 1px rgba(3, 110, 184, 0.18);
}
@media (max-width: 479px) {
.guest-portal__nav-btn--logout {
min-width: 2.75rem;
padding-inline: 0.65rem;
}
.guest-portal__nav-btn--logout span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
.guest-portal__flash {
margin-bottom: 0.75rem;
}
.guest-portal__flash .alert {
margin-bottom: 0;
border-radius: 12px;
border: none;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
color: #1e293b !important;
}
.guest-portal__flash .alert-success {
background: #ecfdf5 !important;
color: #065f46 !important;
}
.guest-portal__flash .alert-danger {
background: #fef2f2 !important;
color: #991b1b !important;
}
.guest-portal__auth {
max-width: 32rem;
margin-inline: auto;
padding-top: 1rem;
}
@media (min-width: 768px) {
.guest-portal__auth {
padding-top: 2rem;
}
}
.guest-portal__auth-header {
margin-bottom: 1.25rem;
text-align: center;
}
.guest-portal__auth-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.guest-portal__auth-icon {
width: 3.25rem;
height: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
color: #fff !important;
box-shadow: 0 8px 20px rgba(3, 110, 184, 0.22);
}
.guest-portal__auth-icon i {
font-size: 1.55rem;
color: inherit !important;
}
.guest-portal__auth-brand-text {
min-width: 0;
}
.guest-portal__auth-eyebrow {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #036eb8 !important;
}
.guest-portal__auth-title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
color: #1e293b !important;
line-height: 1.3;
}
.guest-portal__auth-lead {
margin: 0.85rem 0 0;
font-size: 0.9375rem;
line-height: 1.65;
color: #64748b !important;
}
.guest-portal__panel {
background: #fff;
border: 1px solid rgba(226, 232, 240, 0.85);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.guest-portal__panel-body {
padding: 1.25rem;
}
@media (min-width: 768px) {
.guest-portal__panel-body {
padding: 1.5rem;
}
}
.guest-portal__panel--narrow {
max-width: 32rem;
margin-inline: auto;
}
.guest-portal__panel--centered {
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.guest-portal__panel--centered {
margin-top: 2.5rem;
}
}
.guest-portal__title {
margin: 0 0 0.35rem;
font-size: 1.125rem;
font-weight: 700;
color: #1e293b !important;
}
.guest-portal__lead {
margin: 0 0 1.25rem;
font-size: 0.9375rem;
color: #64748b !important;
line-height: 1.6;
}
.guest-portal__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 18rem;
padding: 2.5rem 1.25rem;
text-align: center;
}
@media (min-width: 768px) {
.guest-portal__empty {
min-height: 22rem;
padding: 3rem 2rem;
}
}
.guest-portal__empty-icon {
width: 4.5rem;
height: 4.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
border-radius: 50%;
background: #e8f4fc;
color: #036eb8;
}
.guest-portal__empty-icon i {
font-size: 2rem;
}
.guest-portal__empty-title {
margin: 0 0 0.5rem;
font-size: 1.05rem;
font-weight: 700;
color: #1e293b;
}
.guest-portal__empty-desc {
margin: 0;
max-width: 18rem;
font-size: 0.9375rem;
line-height: 1.65;
color: #64748b;
}
.guest-portal__settings .guest-portal__lead {
margin-bottom: 1.25rem;
}
.guest-portal__settings-form .form-check {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0 0 1.5rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fafbfc;
}
.guest-portal__settings-form .form-check-input {
width: 1.25rem;
height: 1.25rem;
margin-top: 0.1rem;
flex-shrink: 0;
}
.guest-portal__settings-form .form-check-label {
font-size: 0.9375rem;
line-height: 1.55;
color: #1e293b;
cursor: pointer;
}
.guest-portal__actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
@media (min-width: 480px) {
.guest-portal__actions {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
}
.guest-portal__actions .btn {
min-height: 2.75rem;
border-radius: 999px;
font-weight: 600;
padding-inline: 1.25rem;
}
.guest-portal__actions .btn-primary {
background: #036eb8;
border-color: #036eb8;
}
.guest-portal__actions .btn-primary:hover {
background: #025a96;
border-color: #025a96;
}
@media (max-width: 479px) {
.guest-portal__actions .btn {
width: 100%;
}
}
.guest-portal__form .form-label {
font-size: 0.875rem;
font-weight: 600;
color: #1e293b !important;
}
.guest-portal__form .form-control {
min-height: 2.75rem;
border-radius: 12px;
border-color: #e2e8f0;
color: #1e293b !important;
background: #fff !important;
}
.guest-portal__form .form-control:focus {
border-color: rgba(3, 110, 184, 0.45);
box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.12);
color: #1e293b !important;
}
.guest-portal__form .form-control:disabled {
color: #64748b !important;
background: #f8fafc !important;
}
.guest-portal__form .btn-primary {
min-height: 2.75rem;
border-radius: 999px;
background: #036eb8;
border-color: #036eb8;
font-weight: 600;
}
.guest-portal__form .btn-primary:hover {
background: #025a96;
border-color: #025a96;
}
.guest-portal__auth-footnote {
font-size: 0.8125rem;
color: #64748b !important;
text-align: center;
line-height: 1.55;
}
.guest-portal__auth-footnote a {
color: #036eb8 !important;
font-weight: 600;
text-decoration: none;
}
.guest-portal__auth-footnote a:hover {
color: #025a96 !important;
text-decoration: underline;
}
.guest-portal__messages {
min-height: calc(100dvh - 5.5rem);
}
.guest-messenger {
display: flex;
flex-direction: column;
min-height: calc(100dvh - 5.5rem);
border: 1px solid #e2e8f0;
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}
@media (min-width: 768px) {
.guest-messenger {
flex-direction: row;
min-height: calc(100dvh - 7rem);
max-height: calc(100dvh - 7rem);
}
}
.guest-thread-list {
display: flex;
flex-direction: column;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
@media (min-width: 768px) {
.guest-thread-list {
width: 18.5rem;
max-width: 38%;
flex-shrink: 0;
border-bottom: none;
border-right: 1px solid #e2e8f0;
}
}
.guest-thread-list__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid #e2e8f0;
background: #fff;
}
.guest-thread-list__title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #1e293b;
}
.guest-thread-list__unread {
display: inline-flex;
align-items: center;
min-height: 1.5rem;
padding: 0 0.55rem;
border-radius: 999px;
background: #fee2e2;
color: #b91c1c;
font-size: 0.72rem;
font-weight: 700;
}
.guest-thread-list__items {
list-style: none;
margin: 0;
padding: 0.35rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
.guest-thread-list__items {
flex: 1;
min-height: 0;
}
}
.guest-thread-list__item {
margin-bottom: 0.35rem;
}
.guest-thread-list__item:last-child {
margin-bottom: 0;
}
.guest-thread-list__empty {
padding: 2rem 1rem;
text-align: center;
color: #64748b;
font-size: 0.875rem;
}
.guest-thread-card {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.85rem 0.75rem;
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.guest-thread-card:hover {
background: #fff;
color: inherit;
box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
}
.guest-thread-card--active {
background: #fff;
box-shadow: inset 3px 0 0 #036eb8, 0 1px 8px rgba(3, 110, 184, 0.08);
}
.guest-thread-card--unread {
background: rgba(232, 244, 252, 0.75);
}
.guest-thread-card__avatar {
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
color: #fff;
font-size: 1.15rem;
}
.guest-thread-card__body {
min-width: 0;
flex: 1;
}
.guest-thread-card__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.15rem;
}
.guest-thread-card__name {
font-size: 0.9375rem;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.guest-thread-card__time {
flex-shrink: 0;
font-size: 0.68rem;
color: #64748b;
}
.guest-thread-card__preview {
display: block;
font-size: 0.8125rem;
line-height: 1.45;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.guest-thread-card__meta {
display: block;
margin-top: 0.2rem;
font-size: 0.68rem;
color: #94a3b8;
}
.guest-thread-card__badge {
flex-shrink: 0;
min-width: 1.35rem;
height: 1.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.35rem;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 0.68rem;
font-weight: 700;
}
.guest-portal__messages {
min-height: calc(100dvh - 6rem);
}
.guest-portal__messages .guest-messenger {
display: flex;
flex: 1;
min-height: 0;
}
.guest-portal__messages .pm-split__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: #fff;
}
.guest-portal__messages .pm-chat--split {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.guest-portal__messages .pm-chat__header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0.85rem;
border-bottom: 1px solid #e2e8f0;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
flex-shrink: 0;
}
@media (max-width: 767px) {
.guest-portal__messages .pm-chat__header:has(.guest-portal__back-link) .pm-chat__avatar--room {
display: none;
}
}
.guest-portal__messages .pm-chat__avatar--room {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
color: #fff;
font-size: 0.95rem;
}
.guest-portal__messages .pm-chat__info {
min-width: 0;
flex: 1;
}
.guest-portal__messages .pm-chat__name {
margin: 0;
font-size: 0.9375rem;
font-weight: 700;
color: #1e293b !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.guest-portal__messages .pm-chat__status {
margin: 0.1rem 0 0;
font-size: 0.72rem;
color: #64748b !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
}
.guest-portal__messages .pm-chat__thread {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 1rem;
background: #eef2f7;
-webkit-overflow-scrolling: touch;
}
.guest-portal__messages .pm-thread-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 12rem;
text-align: center;
color: #64748b;
}
.guest-portal__messages .pm-thread-empty i {
font-size: 2rem;
color: #cbd5e1;
margin-bottom: 0.5rem;
}
.guest-portal__messages .pm-thread-empty p {
margin: 0;
}
.guest-portal__messages .pm-bubble {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
max-width: 88%;
}
.guest-portal__messages .pm-bubble--incoming {
align-items: flex-start;
margin-right: auto;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__inner {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 4px 16px 16px 16px;
color: #1e293b;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__role {
color: #036eb8 !important;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__text {
color: #1e293b;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__text p {
color: inherit;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__text a {
color: #036eb8 !important;
text-decoration: none;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__text a:hover {
color: #025a96 !important;
text-decoration: none;
}
.guest-portal__messages .pm-bubble--outgoing {
align-items: flex-end;
margin-left: auto;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__inner {
background: #036eb8;
border-radius: 16px 4px 16px 16px;
color: #fff;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__role {
color: #64748b !important;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__text {
color: #fff;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__text p {
color: inherit;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__text a {
color: #fff !important;
text-decoration: none;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__text a:hover {
color: rgba(255, 255, 255, 0.88) !important;
text-decoration: none;
}
.guest-portal__messages .pm-bubble__inner {
padding: 0.7rem 1rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.guest-portal__messages .pm-bubble__role {
display: block;
margin-bottom: 0.25rem;
font-size: 0.68rem;
font-weight: 600;
line-height: 1.35;
}
.guest-portal__messages .pm-bubble__text {
font-size: 0.9375rem;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.guest-portal__messages .pm-bubble__text p {
margin: 0 0 0.35rem;
}
.guest-portal__messages .pm-bubble__text p:last-child {
margin-bottom: 0;
}
.guest-portal__messages .pm-bubble__time {
margin-top: 0.35rem;
font-size: 0.68rem;
color: #64748b;
}
.guest-portal__messages .pm-bubble__meta {
justify-content: flex-end;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__read-receipt {
color: #64748b;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__read-receipt-toggle:hover {
color: #036eb8;
}
.guest-portal__messages .pm-bubble__reply-quote {
margin-bottom: 0.5rem;
padding: 0.45rem 0.65rem;
background: rgba(3, 110, 184, 0.08);
border-radius: 0.35rem;
font-size: 0.78rem;
}
.guest-portal__messages .pm-bubble__reply-author {
display: block;
font-weight: 700;
color: #334155;
margin-bottom: 0.1rem;
}
.guest-portal__messages .pm-bubble__reply-text {
display: block;
color: #64748b;
word-break: break-word;
}
.guest-portal__messages .pm-bubble__reply-label {
display: block;
font-size: 0.68rem;
color: #64748b;
font-weight: 700;
margin-bottom: 0.15rem;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__reply-quote {
border-left-color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.14);
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__reply-author,
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__reply-text,
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__reply-label {
color: rgba(255, 255, 255, 0.92);
}
.guest-portal__messages .pm-bubble__meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.35rem;
}
.guest-portal__messages .pm-bubble__read-receipt {
display: inline-flex;
align-items: center;
gap: 0.2rem;
color: #64748b;
font-size: 0.7rem;
font-weight: 600;
line-height: 1.2;
}
.guest-portal__messages .pm-bubble__read-receipt-label,
.guest-portal__messages .pm-bubble__read-receipt-count {
display: inline-block;
}
.guest-portal__messages .pm-bubble__read-receipt-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
line-height: 1;
}
.guest-portal__messages .pm-bubble__read-receipt-toggle:hover {
color: #036eb8;
}
.guest-portal__messages .pm-bubble__read-receipt-caret {
font-size: 0.55rem;
line-height: 1;
opacity: 0.85;
transform: translateY(0.5px);
}
.guest-portal__messages .pm-bubble__reply-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #64748b;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
}
.guest-portal__messages .pm-bubble__reply-btn:hover {
color: #036eb8;
}
.guest-portal__messages .pm-bubble__text a {
word-break: break-all;
text-decoration: none;
}
.guest-portal__messages .pm-bubble__text a:hover {
text-decoration: none;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__text a {
color: #036eb8 !important;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__text a:hover {
color: #025a96 !important;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__text a {
color: #fff !important;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__text a:hover {
color: rgba(255, 255, 255, 0.88) !important;
}
.guest-portal__messages .pm-message-compose__reply-preview {
margin-bottom: 0.5rem;
padding: 0.5rem 0.65rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
}
.guest-portal__messages .pm-message-compose__reply-preview-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
}
.guest-portal__messages .pm-message-compose__reply-label {
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
}
.guest-portal__messages .pm-message-compose__reply-cancel {
margin-left: auto;
border: 0;
background: transparent;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
color: #64748b;
}
.guest-portal__messages .pm-bubble__attachment-card {
margin-top: 0.35rem;
max-width: 280px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.guest-portal__messages .pm-bubble__attachment-card--image {
padding: 0.4rem;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__attachment-card {
border-radius: 4px 14px 14px 14px;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__attachment-card {
border-radius: 14px 4px 14px 14px;
}
.guest-portal__messages .pm-bubble__inner + .pm-bubble__attachment-card {
margin-top: 0.45rem;
}
.guest-portal__messages .pm-bubble--attachment-only .pm-bubble__attachment-card {
margin-top: 0;
}
.guest-portal__messages .pm-bubble__attachment-image-link {
display: block;
line-height: 0;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
width: 100%;
text-align: left;
}
.guest-portal__messages .pm-bubble__attachment-open.pm-bubble__attachment-file--pdf {
width: 100%;
text-align: left;
cursor: pointer;
}
.guest-portal__messages .pm-bubble__attachment-open.pm-bubble__attachment-file--pdf:hover {
background: #f8fafc;
}
.guest-portal__messages .pm-bubble__attachment-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 8px;
display: block;
background: #f8fafc;
}
.guest-portal__messages .pm-bubble__attachment-caption {
margin-top: 0.35rem;
padding: 0 0.15rem 0.1rem;
font-size: 0.78rem;
}
.guest-portal__messages .pm-bubble__attachment-file {
color: #036eb8;
text-decoration: none;
word-break: break-all;
border: 0;
background: transparent;
}
.guest-portal__messages .pm-bubble__attachment-file--pdf {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 0.85rem;
color: #1e293b;
}
.guest-portal__messages .pm-bubble__attachment-file--pdf:hover {
background: #f8fafc;
color: #1e293b;
text-decoration: none;
}
.guest-portal__messages .pm-bubble__attachment-file-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: #fef2f2;
color: #dc2626;
font-size: 1.35rem;
}
.guest-portal__messages .pm-bubble__attachment-file-body {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.guest-portal__messages .pm-bubble__attachment-file-label {
font-size: 0.68rem;
font-weight: 700;
color: #64748b;
letter-spacing: 0.03em;
}
.guest-portal__messages .pm-bubble__attachment-file-name {
font-size: 0.82rem;
font-weight: 600;
line-height: 1.35;
}
.guest-portal__messages .pm-bubble__attachment-expired,
.guest-portal__messages .pm-bubble__attachment-unavailable {
padding: 0.65rem 0.75rem;
font-size: 0.78rem;
color: #64748b;
}
.guest-portal__messages .pm-message-compose {
flex-shrink: 0;
padding: 0.65rem 0.85rem;
padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid #e2e8f0;
}
.guest-portal__messages .pm-message-compose--guest .pm-message-compose__field {
display: flex;
align-items: flex-end;
gap: 0.45rem;
width: 100%;
}
.guest-portal__messages .pm-message-compose__input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
min-height: 2.75rem;
max-height: 8rem;
padding: 0.6rem 0.85rem;
border: 1px solid #e2e8f0;
border-radius: 14px;
font-size: 1rem;
line-height: 1.45;
color: #1e293b !important;
background: #fff !important;
resize: none;
}
.guest-portal__messages .pm-message-compose__input:focus {
outline: none;
border-color: rgba(3, 110, 184, 0.55);
box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.guest-portal__messages .pm-message-compose__input::placeholder {
color: #94a3b8;
}
.guest-portal__messages .pm-message-compose__attach {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.12rem;
border-radius: 50%;
cursor: pointer;
color: #64748b;
transition: background 0.15s ease, color 0.15s ease;
overflow: hidden;
}
.guest-portal__messages .pm-message-compose__attach:hover {
background: #e8f4fc;
color: #025a96;
}
.guest-portal__messages .pm-message-compose__attach i {
font-size: 1.2rem;
pointer-events: none;
}
.guest-portal__messages .pm-message-compose__file-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
opacity: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.guest-portal__messages .pm-message-compose__send {
flex-shrink: 0;
margin-bottom: 0.12rem;
}
.guest-portal__messages .pm-message-compose__hint {
margin-top: 0.45rem;
font-size: 0.68rem;
line-height: 1.45;
color: #94a3b8 !important;
text-align: center;
}
.guest-portal__messages .pm-message-compose__file-name {
margin-top: 0.35rem;
padding: 0.3rem 0.55rem;
border-radius: 8px;
background: #e8f4fc;
color: #025a96 !important;
font-size: 0.75rem;
font-weight: 600;
word-break: break-all;
}
.guest-portal__messages .pm-split__placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.25rem;
text-align: center;
color: #64748b;
background: #f8fafc;
}
.guest-portal__messages .pm-split__placeholder i {
font-size: 2.5rem;
color: #cbd5e1;
margin-bottom: 0.75rem;
}
.guest-portal__messages .pm-split__placeholder-title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
color: #475569;
}
.guest-portal__messages .pm-split__placeholder-desc {
margin: 0;
max-width: 16rem;
font-size: 0.875rem;
line-height: 1.6;
}
@media (max-width: 767px) {
.guest-portal__messages:not(.guest-portal--messages--chat-open) .pm-split__main {
display: none;
}
.guest-portal__messages.guest-portal--messages--chat-open .guest-thread-list {
display: none;
}
.guest-portal__messages.guest-portal--messages--chat-open .guest-messenger {
min-height: calc(100dvh - 4.25rem);
max-height: calc(100dvh - 4.25rem);
}
}
.guest-message-reads-modal {
position: fixed;
inset: 0;
z-index: 1060;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.guest-message-reads-modal[hidden] {
display: none !important;
}
.guest-message-reads-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
border: 0;
padding: 0;
cursor: pointer;
}
.guest-message-reads-modal__panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 22rem;
max-height: min(70vh, 28rem);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(3, 110, 184, 0.12);
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 20px 40px rgba(15, 23, 42, 0.14);
}
.guest-message-reads-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1rem 0.85rem;
border-bottom: 1px solid #e8eef4;
background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.guest-message-reads-modal__header-text {
min-width: 0;
}
.guest-message-reads-modal__title {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #1e293b;
line-height: 1.35;
}
.guest-message-reads-modal__subtitle {
margin: 0.25rem 0 0;
font-size: 0.78rem;
color: #64748b;
line-height: 1.45;
}
.guest-message-reads-modal__close {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: #64748b;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.guest-message-reads-modal__close:hover {
background: #f1f5f9;
color: #334155;
}
.guest-message-reads-modal__body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.35rem 0;
-webkit-overflow-scrolling: touch;
}
.guest-message-reads-list {
list-style: none;
margin: 0;
padding: 0;
}
.guest-message-reads-list__item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 1rem;
border-bottom: 1px solid #f1f5f9;
}
.guest-message-reads-list__item:last-child {
border-bottom: 0;
}
.guest-message-reads-list__avatar {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
color: #fff;
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
}
.guest-message-reads-list__name {
min-width: 0;
font-size: 0.9rem;
font-weight: 600;
color: #1e293b;
line-height: 1.35;
word-break: break-word;
}
.guest-message-reads-modal__empty {
padding: 1.5rem 1rem;
text-align: center;
font-size: 0.85rem;
color: #64748b;
line-height: 1.55;
}
.guest-message-reads-modal__empty[hidden] {
display: none !important;
}
body.guest-message-reads-modal-open {
overflow: hidden;
}
.guest-message-attachment-modal {
position: fixed;
inset: 0;
z-index: 1070;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem;
}
.guest-message-attachment-modal[hidden] {
display: none !important;
}
.guest-message-attachment-modal__backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: rgba(15, 23, 42, 0.55);
cursor: pointer;
}
.guest-message-attachment-modal__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: min(960px, 100%);
max-height: min(92vh, 900px);
overflow: hidden;
border: 1px solid rgba(3, 110, 184, 0.12);
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 20px 40px rgba(15, 23, 42, 0.18);
}
.guest-message-attachment-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-shrink: 0;
padding: 0.75rem 0.85rem;
border-bottom: 1px solid #e8eef4;
background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.guest-message-attachment-modal__title {
margin: 0;
min-width: 0;
font-size: 0.95rem;
font-weight: 700;
color: #1e293b;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.guest-message-attachment-modal__actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.guest-message-attachment-modal__open-tab {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: #e8f4fc;
color: #025a96 !important;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.guest-message-attachment-modal__open-tab:hover {
background: rgba(3, 110, 184, 0.16);
color: #013d66 !important;
text-decoration: none;
}
.guest-message-attachment-modal__open-tab[hidden] {
display: none !important;
}
.guest-message-attachment-modal__close {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: #64748b;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.guest-message-attachment-modal__close:hover {
background: #f1f5f9;
color: #334155;
}
.guest-message-attachment-modal__body {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem;
background: #f8fafc;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.guest-message-attachment-modal__image {
display: block;
max-width: 100%;
max-height: min(78vh, 760px);
width: auto;
height: auto;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}
.guest-message-attachment-modal__image[hidden] {
display: none !important;
}
.guest-message-attachment-modal__pdf {
display: block;
width: 100%;
height: min(78vh, 760px);
min-height: 20rem;
border: 0;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
.guest-message-attachment-modal__pdf[hidden] {
display: none !important;
}
body.guest-message-attachment-modal-open {
overflow: hidden;
}
.guest-portal__back-link {
display: inline-flex;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
min-height: 2.15rem;
padding: 0.25rem 0.55rem;
margin-right: 0.15rem;
border-radius: 999px;
background: #e8f4fc;
color: #025a96 !important;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.guest-portal__back-link i {
font-size: 1rem;
}
.guest-portal__back-link:hover {
background: rgba(3, 110, 184, 0.18);
color: #025a96;
}
@media (min-width: 768px) {
.guest-portal__back-link {
display: none;
}
}
html, body {
margin: 0;
padding: 0;
}
.quiz-loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
opacity: 1;
transition: opacity 0.8s ease-in-out;
margin: 0;
padding: 0;
}
.quiz-loading-overlay.fade-out {
opacity: 0;
pointer-events: none;
}
.quiz-loading-content {
text-align: center;
color: white;
width: 100%;
max-width: 400px;
padding: 2rem;
}
.quiz-loading-spinner {
width: 80px;
height: 80px;
border: 6px solid rgba(255, 255, 255, 0.3);
border-top: 6px solid white;
border-radius: 50%;
animation: quiz-spin 1s linear infinite;
margin: 0 auto 30px;
}
.quiz-loading-text {
font-size: 24px;
font-weight: 600;
margin: 0;
opacity: 0;
animation: quiz-fade-in 0.8s ease-in-out 0.3s forwards;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
@keyframes quiz-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes quiz-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz-main-content {
transition: opacity 1.2s ease-in-out;
}
.quiz-main-content.fade-in {
opacity: 1;
}
.quiz-step-container {
animation: quiz-slide-up 1s ease-out 0.5s both;
}
@keyframes quiz-slide-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz-question {
opacity: 0;
animation: quiz-question-fade-in 0.6s ease-out forwards;
}
.quiz-question:nth-child(1) {
animation-delay: 0.9s;
}
.quiz-question:nth-child(2) {
animation-delay: 1s;
}
.quiz-question:nth-child(3) {
animation-delay: 1.1s;
}
.quiz-question:nth-child(4) {
animation-delay: 1.2s;
}
.quiz-question:nth-child(5) {
animation-delay: 1.3s;
}
.quiz-question:nth-child(6) {
animation-delay: 1.4s;
}
.quiz-question:nth-child(7) {
animation-delay: 1.5s;
}
.quiz-question:nth-child(8) {
animation-delay: 1.6s;
}
.quiz-question:nth-child(9) {
animation-delay: 1.7s;
}
.quiz-question:nth-child(10) {
animation-delay: 1.8s;
}
@keyframes quiz-question-fade-in {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.quiz-page-container {
min-height: 100vh;
background: #f8f9fa;
padding: 2rem 0;
overflow-y: auto;
}
.quiz-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.quiz-description {
font-size: 1.2rem;
color: #6c757d;
text-align: center;
margin-bottom: 3rem;
line-height: 1.6;
}
.quiz-container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
overflow: visible;
}
.quiz-question {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.quiz-question:hover {
border-color: #007bff;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.1);
}
.quiz-question.border-danger {
border-color: #dc3545;
background: #fff5f5;
}
.quiz-question h6 {
color: #007bff;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.question-text {
font-size: 1.1rem;
color: #495057;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.answer-options {
margin-top: 1rem;
}
.quiz-question .form-check {
margin-bottom: 0.75rem;
}
.quiz-question .form-check:last-child {
margin-bottom: 0;
}
.quiz-question .form-check-input {
width: 1.2rem;
height: 1.2rem;
margin-top: 0.2rem;
}
.quiz-question .form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.quiz-question .form-check-label {
font-size: 1rem;
color: #495057;
margin-left: 0.5rem;
cursor: pointer;
line-height: 1.4;
}
.quiz-question .form-check-label:hover {
color: #007bff;
}
.quiz-actions {
text-align: center;
padding-top: 2rem;
border-top: 2px solid #e9ecef;
margin-top: 2rem;
}
.quiz-actions .btn {
padding: 0.75rem 2rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
}
.quiz-actions .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.quiz-actions .btn-outline-secondary {
border: 2px solid #6c757d;
color: #6c757d;
}
.quiz-actions .btn-outline-secondary:hover {
background: #6c757d;
border-color: #6c757d;
color: white;
}
@media (max-width: 768px) {
.quiz-page-container {
padding: 1rem 0;
}
.quiz-title {
font-size: 2rem;
}
.quiz-container {
margin: 0 1rem;
padding: 1.5rem;
}
.quiz-question {
padding: 1rem;
}
.quiz-actions .btn {
padding: 0.6rem 1.5rem;
font-size: 1rem;
}
}
.quiz-container .alert {
border-radius: 10px;
border: none;
padding: 1.5rem;
}
.quiz-container .alert.alert-warning {
background: #fff3cd;
color: #856404;
}
.quiz-container {
animation: quiz-slide-up 0.8s ease-out;
}
@keyframes quiz-slide-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz-question {
animation: quiz-question-fade-in 0.6s ease-out forwards;
}
.quiz-question:nth-child(1) {
animation-delay: 0.3s;
}
.quiz-question:nth-child(2) {
animation-delay: 0.4s;
}
.quiz-question:nth-child(3) {
animation-delay: 0.5s;
}
.quiz-question:nth-child(4) {
animation-delay: 0.6s;
}
.quiz-question:nth-child(5) {
animation-delay: 0.7s;
}
.quiz-question:nth-child(6) {
animation-delay: 0.8s;
}
.quiz-question:nth-child(7) {
animation-delay: 0.9s;
}
.quiz-question:nth-child(8) {
animation-delay: 1s;
}
.quiz-question:nth-child(9) {
animation-delay: 1.1s;
}
.quiz-question:nth-child(10) {
animation-delay: 1.2s;
}
@keyframes quiz-question-fade-in {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.school-student-file-upload .file-select-label {
display: inline-block;
padding: 12px 24px;
background-color: #f8f9fa;
border: 2px dashed #dee2e6;
border-radius: 8px;
color: #6c757d;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
font-weight: 500;
}
.school-student-file-upload .file-select-label:hover {
background-color: #e9ecef;
border-color: #adb5bd;
color: #495057;
}
.school-student-file-upload .file-select-label.file-selected {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.school-student-file-upload .file-input {
display: none;
}
.school-student-file-upload .file-name {
margin-top: 12px;
padding: 8px 12px;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
color: #495057;
font-size: 14px;
font-weight: 500;
}
.school-student-file-upload .file-status {
margin-top: 8px;
padding: 6px 12px;
background-color: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 6px;
color: #0056b3;
font-size: 12px;
font-weight: 500;
display: none;
}
.school-student-file-upload .file-status.show {
display: block;
}
.school-student-file-upload .file-upload-info {
font-size: 12px;
}
.school-student-file-upload .file-debug {
margin-top: 8px;
background: #f8f9fa;
padding: 8px;
border-radius: 4px;
font-size: 11px;
display: block;
}
.school-student-file-upload .btn {
margin-right: 8px;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
}
.school-student-file-upload .btn.btn-success {
background-color: #28a745;
border-color: #28a745;
}
.school-student-file-upload .btn.btn-success:hover {
background-color: #218838;
border-color: #1e7e34;
}
.school-student-file-upload .btn.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.school-student-file-upload .btn.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}
.school-student-file-upload .btn.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
cursor: not-allowed;
opacity: 0.6;
}
.school-student-file-upload .btn:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.school-student-file-upload .evaluation-result-container .result-header .result-icon i {
font-size: 3rem;
color: #28a745;
}
.school-student-file-upload .evaluation-result-container .result-header .result-title {
color: #28a745;
font-weight: 700;
}
.school-student-file-upload .evaluation-result-container .result-message .alert {
border-radius: 10px;
border: none;
}
.school-student-file-upload .evaluation-result-container .result-message .alert .d-flex i {
font-size: 1.5rem;
color: #155724;
}
.school-student-file-upload .evaluation-result-container .result-message .alert .d-flex h6 {
color: #155724;
font-weight: 600;
}
.school-student-file-upload .evaluation-result-container .result-message .alert .d-flex p {
color: #155724;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-header .feedback-title {
color: #495057;
font-weight: 600;
border-bottom: 2px solid #007bff;
padding-bottom: 8px;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-header .feedback-title i {
color: #007bff;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box.text-center {
padding: 40px 20px;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box.text-center i {
font-size: 3rem;
color: #6c757d;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box.text-center p {
color: #6c757d;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box.text-center p.mb-0 {
font-size: 16px;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box.text-center p.mt-2 {
font-size: 12px;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box .feedback-text {
color: #495057;
line-height: 1.8;
font-size: 14px;
max-height: 400px;
overflow-y: auto;
}
.school-student-file-upload .submission-status .message .submission-status-note,
.school-student-file-upload #submission-status .message .submission-status-note {
margin-top: 8px;
background: transparent;
border: none;
padding: 0;
}
.school-student-file-upload .submission-status .message .submission-status-note .btn-outline-primary,
.school-student-file-upload #submission-status .message .submission-status-note .btn-outline-primary {
border-radius: 20px;
padding: 8px 20px;
}
.school-student-file-upload #showPreviousResultBtn {
border-radius: 20px;
padding: 8px 20px;
}
.school-student-file-upload .previous-result-area .alert .btn-outline-primary {
border-radius: 20px;
padding: 6px 16px;
font-size: 12px;
}
.school-student-file-upload .previous-result-area .alert .btn-outline-primary:hover {
background-color: #007bff;
border-color: #007bff;
color: white;
}
.school-student-file-upload .previous-result-area .alert .result-score .badge {
font-size: 14px;
padding: 8px 12px;
border-radius: 20px;
}
.school-student-file-upload .previous-result-area .alert .result-status .badge {
font-size: 12px;
padding: 6px 10px;
border-radius: 16px;
}
.school-student-file-upload .previous-result-area .alert .result-timestamp {
border-top: 1px solid #bee5eb;
padding-top: 8px;
margin-top: 8px;
}
.school-student-file-upload .previous-result-area .alert .result-timestamp small {
font-size: 11px;
}
.school-student-file-upload .modal .modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.school-student-file-upload .modal .modal-content .modal-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #dee2e6;
border-radius: 12px 12px 0 0;
}
.school-student-file-upload .modal .modal-content .modal-header .modal-title {
color: #272727;
font-weight: 600;
}
.school-student-file-upload .modal .modal-content .modal-header .modal-title i {
color: #007bff;
}
.school-student-file-upload .modal .modal-content .modal-body {
padding: 24px;
}
.school-student-file-upload .modal .modal-content .modal-body .result-summary {
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
}
.school-student-file-upload .modal .modal-content .modal-body .result-summary .result-status {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.school-student-file-upload .modal .modal-content .modal-body .result-summary .result-status.success {
background-color: #d4edda;
color: #155724;
}
.school-student-file-upload .modal .modal-content .modal-body .result-summary .result-status.warning {
background-color: #fff3cd;
color: #856404;
}
.school-student-file-upload .modal .modal-content .modal-body .result-summary .result-status.error {
background-color: #f8d7da;
color: #721c24;
}
.school-student-file-upload .modal .modal-content .modal-body .feedback-details .feedback-title {
color: #272727;
font-weight: 600;
border-bottom: 2px solid #007bff;
padding-bottom: 8px;
margin-bottom: 16px;
}
.school-student-file-upload .modal .modal-content .modal-body .feedback-details .feedback-title i {
color: #007bff;
}
.school-student-file-upload .modal .modal-content .modal-body .feedback-details .feedback-content {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 16px;
line-height: 1.6;
color: #272727;
}
.school-student-file-upload .modal .modal-content .modal-footer {
border-top: 1px solid #dee2e6;
padding: 16px 24px;
}
.school-student-file-upload .modal .modal-content .modal-footer .btn-secondary {
border-radius: 6px;
padding: 8px 20px;
}
@media (max-width: 768px) {
.school-student-file-upload .file-select-label {
padding: 10px 16px;
font-size: 14px;
}
.school-student-file-upload .btn {
margin-bottom: 8px;
width: 100%;
}
.school-student-file-upload .evaluation-result-container .result-header .result-icon i {
font-size: 2.5rem;
}
.school-student-file-upload .evaluation-result-container .result-header .result-title {
font-size: 1.25rem;
color: #888;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box {
padding: 16px;
}
.school-student-file-upload .evaluation-result-container .feedback-section .feedback-content .feedback-box.text-center {
padding: 30px 16px;
}
}
.shop-quiz-page {
padding: 1.5rem;
min-height: 100vh;
background: #f1f3f5;
}
.shop-quiz {
max-width: 720px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.shop-quiz__header {
padding: 1.75rem 2rem;
background: #036EB8;
color: #fff;
position: relative;
}
.shop-quiz__breadcrumb {
margin-bottom: 0.75rem;
}
.shop-quiz__back {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: color 0.2s;
}
.shop-quiz__back:hover {
color: #fff;
}
.shop-quiz__badge {
display: inline-block;
padding: 0.25rem 0.6rem;
font-size: 0.75rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
border-radius: 6px;
margin-bottom: 0.75rem;
letter-spacing: 0.02em;
}
.shop-quiz__title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
letter-spacing: -0.02em;
}
.shop-quiz__description {
font-size: 0.95rem;
opacity: 0.95;
margin: 0;
line-height: 1.45;
}
.shop-quiz__meta {
margin-top: 0.5rem;
font-size: 0.85rem;
opacity: 0.85;
}
.shop-quiz__body {
padding: 1.5rem 2rem 2rem;
}
.shop-quiz__list {
list-style: none;
padding: 0;
margin: 0;
}
.shop-quiz__item {
margin-bottom: 1.25rem;
}
.shop-quiz__item:last-of-type {
margin-bottom: 0;
}
.shop-quiz-card {
background: #fff;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 1.25rem 1.5rem;
transition: box-shadow 0.2s;
}
.shop-quiz-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.shop-quiz-card__head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.shop-quiz-card__number {
font-size: 0.9rem;
font-weight: 600;
color: #036EB8;
}
.shop-quiz-card__type {
font-size: 0.75rem;
color: #6c757d;
background: #f1f3f5;
padding: 0.15rem 0.5rem;
border-radius: 4px;
}
.shop-quiz-card__question {
font-size: 1rem;
line-height: 1.6;
color: #212529;
margin: 0 0 1rem;
}
.shop-quiz-card__options {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.shop-quiz-option {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
border-radius: 8px;
background: #f8f9fa;
border: 1px solid transparent;
font-size: 0.95rem;
line-height: 1.45;
}
.shop-quiz-option__mark {
flex-shrink: 0;
font-weight: 600;
color: #6c757d;
}
.shop-quiz-option__icon {
flex-shrink: 0;
margin-top: 0.1rem;
color: #198754;
font-size: 1.15rem;
}
.shop-quiz-option__text {
flex: 1;
color: #212529;
}
.shop-quiz-option--correct {
background: #d1e7dd;
border-color: rgba(25, 135, 84, 0.35);
color: #0f5132;
}
.shop-quiz-option--correct .shop-quiz-option__mark {
color: #0f5132;
}
.shop-quiz-option--correct .shop-quiz-option__text {
color: #0f5132;
font-weight: 500;
}
.shop-quiz-card__answer {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
border-radius: 8px;
background: #e8f2fa;
border: 1px solid rgba(3, 110, 184, 0.2);
margin-bottom: 0.5rem;
}
.shop-quiz-card__answer-label {
font-size: 0.8rem;
font-weight: 600;
color: #036EB8;
}
.shop-quiz-card__answer-value {
font-size: 0.95rem;
color: #212529;
font-weight: 500;
}
.shop-quiz-card__explanation {
margin-top: 1rem;
padding: 1rem 1.1rem;
background: #f8f9fa;
border-radius: 8px;
}
.shop-quiz-card__explanation-title {
font-size: 0.85rem;
font-weight: 600;
color: #087990;
margin: 0 0 0.4rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
.shop-quiz-card__explanation-text {
font-size: 0.9rem;
line-height: 1.55;
color: #212529;
margin: 0;
}
.shop-quiz__footer {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid #dee2e6;
text-align: center;
}
.shop-quiz__btn-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.25rem;
font-size: 0.95rem;
font-weight: 500;
color: #036EB8;
background: #fff;
border: 1px solid #036EB8;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.shop-quiz__btn-back:hover {
background: #036EB8;
color: #fff;
}
.shop-quiz-empty {
text-align: center;
padding: 2.5rem 1.5rem;
}
.shop-quiz-empty__icon {
font-size: 3rem;
color: #6c757d;
margin-bottom: 1rem;
opacity: 0.7;
}
.shop-quiz-empty__text {
font-size: 1rem;
color: #6c757d;
margin: 0 0 1.5rem;
}
.shop-quiz-empty .shop-quiz__btn-back {
margin: 0 auto;
}
.step-controls h4 {
font-size: 1rem;
}
@media (max-width: 768px) {
.shop-quiz-page {
padding: 1rem;
}
.shop-quiz__header,
.shop-quiz__body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.shop-quiz__title {
font-size: 1.3rem;
}
.shop-quiz-card {
padding: 1rem 1.2rem;
}
}
.announcement-detail {
max-width: 800px;
margin: 2rem auto;
}
.announcement-detail .card {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.announcement-detail .card-header {
background-color: #f8f9fa;
}
.announcement-link {
color: #333;
text-decoration: none;
}
.announcement-link:hover {
color: #007bff;
text-decoration: underline;
}
.codingPage {
padding: 3rem 2rem;
}
.CodeMirror {
height: 180px;
border: 1px solid #2b2b2b;
font-size: 13px;
}
.nav-tabs .nav-link {
cursor: pointer;
}
.code-pane .CodeMirror {
height: 60vh;
}
.small-nav .card-title {
font-size: 14px;
}
.small-nav .small {
font-size: 12px;
}
.phone-wrapper {
width: 100%;
}
.phone-frame {
position: relative;
width: 100%;
max-width: 260px;
aspect-ratio: 9 / 19.5;
margin: 0 auto;
background: #000;
border-radius: 32px;
padding: 8px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
border: 4px solid #111;
height: auto !important;
}
.phone-notch {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 18px;
background: #111;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
z-index: 2;
}
.phone-screen {
position: relative;
width: 100%;
height: 100%;
border: none;
border-radius: 24px;
background: #fff;
overflow: hidden;
}
#hintContent .alert-heading {
font-size: 14px;
}
#hintContent .alert {
display: block !important;
margin: 0 !important;
}
#hintContent .alert ul li {
font-size: 12px;
list-style-type: none;
}
.evaluationModal .modal-dialog {
max-width: 400px;
}
.evaluationModal .modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.evaluationModal .evaluation-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom: none;
border-radius: 12px 12px 0 0;
}
.evaluationModal .evaluation-header .modal-title {
font-weight: 600;
font-size: 1.1rem;
}
.evaluationModal .evaluation-header .btn-close {
filter: invert(1);
}
.evaluationModal .evaluation-body {
padding: 1.5rem;
}
.evaluationModal .evaluation-body .alert {
margin-bottom: 0;
border-radius: 8px;
border: none;
padding: 1rem;
}
.evaluationModal .evaluation-body .alert-success {
background-color: #d4edda;
color: #155724;
}
.evaluationModal .evaluation-body .alert-danger {
background-color: #f8d7da;
color: #721c24;
}
.evaluationModal .evaluation-body .btn {
margin: 0.25rem;
}
.evaluationModal .evaluation-footer {
border-top: none;
padding: 1rem 1.5rem 1.5rem;
}
.evaluationModal .evaluation-footer .btn {
border-radius: 8px;
font-weight: 500;
}
.evaluation-result-area {
display: none;
}
.hint-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
display: none;
}
.hint-modal .hint-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.hint-modal .hint-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 500px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.hint-modal .hint-modal-header {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
color: #333;
padding: 1rem 1.5rem;
border-bottom: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.hint-modal .hint-modal-header .hint-modal-title {
margin: 0;
font-weight: 600;
font-size: 1.1rem;
}
.hint-modal .hint-modal-header .hint-modal-title i {
color: #ff6b6b;
margin-right: 0.5rem;
}
.hint-modal .hint-modal-header .hint-close-btn {
background: none;
border: none;
font-size: 1.5rem;
color: #666;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s;
}
.hint-modal .hint-modal-header .hint-close-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
color: #333;
}
.hint-modal .hint-modal-body {
padding: 1.5rem;
}
.hint-modal .hint-modal-body .alert {
margin-bottom: 0;
border-radius: 8px;
border: none;
padding: 1rem;
}
.hint-modal .hint-modal-body .alert-info {
color: #0c5460;
}
.hint-modal .hint-modal-body .alert-warning {
background-color: #fff3cd;
color: #856404;
}
.hint-modal .hint-modal-body .hint-text {
font-size: 0.95rem;
line-height: 1.6;
}
.hint-modal .hint-modal-body .hint-text ul {
margin: 1rem 0;
padding-left: 1.5rem;
}
.hint-modal .hint-modal-body .hint-text ul li {
margin: 0.5rem 0;
}
.hint-modal .hint-modal-footer {
padding: 1rem 1.5rem 1.5rem;
border-top: 1px solid #dee2e6;
text-align: right;
}
.hint-modal .hint-modal-footer .btn {
border-radius: 8px;
font-weight: 500;
}
.evaluation-result-area .alert-info {
background-color: #d1ecf1;
color: #0c5460;
}
.header-section {
padding: 1rem;
}
.lesson-info {
padding-bottom: 0.75rem;
}
.sub-step-selector {
margin-top: 1rem;
}
.sub-step-selector .form-label {
font-weight: 600;
color: #495057;
}
.sub-step-selector .form-select {
border: 2px solid #ced4da;
border-radius: 6px;
font-size: 0.875rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.sub-step-selector .form-select:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.sub-step-selector .form-select option {
font-size: 0.875rem;
padding: 0.5rem;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1040;
}
.modal.show {
display: block !important;
z-index: 1050;
}
.modal-body02 {
background: white !important;
margin: 0;
}
.modal-body02 #evaluationResult .alert-danger {
border-left: none !important;
}
.modal-body02 .alert {
display: block !important;
text-align: left;
margin: 0;
}
.modal-body02 .alert h4 {
font-size: 18px;
}
.modal.show .modal-dialog {
transform: none;
}
.modal-dialog {
margin: 1.75rem auto;
max-width: 500px;
}
.modal-content {
position: relative;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
height: auto !important;
}
.modal-sm {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #dee2e6;
}
.modal-body {
position: relative;
padding: 1rem;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid #dee2e6;
}
.btn-close {
background: transparent;
border: 0;
font-size: 1.5rem;
cursor: pointer;
}
.btn-close:hover {
opacity: 0.75;
}
.evaluation-result-modal {
max-width: 400px !important;
margin: 2rem auto !important;
}
.evaluation-result-modal .modal-content {
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 2px solid #e9ecef;
}
.evaluation-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px 10px 0 0;
padding: 0.75rem 1rem;
border-bottom: none;
}
.evaluation-header .modal-title {
font-size: 1rem;
font-weight: 600;
margin: 0;
}
.evaluation-header .btn-close {
color: white;
opacity: 0.8;
filter: brightness(0) invert(1);
}
.evaluation-header .btn-close:hover {
opacity: 1;
}
.evaluation-body {
padding: 1.25rem;
background-color: #f8f9fa;
border-radius: 0;
}
.evaluation-footer {
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
padding: 0.75rem 1rem;
border-radius: 0 0 10px 10px;
}
.evaluation-footer .btn {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
border-radius: 6px;
margin-left: 0.5rem;
}
.evaluation-footer .btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
}
.evaluation-footer .btn-primary {
background-color: #007bff;
border-color: #007bff;
}
#evaluationResult {
text-align: center;
font-size: 0.95rem;
line-height: 1.5;
}
#evaluationResult .alert {
margin-bottom: 0;
border-radius: 8px;
border: none;
padding: 1rem;
}
#evaluationResult .alert-success {
background-color: #d4edda;
color: #155724;
}
#evaluationResult .alert-danger {
background-color: #f8d7da;
color: #721c24;
}
.sub-step-navigation {
border-top: 1px solid #dee2e6;
padding-top: 10px;
}
.sub-step-navigation .nav-link {
display: block;
padding: 8px 12px;
margin-bottom: 5px;
border-radius: 6px;
text-decoration: none;
font-size: 12px;
transition: all 0.2s ease;
}
.sub-step-navigation .nav-link.completed {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.sub-step-navigation .nav-link.completed:hover {
background-color: #c3e6cb;
}
.sub-step-navigation .nav-link.active {
background-color: #cce7ff;
color: #004085;
border: 1px solid #b3d9ff;
font-weight: bold;
}
.sub-step-navigation .nav-link.active:hover {
background-color: #b3d9ff;
}
.sub-step-navigation .nav-link.pending {
background-color: #f8f9fa;
color: #6c757d;
border: 1px solid #dee2e6;
}
.sub-step-navigation .nav-link.pending:hover {
background-color: #e9ecef;
}
.sub-step-navigation .nav-link:hover {
text-decoration: none;
transform: translateX(2px);
}
.sub-step-navigation .nav-link i {
margin-right: 6px;
width: 14px;
}
.code-tabs-wrapper {
margin-bottom: 0;
}
.code-editor-container {
background: #1a202c;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
overflow: hidden;
border: 1px solid #4a5568;
}
.code-tabs {
display: flex;
background: #2d3748;
padding: 4px 4px 0 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-bottom: none;
}
.code-tab {
flex: 1;
background: transparent;
border: none;
color: #a0aec0;
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 500;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
overflow: hidden;
}
.code-tab:hover {
color: #e2e8f0;
background: rgba(255, 255, 255, 0.05);
transform: translateY(-1px);
}
.code-tab.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
transform: translateY(-2px);
border-radius: 0 !important;
}
.code-tab.active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.code-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: #1a202c;
z-index: 1;
}
.code-tab i {
font-size: 16px;
transition: transform 0.3s ease;
}
.code-tab.active i {
transform: scale(1.1);
}
.code-tab span {
font-weight: 600;
letter-spacing: 0.5px;
}
.code-pane {
background: #1a202c;
border-radius: 0;
padding: 16px;
height: 100%;
border: none !important;
border-top: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
animation: tabSlideIn 0.3s ease-out;
}
.code-pane textarea {
background-color: #1a202c !important;
color: #e2e8f0 !important;
border: none !important;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.code-pane .btn-xs {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}
.code-pane .btn-xs:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}
.coding-editor-container .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.coding-editor-container .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
.coding-editor-container .btn-success {
background: none !important;
}
@keyframes tabSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.CodeMirror {
background-color: #1a202c !important;
color: #e2e8f0 !important;
border: none !important;
height: auto !important;
min-height: 350px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 14px;
line-height: 1.5;
user-select: text !important;
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
}
.CodeMirror.CodeMirror {
background-color: #1a202c !important;
color: #e2e8f0 !important;
}
.CodeMirror .CodeMirror-code {
color: #e2e8f0 !important;
}
.CodeMirror .CodeMirror-selected {
background: rgba(59, 130, 246, 0.4) !important;
}
.CodeMirror .CodeMirror-focused .CodeMirror-selected {
background: rgba(59, 130, 246, 0.5) !important;
}
.CodeMirror .CodeMirror-cursor {
border-left-color: #e2e8f0 !important;
border-left-width: 2px !important;
}
.CodeMirror .CodeMirror-activeline-background {
background-color: transparent !important;
}
.CodeMirror .CodeMirror-matchingbracket {
background-color: transparent !important;
color: #e2e8f0 !important;
}
.CodeMirror .CodeMirror-nonmatchingbracket {
background-color: transparent !important;
color: #e2e8f0 !important;
}
.CodeMirror .CodeMirror-searching {
background-color: transparent !important;
}
.CodeMirror-gutters {
background-color: #2d3748 !important;
border-right: 1px solid #4a5568 !important;
}
.CodeMirror-linenumber {
color: #a0aec0 !important;
}
.cm-error {
background-color: transparent !important;
color: #e2e8f0 !important;
}
.cm-warning {
background-color: transparent !important;
color: #e2e8f0 !important;
}
#htmlInput, #cssInput, #jsInput {
background-color: #1a202c !important;
color: #e2e8f0 !important;
border: 1px solid #4a5568 !important;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.phone-frame {
background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
border: 8px solid #1a1a1a;
border-radius: 25px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
max-width: 100%;
margin: 0 auto;
height: 600px;
overflow: hidden;
}
.phone-notch {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 8px;
background: linear-gradient(180deg, #1a1a1a, #000);
border-radius: 0 0 8px 8px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.phone-screen {
width: 100%;
height: 100%;
border: none;
border-radius: 12px;
background: #ffffff;
overflow: auto;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.phone-screen body {
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
}
.phone-screen h1 {
font-size: 18px;
margin: 0 0 10px 0;
line-height: 1.2;
}
.phone-screen h2 {
font-size: 16px;
margin: 15px 0 8px 0;
line-height: 1.2;
}
.phone-screen p {
font-size: 14px;
margin: 8px 0;
line-height: 1.4;
}
.phone-screen ul, .phone-screen ol {
margin: 8px 0;
padding-left: 20px;
}
.phone-screen li {
font-size: 14px;
margin: 4px 0;
line-height: 1.3;
}
.phone-screen img {
max-width: 100%;
height: auto;
margin: 10px 0;
}
.phone-screen a {
font-size: 14px;
word-break: break-all;
}
@media (max-width: 1200px) {
.phone-frame {
padding: 15px;
border-width: 6px;
height: 500px;
}
}
@media (max-width: 768px) {
.code-tabs {
flex-direction: column;
gap: 4px;
}
.code-tab {
padding: 10px 12px;
}
.code-tab span {
font-size: 13px;
}
.phone-frame {
padding: 10px;
border-width: 4px;
border-radius: 15px;
height: 450px;
}
.phone-screen {
border-radius: 6px;
}
.phone-screen body {
padding: 12px;
font-size: 13px;
}
.phone-screen h1 {
font-size: 16px;
}
.phone-screen h2 {
font-size: 14px;
}
.phone-screen p, .phone-screen li {
font-size: 13px;
}
.phone-notch {
width: 40px;
height: 6px;
}
}
.coding-editor-container .editor-area,
.coding-editor-container .editor-area .CodeMirror,
.coding-editor-container .editor-area .CodeMirror-scroll,
.coding-editor-container .editor-area .CodeMirror-sizer,
.coding-editor-container .editor-area .CodeMirror-gutters,
.coding-editor-container .editor-area .CodeMirror-lines,
.coding-editor-container .editor-area .CodeMirror-code .CodeMirror-line,
.coding-editor-container .editor-area .code-pane,
.coding-editor-container .editor-area .code-pane textarea {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
ul {
padding-left: 0 !important;
}
.withdrawal-field-hidden {
display: none !important;
}
#top_page {
background: #036EB8;
padding: 2rem 0;
min-height: 100vh;
}
#top_page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
text-align: center;
}
#top_page .container .enter_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#top_page .container .enter_box .btn {
background: #ffdc00;
color: #000;
border-radius: 30px;
padding: 10px 40px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
#top_page .container .enter_box .button_wrap {
margin: 20px;
display: inline-block;
}
#top_page .container .enter_box .button {
display: inline-block;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 2rem 1rem;
text-decoration: none;
background: #ffdc00;
border-radius: 50%;
color: #272727;
text-align: center;
position: relative;
transition: all 0.3s ease;
font-weight: bold;
font-size: 0.8rem;
}
#top_page .container .enter_box .button i {
font-size: 1.2rem;
color: #272727;
display: block;
}
#top_page .container .enter_box .button:hover {
background: #ffdc00;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#top_page .container .enter_box .button:before, #top_page .container .enter_box .button:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 0, 0.4);
transform: translate(-50%, -50%) scale(0);
z-index: -1;
pointer-events: none;
}
#top_page .container .enter_box .button:before {
animation: ripple 4s ease-out infinite;
}
#top_page .container .enter_box .button:after {
animation: ripple 4s ease-out 1.5s infinite;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.8;
}
50% {
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}
#top_page .logo {
max-width: 400px;
width: 400px;
margin-bottom: 1rem;
}
#login_page {
position: relative;
min-height: 100vh;
}
#login_page .login_contents {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: #fff;
}
#login_page .login_contents h6 {
font-size: 24px;
font-weight: bold;
margin-bottom: 2rem;
width: 100%;
border: none;
cursor: pointer;
text-align: center;
}
#login_page .login_form {
border-radius: 10px;
border: 1px solid #ccc;
padding: 2rem;
}
#login_page .login_form .logo {
max-width: 90%;
margin: 2rem auto 3rem;
text-align: center;
}
#login_page .login_form .btn {
padding: 12px 40px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
font-size: 16px;
background: #036EB8;
color: #fff;
border-radius: 5px;
border: none;
margin: 0;
width: 100%;
}
#login_page .login_form .form-group {
margin: 1rem 0;
}
#login_page .login_form .form-group label {
font-size: 16px;
font-weight: bold;
margin: 1rem 0;
display: block;
text-align: left;
}
#login_page .login_form .form-group input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
header {
border-bottom: 1px solid #eee;
position: relative;
z-index: 10;
}
header .header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
header .header-top.header-top--logo-only {
justify-content: flex-start;
padding: 0.5rem 1rem;
}
header .header-top .sidebar-toggle-container-header {
display: flex;
align-items: center;
margin: 0 1rem;
}
header .header-top .sidebar-toggle-container-header .sidebar-toggle-header {
background: rgba(0, 123, 255, 0.1);
border: 1px solid rgba(0, 123, 255, 0.3);
color: #007bff;
border-radius: 20px;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.3s ease;
}
header .header-top .sidebar-toggle-container-header .sidebar-toggle-header:hover {
background: rgba(0, 123, 255, 0.2);
border-color: rgba(0, 123, 255, 0.5);
transform: translateY(-1px);
}
header .header-top .sidebar-toggle-container-header .sidebar-toggle-header i {
margin-right: 0.4rem;
transition: transform 0.3s ease;
}
header .header-top form {
height: auto !important;
}
header .header-top form input {
padding: 16px;
}
header .header-top form .form-control {
padding: 12px 24px;
height: auto !important;
line-height: 1 !important;
}
header .header-top .nav-list {
display: flex;
align-items: center;
flex-wrap: nowrap;
list-style: none;
margin: 0;
padding: 0;
vertical-align: middle;
}
header .header-top .nav-list .btn {
padding: 0.5rem .5rem !important;
}
header .header-top .nav-list .btn:hover {
box-shadow: none !important;
transform: none !important;
}
header .header-top .nav-list i {
font-size: 24px !important;
color: #272727;
}
header .header-top .nav-list .user i {
color: #036EB8;
background: #f8f9fa;
padding: 8px;
border-radius: 50%;
margin-right: 16px;
}
header .header-top .nav-list li {
display: flex;
align-items: center;
margin: 0 !important;
padding: 8px 16px;
}
header .header-top .nav-list li:last-of-type {
border-left: 1px solid #f2f2f2;
}
header .header-top .nav-list li:last-of-type i {
color: #036EB8;
}
header .header-top .nav-list button {
background: none;
border: none;
padding: 0;
margin: 0;
}
header .header-top .nav-list .logout-btn {
width: 44px !important;
min-width: 44px;
}
header .header-top .nav-list li.nav-item--icon {
padding: 8px 10px;
}
header .header-top .nav-list li.nav-item--icon .nav-link--icon-only {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
text-decoration: none;
color: inherit;
}
header .header-top .nav-list li.nav-item--icon .nav-link--icon-only:hover {
background: #f0f7ff;
text-decoration: none;
}
header .header-top .search-area {
flex: 1;
max-width: 400px;
margin: 0 2rem;
}
header .header-top .search-form {
width: 100%;
}
header .header-top .input-group {
position: relative;
height: auto !important;
border-radius: 24px;
overflow: hidden;
transition: all 0.3s ease;
}
header .header-top .search-input {
border: 1px solid #e0e0e0;
border-right: none;
padding: 0.9rem 1rem;
font-size: 0.95rem;
border-radius: 24px 0 0 24px !important;
transition: all 0.3s ease;
}
header .header-top .search-input:focus {
outline: none;
border-color: #036EB8;
box-shadow: none;
}
header .header-top .btn-search {
background-color: #fff;
border: 1px solid #e0e0e0;
border-left: none;
padding: 0 1.25rem;
color: #666;
border-radius: 0 24px 24px 0 !important;
transition: all 0.3s ease;
margin: 0 !important;
}
header .header-top .btn-search:hover {
background-color: #f8f9fa;
color: #036EB8;
}
header .header-top .btn-search i {
font-size: 1.2rem;
}
header .container-fluid {
max-width: 100%;
margin: 0 auto;
padding: 0 2rem;
}
header .logo-icon {
padding: 16px;
}
header .logo-icon img {
width: 250px;
}
header .logo {
max-width: 250px;
}
header .logo img {
width: 100%;
height: auto;
}
header nav {
display: flex;
align-items: center;
gap: 2rem;
}
header nav .main-nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 1.5rem;
}
header nav .main-nav li a,
header nav .main-nav li button {
color: #333;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
header nav .main-nav li a:hover,
header nav .main-nav li button:hover {
color: #036EB8;
}
header nav .main-nav li .btn-link {
border: none;
background: none;
padding: 0;
}
header nav .user-nav {
display: inline-block;
list-style-type: none;
margin: 0;
}
header nav .user-nav .btn {
background: #036EB8;
color: #fff;
border-radius: 5px;
border: none;
padding: 12px 40px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
header nav .user-nav .btn i {
margin-left: 8px;
}
header nav .user-nav .btn:hover {
background: #025086;
}
header nav .header-right .btn {
background: #036EB8;
color: #fff;
border-radius: 5px;
border: none;
padding: 12px 40px;
font-weight: bold;
cursor: pointer;
}
header .nav-list {
position: relative;
z-index: 11;
margin: 0 !important;
}
header .nav-list li {
display: inline-block;
padding: 0 16px;
}
.card {
border-radius: 10px;
border: 1px solid #eee;
margin-bottom: 20px;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card .card-body {
padding: 1.5rem;
}
.card .card-body .card-title {
color: #666;
font-size: 1rem;
font-weight: bold;
margin-bottom: 1rem;
}
.card .card-body .card-title i {
margin-right: 0.5rem;
color: #036EB8;
}
.card .card-body .card-text {
color: #333;
font-weight: bold;
margin-bottom: 0.5rem;
}
.card .card-body .card-subtitle {
font-size: 0.9rem;
}
.system_card h5 {
margin: 2rem 0 1.5rem;
}
.system_card h5::before {
content: "■";
margin-right: 8px;
}
.system_card .btn {
margin-bottom: 2rem;
}
.student_page {
position: relative;
z-index: 1;
}
.student_page .container {
position: relative;
z-index: 2;
}
.student_page a,
.student_page button {
position: relative;
z-index: 3;
}
.student_page .lesson-card {
cursor: pointer;
}
.student_page .lesson-card:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
.school-layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto;
}
.side-menu {
min-height: 100vh;
height: 100%;
border-right: 1px solid #dee2e6;
}
.side-menu .list-group {
margin: 0 auto;
}
.side-menu .list-group li {
margin: 8px 0 !important;
padding: 8px 0 !important;
list-style-type: none;
}
.side-menu .list-group li a {
text-decoration: none;
}
.side-menu .list-group-item {
padding-left: 0 !important;
}
.side-menu .list-group-item.dropdown-toggle {
width: 100%;
text-align: left;
display: flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
}
.side-menu .list-group-item.dropdown-toggle::after {
content: '\f107';
font-family: 'Line Awesome Free';
font-weight: 900;
margin-left: auto;
transition: transform 0.3s ease;
}
.side-menu .list-group-item.dropdown-toggle[aria-expanded="true"] {
color: #036EB8;
}
.side-menu .list-group-item.dropdown-toggle[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.side-menu .list-group-item.dropdown-toggle i {
margin-right: 0.75rem;
color: #036EB8;
}
.side-menu .collapse {
transition: all 0.3s ease-in-out;
max-height: 0;
overflow: hidden;
}
.side-menu .collapse.show {
max-height: 500px;
}
.side-menu .collapse .sub-menu {
padding: 0 !important;
list-style: none;
}
.side-menu .collapse .sub-menu .list-group-item {
border: none;
opacity: 1;
transform: none;
transition: all 0.3s ease;
}
.side-menu .sub-menu .list-group {
padding: 0 !important;
}
.side-menu .sub-menu ul {
padding: 0 !important;
}
.side-menu .sub-menu li {
margin: 0 !important;
}
.side-menu .sub-menu li:first-of-type a {
padding-top: 0.5rem !important;
}
.side-menu .sub-menu li a {
padding-left: 2.3rem !important;
margin: 0 !important;
display: block;
color: #333;
transition: color 0.2s ease;
}
.side-menu .sub-menu li a:hover {
color: #036EB8;
}
.side-menu .list-group-item {
position: relative;
border: none;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
}
.side-menu i {
font-size: 150%;
margin-right: 16px;
color: #036EB8;
}
#gradeSelectionPopup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 1000;
}
#gradeSelectionPopup .popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white !important;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 500px;
}
#gradeSelectionPopup .popup-content h4 {
font-size: 20px;
margin-bottom: 2rem;
}
#gradeSelectionPopup .popup-content h4 i {
margin-right: 8px;
}
#gradeSelectionPopup .popup-content .btn {
margin-top: 2rem;
}
#gradeSelectionPopup .close-popup {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #036EB8;
font-size: 1.5rem;
cursor: pointer;
}
.modal-xl {
max-width: 100%;
margin: 0 auto;
}
.modal-body {
padding: 0;
}
.modal-body iframe {
width: 100%;
height: 100%;
}
.modal-content {
border-radius: 8px;
width: calc(100% - 32px);
background: transparent !important;
height: 100vh;
display: block;
margin: 0 auto;
overflow: hidden;
border-radius: 0.5rem;
}
.modal-dialog {
margin: 0 auto;
}
.modal-header {
border-bottom: none !important;
padding: 1rem;
position: relative;
color: #fff;
z-index: 1100;
border-bottom: 1px solid #dee2e6;
}
.modal-header .btn-close {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem;
margin: 0;
background-color: transparent;
border: 0;
color: #036EB8;
font-size: 1.5rem;
cursor: pointer;
}
.modal-title {
font-weight: 600;
color: #495057;
}
.modal {
display: none;
}
.modal:not(.time-slots-detail-modal) {
background-color: rgba(0, 0, 0, 0.8);
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.8);
}
.step-controls {
padding: 3rem .3rem;
}
.step-controls .lesson-info h4 {
font-size: 20px;
margin-bottom: 1rem;
}
.step-controls .lesson-info h4 span {
font-size: 14px;
color: #666;
display: block;
margin-bottom: 8px;
}
.step-controls .lesson-info p {
font-size: 14px;
margin-bottom: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: .03em;
}
.step-controls .lesson-info p span {
font-size: 14px;
color: #666;
display: block;
margin-bottom: 8px;
}
.step-controls .lesson-info .btn-info {
background: #036EB8;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
padding: 8px 16px;
border-radius: 4px;
margin-top: 2rem;
}
.step-controls .lesson-info .btn-info i {
margin-right: 8px;
}
.step-controls .lesson-info .lesson-actions {
margin-top: 2rem;
}
.step-controls .lesson-info .lesson-actions a {
background: none;
border: none;
color: #036EB8;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
padding: 0;
}
.text-truncate-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.flash-popup {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
padding: 15px 25px;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
animation: fadeInOut 3s ease-in-out forwards;
max-width: 400px;
width: auto;
}
.flash-popup.notice {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.flash-popup.alert {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.flash-popup .flash-content {
font-size: 14px;
font-weight: 500;
}
@keyframes fadeInOut {
0% {
opacity: 0;
transform: translateY(-20px);
}
10% {
opacity: 1;
transform: translateY(0);
}
90% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.announcements {
padding: 4rem 2rem;
}
.announcements h1 {
font-size: 2rem;
border-bottom: 1px solid #eee;
padding-bottom: 16px;
}
.announcements h1 span {
font-size: 14px;
display: block;
color: #888;
margin-bottom: 16px;
}
.announcements h4 i {
margin-right: 8px;
}
.announcements table {
width: 80%;
}
.announcements table th:first-child,
.announcements table td:first-child {
width: 80%;
}
.announcements table th:nth-child(2),
.announcements table td:nth-child(2) {
width: 10%;
}
.announcements table th:nth-child(3),
.announcements table td:nth-child(3) {
width: 10%;
}
.shop-announcements-show a {
background: #036EB8 !important;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
padding: 8px 16px;
border-radius: 4px;
display: block;
width: 120px;
margin: 3rem auto;
text-align: center;
}
.no-announcements {
padding: 3rem 2rem;
}
.no-announcements i {
font-size: 24px;
}
.announcements-footer {
margin-left: 2rem;
}
.announcements-footer a {
background: none;
border: none;
color: #036EB8;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
padding: 0;
}
.announcements-footer a i {
margin-right: 8px;
}
.school_contents_title {
font-size: 24px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
border-bottom: none !important;
}
.school_contents_title i {
margin-right: 8px;
}
.template .btn {
width: fit-content !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
border-radius: 4px !important;
background: #036EB8 !important;
color: #fff !important;
margin: 3rem 0 !important;
}
.import_btn {
width: fit-content !important;
padding: 12px 48px !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
border-radius: 4px !important;
background: #036EB8 !important;
margin: 3rem 0 !important;
}
.side-menu .list-group-item {
border: none;
padding: 0.75rem 1rem;
}
.side-menu .list-group-item:hover {
background-color: #e9ecef;
}
.side-menu .list-group-item.active {
background-color: #0d6efd;
color: white;
}
.side-menu .submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.side-menu .submenu.show {
max-height: 500px;
transition: max-height 0.3s ease-in;
}
.side-menu .sub-menu {
padding-left: 1rem;
}
.side-menu .sub-menu .list-group-item {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.shop-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: white;
border-bottom: 1px solid #dee2e6;
z-index: 1000;
padding: 0 20px;
}
.flash-messages {
position: fixed;
top: 70px;
right: 20px;
z-index: 1000;
}
#flash-toast {
position: fixed;
top: 32px;
right: 32px;
z-index: 9999;
min-width: 300px;
max-width: 400px;
}
#flash-toast .flash-message {
animation: fadeIn 0.5s;
}
#flash-toast .alert-success {
background-color: #d1f2eb;
border-color: #a8e6cf;
color: #0f5132;
}
#flash-toast .alert-danger {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-tabs {
margin-bottom: 20px;
}
.btn-primary {
background-color: #0d6efd;
border-color: #0d6efd;
}
.btn-primary:hover {
background-color: #0b5ed7;
border-color: #0a58ca;
}
.form-control:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.table {
margin-bottom: 0;
}
.table th {
background-color: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
.alert {
margin-bottom: 20px;
border-radius: 0.25rem;
}
.modal-footer {
border-top: 1px solid #dee2e6;
}
.withdrawal-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.withdrawal-modal .withdrawal-modal-dialog {
position: relative;
width: auto;
margin: 1.75rem auto;
max-width: 400px;
}
.withdrawal-modal .withdrawal-modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.withdrawal-modal .withdrawal-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid #dee2e6;
}
.withdrawal-modal .withdrawal-modal-header .withdrawal-modal-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0;
}
.withdrawal-modal .withdrawal-modal-header .btn-close {
padding: 0.5rem;
margin: -0.5rem -0.5rem -0.5rem auto;
background: transparent;
border: 0;
font-size: 1.5rem;
line-height: 1;
color: #000;
opacity: 0.5;
cursor: pointer;
}
.withdrawal-modal .withdrawal-modal-header .btn-close:hover {
opacity: 0.75;
}
.withdrawal-modal .withdrawal-modal-body {
position: relative;
flex: 1 1 auto;
padding: 1.5rem;
}
.withdrawal-modal .withdrawal-modal-body .form-group {
margin-bottom: 1rem;
}
.withdrawal-modal .withdrawal-modal-body .form-group .form-label {
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}
.withdrawal-modal .withdrawal-modal-body .form-group .form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.375rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.withdrawal-modal .withdrawal-modal-body .form-group .form-control:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
outline: 0;
}
.withdrawal-modal .withdrawal-modal-body .form-text {
font-size: 0.875rem;
color: #6c757d;
margin-top: 0.25rem;
}
.withdrawal-modal .withdrawal-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 1rem 1.5rem;
border-top: 1px solid #dee2e6;
gap: 0.5rem;
}
.withdrawal-modal .withdrawal-modal-footer .btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 0.375rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.withdrawal-modal .withdrawal-modal-footer .btn.btn-primary {
color: #fff;
background-color: #0d6efd;
border: 1px solid #0d6efd;
}
.withdrawal-modal .withdrawal-modal-footer .btn.btn-primary:hover {
background-color: #0b5ed7;
border-color: #0a58ca;
}
.withdrawal-modal .withdrawal-modal-footer .btn.btn-secondary {
color: #fff;
background-color: #6c757d;
border: 1px solid #6c757d;
}
.withdrawal-modal .withdrawal-modal-footer .btn.btn-secondary:hover {
background-color: #5c636a;
border-color: #565e64;
}
.modal_small {
max-width: 400px;
}
.modal_small .modal-content {
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.modal_small .modal-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid #dee2e6;
}
.modal_small .modal-body {
padding: 1.5rem;
}
.modal_small .modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid #dee2e6;
}
.modal_small .form-label {
font-weight: 600;
margin-bottom: 0.5rem;
}
.modal_small .form-control {
border-radius: 0.375rem;
}
.modal_small .btn {
border-radius: 0.375rem;
padding: 0.5rem 1rem;
}
.line-page {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 16px;
background-color: #f5f5f5;
}
.line-container {
max-width: 400px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.line-container .header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
}
.line-container .header h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.line-container .content {
padding: 20px;
}
.line-container .status-card {
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
}
.line-container .status-connected {
border-left-color: #28a745;
}
.line-container .status-disconnected {
border-left-color: #dc3545;
}
.line-container .btn {
display: block;
width: 100%;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
text-decoration: none;
text-align: center;
margin-bottom: 12px;
box-sizing: border-box;
}
.line-container .btn-primary {
background: #667eea;
color: white;
}
.line-container .btn-primary:hover {
background: #5a6fd8;
}
.line-container .btn-secondary {
background: #95a5a6;
color: white;
}
.line-container .btn-secondary:hover {
background: #7f8c8d;
}
.line-container .debug-info {
background: #e9ecef;
border-radius: 6px;
padding: 12px;
margin-top: 16px;
font-family: monospace;
font-size: 12px;
color: #495057;
}
.form-label {
font-weight: 500;
}
.form-select,
.form-control {
max-width: 100%;
}
textarea.form-control {
resize: vertical;
}
#other_lesson_container,
.other-lesson-container {
display: none;
margin-top: 10px;
}
.other-lesson-visible {
display: block !important;
margin-top: 10px;
}
footer {
background: #036EB8 !important;
padding: 3rem 0;
color: white !important;
text-align: center;
}
.school_mail_setteing {
padding: 3rem 2rem;
}
.school_mail_setteing h3 {
font-size: 1.5rem;
}
.school_mail_setteing .card {
box-shadow: none;
transition: none;
}
.school_mail_setteing .card:hover {
transition: none;
transform: none;
}
.school_mail_setteing .school_mail_setteing_content {
padding: 3rem 0;
}
.school_mail_setteing .school_mail_setteing_content .card {
margin: 80px 0;
}
.school_mail_setteing .school_mail_setteing_content .card:first-of-type {
margin-top: 0;
}
.school_mail_setteing .school_mail_setteing_content table {
width: 100%;
table-layout: fixed;
}
.school_mail_setteing .school_mail_setteing_content table th:first-of-type,
.school_mail_setteing .school_mail_setteing_content table td:first-of-type {
width: 30%;
}
.school_mail_setteing .school_mail_setteing_content table th:nth-of-type(2),
.school_mail_setteing .school_mail_setteing_content table td:nth-of-type(2) {
width: 50%;
}
.school_mail_setteing .school_mail_setteing_content table th:nth-of-type(3),
.school_mail_setteing .school_mail_setteing_content table td:nth-of-type(3) {
width: 10%;
}
.school_mail_setteing .school_mail_setteing_content table th:last-of-type,
.school_mail_setteing .school_mail_setteing_content table td:last-of-type {
width: 5%;
text-align: center;
}
.school_mail_setteing .school_mail_setteing_content table th:last-of-type .btn,
.school_mail_setteing .school_mail_setteing_content table td:last-of-type .btn {
background: none;
padding: 0;
color: red;
}
#email-fields-container table {
table-layout: fixed;
width: 100%;
}
#email-fields-container .btn {
background: none !important;
}
#email-fields-container .btn:hover {
box-shadow: none;
}
#email-fields-container .btn-primary {
background: linear-gradient(135deg, #036EB8 0%, #1a8fd9 100%) !important;
font-size: .8rem;
}