.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;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
}
.btn:hover {
  text-decoration: none;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
          box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.btn:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          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 {
  -webkit-box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
          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 {
  -webkit-box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
          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 {
  -webkit-box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
          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 {
  -webkit-box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
          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 {
  -webkit-box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25);
          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 {
  -webkit-box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.25);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group .btn {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.btn-close:hover {
  color: #666;
  background-color: rgba(0, 0, 0, 0.05);
}
.btn-close:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
          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;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
          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;
  -webkit-box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
          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;
  -webkit-box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
          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;
  -webkit-box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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);
  -webkit-appearance: none;
     -moz-appearance: none;
          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;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
          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:checked[type=checkbox] {
  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:checked[type=radio] {
  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;
  -webkit-filter: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
}
.input-group > .form-control {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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:not(:-moz-placeholder) {
  padding-top: 20px;
  padding-bottom: 8px;
}
.form-floating > .form-control:not(:-ms-input-placeholder) {
  padding-top: 20px;
  padding-bottom: 8px;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 20px;
  padding-bottom: 8px;
}
.form-floating > .form-control::-webkit-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control:-ms-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::-ms-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder {
  color: transparent;
}
.form-floating > .form-control:focus::-webkit-input-placeholder {
  color: #6c757d;
}
.form-floating > .form-control:focus::-moz-placeholder {
  color: #6c757d;
}
.form-floating > .form-control:focus:-ms-input-placeholder {
  color: #6c757d;
}
.form-floating > .form-control:focus::-ms-input-placeholder {
  color: #6c757d;
}
.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;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
}
.form-floating > .form-control:not(:-moz-placeholder) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 0.65;
  -webkit-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
          transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

@media (max-width: 576px) {
  .form-control {
    font-size: 16px;
  }
}
.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.card:hover {
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  -webkit-transition: -webkit-box-shadow 0.2s ease;
  transition: -webkit-box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease, -webkit-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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  gap: 16px;
}
.card-group .card {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  margin-bottom: 0;
}

.card-deck {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media (min-width: 576px) {
  .card-deck {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    margin-left: -8px;
    margin-right: -8px;
  }
  .card-deck .card {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0%;
            flex: 1 0 0%;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 0;
  }
}

.card-columns {
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
  orphans: 1;
  widows: 1;
}
.card-columns .card {
  display: inline-block;
  width: 100%;
  margin-bottom: 16px;
}
@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
}
@media (min-width: 768px) {
  .card-columns {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            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;
  -webkit-transition: background-color 0.2s ease;
  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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #fafafa;
  min-height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.dropzone-styled:hover {
  border-color: #007bff;
  background-color: #f8f9fa;
}
.dropzone-styled.dropzone-active {
  border-color: #28a745;
  background-color: #e8f5e9;
  -webkit-transform: scale(1.02);
          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;
  -webkit-transform: none;
          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;
  }
}
@-webkit-keyframes dropzone-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes dropzone-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.dropzone-styled.dropzone-uploading {
  -webkit-animation: dropzone-pulse 1.5s ease-in-out infinite;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-transition: opacity 0.15s ease-in-out;
  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;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 1rem;
  color: #495057;
  line-height: 1.5;
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
}

.pdf-modal .pdf-viewer-container {
  width: 100%;
  height: 100%;
  min-height: 500px;
}
.pdf-modal .pdf-viewer-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}
.pdf-modal .pdf-no-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 300px;
  background-color: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  color: #6c757d;
  font-style: italic;
}

.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;
  border-left: 4px solid #007bff;
  line-height: 1.6;
  color: #272727;
}

.loading-modal .loading-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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%;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}
.loading-modal .loading-container .loading-message {
  margin: 0;
  color: #6c757d;
  font-size: 1rem;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.modal {
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.modal.fade {
  opacity: 0;
}
.modal.show {
  opacity: 1;
}

.modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.modal:not(.show) .modal-dialog {
  -webkit-transform: translate(0, -50px);
          transform: translate(0, -50px);
}
.modal.show .modal-dialog {
  -webkit-transform: none;
          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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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;
  }
  .pdf-modal .pdf-no-content {
    background-color: #4a5568;
    border-color: #718096;
    color: #a0aec0;
  }
  .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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
          box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
  -webkit-transform: rotate(2deg) scale(1.02);
          transform: rotate(2deg) scale(1.02);
  z-index: 1000;
}

.sortable-drag {
  background: #fff3e0 !important;
  border: 2px solid #ff9800 !important;
  -webkit-box-shadow: 0 8px 16px rgba(255, 152, 0, 0.4) !important;
          box-shadow: 0 8px 16px rgba(255, 152, 0, 0.4) !important;
  -webkit-transform: rotate(-2deg) scale(0.98);
          transform: rotate(-2deg) scale(0.98);
  z-index: 1001;
}

.sortable-fallback {
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.sorting {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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;
  -webkit-box-shadow: 0 6px 12px rgba(33, 150, 243, 0.4) !important;
          box-shadow: 0 6px 12px rgba(33, 150, 243, 0.4) !important;
  -webkit-transform: rotate(1deg) scale(1.01);
          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;
  -webkit-box-shadow: 0 10px 20px rgba(255, 152, 0, 0.5) !important;
          box-shadow: 0 10px 20px rgba(255, 152, 0, 0.5) !important;
  -webkit-transform: rotate(-1deg) scale(0.99);
          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;
  -webkit-box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4) !important;
          box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4) !important;
  -webkit-transform: rotate(1deg) scale(1.01);
          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;
  -webkit-box-shadow: 0 10px 20px rgba(255, 193, 7, 0.5) !important;
          box-shadow: 0 10px 20px rgba(255, 193, 7, 0.5) !important;
  -webkit-transform: rotate(-1deg) scale(0.99);
          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;
  -webkit-box-shadow: 0 6px 12px rgba(0, 150, 136, 0.4) !important;
          box-shadow: 0 6px 12px rgba(0, 150, 136, 0.4) !important;
  -webkit-transform: rotate(1deg) scale(1.01);
          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;
  -webkit-box-shadow: 0 10px 20px rgba(103, 58, 183, 0.5) !important;
          box-shadow: 0 10px 20px rgba(103, 58, 183, 0.5) !important;
  -webkit-transform: rotate(-1deg) scale(0.99);
          transform: rotate(-1deg) scale(0.99);
  border-radius: 4px;
}

.drag-handle {
  cursor: -webkit-grab;
  cursor: grab;
  padding: 8px;
  margin-right: 8px;
  color: #6c757d;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.drag-handle:hover {
  background: #e9ecef;
  color: #495057;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  background: #dee2e6;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.drag-handle::before {
  content: "⋮⋮";
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.sortable-list {
  min-height: 50px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.sortable-list.sortable-empty {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #6c757d;
  font-style: italic;
  min-height: 100px;
}

.sortable-row {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: move;
}
.sortable-row:hover {
  background: #f8f9fa;
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}
.sortable-row.sortable-ghost {
  opacity: 0.3;
  background: #e9ecef !important;
}
.sortable-row.sortable-chosen {
  background: #e3f2fd !important;
  -webkit-box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2) !important;
          box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2) !important;
}

.sortable-card {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: move;
}
.sortable-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sortable-card.sortable-ghost {
  opacity: 0.3;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.sortable-card.sortable-chosen {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.sortable-move {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.sortable-enter-active,
.sortable-leave-active {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.sortable-enter,
.sortable-leave-to {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}

.sortable-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #007bff;
  border-radius: 1px;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  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 {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  .sortable-card:hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
}
@media (prefers-color-scheme: dark) {
  .sortable-ghost {
    border-color: #4a5568 !important;
  }
  .sortable-chosen {
    background: #1a365d !important;
    border-color: #3182ce !important;
    -webkit-box-shadow: 0 4px 8px rgba(49, 130, 206, 0.3) !important;
            box-shadow: 0 4px 8px rgba(49, 130, 206, 0.3) !important;
  }
  .sortable-drag {
    background: #744210 !important;
    border-color: #d69e2e !important;
    -webkit-box-shadow: 0 8px 16px rgba(214, 158, 46, 0.4) !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 {
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            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 {
  -ms-flex-negative: 0;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 0;
}

.lms-screen-guide-help-btn--floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99990;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
}
.lms-screen-guide-hero-toolbar__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
  -webkit-box-shadow: none;
          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;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.lesson-detail__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: 0 0 1rem;
}

.chat-page__header-row .lms-screen-guide-help-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

header .header-top .nav-list li.lms-screen-guide-header-help {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: none;
          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;
  -webkit-box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
          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 {
  -webkit-transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease;
  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;
  -webkit-box-sizing: border-box;
          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;
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
  max-height: min(45vh, calc(100vh - 32px));
  overflow-y: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.lms-screen-guide .lms-screen-guide__card--docked {
  max-height: min(38vh, calc(100vh - 48px));
  -webkit-box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
          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));
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  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;
  -ms-flex-negative: 0;
      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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#lms-screen-guide-help-modal.lms-screen-guide-help .lms-screen-guide-help__panel.modal-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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;
  -webkit-box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 24px 48px rgba(15, 23, 42, 0.14);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #e8eef4;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fbff), to(#fff));
  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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #64748b;
  font-size: 1.25rem;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 0 0 0 1px #e2e8f0;
          box-shadow: 0 0 0 1px #e2e8f0;
  -webkit-transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, -webkit-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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__picker-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-appearance: none;
  -moz-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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
#lms-screen-guide-help-modal.lms-screen-guide-help button.lms-screen-guide-help__picker-item .las {
  -ms-flex-negative: 0;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-appearance: none;
  -moz-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-left: 3px 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  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;
  -webkit-box-shadow: 0 4px 14px rgba(3, 110, 184, 0.28);
          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;
  -webkit-box-shadow: none;
          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 {
    -webkit-transition: none !important;
    transition: none !important;
  }
}
.lms-pwa-back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: opacity 0.15s ease;
  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 {
  -ms-flex-negative: 0;
      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;
  -ms-flex-item-align: start;
      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 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.lms-screen-guide-hero-toolbar > .lms-pwa-back--inline {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          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: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-negative: 0;
      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: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  -moz-appearance: none;
       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 {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-transform: 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;
  -webkit-box-shadow: none !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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -ms-flex-negative: 0;
      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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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] {
  -ms-flex-negative: 0;
      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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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 {
  -ms-flex-negative: 0;
      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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: calc(100vh - 10rem);
  min-height: calc(100dvh - 10rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: calc(100dvh - 10rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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) {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
            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 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
            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 {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 0% !important;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}
.scratch-iframe-wrapper iframe,
.scratch-iframe-wrapper .xcratch-lms-iframe {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
}
.scratch-editor-container .scratch-iframe-wrapper,
.scratch-editor-frame .scratch-iframe-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
}

.scratch-editor-container .scratch-project-container,
.scratch-editor-container .editor-loading-container {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
    height: auto !important;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  .scratch-step-row,
  .scratch-two-column,
  .scratch-editor-container > .row,
  .scratch-editor-page > .row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -ms-flex-wrap: nowrap !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] {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            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] {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            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 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: 80%;
  max-width: 80%;
  margin: 1rem auto;
  -webkit-box-sizing: border-box;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
  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);
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: 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;
  -webkit-box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
          box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  z-index: 1000;
  overflow-y: auto;
  border-right: 1px solid #dee2e6;
}
.control-panel.collapsed {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.control-panel .control-panel-content {
  padding: 20px;
  height: 100%;
}

.control-toggle {
  position: absolute;
  top: 20px;
  left: 120px;
  z-index: 1001;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

.control-panel:not(.collapsed) + .main-content .control-toggle {
  left: 270px;
}

.main-content {
  margin-left: 0;
  padding: 20px;
  -webkit-transition: margin-left 0.3s ease-in-out;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.editor-container iframe {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  height: 100% !important;
  min-height: var(--scratch-editor-min-height);
  min-height: 50dvh;
  border: none;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .control-panel {
    width: 100%;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .control-panel.collapsed {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .control-panel:not(.collapsed) {
    -webkit-transform: translateY(0);
            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;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#toggle-control-panel:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
          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: 0.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%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.teacher-trial-section {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.teacher-trial-btn:hover, .teacher-trial-btn:focus {
  -webkit-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.teacher-trial-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.teacher-trial-btn i {
  font-size: 16px;
  -ms-flex-negative: 0;
      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%;
  -webkit-box-sizing: border-box;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.lesson-overview-sidebar__panel {
  width: 100%;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 14px 12px;
  background: #f8f9fc;
  border: 1px solid #dee2e6;
  border-radius: 10px;
}
.lesson-overview-sidebar__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
  height: 100%;
}

.scratch-reload-controls-wrap {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #e9ecef;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: 80%;
  max-width: 100%;
  margin: 1rem auto;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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 {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transform: none;
          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: 0.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;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.coding-editor-container .row .col-2 .solution-copy-card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.coding-editor-container .row .col-2 .solution-copy-card-filename {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-left: 1px solid #dee2e6;
  background: #f1f3f4;
  color: #5f6368;
  cursor: pointer;
  -webkit-transition: background 0.15s, color 0.15s;
  transition: background 0.15s, color 0.15s;
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.coding-editor-container .row .col-2 .coding-controls .file-controls .btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.coding-editor-container .row .col-2 .coding-controls .action-buttons .btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.coding-editor-container .row .col-10 .main-contents {
  -webkit-box-align: start;
      -ms-flex-align: start;
          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;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.coding-editor-container .row .col-10 .editor-file-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background 0.15s, color 0.15s;
  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;
  -webkit-box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.3);
          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::-moz-selection, .coding-editor-container .row .col-10 .editor-area .CodeMirror-line *::-moz-selection, .coding-editor-container .row .col-10 .editor-area .code-pane textarea::-moz-selection {
  background: rgba(59, 130, 246, 0.5) !important;
  color: inherit !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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 2rem;
  padding: 0;
  background: #1a202c;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 8px solid #303030;
  border-radius: 24px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-box-shadow: 0 12px 24px -6px rgba(0, 12, 66, 0.25);
          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%;
  -webkit-transform: translateX(-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%;
  -webkit-transform: translateX(-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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 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;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(49, 130, 206, 0.25);
            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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  color: #495057;
  line-height: 1;
  -webkit-transition: background 0.15s, border-color 0.15s, color 0.15s;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s, border-color 0.15s, color 0.15s;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1;
  -webkit-transition: background 0.15s, -webkit-transform 0.12s, -webkit-box-shadow 0.15s;
  transition: background 0.15s, -webkit-transform 0.12s, -webkit-box-shadow 0.15s;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, -webkit-transform 0.12s, -webkit-box-shadow 0.15s;
}
.gas-ws-action-btn i {
  font-size: 1.25rem;
}
.gas-ws-action-btn:hover {
  -webkit-transform: translateY(-1px);
          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;
  -webkit-box-shadow: 0 2px 6px rgba(25, 135, 84, 0.35);
          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;
  -webkit-box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
          box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}
.gas-ws-action-btn--web:hover {
  color: #fff;
  -webkit-filter: brightness(1.05);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
}
.gas-workspace__header-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}
.gas-workspace__project-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 8px;
  background: #fff;
  color: #0d6efd;
  font-size: 1.2rem;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
  -moz-appearance: none;
       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;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.gas-workspace__header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: nowrap;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #1e1e1e;
  border-top: 1px solid #2d2d2d;
}
.gas-workspace__editor {
  position: relative;
  -ms-flex-negative: 0;
      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;
  -webkit-box-sizing: border-box;
          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 {
  -ms-flex-negative: 0;
      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;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  -ms-flex-negative: 0;
      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;
  -webkit-transition: background 0.12s, color 0.12s;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0 0.2rem 0.2rem 0.35rem;
  padding: 0;
  border: none;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background 0.15s, opacity 0.15s, -webkit-transform 0.12s, -webkit-box-shadow 0.15s;
  transition: background 0.15s, opacity 0.15s, -webkit-transform 0.12s, -webkit-box-shadow 0.15s;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, opacity 0.15s;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, opacity 0.15s, -webkit-transform 0.12s, -webkit-box-shadow 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;
  -webkit-box-shadow: 0 1px 4px rgba(22, 163, 74, 0.45);
          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%);
  -webkit-box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
          box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}
.gas-file-tab-action--run:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  -webkit-box-shadow: 0 1px 2px rgba(22, 163, 74, 0.35);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  background: #f0fdf4;
  border-bottom: 1px solid #a3cfbb;
}
.gas-lms-db__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0.4rem;
}
.gas-drive-photos__form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin: 0;
}
.gas-drive-photos__open-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      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;
  -webkit-transition: color 0.15s ease, background-color 0.15s ease;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: -webkit-filter 0.15s ease, -webkit-transform 0.1s ease;
  transition: -webkit-filter 0.15s ease, -webkit-transform 0.1s ease;
  transition: filter 0.15s ease, transform 0.1s ease;
  transition: filter 0.15s ease, transform 0.1s ease, -webkit-filter 0.15s ease, -webkit-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 {
  -webkit-filter: brightness(1.05);
          filter: brightness(1.05);
}
.gas-drive-photos__upload-btn:active {
  -webkit-transform: scale(0.99);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
}
.gas-drive-photos__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.45rem;
  padding: 0.35rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
}
.gas-drive-photos__thumb-link {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.gas-drive-photos__thumb {
  display: block;
  width: 56px;
  height: 56px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #dee2e6;
}
.gas-drive-photos__item-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
}
.gas-drive-photos__copy-btn, .gas-drive-photos__apply-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background-color 0.15s ease, color 0.15s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #6c757d;
  min-width: 4.5rem;
}
.gas-step-textbook__copy-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
          box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
}
.gas-step-guide-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem 1rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fbff), to(#fff));
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.gas-step-guide-modal__header-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.gas-step-guide-modal__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.85rem;
  padding: 16px;
}

.gas-step-guide-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  -webkit-box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
          box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.gas-step-guide-card--teacher {
  border-left: 4px solid #f59e0b;
}
.gas-step-guide-card--student {
  border-left: 4px solid #3b82f6;
}
.gas-step-guide-card--code {
  border-left: 4px solid #22c55e;
}
.gas-step-guide-card--preview {
  border-left: 4px solid #8b5cf6;
}
.gas-step-guide-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.gas-step-guide-card__head--split {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.gas-step-guide-card__head-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.gas-step-guide-card__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: #e2e8f0;
  color: #475569;
  font-size: 1rem;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.gas-step-guide__tasks li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.4rem;
}
.gas-step-guide__check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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 {
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: inset 0 0 0 2px #fff;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-gradient(linear, left top, left bottom, from(#f5f7ff), to(#fff));
  background: linear-gradient(180deg, #f5f7ff 0%, #fff 100%);
}
.gas-work-publish__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.35rem;
}
.gas-work-publish__url-link {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 0.62rem;
  line-height: 1.4;
  word-break: break-all;
  color: #0d6efd;
}
.gas-work-publish__copy-btn {
  -ms-flex-negative: 0;
      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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .gas-workspace__aside {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .gas-workspace__main {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            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;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.steps-index-container .steps-grid .step-card:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.steps-index-container .steps-grid .step-card .step-actions .btn:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
          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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            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;
  -webkit-transition: all 0.3s ease;
  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);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.step-show-container .sidebar-toggle-header i {
  margin-right: 0.4rem;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.step-show-container .sidebar-toggle-container-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.step-show-container .sidebar-toggle-container .sidebar-toggle:hover {
  background: #007bff;
  color: white;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
          box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.step-show-container .sidebar-toggle-container .sidebar-toggle i {
  margin-right: 0.5rem;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.step-show-container.sidebar-closed .sidebar-toggle {
  background: #007bff;
  color: white;
}
.step-show-container.sidebar-closed .sidebar-toggle i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.step-show-container.sidebar-closed #sidebarColumn {
  -webkit-transform: translateY(-100%);
          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;
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 !important;
          flex: 1 !important;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.step-show-container.sidebar-closed .editor-area {
  width: 100% !important;
  max-width: 100% !important;
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 !important;
          flex: 1 !important;
}
.step-show-container #sidebarColumn {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform-origin: top;
          transform-origin: top;
}
.step-show-container .col-10 {
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.step-show-container .step-controls {
  background: white;
  border-radius: 8px;
  padding: 0.5rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.step-show-container .step-controls .quiz-section .btn-primary:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
          box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.step-show-container iframe {
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.step-show-container iframe:hover {
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#evaluationModal .modal-content {
  border-radius: 12px;
  border: none;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
          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 {
  -webkit-filter: brightness(0) invert(1);
          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: 0.8rem;
}
.lesson-content ol {
  padding: 0;
}
.lesson-content ol li {
  font-size: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.grade-display-header h6 {
  font-size: 0.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;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.learning-plan-section .learning-plan-card .card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.learning-plan-section .learning-plan-card .card .card-body .btn:hover {
  -webkit-transform: translateY(-1px);
          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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin-bottom: 1.25rem;
}
.lesson-detail-hero__chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.lesson-detail-hero__file-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, border-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__course {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #64748b;
}
.lesson-detail-hero__course-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.lesson-detail-hero__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 8px 18px rgba(3, 110, 184, 0.22);
          box-shadow: 0 8px 18px rgba(3, 110, 184, 0.22);
}
.lesson-detail-hero__title-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.lesson-detail-hero__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.35;
  color: #0f172a;
}
.lesson-detail-hero__edit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 0.35rem;
  border-radius: 8px;
  background: #f1f5f9;
  color: #036eb8;
  vertical-align: middle;
  text-decoration: none;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.lesson-detail-hero__edit:hover {
  background: #e2e8f0;
  color: #025a96;
}
.lesson-detail-hero__type-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .admin-step-management .step-actions .btn-create-step {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.lessons-content {
  padding: 3rem 2rem;
  min-height: 100vh;
  height: 100%;
}
.lessons-content .lesson-card {
  -webkit-box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1);
          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: 0.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: 0.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: 0.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: 0.8rem !important;
}
.lessons-content .lesson-card .lesson-actions a {
  background: #036EB8;
  color: white;
  border: none;
  font-size: 0.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 0.8rem;
  border-radius: 50%;
  font-size: 0.9rem;
  text-align: center;
}

.grade-settings-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.grade-settings-row .btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}

.grade-display-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.grade-display-section .current-grades-display .selected-grades .badge {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.grade-display-section .current-grades-display .selected-grades .text-muted {
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.grade-display-section .grade-display-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.grade-display-section .grade-display-header h6 {
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.grade-display-section .grade-display-header .current-grades-display {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media (max-width: 768px) {
  .grade-settings-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
  .grade-settings-row .btn {
    -ms-flex-item-align: start;
        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: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

.justify-content-start {
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
}

.justify-content-end {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.justify-content-center {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

.justify-content-between {
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
      justify-content: space-around !important;
}

.align-items-start {
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

.align-items-end {
  -webkit-box-align: end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
}

.align-items-center {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.align-items-baseline {
  -webkit-box-align: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important;
}

.align-items-stretch {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}

.flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
}

.flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
      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 {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) !important;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg {
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.shadow-none {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

@media (max-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    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: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
@media (min-width: 769px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
/* Reset CSS */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
a:hover {
  color: rgb(2.1818181818, 80, 133.8181818182);
}

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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.col-1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 8.3333333333%;
          flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16.6666666667%;
          flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.3333333333%;
          flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 41.6666666667%;
          flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 58.3333333333%;
          flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 66.6666666667%;
          flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 83.3333333333%;
          flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 91.6666666667%;
          flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media screen and (min-width: 0) {
  .col-xs-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.3333333333%;
            flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-xs-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.6666666667%;
            flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-xs-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xs-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333333%;
            flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-xs-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-xs-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xs-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.3333333333%;
            flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-xs-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.6666666667%;
            flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-xs-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xs-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 83.3333333333%;
            flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-xs-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 91.6666666667%;
            flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-xs-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 576px) {
  .col-sm-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.3333333333%;
            flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.6666666667%;
            flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333333%;
            flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.3333333333%;
            flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.6666666667%;
            flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 83.3333333333%;
            flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 91.6666666667%;
            flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .col-md-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.3333333333%;
            flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.6666666667%;
            flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333333%;
            flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.3333333333%;
            flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.6666666667%;
            flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 83.3333333333%;
            flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 91.6666666667%;
            flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .col-lg-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.3333333333%;
            flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.6666666667%;
            flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333333%;
            flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.3333333333%;
            flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.6666666667%;
            flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 83.3333333333%;
            flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 91.6666666667%;
            flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .col-xl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.3333333333%;
            flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-xl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.6666666667%;
            flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-xl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333333%;
            flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-xl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-xl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.3333333333%;
            flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-xl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.6666666667%;
            flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-xl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 83.3333333333%;
            flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-xl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 91.6666666667%;
            flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-xl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 1400px) {
  .col-xxl-1 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.3333333333%;
            flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-xxl-2 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.6666666667%;
            flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-xxl-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xxl-4 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333333%;
            flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-xxl-5 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.6666666667%;
            flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-xxl-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xxl-7 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.3333333333%;
            flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-xxl-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.6666666667%;
            flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-xxl-9 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xxl-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 83.3333333333%;
            flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-xxl-11 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 91.6666666667%;
            flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-xxl-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.justify-content-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.justify-content-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.justify-content-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-content-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.justify-content-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.align-items-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.align-items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.align-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-items-baseline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.align-items-stretch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.flex-fill {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.flex-grow-1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.flex-shrink-1 {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}

.order-first {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
      -ms-flex-order: 13;
          order: 13;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
      -ms-flex-order: 9;
          order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}

.order-11 {
  -webkit-box-ordinal-group: 12;
      -ms-flex-order: 11;
          order: 11;
}

.order-12 {
  -webkit-box-ordinal-group: 13;
      -ms-flex-order: 12;
          order: 12;
}

header .container-fluid {
  padding: 0;
}
header .container-fluid .header-top {
  padding: 1rem;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
header .container-fluid .header-top .logo-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .container-fluid .header-top nav .nav-list .btn {
  padding: 0.5rem 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  padding: 0.5rem 0.5rem !important;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.operation-list li a, .operation-list li button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: none;
  color: #666;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.badge-primary {
  background-color: #036EB8;
}
.badge-primary:hover {
  background-color: rgb(2.1818181818, 80, 133.8181818182);
}

.badge-secondary {
  background-color: #6c757d;
}
.badge-secondary:hover {
  background-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
}

.badge-success {
  background-color: #28a745;
}
.badge-success:hover {
  background-color: rgb(30.1449275362, 125.8550724638, 52);
}

.badge-danger {
  background-color: #dc3545;
}
.badge-danger:hover {
  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
}

.badge-warning {
  background-color: #ffc107;
  color: #000;
}
.badge-warning:hover {
  background-color: rgb(211, 158.25, 0);
}

.badge-info {
  background-color: #17a2b8;
}
.badge-info:hover {
  background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
}

.badge-light {
  background-color: #f8f9fa;
  color: #000;
}
.badge-light:hover {
  background-color: rgb(218.25, 223.5, 228.75);
}

.badge-dark {
  background-color: #343a40;
}
.badge-dark:hover {
  background-color: rgb(29.1379310345, 32.5, 35.8620689655);
}

.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;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

.badge-top-left {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.badge-pulse {
  -webkit-animation: pulse 2s infinite;
          animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: 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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background-color 0.2s, color 0.2s;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: 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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.notification-btn-65__badge[hidden] {
  display: none !important;
}

.nav-list li:has(.notification-btn-65) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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;
  -webkit-box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 24px 48px rgba(15, 23, 42, 0.14);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #e8eef4;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fbff), to(#fff));
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}
.notification-modal .notification-modal__header-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #64748b;
  font-size: 1.25rem;
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 0 0 0 1px #e2e8f0;
          box-shadow: 0 0 0 1px #e2e8f0;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  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 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.notification-modal .notification-modal__item {
  margin: 0;
}
.notification-modal .notification-modal__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e8eef4;
  background: #f6f9fc;
  color: inherit;
  text-decoration: none;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.notification-modal .notification-modal__card:hover {
  background: #eef6fc;
  border-color: #cfe3f3;
  color: inherit;
  -webkit-box-shadow: 0 4px 12px rgba(3, 110, 184, 0.08);
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e8f4fc;
  color: #036eb8;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.35rem;
}
.notification-modal .notification-modal__card-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      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;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  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;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
          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;
}

.period-type-message {
  display: none;
}

.period-selector {
  display: none !important;
}

.period-selector.show,
.period-selector[style*="display: block"] {
  display: block !important;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

#custom_period_selector .date_input,
.period-selector .date_input {
  min-width: 200px;
  margin: 0 8px;
}
#custom_period_selector .date_input .form-label,
.period-selector .date_input .form-label {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
#custom_period_selector .date_input .form-control[type=date],
.period-selector .date_input .form-control[type=date] {
  min-width: 200px;
  width: 100%;
  padding: 0.2rem 0.75rem;
  font-size: 1.1rem;
  border-radius: 6px;
  border: 1px solid #ced4da;
  min-height: 48px;
}

.period-input {
  width: 200px;
}

.holiday-input {
  width: 200px;
}

.holiday_input-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.holiday_input-row .holiday_date-field {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  min-width: 180px;
}
.holiday_input-row .holiday_date-field .form-label {
  display: block;
  margin-bottom: 0.35rem;
}
.holiday_input-row .holiday_date-field .holiday-input {
  width: 100%;
  min-width: 180px;
  max-width: 220px;
  min-height: 36px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.4rem 1rem !important;
  margin-left: 0 !important;
}
.holiday_input-row .holiday_add-btn-wrap {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.holiday_input-row .holiday_add-btn-wrap .btn {
  white-space: nowrap;
  min-height: 38px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.375rem 0.75rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #036EB8 !important;
  color: white !important;
  border: none !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
  margin-left: 0 !important;
}

.time_slots.d-none {
  display: none !important;
}
.time_slots.d-block {
  display: block !important;
}

.day_header .day_heading {
  font-weight: 600;
  color: #333;
}

.time_slot_table {
  font-size: 0.9rem;
}
.time_slot_table td {
  padding: 0.5rem;
  vertical-align: middle;
}

.add_time_button {
  background: #007bff;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.add_time_button:hover {
  background: #0056b3;
}

.remove-time-slot {
  background: #dc3545;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.remove-time-slot:hover {
  background: #c82333;
}

.holiday_tags .holiday_tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0.25rem;
}
.holiday_tags .holiday_tag .holiday_tag-remove {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.2rem;
  margin-left: 0.35rem;
  background: transparent;
  border: none;
  color: #495057;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.holiday_tags .holiday_tag .holiday_tag-remove i {
  font-size: 1rem;
}
.holiday_tags .holiday_tag .holiday_tag-remove:hover {
  color: #dc3545;
  background: rgba(0, 0, 0, 0.06);
}

.setting_box {
  background: #f8f9fa;
  border-radius: 0.375rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.setting_box h5 {
  color: #495057;
  margin-bottom: 1rem;
  font-weight: 600;
}
.setting_box h6 {
  color: #6c757d;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.page-reservation-slots {
  padding: 1.25rem 1.5rem 2rem !important;
  background: #f1f5f9 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 14px;
}
.page-reservation-slots .setting_box {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
}
.page-reservation-slots .reservation-slots-hero {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(125deg, #013d66 0%, #036eb8 45%, #0891d4 100%);
  border-radius: 16px;
  color: #fff;
  -webkit-box-shadow: 0 16px 40px rgba(1, 61, 102, 0.28);
          box-shadow: 0 16px 40px rgba(1, 61, 102, 0.28);
  overflow: hidden;
}
.page-reservation-slots .reservation-slots-hero__glow {
  position: absolute;
  top: -40%;
  right: -8%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 68%);
  pointer-events: none;
}
.page-reservation-slots .reservation-slots-hero__content {
  position: relative;
  z-index: 1;
}
.page-reservation-slots .reservation-slots-hero__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.page-reservation-slots .reservation-slots-hero__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
}
.page-reservation-slots .reservation-slots-hero__title i {
  font-size: 1.35rem;
  opacity: 0.95;
}
.page-reservation-slots .reservation-slots-hero__lead {
  margin: 0 0 1rem;
  max-width: 52ch;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}
.page-reservation-slots .reservation-slots-hero__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-reservation-slots .reservation-slots-hero__steps li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.page-reservation-slots .reservation-slots-hero__steps li span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.65rem;
  font-weight: 800;
}
.page-reservation-slots .reservation-slots-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.75fr);
  gap: 1.25rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 1200px) {
  .page-reservation-slots .reservation-slots-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-reservation-slots .reservation-slots-layout__main {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}
.page-reservation-slots .reservation-slots-layout__aside {
  position: sticky;
  top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media (max-width: 1200px) {
  .page-reservation-slots .reservation-slots-layout__aside {
    position: static;
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
.page-reservation-slots .reservation-slots-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
.page-reservation-slots .reservation-slots-section--weekly .reservation-slots-section__step {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  -webkit-box-shadow: 0 4px 12px rgba(13, 148, 136, 0.32);
          box-shadow: 0 4px 12px rgba(13, 148, 136, 0.32);
}
.page-reservation-slots .reservation-slots-section--weekly .reservation-slots-section__head {
  border-left: 4px solid #14b8a6;
}
.page-reservation-slots .reservation-slots-section--period .reservation-slots-section__head {
  border-left: 4px solid #036eb8;
}
.page-reservation-slots .reservation-slots-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.page-reservation-slots .reservation-slots-section__step {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #025a96 0%, #036eb8 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  -webkit-box-shadow: 0 4px 12px rgba(3, 110, 184, 0.28);
          box-shadow: 0 4px 12px rgba(3, 110, 184, 0.28);
}
.page-reservation-slots .reservation-slots-section__title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}
.page-reservation-slots .reservation-slots-section__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #64748b;
}
.page-reservation-slots .reservation-slots-section__body {
  padding: 1.35rem 1.5rem 1.5rem;
}
.page-reservation-slots .reservation-slots-field-group {
  margin-bottom: 1.25rem;
}
.page-reservation-slots .reservation-slots-field-group--highlight {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #e2e8f0;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.page-reservation-slots .reservation-slots-period-select.selectbox-double-arrow::before {
  top: 50%;
  -webkit-transform: translateY(calc(-100% - 3px));
          transform: translateY(calc(-100% - 3px));
}
.page-reservation-slots .reservation-slots-period-select.selectbox-double-arrow::after {
  top: 50%;
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}
.page-reservation-slots .reservation-slots-period-select .form-select {
  min-height: 48px;
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  background-color: #fff;
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page-reservation-slots .reservation-slots-period-select .form-select:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.15);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.15);
}
.page-reservation-slots .custom-periods-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.page-reservation-slots .custom-periods-list__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #93c5fd;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e40af;
  white-space: nowrap;
}
.page-reservation-slots .custom-period-add__label {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
}
.page-reservation-slots .custom-period-add__fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1rem;
}
.page-reservation-slots #custom_period_selector .date_input,
.page-reservation-slots .period-selector .date_input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 180px;
          flex: 1 1 180px;
  min-width: 160px;
  max-width: 240px;
  margin: 0;
}
.page-reservation-slots .reservation-slots-field-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
}
.page-reservation-slots .reservation-slots-field-label i {
  color: #036eb8;
  font-size: 1rem;
}
.page-reservation-slots .reservation-slots-subsection {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px dashed #e2e8f0;
}
.page-reservation-slots .reservation-slots-subsection__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.page-reservation-slots .reservation-slots-subsection__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}
.page-reservation-slots .reservation-slots-subsection__title i {
  color: #dc2626;
  font-size: 1.1rem;
}
.page-reservation-slots .holiday-clear-all-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.page-reservation-slots .holiday-clear-all-btn i {
  font-size: 0.95rem;
}
.page-reservation-slots .holiday-clear-all-btn:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
}
.page-reservation-slots .reservation-slots-empty-hint {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 0.8125rem;
  color: #94a3b8;
}
.page-reservation-slots .period-selector.show,
.page-reservation-slots .period-selector[style*="display: block"] {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 0.75rem 0 1rem;
}
.page-reservation-slots .reservation-slots-week-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (min-width: 992px) {
  .page-reservation-slots .reservation-slots-week-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-reservation-slots .reservation-slots-day-card {
  position: relative;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.85rem !important;
  background: #fff;
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
}
.page-reservation-slots .reservation-slots-day-card.is-active {
  border-color: rgba(3, 110, 184, 0.55);
  -webkit-box-shadow: 0 8px 20px rgba(3, 110, 184, 0.14);
          box-shadow: 0 8px 20px rgba(3, 110, 184, 0.14);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.page-reservation-slots .reservation-slots-day-card.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: -webkit-gradient(linear, left top, left bottom, from(#0284c7), to(#036eb8));
  background: linear-gradient(180deg, #0284c7 0%, #036eb8 100%);
}
.page-reservation-slots .reservation-slots-day-card.is-active .reservation-slots-day-card__label {
  background: #036eb8;
  color: #fff;
}
.page-reservation-slots .reservation-slots-day-card.is-active .reservation-slots-day-card__name {
  color: #0f172a;
}
.page-reservation-slots .reservation-slots-day-card.is-inactive {
  opacity: 0.65;
  background: #f1f5f9;
  -webkit-filter: grayscale(0.15);
          filter: grayscale(0.15);
}
.page-reservation-slots .reservation-slots-day-card.is-inactive .reservation-slots-day-card__label {
  background: #cbd5e1;
  color: #64748b;
}
.page-reservation-slots .reservation-slots-day-card.is-inactive .reservation-slots-day-card__name {
  color: #94a3b8;
}
.page-reservation-slots .reservation-slots-day-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.page-reservation-slots .reservation-slots-day-card__title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.page-reservation-slots .reservation-slots-day-card__label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.page-reservation-slots .reservation-slots-day-card__name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}
.page-reservation-slots .reservation-slots-day-card__switch {
  margin: 0;
}
.page-reservation-slots .reservation-slots-day-card__switch .form-check-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}
.page-reservation-slots .reservation-slots-day-card .time_slot_table {
  margin: 0;
  font-size: 0.78rem;
  table-layout: fixed;
  width: 100%;
}
.page-reservation-slots .reservation-slots-day-card .time_slot_table thead th {
  padding: 0.25rem 0.2rem 0.4rem;
  border: none;
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-reservation-slots .reservation-slots-day-card .time_slot_table thead th:last-child {
  width: 28px;
}
.page-reservation-slots .reservation-slots-day-card .time_slot_table td {
  padding: 0.35rem 0.2rem;
  vertical-align: middle;
  border: none;
}
.page-reservation-slots .reservation-slots-day-card .time_slot_table td.time-slot-action {
  width: 28px;
  padding-left: 0;
  text-align: center;
}
.page-reservation-slots .reservation-slots-day-card .time_slot_table .form-control {
  min-height: 36px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border-radius: 6px;
  border-color: #cbd5e1;
}
.page-reservation-slots .reservation-slots-day-card .time-slot-remove-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent !important;
  color: #dc3545;
  cursor: pointer;
  line-height: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.page-reservation-slots .reservation-slots-day-card .time-slot-remove-btn i {
  font-size: 0.95rem;
}
.page-reservation-slots .reservation-slots-day-card .time-slot-remove-btn:hover {
  background: #fee2e2 !important;
  color: #b91c1c;
}
.page-reservation-slots .reservation-slots-day-card .add_time_button {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: #eff6ff;
  color: #036eb8;
  border: 1px dashed #93c5fd;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.page-reservation-slots .reservation-slots-day-card .add_time_button:hover {
  background: #dbeafe;
}
.page-reservation-slots .reservation-slots-submit-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-top: 0.25rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  -webkit-box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
          box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}
.page-reservation-slots .reservation-slots-submit-bar__hint {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
}
.page-reservation-slots .reservation-slots-submit-bar__hint i {
  color: #036eb8;
  font-size: 1rem;
}
@media (max-width: 576px) {
  .page-reservation-slots .reservation-slots-submit-bar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .page-reservation-slots .reservation-slots-submit-bar__hint {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
  }
}
.page-reservation-slots .reservation-slots-save-btn {
  min-width: 200px;
  padding: 0.75rem 2rem !important;
  border: none !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0284c7 0%, #036eb8 100%) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  -webkit-box-shadow: 0 6px 16px rgba(3, 110, 184, 0.28);
          box-shadow: 0 6px 16px rgba(3, 110, 184, 0.28);
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.page-reservation-slots .reservation-slots-save-btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 8px 20px rgba(3, 110, 184, 0.35);
          box-shadow: 0 8px 20px rgba(3, 110, 184, 0.35);
}
.page-reservation-slots .reservation-slots-summary {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.15rem 1.2rem;
  -webkit-box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
          box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.page-reservation-slots .reservation-slots-summary__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.page-reservation-slots .reservation-slots-summary__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-reservation-slots .reservation-slots-summary__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-reservation-slots .reservation-slots-summary__title i {
  color: #036eb8;
}
.page-reservation-slots .reservation-slots-summary__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.page-reservation-slots .reservation-slots-summary__period {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}
.page-reservation-slots .reservation-slots-summary__period i {
  color: #036eb8;
}
.page-reservation-slots .reservation-slots-summary__holidays {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}
.page-reservation-slots .reservation-slots-summary__holiday-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 0.68rem;
  font-weight: 700;
}
.page-reservation-slots .reservation-slots-summary__holiday-more {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}
.page-reservation-slots .reservation-slots-stat {
  position: relative;
  padding: 0.75rem 0.55rem 0.65rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  text-align: center;
}
.page-reservation-slots .reservation-slots-stat--accent {
  background: -webkit-gradient(linear, left top, left bottom, from(#eff6ff), to(#dbeafe));
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}
.page-reservation-slots .reservation-slots-stat--accent .reservation-slots-stat__icon {
  background: #bfdbfe;
  color: #036eb8;
}
.page-reservation-slots .reservation-slots-stat--accent .reservation-slots-stat__value {
  color: #036eb8;
}
.page-reservation-slots .reservation-slots-stat--success {
  background: -webkit-gradient(linear, left top, left bottom, from(#ecfdf5), to(#d1fae5));
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
}
.page-reservation-slots .reservation-slots-stat--success .reservation-slots-stat__icon {
  background: #a7f3d0;
  color: #047857;
}
.page-reservation-slots .reservation-slots-stat--success .reservation-slots-stat__value {
  color: #047857;
}
.page-reservation-slots .reservation-slots-stat--warn {
  background: -webkit-gradient(linear, left top, left bottom, from(#fef2f2), to(#fee2e2));
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
}
.page-reservation-slots .reservation-slots-stat--warn .reservation-slots-stat__icon {
  background: #fecaca;
  color: #b91c1c;
}
.page-reservation-slots .reservation-slots-stat--warn .reservation-slots-stat__value {
  color: #dc2626;
}
.page-reservation-slots .reservation-slots-stat__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.95rem;
}
.page-reservation-slots .reservation-slots-stat__value {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
}
.page-reservation-slots .reservation-slots-stat__value small {
  margin-left: 0.1rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: inherit;
  opacity: 0.75;
}
.page-reservation-slots .reservation-slots-stat__label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}
.page-reservation-slots .reservation-slots-preview {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.page-reservation-slots .reservation-slots-preview__head {
  padding: 1rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.page-reservation-slots .reservation-slots-preview__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-reservation-slots .reservation-slots-preview__title i {
  color: #036eb8;
}
.page-reservation-slots .reservation-slots-preview__lead {
  margin: 0;
  font-size: 0.72rem;
  color: #64748b;
}
.page-reservation-slots .reservation-slots-preview__calendar {
  padding: 0.5rem;
}
.page-reservation-slots .reservation-slots-preview__calendar .monthly-calendar {
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid #e2e8f0;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-header {
  padding: 0.5rem 0.6rem;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-month-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.page-reservation-slots .reservation-slots-preview__calendar .month-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}
.page-reservation-slots .reservation-slots-preview__calendar .weekdays .weekday {
  padding: 4px 2px;
  font-size: 0.75rem;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-nav-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  text-decoration: none;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-day {
  min-height: 44px;
  padding: 3px 4px !important;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-day .date-number {
  margin-bottom: 2px;
  font-size: 0.75rem;
  line-height: 1.2;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-day .day-slots {
  margin-top: 1px;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-day.is-today {
  background: #fffbeb;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-day.is-today .date-number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: #036eb8;
  color: #fff !important;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-day.other-month {
  background: #f8fafc;
}
.page-reservation-slots .reservation-slots-preview__calendar .calendar-day.other-month .date-number {
  color: #cbd5e1 !important;
}
.page-reservation-slots .reservation-slots-preview__calendar .slot-count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.4rem;
  padding: 0.1rem 0.25rem;
  border-radius: 6px;
  background: -webkit-gradient(linear, left top, left bottom, from(#dbeafe), to(#bfdbfe));
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.page-reservation-slots .reservation-slots-preview__calendar .slot-count:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
  -webkit-box-shadow: 0 2px 8px rgba(3, 110, 184, 0.2);
          box-shadow: 0 2px 8px rgba(3, 110, 184, 0.2);
}
.page-reservation-slots .reservation-slots-preview__calendar .slot-count .count {
  font-size: 0.72rem;
  font-weight: 800;
  color: #1d4ed8;
  line-height: 1.1;
}
.page-reservation-slots .reservation-slots-preview__calendar .holiday-indicator .badge,
.page-reservation-slots .reservation-slots-preview__calendar .sunday-indicator .badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.1rem 0.28rem;
  border-radius: 4px;
}
.page-reservation-slots .reservation-slots-preview__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #94a3b8;
}
.page-reservation-slots .reservation-slots-preview__empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}
.page-reservation-slots .reservation-slots-preview__empty p {
  margin: 0;
  font-size: 0.8125rem;
}
.page-reservation-slots .holiday_tag {
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca;
}
.page-reservation-slots .holiday_tags {
  min-height: 2.5rem;
  padding: 0.65rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}

.save_button {
  background: #28a745;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.save_button:hover {
  background: #218838;
}
.save_button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.time-slots-detail-modal {
  z-index: 1060;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-height: auto;
  padding: 1.75rem 0;
  height: auto;
}
.time-slots-detail-modal.show {
  z-index: 1060;
  display: block;
}
.time-slots-detail-modal .modal-dialog {
  z-index: 1061;
  margin: auto;
  max-width: 420px;
}
.time-slots-detail-modal .modal-content {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  outline-offset: 0 !important;
}
.time-slots-detail-modal .modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: white !important;
  border-radius: 12px 12px 0 0;
}
.time-slots-detail-modal .modal-header .modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333 !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.time-slots-detail-modal .modal-header .modal-title .las.la-clock {
  margin-right: 0.35rem;
  font-size: 1.15rem;
}
.time-slots-detail-modal__close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}
.time-slots-detail-modal__close i {
  font-size: 1.15rem;
  line-height: 1;
}
.time-slots-detail-modal__close:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.time-slots-detail-modal__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0.75rem 1rem 1rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 0 0 12px 12px;
}
.time-slots-detail-modal__close-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 88px;
  padding: 0.45rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.time-slots-detail-modal__close-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.time-slots-detail-modal .modal-body {
  padding: 0rem 1rem 1.5rem !important;
  background: transparent;
  border-radius: 0 0 12px 12px;
  color: #333 !important;
}
.time-slots-detail-modal .modal-body .time-slots-detail-date {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #495057;
}
.time-slots-detail-modal .modal-body .time-slots-detail-date span {
  padding-left: 8px;
  font-size: 1.1rem;
  color: #333;
}
.time-slots-detail-modal .modal-body .time-slots-detail-date strong {
  color: #212529;
}
.time-slots-detail-modal .modal-body .table {
  margin-bottom: 0;
  width: 100%;
}
.time-slots-detail-modal .modal-body .table th {
  font-weight: 600;
  color: #212529 !important;
  border-bottom-width: 1px;
  background: none !important;
}
.time-slots-detail-modal .modal-body .table td {
  vertical-align: middle;
  text-align: center;
  padding: 8px 0;
}
.time-slots-detail-modal .modal-body .table .slot-action .slot-action-btn-icon {
  padding: 0.35rem 0.5rem;
  line-height: 1;
}
.time-slots-detail-modal .modal-body .table .slot-action .slot-action-btn-icon i {
  font-size: 0.8rem;
}
.time-slots-detail-modal .modal-body .table .slot-action .btn-outline-danger {
  color: #dc3545;
  border: none;
}
.time-slots-detail-modal .modal-body .table .slot-action .btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
}
.time-slots-detail-modal .modal-body .table .slot-action .btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
.time-slots-detail-modal .modal-body .table .slot-action .btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
}
.time-slots-detail-modal .modal-body .table-secondary {
  background-color: rgba(0, 0, 0, 0.03);
}

.page-show-slots .page-show-slots-header h4 {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 600;
}
.page-show-slots .page-show-slots-info p {
  margin-bottom: 0.5rem;
}
.page-show-slots .page-show-slots-back-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  background: #036EB8;
  font-size: 0.8rem;
  border: none;
  padding: 8px 24px;
}
.page-show-slots .page-show-slots-back-btn .las {
  font-size: 1.1rem;
}
.page-show-slots .page-show-slots-back-btn:hover {
  color: #fff;
}
.page-show-slots .page-show-slots-calendar .calendar-month-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 12px;
}
.page-show-slots .page-show-slots-calendar .month-title {
  margin-bottom: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.page-show-slots .page-show-slots-calendar .calendar-nav-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  color: #fff;
  background: none;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  -webkit-transition: background 0.2s, border-color 0.2s;
  transition: background 0.2s, border-color 0.2s;
}
.page-show-slots .page-show-slots-calendar .calendar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: #fff;
  color: #fff;
}
.page-show-slots .page-show-slots-calendar .calendar-nav-btn .las {
  font-size: 1rem;
}

.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: -webkit-fit-content;
  height: -moz-fit-content;
  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;
  border-left: 4px solid #007bff;
}
.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;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
}

.pdf-fullscreen-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.pdf-fullscreen-modal.show {
  opacity: 1;
}

.pdf-modal-dialog {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.pdf-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.pdf-modal-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 1.5rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  z-index: 1000;
}
.pdf-modal-header .pdf-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #495057;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.pdf-modal-header .pdf-modal-title i {
  color: #007bff;
}
.pdf-modal-header .pdf-modal-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.pdf-modal-header .pdf-modal-controls .btn {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}
.pdf-modal-header .pdf-modal-controls .btn i {
  margin-right: 0.25rem;
}
.pdf-modal-header .pdf-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.pdf-modal-header .pdf-modal-close:hover {
  color: #343a40;
  background-color: #e9ecef;
}
.pdf-modal-header .pdf-modal-close:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.pdf-modal-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.pdf-modal-body iframe {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: none;
  background-color: #fff;
}

@media (max-width: 768px) {
  .pdf-modal-header {
    padding: 0.75rem 1rem;
  }
  .pdf-modal-header .pdf-modal-title {
    font-size: 1.1rem;
  }
  .pdf-modal-header .pdf-modal-close {
    font-size: 1.25rem;
  }
}
.pdf-fullscreen-modal.show {
  -webkit-animation: fadeIn 0.3s ease-in-out;
          animation: fadeIn 0.3s ease-in-out;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pdf-no-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  background-color: #f8f9fa;
}
.pdf-no-content p {
  color: #6c757d;
  font-size: 1.1rem;
  margin: 0;
}

.modal-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

.pdf-modal-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.pdf-modal-controls .btn {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}
.pdf-modal-controls .btn i {
  margin-right: 0.25rem;
}

.pdf-modal iframe[src*="mozilla.github.io/pdf.js"]::before, .pdf-modal iframe[src*="mozilla.github.io/pdf.js"]::after {
  display: none !important;
}

.pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + .toolbar, .pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + .secondaryToolbar, .pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + .findbar, .pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + .sidebarContainer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + *[class*=toolbar], .pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + *[class*=Toolbar], .pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + *[id*=toolbar], .pdf-modal iframe[src*="mozilla.github.io/pdf.js"] + *[id*=Toolbar] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.pdf-modal iframe + *[class*=toolbar], .pdf-modal iframe + *[class*=Toolbar], .pdf-modal iframe + *[id*=toolbar], .pdf-modal iframe + *[id*=Toolbar], .pdf-modal iframe + *[class*=nav], .pdf-modal iframe + *[class*=Nav], .pdf-modal iframe + *[id*=nav], .pdf-modal iframe + *[id*=Nav], .pdf-modal iframe + *[class*=control], .pdf-modal iframe + *[class*=Control], .pdf-modal iframe + *[id*=control], .pdf-modal iframe + *[id*=Control] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -9999 !important;
}

.pdf-modal *[class*=toolbar],
.pdf-modal *[class*=Toolbar],
.pdf-modal *[id*=toolbar],
.pdf-modal *[id*=Toolbar],
.pdf-modal *[class*=nav],
.pdf-modal *[class*=Nav],
.pdf-modal *[id*=nav],
.pdf-modal *[id*=Nav],
.pdf-modal *[class*=control],
.pdf-modal *[class*=Control],
.pdf-modal *[id*=control],
.pdf-modal *[id*=Control],
.pdf-modal *[class*=menu],
.pdf-modal *[class*=Menu],
.pdf-modal *[id*=menu],
.pdf-modal *[id*=Menu] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -9999 !important;
}

.pdf-modal .toolbar,
.pdf-modal .Toolbar,
.pdf-modal .navigation,
.pdf-modal .Navigation,
.pdf-modal .controls,
.pdf-modal .Controls,
.pdf-modal .menu,
.pdf-modal .Menu,
.pdf-modal .header,
.pdf-modal .Header,
.pdf-modal .footer,
.pdf-modal .Footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -9999 !important;
}

.textbook-pdf-modal .modal-content {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.textbook-pdf-modal__body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.textbook-pdf-modal__frame-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.textbook-pdf-modal__iframe {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
}

.pdf-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
}
.pdf-modal iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: #fff !important;
}
.pdf-modal iframe[src*=".pdf#"] + *[class*=toolbar], .pdf-modal iframe[src*=".pdf#"] + *[class*=Toolbar], .pdf-modal iframe[src*=".pdf#"] + *[id*=toolbar], .pdf-modal iframe[src*=".pdf#"] + *[id*=Toolbar] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -9999 !important;
}
.pdf-modal .pdf-modal-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: #fff !important;
}
.pdf-modal .pdf-modal-header .pdf-modal-title {
  color: #fff !important;
}
.pdf-modal .pdf-modal-header .pdf-modal-controls .btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}
.pdf-modal .pdf-modal-header .pdf-modal-controls .btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.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;
  -webkit-transition: all 0.2s ease;
  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;
}

.health-checkin {
  display: grid;
  gap: 1.25rem;
}
.health-checkin__block {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8fafc));
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.health-checkin__step-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
}
.health-checkin__step-num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: #036eb8;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.health-checkin__summary {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.health-checkin__summary-text {
  margin: 0;
  font-size: 0.8125rem;
  color: #065f46;
  line-height: 1.5;
}
.health-checkin__summary-text i {
  margin-right: 0.25rem;
  color: #059669;
}
.health-checkin__summary-text strong {
  font-weight: 800;
}
.health-checkin__comment {
  display: grid;
  gap: 0.5rem;
}
.health-checkin__comment .mental-health-comment-form {
  display: grid;
  gap: 0.5rem;
}
.health-checkin__comment-input {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.85rem 1rem;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #0f172a;
  resize: vertical;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.health-checkin__comment-input::-webkit-input-placeholder {
  color: #94a3b8;
}
.health-checkin__comment-input::-moz-placeholder {
  color: #94a3b8;
}
.health-checkin__comment-input:-ms-input-placeholder {
  color: #94a3b8;
}
.health-checkin__comment-input::-ms-input-placeholder {
  color: #94a3b8;
}
.health-checkin__comment-input::placeholder {
  color: #94a3b8;
}
.health-checkin__comment-input:focus {
  outline: none;
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 4px rgba(3, 110, 184, 0.12);
          box-shadow: 0 0 0 4px rgba(3, 110, 184, 0.12);
}
.health-checkin__comment-submit {
  justify-self: end;
  width: auto;
  min-width: 4.5rem !important;
  height: 2rem !important;
  min-height: auto;
  padding: 0.3rem 0.75rem !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}
.health-checkin__comment-success {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-size: 0.8125rem;
  color: #065f46;
  line-height: 1.5;
}
.health-checkin__comment-success i {
  margin-right: 0.2rem;
  color: #059669;
}

.health-condition-selector .health-condition-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
@media (min-width: 576px) {
  .health-condition-selector .health-condition-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
  }
}
@media (min-width: 992px) {
  .health-condition-selector .health-condition-buttons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.health-condition-selector .health-condition-buttons .health-log-form {
  display: contents;
}
.health-condition-selector .health-condition-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.2rem;
  min-height: 3.5rem;
  padding: 0.35rem 0.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  text-align: center;
}
.health-condition-selector .health-condition-btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  border-color: #93c5fd;
  -webkit-box-shadow: 0 3px 10px rgba(3, 110, 184, 0.08);
          box-shadow: 0 3px 10px rgba(3, 110, 184, 0.08);
}
.health-condition-selector .health-condition-btn.active, .health-condition-selector .health-condition-btn[aria-pressed=true] {
  border-color: #036eb8;
  background: #eff6ff;
  -webkit-box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.15);
          box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.15);
}
.health-condition-selector .health-condition-btn.active .health-condition-btn__icon, .health-condition-selector .health-condition-btn[aria-pressed=true] .health-condition-btn__icon {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
.health-condition-selector .health-condition-btn--text {
  min-height: 2.75rem;
  padding: 0.5rem 0.4rem;
  background: color-mix(in srgb, var(--health-accent, #036eb8) 8%, #fff);
  border-color: color-mix(in srgb, var(--health-accent, #036eb8) 28%, #e2e8f0);
}
.health-condition-selector .health-condition-btn--text:hover {
  border-color: var(--health-accent, #036eb8);
  background: color-mix(in srgb, var(--health-accent, #036eb8) 14%, #fff);
}
.health-condition-selector .health-condition-btn--text.active, .health-condition-selector .health-condition-btn--text[aria-pressed=true] {
  border-color: var(--health-accent, #036eb8);
  background: color-mix(in srgb, var(--health-accent, #036eb8) 18%, #fff);
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--health-accent, #036eb8) 25%, transparent);
          box-shadow: 0 0 0 2px color-mix(in srgb, var(--health-accent, #036eb8) 25%, transparent);
}
.health-condition-selector .health-condition-btn--text.active .health-condition-btn__label, .health-condition-selector .health-condition-btn--text[aria-pressed=true] .health-condition-btn__label {
  color: color-mix(in srgb, var(--health-accent, #036eb8) 75%, #0f172a);
}
.health-condition-selector .health-condition-btn--text .health-condition-btn__label {
  font-size: 0.75rem;
  line-height: 1.35;
}
.health-condition-selector .health-condition-btn__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--health-accent, #036eb8) 14%, #fff);
  color: var(--health-accent, #036eb8);
  font-size: 0.9375rem;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}
.health-condition-selector .health-condition-btn__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.25;
  word-break: keep-all;
}

.mood-selector .mood-selector__credit {
  margin-top: 0.65rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #94a3b8;
  text-align: center;
}
.mood-selector .mood-buttons {
  width: 100%;
}
.mood-selector .mood-buttons.mood-buttons--svg .mental-health-log-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr));
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
}
.mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 7.75rem;
  padding: 0.5rem 0.35rem;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  border-color: #93c5fd;
  -webkit-box-shadow: 0 6px 16px rgba(3, 110, 184, 0.1);
          box-shadow: 0 6px 16px rgba(3, 110, 184, 0.1);
}
.mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg.active, .mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg[aria-pressed=true] {
  border-color: #036eb8;
  background: #eff6ff;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.18);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.18);
}
.mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg .mood-btn__icon,
.mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg img.mood-btn__icon {
  width: auto;
  max-width: 100%;
  height: 5.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
@media (min-width: 992px) {
  .mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg .mood-btn__icon,
  .mood-selector .mood-buttons.mood-buttons--svg .mood-btn--svg img.mood-btn__icon {
    height: 6.25rem;
  }
}

.weather-selector .weather-buttons {
  width: 100%;
}
.weather-selector .weather-buttons .weather-btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  background: white;
  border: 0 !important;
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}
.weather-selector .weather-buttons .weather-btn:hover {
  border-color: #036eb8;
  background-color: #f0f8ff;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.weather-selector .weather-buttons .weather-btn.active {
  border-color: #036eb8;
  background-color: #eef8ff;
  -webkit-box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
          box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
}
.weather-selector .weather-buttons .weather-btn span {
  font-size: 14px;
  font-weight: 500;
  color: #272727;
}

.lesson-evaluation-container {
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin: 20px 0;
}

.evaluation-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  border-left: 4px solid #007bff;
}

.evaluation-item-title {
  color: #495057;
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.evaluation-item-title i {
  color: #007bff;
}

.evaluation-scores {
  margin-bottom: 16px;
}

.score-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            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;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0;
}
#admin_dashboard .system-settings-card .disaster-mode-control .disaster-mode-switch-label {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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 {
  -webkit-transform: translateX(60px);
          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;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
          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%;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      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 {
  -webkit-transition: opacity 0.3s ease;
  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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn {
  min-width: 250px;
  font-weight: 600;
  border-radius: 8px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: none;
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn:hover:not(:disabled) {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn:active:not(:disabled) {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
#admin_dashboard .system-settings-card #changeDisasterModeBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
#admin_dashboard .box {
  -webkit-box-shadow: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
          box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
}
#admin_dashboard .admin_course_contents .course-header .create_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #036EB8;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  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: rgb(2.5909090909, 95, 158.9090909091);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
          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 {
  -webkit-transition: all 0.2s ease;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  gap: 0.5rem;
  -webkit-transition: all 0.2s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
#admin_dashboard .admin_course_contents .table tbody tr td .action-buttons .btn {
  padding: 0.5rem;
  border-radius: 6px;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
          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;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: white;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-transform: rotate(45deg);
          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;
  -webkit-box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #666;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: rgb(210.9493670886, 36.5506329114, 53.2594936709);
  border-color: rgb(210.9493670886, 36.5506329114, 53.2594936709);
}
#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: rgb(2.5909090909, 95, 158.9090909091);
  border-color: rgb(2.5909090909, 95, 158.9090909091);
}
#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;
  -webkit-transition: all 0.3s ease;
  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: rgb(2.5909090909, 95, 158.9090909091);
  border-color: rgb(2.5909090909, 95, 158.9090909091);
}
#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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: rgb(210.9493670886, 36.5506329114, 53.2594936709);
  border-color: rgb(210.9493670886, 36.5506329114, 53.2594936709);
}

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.form-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#036EB8), to(#0288d1));
  background: linear-gradient(to bottom, #036EB8, #0288d1);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.form-section .section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
          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%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 3px;
  height: 1.2rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#036EB8), to(#0288d1));
  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%;
  -webkit-transform: translateY(-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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
  border-color: #036EB8;
  outline: none;
  background-color: #ffffff;
}
.form-control::-webkit-input-placeholder, .form-select::-webkit-input-placeholder {
  color: #adb5bd;
}
.form-control::-moz-placeholder, .form-select::-moz-placeholder {
  color: #adb5bd;
}
.form-control:-ms-input-placeholder, .form-select:-ms-input-placeholder {
  color: #adb5bd;
}
.form-control::-ms-input-placeholder, .form-select::-ms-input-placeholder {
  color: #adb5bd;
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(3, 110, 184, 0.05)), to(transparent));
  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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.form-actions .btn:hover::before {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.form-actions .btn.btn-primary {
  background: linear-gradient(135deg, #036EB8, #0288d1);
  border: none;
  color: white;
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.2);
          box-shadow: 0 2px 4px rgba(3, 110, 184, 0.2);
}
.form-actions .btn.btn-primary:hover {
  background: linear-gradient(135deg, #0288d1, #036EB8);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(3, 110, 184, 0.3);
          box-shadow: 0 4px 8px rgba(3, 110, 184, 0.3);
}
.form-actions .btn.btn-primary:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.2);
          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;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-actions .btn.btn-outline-secondary:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.billing-header .header-content h6 {
  font-size: 1.25rem;
  color: #2c3e50;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
          box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
}
.billing-header .header-content .header-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}
.billing-header .header-content .header-stats .stat-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-transition: all 0.3s ease;
  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 {
  -webkit-transition: all 0.2s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.1);
          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;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          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;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-animation: modalFadeIn 0.3s ease;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
}

@-webkit-keyframes modalFadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.announcements-header .header-content h6 {
  font-size: 1.25rem;
  color: #2c3e50;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
          box-shadow: 0 2px 4px rgba(3, 110, 184, 0.1);
}
.announcements-header .header-content .header-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}
.announcements-header .header-content .header-stats .stat-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.announcement-form .form-group .form-control:focus, .announcement-form .form-group .form-select:focus {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
  -webkit-transition: all 0.3s ease;
  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: rgb(2.5909090909, 95, 158.9090909091);
  border-color: rgb(2.5909090909, 95, 158.9090909091);
}
.announcement-form .form-actions .btn.btn-secondary {
  background: #6c757d;
  border-color: #6c757d;
}
.announcement-form .form-actions .btn.btn-secondary:hover {
  background: rgb(96.1802575107, 104.19527897, 111.3197424893);
  border-color: rgb(96.1802575107, 104.19527897, 111.3197424893);
}

.lesson_detileBox {
  padding: 0;
  position: relative;
}
.lesson_detileBox h6 {
  font-size: 1.25rem;
  color: #2c3e50;
  margin-bottom: 0.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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.lesson_detileBox h6 span .edit_btn:hover {
  background: rgba(3, 110, 184, 0.1);
  -webkit-transform: translateY(-2px);
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.lesson_detileBox h6 .delete_btn:hover {
  background: rgba(220, 53, 69, 0.1);
  -webkit-transform: translateY(-2px);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.lesson_detileBox ol li:last-child {
  border-bottom: none;
}
.lesson_detileBox ol li p {
  line-height: 2;
  letter-spacing: 0.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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border-radius: 6px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.lesson_detileBox ol li a:hover {
  background: #e9ecef;
  -webkit-transform: translateY(-2px);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.stepTitle span .add-link:hover {
  background: rgb(2.5909090909, 95, 158.9090909091);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding-top: 2rem;
  margin-top: 2rem;
  height: 100%;
}
#sortable-steps .lesson_listbox:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#sortable-steps .lesson_listbox .step-content {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#sortable-steps .lesson_listbox .step-content a {
  text-decoration: none;
  color: inherit;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-transition: all 0.2s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  -webkit-transition: all 0.2s ease;
  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);
  -webkit-transform: translateY(-2px);
          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);
  -webkit-transform: translateY(-2px);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #6c757d;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mt-4 .btn-secondary:hover {
  background: rgb(96.1802575107, 104.19527897, 111.3197424893);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
          box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
}
.mt-4 .btn-secondary i {
  font-size: 1.1rem;
}

.admin-container {
  display: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.75rem 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
}
#step_page .container h4 i {
  color: #036EB8;
}

.test_formContents {
  background: white;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #036EB8;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.test_formContents .submit_btn:hover {
  background: rgb(2.5909090909, 95, 158.9090909091);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: 0.03em;
}
.step_description p span {
  font-weight: 600;
  color: #2c3e50;
}
.step_description .curriculum_btn {
  display: block;
  width: 90%;
  margin: 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #036EB8;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}
.step_description .curriculum_btn:hover {
  background: #036EB8;
  color: white;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(3, 110, 184, 0.2);
          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%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: none;
  color: #036EB8;
  font-weight: 600;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.step_description .btn i {
  font-size: 1.1rem;
}

#editor-container {
  background: white;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.form-group .form-control:focus {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-transition: all 0.3s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.form-actions .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.form-actions .btn i {
  font-size: 1.1rem;
}

/* 管理者コース一覧ページ専用（.course_indexBox 内の .courseBox のみ。他ページに影響させない） */
.course_indexBox .col-3 {
  max-width: calc(25% - 16px);
  margin: 0 auto;
}

.course_indexBox .courseBox {
  height: 100%;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  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;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
          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: #fff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}
.admin-steps-content .admin-step-quiz-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fff;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.admin-steps-content .admin-step-quiz-option:hover {
  border-color: #86b7fe;
  -webkit-box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
          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: -webkit-gradient(linear, left top, right top, from(#eef6ff), color-stop(60%, #fff));
  background: linear-gradient(90deg, #eef6ff 0%, #fff 60%);
  -webkit-box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.12);
          box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.12);
}
.admin-steps-content .admin-step-quiz-option--correct:hover {
  border-color: #0a58ca;
  -webkit-box-shadow: 0 2px 10px rgba(13, 110, 253, 0.16);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -ms-flex-negative: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 1px 3px rgba(13, 110, 253, 0.35);
          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;
  -webkit-box-shadow: 0 2px 8px rgba(13, 110, 253, 0.12);
          box-shadow: 0 2px 8px rgba(13, 110, 253, 0.12);
}
.admin-steps-content .admin-step-quiz-answer-key__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.admin-steps-content .admin-step-quiz-answer-key__tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-negative: 0;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #0d6efd !important;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.admin-steps-content .admin-step-quiz-answer-key__value {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.45rem;
}
.admin-quiz-settings__field--full {
  margin-bottom: 1.25rem;
}
.admin-quiz-settings__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.admin-quiz-settings__label-text {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-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;
  -webkit-box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#3d8bfd), to(#0d6efd));
  background: linear-gradient(180deg, #3d8bfd 0%, #0d6efd 100%);
  border: 1px solid #0a58ca;
  border-radius: 999px;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 8px rgba(13, 110, 253, 0.35);
          box-shadow: 0 2px 8px rgba(13, 110, 253, 0.35);
  -webkit-transition: -webkit-transform 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: -webkit-transform 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  transition: transform 0.12s ease, box-shadow 0.12s ease, -webkit-transform 0.12s ease, -webkit-box-shadow 0.12s ease;
}
.admin-quiz-settings__submit:hover:not(:disabled) {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 14px rgba(13, 110, 253, 0.4);
          box-shadow: 0 4px 14px rgba(13, 110, 253, 0.4);
}
.admin-quiz-settings__submit:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  -webkit-transform: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}
.admin-quiz-settings__status-msg {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.admin-quiz-settings__retry {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 12px rgba(25, 135, 84, 0.08);
          box-shadow: 0 2px 12px rgba(25, 135, 84, 0.08);
}
.admin-quiz-generated__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
}
.admin-quiz-generated__count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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;
  -webkit-box-shadow: 0 1px 6px rgba(13, 110, 253, 0.08);
          box-shadow: 0 1px 6px rgba(13, 110, 253, 0.08);
}
.admin-quiz-qcard__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: -webkit-gradient(linear, left top, right top, from(#0d6efd), to(#0a58ca));
  background: linear-gradient(90deg, #0d6efd 0%, #0a58ca 100%);
  color: #fff;
}
.admin-quiz-qcard__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.admin-quiz-qcard__choice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-gradient(linear, left top, right top, from(#e8f5e9), to(#fff));
  background: linear-gradient(90deg, #e8f5e9 0%, #fff 100%);
}
.admin-quiz-qcard__choice-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
}
.admin-quiz-actions__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.6rem;
}
.admin-quiz-actions__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: -webkit-filter 0.12s ease, -webkit-transform 0.12s ease;
  transition: -webkit-filter 0.12s ease, -webkit-transform 0.12s ease;
  transition: filter 0.12s ease, transform 0.12s ease;
  transition: filter 0.12s ease, transform 0.12s ease, -webkit-filter 0.12s ease, -webkit-transform 0.12s ease;
}
.admin-quiz-actions__btn:hover:not(:disabled) {
  -webkit-filter: brightness(1.05);
          filter: brightness(1.05);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.admin-quiz-actions__btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  -webkit-transform: none;
          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::-ms-backdrop {
  background: rgba(15, 23, 42, 0.55);
}
.admin-quiz-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.admin-quiz-dialog__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 88vh;
  max-height: 900px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.admin-quiz-dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
}

.admin-quiz-dialog__close {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: auto;
  padding: 1.1rem 1.25rem;
  background: #f8fafc;
}

.admin-quiz-dialog__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid #dee2e6;
  background: #fff;
}

.admin-quiz-dialog__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      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-broadcast-announcements {
  padding: 3rem 2rem;
  min-height: 0;
}
.admin-broadcast-announcements .admin-broadcast-announcements__header {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #036EB8;
}
.admin-broadcast-announcements .admin-broadcast-announcements__header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0d1321;
  margin: 0 0 0.2rem 0;
  letter-spacing: 0.02em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__title i {
  color: #036EB8;
}
.admin-broadcast-announcements .admin-broadcast-announcements__desc {
  font-size: 0.8125rem;
  color: #495057;
  margin: 0;
  line-height: 1.3;
}
.admin-broadcast-announcements .admin-broadcast-announcements__header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-new {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #036EB8;
  border: 1px solid #036EB8;
  border-radius: 8px;
  text-decoration: none;
  -webkit-transition: background 0.2s, border-color 0.2s;
  transition: background 0.2s, border-color 0.2s;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-new:hover {
  background: #025a9a;
  border-color: #025a9a;
  color: #fff;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-new--secondary {
  background: #6c757d;
  border-color: #6c757d;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-new--secondary:hover {
  background: #5a6268;
  border-color: #545b62;
  color: #fff;
}
.admin-broadcast-announcements .admin-broadcast-announcements__summary {
  margin-bottom: 1rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__summary-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-card:hover {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-icon--blue {
  background: #e3f2fd;
  color: #036EB8;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-icon--green {
  background: #e8f5e9;
  color: #28a745;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-icon--orange {
  background: #fff3e0;
  color: #e67e22;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
}
.admin-broadcast-announcements .admin-broadcast-announcements__stat-label {
  font-size: 0.7rem;
  color: #6c757d;
  font-weight: 500;
}
.admin-broadcast-announcements .admin-broadcast-announcements__card {
  background: #fff;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  margin-top: 3rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__card--padded {
  padding: 1.5rem;
  margin-top: 0;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table-wrap {
  overflow-x: auto;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table {
  width: 100%;
  margin-bottom: 0;
  font-size: 0.9375rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table thead {
  background: #f8f9fa;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table thead tr th {
  padding: 0.65rem 0.75rem;
  font-weight: 700;
  color: #495057;
  border-bottom: 2px solid #e9ecef;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table tbody tr {
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table tbody tr:hover {
  background: #f8f9fa;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table tbody tr td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table .admin-broadcast-announcements__cell--right {
  text-align: right;
  width: 8%;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table .admin-broadcast-announcements__title-link {
  color: #036EB8;
  text-decoration: none;
  font-weight: 500;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table .admin-broadcast-announcements__title-link:hover {
  text-decoration: underline;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table .admin-broadcast-announcements__col--narrow {
  width: 15%;
  white-space: nowrap;
  min-width: 0;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table .admin-broadcast-announcements__col--status {
  min-width: 8%;
}
.admin-broadcast-announcements .admin-broadcast-announcements__table .admin-broadcast-announcements__col--date {
  min-width: 15%;
}
.admin-broadcast-announcements .admin-broadcast-announcements__badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
}
.admin-broadcast-announcements .admin-broadcast-announcements__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-edit,
.admin-broadcast-announcements .admin-broadcast-announcements__btn-delete {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-edit {
  color: #036EB8;
  background: #fff;
  border-color: #036EB8;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-edit:hover {
  background: #036EB8;
  color: #fff;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-delete {
  color: #dc3545;
  background: #fff;
  border-color: #dc3545;
  cursor: pointer;
  font: inherit;
}
.admin-broadcast-announcements .admin-broadcast-announcements__btn-delete:hover {
  background: #dc3545;
  color: #fff;
}
.admin-broadcast-announcements .admin-broadcast-announcements__show-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__show-meta-item {
  margin-left: 0.75rem;
  color: #6c757d;
}
.admin-broadcast-announcements .admin-broadcast-announcements__show-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #212529;
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e9ecef;
}
.admin-broadcast-announcements .admin-broadcast-announcements__show-content {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #495057;
  white-space: pre-wrap;
}
.admin-broadcast-announcements .admin-broadcast-announcements__show-content p {
  margin-bottom: 0.75rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__show-content p:last-child {
  margin-bottom: 0;
}
.admin-broadcast-announcements .admin-broadcast-announcements__empty {
  text-align: center;
  color: #6c757d;
  padding: 2.5rem 1rem;
}
.admin-broadcast-announcements .admin-broadcast-announcements__empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}
.admin-broadcast-announcements .admin-broadcast-announcements__empty p {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
}

.admin-announcement-show__content {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #0f172a;
  word-break: break-word;
}
.admin-announcement-show__content p:last-child {
  margin-bottom: 0;
}

.admin-form-page.admin-settings-page .admin-form-page__body + .admin-form-page__body {
  margin-top: 1rem;
}

.admin-list-page {
  padding: 1.5rem 1.75rem 2rem;
  min-height: 0;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 0.875rem;
}
.admin-list-page .admin-list-page__header {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #036EB8;
}
.admin-list-page .admin-list-page__header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-list-page .admin-list-page__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0d1321;
  margin: 0 0 0.2rem 0;
  letter-spacing: 0.02em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.admin-list-page .admin-list-page__title i {
  color: #036EB8;
}
.admin-list-page .admin-list-page__desc {
  font-size: 0.8125rem;
  color: #495057;
  margin: 0;
  line-height: 1.3;
}
.admin-list-page .admin-list-page__btn-new {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #036EB8;
  border: 1px solid #036EB8;
  border-radius: 8px;
  text-decoration: none;
  -webkit-transition: background 0.2s, border-color 0.2s;
  transition: background 0.2s, border-color 0.2s;
}
.admin-list-page .admin-list-page__btn-new:hover {
  background: #025a9a;
  border-color: #025a9a;
  color: #fff;
}
.admin-list-page .admin-list-page__search {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}
.admin-list-page .admin-list-page__search .admin-list-page__search-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.admin-list-page .admin-list-page__search .admin-list-page__search-input {
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  min-width: 180px;
}
.admin-list-page .admin-list-page__search .admin-list-page__search-select {
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  min-width: 140px;
}
.admin-list-page .admin-list-page__search .admin-list-page__search-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #495057;
  cursor: pointer;
}
.admin-list-page .admin-list-page__search .admin-list-page__search-btn:hover {
  background: #e9ecef;
}
.admin-list-page .admin-list-page__search .admin-list-page__search-btn--primary {
  background: #036EB8;
  border-color: #036EB8;
  color: #fff;
}
.admin-list-page .admin-list-page__search .admin-list-page__search-btn--primary:hover {
  background: #025a9a;
  border-color: #025a9a;
  color: #fff;
}
.admin-list-page .admin-list-page__summary {
  margin-bottom: 1rem;
}
.admin-list-page .admin-list-page__summary-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-list-page .admin-list-page__stat-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.admin-list-page .admin-list-page__stat-card:hover {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.admin-list-page .admin-list-page__stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.admin-list-page .admin-list-page__stat-icon--blue {
  background: #e3f2fd;
  color: #036EB8;
}
.admin-list-page .admin-list-page__stat-icon--green {
  background: #e8f5e9;
  color: #28a745;
}
.admin-list-page .admin-list-page__stat-icon--orange {
  background: #fff3e0;
  color: #e67e22;
}
.admin-list-page .admin-list-page__stat-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.admin-list-page .admin-list-page__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
}
.admin-list-page .admin-list-page__stat-label {
  font-size: 0.7rem;
  color: #6c757d;
  font-weight: 500;
}
.admin-list-page .admin-list-page__card {
  background: #fff;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  margin-top: 0.5rem;
  max-width: 100%;
}
.admin-list-page .admin-list-page__table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-list-page .admin-list-page__table {
  width: 100%;
  margin-bottom: 0;
  font-size: 0.875rem;
}
.admin-list-page .admin-list-page__table thead {
  background: #f8f9fa;
}
.admin-list-page .admin-list-page__table thead tr th {
  padding: 0.65rem 0.75rem;
  font-weight: 700;
  color: #495057;
  border-bottom: 2px solid #e9ecef;
}
.admin-list-page .admin-list-page__table tbody tr {
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.admin-list-page .admin-list-page__table tbody tr:hover {
  background: #f8f9fa;
}
.admin-list-page .admin-list-page__table tbody tr td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.admin-list-page .admin-list-page__table .admin-list-page__title-link {
  color: #036EB8;
  text-decoration: none;
  font-weight: 500;
}
.admin-list-page .admin-list-page__table .admin-list-page__title-link:hover {
  text-decoration: underline;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--name {
  width: 15%;
  min-width: 8rem;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--manager {
  width: 10%;
  white-space: nowrap;
  min-width: 7rem;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--area {
  width: 10%;
  min-width: 12rem;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--phone {
  width: 13%;
  white-space: nowrap;
  min-width: 8rem;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--count {
  width: 10%;
  white-space: nowrap;
  min-width: 6rem;
  text-align: right;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--actions {
  width: 5%;
  white-space: nowrap;
  min-width: 6rem;
  text-align: right;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--prefecture {
  width: 10%;
  white-space: nowrap;
  min-width: 6rem;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--city {
  width: 10%;
  white-space: nowrap;
  min-width: 7rem;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--email {
  width: 10%;
  min-width: 10rem;
}
.admin-list-page .admin-list-page__table.admin-list-page__table--schools .admin-list-page__col--actions {
  min-width: 7.25rem;
  width: 6.5%;
}
.admin-list-page .admin-list-page__table.admin-list-page__table--transitions {
  table-layout: fixed;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--transition-source {
  width: 40%;
  min-width: 12rem;
  vertical-align: middle;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--transition-target {
  width: 44%;
  min-width: 12rem;
  vertical-align: middle;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--transition-type {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 5rem;
  vertical-align: middle;
  text-align: center;
}
.admin-list-page .admin-list-page__table .admin-list-page__col--transition-actions {
  width: 6.75rem;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-list-page .admin-list-page__table .admin-list-page__cell-school {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem 0.35rem;
  line-height: 1.35;
}
.admin-list-page .admin-list-page__table .admin-list-page__school-type {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  font-size: 0.75rem;
  color: #6c757d;
  font-weight: 500;
}
.admin-list-page .admin-list-page__table .admin-list-page__icon-edit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #868e96;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.1rem;
  border-radius: 4px;
  -webkit-transition: color 0.15s, background 0.15s;
  transition: color 0.15s, background 0.15s;
}
.admin-list-page .admin-list-page__table .admin-list-page__icon-edit:hover {
  color: #036EB8;
  background: #e7f1fb;
}
.admin-list-page .admin-list-page__table .admin-list-page__target-placeholder {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: #6c757d;
  line-height: 1.4;
}
.admin-list-page .admin-list-page__table .admin-list-page__target-placeholder i {
  margin-top: 0.1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  opacity: 0.85;
}
.admin-list-page .admin-list-page__pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  line-height: 1.2;
}
.admin-list-page .admin-list-page__pill--success {
  color: #0f5132;
  background: #d1e7dd;
}
.admin-list-page .admin-list-page__pill--warning {
  color: #664d03;
  background: #fff3cd;
}
.admin-list-page .admin-list-page__pill--compact {
  padding: 0.12rem 0.28rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
}
.admin-list-page .admin-list-page__badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
}
.admin-list-page .admin-list-page__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 0.25rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.admin-list-page .admin-list-page__actions--borderless {
  gap: 0.15rem;
}
.admin-list-page .admin-list-page__actions--borderless .admin-list-page__btn-view,
.admin-list-page .admin-list-page__actions--borderless .admin-list-page__btn-edit,
.admin-list-page .admin-list-page__actions--borderless .admin-list-page__btn-delete {
  padding: 0.35rem;
  min-width: 2rem;
}
.admin-list-page .admin-list-page__actions--borderless .admin-list-page__btn-view {
  border: none;
  background: transparent;
  color: #495057;
}
.admin-list-page .admin-list-page__actions--borderless .admin-list-page__btn-view:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #212529;
}
.admin-list-page .admin-list-page__btn-view,
.admin-list-page .admin-list-page__btn-edit,
.admin-list-page .admin-list-page__btn-delete {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  font: inherit;
}
.admin-list-page .admin-list-page__btn-view {
  display: none;
}
.admin-list-page .admin-list-page__btn-edit,
.admin-list-page .admin-list-page__btn-delete {
  border: none;
  background: transparent;
}
.admin-list-page .admin-list-page__btn-edit {
  color: #036EB8;
}
.admin-list-page .admin-list-page__btn-edit:hover {
  background: rgba(3, 110, 184, 0.1);
  color: #025a9a;
}
.admin-list-page .admin-list-page__btn-delete {
  color: #dc3545;
}
.admin-list-page .admin-list-page__btn-delete:hover {
  background: rgba(220, 53, 69, 0.12);
  color: #b02a37;
}
.admin-list-page .admin-list-page__pagination {
  margin-top: 1rem;
  padding: 0 0.75rem 0.75rem;
}
.admin-list-page .admin-list-page__empty {
  text-align: center;
  color: #6c757d;
  padding: 2.5rem 1rem;
}
.admin-list-page .admin-list-page__empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}
.admin-list-page .admin-list-page__empty p {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
}

.admin-transition-page {
  padding: 2.5rem 2rem 3rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.admin-transition-page__header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #036EB8;
}
.admin-transition-page__header-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}
.admin-transition-page__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0d1321;
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.02em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.admin-transition-page__title i {
  color: #036EB8;
}
.admin-transition-page__desc {
  font-size: 0.8125rem;
  color: #495057;
  margin: 0;
  line-height: 1.45;
  max-width: 36rem;
}
.admin-transition-page__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.admin-transition-page__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-transition: background 0.2s, border-color 0.2s, color 0.2s;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  font-family: inherit;
  line-height: 1.2;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}
.admin-transition-page__btn--migrate {
  color: #664d03;
  background: #fff3cd;
  border-color: #e6d08c;
}
.admin-transition-page__btn--migrate:hover {
  background: #ffe69c;
  color: #523e02;
}
.admin-transition-page__btn--primary {
  color: #fff;
  background: #036EB8;
  border-color: #036EB8;
}
.admin-transition-page__btn--primary:hover {
  background: #025a9a;
  border-color: #025a9a;
  color: #fff;
}
.admin-transition-page__btn--secondary {
  color: #495057;
  background: #fff;
  border-color: #ced4da;
}
.admin-transition-page__btn--secondary:hover {
  background: #f8f9fa;
  color: #212529;
}
.admin-transition-page__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}
.admin-transition-page__card {
  background: #fff;
  padding: 1.25rem 1.35rem 1.35rem;
}
.admin-transition-page__section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #343a40;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
}
.admin-transition-page__section-title i {
  color: #036EB8;
  font-size: 1.1rem;
}
.admin-transition-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem 1.5rem;
}
.admin-transition-page__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
}
.admin-transition-page__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: none;
  letter-spacing: 0.02em;
}
.admin-transition-page__value {
  font-size: 0.9375rem;
  color: #212529;
  line-height: 1.45;
}
.admin-transition-page__value strong {
  font-weight: 700;
}
.admin-transition-page__school-type {
  font-size: 0.8rem;
  color: #6c757d;
  font-weight: 500;
}
.admin-transition-page__school-link {
  color: #036EB8;
  font-weight: 600;
  text-decoration: none;
}
.admin-transition-page__school-link:hover {
  text-decoration: underline;
}
.admin-transition-page__text-block {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #343a40;
}
.admin-transition-page__notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.admin-transition-page__notice i {
  font-size: 1.15rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.05rem;
}
.admin-transition-page__notice--info {
  background: #e7f1fb;
  color: #0c5460;
  border: 1px solid #b8daff;
}
.admin-transition-page__notice--warn {
  background: #fff8e6;
  color: #664d03;
}
.admin-transition-page__table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}
.admin-transition-page__table {
  width: 100%;
  margin: 0;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.admin-transition-page__table thead th {
  background: #f8f9fa;
  padding: 0.55rem 0.75rem;
  text-align: left;
  font-weight: 700;
  color: #495057;
  border-bottom: 2px solid #e9ecef;
  white-space: nowrap;
}
.admin-transition-page__table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.admin-transition-page__table tbody tr:last-child td {
  border-bottom: none;
}
.admin-transition-page__table tbody tr:hover {
  background: #fafbfc;
}
.admin-transition-page__pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
}
.admin-transition-page__pill--success {
  color: #0f5132;
  background: #d1e7dd;
}
.admin-transition-page__pill--warning {
  color: #664d03;
  background: #fff3cd;
}
.admin-transition-page__form-hint {
  font-size: 0.8125rem;
  color: #495057;
  line-height: 1.5;
  padding: 0.65rem 0.85rem;
  margin-top: 0.35rem;
  background: #f1f3f5;
  border-radius: 6px;
  border-left: 3px solid #036EB8;
}
.admin-transition-page__form-note {
  font-size: 0.8125rem;
  color: #6c757d;
  line-height: 1.45;
  margin: 0 0 1rem 0;
}
.admin-transition-page__form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e9ecef;
}
.admin-transition-page__errors {
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  border-radius: 8px;
  color: #842029;
}
.admin-transition-page__errors h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}
.admin-transition-page__errors ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.875rem;
}

.admin-transition-page__inline-form {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.admin-school-page__header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #036eb8;
}
.admin-school-page__header-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}
.admin-school-page__header-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 16rem;
          flex: 1 1 16rem;
  min-width: 0;
}
.admin-school-page__header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.admin-school-page__header-actions form.button_to {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
}
.admin-school-page__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0d1321;
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.02em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.admin-school-page__title i {
  color: #036eb8;
}
.admin-school-page__desc {
  font-size: 0.8125rem;
  color: #495057;
  margin: 0;
  line-height: 1.45;
  max-width: 36rem;
}
.admin-school-page__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}
.admin-school-page__card {
  background: #fff;
  padding: 1.25rem 1.35rem 1.35rem;
}
.admin-school-page__profile {
  margin-bottom: 1.35rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid #e9ecef;
}
.admin-school-page__board {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  row-gap: 0.35rem;
  margin-bottom: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  min-width: 0;
}
.admin-school-page__board-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 1ch;
  max-width: 100%;
  font-weight: 600;
  text-align: left;
  white-space: normal;
  line-height: 1.35;
}
.admin-school-page__board-pref {
  font-weight: 600;
  opacity: 0.88;
}
.admin-school-page__board-name {
  font-weight: 700;
}
.admin-school-page__name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0d1321;
  margin: 0 0 0.6rem 0;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.admin-school-page__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
}
.admin-school-page__pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  background: #e7f1fb;
  color: #036eb8;
  border: 1px solid #b8daff;
  line-height: 1.2;
}
.admin-school-page__pill--muted {
  background: #f1f3f5;
  color: #495057;
  border-color: #dee2e6;
  font-weight: 600;
}
.admin-school-page__pill--success {
  background: #d1e7dd;
  color: #0f5132;
  border-color: #badbcc;
}
.admin-school-page__pill--neutral {
  background: #e9ecef;
  color: #495057;
  border-color: #ced4da;
}
.admin-school-page__grid-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem 0;
}
.admin-school-page__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid #e9ecef;
}
.admin-school-page__toolbar .btn,
.admin-school-page__toolbar button[type=submit] {
  white-space: nowrap;
}
.admin-school-page__toolbar form.button_to {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.admin-school-page__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-transition: background 0.2s, border-color 0.2s, color 0.2s;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.admin-school-page__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.admin-school-page__btn--primary {
  color: #fff;
  background: #036eb8;
  border-color: #036eb8;
}
.admin-school-page__btn--primary:hover:not(:disabled) {
  background: #025a9a;
  border-color: #025a9a;
  color: #fff;
}
.admin-school-page__btn--secondary {
  color: #495057;
  background: #fff;
  border-color: #ced4da;
}
.admin-school-page__btn--secondary:hover:not(:disabled) {
  background: #f8f9fa;
  color: #212529;
}
.admin-school-page__btn--info {
  color: #055160;
  background: #cff4fc;
  border-color: #9eeaf9;
}
.admin-school-page__btn--info:hover:not(:disabled) {
  background: #9eeaf9;
  color: #032830;
}
.admin-school-page__btn--danger-outline {
  color: #b02a37;
  background: #fff;
  border-color: #f1aeb5;
}
.admin-school-page__btn--danger-outline:hover:not(:disabled) {
  background: #f8d7da;
  color: #842029;
}
.admin-school-page__btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.8125rem;
}
.admin-school-page__callout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.55;
  border: 1px solid #ffe69c;
  background: #fff8e6;
  color: #664d03;
}
.admin-school-page__callout-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.6rem;
}
.admin-school-page__callout-body .las {
  font-size: 1.2rem;
  color: #cc9a06;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.05rem;
}
.admin-school-page__callout-text {
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.admin-school-page__callout .admin-school-page__btn--danger-outline {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.admin-school-page__callout form.button_to {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
}
.admin-school-page__form-wrap {
  overflow: hidden;
  background: #fff;
}
.admin-school-page__form-card {
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.admin-school-page__form-card .form-container {
  padding: 1.25rem 1.35rem 0.5rem;
}
.admin-school-page__form-card .form-section:first-of-type .section-header {
  margin-top: 0;
}
.admin-school-page__form-actions {
  margin-top: 0;
  margin-bottom: 0;
  padding: 1.15rem 1.35rem 1.35rem;
  border-top: 1px solid #e9ecef;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(3, 110, 184, 0.04)), to(transparent));
  background: linear-gradient(to right, transparent, rgba(3, 110, 184, 0.04), transparent);
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  border-radius: 0 0 12px 12px;
}
.admin-school-page__form-actions .admin-school-page__btn {
  text-decoration: none;
}
.admin-school-page__form-actions .admin-school-page__btn--primary {
  min-width: 6.5rem;
}
.admin-school-page__info-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.admin-school-page__info-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) 1fr;
  gap: 0.75rem 1.25rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e9ecef;
  margin: 0;
}
.admin-school-page__info-row:last-child {
  border-bottom: none;
}
.admin-school-page__info-row:nth-child(even) {
  background: #fafbfc;
}
@media (max-width: 520px) {
  .admin-school-page__info-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}
.admin-school-page__info-row-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #6c757d;
  padding-top: 0.1rem;
}
.admin-school-page__info-row-value {
  font-size: 0.9375rem;
  color: #212529;
  line-height: 1.5;
  word-break: break-word;
  min-width: 0;
}
.admin-school-page .address-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.15rem;
}
.admin-school-page .address-info .prefecture-city {
  font-weight: 600;
}
.admin-school-page .address-info .street,
.admin-school-page .address-info .building {
  color: #343a40;
}
.admin-school-page .alert .btn {
  white-space: nowrap;
}
.admin-school-page .form-actions {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.admin-school-page .form-actions .btn,
.admin-school-page .form-actions input[type=submit],
.admin-school-page .form-actions button[type=submit] {
  white-space: nowrap;
}

.admin-textbook-hub__card {
  border: 1px solid #dee2e6;
}

.admin-textbook-hub__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0;
}
.admin-textbook-hub__actions .admin-textbook-hub__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e9ecef;
}

.tb-editor__header-center {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.tb-editor__pdf-import {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.75rem;
  background: #f0f7ff;
  border: 1px solid #c5d9f0;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #495057;
}

.tb-editor__pdf-import--muted {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #868e96;
}

.tb-editor__pdf-import-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 200px;
}

.tb-editor__pdf-import-link {
  color: #036eb8;
  text-decoration: underline;
}

.tb-editor__pdf-import-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.tb-editor__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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;
  -webkit-box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
          box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.15);
}

.tb-chapter-list__num {
  -ms-flex-negative: 0;
      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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.tb-block-toolbar__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -o-object-fit: contain;
     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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.textbook-step-row .form-control {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.textbook-icon-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-appearance: none;
  -moz-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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.tb-savebar-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
  -moz-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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
}

.html-textbook-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.35rem;
}

.html-textbook-modal__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}

.textbook-reader__course {
  margin: 0;
  font-size: 0.85rem;
  color: #6c757d;
}

.textbook-reader__title {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
}

.textbook-reader__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem;
}

.textbook-reader__main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.textbook-reader__toc {
  position: sticky;
  top: 0.75rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 11rem;
  max-width: 22rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.textbook-reader__toc-inner {
  padding: 0.65rem 0.75rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.textbook-reader__toc-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #868e96;
  margin: 0 0 0.5rem;
}

.textbook-reader__toc-item {
  margin-bottom: 0.15rem;
  list-style: none;
}

.textbook-reader__toc-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem 0.4rem 0.35rem;
  border-radius: 6px;
  text-decoration: none;
  color: #495057;
  font-size: 0.8rem;
  line-height: 1.35;
  -webkit-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.textbook-reader__toc-link:hover {
  background: #e7f1ff;
  color: #036eb8;
  text-decoration: none;
}
.textbook-reader__toc-link.is-current {
  background: #036eb8;
  border-left-color: #024a82;
  color: #fff;
  -webkit-box-shadow: 0 2px 8px rgba(3, 110, 184, 0.35);
          box-shadow: 0 2px 8px rgba(3, 110, 184, 0.35);
}

.textbook-reader__toc-item.is-current .textbook-reader__toc-num {
  color: #036eb8;
  background: #fff;
  border-radius: 4px;
  min-width: 1.35rem;
  text-align: center;
}

.textbook-reader__toc-num {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #036eb8;
  line-height: 1.35;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}

.textbook-reader__toc-title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.textbook-reader__toc-link.is-current .textbook-reader__toc-title {
  font-weight: 700;
}

.textbook-chapter {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e9ecef;
  scroll-margin-top: 1rem;
}
.textbook-chapter:last-child {
  border-bottom: none;
}

.textbook-chapter__head {
  margin-bottom: 1.25rem;
}

.textbook-chapter__num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          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: -webkit-fit-content;
  width: -moz-fit-content;
  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: 768px) {
  .textbook-reader__layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .textbook-reader__toc {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    margin-bottom: 1rem;
  }
  .textbook-reader__toc-title {
    white-space: normal;
    word-break: break-word;
  }
}
.textbook-reader .textbook-chapter__body > .textbook-block + .textbook-block {
  margin-top: 1.75rem;
}

.textbook-block {
  margin-bottom: 0;
}

.textbook-block__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.textbook-block__badge {
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 8px rgba(3, 110, 184, 0.08);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.65rem;
}

.textbook-block__step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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-left: 4px solid #ffc107;
  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-left: 4px solid #dc3545;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 !important;
  color: #0d6efd !important;
  text-align: left;
  cursor: not-allowed;
  opacity: 0.85;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.textbook-checkpoint-btn:not(:disabled):hover {
  background: #eef6ff !important;
  border-color: #0d6efd;
}

.textbook-checkpoint-btn__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 1.35rem;
  line-height: 1;
  color: #0d6efd;
}

.textbook-checkpoint-btn__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 !important;
  line-height: 1.3;
}

.textbook-checkpoint-btn--finish {
  border-color: #a3cfbb;
  background: #f4faf7 !important;
  color: #198754 !important;
}
.textbook-checkpoint-btn--finish .textbook-checkpoint-btn__icon {
  color: #198754;
}
.textbook-checkpoint-btn--finish:not(:disabled):hover {
  background: #e8f5ee !important;
  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;
}

.side-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  z-index: 1000;
}
.side-menu i {
  color: #036EB8;
  margin: 0 !important;
}

.sidebar-icons {
  width: 34%;
  padding: 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.sidebar-icon {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
          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;
}
.submenu-content.active {
  display: block;
}
.submenu-content h5 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}
.submenu-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.submenu-content li {
  margin-bottom: 8px;
}
.submenu-content a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
}

#admin_dashboard {
  font-size: 0.875rem;
  color: #0d1321;
  line-height: 1.5;
}
#admin_dashboard .col-10 {
  min-width: 0;
}

.admin-page {
  padding: 1.5rem 1.75rem 2rem;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.admin-page__header {
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #036eb8;
}

.admin-page__header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.admin-page__title {
  margin: 0 0 0.2rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0d1321;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
}
.admin-page__title i {
  color: #036eb8;
}

.admin-page__desc {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.45;
}

.admin-page__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.admin-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: 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;
  cursor: pointer;
  -webkit-transition: background 0.15s, border-color 0.15s, color 0.15s;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.admin-btn--primary {
  color: #fff;
  background: #036eb8;
  border-color: #036eb8;
}
.admin-btn--primary:hover {
  color: #fff;
  background: #025a9a;
  border-color: #025a9a;
}
.admin-btn--ghost {
  color: #475569;
  background: #fff;
  border-color: #e2e8f0;
}
.admin-btn--ghost:hover {
  background: #f8fafc;
  color: #0f172a;
}
.admin-btn--danger {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff;
}
.admin-btn--danger:hover {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}
.admin-btn--icon {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: #64748b;
  background: transparent;
  border-color: transparent;
}
.admin-btn--icon:hover {
  color: #036eb8;
  background: #eff6ff;
}
.admin-btn--icon.is-danger:hover {
  color: #dc2626;
  background: #fef2f2;
}

.admin-form-page .admin-form-page__body {
  max-width: 52rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.admin-form-page .form-label,
.admin-form-page label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}
.admin-form-page .form-control,
.admin-form-page .form-select,
.admin-form-page textarea {
  font-size: 0.875rem;
}
.admin-form-page .form-text,
.admin-form-page .text-muted,
.admin-form-page small {
  font-size: 0.8125rem;
}

.admin-card-grid {
  margin-top: 0.75rem;
}

.admin-card-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
  height: 100%;
}
.admin-card-wrap .shop-uiverse-card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
}

.admin-card-wrap__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.2rem;
  padding: 0 0.15rem;
}

.admin-card-wrap__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background 0.15s, color 0.15s;
  transition: background 0.15s, color 0.15s;
}
.admin-card-wrap__btn:hover {
  background: #eff6ff;
  color: #036eb8;
}
.admin-card-wrap__btn.is-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}
.admin-card-wrap__btn.is-success {
  color: #059669;
}
.admin-card-wrap__btn.is-muted {
  color: #94a3b8;
}

.admin-list-page__row--clickable {
  cursor: pointer;
}
.admin-list-page__row--clickable:hover {
  background: #f1f5f9 !important;
}

.admin-step-management .btn-create-step {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.3rem;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #036eb8;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #036eb8;
  text-decoration: none;
  cursor: pointer;
}
.admin-step-management .btn-create-step:hover {
  background: #025a9a;
  border-color: #025a9a;
  color: #fff;
}

.admin-system-page__section + .admin-system-page__section {
  margin-top: 1rem;
}
.admin-system-page__section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0d1321;
}
.admin-system-page__section-title i {
  color: #036eb8;
}
.admin-system-page__section-desc {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}
.admin-system-page__section-desc code {
  font-size: 0.8125rem;
  padding: 0.1rem 0.35rem;
  background: #f1f5f9;
  border-radius: 4px;
}
.admin-system-page__toggle-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.admin-system-page__toggle-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.15rem;
}
.admin-system-page__toggle-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0d1321;
}
.admin-system-page__toggle-status {
  font-size: 0.8125rem;
  font-weight: 600;
}
.admin-system-page__toggle-status.is-on {
  color: #dc2626;
}
.admin-system-page__toggle-status.is-off {
  color: #64748b;
}
.admin-system-page__switch {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  cursor: pointer;
}
.admin-system-page__switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.admin-system-page__switch-input:checked + .admin-system-page__switch-slider {
  background: #dc2626;
}
.admin-system-page__switch-input:checked + .admin-system-page__switch-slider::before {
  -webkit-transform: translateX(1.25rem);
          transform: translateX(1.25rem);
}
.admin-system-page__switch-input:focus-visible + .admin-system-page__switch-slider {
  outline: 2px solid #036eb8;
  outline-offset: 2px;
}
.admin-system-page__switch-slider {
  display: block;
  width: 2.75rem;
  height: 1.5rem;
  background: #cbd5e1;
  border-radius: 999px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.admin-system-page__switch-slider::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.admin-system-page__notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.875rem;
}
.admin-system-page__notice i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.1rem;
}
.admin-system-page__notice p {
  margin: 0;
  line-height: 1.45;
}
.admin-system-page__notice--info {
  background: #e8f4fd;
  color: #0c4a6e;
}
.admin-system-page__notice--info i {
  color: #036eb8;
}
.admin-system-page__notice--warn {
  background: #fff8e6;
  color: #854d0e;
}
.admin-system-page__notice--warn i {
  color: #ca8a04;
}
.admin-system-page__current {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #0d1321;
}
.admin-system-page__current-source {
  color: #64748b;
  font-size: 0.8125rem;
}
.admin-system-page__field {
  margin-bottom: 0.85rem;
}
.admin-system-page__input {
  max-width: 12rem;
}

.admin-search-page__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  min-height: 12rem;
  padding: 2rem;
  background: #fff;
  border: 1px dashed #e2e8f0;
  border-radius: 14px;
  color: #64748b;
  font-size: 0.875rem;
  text-align: center;
}
.admin-search-page__empty i {
  font-size: 2rem;
  color: #94a3b8;
}
.admin-search-page__empty p {
  margin: 0;
}
.admin-search-page__query {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #0d1321;
}
.admin-search-page__query-type {
  color: #64748b;
}
.admin-search-page__section {
  margin-bottom: 0.75rem;
}
.admin-search-page__section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0d1321;
}
.admin-search-page__section-title i {
  color: #036eb8;
}
.admin-search-page__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
}
.admin-search-page__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
}
.admin-search-page__row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.admin-search-page__row-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #036eb8;
}
.admin-search-page__row-meta {
  font-size: 0.8125rem;
  color: #64748b;
  white-space: nowrap;
}

.admin-list-page__search-select {
  min-width: 6.5rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #0d1321;
  background: #fff;
}

.admin-steps-content--scratch {
  padding: 0 !important;
}

.admin-steps-content--immersive {
  padding: 0 !important;
}

.admin-steps-content--preview,
.admin-steps-content--edit {
  padding: 1.25rem 1.5rem 2rem !important;
}

.admin-step-navigation .btn {
  font-size: 0.8125rem;
}

.admin-step-preview-page {
  max-width: 52rem;
  margin: 0 auto;
}

.admin-step-edit-page {
  max-width: 960px;
  margin: 0 auto;
}
.admin-step-edit-page__intro {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #036eb8;
}
.admin-step-edit-page__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
}
.admin-step-edit-page__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #036eb8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.admin-step-edit-page__badge--muted {
  color: #475569;
  background: #f8fafc;
  border-color: #e2e8f0;
}
.admin-step-edit-page__badge--step {
  color: #0f766e;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.admin-step-edit-page__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0d1321;
}
.admin-step-edit-page__desc {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}
.admin-step-edit-page__main {
  margin-top: 0.75rem;
}

.admin-settings-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .admin-settings-page__layout {
    grid-template-columns: 1fr;
  }
}
.admin-settings-page__section + .admin-settings-page__section, .admin-settings-page__layout + .admin-settings-page__section {
  margin-top: 1rem;
}
.admin-settings-page__section-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0d1321;
}
.admin-settings-page__section-title i {
  color: #036eb8;
}
.admin-settings-page__section-desc {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}
.admin-settings-page__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
}
@media (max-width: 640px) {
  .admin-settings-page__grid {
    grid-template-columns: 1fr;
  }
}
.admin-settings-page__field {
  margin: 0;
}
.admin-settings-page__field--full {
  grid-column: 1/-1;
}
.admin-settings-page__label {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}
.admin-settings-page__value {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  color: #0d1321;
  word-break: break-all;
  min-height: 1.25rem;
}
.admin-settings-page__value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
}
.admin-settings-page__hint {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: #64748b;
}
.admin-settings-page__badges {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-settings-page__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.admin-settings-page__badge--ok {
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}
.admin-settings-page__badge--warn {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.admin-settings-page__notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.admin-settings-page__notice i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.1rem;
}
.admin-settings-page__notice--info {
  background: #e8f4fd;
  color: #0c4a6e;
}
.admin-settings-page__notice--info i {
  color: #036eb8;
}
.admin-settings-page__notice--warn {
  background: #fff8e6;
  color: #854d0e;
}
.admin-settings-page__notice--warn i {
  color: #ca8a04;
}
.admin-settings-page__notice ol, .admin-settings-page__notice ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.admin-settings-page__notice li + li {
  margin-top: 0.2rem;
}
.admin-settings-page__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e8f0;
}
.admin-settings-page__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.admin-settings-page__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
}
.admin-settings-page__empty i {
  font-size: 2rem;
  color: #94a3b8;
}
.admin-settings-page__empty p {
  margin: 0;
}
.admin-settings-page .form-label,
.admin-settings-page label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}
.admin-settings-page .form-control,
.admin-settings-page .form-select,
.admin-settings-page textarea {
  font-size: 0.875rem;
}
.admin-settings-page .form-text,
.admin-settings-page small.text-muted {
  font-size: 0.8125rem;
}

.admin-line-content-table .admin-list-page__table {
  min-width: 720px;
}
.admin-line-content-table .admin-list-page__col--order {
  width: 5.5rem;
}
.admin-line-content-table .admin-list-page__col--type {
  width: 7rem;
}
.admin-line-content-table .admin-list-page__col--status {
  width: 5.5rem;
}
.admin-line-content-table .admin-list-page__order-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.2rem;
}
.admin-line-content-table .admin-list-page__order-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.admin-line-content-table .admin-list-page__order-btn:hover {
  background: #f8fafc;
  color: #036eb8;
  border-color: #cbd5e1;
}

.admin-dashboard-page__kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 1200px) {
  .admin-dashboard-page__kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .admin-dashboard-page__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.admin-dashboard-page__kpi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  color: inherit;
  -webkit-transition: border-color 0.15s, -webkit-box-shadow 0.15s, -webkit-transform 0.15s;
  transition: border-color 0.15s, -webkit-box-shadow 0.15s, -webkit-transform 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, -webkit-box-shadow 0.15s, -webkit-transform 0.15s;
}
.admin-dashboard-page__kpi:hover {
  border-color: rgba(3, 110, 184, 0.35);
  -webkit-box-shadow: 0 4px 14px rgba(3, 110, 184, 0.1);
          box-shadow: 0 4px 14px rgba(3, 110, 184, 0.1);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  color: inherit;
}
.admin-dashboard-page__kpi--blue {
  border-top: 3px solid #036eb8;
}
.admin-dashboard-page__kpi--green {
  border-top: 3px solid #06c755;
}
.admin-dashboard-page__kpi--indigo {
  border-top: 3px solid #6366f1;
}
.admin-dashboard-page__kpi--purple {
  border-top: 3px solid #8b5cf6;
  cursor: default;
}
.admin-dashboard-page__kpi--orange {
  border-top: 3px solid #f59e0b;
}
.admin-dashboard-page__kpi--teal {
  border-top: 3px solid #14b8a6;
}
.admin-dashboard-page__kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}
.admin-dashboard-page__kpi-label i {
  margin-right: 0.15rem;
}
.admin-dashboard-page__kpi-value {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
}
.admin-dashboard-page__kpi-hint {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.35;
}
.admin-dashboard-page__charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 992px) {
  .admin-dashboard-page__charts {
    grid-template-columns: 1fr;
  }
}
.admin-dashboard-page__bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 992px) {
  .admin-dashboard-page__bottom {
    grid-template-columns: 1fr;
  }
}
.admin-dashboard-page__panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  height: 100%;
}
.admin-dashboard-page__panel-head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  background: -webkit-gradient(linear, left top, left bottom, from(#fafbfc), to(#fff));
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.admin-dashboard-page__panel-head--split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
}
.admin-dashboard-page__panel-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}
.admin-dashboard-page__panel-title i {
  color: #036eb8;
}
.admin-dashboard-page__panel-desc {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
}
.admin-dashboard-page__panel-desc strong {
  color: #036eb8;
  font-weight: 700;
}
.admin-dashboard-page__panel-link {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #036eb8;
  text-decoration: none;
}
.admin-dashboard-page__panel-link:hover {
  text-decoration: underline;
}
.admin-dashboard-page__chart-wrap {
  position: relative;
  height: 13rem;
  padding: 0.65rem 0.85rem 0.85rem;
}
.admin-dashboard-page__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.85rem 1rem 1rem;
}
.admin-dashboard-page__action {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background 0.15s, border-color 0.15s, color 0.15s;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-dashboard-page__action i {
  color: #036eb8;
  font-size: 1rem;
}
.admin-dashboard-page__action:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #036eb8;
}
.admin-dashboard-page__shortcuts {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.admin-dashboard-page__shortcut {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  -webkit-transition: background 0.12s, color 0.12s;
  transition: background 0.12s, color 0.12s;
}
.admin-dashboard-page__shortcut i {
  width: 1.1rem;
  color: #036eb8;
  text-align: center;
}
.admin-dashboard-page__shortcut:hover {
  background: #f8fbff;
  color: #036eb8;
}
.admin-dashboard-page__shortcuts li:last-child .admin-dashboard-page__shortcut {
  border-bottom: none;
}
.admin-dashboard-page__activity {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-dashboard-page__activity-item {
  border-bottom: 1px solid #f1f5f9;
}
.admin-dashboard-page__activity-item:last-child {
  border-bottom: none;
}
.admin-dashboard-page__activity-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 1rem;
  text-decoration: none;
  -webkit-transition: background 0.12s;
  transition: background 0.12s;
}
.admin-dashboard-page__activity-link:hover {
  background: #f8fbff;
}
.admin-dashboard-page__activity-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
  word-break: break-word;
}
.admin-dashboard-page__activity-time {
  font-size: 0.68rem;
  color: #64748b;
}
.admin-dashboard-page__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  min-height: 10rem;
  padding: 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.8125rem;
}
.admin-dashboard-page__empty i {
  font-size: 1.75rem;
  color: #94a3b8;
}
.admin-dashboard-page__empty p {
  margin: 0;
}

#admin_dashboard .admin-dashboard-page__chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.admin-lesson-form .admin-form-page__body + .admin-form-page__body {
  margin-top: 1rem;
}
.admin-lesson-form__course-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.45rem 0.75rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #1e40af;
}
.admin-lesson-form__course-badge a {
  color: #036eb8;
  font-weight: 600;
  text-decoration: none;
}
.admin-lesson-form__course-badge a:hover {
  text-decoration: underline;
}
.admin-lesson-form__description-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.65rem;
}
@media (min-width: 768px) {
  .admin-lesson-form__description-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .admin-lesson-form__description-row textarea {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
  }
}
.admin-lesson-form__description-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-lesson-form__dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  background: #f8fafc;
  -webkit-transition: border-color 0.15s, background 0.15s;
  transition: border-color 0.15s, background 0.15s;
}
.admin-lesson-form__dropzone:hover {
  border-color: #036eb8;
  background: #eff6ff;
}
.admin-lesson-form__dropzone.file-selected {
  border-color: #16a34a;
  background: #f0fdf4;
}
.admin-lesson-form__dropzone .dz-message {
  margin: 0;
  color: #64748b;
  font-size: 0.8125rem;
}
.admin-lesson-form__dropzone .dz-message i {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.75rem;
  color: #94a3b8;
}
.admin-lesson-form__dropzone .dz-message p {
  margin: 0;
}
.admin-lesson-form__current-file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.8125rem;
}
.admin-lesson-form__current-file i {
  color: #036eb8;
}
.admin-lesson-form__current-file a {
  color: #036eb8;
  font-weight: 500;
  text-decoration: none;
}
.admin-lesson-form__current-file a:hover {
  text-decoration: underline;
}
.admin-lesson-form .lesson-type-fields {
  margin-top: 0;
}

.admin-shop-show__hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, rgba(3, 110, 184, 0.08) 0%, rgba(255, 255, 255, 0) 55%), #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
          box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}
@media (max-width: 768px) {
  .admin-shop-show__hero {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.admin-shop-show__hero-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}
.admin-shop-show__avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: linear-gradient(145deg, #036eb8 0%, #025a9a 100%);
  color: #fff;
  font-size: 1.65rem;
  -webkit-box-shadow: 0 8px 20px rgba(3, 110, 184, 0.28);
          box-shadow: 0 8px 20px rgba(3, 110, 184, 0.28);
}
.admin-shop-show__hero-body {
  min-width: 0;
}
.admin-shop-show__shop-name {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.admin-shop-show__pills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-shop-show__pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.28rem;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}
.admin-shop-show__pill i {
  font-size: 0.82rem;
}
.admin-shop-show__pill--muted {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
.admin-shop-show__pill--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}
.admin-shop-show__hero-contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.45rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 768px) {
  .admin-shop-show__hero-contacts {
    width: 100%;
  }
}
.admin-shop-show__contact {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  text-decoration: none;
  -webkit-transition: border-color 0.15s, background 0.15s;
  transition: border-color 0.15s, background 0.15s;
}
.admin-shop-show__contact i {
  color: #036eb8;
  font-size: 1rem;
}
.admin-shop-show__contact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.admin-shop-show__contact:hover {
  border-color: rgba(3, 110, 184, 0.35);
  background: #f8fbff;
  color: #036eb8;
}
.admin-shop-show__kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .admin-shop-show__kpi-grid {
    grid-template-columns: 1fr;
  }
}
.admin-shop-show__kpi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.admin-shop-show__kpi--blue {
  border-top: 3px solid #036eb8;
}
.admin-shop-show__kpi--green {
  border-top: 3px solid #06c755;
}
.admin-shop-show__kpi--orange {
  border-top: 3px solid #f59e0b;
}
.admin-shop-show__kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}
.admin-shop-show__kpi-label i {
  margin-right: 0.15rem;
  color: inherit;
}
.admin-shop-show__kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}
.admin-shop-show__kpi-value small {
  margin-left: 0.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
}
.admin-shop-show__kpi-hint {
  font-size: 0.68rem;
  color: #64748b;
}
.admin-shop-show__main-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.4fr);
  gap: 1rem;
  margin-bottom: 1rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 992px) {
  .admin-shop-show__main-grid {
    grid-template-columns: 1fr;
  }
}
.admin-shop-show__panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.admin-shop-show__panel-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #f1f5f9;
  background: -webkit-gradient(linear, left top, left bottom, from(#fafbfc), to(#fff));
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.admin-shop-show__panel-head--split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
}
.admin-shop-show__panel-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}
.admin-shop-show__panel-title i {
  color: #036eb8;
}
.admin-shop-show__count-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 700;
}
.admin-shop-show__info-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.admin-shop-show__info-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid #f1f5f9;
}
.admin-shop-show__info-item:last-child {
  border-bottom: none;
}
.admin-shop-show__info-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: #eff6ff;
  color: #036eb8;
  font-size: 1rem;
}
.admin-shop-show__info-label {
  display: block;
  margin-bottom: 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}
.admin-shop-show__info-value {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.45;
  word-break: break-word;
}
.admin-shop-show__info-value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
}
.admin-shop-show__analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 768px) {
  .admin-shop-show__analytics-grid {
    grid-template-columns: 1fr;
  }
}
.admin-shop-show__analytics-block {
  padding: 0.85rem 1rem 1rem;
  border-right: 1px solid #f1f5f9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-item-align: start;
      align-self: start;
}
.admin-shop-show__analytics-block:last-child {
  border-right: none;
}
@media (max-width: 768px) {
  .admin-shop-show__analytics-block {
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
  }
  .admin-shop-show__analytics-block:last-child {
    border-bottom: none;
  }
}
.admin-shop-show__analytics-title {
  margin: 0 0 0.15rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
}
.admin-shop-show__analytics-sub {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  color: #64748b;
}
.admin-shop-show__doughnut-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.admin-shop-show__chart-wrap {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.admin-shop-show__chart-wrap--doughnut {
  width: 7.5rem;
  height: 7.5rem;
  aspect-ratio: 1;
}
.admin-shop-show__chart-wrap--line {
  width: 100%;
  height: auto;
  aspect-ratio: 2.1/1;
  max-height: 9rem;
}
.admin-shop-show__chart-center {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  pointer-events: none;
}
.admin-shop-show__chart-center-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.admin-shop-show__chart-center-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
}
.admin-shop-show__course-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
}
.admin-shop-show__course-legend-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
}
.admin-shop-show__course-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}
.admin-shop-show__course-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-weight: 600;
}
.admin-shop-show__course-legend-count {
  color: #64748b;
  font-weight: 700;
}
.admin-shop-show__chart-empty, .admin-shop-show__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  min-height: 9rem;
  padding: 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.8125rem;
}
.admin-shop-show__chart-empty i, .admin-shop-show__empty i {
  font-size: 1.75rem;
  color: #94a3b8;
}
.admin-shop-show__chart-empty p, .admin-shop-show__empty p {
  margin: 0;
}
.admin-shop-show__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-shop-show__table {
  width: 100%;
  margin: 0;
  font-size: 0.8125rem;
  border-collapse: collapse;
}
.admin-shop-show__table thead th {
  padding: 0.65rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  text-align: left;
}
.admin-shop-show__table tbody tr {
  -webkit-transition: background 0.12s;
  transition: background 0.12s;
}
.admin-shop-show__table tbody tr:hover {
  background: #f8fbff;
}
.admin-shop-show__table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #f1f5f9;
}
.admin-shop-show__table tbody td {
  padding: 0.7rem 1rem;
  vertical-align: middle;
  color: #334155;
}
.admin-shop-show__student-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.admin-shop-show__student-avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
}
.admin-shop-show__student-name {
  font-weight: 700;
  color: #0f172a;
}
.admin-shop-show__username {
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.72rem;
}
.admin-shop-show__tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.admin-shop-show__tag--course {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.admin-shop-show__status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
.admin-shop-show__status--active {
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.admin-shop-show__status--warn {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.admin-shop-show__status--muted {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.admin-shop-show__muted {
  color: #64748b;
  font-size: 0.78rem;
}

#admin_dashboard .admin-shop-show__chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.admin-education-board-show__hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(3, 110, 184, 0.05) 45%, rgba(255, 255, 255, 0) 70%), #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
          box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}
@media (max-width: 768px) {
  .admin-education-board-show__hero {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.admin-education-board-show__hero-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}
.admin-education-board-show__avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: linear-gradient(145deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  font-size: 1.65rem;
  -webkit-box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
          box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
}
.admin-education-board-show__hero-body {
  min-width: 0;
}
.admin-education-board-show__name {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}
.admin-education-board-show__kana {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: #64748b;
}
.admin-education-board-show__pills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-education-board-show__pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.28rem;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #4338ca;
  font-size: 0.72rem;
  font-weight: 600;
}
.admin-education-board-show__pill--muted {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
.admin-education-board-show__pill--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}
.admin-education-board-show__hero-contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.45rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 768px) {
  .admin-education-board-show__hero-contacts {
    width: 100%;
  }
}
.admin-education-board-show__contact {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  text-decoration: none;
  -webkit-transition: border-color 0.15s, background 0.15s;
  transition: border-color 0.15s, background 0.15s;
}
.admin-education-board-show__contact i {
  color: #6366f1;
  font-size: 1rem;
}
.admin-education-board-show__contact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.admin-education-board-show__contact:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: #f5f3ff;
  color: #4338ca;
}
.admin-education-board-show__kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .admin-education-board-show__kpi-grid {
    grid-template-columns: 1fr;
  }
}
.admin-education-board-show__kpi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.admin-education-board-show__kpi--blue {
  border-top: 3px solid #036eb8;
}
.admin-education-board-show__kpi--green {
  border-top: 3px solid #06c755;
}
.admin-education-board-show__kpi--orange {
  border-top: 3px solid #f59e0b;
}
.admin-education-board-show__kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}
.admin-education-board-show__kpi-label i {
  margin-right: 0.15rem;
}
.admin-education-board-show__kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}
.admin-education-board-show__kpi-value small {
  margin-left: 0.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
}
.admin-education-board-show__kpi-hint {
  font-size: 0.68rem;
  color: #64748b;
}
.admin-education-board-show__main-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.5fr);
  gap: 1rem;
  margin-bottom: 1rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 992px) {
  .admin-education-board-show__main-grid {
    grid-template-columns: 1fr;
  }
}
.admin-education-board-show__panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.admin-education-board-show__panel--unlinked {
  border-top: 3px solid #f59e0b;
}
.admin-education-board-show__panel-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #f1f5f9;
  background: -webkit-gradient(linear, left top, left bottom, from(#fafbfc), to(#fff));
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.admin-education-board-show__panel-head--split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
}
.admin-education-board-show__panel-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
}
.admin-education-board-show__panel-title i {
  color: #6366f1;
}
.admin-education-board-show__count-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #4338ca;
  font-size: 0.72rem;
  font-weight: 700;
}
.admin-education-board-show__count-badge--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.admin-education-board-show__info-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.admin-education-board-show__info-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid #f1f5f9;
}
.admin-education-board-show__info-item:last-child {
  border-bottom: none;
}
.admin-education-board-show__info-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: #eef2ff;
  color: #6366f1;
  font-size: 1rem;
}
.admin-education-board-show__info-label {
  display: block;
  margin-bottom: 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}
.admin-education-board-show__info-value {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.45;
  word-break: break-word;
}
.admin-education-board-show__info-value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
}
.admin-education-board-show__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-education-board-show__table {
  width: 100%;
  margin: 0;
  font-size: 0.8125rem;
  border-collapse: collapse;
}
.admin-education-board-show__table thead th {
  padding: 0.65rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  text-align: left;
}
.admin-education-board-show__table tbody tr {
  -webkit-transition: background 0.12s;
  transition: background 0.12s;
}
.admin-education-board-show__table tbody tr:hover {
  background: #fafbff;
}
.admin-education-board-show__table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #f1f5f9;
}
.admin-education-board-show__table tbody td {
  padding: 0.7rem 1rem;
  vertical-align: middle;
  color: #334155;
}
.admin-education-board-show__col--actions {
  width: 7rem;
  text-align: right;
  white-space: nowrap;
}
.admin-education-board-show__link {
  color: #036eb8;
  font-weight: 600;
  text-decoration: none;
}
.admin-education-board-show__link:hover {
  text-decoration: underline;
}
.admin-education-board-show__tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.admin-education-board-show__count {
  font-weight: 700;
  color: #0f172a;
}
.admin-education-board-show__unlink-btn {
  font-size: 0.75rem;
  padding: 0.22rem 0.5rem;
  color: #b91c1c;
  border-color: #fecaca;
}
.admin-education-board-show__unlink-btn:hover {
  background: #fef2f2;
  color: #dc2626;
}
.admin-education-board-show__link-btn {
  font-size: 0.75rem;
  padding: 0.22rem 0.55rem;
}
.admin-education-board-show__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  min-height: 10rem;
  padding: 1.5rem;
  text-align: center;
  color: #64748b;
  font-size: 0.8125rem;
}
.admin-education-board-show__empty i {
  font-size: 1.75rem;
  color: #94a3b8;
}
.admin-education-board-show__empty p {
  margin: 0;
}

.admin-line-content-form__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
  gap: 1rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 992px) {
  .admin-line-content-form__layout {
    grid-template-columns: 1fr;
  }
}
.admin-line-content-form__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          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;
  -o-object-fit: contain;
     object-fit: contain;
}
.admin-line-content-form__checks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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;
  -webkit-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);
          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;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.line-phone-preview__status {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.28rem;
  color: #111;
}
.line-phone-preview__line-header {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #111;
  cursor: default;
}
.line-phone-preview__header-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.line-phone-preview__header-avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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%), -webkit-gradient(linear, left top, left bottom, from(#728ea4), to(#6a869c));
  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: -webkit-fit-content;
  width: -moz-fit-content;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.35rem;
  max-width: 92%;
  margin-bottom: 0.55rem;
}
.line-phone-preview__avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.line-phone-preview__message-body {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          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;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: end;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
}

.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;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
          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 {
  -webkit-transition: background 0.15s ease;
  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;
  -webkit-transition: background 0.2s, color 0.2s;
  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;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.15);
          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: rgb(2.5090909091, 92, 153.8909090909);
  border-color: rgb(2.5090909091, 92, 153.8909090909);
}

.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%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  border: 1px solid #f2f2f2;
}
.student_page .lessons-section .lesson-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  border: 1px solid #f2f2f2;
}
.student_page .courses-section .course-block .lesson-card .card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      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 {
  -webkit-transition: right 0.3s ease;
  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;
  -webkit-transform: translateY(-50%);
          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;
  -webkit-transform: rotate(37deg);
          transform: rotate(37deg);
  -webkit-transform-origin: calc(100% - 0.5px) 50%;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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%;
  -webkit-transform: translate(-50%, -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: 1168px;
  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;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 1rem auto;
}
.lesson-detail .step_box:hover {
  background-color: rgba(3, 110, 184, 0.05);
  -webkit-transition: background-color 0.3s ease;
  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: -webkit-fit-content;
  width: -moz-fit-content;
  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;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          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;
  -webkit-box-shadow: none;
          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: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
}
.step-progress .steps .step {
  position: relative;
  width: 30%;
  padding: 0.1rem 0.5rem;
  border-radius: 30px;
  -webkit-transition: all 0.3s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.3s ease;
  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: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#f1f5f9));
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.student-portal-hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-shadow: 0 14px 36px rgba(1, 61, 102, 0.2);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          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;
  -webkit-animation: student-clock-blink 1s step-end infinite;
          animation: student-clock-blink 1s step-end infinite;
}
.student-portal-hero__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: center;
      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;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.student-portal-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.student-portal-section__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
          box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
  border-color: #bfdbfe;
}

.student-lesson-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  -webkit-transition: border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.student-lesson-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}
.student-lesson-card__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #036eb8;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.student-step-track__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.student-widget__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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;
  -webkit-animation: student-clock-blink 1s step-end infinite;
          animation: student-clock-blink 1s step-end infinite;
}

@-webkit-keyframes student-clock-blink {
  50% {
    opacity: 0.15;
  }
}

@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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  padding: 1rem;
  overflow: hidden;
}
.student-typing-widget__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.student-typing-widget__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #036eb8;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.student-typing-game__input:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.15);
          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;
  -webkit-box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
          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 {
  -webkit-filter: invert(1) grayscale(1) brightness(2);
          filter: invert(1) grayscale(1) brightness(2);
}
.student-typing-modal__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  padding: 1rem;
}
.student-typing-weekly__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-gradient(linear, left top, right top, from(#60a5fa), to(#036eb8));
  background: linear-gradient(90deg, #60a5fa 0%, #036eb8 100%);
  -webkit-transition: width 0.35s ease;
  transition: width 0.35s ease;
}
.student-typing-weekly__row.is-today .student-typing-weekly__fill {
  background: -webkit-gradient(linear, left top, right top, from(#0891d4), to(#013d66));
  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;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  padding: 1rem;
}
.student-programming-tip__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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-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;
  border-left: 4px solid #dc3545;
}
.student-file-upload .evaluation-result .textbook-content-info {
  background: #e7f3ff;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #0d6efd;
}
.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;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          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;
}

.student-quiz-page {
  padding: 1.5rem 1rem 3rem;
  background: #f0f4f8;
  min-height: calc(100vh - 10rem);
}

.student-quiz {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 16px;
  -webkit-box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
          box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.student-quiz__header {
  padding: 2rem 2.25rem 1.75rem;
  background: linear-gradient(135deg, #036eb8 0%, #0b84d8 100%);
  color: #fff;
}

.student-quiz__step-label {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.92;
}

.student-quiz__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
}

.student-quiz__description {
  margin: 0;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.65;
  opacity: 0.96;
}

.student-quiz__body {
  padding: 2rem 2.25rem 2.5rem;
}

.student-quiz-instructions {
  padding: 1.15rem 1.35rem;
  border-left: 4px solid #036eb8;
  background: #f5f9fd;
  border-radius: 0 12px 12px 0;
}
.student-quiz-instructions h2 {
  font-size: 1.35rem;
}
.student-quiz-instructions p {
  font-size: 1.1rem;
  line-height: 1.65;
}

.student-quiz-question {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 2px solid #dee2e6;
  border-radius: 14px;
  background: #fff;
}

.student-quiz-question__head {
  margin-bottom: 0.85rem;
}

.student-quiz-question__number {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #e8f2fa;
  color: #036eb8;
  font-size: 1rem;
  font-weight: 700;
}

.student-quiz-question__text {
  margin-bottom: 1.15rem;
  color: #212529;
  font-size: 1.2rem;
  line-height: 1.7;
}

.student-quiz-question__options .form-check {
  margin-bottom: 0.85rem;
}

.student-quiz-question__options .form-check-label {
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1.55;
}

.student-quiz-question__options .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
}

.student-quiz-complete {
  text-align: center;
  padding: 2rem 0.5rem 0.5rem;
}

.student-quiz-complete__icon {
  font-size: clamp(4rem, 12vw, 5.5rem);
  line-height: 1;
  color: #198754;
  margin-bottom: 1.25rem;
}

.student-quiz-complete__title {
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 800;
  color: #155724;
}

.student-quiz-complete__text {
  margin-bottom: 2rem;
  font-size: clamp(1.125rem, 2.8vw, 1.375rem);
  line-height: 1.75;
  color: #5c6670;
}

.student-quiz-complete__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.65rem;
  max-width: 280px;
  margin: 0 auto;
}

.student-quiz-complete__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 1.25rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.15s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.15s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
}
.student-quiz-complete__btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.student-quiz-complete__btn--primary {
  border: 2px solid #036eb8;
  background: #036eb8;
  color: #fff;
}
.student-quiz-complete__btn--primary:hover {
  background: #025a96;
  border-color: #025a96;
  color: #fff;
}
.student-quiz-complete__btn--secondary {
  border: 2px solid #adb5bd;
  background: #fff;
  color: #212529;
}
.student-quiz-complete__btn--secondary:hover {
  background: #f8f9fa;
  border-color: #868e96;
  color: #212529;
}

.step-card--locked {
  opacity: 0.75;
  background: #f8f9fa;
  cursor: not-allowed;
}

.status-label .locked {
  color: #adb5bd;
  font-weight: bold;
}

@media (max-width: 768px) {
  .student-quiz__header,
  .student-quiz__body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.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 {
  -webkit-box-shadow: none !important;
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-box-shadow: 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;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-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;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          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 {
  -webkit-box-shadow: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.student_detail .card:hover {
  -webkit-box-shadow: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.transfer-graduation-radios .transfer-radio-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  margin: 0;
}
.transfer-graduation-radios .transfer-radio-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 0 0 0.15rem rgba(3, 110, 184, 0.2);
          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: 1168px;
  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;
  -webkit-transition: background-color 0.2s;
  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);
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
.school_main-content .lesson_list_contents .lesson_card_link .lesson_card .card-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.school_lesson-content ol li .btn:hover {
  -webkit-transform: translateY(-1px);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: #1976d2;
  text-decoration: none;
  font-weight: 500;
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
}
.school_page .school-lesson-card-meta .school-lesson-card-meta__label {
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.school_lesson_content .lesson-steps .step-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style-type: none;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 6px;
  margin: 2rem 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.school_lesson_content .lesson-steps .step-card .btn:hover {
  -webkit-transform: translateY(-1px);
          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%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.school_students_page .container {
  width: 1168px;
  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;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin-bottom: 1rem;
}
#school_student .clock_box h5 {
  margin: 0;
}
#school_student #calendar {
  background: white;
  padding: 0rem;
  border-radius: 8px;
  -webkit-box-shadow: none;
          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: 0.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;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 1rem auto;
  width: 100%;
  position: relative;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          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%;
  -webkit-transform-origin: 50% 100%;
          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%;
  -webkit-transform: translate(-50%, -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;
  -webkit-transform: rotate(var(--rotation));
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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 {
  -webkit-box-shadow: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
}
.student_list .student-name-link {
  color: #036EB8;
  text-decoration: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.student_list .student-name-link:hover {
  color: #0256a3;
  text-decoration: underline;
}
.student_list .edit-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #6c757d;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}
.student_list .search-field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 200px;
}
.student_list .search-field .form-label {
  font-weight: 600;
  margin-bottom: 5px;
  color: #495057;
}
.student_list .search-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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%;
  -webkit-transform: translateY(-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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 0.75rem;
  border-radius: 8px;
  min-height: 80px;
  color: #212529;
  -webkit-transition: background 0.2s, border-color 0.2s, color 0.2s;
  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;
  -webkit-transition: background-color 0.2s, color 0.2s;
  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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.school-dashboard__mental-health-link {
  max-width: 270px;
}

.dash-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          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-left: 4px solid #dc3545;
  border-radius: 12px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff8f7), color-stop(42%, #fff));
  background: linear-gradient(180deg, #fff8f7 0%, #fff 42%);
  -webkit-box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
          box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

.school-disaster-alert__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.school-disaster-alert__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 52px;
  height: 52px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 12px;
  background: #fce4ec;
  color: #dc3545;
  font-size: 1.6rem;
}

.school-disaster-alert__heading {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.school-disaster-alert__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.45rem;
}

.school-disaster-alert__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: 0 6px 16px rgba(220, 53, 69, 0.18);
          box-shadow: 0 6px 16px rgba(220, 53, 69, 0.18);
  -webkit-transition: background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.school-disaster-alert__cta:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  background: #c82333;
  color: #fff !important;
  -webkit-box-shadow: 0 8px 18px rgba(220, 53, 69, 0.24);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-gradient(linear, left top, right top, from(#ff8a8a), to(#dc3545));
  background: linear-gradient(90deg, #ff8a8a 0%, #dc3545 100%);
  -webkit-transition: width 0.3s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  margin: 8px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  -webkit-transition: -webkit-transform 0.15s, -webkit-box-shadow 0.15s;
  transition: -webkit-transform 0.15s, -webkit-box-shadow 0.15s;
  transition: transform 0.15s, box-shadow 0.15s;
  transition: transform 0.15s, box-shadow 0.15s, -webkit-transform 0.15s, -webkit-box-shadow 0.15s;
}
.dash-stat-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dash-stat-card--alert {
  border-left: 3px solid #e67e22;
}
.dash-stat-card--danger {
  border-left: 3px solid #dc3545;
}
.dash-stat-card--keyword-comment {
  border: 2px solid #dc3545;
  -webkit-box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.12);
          box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.12);
}

.dash-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.35rem;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.dash-widget__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.2s ease;
  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%;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.toggle-switch__input:checked + .toggle-switch__track {
  background: #036EB8;
}

.toggle-switch__input:checked + .toggle-switch__track::after {
  -webkit-transform: translateX(1.25rem);
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}

.afternoon-class-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  background: #f8fafc;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border: 2px solid #94a3b8;
  border-radius: 4px;
  background: #fff;
  position: relative;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  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;
  -webkit-transform: rotate(45deg) scale(0);
          transform: rotate(45deg) scale(0);
  -webkit-transition: -webkit-transform 0.12s ease;
  transition: -webkit-transform 0.12s ease;
  transition: transform 0.12s ease;
  transition: transform 0.12s ease, -webkit-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 {
  -webkit-transform: rotate(45deg) scale(1);
          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;
  -webkit-box-shadow: 0 0 0 1px rgba(3, 110, 184, 0.08);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}

.dash-mini-stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.dash-course-bar__name {
  width: 110px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #495057;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-course-bar__track {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
}

.dash-course-bar__count {
  width: 40px;
  text-align: right;
  color: #495057;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.dash-top-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
}

.dash-top-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  padding: 0.35rem 0.75rem;
  -webkit-transition: all 0.15s;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
  padding: 8px 0;
}

.dash-consent-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 14px;
}

.dash-grade-bars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.dash-grade-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.dash-grade-row__label {
  width: 80px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #495057;
}

.dash-grade-row__track {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
}

.dash-grade-row__count {
  width: 40px;
  text-align: right;
  color: #495057;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.dash-announce-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.dash-announce-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.chatbot-container--inline .chatbot-messages {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 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;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
          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: 0.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;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 0.75rem;
  color: #212529;
  min-height: 88px;
  -webkit-transition: background 0.2s, border-color 0.2s;
  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: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 600px;
  max-height: 80vh;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chatbot-container .chatbot-messages {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: fadeIn 0.3s ease-in;
          animation: fadeIn 0.3s ease-in;
  margin-bottom: 0.25rem;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background-color 0.2s ease;
  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 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.chatbot-container .chatbot-messages .message.bot-message .message-content .message-text {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.chatbot-container .chatbot-messages .message.user-message {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  background: #f8f9fa;
  border-radius: 24px;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.chatbot-container .chatbot-input .input-wrapper:focus-within {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
  background: #fff;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-webkit-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-moz-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea:-ms-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-ms-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #036EB8;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, transform 0.1s;
  transition: background-color 0.2s, transform 0.1s, -webkit-transform 0.1s;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:hover {
  background: #025a9a;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:disabled {
  background: #adb5bd;
  cursor: not-allowed;
  -webkit-transform: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 500px;
  max-height: 70vh;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chatbot-container .chatbot-messages {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: fadeIn 0.3s ease-in;
          animation: fadeIn 0.3s ease-in;
  margin-bottom: 0.25rem;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  background: #f8f9fa;
  border-radius: 24px;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.chatbot-container .chatbot-input .input-wrapper:focus-within {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
  background: #fff;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-webkit-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-moz-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea:-ms-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-ms-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #036EB8;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, transform 0.1s;
  transition: background-color 0.2s, transform 0.1s, -webkit-transform 0.1s;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:hover {
  background: #025a9a;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:disabled {
  background: #adb5bd;
  cursor: not-allowed;
  -webkit-transform: none;
          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);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.consent-forms-page {
  padding: 2rem;
}
.consent-forms-page .consent-forms-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1.5rem;
  -ms-flex-wrap: wrap;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
}
.consent-forms-page .consent-header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.consent-forms-page .consent-header-actions--icon-only .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
  -webkit-box-shadow: none !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: -webkit-box;
  display: -ms-flexbox;
  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;
  -webkit-transition: all 0.3s ease !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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.consent-forms-page .consent-url-copy input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.consent-forms-page .consent-stat-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  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;
  -webkit-transition: all 0.3s ease !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;
  -webkit-transition: -webkit-box-shadow 0.15s;
  transition: -webkit-box-shadow 0.15s;
  transition: box-shadow 0.15s;
  transition: box-shadow 0.15s, -webkit-box-shadow 0.15s;
}
.consent-forms-page .consent-field-row:hover {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          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;
  -webkit-transition: all 0.3s ease !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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 10px 12px;
  background: #e9ecef;
}
.consent-forms-page .consent-field-drag-handle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: -webkit-grab;
  cursor: grab;
  color: #999;
  font-size: 1.2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0 2px;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
}
.consent-forms-page .consent-field-drag-handle:hover {
  color: #555;
}
.consent-forms-page .consent-field-drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.consent-forms-page .consent-field-row-number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -ms-flex-negative: 0;
      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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.consent-forms-page .consent-field-required-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.consent-forms-page .consent-field-row-bottom {
  padding: 10px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.consent-forms-page .consent-field-row-bottom .consent-field-type-select {
  width: 160px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.consent-forms-page .consent-field-options-area {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      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;
  -webkit-transition: all 0.3s ease !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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.consent-forms-page .consent-field-preview-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.3s ease !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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.4rem;
  -ms-flex-wrap: wrap;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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;
  -ms-flex-negative: 0;
      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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 16px;
}
.school-announcements-list__title {
  color: #333;
  text-decoration: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background-color 0.15s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.school-announcements-manage__col-title {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.school-announcements-manage__col-actions {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 4px;
}
.school-announcements-manage__audience-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #667085;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease, color 0.15s ease;
  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 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .school-announcements-manage__col-actions {
    padding-top: 4px;
  }
}

.page-school-announcement-form .school-list-section {
  -webkit-box-shadow: none;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px 20px;
  margin-bottom: 1.25rem;
}
.page-school-announcement-form .school-announcement-form__field--half {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 280px;
          flex: 1 1 280px;
  margin-bottom: 0;
}
.page-school-announcement-form .school-announcement-form__field--narrow {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 140px;
          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;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.page-school-announcement-form .school-announcement-form__submit:hover {
  background: #025a96;
  -webkit-box-shadow: 0 4px 12px rgba(3, 110, 184, 0.25);
          box-shadow: 0 4px 12px rgba(3, 110, 184, 0.25);
}
.page-school-announcement-form .school-announcement-form__cancel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
}

.school_page {
  min-height: calc(100vh - 120px);
  background: #f1f5f9;
}
.school_page > .row,
.school_page > .row.g-0 {
  min-height: calc(100vh - 120px);
}
.school_page .col-2:first-child {
  padding: 0 !important;
  background: #fff;
  border-right: 1px solid #e2e8f0;
}

.page-school-list {
  padding: 1.25rem 1.5rem 2rem !important;
  background: #f1f5f9 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 0;
  min-height: calc(100vh - 120px);
}
.page-school-list .school-list-hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-shadow: 0 16px 40px rgba(1, 61, 102, 0.22);
          box-shadow: 0 16px 40px rgba(1, 61, 102, 0.22);
  overflow: hidden;
}
.page-school-list .school-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-school-list .school-list-hero__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.page-school-list .school-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-school-list .school-list-hero__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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-school-list .school-list-hero__title i {
  font-size: 1.25rem;
  opacity: 0.95;
}
.page-school-list .school-list-hero__lead {
  margin: 0;
  max-width: 52ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.page-school-list .school-list-hero__toolbar {
  position: relative;
  z-index: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: center;
      align-self: center;
}
.page-school-list .school-list-hero__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.page-school-list .school-list-hero__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #036eb8;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.page-school-list .school-list-hero__btn i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-list .school-list-hero__btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  color: #025a96;
}
.page-school-list .school-list-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.page-school-list .school-list-hero__btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.page-school-list .school-list-hero__btn--icon-only {
  gap: 0;
  min-width: 2rem;
  padding: 0.38rem 0.45rem;
}
.page-school-list .school-list-hero__btn--icon-only i {
  font-size: 1.05rem;
}
.page-school-list .school-list-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.page-school-list .school-list-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.page-school-list .school-list-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-list .school-list-section__title i {
  color: #036eb8;
  font-size: 1.05rem;
}
.page-school-list .school-list-section__body {
  padding: 1.15rem 1.25rem 1.25rem;
}
.page-school-list .school-list-filter .form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-school-list .school-list-filter .form-select,
.page-school-list .school-list-filter .form-control {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.875rem;
}
.page-school-list .school-list-filter .form-select:focus,
.page-school-list .school-list-filter .form-control:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-school-list .school-list-filter .filter-buttons-row,
.page-school-list .school-list-filter .search-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.page-school-list .school-list-filter .btn-primary {
  background: #036eb8;
  border-color: #036eb8;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 0.38rem 0.75rem;
}
.page-school-list .school-list-filter .btn-outline-secondary {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.38rem 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 600;
  text-decoration: none;
}
.page-school-list .school-list-filter .btn-outline-secondary:hover {
  background: #f8fafc;
  color: #334155;
}
.page-school-list .school-list-filter .school-btn--icon-only {
  gap: 0;
  min-width: 2rem;
  padding: 0.35rem 0.45rem;
}
.page-school-list .school-list-filter .school-btn--icon-only i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-list .school-list-filter .school-student-filter-scope {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
}
.page-school-list .school-list-filter .school-student-filter-scope__chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #e8f4fd;
  border: 1px solid #b8daf0;
  color: #036eb8;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.page-school-list .school-list-filter .school-student-filter-scope__chip i {
  font-size: 0.95rem;
}
.page-school-list.page-school-students .school-list-section__head-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.page-school-list.page-school-students .school-student-filter-form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.65rem;
}
.page-school-list.page-school-students .school-student-filter-form__field {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.page-school-list.page-school-students .school-student-filter-form__field--grade {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 9.5rem;
          flex: 0 1 9.5rem;
}
.page-school-list.page-school-students .school-student-filter-form__field--class {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 8.5rem;
          flex: 0 1 8.5rem;
}
.page-school-list.page-school-students .school-student-filter-form__field--course {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 11rem;
          flex: 0 1 11rem;
}
.page-school-list.page-school-students .school-student-filter-form__field--keyword {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 12rem;
          flex: 1 1 12rem;
}
.page-school-list.page-school-students .school-student-filter-form__actions {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin-top: 0;
  padding-bottom: 1px;
}
.page-school-list.page-school-students .school-student-filter-form .search-buttons {
  margin-top: 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media (max-width: 1100px) {
  .page-school-list.page-school-students .school-student-filter-form__row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .page-school-list.page-school-students .school-student-filter-form__field {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(50% - 0.35rem);
            flex: 1 1 calc(50% - 0.35rem);
  }
  .page-school-list.page-school-students .school-student-filter-form__field--keyword {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
  .page-school-list.page-school-students .school-student-filter-form__actions {
    width: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
.page-school-list .school-list-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .page-school-list .school-list-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .page-school-list .school-list-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.page-school-list .school-list-kpi {
  padding: 0.85rem 0.75rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  text-align: center;
}
.page-school-list .school-list-kpi__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}
.page-school-list .school-list-kpi__value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.page-school-list .school-list-kpi--accent {
  border-color: #bfdbfe;
  background: -webkit-gradient(linear, left top, left bottom, from(#eff6ff), to(#fff));
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.page-school-list .school-list-kpi--success {
  border-color: #a7f3d0;
}
.page-school-list .school-list-kpi--success .school-list-kpi__value {
  color: #047857;
}
.page-school-list .school-list-kpi--warning {
  border-color: #fde68a;
}
.page-school-list .school-list-kpi--warning .school-list-kpi__value {
  color: #b45309;
}
.page-school-list .school-list-kpi--danger {
  border-color: #fecaca;
}
.page-school-list .school-list-kpi--danger .school-list-kpi__value {
  color: #b91c1c;
}
.page-school-list .school-list-kpi--muted .school-list-kpi__value {
  color: #64748b;
}
.page-school-list .school-list-table-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.page-school-list .school-list-table-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.85rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.page-school-list .school-list-table-card__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-list .school-list-table-card__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
}
.page-school-list .school-data-table,
.page-school-list .info_table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.page-school-list .school-data-table thead th,
.page-school-list .info_table thead th {
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.page-school-list .school-data-table tbody td,
.page-school-list .info_table tbody td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}
.page-school-list .school-data-table tbody tr,
.page-school-list .info_table tbody tr {
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}
.page-school-list .school-data-table tbody tr:hover,
.page-school-list .info_table tbody tr:hover {
  background: #f8fafc;
}
.page-school-list .school-data-table tbody tr:last-child td,
.page-school-list .info_table tbody tr:last-child td {
  border-bottom: none;
}
.page-school-list .school-list-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 1rem;
}
.page-school-list .school-list-toolbar__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: #64748b;
}
.page-school-list .school-list-toolbar__meta strong {
  color: #0f172a;
}
.page-school-list .school-list-date-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.page-school-list .school-list-date-nav .btn {
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.page-school-list .school-list-date-nav .btn-primary {
  background: #036eb8;
  border-color: #036eb8;
}
.page-school-list .student_list,
.page-school-list .health_managementPage,
.page-school-list .billing-container,
.page-school-list .announcements,
.page-school-list .chat-logs-page,
.page-school-list .school_mail_setteing {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  padding: 0;
}
.page-school-list .school_contents_title,
.page-school-list .billing-header h6 {
  display: none;
}
.page-school-list .shop_course-content > h4:first-child {
  display: none;
}
.page-school-list .btn {
  font-size: 0.6875rem;
}
.page-school-list .btn-sm {
  font-size: 0.625rem;
  padding: 0.25rem 0.45rem;
}
.page-school-list .school-btn--icon-only {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0;
  min-width: 2rem;
  padding: 0.35rem 0.45rem;
}
.page-school-list .school-btn--icon-only i {
  font-size: 0.95rem;
  line-height: 1;
}

.page-school-courses .school-grade-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-courses .school-grade-section__title .badge {
  font-size: 0.68rem;
}

.page-school-lessons .school-lessons-kpi {
  margin-bottom: 1.25rem;
}
.page-school-lessons .school-lessons-course-block__link {
  color: inherit;
  text-decoration: none;
}
.page-school-lessons .school-lessons-course-block__link:hover {
  color: #036eb8;
}
.page-school-lessons .school-lessons-course-block__count {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #036eb8;
  font-size: 0.6875rem;
  font-weight: 800;
  white-space: nowrap;
}
.page-school-lessons .school-lessons-course-block__desc {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #64748b;
}
.page-school-lessons .school-lessons-course-block__hint {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  color: #64748b;
}
.page-school-lessons .school-grade-section {
  margin-bottom: 1.25rem;
}
.page-school-lessons .school-grade-section:last-child {
  margin-bottom: 0;
}
.page-school-lessons .school-grade-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-lessons .school-grade-section__title .badge {
  font-size: 0.68rem;
}
.page-school-lessons .shop-uiverse-cards {
  min-height: auto !important;
}

.page-school-course-show .school-course-show__edit-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: #036eb8;
  border: none;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.page-school-course-show .school-course-show__edit-btn:hover {
  background: #025a96;
  color: #fff;
}
.page-school-course-show .school-course-show__edit-btn i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-course-show .school-course-show__grade-text {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
}
.page-school-course-show .school-course-show__grade-text strong {
  color: #0f172a;
}
.page-school-course-show .school-course-show__note {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
}
.page-school-course-show .gas-drive-setup {
  margin-bottom: 1.25rem;
}
.page-school-course-show .school-course-lessons {
  margin-top: 0.25rem;
}
.page-school-course-show .school-course-lessons__head {
  margin-bottom: 0.75rem;
}
.page-school-course-show .school-course-lessons__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-course-show .school-course-lessons__title i {
  color: #036eb8;
}
.page-school-course-show .school-course-lessons__title .badge {
  font-size: 0.68rem;
  font-weight: 600;
}
.page-school-course-show .school-course-lessons__hint {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  color: #64748b;
}
.page-school-course-show .school-grade-section {
  margin-bottom: 1.5rem;
}
.page-school-course-show .school-grade-section:last-child {
  margin-bottom: 0;
}
.page-school-course-show .school-grade-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-course-show .school-grade-section__title .badge {
  font-size: 0.68rem;
}
.page-school-course-show .shop-uiverse-cards {
  min-height: auto !important;
}

.grade-modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1050;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.45);
}
.grade-modal[hidden] {
  display: none !important;
}

.grade-modal-content {
  width: min(100%, 520px);
  margin-top: 5vh;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
          box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.grade-modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}

.grade-modal-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.grade-modal-title i {
  color: #036eb8;
}

.grade-modal-close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.grade-modal-close:hover {
  background: #f1f5f9;
  color: #334155;
}

.grade-modal-body {
  padding: 1rem 1.15rem;
}

.grade-modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.15rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.grade-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}
.grade-btn.primary {
  background: #036eb8;
  border-color: #036eb8;
  color: #fff;
}
.grade-btn.primary:hover {
  background: #025a96;
}
.grade-btn.secondary {
  background: #fff;
  border-color: #cbd5e1;
  color: #475569;
}
.grade-btn.secondary:hover {
  background: #f8fafc;
}

.school-course-grade-modal__lead {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.55;
}
.school-course-grade-modal__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .school-course-grade-modal__options {
    grid-template-columns: minmax(0, 1fr);
  }
}
.school-course-grade-modal__option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 0.8125rem;
  color: #334155;
  cursor: pointer;
}
.school-course-grade-modal__option:has(.form-check-input:checked) {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.school-course-grade-modal__option .form-check-input {
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.school-curriculum-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  -webkit-transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.school-curriculum-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 10px 28px rgba(3, 110, 184, 0.1);
          box-shadow: 0 10px 28px rgba(3, 110, 184, 0.1);
}
.school-curriculum-card.is-completed {
  border-color: #a7f3d0;
}
.school-curriculum-card.is-progress {
  border-color: #fde68a;
}
.school-curriculum-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.school-curriculum-card__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #036eb8;
  font-size: 0.68rem;
  font-weight: 800;
}
.school-curriculum-card__title {
  margin: 0 0 0.45rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.school-curriculum-card__desc {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #64748b;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.school-curriculum-card__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  color: #94a3b8;
}
.school-curriculum-card__meta i {
  margin-right: 0.2rem;
}
.school-curriculum-card__actions {
  margin-top: auto;
}

.page-school-list .school-form-section {
  margin-bottom: 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.page-school-list .school-form-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
  border-left: 4px solid #036eb8;
}
.page-school-list .school-form-section__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-list .school-form-section__title i {
  color: #036eb8;
}
.page-school-list .school-form-section__body {
  padding: 1.15rem 1.25rem 1.25rem;
}
.page-school-list .school-form-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 768px) {
  .page-school-list .school-form-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-school-list .school-form-field-grid .form-group--full {
  grid-column: 1/-1;
}
.page-school-list .school_student_form .form-label,
.page-school-list .consent-form-edit .form-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-school-list .school_student_form .form-control,
.page-school-list .school_student_form .form-select,
.page-school-list .consent-form-edit .form-control,
.page-school-list .consent-form-edit .form-select {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.875rem;
}
.page-school-list .school_student_form .form-control:focus,
.page-school-list .school_student_form .form-select:focus,
.page-school-list .consent-form-edit .form-control:focus,
.page-school-list .consent-form-edit .form-select:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-school-list .school_student_form textarea.form-control,
.page-school-list .consent-form-edit textarea.form-control {
  min-height: auto;
}
.page-school-list .school-form-table {
  width: 100%;
  border-collapse: collapse;
}
.page-school-list .school-form-table th {
  width: 28%;
  padding: 0.85rem 1rem 0.85rem 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
  vertical-align: top;
}
.page-school-list .school-form-table th small {
  font-weight: 600;
  color: #94a3b8;
}
.page-school-list .school-form-table td {
  padding: 0.65rem 0;
  vertical-align: top;
}
.page-school-list .school-form-table tr + tr th,
.page-school-list .school-form-table tr + tr td {
  border-top: 1px solid #f1f5f9;
}
.page-school-list .school-form-actions,
.page-school-list .student-form-buttons,
.page-school-list .consent-form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}
.page-school-list .school-form-actions .btn-primary,
.page-school-list .student-form-buttons .btn-primary,
.page-school-list .consent-form-actions .btn-primary {
  background: #036eb8;
  border-color: #036eb8;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 0.4rem 0.9rem;
}
.page-school-list .school-form-actions .btn-outline-secondary,
.page-school-list .student-form-buttons .btn-outline-secondary,
.page-school-list .consent-form-actions .btn-outline-secondary {
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.6875rem;
  padding: 0.38rem 0.65rem;
}
.page-school-list .school-form-actions .school-btn--icon-only,
.page-school-list .student-form-buttons .school-btn--icon-only,
.page-school-list .consent-form-actions .school-btn--icon-only {
  gap: 0;
  min-width: 2rem;
  padding: 0.35rem 0.45rem;
}
.page-school-list .school-form-actions .school-btn--icon-only i,
.page-school-list .student-form-buttons .school-btn--icon-only i,
.page-school-list .consent-form-actions .school-btn--icon-only i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-list .btn {
  font-size: 0.6875rem;
}
.page-school-list .btn-sm {
  font-size: 0.625rem;
  padding: 0.25rem 0.45rem;
}
.page-school-list .school-btn--icon-only {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0;
  min-width: 2rem;
  padding: 0.35rem 0.45rem;
}
.page-school-list .school-btn--icon-only i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-list .csv-import-guide {
  margin-bottom: 0;
}
.page-school-list .csv-import-guide h5 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-list .csv-import-guide > p {
  font-size: 0.8125rem;
  color: #64748b;
}
.page-school-list .csv-template-download-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: #036eb8;
  border: none;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.page-school-list .csv-template-download-btn:hover {
  background: #025a96;
  color: #fff;
}
.page-school-list .csv-template-download-btn i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-list .file-drop-area {
  margin: 0.75rem 0 1rem;
  padding: 1.5rem;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.page-school-list .file-drop-area:hover, .page-school-list .file-drop-area.dragover {
  border-color: #036eb8;
  background: #eff6ff;
}
.page-school-list .file-drop-area .drag-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
  color: #64748b;
  font-size: 0.8125rem;
}
.page-school-list .file-drop-area .drag-text i {
  font-size: 1.75rem;
  color: #036eb8;
}
.page-school-list .csv-upload-picker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto;
}
.page-school-list .csv-upload-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-school-list .csv-upload-picker__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  color: #036eb8;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.page-school-list .csv-upload-picker__btn:hover {
  background: #eff6ff;
  border-color: #036eb8;
}
.page-school-list .csv-upload-picker__name {
  max-width: 100%;
  font-size: 0.6875rem;
  color: #94a3b8;
  word-break: break-all;
}
.page-school-list .csv-upload-picker__name.is-selected {
  color: #475569;
  font-weight: 600;
}
.page-school-list .import_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 8px;
  background: #036eb8;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}
.page-school-list .import_btn i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-list .import_btn:hover {
  background: #025a96;
}
.page-school-list .student_detail,
.page-school-list .consent-forms-page {
  background: transparent;
  padding: 0;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.page-school-list .consent-field-builder {
  margin-top: 1.25rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}
.page-school-list .consent-field-builder-header {
  margin-bottom: 1rem;
}
.page-school-list .consent-field-builder-header h5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-list .consent-field-builder-header h5 i {
  color: #036eb8;
}
.page-school-list .consent-field-builder-lead {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
}
.page-school-list .consent-field-builder-tips {
  margin: 0;
  padding: 1.25rem !important;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.55;
  list-style: none !important;
}
.page-school-list .consent-field-builder-tips li + li {
  margin-top: 0.25rem;
  list-style: none !important;
}
.page-school-list .consent-field-builder-tips strong {
  color: #0f172a;
  list-style: none !important;
}
.page-school-list #consent-fields-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.page-school-list .consent-field-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 1.5rem 1rem;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
  color: #94a3b8;
}
.page-school-list .consent-field-empty[hidden] {
  display: none !important;
}
.page-school-list .consent-field-empty i {
  font-size: 1.75rem;
  color: #cbd5e1;
}
.page-school-list .consent-field-empty p {
  margin: 0;
  font-size: 0.8125rem;
}
.page-school-list .consent-field-row {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.page-school-list .consent-field-row:hover {
  -webkit-box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.page-school-list .consent-field-row.consent-field-dragging {
  opacity: 0.45;
}
.page-school-list .consent-field-row.consent-field-dragover {
  border-color: #036eb8;
  border-style: dashed;
}
.page-school-list .consent-field-row__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#f1f5f9));
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}
.page-school-list .consent-field-drag-handle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: -webkit-grab;
  cursor: grab;
}
.page-school-list .consent-field-drag-handle:hover {
  color: #64748b;
}
.page-school-list .consent-field-drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.page-school-list .consent-field-row-number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #036eb8;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
}
.page-school-list .consent-field-type-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #036eb8;
  font-size: 0.625rem;
  font-weight: 700;
}
.page-school-list .consent-field-delete {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: auto;
  padding: 0.25rem 0.4rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #ef4444;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.page-school-list .consent-field-delete:hover {
  background: #fef2f2;
  color: #dc2626;
}
.page-school-list .consent-field-row__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.85rem 1rem;
  padding: 0.85rem 0.85rem 1rem;
}
@media (max-width: 768px) {
  .page-school-list .consent-field-row__grid {
    grid-template-columns: 1fr;
  }
}
.page-school-list .consent-field-group {
  min-width: 0;
}
.page-school-list .consent-field-group__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}
.page-school-list .consent-field-group__hint {
  margin: -0.15rem 0 0.35rem;
  font-size: 0.6875rem;
  color: #94a3b8;
  line-height: 1.4;
}
.page-school-list .consent-field-group--label {
  grid-column: 1;
}
.page-school-list .consent-field-group--required {
  grid-column: 2;
  align-self: end;
}
@media (max-width: 768px) {
  .page-school-list .consent-field-group--required {
    grid-column: 1;
  }
}
.page-school-list .consent-field-group--required[hidden] {
  display: none !important;
}
.page-school-list .consent-field-group--type {
  grid-column: 1/-1;
}
.page-school-list .consent-field-group--options {
  grid-column: 1/-1;
}
.page-school-list .consent-field-group--options[hidden] {
  display: none !important;
}
.page-school-list .consent-field-group .form-control,
.page-school-list .consent-field-group .form-select {
  font-size: 0.8125rem;
}
.page-school-list .consent-field-required-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.page-school-list .consent-field-required-check .form-check-input {
  margin: 0;
}
.page-school-list .consent-field-required-check .form-check-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.page-school-list .consent-field-add-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid #e2e8f0;
}
.page-school-list .consent-field-quick-add__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
}
.page-school-list .consent-field-quick-add__buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (max-width: 768px) {
  .page-school-list .consent-field-quick-add__buttons {
    grid-template-columns: 1fr;
  }
}
.page-school-list .consent-quick-add-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.page-school-list .consent-quick-add-btn i {
  font-size: 1.1rem;
  color: #036eb8;
}
.page-school-list .consent-quick-add-btn span {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0f172a;
}
.page-school-list .consent-quick-add-btn small {
  font-size: 0.6875rem;
  color: #94a3b8;
  line-height: 1.35;
}
.page-school-list .consent-quick-add-btn:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  -webkit-box-shadow: 0 2px 8px rgba(3, 110, 184, 0.08);
          box-shadow: 0 2px 8px rgba(3, 110, 184, 0.08);
}
.page-school-list .consent-field-add-btn {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
}

.page-school-settings.scoll-setting {
  padding: 0;
}
.page-school-settings .school-settings-sections {
  width: 100%;
}
.page-school-settings .school-form-section {
  margin-bottom: 1rem;
}
.page-school-settings .school-settings-status-summary {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  color: #475569;
}
.page-school-settings .school-settings-status-summary strong {
  font-size: 1.125rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-settings .school-settings-status-empty {
  font-size: 0.8125rem;
  color: #94a3b8;
}
.page-school-settings .school-settings-grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.65rem;
}
.page-school-settings .school-settings-grade-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}
.page-school-settings .school-settings-grade-card__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  line-height: 1.3;
}
.page-school-settings .school-settings-grade-card__count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: #036eb8;
}
.page-school-settings .school-settings-grade-card__count small {
  margin-left: 0.1rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #94a3b8;
}
.page-school-settings .school-settings-form-fields {
  max-width: 480px;
}
.page-school-settings .school-settings-form-fields .form-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-school-settings .school-settings-form-fields .form-check-label {
  font-size: 0.8125rem;
}
.page-school-settings .school-settings-form-fields .form-text {
  font-size: 0.75rem;
}
.page-school-settings .school-settings-select {
  max-width: 280px;
}
.page-school-settings .school-settings-actions {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.page-school-consent-show .consent-show-kpi {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1.25rem;
}
@media (max-width: 992px) {
  .page-school-consent-show .consent-show-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.page-school-consent-show .consent-show-kpi__status,
.page-school-consent-show .consent-show-kpi__text {
  font-size: 0.875rem !important;
  line-height: 1.3;
}
.page-school-consent-show .consent-status-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.page-school-consent-show .consent-status-badge--draft {
  background: #f1f5f9;
  color: #64748b;
}
.page-school-consent-show .consent-status-badge--published {
  background: #dcfce7;
  color: #15803d;
}
.page-school-consent-show .consent-status-badge--closed {
  background: #fee2e2;
  color: #b91c1c;
}
.page-school-consent-show .consent-show-url-section {
  margin-bottom: 1.25rem;
}
.page-school-consent-show .consent-show-url-lead {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: #64748b;
}
.page-school-consent-show .consent-show-url-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 720px;
}
.page-school-consent-show .consent-show-url-copy .form-control {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 220px;
  font-size: 0.8125rem;
  background: #f8fafc;
}
.page-school-consent-show .consent-show-url-copy .consent-show-url-copy-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  white-space: nowrap;
}
.page-school-consent-show .consent-show-description {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #334155;
}
.page-school-consent-show .consent-show-description p:last-child {
  margin-bottom: 0;
}
.page-school-consent-show .consent-show-section-count {
  margin-left: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #94a3b8;
}
.page-school-consent-show .consent-show-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.55rem;
}
.page-school-consent-show .consent-show-field-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.page-school-consent-show .consent-show-field-item__num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #036eb8;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.page-school-consent-show .consent-show-field-item__body {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.page-school-consent-show .consent-show-field-item__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.page-school-consent-show .consent-show-field-item__type {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #036eb8;
  font-size: 0.625rem;
  font-weight: 700;
}
.page-school-consent-show .consent-show-field-item__required {
  font-size: 0.625rem;
  font-weight: 700;
  color: #ef4444;
}
.page-school-consent-show .consent-show-field-item__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
}
.page-school-consent-show .consent-show-field-item__meta {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  color: #64748b;
  line-height: 1.45;
}
.page-school-consent-show .consent-show-summary + .page-school-consent-show .consent-show-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}
.page-school-consent-show .consent-show-summary__title {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-school-consent-show .consent-show-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.65rem;
  max-width: 560px;
}
.page-school-consent-show .consent-show-summary__card {
  padding: 0.75rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.page-school-consent-show .consent-show-summary__card--total {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.page-school-consent-show .consent-show-summary__count {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: #036eb8;
}
.page-school-consent-show .consent-show-summary__label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: #64748b;
  line-height: 1.35;
}
.page-school-consent-show .consent-show-responses {
  margin-bottom: 1.25rem;
}
.page-school-consent-show .consent-show-responses__head {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
}
.page-school-consent-show .consent-show-responses__meta {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
}
.page-school-consent-show .consent-show-responses__meta strong {
  color: #0f172a;
}
.page-school-consent-show .consent-show-responses__tools {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.page-school-consent-show .consent-show-filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
}
.page-school-consent-show .consent-show-filter-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-school-consent-show .consent-show-filter-btn span {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 0.625rem;
}
.page-school-consent-show .consent-show-filter-btn:hover {
  border-color: #cbd5e1;
  color: #334155;
}
.page-school-consent-show .consent-show-filter-btn.is-active {
  background: #036eb8;
  border-color: #036eb8;
  color: #fff;
}
.page-school-consent-show .consent-show-filter-btn.is-active span {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.page-school-consent-show .consent-show-filter-btn--agree.is-active {
  background: #16a34a;
  border-color: #16a34a;
}
.page-school-consent-show .consent-show-filter-btn--disagree.is-active {
  background: #dc2626;
  border-color: #dc2626;
}
.page-school-consent-show .consent-show-csv-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
}
.page-school-consent-show .consent-answer-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.page-school-consent-show .consent-answer-badge--agree {
  background: #dcfce7;
  color: #15803d;
}
.page-school-consent-show .consent-answer-badge--disagree {
  background: #fee2e2;
  color: #b91c1c;
}
.page-school-consent-show .consent-show-row-actions {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.25rem;
  position: relative;
  z-index: 1;
}
.page-school-consent-show .consent-show-response-row {
  cursor: pointer;
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}
.page-school-consent-show .consent-show-response-row:hover, .page-school-consent-show .consent-show-response-row:focus-visible {
  background: #eff6ff;
  outline: none;
}
.page-school-consent-show .consent-show-response-row td:first-child {
  position: relative;
}
.page-school-consent-show .consent-show-response-actions-head {
  width: 88px;
}
.page-school-consent-show .consent-show-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: #94a3b8;
}
.page-school-consent-show .consent-show-empty i {
  font-size: 2rem;
  color: #cbd5e1;
}
.page-school-consent-show .consent-show-empty p {
  margin: 0;
  font-size: 0.8125rem;
}
.page-school-consent-show .school-list-table-card__title i {
  margin-right: 0.25rem;
  color: #036eb8;
}

.page-school-cancellation .cancellation-notice-section {
  margin-bottom: 1.25rem;
}
.page-school-cancellation .cancellation-notice-section .school-form-section__head {
  border-left-color: #f59e0b;
}
.page-school-cancellation .cancellation-notice-section .school-form-section__title i {
  color: #d97706;
}
.page-school-cancellation .cancellation-notice-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.65;
}
.page-school-cancellation .cancellation-notice-list li + li {
  margin-top: 0.4rem;
}
.page-school-cancellation .cancellation-notice-list strong {
  color: #b45309;
}
.page-school-cancellation .cancellation-form-table th {
  width: 24%;
}
.page-school-cancellation .cancellation-form-table .form-select,
.page-school-cancellation .cancellation-form-table .form-control {
  max-width: 420px;
}
.page-school-cancellation .cancellation-form-table textarea.form-control {
  max-width: 100%;
}
.page-school-cancellation .cancellation-month-input {
  max-width: 220px;
}
.page-school-cancellation .cancellation-field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  color: #94a3b8;
}
.page-school-cancellation .cancellation-form-actions {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}
.page-school-cancellation .cancellation-submit-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 8px;
}

.page-school-registration .school-registration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
}
@media (max-width: 768px) {
  .page-school-registration .school-registration-grid {
    grid-template-columns: 1fr;
  }
}
.page-school-registration .school-registration-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3rem;
}
.page-school-registration .school-registration-field--full {
  grid-column: 1/-1;
  max-width: 420px;
}
.page-school-registration .school-registration-field__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}
.page-school-registration .school-registration-field__hint {
  margin: -0.1rem 0 0.15rem;
  font-size: 0.6875rem;
  color: #94a3b8;
  line-height: 1.35;
}
.page-school-registration .school-registration-field .form-control,
.page-school-registration .school-registration-field .form-select {
  width: 100%;
  font-size: 0.8125rem;
}
.page-school-registration .school-registration-field .form-select:disabled {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}
.page-school-registration .school-registration-password-lead {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.5;
}
.page-school-registration .school-registration-actions {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.page-school-registration .school-registration-actions .btn-primary {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
}

.page-school-consent-response-show .consent-response-respondent-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.25rem;
  margin: 0;
}
@media (max-width: 768px) {
  .page-school-consent-response-show .consent-response-respondent-dl {
    grid-template-columns: 1fr;
  }
}
.page-school-consent-response-show .consent-response-respondent-dl__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.page-school-consent-response-show .consent-response-respondent-dl dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}
.page-school-consent-response-show .consent-response-respondent-dl dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  word-break: break-word;
}
.page-school-consent-response-show .consent-response-answers-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.65rem;
}
.page-school-consent-response-show .consent-response-answer-card {
  padding: 0.85rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.page-school-consent-response-show .consent-response-answer-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.page-school-consent-response-show .consent-response-answer-card__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-school-consent-response-show .consent-response-answer-card__required {
  font-size: 0.625rem;
  font-weight: 700;
  color: #ef4444;
}
.page-school-consent-response-show .consent-response-answer-card__value {
  font-size: 0.875rem;
  color: #0f172a;
  line-height: 1.55;
}
.page-school-consent-response-show .consent-response-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-school-consent-response-show .consent-response-check-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.35rem;
  padding: 0.15rem 0;
  font-size: 0.8125rem;
}
.page-school-consent-response-show .consent-response-check-list li i {
  margin-top: 0.1rem;
  color: #16a34a;
}
.page-school-consent-response-show .consent-response-text-block {
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  line-height: 1.7;
  font-size: 0.8125rem;
}
.page-school-consent-response-show .consent-response-text-block p:last-child {
  margin-bottom: 0;
}
.page-school-consent-response-show .consent-response-empty {
  font-size: 0.8125rem;
  color: #94a3b8;
  font-style: italic;
}
.page-school-consent-response-show .consent-answer-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.page-school-consent-response-show .consent-answer-badge--agree {
  background: #dcfce7;
  color: #15803d;
}
.page-school-consent-response-show .consent-answer-badge--disagree {
  background: #fee2e2;
  color: #b91c1c;
}

.page-school-consent-response-edit .consent-response-respondent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
}
@media (max-width: 768px) {
  .page-school-consent-response-edit .consent-response-respondent-grid {
    grid-template-columns: 1fr;
  }
}
.page-school-consent-response-edit .consent-response-respondent-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
}
.page-school-consent-response-edit .consent-response-respondent-field__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}
.page-school-consent-response-edit .consent-response-respondent-field__label--sub {
  margin-top: 0.35rem;
}
.page-school-consent-response-edit .consent-response-respondent-field .form-control,
.page-school-consent-response-edit .consent-response-respondent-field .form-select {
  width: 100%;
  font-size: 0.8125rem;
}
.page-school-consent-response-edit .consent-response-edit-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.85rem;
}
.page-school-consent-response-edit .consent-response-edit-heading {
  padding: 0.55rem 0.75rem;
  border-left: 3px solid #036eb8;
  background: #eff6ff;
  border-radius: 0 8px 8px 0;
}
.page-school-consent-response-edit .consent-response-edit-heading__label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-consent-response-edit .consent-response-edit-field {
  padding: 0.85rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.page-school-consent-response-edit .consent-response-edit-field__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-school-consent-response-edit .consent-response-edit-field__label.is-required::after {
  content: " *";
  color: #ef4444;
}
.page-school-consent-response-edit .consent-response-edit-field .form-control {
  font-size: 0.8125rem;
}
.page-school-consent-response-edit .consent-response-edit-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.45rem;
}
.page-school-consent-response-edit .consent-response-edit-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.page-school-consent-response-edit .consent-response-edit-option span {
  font-size: 0.8125rem;
  color: #334155;
}
.page-school-consent-response-edit .consent-response-edit-option .form-check-input {
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.page-school-consent-response-edit .consent-response-edit-option:has(.form-check-input:checked) {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.page-school-consent-response-edit .consent-response-edit-option:hover {
  border-color: #cbd5e1;
}
.page-school-consent-response-edit .consent-response-edit-actions {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  max-width: none;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.page-school-consent-response-edit .consent-response-edit-actions .btn-primary {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
}

.school_page .school-chat-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
}
.school_page .school-chat-fab__toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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%);
  -webkit-box-shadow: 0 8px 24px rgba(3, 110, 184, 0.22);
          box-shadow: 0 8px 24px rgba(3, 110, 184, 0.22);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.school_page .school-chat-fab__toggle:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 12px 28px rgba(3, 110, 184, 0.28);
          box-shadow: 0 12px 28px rgba(3, 110, 184, 0.28);
}
.school_page .school-chat-fab__avatar {
  width: 2.25rem;
  height: 2.25rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.school_page .school-chat-fab.is-open .school_page .school-chat-fab__toggle {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
}
.school_page .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;
  -webkit-box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
          box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}
.school_page .school-chat-panel[hidden] {
  display: none !important;
}
.school_page .school-chat-panel__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.school_page .school-chat-panel__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
}
.school_page .school-chat-panel__avatar {
  width: 1.5rem;
  height: 1.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.school_page .school-chat-panel__close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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_page .school-chat-panel__close:hover {
  background: #f1f5f9;
  color: #334155;
}
.school_page .school-chat-panel__body.chatbot-container {
  height: 420px;
  max-height: min(420px, calc(100vh - 8rem));
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
}
.school_page .school-chat-panel__body.chatbot-container .chatbot-messages {
  padding: 0 0.75rem 0.75rem;
  gap: 0.5rem;
}
.school_page .school-chat-panel__body.chatbot-container .message:first-child {
  margin-top: 0;
}
.school_page .school-chat-bot-avatar {
  width: 1.25rem;
  height: 1.25rem;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
}
.school_page .school-chat-panel .bot-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}

.page-school-student-show .student-show-kpi {
  margin-bottom: 1.25rem;
}
.page-school-student-show .student-show-kpi__text {
  font-size: 0.875rem !important;
  line-height: 1.35;
}
.page-school-student-show .student-show-kpi .school-list-kpi__value small {
  font-size: 0.55em;
  font-weight: 700;
  opacity: 0.75;
}
.page-school-student-show .student-show-head-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: #036eb8;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.page-school-student-show .student-show-head-btn:hover {
  background: #025a96;
  color: #fff;
}
.page-school-student-show .student-show-head-btn i {
  font-size: 0.95rem;
  line-height: 1;
}
.page-school-student-show .student-show-info-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0;
}
@media (max-width: 768px) {
  .page-school-student-show .student-show-info-dl {
    grid-template-columns: 1fr;
  }
}
.page-school-student-show .student-show-info-dl__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.page-school-student-show .student-show-info-dl dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
}
.page-school-student-show .student-show-info-dl dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
  word-break: break-word;
}
.page-school-student-show .student-show-info-dl__note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
}
.page-school-student-show .student-show-section-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
}
.page-school-student-show .student-show-health__toolbar,
.page-school-student-show .school-form-section__head .student-show-health__filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}
.page-school-student-show .student-show-health__filter-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}
.page-school-student-show .student-show-health__filter .form-select-sm {
  width: auto;
  min-width: 5.5rem;
  font-size: 0.6875rem;
  border-radius: 8px;
}
.page-school-student-show .student-show-eval-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 992px) {
  .page-school-student-show .student-show-eval-grid {
    grid-template-columns: 1fr;
  }
}
.page-school-student-show .student-show-eval-chart .chart-container {
  position: relative;
  height: 280px;
  margin-bottom: 1rem;
}
.page-school-student-show .student-show-eval-chart .chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 280px;
}
.page-school-student-show .student-show-subtitle {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-student-show .student-show-ai-panel {
  padding: 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.page-school-student-show .student-show-ai-panel__comment {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #334155;
}
.page-school-student-show .student-show-overall-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  margin-bottom: 0.85rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eff6ff), to(#fff));
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.page-school-student-show .student-show-overall-score__value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #036eb8;
}
.page-school-student-show .student-show-overall-score__label {
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
}
.page-school-student-show .student-show-score-item {
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.page-school-student-show .student-show-score-item__title {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-student-show .student-show-score-item__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: #64748b;
}
.page-school-student-show .student-show-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
}
.page-school-student-show .student-show-badge--status {
  background: #f1f5f9;
  color: #475569;
}
.page-school-student-show .student-show-badge--test {
  background: #fef3c7;
  color: #b45309;
}
.page-school-student-show .student-show-badge--normal {
  background: #dbeafe;
  color: #1d4ed8;
}
.page-school-student-show .student-show-comment-cell {
  font-size: 0.8125rem;
  line-height: 1.55;
  max-width: 520px;
}
.page-school-student-show .student-show-lessons-table th, .page-school-student-show .student-show-lessons-table td {
  font-size: 0.75rem;
  vertical-align: middle;
}
.page-school-student-show .student-show-lessons-table__lesson {
  min-width: 180px;
}
.page-school-student-show .student-show-lessons-table__lesson strong {
  display: block;
  font-size: 0.8125rem;
  color: #0f172a;
}
.page-school-student-show .student-show-lessons-table__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
}
.page-school-student-show .student-show-lesson-row {
  cursor: pointer;
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}
.page-school-student-show .student-show-lesson-row:hover, .page-school-student-show .student-show-lesson-row:focus-visible {
  background: #eff6ff;
  outline: none;
}
.page-school-student-show .student-show-lesson-row td:first-child strong {
  color: #036eb8;
}
.page-school-student-show .health-calendar {
  padding: 0;
}
.page-school-student-show .health-calendar .calendar-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.page-school-student-show .health-calendar .calendar-header__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #036eb8;
  text-decoration: none;
}
.page-school-student-show .health-calendar .calendar-header__btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.page-school-student-show .health-calendar .calendar-header__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-student-show .health-calendar .health-calendar-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-school-student-show .health-calendar .health-calendar-table {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
}
.page-school-student-show .health-calendar .health-calendar-table .health-calendar-th-label,
.page-school-student-show .health-calendar .health-calendar-table .health-calendar-td-label {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 52px;
  background: #f8fafc;
  font-weight: 700;
  -webkit-box-shadow: 2px 0 4px rgba(15, 23, 42, 0.04);
          box-shadow: 2px 0 4px rgba(15, 23, 42, 0.04);
}
.page-school-student-show .health-calendar .health-calendar-table .health-calendar-th-day,
.page-school-student-show .health-calendar .health-calendar-table .health-calendar-td-value {
  min-width: 40px;
  font-size: 0.6875rem;
  padding: 0.35rem 0.2rem;
}
.page-school-student-show .health-calendar .health-calendar-table .health-calendar-td-value.today {
  background: #fef9c3;
  font-weight: 800;
}
.page-school-student-show .health-calendar .mood-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}
.page-school-student-show .health-calendar .mood-legend__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
}
.page-school-student-show .health-calendar .mood-legend .mood-legend-item {
  font-size: 0.6875rem;
  color: #475569;
}
.page-school-student-show .mental-chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}

.guest-student-picker__panel {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
}
.guest-student-picker__panel-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.guest-student-picker__panel-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
}
.guest-student-picker__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.35rem;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}
.guest-student-picker__empty {
  margin: 0;
  padding: 0 1rem 0.75rem;
  color: #64748b;
  font-size: 0.8125rem;
}
.guest-student-picker__empty[hidden] {
  display: none !important;
}
.guest-student-picker__option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}
.guest-student-picker__option:hover {
  border-color: #94c9ef;
  background: #f0f9ff;
}
.guest-student-picker__option input {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.guest-student-picker__option span {
  color: #0f172a;
}
.guest-student-picker__chips, .guest-student-picker__teacher-chips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
}
.guest-student-picker__chip, .guest-student-picker__teacher-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.guest-student-picker__chip {
  background: #e8f4fc;
  color: #025a96;
}
.guest-student-picker__teacher-chip {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.guest-message-room-form__multi-select {
  min-height: 8rem;
}
.guest-message-room-form__member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.35rem 1rem;
  padding-left: 1.1rem;
}

.page-school-email .btn-primary {
  background: #036eb8;
  border-color: #036eb8;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.15rem;
}
.page-school-email .btn-primary:hover {
  background: rgb(2.5090909091, 92, 153.8909090909);
  border-color: rgb(2.5090909091, 92, 153.8909090909);
}
.page-school-email .school-email-address-row {
  cursor: pointer;
}
.page-school-email .school-email-address-row:hover, .page-school-email .school-email-address-row:focus-visible {
  background: #eff6ff;
  outline: none;
}
.page-school-email .school-email-address-row__name {
  color: #036eb8;
  font-weight: 700;
}
.page-school-email .school-email-address-row__chevron {
  color: #94a3b8;
  font-size: 1.1rem;
  line-height: 1;
}
.page-school-email .school-email-address-row:hover .page-school-email .school-email-address-row__chevron, .page-school-email .school-email-address-row:focus-visible .page-school-email .school-email-address-row__chevron {
  color: #036eb8;
}

.page-school-guest-users .school-form-callout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
  padding: 0.9rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  color: #1e3a5f;
}
.page-school-guest-users .school-form-callout > i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.25rem;
  color: #036eb8;
}
.page-school-guest-users .school-form-callout__title {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-guest-users .school-form-callout__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #475569;
}
.page-school-guest-users .guest-user-form {
  max-width: 40rem;
}
.page-school-guest-users .guest-user-form__fields {
  margin-top: 0.15rem;
}
.page-school-guest-users .guest-user-form__errors {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
}
.page-school-guest-users .guest-user-form .form-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-school-guest-users .guest-user-form .form-control {
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.875rem;
}
.page-school-guest-users .guest-user-form .form-control:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-school-guest-users .guest-user-form__actions {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-top: 1.35rem;
}
.page-school-guest-users .guest-user-form__actions .btn {
  min-width: 7.5rem;
  padding: 0.55rem 1.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
}
.page-school-guest-users .guest-user-form__actions .btn-primary {
  background: #036eb8;
  border-color: #036eb8;
}
.page-school-guest-users .guest-user-form__actions .btn-primary:hover {
  background: rgb(2.5090909091, 92, 153.8909090909);
  border-color: rgb(2.5090909091, 92, 153.8909090909);
}
.page-school-guest-users .guest-user-form__actions .btn-outline-secondary {
  border-color: #cbd5e1;
  color: #475569;
}
.page-school-guest-users .guest-user-form__actions .btn-outline-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #334155;
}
.page-school-guest-users .school-guest-users-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 2.5rem 1rem 2rem;
}
.page-school-guest-users .school-guest-users-empty__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: #e8f4fc;
  color: #036eb8;
  font-size: 1.65rem;
}
.page-school-guest-users .school-guest-users-empty__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}
.page-school-guest-users .school-guest-users-empty__lead {
  max-width: 26rem;
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #64748b;
}

.gas-drive-setup {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(165deg, #f8fbff 0%, #fff 55%);
  border: 1px solid #cfe2ff;
  border-radius: 12px;
}
.gas-drive-setup__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e3eeff;
}
.gas-drive-setup__title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.55rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.gas-drive-setup__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  color: #0d6efd;
  background: #e7f1ff;
  border-radius: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.gas-drive-setup__title {
  margin: 0 0 0.15rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1a2b3d;
}
.gas-drive-setup__lead {
  margin: 0;
  font-size: 0.72rem;
  color: #5c6b7a;
  line-height: 1.45;
}
.gas-drive-setup__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}
.gas-drive-setup__badge--ok {
  color: #0f5132;
  background: #d1e7dd;
}
.gas-drive-setup__badge--pending {
  color: #664d03;
  background: #fff3cd;
}
.gas-drive-setup__alert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.8125rem;
  border-radius: 8px;
}
.gas-drive-setup__alert--warn {
  color: #664d03;
  background: #fff8e6;
  border: 1px solid #ffe69c;
}
.gas-drive-setup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .gas-drive-setup__grid {
    grid-template-columns: 1fr minmax(220px, 280px);
  }
}
.gas-drive-setup__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.gas-drive-setup__aside {
  min-width: 0;
}
.gas-drive-setup__card {
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
}
.gas-drive-setup__card--form {
  border-color: #b6d4fe;
  -webkit-box-shadow: 0 1px 4px rgba(13, 110, 253, 0.08);
          box-shadow: 0 1px 4px rgba(13, 110, 253, 0.08);
}
.gas-drive-setup__card--status {
  height: 100%;
}
.gas-drive-setup__card--empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 160px;
  text-align: center;
  color: #6c757d;
  font-size: 0.8125rem;
}
.gas-drive-setup__empty-icon {
  font-size: 2rem;
  color: #adb5bd;
  margin-bottom: 0.5rem;
}
.gas-drive-setup__card-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: #212529;
}
.gas-drive-setup__card-title i {
  font-size: 0.9rem;
  color: #0d6efd;
}
.gas-drive-setup__steps {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.8125rem;
  color: #495057;
  line-height: 1.65;
}
.gas-drive-setup__steps code {
  font-size: 0.75rem;
  word-break: break-all;
}
.gas-drive-setup__hint {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: #6c757d;
  line-height: 1.45;
}
.gas-drive-setup__hint--saved {
  color: #0f5132;
  background: #e8f5ee;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
}
.gas-drive-setup__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #495057;
}
.gas-drive-setup__input {
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
}
.gas-drive-setup__form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.gas-drive-setup .btn.gas-drive-setup__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}
.gas-drive-setup .btn.gas-drive-setup__btn span {
  font-size: inherit;
}
.gas-drive-setup .btn.gas-drive-setup__btn i {
  font-size: 0.95rem;
  line-height: 1;
}
.gas-drive-setup .btn.gas-drive-setup__btn.gas-drive-setup__btn--icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0;
  border-radius: 6px;
}
.gas-drive-setup .btn.gas-drive-setup__btn.gas-drive-setup__btn--icon i {
  font-size: 1rem;
}
.gas-drive-setup__meta {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  color: #6c757d;
}
.gas-drive-setup__meta i {
  margin-right: 0.2rem;
}
.gas-drive-setup__aside-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.gas-drive-setup__students {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e3eeff;
}
.gas-drive-setup__students-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.gas-drive-setup__student-list {
  max-height: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}
.gas-drive-setup__student-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #f1f3f5;
}
.gas-drive-setup__student-item:last-child {
  border-bottom: none;
}
.gas-drive-setup__student-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #212529;
  min-width: 0;
}
.gas-drive-setup__student-meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: #868e96;
}

.education_board_page {
  padding: 2rem;
}
.education_board_page .container {
  max-width: 100%;
}

.education_board_main-content {
  padding: 0;
}
.education_board_main-content .pageTitle,
.education_board_main-content .eb-page-subtitle {
  font-size: 1.35rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.education_board_main-content .pageTitle i,
.education_board_main-content .eb-page-subtitle i {
  color: #036EB8;
}
.education_board_main-content .row .col-3 .btn {
  width: 90% !important;
  margin: 1rem auto;
}
.education_board_main-content .row .col-3 .btn i {
  margin-right: 8px;
}

.eb-section {
  padding: 1rem 1.25rem;
  border-radius: 0.375rem;
  background: #fff;
}

.eb-stat-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  background: #fff;
  min-height: 80px;
  -webkit-transition: border-color 0.2s, background-color 0.2s;
  transition: border-color 0.2s, background-color 0.2s;
}
.eb-stat-block:hover {
  border-color: #dee2e6;
  background: #f8f9fa;
}
.eb-stat-block__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 1rem;
}
.eb-stat-block--blue .eb-stat-block__icon {
  background: rgba(3, 110, 184, 0.12);
  color: #036EB8;
}
.eb-stat-block--green .eb-stat-block__icon {
  background: rgba(40, 167, 69, 0.12);
  color: #28a745;
}
.eb-stat-block--purple .eb-stat-block__icon {
  background: rgba(102, 126, 234, 0.12);
  color: #667eea;
}
.eb-stat-block--warning .eb-stat-block__value {
  color: #e67e22;
}
.eb-stat-block--danger .eb-stat-block__value {
  color: #dc3545;
}
.eb-stat-block--muted .eb-stat-block__value {
  color: #6c757d;
}
.eb-stat-block__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.15rem;
}
.eb-stat-block__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}
.eb-stat-block__label {
  font-size: 0.9rem;
  color: #6c757d;
}

.eb-safety-page__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.eb-safety-page__lead {
  margin: 0 0 1.25rem;
  color: #5f6b7a;
  font-size: 0.95rem;
  line-height: 1.6;
}
.eb-safety-page__date-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.eb-safety-page__date-label {
  margin: 0;
  color: #6c757d;
  font-size: 0.95rem;
  font-weight: 600;
}
.eb-safety-page__date-label span {
  color: #212529;
}
.eb-safety-page__date-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.eb-safety-page__crisis-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(220, 53, 69, 0.45);
  border-left: 4px solid #dc3545;
  border-radius: 0.5rem;
  background: rgba(220, 53, 69, 0.12);
  -webkit-animation: eb-safety-banner-pulse 2.4s ease-in-out infinite;
          animation: eb-safety-banner-pulse 2.4s ease-in-out infinite;
}
.eb-safety-page__crisis-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-animation: eb-safety-badge-pulse 1.8s ease-in-out infinite;
          animation: eb-safety-badge-pulse 1.8s ease-in-out infinite;
}
.eb-safety-page__crisis-title {
  color: #842029;
  font-size: 1rem;
  font-weight: 700;
}
.eb-safety-page__crisis-meta {
  color: #5f6b7a;
  font-size: 0.92rem;
  font-weight: 600;
}
.eb-safety-page__crisis-count {
  color: #dc3545;
  font-size: 1.05rem;
  font-weight: 800;
}
.eb-safety-page__crisis-separator {
  margin: 0 0.35rem;
  color: #adb5bd;
}
.eb-safety-page--emergency {
  position: relative;
  margin: -0.5rem -0.75rem 0;
  padding: 0.75rem 0.75rem 0.25rem;
  border-radius: 12px;
  overflow: hidden;
}
.eb-safety-page--emergency::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff5f5), to(#ffe8e8));
  background: linear-gradient(180deg, #fff5f5 0%, #ffe8e8 100%);
  -webkit-animation: eb-safety-emergency-bg 2.8s ease-in-out infinite;
          animation: eb-safety-emergency-bg 2.8s ease-in-out infinite;
  pointer-events: none;
}
.eb-safety-page--emergency .education_board_main-content {
  position: relative;
  z-index: 1;
}
.eb-safety-page--emergency .pageTitle i {
  color: #dc3545;
  -webkit-animation: eb-safety-icon-pulse 1.6s ease-in-out infinite;
          animation: eb-safety-icon-pulse 1.6s ease-in-out infinite;
}
.eb-safety-page--emergency .eb-stat-block {
  background: rgba(255, 255, 255, 0.94);
  -webkit-box-shadow: 0 4px 16px rgba(220, 53, 69, 0.08);
          box-shadow: 0 4px 16px rgba(220, 53, 69, 0.08);
}
.eb-safety-page--emergency .eb-safety-table-wrap {
  border: 1px solid rgba(220, 53, 69, 0.22);
  -webkit-box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
          box-shadow: 0 8px 24px rgba(220, 53, 69, 0.08);
}

@-webkit-keyframes eb-safety-emergency-bg {
  0%, 100% {
    background-color: #fff5f5;
  }
  50% {
    background-color: #ffd6d6;
  }
}

@keyframes eb-safety-emergency-bg {
  0%, 100% {
    background-color: #fff5f5;
  }
  50% {
    background-color: #ffd6d6;
  }
}
@-webkit-keyframes eb-safety-banner-pulse {
  0%, 100% {
    background-color: rgba(220, 53, 69, 0.1);
    -webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
  }
  50% {
    background-color: rgba(220, 53, 69, 0.24);
    -webkit-box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.04);
            box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.04);
  }
}
@keyframes eb-safety-banner-pulse {
  0%, 100% {
    background-color: rgba(220, 53, 69, 0.1);
    -webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
  }
  50% {
    background-color: rgba(220, 53, 69, 0.24);
    -webkit-box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.04);
            box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.04);
  }
}
@-webkit-keyframes eb-safety-badge-pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
}
@keyframes eb-safety-badge-pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
}
@-webkit-keyframes eb-safety-icon-pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
    opacity: 0.82;
  }
}
@keyframes eb-safety-icon-pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
    opacity: 0.82;
  }
}
@-webkit-keyframes eb-safety-stat-pulse {
  0%, 100% {
    border-color: rgba(220, 53, 69, 0.45);
    -webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
  }
  50% {
    border-color: #dc3545;
    -webkit-box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.08);
            box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.08);
  }
}
@keyframes eb-safety-stat-pulse {
  0%, 100% {
    border-color: rgba(220, 53, 69, 0.45);
    -webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.12);
  }
  50% {
    border-color: #dc3545;
    -webkit-box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.08);
            box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.08);
  }
}
.eb-stat-block--unknown-alert {
  border-color: rgba(220, 53, 69, 0.55);
  -webkit-animation: eb-safety-stat-pulse 2s ease-in-out infinite;
          animation: eb-safety-stat-pulse 2s ease-in-out infinite;
}
.eb-stat-block--unknown-alert .eb-stat-block__value {
  color: #dc3545;
}

@media (prefers-reduced-motion: reduce) {
  .eb-safety-page--emergency::before,
  .eb-safety-page__crisis-banner,
  .eb-safety-page__crisis-badge,
  .eb-safety-page--emergency .pageTitle i,
  .eb-stat-block--unknown-alert,
  .eb-safety-dashboard-link {
    -webkit-animation: none;
            animation: none;
  }
}
.eb-safety-table-wrap {
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
}

.eb-safety-table-panel__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(220, 53, 69, 0.14);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff7f7), to(#fff));
  background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
}
.eb-safety-table-panel__title {
  margin: 0 0 0.35rem;
  color: #842029;
  font-size: 1rem;
  font-weight: 700;
}
.eb-safety-table-panel__note {
  margin: 0;
  color: #6c757d;
  font-size: 0.86rem;
  line-height: 1.5;
}
.eb-safety-table-panel__legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.45rem;
}
.eb-safety-table-panel__legend-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.eb-safety-table-panel__legend-item--safe {
  background: rgba(40, 167, 69, 0.12);
  color: #1e7e34;
}
.eb-safety-table-panel__legend-item--warning {
  background: rgba(230, 126, 34, 0.14);
  color: #c05621;
}
.eb-safety-table-panel__legend-item--danger {
  background: rgba(220, 53, 69, 0.12);
  color: #b02a37;
}
.eb-safety-table-panel__legend-item--unknown {
  background: rgba(108, 117, 125, 0.14);
  color: #495057;
}

.eb-safety-table-scroll {
  max-height: none;
}

.eb-safety-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.eb-safety-table th,
.eb-safety-table td {
  padding: 0.95rem 0.85rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(220, 53, 69, 0.08);
  white-space: nowrap;
}
.eb-safety-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff0f0;
  color: #842029;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  border-bottom: 1px solid rgba(220, 53, 69, 0.18);
  -webkit-box-shadow: inset 0 -1px 0 rgba(220, 53, 69, 0.08);
          box-shadow: inset 0 -1px 0 rgba(220, 53, 69, 0.08);
}
.eb-safety-table tbody tr:last-child td {
  border-bottom: 0;
}
.eb-safety-table__col-school {
  min-width: 14rem;
  text-align: left;
}
.eb-safety-table__col-metric, .eb-safety-table__col-status, .eb-safety-table__col-rate, .eb-safety-table__col-action {
  text-align: center;
}
.eb-safety-table__col-action {
  width: 8.5rem;
}
.eb-safety-table__row {
  background: #fff;
  -webkit-transition: background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.eb-safety-table__row:hover {
  background: #fff9f9;
}
.eb-safety-table__row--pending {
  background: -webkit-gradient(linear, left top, right top, from(rgba(220, 53, 69, 0.1)), color-stop(1.25rem, rgba(255, 255, 255, 0.98)));
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.1) 0%, rgba(255, 255, 255, 0.98) 1.25rem);
  -webkit-box-shadow: inset 4px 0 0 #dc3545;
          box-shadow: inset 4px 0 0 #dc3545;
}
.eb-safety-table__row--pending:hover {
  background: -webkit-gradient(linear, left top, right top, from(rgba(220, 53, 69, 0.14)), color-stop(1.25rem, #fff7f7));
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.14) 0%, #fff7f7 1.25rem);
}
.eb-safety-table__row--complete {
  -webkit-box-shadow: inset 4px 0 0 rgba(40, 167, 69, 0.55);
          box-shadow: inset 4px 0 0 rgba(40, 167, 69, 0.55);
}
.eb-safety-table__school-cell {
  white-space: normal;
}
.eb-safety-table__school {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.eb-safety-table__school-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 1.1rem;
}
.eb-safety-table__school-name {
  color: #212529;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.4;
}
.eb-safety-table__metric-cell, .eb-safety-table__status-cell, .eb-safety-table__rate-cell, .eb-safety-table__action-cell {
  text-align: center;
}
.eb-safety-table__rate {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.55rem;
  min-width: 7.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.eb-safety-table__rate-track {
  width: 4.5rem;
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: #f1d4d4;
}
.eb-safety-table__rate-bar {
  height: 100%;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, right top, from(#f08a8a), to(#dc3545));
  background: linear-gradient(90deg, #f08a8a 0%, #dc3545 100%);
  -webkit-transition: width 0.35s ease;
  transition: width 0.35s ease;
}
.eb-safety-table__rate-value {
  min-width: 2.5rem;
  color: #495057;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
}
.eb-safety-table__rate--low .eb-safety-table__rate-bar {
  background: -webkit-gradient(linear, left top, right top, from(#ffb3b3), to(#dc3545));
  background: linear-gradient(90deg, #ffb3b3 0%, #dc3545 100%);
}
.eb-safety-table__rate--low .eb-safety-table__rate-value {
  color: #dc3545;
}
.eb-safety-table__action {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #b02a37 !important;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.eb-safety-table__action:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff !important;
}

.eb-safety-metric {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 2.4rem;
  min-height: 2rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}
.eb-safety-metric--neutral {
  background: #f1f3f5;
  color: #495057;
}
.eb-safety-metric--confirmed {
  background: rgba(3, 110, 184, 0.1);
  color: #036eb8;
}
.eb-safety-metric--safe {
  background: rgba(40, 167, 69, 0.12);
  color: #1e7e34;
}
.eb-safety-metric--warning {
  background: rgba(230, 126, 34, 0.14);
  color: #c05621;
}
.eb-safety-metric--danger {
  background: rgba(220, 53, 69, 0.12);
  color: #b02a37;
}
.eb-safety-metric--unknown {
  background: rgba(108, 117, 125, 0.12);
  color: #6c757d;
}
.eb-safety-metric.is-zero {
  opacity: 0.55;
  font-weight: 600;
}
.eb-safety-metric.is-active {
  background: #dc3545;
  color: #fff;
  -webkit-box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
          box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
}

@media (max-width: 991.98px) {
  .eb-safety-table-panel__head {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .eb-safety-table__rate {
    min-width: 6.5rem;
  }
  .eb-safety-table__rate-track {
    width: 3.25rem;
  }
}
.eb-safety-dashboard-link {
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 0.375rem;
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.14), rgba(255, 255, 255, 0.95));
  padding: 1rem 1.25rem;
  -webkit-animation: eb-safety-banner-pulse 2.8s ease-in-out infinite;
          animation: eb-safety-banner-pulse 2.8s ease-in-out infinite;
}
.eb-safety-dashboard-link__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.eb-safety-dashboard-link__title {
  margin: 0 0 0.35rem;
  color: #b02a37;
  font-size: 1rem;
  font-weight: 700;
}
.eb-safety-dashboard-link__title i {
  margin-right: 0.35rem;
}
.eb-safety-dashboard-link__text {
  color: #5f6b7a;
  font-size: 0.95rem;
  line-height: 1.5;
}

.education-board-page {
  padding: 1.5rem 0 2rem;
}
.education-board-page .main-content {
  max-width: 100%;
}

.eb-registration-page {
  padding: 3rem 1rem;
}
.eb-registration-page .container {
  max-width: 42rem;
}
.eb-registration-page .btn-primary {
  background: #036EB8;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0.5rem 2rem;
  border-radius: 0.375rem;
}
.eb-registration-page .btn-outline-secondary {
  background: none;
  border: none !important;
  color: #036EB8 !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0.5rem 2rem;
}

.eb-registration-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.eb-registration-title i {
  color: #036EB8;
}

.eb-registration-desc {
  margin: 0;
}

.eb-registration-section {
  padding: 1.5rem 1.25rem;
}

.eb-registration-section-heading {
  font-size: 1rem;
  font-weight: 600;
  color: #495057;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}
.eb-registration-section-heading:not(:first-child) {
  margin-top: 1.5rem;
}

.eb-registration-field {
  margin-bottom: 1.25rem;
}
.eb-registration-field .form-text {
  margin: 0;
}

.eb-registration-actions {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e9ecef;
}

.eb-registration-back {
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

.education-board-edit h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.education-board-edit h4 i {
  color: #036EB8;
}
.education-board-edit .table th {
  font-weight: 600;
  color: #495057;
}

.eb-announcements-page {
  padding: 2rem;
}

.eb-announcements-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.eb-announcements-header-inner {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.eb-announcements-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.35rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.eb-announcements-title i {
  color: #036EB8;
}

.eb-announcements-desc {
  font-size: 0.95rem;
  color: #6c757d;
  margin: 0;
}

.eb-announcements-new-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.eb-announcements-new-btn i {
  margin-right: 0.35rem;
}

.eb-announcements-list {
  margin: 1.5rem 0;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #fff;
}

.eb-announcements-table {
  font-size: 0.95rem;
}
.eb-announcements-table td {
  padding: 24px 16px;
}
.eb-announcements-table thead th {
  font-weight: 600;
  color: #495057;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
}
.eb-announcements-table tbody td {
  vertical-align: middle;
  border-bottom: 1px solid #e9ecef;
}
.eb-announcements-table tbody tr:hover {
  background-color: #f8f9fa;
}

.eb-announcements-th-date,
.eb-announcements-td-date {
  white-space: nowrap;
  width: 1%;
}

.eb-announcements-th-title,
.eb-announcements-td-title {
  min-width: 180px;
}

.eb-announcements-link {
  color: #036EB8;
  font-weight: 500;
  text-decoration: none;
}
.eb-announcements-link:hover {
  color: #024a86;
  text-decoration: underline;
}

.eb-announcements-th-actions,
.eb-announcements-td-actions {
  width: 1%;
  white-space: nowrap;
}

.eb-announcements-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
}
.eb-announcements-actions .eb-announcements-action-btn {
  padding: 0.25rem 0.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: none !important;
}
.eb-announcements-actions .eb-announcements-delete-form {
  display: inline-block;
  margin: 0;
}

.eb-announcements-empty {
  margin: 1.5rem 0;
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  background: #f8f9fa;
}

.eb-announcements-empty-icon {
  font-size: 3rem;
  color: #dee2e6;
  margin-bottom: 0.75rem;
  display: block;
}

.eb-announcements-empty-text {
  font-size: 1.1rem;
  color: #495057;
  margin: 0;
}

.eb-announcement-show-page .pageTitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.eb-announcement-show-page .pageTitle i {
  color: #036EB8;
}
.eb-announcement-show-page .btn-outline-secondary {
  border: 2px solid #036EB8 !important;
  color: #036EB8 !important;
}
.eb-announcement-show-page .eb-announcement-edit-icon {
  padding: 0.35rem 0.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: none;
  color: #036EB8;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0.5rem 1rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.eb-announcement-show-page .eb-announcement-show-back {
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

.eb-announcement-form-page .eb-announcement-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.eb-announcement-form-page .eb-announcement-form-title i {
  color: #036EB8;
}
.eb-announcement-form-page .eb-announcement-form-desc {
  margin: 0;
}
.eb-announcement-form-page .eb-announcement-form-section {
  padding: 1.5rem 1.25rem;
}
.eb-announcement-form-page .eb-announcement-form-field {
  margin-bottom: 1.25rem;
}
.eb-announcement-form-page .eb-announcement-form-field:last-of-type {
  margin-bottom: 0;
}
.eb-announcement-form-page .eb-announcement-form-row {
  margin-bottom: 0;
}
.eb-announcement-form-page .eb-announcement-form-row .eb-announcement-form-field {
  margin-bottom: 1.25rem;
}
.eb-announcement-form-page .eb-announcement-form-actions {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e9ecef;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.eb-announcement-form-page .eb-announcement-form-back {
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

.education_board-schools-page {
  padding: 1.5rem 0 2rem;
}

.education_board-schools-header {
  margin-bottom: 1.5rem;
}

.education_board-schools-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.35rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.education_board-schools-title i {
  color: #036EB8;
}

.education_board-schools-desc {
  font-size: 0.95rem;
  color: #6c757d;
  margin: 0;
}

.education_board-schools-filters {
  padding: 1rem 1.25rem;
}

.education_board-schools-filter-form .form-label {
  font-size: 0.8rem;
}

.education_board-schools-list {
  padding: 0;
  overflow: hidden;
}
.education_board-schools-list .table-responsive {
  margin: 0;
}

.education_board-schools-table {
  font-size: 0.95rem;
}
.education_board-schools-table thead th {
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
}
.education_board-schools-table tbody tr {
  border-bottom: 1px solid #eee;
}
.education_board-schools-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
.education_board-schools-table tbody tr:hover {
  background-color: #f8f9fa;
}

.education_board-schools-th-name,
.education_board-schools-td-name {
  min-width: 180px;
}

.education_board-schools-th-type,
.education_board-schools-th-place {
  min-width: 100px;
}

.education_board-schools-th-students {
  min-width: 80px;
}

.education_board-schools-th-action {
  min-width: 120px;
}

.education_board-schools-link {
  color: #036EB8;
  font-weight: 600;
  text-decoration: none;
}
.education_board-schools-link:hover {
  color: #024a86;
  text-decoration: underline;
}

.education_board-schools-badge-type {
  font-weight: 500;
  font-size: 0.8rem;
}

.education_board-schools-empty-icon {
  font-size: 3.5rem;
  color: #dee2e6;
  margin-bottom: 0.75rem;
}

.education_board-schools-empty-text {
  font-size: 1.05rem;
  color: #495057;
  margin: 0;
}

.education_board-schools-footer {
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .education_board-schools-table {
    font-size: 0.875rem;
  }
  .education_board-schools-table thead th,
  .education_board-schools-table tbody td {
    padding: 0.6rem 0.5rem;
  }
  .education_board-schools-th-place,
  .education_board-schools-th-manager {
    display: none;
  }
  .education_board-schools-table tbody td:nth-child(3),
  .education_board-schools-table tbody td:nth-child(4) {
    display: none;
  }
}
.chat-logs-page .btn-outline-secondary {
  background: #036EB8 !important;
  color: white !important;
  border: none !important;
  padding: 6px 24px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}
.chat-logs-page .btn-outline-secondary i {
  padding-right: 8px;
}
.chat-logs-page .chat-logs-filter__row {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.chat-logs-page .chat-logs-filter__row .col-3,
.chat-logs-page .chat-logs-filter__row .col-4 {
  padding: 0 8px !important;
}
.chat-logs-page .chat-logs-filter__row .chat-logs-filter__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0.5rem;
  padding-bottom: 0;
}
.chat-logs-page .chat-logs-filter__row .chat-logs-filter__actions .btn {
  height: calc(1.5em + 0.75rem + 10px);
  padding-top: 0;
  padding-bottom: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.chat-logs-page .chat-logs-filter__row .chat-logs-filter__actions .btn-outline-secondary {
  background: none !important;
  color: #036EB8 !important;
}
.chat-logs-page .chat-logs-filter .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.chat-logs-page .chat-logs-filter .form-select,
.chat-logs-page .chat-logs-filter .form-control {
  font-size: 0.875rem;
  height: calc(1.5em + 0.75rem + 10px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.chat-logs-page .chat-logs-filter .chat-logs-filter__submit {
  font-size: 0.875rem;
  background: #036EB8;
  color: white;
}
.chat-logs-page .chat-logs-filter .chat-logs-filter__reset {
  font-size: 0.875rem;
}
.chat-logs-page .chat-log-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
}
.chat-logs-page .chat-log-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.chat-logs-page .chat-log-card--priority-3 {
  border-color: #f1aeb5;
  -webkit-box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.12);
          box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.12);
}
.chat-logs-page .chat-log-card--priority-3 .chat-log-card-head {
  background: #f8d7da;
}
.chat-logs-page .chat-log-card--priority-2 {
  border-color: #ffecb5;
  -webkit-box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.2);
          box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.2);
}
.chat-logs-page .chat-log-card--priority-2 .chat-log-card-head {
  background: #fff3cd;
}
.chat-logs-page .chat-log-card--priority-1 {
  border-color: #ffe69c;
  -webkit-box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.12);
          box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.12);
}
.chat-logs-page .chat-log-card--priority-1 .chat-log-card-head {
  background: #fff8e1;
}
.chat-logs-page .chat-log-card-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  font-size: 0.8125rem;
  color: #495057;
}
.chat-logs-page .chat-log-card-head a {
  color: #0d6efd;
  text-decoration: none;
}
.chat-logs-page .chat-log-card-time {
  color: #6c757d;
}
.chat-logs-page .chat-log-card-body {
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.chat-logs-page .chat-log-line {
  margin-bottom: 0.75rem;
  word-break: break-word;
}
.chat-logs-page .chat-log-line:last-child {
  margin-bottom: 0;
}
.chat-logs-page .chat-log-line .chat-log-prefix {
  font-weight: 600;
  margin-right: 0.35rem;
}
.chat-logs-page .chat-log-line--student .chat-log-prefix {
  color: #0d6efd;
}
.chat-logs-page .chat-log-line--ai .chat-log-prefix {
  color: #495057;
}
.chat-logs-page .chat-log-line p, .chat-logs-page .chat-log-line .chat-log-body {
  margin: 0;
  display: inline;
}
.chat-logs-page .chat-log-line span br {
  display: block;
  content: "";
  margin-top: 0.25rem;
}

.school-student-step2-quiz {
  padding: 1.5rem 1rem 3rem;
  background: #f0f4f8;
  min-height: calc(100vh - 10rem);
}
.school-student-step2-quiz__wrap {
  max-width: 820px;
  margin: 0 auto;
}
.school-student-step2-quiz__hero {
  margin-bottom: 1.75rem;
  padding: 2rem 2.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #036eb8 0%, #0b84d8 100%);
  color: #fff;
  -webkit-box-shadow: 0 8px 24px rgba(3, 110, 184, 0.22);
          box-shadow: 0 8px 24px rgba(3, 110, 184, 0.22);
}
.school-student-step2-quiz__step-label {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.92;
}
.school-student-step2-quiz__title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
}
.school-student-step2-quiz__lead {
  margin: 0;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.65;
  opacity: 0.96;
}
.school-student-step2-quiz__panel {
  padding: 2rem 2.25rem 2.5rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #dde4ec;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.school-student-step2-quiz__notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #e8f2fa;
  color: #036eb8;
  font-size: 1.05rem;
  font-weight: 600;
}
.school-student-step2-quiz__complete {
  text-align: center;
  padding: 2rem 1rem 1rem;
}
.school-student-step2-quiz__complete-icon {
  margin-bottom: 1.25rem;
  font-size: clamp(4rem, 12vw, 5.5rem);
  line-height: 1;
  color: #198754;
}
.school-student-step2-quiz__complete-title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 800;
  color: #155724;
}
.school-student-step2-quiz__complete-text {
  margin: 0 0 2rem;
  font-size: clamp(1.125rem, 2.8vw, 1.375rem);
  line-height: 1.75;
  color: #5c6670;
}
.school-student-step2-quiz__complete-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.65rem;
  max-width: 280px;
  margin: 0 auto;
}
.school-student-step2-quiz .quiz-actions .school-student-step2-quiz__btn--secondary {
  width: auto;
  min-width: 9rem;
}
.school-student-step2-quiz__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 1.25rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.15s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.15s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
}
.school-student-step2-quiz__btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.school-student-step2-quiz__btn--primary {
  background: #036eb8 !important;
  border: 2px solid #036eb8 !important;
  color: #fff !important;
}
.school-student-step2-quiz__btn--primary:hover {
  background: #025a96 !important;
  border-color: #025a96 !important;
  color: #fff !important;
}
.school-student-step2-quiz__btn--secondary {
  background: #fff !important;
  border: 2px solid #adb5bd !important;
  color: #212529 !important;
}
.school-student-step2-quiz__btn--secondary:hover {
  background: #f8f9fa !important;
  border-color: #868e96 !important;
  color: #212529 !important;
}
.school-student-step2-quiz__empty {
  text-align: center;
  padding: 1.5rem 0.5rem;
}
.school-student-step2-quiz__empty-title {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
}
.school-student-step2-quiz__empty-text {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #5c6670;
}
.school-student-step2-quiz .school-student-quiz-question {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 2px solid #dee2e6 !important;
  border-radius: 14px;
  background: #fff;
}
.school-student-step2-quiz .school-student-quiz-question h6 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #036eb8;
}
.school-student-step2-quiz .school-student-quiz-question .question-text {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #212529;
}
.school-student-step2-quiz .school-student-quiz-question .form-check-label {
  font-size: 1.1rem;
  line-height: 1.55;
  padding-left: 0.35rem;
}
.school-student-step2-quiz .school-student-quiz-question .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
}
.school-student-step2-quiz .quiz-actions {
  margin-top: 2rem;
  padding-top: 0;
}
.school-student-step2-quiz .quiz-actions .btn-primary,
.school-student-step2-quiz .quiz-actions button[type=submit] {
  min-height: 2.75rem;
  min-width: 10rem;
  padding: 0.55rem 1.25rem;
  border: none;
  border-radius: 10px;
  background: #036eb8 !important;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
}
.school-student-step2-quiz .quiz-actions .btn-primary:hover,
.school-student-step2-quiz .quiz-actions button[type=submit]:hover {
  background: #025a96 !important;
}
.school-student-step2-quiz .school-student-quiz-empty {
  background-color: #fff3cd;
}

.school-student-quiz-page .school-student-quiz-question {
  background: #fff;
  border-color: #dee2e6 !important;
}
.school-student-quiz-page .school-student-quiz-empty {
  background-color: #fff3cd;
}

@media (max-width: 768px) {
  .school-student-step2-quiz {
    padding: 1rem 0.75rem 2rem;
  }
  .school-student-step2-quiz__hero, .school-student-step2-quiz__panel {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .school-student-step2-quiz__complete-actions {
    max-width: 100%;
  }
}
.le-header-card {
  padding: 18px 24px;
  margin: 2rem 0;
}

.le-header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
}

.le-header-student {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
}

.le-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 700;
  font-size: 1.15em;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.le-score-label {
  width: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #495057;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.le-score-bar-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 8px;
  background: #f1f3f5;
  border-radius: 4px;
  overflow: hidden;
}

.le-score-bar {
  height: 100%;
  border-radius: 4px;
  background: -webkit-gradient(linear, left top, right top, from(#667eea), to(#5a67d8));
  background: linear-gradient(90deg, #667eea, #5a67d8);
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.le-score-bar--teal {
  background: -webkit-gradient(linear, left top, right top, from(#38b2ac), to(#319795));
  background: linear-gradient(90deg, #38b2ac, #319795);
}
.le-score-bar--orange {
  background: -webkit-gradient(linear, left top, right top, from(#ed8936), to(#dd6b20));
  background: linear-gradient(90deg, #ed8936, #dd6b20);
}
.le-score-bar--purple {
  background: -webkit-gradient(linear, left top, right top, from(#9f7aea), to(#805ad5));
  background: linear-gradient(90deg, #9f7aea, #805ad5);
}
.le-score-bar--green {
  background: -webkit-gradient(linear, left top, right top, from(#48bb78), to(#38a169));
  background: linear-gradient(90deg, #48bb78, #38a169);
}

.le-score-num {
  width: 36px;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 700;
  color: #212529;
  -ms-flex-negative: 0;
      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;
  border-left: 3px solid #667eea;
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
}

.le-stat {
  background: white;
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 28px;
}

.le-overall-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

.le-score-card-status {
  margin-bottom: 4px;
}

.le-status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.le-reflect-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.le-reflect-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
  font-size: 0.8rem;
  -ms-flex-negative: 0;
      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;
  -ms-flex-negative: 0;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 24px;
  background: #036EB8;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.le-back-btn:hover {
  background: #025a9e;
  color: #fff;
}

@media (max-width: 768px) {
  .le-header-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .le-header-lesson {
    text-align: left;
  }
  .le-overall {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
  .le-score-desc {
    margin-left: 0;
  }
  .le-detail-stats {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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;
  -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-transition: background 0.3s ease;
  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;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          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: rgb(2.5909090909, 95, 158.9090909091);
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: color 0.2s;
  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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 500px;
  margin: 0 2rem;
}
.search-area .search-form {
  width: 100%;
}
.search-area .search-form .input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.search-area .search-form .input-group .search-input:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.search-area .search-form .input-group .search-input::-webkit-input-placeholder {
  color: #999;
}
.search-area .search-form .input-group .search-input::-moz-placeholder {
  color: #999;
}
.search-area .search-form .input-group .search-input:-ms-input-placeholder {
  color: #999;
}
.search-area .search-form .input-group .search-input::-ms-input-placeholder {
  color: #999;
}
.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;
  -webkit-transition: color 0.2s ease;
  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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16.666667%;
          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;
  -ms-flex-negative: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.shop_contents .add_button i {
  font-size: 1.1em;
}
.shop_contents .add_button {
  background: #6c757d;
  color: white;
}
.shop_contents .delete_button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.shop_contents .delete_button i {
  font-size: 1.1em;
}
.shop_contents .delete_button {
  background: #dc3545;
  color: white;
}
.shop_contents .add_time_button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.shop_contents .add_time_button i {
  font-size: 1.1em;
}
.shop_contents .add_time_button {
  background: #036EB8;
  color: white;
}
.shop_contents .save_button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.shop_contents .save_button i {
  font-size: 1.1em;
}
.shop_contents .save_button {
  background: #28a745;
  color: white;
  min-width: 200px;
}
.shop_contents .holiday_input .holiday_tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: rgb(189.2151898734, 32.7848101266, 47.7721518987);
}
.shop_contents .modal:not(.time-slots-detail-modal) {
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 50%;
  padding: 16px;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          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;
  -webkit-box-shadow: none;
          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::-webkit-input-placeholder {
  font-size: 12px;
  color: #666;
}
.message-contents .form-control::-moz-placeholder {
  font-size: 12px;
  color: #666;
}
.message-contents .form-control:-ms-input-placeholder {
  font-size: 12px;
  color: #666;
}
.message-contents .form-control::-ms-input-placeholder {
  font-size: 12px;
  color: #666;
}
.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;
  -webkit-transition: all 0.2s ease-in-out;
  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;
  -webkit-transition: opacity 0.15s linear;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          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: rgb(2.5909090909, 95, 158.9090909091);
  border-color: rgb(2.5909090909, 95, 158.9090909091);
}

.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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          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::-webkit-input-placeholder, .student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-control::-webkit-input-placeholder {
  color: #999;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-select::-moz-placeholder, .student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-control::-moz-placeholder {
  color: #999;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-select:-ms-input-placeholder, .student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-control:-ms-input-placeholder {
  color: #999;
}
.student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-select::-ms-input-placeholder, .student_card .card.mb-4 .card-body .row.g-3 .col-md-3 .form-control::-ms-input-placeholder {
  color: #999;
}
.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;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
  -webkit-transition: all 0.2s ease;
  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: rgb(2.5909090909, 95, 158.9090909091);
  border-color: rgb(2.5909090909, 95, 158.9090909091);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
          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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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 {
  -webkit-transition: background-color 0.2s ease;
  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;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.student_card .table-responsive .table tbody tr td a.text-decoration-none:hover {
  color: rgb(2.1818181818, 80, 133.8181818182);
  text-decoration: underline !important;
}
.student_card .table-responsive .table tbody tr td a.ms-2 {
  color: #6c757d;
  font-size: 1rem;
  -webkit-transition: color 0.2s ease;
  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;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
          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;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.2s ease;
  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: rgb(2.5909090909, 95, 158.9090909091);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
          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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 1rem;
  }
  .student_card h4 span {
    margin-left: 0;
    width: 100%;
  }
  .student_card h4 span a {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  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 {
  -webkit-transition: all 0.2s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
          box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  -webkit-transition: border-color 0.22s ease, -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
  transition: border-color 0.22s ease, -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  -webkit-transition: color 0.2s ease, -webkit-transform 0.2s ease;
  transition: color 0.2s ease, -webkit-transform 0.2s ease;
  transition: color 0.2s ease, transform 0.2s ease;
  transition: color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
.shop-uiverse-card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: rgba(3, 110, 184, 0.28);
  -webkit-box-shadow: 0 14px 28px rgba(3, 110, 184, 0.14);
          box-shadow: 0 14px 28px rgba(3, 110, 184, 0.14);
  color: inherit;
}
.shop-uiverse-card:hover .shop-uiverse-card__cta {
  color: #036eb8;
  -webkit-transform: translateX(2px);
          transform: translateX(2px);
}

.shop-uiverse-card__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #036eb8;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: all 0.2s;
  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 {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: rgba(3, 110, 184, 0.28);
  -webkit-box-shadow: 0 14px 28px rgba(3, 110, 184, 0.14);
          box-shadow: 0 14px 28px rgba(3, 110, 184, 0.14);
}
.shop-uiverse-card--admin .shop-uiverse-card__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.shop-uiverse-card--admin .shop-uiverse-card__footer-tools {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.shop-uiverse-card--admin .shop-uiverse-card__admin-actions {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
}
.shop-uiverse-card--admin .shop-uiverse-card__admin-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s, color 0.15s;
  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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.shop_course-content .lesson-actions .btn i {
  font-size: 1.1em;
}
.shop_course-content .lesson-actions .btn {
  font-size: 12px;
  padding: 8px;
  margin: 0 4px;
}
.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;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.shop_courses .table tbody tr {
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.lesson-resources .card .btn i {
  font-size: 1.1em;
}
.lesson-resources .card .btn {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1rem;
}
.lesson-resources .card .btn-primary {
  background: #036EB8;
  border: none;
  color: white;
}
.lesson-resources .card .btn-primary:hover {
  background: rgb(2.5909090909, 95, 158.9090909091);
}
.lesson-resources .card .btn-info {
  background: #17a2b8;
  border: none;
  color: white;
}
.lesson-resources .card .btn-info:hover {
  background: rgb(20.1666666667, 142.0434782609, 161.3333333333);
}

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.modal .modal-footer .btn-secondary i {
  font-size: 1.1em;
}
.modal .modal-footer .btn-secondary {
  background: #6c757d;
  border: none;
  color: white;
}
.modal .modal-footer .btn-secondary:hover {
  background: rgb(96.1802575107, 104.19527897, 111.3197424893);
}

.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: -webkit-fit-content;
  width: -moz-fit-content;
  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%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.shop_course-content {
  padding: 3rem 2rem;
}
.shop_course-content .box {
  border: none;
  -webkit-box-shadow: 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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          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: -webkit-fit-content;
  width: -moz-fit-content;
  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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.filter-box .form-group .form-select::-webkit-input-placeholder, .filter-box .form-group .form-control::-webkit-input-placeholder {
  color: #999;
}
.filter-box .form-group .form-select::-moz-placeholder, .filter-box .form-group .form-control::-moz-placeholder {
  color: #999;
}
.filter-box .form-group .form-select:-ms-input-placeholder, .filter-box .form-group .form-control:-ms-input-placeholder {
  color: #999;
}
.filter-box .form-group .form-select::-ms-input-placeholder, .filter-box .form-group .form-control::-ms-input-placeholder {
  color: #999;
}
.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: rgb(2.5909090909, 95, 158.9090909091);
  border-color: rgb(2.5909090909, 95, 158.9090909091);
}
.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;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page-shop-students-index .filter-box .filter-buttons-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 2rem 0;
}
.page-shop-students-index .filter-box .filter-buttons-row .btn {
  min-height: 38px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.students-table_contants .line-connected {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 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;
  -webkit-box-shadow: 0 8px 32px rgba(3, 110, 184, 0.15);
          box-shadow: 0 8px 32px rgba(3, 110, 184, 0.15);
  border: 2px solid #036EB8;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -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 {
  -webkit-filter: invert(1);
          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: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: background 0.2s;
  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;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.monthly-calendar .calendar-grid .calendar-week .calendar-day .day-slots .slot-count:hover {
  background: #bbdefb;
  border-color: #1976d2;
  -webkit-transform: scale(1.05);
          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;
  -webkit-box-shadow: 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;
  -webkit-box-shadow: 0 !important;
          box-shadow: 0 !important;
}
.payment-content .payment_box .col-2 .card {
  width: 90%;
  margin: 0 auto;
  -webkit-box-shadow: none !important;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 3rem 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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 {
  -webkit-animation: fadeIn 0.5s;
          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;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
          box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  left: 0;
  position: relative;
  display: block;
  padding: 2rem 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: "+";
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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;
  -ms-flex-negative: 0;
      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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 16px;
}
.shop-announcements-list__title {
  color: #333;
  text-decoration: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
}

.shop-dashboard {
  padding: 1.5rem 1rem 2rem;
}
.shop-dashboard__title {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
}
.shop-dashboard__title i {
  color: #036eb8;
  margin-right: 0.35rem;
}
.shop-dashboard__kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.shop-dashboard__kpi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.shop-dashboard__kpi:hover {
  border-color: rgba(3, 110, 184, 0.35);
  -webkit-box-shadow: 0 2px 8px rgba(3, 110, 184, 0.08);
          box-shadow: 0 2px 8px rgba(3, 110, 184, 0.08);
  color: inherit;
}
.shop-dashboard__kpi--alert {
  border-color: #fecaca;
  background: #fffafa;
}
.shop-dashboard__kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.3;
}
.shop-dashboard__kpi-label i {
  color: #036eb8;
  margin-right: 0.2rem;
}
.shop-dashboard__kpi-value {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
}
.shop-dashboard__kpi-hint {
  font-size: 0.68rem;
  color: #64748b;
}
.shop-dashboard__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.shop-dashboard__panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.shop-dashboard__panel-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.shop-dashboard__panel-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
}
.shop-dashboard__panel-title i {
  color: #036eb8;
  margin-right: 0.3rem;
}
.shop-dashboard__panel-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: #036eb8;
  text-decoration: none;
  white-space: nowrap;
}
.shop-dashboard__panel-link:hover {
  color: rgb(2.3454545455, 86, 143.8545454545);
}
.shop-dashboard__table-wrap {
  overflow-x: auto;
}
.shop-dashboard__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.shop-dashboard__table th,
.shop-dashboard__table td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
}
.shop-dashboard__table th {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  background: #fff;
}
.shop-dashboard__table tbody tr:last-child td {
  border-bottom: none;
}
.shop-dashboard__table tbody tr:hover td {
  background: #f8fafc;
}
.shop-dashboard__link {
  color: #1e293b;
  font-weight: 600;
  text-decoration: none;
}
.shop-dashboard__link:hover {
  color: #036eb8;
}
.shop-dashboard__muted {
  color: #64748b;
}
.shop-dashboard__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.25rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: #dc2626;
  border-radius: 999px;
}
.shop-dashboard__empty {
  margin: 0;
  padding: 1.25rem 1rem;
  font-size: 0.82rem;
  color: #64748b;
}
.shop-dashboard__message-preview {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-weight: 400;
}
.shop-dashboard__subpanel {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid #e2e8f0;
}
.shop-dashboard__subpanel:first-of-type {
  border-top: none;
}
.shop-dashboard__subpanel-title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}

@media (max-width: 1200px) {
  .shop-dashboard__kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .shop-dashboard__kpi-grid,
  .shop-dashboard__panels {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  .shop-dashboard__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem 0.75rem;
  max-width: none;
}
.page-shop-list.page-shop-parent-messages .pm-hero-stats {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem 0.75rem;
  margin-left: 0.25rem;
}
.page-shop-list.page-shop-parent-messages .pm-hero-stats__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          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;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0 0 8px;
  border-bottom: 1px solid #e2e8f0;
}

.pm-split-page__header-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px 16px;
}

.pm-split-page__stat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          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;
  -webkit-box-shadow: none;
          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;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.pm-split__sidebar {
  width: 20%;
  min-width: 200px;
  max-width: 280px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-right: 1px solid #e2e8f0;
  background: #fafbfc;
  min-height: 0;
  overflow: hidden;
}

.pm-split__sidebar-scroll {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pm-split__threads {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.pm-split__list-scroll {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #f4f7fa;
}

.pm-split__placeholder {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #e2e8f0;
  -webkit-transition: background 0.12s ease;
  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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.pm-split-thread__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #dc3545;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
}

.pm-chat--split {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  max-height: none;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (max-width: 991px) {
  .pm-split {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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;
  -webkit-box-shadow: 0 4px 24px rgba(3, 110, 184, 0.08);
          box-shadow: 0 4px 24px rgba(3, 110, 184, 0.08);
}
.pm-page-header__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 1.75rem;
}
.pm-page-header__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.5rem;
}

.pm-stat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 4px 24px rgba(3, 110, 184, 0.08);
          box-shadow: 0 4px 24px rgba(3, 110, 184, 0.08);
  overflow: hidden;
}

.pm-inbox-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #e2e8f0;
  -webkit-transition: background 0.15s ease;
  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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.pm-inbox-item__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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 {
  -ms-flex-negative: 0;
      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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #dc3545;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
}
.pm-inbox-item__chevron {
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.pm-new-chat__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #e2e8f0;
  -webkit-transition: background 0.15s ease;
  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 {
  -ms-flex-negative: 0;
      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;
  -webkit-transition: all 0.15s ease;
  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;
  -webkit-box-shadow: none;
          box-shadow: none;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 560px;
  max-height: calc(100vh - 180px);
}
.pm-chat__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 1rem;
  background: #036eb8;
  color: #fff;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 0;
}
.pm-chat__back {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0;
  text-decoration: none;
  font-size: 1.2rem;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.pm-chat__back:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.pm-chat__avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
}
.pm-chat__info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -ms-flex-negative: 0;
      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;
  -webkit-transition: background 0.15s ease;
  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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  background: #f4f7fa;
  min-height: 280px;
}

.pm-bubble {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
  max-width: 78%;
}
.pm-bubble--incoming {
  -webkit-box-align: start;
      -ms-flex-align: start;
          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 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          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;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.submenu-content ul li a.shop-submenu-link {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  padding-right: 12px !important;
}

.shop-submenu-link__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
}

.shop-submenu-badge {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 24px 48px rgba(1, 61, 102, 0.2);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-weight: 700;
}
.pm-new-message-modal .modal-header .btn-close {
  -webkit-filter: brightness(0) invert(1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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-school-guest-messages .school-guest-messenger.pm-split {
  min-height: calc(100vh - 220px);
  max-height: calc(100vh - 180px);
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.page-school-guest-messages .pm-split__sidebar {
  display: none;
}
.page-school-guest-messages .school-thread-list {
  width: 20rem;
  max-width: 34%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
  min-height: 0;
}
.page-school-guest-messages .school-thread-list__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.page-school-guest-messages .school-thread-list__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}
.page-school-guest-messages .school-thread-list__unread {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
}
.page-school-guest-messages .school-thread-list__items {
  list-style: none;
  margin: 0;
  overflow-y: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.page-school-guest-messages .school-thread-list__item {
  margin-bottom: 0.35rem;
}
.page-school-guest-messages .school-thread-list__item:last-child {
  margin-bottom: 0;
}
.page-school-guest-messages .school-thread-list__empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.6;
}
.page-school-guest-messages .school-thread-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  text-decoration: none;
  color: inherit;
  -webkit-transition: background 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: background 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  transition: background 0.12s ease, box-shadow 0.12s ease, -webkit-box-shadow 0.12s ease;
}
.page-school-guest-messages .school-thread-card:hover {
  background: #fff;
  color: inherit;
  -webkit-box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
          box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
}
.page-school-guest-messages .school-thread-card--active {
  background: #fff;
}
.page-school-guest-messages .school-thread-card--unread {
  background: rgba(232, 244, 252, 0.75);
}
.page-school-guest-messages .school-thread-card__avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
  color: #fff;
  font-size: 0.95rem;
}
.page-school-guest-messages .school-thread-card__body {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.page-school-guest-messages .school-thread-card__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.page-school-guest-messages .school-thread-card__name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-school-guest-messages .school-thread-card__time {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 0.68rem;
  color: #64748b;
}
.page-school-guest-messages .school-thread-card__preview {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-school-guest-messages .school-thread-card__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  color: #94a3b8;
}
.page-school-guest-messages .school-thread-card__badge {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 1.35rem;
  height: 1.35rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}
.page-school-guest-messages .pm-split__main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #fff;
}
.page-school-guest-messages .pm-chat--split {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  max-height: none;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.page-school-guest-messages .pm-chat--split .pm-chat__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8fafc));
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
}
.page-school-guest-messages .pm-chat--split .pm-chat__avatar--room {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #036eb8 0%, #025a96 100%);
  color: #fff;
  font-size: 0.95rem;
}
.page-school-guest-messages .pm-chat--split .pm-chat__info {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.page-school-guest-messages .pm-chat--split .pm-chat__name {
  margin: 0;
  color: #1e293b;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-school-guest-messages .pm-chat--split .pm-chat__status {
  margin: 0.1rem 0 0;
  font-size: 0.68rem;
  color: #64748b;
  opacity: 1;
}
.page-school-guest-messages .pm-chat--split .pm-chat__actions {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
}
.page-school-guest-messages .pm-chat--split .pm-chat__action-btn--guest {
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #025a96;
  background: #fff;
  border: 1px solid rgba(3, 110, 184, 0.35);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.page-school-guest-messages .pm-chat--split .pm-chat__action-btn--guest:hover {
  background: rgba(3, 110, 184, 0.08);
  color: #025a96;
}
.page-school-guest-messages .pm-chat--split .pm-chat__action-btn--guest i {
  margin-right: 0.2rem;
}
.page-school-guest-messages .pm-chat--split .pm-chat__thread {
  background: #eef2f7;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.page-school-guest-messages .pm-split__placeholder {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
}
.page-school-guest-messages .pm-split__placeholder i {
  font-size: 2.5rem;
  color: #cbd5e1;
  margin-bottom: 0.75rem;
}
.page-school-guest-messages .pm-split__placeholder-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
}
.page-school-guest-messages .pm-split__placeholder-desc {
  margin: 0;
  max-width: 18rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.page-school-guest-messages .pm-bubble__actions {
  margin-top: 0.25rem;
}
.page-school-guest-messages .pm-bubble__delete {
  padding: 0.15rem 0.5rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}
.page-school-guest-messages .pm-bubble__delete:hover {
  background: #fee2e2;
  color: #b91c1c;
}
@media (max-width: 991px) {
  .page-school-guest-messages .school-guest-messenger.pm-split {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-height: none;
    min-height: 640px;
  }
  .page-school-guest-messages .school-thread-list {
    width: 100%;
    max-width: none;
    max-height: 240px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
}

.school_page .school_student_show {
  padding: 1.25rem 1.5rem 2rem;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.school_page .school_student_show .student_detail {
  width: 100%;
  max-width: none;
}
.school_page .school_student_show .student_detail > h4 {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}
.school_page .school_student_show .student_detail > ul.link-list.shop-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 2px;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.school_page .school_student_show .student_detail > ul.link-list.shop-toolbar li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.school_page .school_student_show .student_detail > ul.link-list.shop-toolbar .shop-icon-btn {
  width: auto;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.35rem;
  font-size: 1.35rem;
  color: #334155;
  background: transparent;
  border: none;
}
.school_page .school_student_show .student_detail > ul.link-list.shop-toolbar .shop-icon-btn:hover {
  background: transparent;
  color: #036eb8;
}
.school_page .school_student_show .student_detail .shop-student-info-row__table th,
.school_page .school_student_show .student_detail .shop-student-info-row__table td,
.school_page .school_student_show .student_detail .shop-data-table th,
.school_page .school_student_show .student_detail .shop-data-table td {
  width: auto;
  text-align: left !important;
}
.school_page .school_student_show .student_detail .shop-student-info-row__table th {
  width: 38%;
}
.school_page .school_student_show .student_detail .shop-student-info-row__table td {
  width: 62%;
}

.shop-icon-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: #036eb8;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}
.shop-icon-btn:hover {
  background: #e8f4fc;
  color: #025a96;
}
.shop-icon-btn--primary {
  color: #fff;
  background: #036eb8;
  border-color: #036eb8;
}
.shop-icon-btn--primary:hover {
  background: #025a96;
  color: #fff;
}
.shop-icon-btn--outline {
  color: #036eb8;
  background: #fff;
}
.shop-icon-btn--header {
  width: 28px;
  height: 28px;
  font-size: 0.95rem;
}
.shop-icon-btn--done {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

button.shop-icon-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.shop-student-top-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.shop-student-top-row__evaluation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
}
.shop-student-top-row__aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  padding: 40px 0;
  border-top: 1px solid #e2e8f0;
}
.shop-student-top-row__aside--solo {
  width: 100%;
  padding-top: 0;
  border-top: none;
}

.shop-student-info-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1.5rem;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-bottom: 0.5rem;
}
.shop-student-info-head__basic, .shop-student-info-head__pairing-title {
  margin: 0;
}
.shop-student-info-head__pairing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.5rem 0.65rem;
  min-width: 0;
}
.shop-student-info-head__pairing-title {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}
.shop-student-info-head__pairing-title i {
  color: #036eb8;
  margin-right: 0.25rem;
}

.parent-app-pairing__status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.parent-app-pairing__status--ok {
  color: #166534;
}
.parent-app-pairing__status--pending {
  color: #92400e;
}

.parent-app-pairing__status-date {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.school_student_show .evaluation-chart {
  margin: 0;
  padding: 40px 0 80px;
  background: transparent;
  border-radius: 0;
}
.school_student_show .evaluation-chart__title {
  margin: 0 0 0.35rem;
}
.school_student_show .evaluation-chart__grid {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  min-height: 0;
}
.school_student_show .evaluation-chart__chart-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.school_student_show .evaluation-chart__guidance {
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.school_student_show .evaluation-chart__guidance-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.school_student_show .evaluation-chart__guidance-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1e293b;
}
.school_student_show .evaluation-chart__guidance-regen {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 0.9rem;
}
.school_student_show .evaluation-chart__guidance-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
}
.school_student_show .evaluation-chart__guidance-body p {
  margin: 0 0 0.55rem;
  line-height: 1.75;
}
.school_student_show .evaluation-chart__guidance-body p:last-child {
  margin-bottom: 0;
}
.school_student_show .evaluation-chart__guidance-section-title {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #036eb8;
}
.school_student_show .evaluation-chart__guidance-section-title:not(:first-child) {
  margin-top: 0.75rem;
}
.school_student_show .evaluation-chart__guidance-loading, .school_student_show .evaluation-chart__guidance-empty {
  margin: 0;
  font-size: 0.72rem;
  color: #64748b;
}
.school_student_show .evaluation-chart__guidance-error {
  margin: 0;
  font-size: 0.72rem;
  color: #b91c1c;
}
.school_student_show .evaluation-chart .chart-container {
  position: relative;
  height: auto !important;
  min-height: 0;
  max-height: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.school_student_show .evaluation-chart .chart-container canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 220px;
}
.school_student_show .evaluation-chart .evaluation-details {
  padding: 0;
  min-height: 0;
  overflow-y: auto;
}
.school_student_show .evaluation-chart .overall-score {
  text-align: center;
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border-radius: 0;
}
.school_student_show .evaluation-chart .overall-score h2 {
  font-size: 2rem;
  color: #036eb8;
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}
.school_student_show .evaluation-chart .score-label {
  color: #64748b;
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
}
.school_student_show .evaluation-chart .score-items {
  margin-top: 0;
}
.school_student_show .evaluation-chart .score-item {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.school_student_show .evaluation-chart .score-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.school_student_show .evaluation-chart .score-item h6 {
  color: #036eb8;
  margin-bottom: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.school_student_show .evaluation-chart .score-description {
  font-size: 0.68rem;
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.35;
}

.shop-data-table-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 1rem 0;
}

.shop-data-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8125rem;
  line-height: 1.35;
  background: #fff;
}
.shop-data-table thead th {
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-align: left;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.shop-data-table tbody td {
  padding: 0;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}
.shop-data-table tbody tr:last-child td {
  border-bottom: none;
}
.shop-data-table__row:hover td {
  background: #f8fafc;
}
.shop-data-table__primary {
  width: 34%;
}
.shop-data-table--history .shop-data-table__primary {
  width: 40%;
}
.shop-data-table--history thead th:nth-child(2),
.shop-data-table--history tbody td:nth-child(2) {
  width: 7.5rem;
}
.shop-data-table--history thead th:nth-child(3),
.shop-data-table--history tbody td:nth-child(3) {
  width: 28%;
}
.shop-data-table--progress thead th:nth-child(2),
.shop-data-table--progress tbody td:nth-child(2) {
  width: 22%;
}
.shop-data-table--progress thead th:nth-child(3),
.shop-data-table--progress tbody td:nth-child(3),
.shop-data-table--progress thead th:nth-child(4),
.shop-data-table--progress tbody td:nth-child(4) {
  width: 9.5rem;
}
.shop-data-table__col-icon {
  width: 2.25rem;
  text-align: center;
}
.shop-data-table__col-actions {
  width: 7.5rem;
  text-align: right;
}
.shop-data-table__link {
  display: block;
  padding: 16px 10px;
  text-decoration: none;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-data-table__link:hover {
  color: #036eb8;
}
.shop-data-table__link--muted {
  font-weight: 400;
  color: #64748b;
}
.shop-data-table__link--muted:hover {
  color: #036eb8;
}
.shop-data-table__link--icon {
  padding: 8px 6px;
  text-align: center;
  color: #cbd5e1;
}
.shop-data-table__link--icon:hover {
  color: #036eb8;
}
.shop-data-table__primary .shop-data-table__link {
  font-weight: 600;
}
.shop-data-table__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 4px;
  padding: 4px 8px 4px 4px;
}
.shop-data-table__detail-btn {
  color: #cbd5e1;
}
.shop-data-table__detail-btn:hover {
  color: #036eb8;
}
.shop-data-table__empty {
  margin: 0;
  padding: 1rem 0;
  font-size: 0.82rem;
  color: #64748b;
  background: transparent;
  border: none;
}

.shop-student-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1.5rem;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
}
.shop-student-info-row__basic, .shop-student-info-row__pairing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.shop-student-info-row__table {
  width: 100%;
  margin-bottom: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-collapse: collapse;
}
.shop-student-info-row__table tr {
  border-bottom: 1px solid #e2e8f0;
}
.shop-student-info-row__table th,
.shop-student-info-row__table td {
  padding: 7px 8px;
  font-size: 0.8125rem;
  line-height: 1.35;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.shop-student-info-row__table th {
  width: 38%;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
}
.shop-student-info-row__table td {
  width: 62%;
  color: #1e293b;
}
.shop-student-info-row__table tr:last-child th,
.shop-student-info-row__table tr:last-child td {
  border-bottom: 1px solid #e2e8f0;
}
.shop-student-info-row .parent-app-pairing {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.shop-student-info-row .parent-app-pairing__header {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 0.35rem;
  gap: 8px;
}
.shop-student-info-row .parent-app-pairing__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.shop-student-info-row .parent-app-pairing__badge {
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
}
.shop-student-info-row .parent-app-pairing__lead {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: none;
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.45;
}
.shop-student-info-row .parent-app-pairing__body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.65rem;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 0;
}
.shop-student-info-row .parent-app-pairing__qr-wrap {
  -ms-flex-item-align: center;
      align-self: center;
  text-align: center;
}
.shop-student-info-row .parent-app-pairing__qr {
  padding: 4px;
  border: none;
  background: transparent;
}
.shop-student-info-row .parent-app-pairing__qr svg {
  width: 96px;
  height: 96px;
}
.shop-student-info-row .parent-app-pairing__qr-hint {
  margin: 0.15rem 0 0;
  font-size: 0.65rem;
  line-height: 1.2;
}
.shop-student-info-row .parent-app-pairing__panel {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  min-width: 0;
  width: 100%;
}
.shop-student-info-row .parent-app-pairing__label {
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
}
.shop-student-info-row .parent-app-pairing__url-input {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  min-height: 28px;
}
.shop-student-info-row .parent-app-pairing__copy-btn, .shop-student-info-row .parent-app-pairing__regen-btn {
  min-height: 28px;
  width: 28px;
  height: 28px;
  font-size: 0.95rem;
}
.shop-student-info-row .parent-app-pairing__reset-form {
  display: inline-block;
  margin: 0.35rem 0 0;
}
.shop-student-info-row .parent-app-pairing__reset-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #036eb8;
  background: #fff;
  border: 1px solid #e2e8f0;
  cursor: pointer;
}
.shop-student-info-row .parent-app-pairing__reset-btn:hover {
  background: #e8f4fc;
  color: #025a96;
}
.shop-student-info-row .parent-app-pairing__reset-btn i {
  font-size: 0.85rem;
}
.shop-student-info-row .parent-app-pairing__note {
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
}

.parent-app-pairing {
  width: 100%;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.parent-app-pairing__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.parent-app-pairing__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
}
.parent-app-pairing__title i {
  color: #036eb8;
  margin-right: 0.35rem;
}
.parent-app-pairing__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.parent-app-pairing__badge--ok {
  color: #166534;
  background: #dcfce7;
}
.parent-app-pairing__badge--pending {
  color: #92400e;
  background: #fef3c7;
}
.parent-app-pairing__badge-date {
  font-weight: 500;
  opacity: 0.85;
}
.parent-app-pairing__lead {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #64748b;
  max-width: 72rem;
}
.parent-app-pairing__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
}
.parent-app-pairing__qr-wrap {
  text-align: center;
}
.parent-app-pairing__qr {
  display: inline-block;
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.parent-app-pairing__qr-image {
  display: block;
  width: 280px;
  height: 280px;
  max-width: 100%;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.parent-app-pairing__qr-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
}
.parent-app-pairing__qr-note {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.45;
}
.parent-app-pairing__panel {
  min-width: 0;
  width: 100%;
}
.parent-app-pairing__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}
.parent-app-pairing__url-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
.parent-app-pairing__url-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-family: ui-monospace, monospace;
  border-radius: 0;
}
.parent-app-pairing__copy-btn {
  width: 30px;
  height: auto;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  min-height: 34px;
}
.parent-app-pairing__note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 6px;
  margin: 0.75rem 0 1rem;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.5;
}
.parent-app-pairing__note i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 2px;
  color: #036eb8;
}
.parent-app-pairing__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}
.parent-app-pairing__regen-btn {
  width: 30px;
  height: 30px;
}
.parent-app-pairing__reset-form {
  display: inline-block;
  margin: 0.35rem 0 0;
}
.parent-app-pairing__reset-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  width: auto;
  color: #036eb8;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.parent-app-pairing__reset-btn:hover {
  background: #e8f4fc;
  color: #025a96;
}
.parent-app-pairing__reset-btn i {
  font-size: 0.9rem;
}

.shop-student-section {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0;
  background: transparent;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.shop-student-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.shop-student-section__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
}
.shop-student-section__title i {
  color: #036eb8;
  margin-right: 0.35rem;
}
.shop-student-section__title--solo {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.shop-student-section--progress {
  margin-top: 1.5rem;
}

@media (max-width: 991px) {
  .shop-student-info-head,
  .shop-student-info-row {
    grid-template-columns: 1fr;
  }
  .shop-student-info-head__pairing {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .shop-student-info-row .parent-app-pairing__qr svg {
    width: 120px;
    height: 120px;
  }
  .evaluation-chart__grid {
    grid-template-columns: 1fr;
  }
  .evaluation-chart .chart-container canvas {
    max-height: 200px;
  }
}
@media (max-width: 767px) {
  .parent-app-pairing__url-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .parent-app-pairing__copy-btn {
    width: 30px;
    min-height: 34px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}
.teacher-app-login__body {
  display: block;
}

.teacher-app-login__panel {
  width: 100%;
  max-width: none;
}

.teacher-app-login__steps {
  margin: 1rem 0 0;
  padding: 0;
}
.teacher-app-login__steps dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}
.teacher-app-login__steps dd {
  margin: 0;
}

.teacher-app-login__steps-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.6;
}
.teacher-app-login__steps-list li + li {
  margin-top: 0.25rem;
}

.page-school-email-show {
  padding: 1.25rem 1.5rem 2rem;
}
.page-school-email-show .school-email-show__btn {
  min-width: 7rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
}
.page-school-email-show .btn-primary {
  background: #036eb8;
  border-color: #036eb8;
}
.page-school-email-show .btn-primary:hover {
  background: #025a96;
  border-color: #025a96;
}
.page-school-email-show .btn-outline-secondary {
  border-color: #cbd5e1;
  color: #475569;
}
.page-school-email-show .btn-outline-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #334155;
}
.page-school-email-show .teacher-homeroom-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.85rem 1rem;
  margin-bottom: 1.15rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
}
.page-school-email-show .teacher-homeroom-banner--empty {
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border-color: #e2e8f0;
}
.page-school-email-show .teacher-homeroom-banner__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #bfdbfe;
  color: #036eb8;
  font-size: 1.35rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.page-school-email-show .teacher-homeroom-banner--empty .page-school-email-show .teacher-homeroom-banner__icon {
  border-color: #e2e8f0;
  color: #94a3b8;
}
.page-school-email-show .teacher-homeroom-banner__main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 12rem;
}
.page-school-email-show .teacher-homeroom-banner__label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #64748b;
  text-transform: uppercase;
}
.page-school-email-show .teacher-homeroom-banner__chips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
}
.page-school-email-show .teacher-homeroom-banner__chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.35rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
  background: #fff;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  -webkit-box-shadow: 0 1px 2px rgba(3, 110, 184, 0.08);
          box-shadow: 0 1px 2px rgba(3, 110, 184, 0.08);
}
.page-school-email-show .teacher-homeroom-banner__empty-text {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
}
.page-school-email-show .teacher-homeroom-banner__action {
  margin-left: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.page-school-email-show .teacher-app-pairing .parent-app-pairing__qr-wrap {
  padding: 0.5rem 0 0.25rem;
}

@media (max-width: 767px) {
  .page-school-email-show .teacher-app-pairing .parent-app-pairing__qr-image {
    width: 280px;
    height: 280px;
  }
  .page-school-email-show .teacher-homeroom-banner__action {
    margin-left: 0;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reserve_form {
  margin: 0;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field {
  min-width: 0;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field .form-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field .form-label::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9rem;
  border-radius: 2px;
  background: #036eb8;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field__hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field .form-select,
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field .form-control {
  height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  width: 100%;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field .form-select:focus,
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field .form-control:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.15);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.15);
  outline: none;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-field .form-control[readonly] {
  background: #f1f5f9;
  color: #64748b;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 0.5rem;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-submit-btn,
.page-shop-list.page-shop-reservations .page-shop-reservations__form .entry_btn.reservation-submit-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.55rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: #036eb8;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, -webkit-transform 0.15s ease;
  transition: background 0.15s ease, -webkit-transform 0.15s ease;
  transition: background 0.15s ease, transform 0.15s ease;
  transition: background 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
}
.page-shop-list.page-shop-reservations .page-shop-reservations__form .reservation-submit-btn:hover,
.page-shop-list.page-shop-reservations .page-shop-reservations__form .entry_btn.reservation-submit-btn:hover {
  background: #025a96;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.page-shop-list.page-shop-reservations .reservation-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  background: #fff;
  border-radius: 14px;
  -webkit-box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
          box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#fef2f2), to(#fff));
  background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
  border-bottom: 1px solid #fecaca;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #991b1b;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__title i {
  font-size: 1.05rem;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__close:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__body {
  padding: 1.15rem 1.25rem 1.25rem;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__lead {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #475569;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__details {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__details > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__details > div dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 4.5rem;
          flex: 0 0 4.5rem;
  margin: 0;
  font-weight: 700;
  color: #64748b;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__details > div dd {
  margin: 0;
  font-weight: 600;
  color: #0f172a;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__cancel, .page-shop-list.page-shop-reservations .reservation-delete-modal__confirm {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__cancel {
  background: #f1f5f9;
  color: #475569;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__cancel:hover {
  background: #e2e8f0;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__confirm {
  background: #dc2626;
  color: #fff;
}
.page-shop-list.page-shop-reservations .reservation-delete-modal__confirm:hover {
  background: #b91c1c;
}

.reservations-page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.reservations-page-header h2 {
  margin: 0;
  font-size: 20px;
}

.reservations-new-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  background: #036eb8;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, transform 0.2s ease;
  transition: background 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
.reservations-new-toggle:hover {
  background: #025a96;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.reservation-new-panel {
  display: none;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
          box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.reservation-new-panel.is-open {
  display: block;
}
.reservation-new-panel__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.reservation-new-panel__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.reservation-new-panel__title i {
  color: #036eb8;
  font-size: 1.2rem;
}
.reservation-new-panel__close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}
.reservation-new-panel__close:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.reservation-new-panel .reserve_form {
  margin: 0;
}
.reservation-new-panel .reservation-form-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .reservation-new-panel .reservation-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .reservation-new-panel .reservation-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.reservation-new-panel .reservation-form-field {
  min-width: 0;
}
.reservation-new-panel .reservation-form-field .form-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}
.reservation-new-panel .reservation-form-field .form-label::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9rem;
  border-radius: 2px;
  background: #036eb8;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.reservation-new-panel .reservation-form-field__hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
}
.reservation-new-panel .reservation-form-field .form-select,
.reservation-new-panel .reservation-form-field .form-control {
  height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  width: 100%;
}
.reservation-new-panel .reservation-form-field .form-select:focus,
.reservation-new-panel .reservation-form-field .form-control:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.15);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.15);
  outline: none;
}
.reservation-new-panel .reservation-form-field .form-control[readonly] {
  background: #f1f5f9;
  color: #64748b;
}
.reservation-new-panel .reservation-form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 0.5rem;
}

.reserve_contents {
  padding: 4rem 2rem;
  background: white;
  position: relative;
}
.reserve_contents h2 {
  margin: 0 0 2rem;
  font-size: 20px;
  position: relative;
}
.reserve_contents h2 span {
  position: absolute;
  right: 16px;
  margin-left: 16px;
  font-size: 16px;
  font-weight: 600;
  background: #036EB8;
  color: white !important;
  text-decoration: none;
  padding: 12px 24px;
}
.reserve_contents h2 span a {
  color: white;
}
.reserve_contents .col-12 {
  padding: 0;
}
.reserve_contents .filter-box {
  background: white;
  padding: 2rem 1.5rem;
  margin: 2rem 0;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.reserve_contents .filter-box h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}
.reserve_contents .filter-box h5 i {
  margin-right: 8px;
  color: #036EB8;
}
.reserve_contents .filter-box .row.g-3 {
  margin: 0;
}
.reserve_contents .filter-box .row.g-3 .col-3 {
  padding: 0 8px;
}
.reserve_contents .filter-box .row.g-3 .col-3 .form-group {
  margin-bottom: 0;
}
.reserve_contents .filter-box .row.g-3 .col-3 .form-group .form-label {
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.5rem;
  display: block;
}
.reserve_contents .filter-box .row.g-3 .col-3 .form-group .form-control,
.reserve_contents .filter-box .row.g-3 .col-3 .form-group .form-select {
  height: 40px;
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 100%;
}
.reserve_contents .filter-box .row.g-3 .col-3 .form-group .form-control:focus,
.reserve_contents .filter-box .row.g-3 .col-3 .form-group .form-select:focus {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
  outline: none;
}
.reserve_contents .filter-box .btn_submit {
  margin: 0 8px;
  padding: 8px 32px;
  background: #FFA500;
  border: none;
  color: #272727;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.reserve_contents .filter-box .btn_submit:hover {
  background: #ff8c00;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(255, 165, 0, 0.3);
          box-shadow: 0 2px 4px rgba(255, 165, 0, 0.3);
}
.reserve_contents .filter-box a {
  text-decoration: none;
  color: #036EB8;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  display: inline-block;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.reserve_contents .filter-box a:hover {
  color: #025a9a;
}
.reserve_contents .filter-box a i {
  margin-right: 4px;
}
.reserve_contents .reserve-table_contants {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.reserve_contents .reserve-table_contants h6 {
  font-size: 20px;
  margin-bottom: 1rem;
}
.reserve_contents .reserve-table_contants .table-responsive {
  overflow-x: auto;
}
.reserve_contents .reserve-table_contants table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}
.reserve_contents .reserve-table_contants table th:first-of-type, .reserve_contents .reserve-table_contants table td:first-of-type {
  width: 20%;
}
.reserve_contents .reserve-table_contants table th:nth-of-type(2), .reserve_contents .reserve-table_contants table td:nth-of-type(2) {
  width: 15%;
}
.reserve_contents .reserve-table_contants table th:nth-of-type(3), .reserve_contents .reserve-table_contants table td:nth-of-type(3) {
  width: 35%;
}
.reserve_contents .reserve-table_contants table th:nth-of-type(4), .reserve_contents .reserve-table_contants table td:nth-of-type(4) {
  width: 20%;
}
.reserve_contents .reserve-table_contants table th:last-of-type, .reserve_contents .reserve-table_contants table td:last-of-type {
  width: 10%;
  text-align: center;
}
.reserve_contents .reserve-table_contants table thead {
  background-color: #f8f9fa;
}
.reserve_contents .reserve-table_contants table thead th {
  text-align: left;
  padding: 16px;
  border-bottom: 2px solid #dee2e6;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}
.reserve_contents .reserve-table_contants table tbody tr {
  border-bottom: 1px solid #eee;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.reserve_contents .reserve-table_contants table tbody tr:hover {
  background-color: #f8f9fa;
}
.reserve_contents .reserve-table_contants table tbody tr:last-child {
  border-bottom: none;
}
.reserve_contents .reserve-table_contants table tbody td {
  text-align: left;
  padding: 16px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  vertical-align: middle;
}
.reserve_contents .reserve-table_contants table tbody td a {
  color: #036EB8;
  text-decoration: none;
  font-weight: 500;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.reserve_contents .reserve-table_contants table tbody td a:hover {
  color: #025a9a;
  text-decoration: underline;
}
.reserve_contents .reserve-table_contants table tbody td .ms-2 {
  color: #6c757d;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.reserve_contents .reserve-table_contants table tbody td .ms-2:hover {
  color: #036EB8;
}
.reserve_contents .reserve-table_contants table tbody td .badge {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
}
.reserve_contents .reserve-table_contants table tbody td .badge.bg-primary {
  background-color: #036EB8 !important;
}
.reserve_contents .reserve-table_contants table tbody td .badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}
.reserve_contents .reserve-table_contants table tbody td .badge i {
  margin-left: 4px;
}
.reserve_contents .reserve-table_contants table tbody td .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.reserve_contents .reserve-table_contants table tbody td .btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
          box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
.reserve_contents .reserve-table_contants table tbody td .btn-danger i {
  margin-right: 0;
}
.reserve_contents .reserve-table_contants table tbody td .text-muted {
  color: #6c757d;
}
.reserve_contents .reserve-table_contants table tbody td .text-warning {
  color: #ffc107;
}
.reserve_contents .reserve-table_contants table tbody td .text-info {
  color: #17a2b8;
}
.reserve_contents .reserve-table_contants table tbody td form {
  display: inline-block;
}
.reserve_contents .reserve-table_contants table tbody td form .form-select-sm {
  height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}
.reserve_contents .reserve-table_contants table tbody td form .btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}
.reserve_contents .d-flex.justify-content-center {
  margin-top: 2rem;
  padding: 1rem 0;
}
.reserve_contents .reservation-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.reserve_contents .reservation-detail-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.reserve_contents .reservation-detail-modal .modal-content {
  position: relative;
  background: white;
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  z-index: 10000;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #dee2e6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-header .modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-header .modal-title i {
  margin-right: 8px;
  color: #dc3545;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-header .modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-header .modal-close:hover {
  color: #333;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body {
  padding: 1.5rem;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body p {
  margin-bottom: 1rem;
  font-size: 14px;
  color: #495057;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body p span {
  font-weight: 600;
  color: #333;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body form {
  margin-top: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body form .btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body form .btn.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body form .btn.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body form .btn.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white;
}
.reserve_contents .reservation-detail-modal .modal-content .modal-body form .btn.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
.reserve_contents .reserve_contents {
  background: white !important;
}
.reserve_contents .reserve_form {
  margin: 4rem 0;
}
.reserve_contents .reserve_form input,
.reserve_contents .reserve_form select,
.reserve_contents .reserve_form input[type=date] {
  display: block;
  height: 50px;
  padding: 12px 16px;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}
.reserve_contents .reserve_form input:focus,
.reserve_contents .reserve_form select:focus,
.reserve_contents .reserve_form input[type=date]:focus {
  outline: none;
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.reserve_contents .reserve_form .row {
  margin: 2rem 0;
}
.reserve_contents .reserve_form .row .col-4 {
  padding: 8px;
}
.reserve_contents .reserve_form .row .col-4 label {
  margin-bottom: 1rem;
  font-weight: 500;
  color: #495057;
}
.reserve_contents .reserve_form .row .col-4 label::before {
  display: none;
}
.reserve_contents .reserve_form .form-label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.5rem;
}
.reserve_contents .reserve_form .form-select,
.reserve_contents .reserve_form .form-control {
  height: 50px;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.reserve_contents .reserve_form .form-select:focus,
.reserve_contents .reserve_form .form-control:focus {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
  outline: none;
}
.reserve_contents .reserve_form .form-text {
  font-size: 12px;
  color: #6c757d;
  margin-top: 0.25rem;
}
.reserve_contents .reserve_form .form-text.text-muted {
  color: #6c757d;
}
.reserve_contents .reserve_form .is-valid {
  border-color: #28a745;
}
.reserve_contents .reserve_form .is-warning {
  border-color: #ffc107;
}
.reserve_contents .reservation-form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}
.reserve_contents .reservation-form-actions input[type=submit],
.reserve_contents .reservation-form-actions .entry_btn {
  display: inline-block !important;
  width: auto !important;
}
.reserve_contents #timeSlots {
  padding: 0 16px;
  margin-top: 2rem;
}
.reserve_contents #timeSlots .entry_btn {
  background: #036EB8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: auto;
  width: 200px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.reserve_contents #timeSlots .entry_btn:hover {
  background: #025a9a;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
          box-shadow: 0 2px 4px rgba(3, 110, 184, 0.3);
}
.reserve_contents #timeSlotsContainer {
  margin: 1rem 0 2rem;
}
.reserve_contents #timeSlotsContainer .btn {
  background: white !important;
  border: 1px solid #036EB8 !important;
  padding: 8px 16px;
  color: #036EB8 !important;
  font-size: 16px;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.reserve_contents #timeSlotsContainer .btn:hover {
  background: #f8f9fa !important;
  border-color: #025a9a !important;
  color: #025a9a !important;
}
.reserve_contents .mt-4.text-center {
  margin-top: 2rem;
  text-align: center;
  max-width: 200px;
}
.reserve_contents .mt-4.text-center input {
  background: #036EB8;
  color: white;
  margin-top: 4rem;
  border-radius: 30px;
}

.page-shop-list {
  padding: 1.25rem 1.5rem 2rem !important;
  background: #f1f5f9 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 14px;
}
.page-shop-list .shop-list-hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-shadow: 0 16px 40px rgba(1, 61, 102, 0.22);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: center;
      align-self: center;
}
.page-shop-list .shop-list-hero__actions--stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.page-shop-list .shop-list-hero__action-form {
  display: inline;
  margin: 0;
}
.page-shop-list .shop-list-hero__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.page-shop-list .shop-list-hero__btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
          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;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
  border-left: 4px solid #036eb8;
}
.page-shop-list .shop-list-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.page-shop-list .shop-list-table-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.page-shop-list .shop-list-table-card__head--tabs {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-transition: background 0.12s ease;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
}
.page-shop-list .shop-table-actions form {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0;
}
.page-shop-list .shop-table-action-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  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;
  -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
          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: -webkit-gradient(linear, left top, left bottom, from(#ecfdf5), to(#d1fae5));
  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: -webkit-gradient(linear, left top, left bottom, from(#fffbeb), to(#fef3c7));
  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: -webkit-gradient(linear, left top, left bottom, from(#fef2f2), to(#fee2e2));
  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: -webkit-gradient(linear, left top, left bottom, from(#eff6ff), to(#dbeafe));
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin-right: auto;
}
.page-shop-list .shop-list-tabs__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          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;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
  border-left: 4px solid #036eb8;
}
.page-shop-list .shop-line-form-panel__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.page-shop-list .shop-line-form__submit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
}
.page-shop-list .shop-form-modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  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;
  -webkit-box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
          box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}
.page-shop-list .shop-form-modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
  border-left: 4px solid #036eb8;
}
.page-shop-list .shop-form-modal__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
}
.withdrawal-modal__close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
}

.page-shop-list .shop-form-section {
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.page-shop-list .shop-form-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0f172a;
}
.page-shop-list .shop-form-section__title i {
  color: #036eb8;
  font-size: 1rem;
}
.page-shop-list .shop-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 768px) {
  .page-shop-list .shop-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-shop-list .shop-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 992px) {
  .page-shop-list .shop-form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .page-shop-list .shop-form-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-shop-list .shop-form-field {
  min-width: 0;
}
.page-shop-list .shop-form-field--full {
  grid-column: 1/-1;
}
.page-shop-list .shop-form-field .form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}
.page-shop-list .shop-form-field .form-control,
.page-shop-list .shop-form-field .form-select {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.875rem;
}
.page-shop-list .shop-form-field .form-control:focus,
.page-shop-list .shop-form-field .form-select:focus {
  border-color: #036eb8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.page-shop-list .shop-form-field textarea.form-control {
  min-height: auto;
}
.page-shop-list .shop-form-field .form-text {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #94a3b8;
}
.page-shop-list .shop-form-field .form-check-inline {
  margin-right: 0.5rem;
}
.page-shop-list .shop-form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}
.page-shop-list .shop-form-actions__submit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.55rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: #036eb8;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.page-shop-list .shop-form-actions__submit:hover {
  background: #025a96;
}
.page-shop-list .shop-form-actions__cancel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.page-shop-list .shop-form-actions__cancel i {
  line-height: 1;
}
.page-shop-list .shop-form-actions__cancel:hover {
  background: #f1f5f9;
  color: #334155;
}
.page-shop-list .shop-lesson-history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 1.25rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 1100px) {
  .page-shop-list .shop-lesson-history-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-shop-list .shop-lesson-history-layout__aside {
  position: sticky;
  top: 1rem;
}
.page-shop-list .shop-line-preview {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
          box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.page-shop-list .shop-line-preview__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  background: #06c755;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
}
.page-shop-list .shop-line-preview__head i {
  font-size: 1.1rem;
  line-height: 1;
}
.page-shop-list .shop-line-preview__body {
  padding: 1rem;
}
.page-shop-list .shop-line-preview__message {
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.page-shop-list .shop-line-preview__message-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  background: #eff6ff;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
}
.page-shop-list .shop-line-preview__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.75rem;
}
.page-shop-list .shop-line-preview__item:last-child {
  border-bottom: none;
}
.page-shop-list .shop-line-preview__label {
  font-weight: 700;
  color: #64748b;
}
.page-shop-list .shop-line-preview__value {
  color: #334155;
  word-break: break-word;
}
.page-shop-list .shop-line-preview__text {
  white-space: pre-wrap;
  line-height: 1.5;
}
.page-shop-list .shop-search-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 0.8125rem;
  color: #1e40af;
}
.page-shop-list .shop-search-result i {
  color: #036eb8;
}
.page-shop-list .shop-line-resend-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.2rem 0.5rem;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #036eb8;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}
.page-shop-list .shop-line-resend-btn:hover {
  background: #dbeafe;
}
.page-shop-list .trial-status-select {
  min-height: 34px;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  max-width: 140px;
}
.page-shop-list .other-lesson-container {
  display: none;
}

.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: 0.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: 0.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;
  -webkit-transition: all 0.3s ease;
  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%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 6px;
}
.file-controls .action-buttons .btn {
  font-size: 0.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;
  -webkit-box-sizing: border-box;
          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: 0.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: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin: 15px 0;
  padding: 0 !important;
}
.step-progress .steps .step {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: 0.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;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 1rem auto;
}
.lesson-detail .step_box:hover {
  background-color: rgba(3, 110, 184, 0.05);
  -webkit-transition: background-color 0.3s ease;
  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;
  -webkit-transition: opacity 0.6s ease-out, max-height 0.5s ease-out, margin 0.5s ease-out, padding 0.5s ease-out;
  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;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !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;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !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;
  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, -webkit-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;
  -webkit-box-sizing: border-box !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;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(3, 110, 184, 0.25) !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 {
  -webkit-animation: floatUpDown 4s ease-in-out infinite;
          animation: floatUpDown 4s ease-in-out infinite;
  will-change: transform;
}

@-webkit-keyframes floatUpDown {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes floatUpDown {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
.chatbot-container {
  background: white;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 600px;
  max-height: 80vh;
  overflow: hidden;
}
.chatbot-container .chatbot-messages {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: fadeIn 0.3s ease-in;
          animation: fadeIn 0.3s ease-in;
  margin-bottom: 0.25rem;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
}
.chatbot-container .chatbot-messages .message.user-message {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  background: #f8f9fa;
  border-radius: 24px;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, -webkit-box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.chatbot-container .chatbot-input .input-wrapper:focus-within {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.1);
  background: #fff;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-webkit-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-moz-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea:-ms-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::-ms-input-placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-textarea::placeholder {
  color: #adb5bd;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #036EB8;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, -webkit-transform 0.1s;
  transition: background-color 0.2s, transform 0.1s;
  transition: background-color 0.2s, transform 0.1s, -webkit-transform 0.1s;
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:hover {
  background: #025a9a;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.chatbot-container .chatbot-input .input-wrapper .chatbot-send-btn:disabled {
  background: #adb5bd;
  cursor: not-allowed;
  -webkit-transform: none;
          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: -webkit-fit-content;
  width: -moz-fit-content;
  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;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          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;
  -webkit-box-shadow: none;
          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: 0.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
}
.step-progress .steps .step {
  position: relative;
  width: 30%;
  padding: 0.1rem 0.5rem;
  border-radius: 30px;
  -webkit-transition: all 0.3s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          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 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.comment-form input.btn-save-comment[type=submit],
input.btn-save-comment[type=submit],
.health_box .comment-form input[type=submit].btn-save-comment {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: 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;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !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;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !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;
  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, -webkit-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;
  -webkit-box-sizing: border-box !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[type=submit].btn-save-comment: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[type=submit].btn-save-comment:focus {
  background-color: #036EB8 !important;
  border-color: #036EB8 !important;
  color: white !important;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(3, 110, 184, 0.25) !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[type=submit].btn-save-comment: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[type=submit].btn-save-comment: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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          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: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}
.lesson_list .lesson_card .lesson_card_heading .lesson_card_title_text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.lesson_list .lesson_card:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 6px 20px rgba(3, 110, 184, 0.15);
          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 {
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !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;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !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: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#f1f5f9));
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.school-student-hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-shadow: 0 14px 36px rgba(1, 61, 102, 0.2);
          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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: auto;
      align-self: auto;
}
.school-student-hero__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-box-flex: 1;
      -ms-flex: 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;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
          box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.school-student-panel__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fef2f2));
  background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
}
.school-student-panel--safety .school-student-panel__title i {
  color: #dc2626;
}
.school-student-panel--health {
  border-left: 4px 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: rgb(2.3454545455, 86, 143.8545454545);
}

.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;
  -webkit-box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
          box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  color: inherit;
  text-decoration: none;
  -webkit-transition: border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.school-student-lesson-card:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  border-color: #bfdbfe;
  -webkit-box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
          box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
  color: inherit;
}
.school-student-lesson-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.school-student-lesson-card__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #036eb8;
  -ms-flex-negative: 0;
      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;
  -webkit-box-shadow: 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;
  -webkit-box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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%);
  -webkit-box-shadow: 0 8px 24px rgba(3, 110, 184, 0.22);
          box-shadow: 0 8px 24px rgba(3, 110, 184, 0.22);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.school-chat-fab__toggle:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 12px 28px rgba(3, 110, 184, 0.28);
          box-shadow: 0 12px 28px rgba(3, 110, 184, 0.28);
}
.school-chat-fab__avatar {
  width: 2.25rem;
  height: 2.25rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.school-chat-fab.is-open .school-chat-fab__toggle {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(0.85);
          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;
  -webkit-box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#fff));
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.school-chat-panel__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -o-object-fit: contain;
     object-fit: contain;
}
.school-chat-panel__close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: none;
          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;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
}

.school-chat-panel .bot-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0.35rem;
  line-height: 1;
}

.student-typing-hub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.student-typing-hub__tab i {
  font-size: 0.9rem;
}
.student-typing-hub__tab.is-active {
  background: #fff;
  color: #036eb8;
  -webkit-box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
.student-typing-battle__input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
}
.student-typing-battle__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-box;
  display: -ms-flexbox;
  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;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 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 {
  -webkit-box-shadow: 0 0 0 2px rgba(3, 110, 184, 0.35);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 0 0 3px rgba(3, 110, 184, 0.12);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}
.school-student-hero--lessons .school-student-hero__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.15rem;
  padding: 0.85rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  -webkit-box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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 {
  -ms-flex-negative: 0;
      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 {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  border-color: #bfdbfe;
  -webkit-box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
          box-shadow: 0 10px 28px rgba(3, 110, 184, 0.12);
}

.school-student-lesson-card--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.school-student-step-track__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !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;
  -webkit-box-shadow: 0 14px 36px rgba(3, 110, 184, 0.22);
          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;
  -webkit-animation: ss-lesson-sparkle 2.5s ease-in-out infinite;
          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;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.school-student-lesson-hero__deco-star--3 {
  bottom: 18%;
  left: 42%;
  font-size: 0.95rem;
  -webkit-animation-delay: 1.4s;
          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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-right: 6rem;
}
.school-student-lesson-hero__title-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.school-student-lesson-hero__type-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-animation: ss-lesson-mascot-bounce 2.6s ease-in-out infinite;
          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 {
  -webkit-filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
          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: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f9ff));
  background: linear-gradient(180deg, #fff 0%, #f0f9ff 100%);
  -webkit-box-shadow: 0 8px 24px rgba(3, 110, 184, 0.1);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  margin: 1.35rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: -webkit-gradient(linear, left top, right top, from(#eff6ff), color-stop(50%, #dbeafe), to(#eff6ff));
  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;
  -webkit-animation: ss-lesson-sparkle 2s ease-in-out infinite;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.school-student-lesson-step-track__item:not(:last-child)::after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-gradient(linear, left top, right top, from(#036eb8), to(#0891d4));
  background: linear-gradient(90deg, #036eb8, #0891d4);
}
.school-student-lesson-step-track__dot {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-shadow: 0 2px 8px rgba(3, 110, 184, 0.15);
          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) {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 18px 40px rgba(3, 110, 184, 0.18);
          box-shadow: 0 18px 40px rgba(3, 110, 184, 0.18);
}
.school-student-step-card-link:hover .school-student-step-card__cta--start {
  -webkit-animation: ss-lesson-cta-pulse 0.8s ease-in-out infinite;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          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%);
  -webkit-box-shadow: 0 8px 20px rgba(3, 110, 184, 0.1);
          box-shadow: 0 8px 20px rgba(3, 110, 184, 0.1);
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.school-student-step-card--featured {
  border-width: 4px;
  border-color: #036eb8;
  -webkit-box-shadow: 0 12px 32px rgba(3, 110, 184, 0.18);
          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: -webkit-gradient(linear, left top, right top, from(#036eb8), to(#0891d4));
  background: linear-gradient(90deg, #036eb8, #0891d4);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  -webkit-transform: rotate(32deg);
          transform: rotate(32deg);
  -webkit-box-shadow: 0 2px 8px rgba(3, 110, 184, 0.3);
          box-shadow: 0 2px 8px rgba(3, 110, 184, 0.3);
}
.school-student-step-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 0.35rem;
}
.school-student-step-card__icon-wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 4px 14px rgba(3, 110, 184, 0.2);
          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;
  -webkit-box-shadow: 0 4px 14px rgba(3, 110, 184, 0.2);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-shadow: 0 6px 16px rgba(3, 110, 184, 0.35);
          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;
  -webkit-box-shadow: 0 6px 16px rgba(3, 110, 184, 0.28);
          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;
  -webkit-box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
          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;
  -webkit-filter: grayscale(0.15);
          filter: grayscale(0.15);
}

@-webkit-keyframes ss-lesson-mascot-bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@keyframes ss-lesson-mascot-bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}
@-webkit-keyframes ss-lesson-sparkle {
  0%, 100% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
}
@keyframes ss-lesson-sparkle {
  0%, 100% {
    opacity: 0.5;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
}
@-webkit-keyframes ss-lesson-cta-pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
}
@keyframes ss-lesson-cta-pulse {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.03);
            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__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;
  -webkit-box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
}

.guest-portal__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.guest-portal__nav-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  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 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-btn {
    min-width: 2.75rem;
    padding-inline: 0.65rem;
  }
}

.guest-portal__nav-form {
  margin: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  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;
  -webkit-box-shadow: inset 0 0 0 1px rgba(3, 110, 184, 0.18);
          box-shadow: inset 0 0 0 1px rgba(3, 110, 184, 0.18);
}

@media (max-width: 479px) {
  .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__nav-btn--logout {
    min-width: 2.75rem;
    padding-inline: 0.65rem;
  }
}

.guest-portal__flash {
  margin-bottom: 0.75rem;
}
.guest-portal__flash .alert {
  margin-bottom: 0;
  border-radius: 12px;
  border: none;
  -webkit-box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
          box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.guest-portal__panel {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
          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;
}

.guest-portal__lead {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: #64748b;
  line-height: 1.6;
}

.guest-portal__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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;
  -ms-flex-negative: 0;
      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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.65rem;
}
@media (min-width: 480px) {
  .guest-portal__actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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;
}
.guest-portal__form .form-control {
  min-height: 2.75rem;
  border-radius: 12px;
  border-color: #e2e8f0;
}
.guest-portal__form .form-control:focus {
  border-color: rgba(3, 110, 184, 0.45);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.12);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.12);
}
.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__messages {
  min-height: calc(100dvh - 5.5rem);
}

.guest-messenger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: calc(100dvh - 5.5rem);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
          box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}
@media (min-width: 768px) {
  .guest-messenger {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    min-height: calc(100dvh - 7rem);
    max-height: calc(100dvh - 7rem);
  }
}

.guest-thread-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
@media (min-width: 768px) {
  .guest-thread-list {
    width: 18.5rem;
    max-width: 38%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid #e2e8f0;
  }
}
.guest-thread-list__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  -webkit-transition: background 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: background 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  transition: background 0.12s ease, box-shadow 0.12s ease, -webkit-box-shadow 0.12s ease;
}
.guest-thread-card:hover {
  background: #fff;
  color: inherit;
  -webkit-box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
          box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
}
.guest-thread-card--active {
  background: #fff;
  -webkit-box-shadow: inset 3px 0 0 #036eb8, 0 1px 8px rgba(3, 110, 184, 0.08);
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.guest-thread-card__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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 {
  -ms-flex-negative: 0;
      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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 1.35rem;
  height: 1.35rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 .pm-split__main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #fff;
}
.guest-portal__messages .pm-chat--split {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.guest-portal__messages .pm-chat__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8fafc));
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.guest-portal__messages .pm-chat__info {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.guest-portal__messages .pm-chat__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-portal__messages .pm-chat__status {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
}
.guest-portal__messages .pm-chat__thread {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  background: #eef2f7;
  -webkit-overflow-scrolling: touch;
}
.guest-portal__messages .pm-thread-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
  max-width: 88%;
}
.guest-portal__messages .pm-bubble--incoming {
  -webkit-box-align: start;
      -ms-flex-align: start;
          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;
}
.guest-portal__messages .pm-bubble--incoming .pm-bubble__role {
  color: #036eb8;
}
.guest-portal__messages .pm-bubble--outgoing {
  -webkit-box-align: end;
      -ms-flex-align: end;
          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;
}
.guest-portal__messages .pm-bubble--outgoing .pm-bubble__text p {
  color: inherit;
}
.guest-portal__messages .pm-bubble__inner {
  padding: 0.7rem 1rem;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
          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;
}
.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-split__placeholder {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 - 5.5rem);
    max-height: calc(100dvh - 5.5rem);
  }
}

.guest-portal__back-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  background: #e8f4fc;
  color: #025a96;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99999;
  opacity: 1;
  -webkit-transition: opacity 0.8s ease-in-out;
  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%;
  -webkit-animation: quiz-spin 1s linear infinite;
          animation: quiz-spin 1s linear infinite;
  margin: 0 auto 30px;
}

.quiz-loading-text {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  opacity: 0;
  -webkit-animation: quiz-fade-in 0.8s ease-in-out 0.3s forwards;
          animation: quiz-fade-in 0.8s ease-in-out 0.3s forwards;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@-webkit-keyframes quiz-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes quiz-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes quiz-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes quiz-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.quiz-main-content {
  -webkit-transition: opacity 1.2s ease-in-out;
  transition: opacity 1.2s ease-in-out;
}
.quiz-main-content.fade-in {
  opacity: 1;
}

.quiz-step-container {
  -webkit-animation: quiz-slide-up 1s ease-out 0.5s both;
          animation: quiz-slide-up 1s ease-out 0.5s both;
}

@-webkit-keyframes quiz-slide-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes quiz-slide-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.quiz-question {
  opacity: 0;
  -webkit-animation: quiz-question-fade-in 0.6s ease-out forwards;
          animation: quiz-question-fade-in 0.6s ease-out forwards;
}
.quiz-question:nth-child(1) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.quiz-question:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.quiz-question:nth-child(3) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.quiz-question:nth-child(4) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.quiz-question:nth-child(5) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.quiz-question:nth-child(6) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.quiz-question:nth-child(7) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.quiz-question:nth-child(8) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.quiz-question:nth-child(9) {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}
.quiz-question:nth-child(10) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

@-webkit-keyframes quiz-question-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes quiz-question-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
html, body {
  overflow-x: hidden;
  overflow-y: auto;
}

.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;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.quiz-question:hover {
  border-color: #007bff;
  -webkit-box-shadow: 0 5px 15px rgba(0, 123, 255, 0.1);
          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;
}

.form-check {
  margin-bottom: 0.75rem;
}
.form-check:last-child {
  margin-bottom: 0;
}

.form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
}
.form-check-input:checked {
  background-color: #007bff;
  border-color: #007bff;
}

.form-check-label {
  font-size: 1rem;
  color: #495057;
  margin-left: 0.5rem;
  cursor: pointer;
  line-height: 1.4;
}
.form-check-label:hover {
  color: #007bff;
}

.quiz-actions {
  text-align: center;
  padding-top: 2rem;
  border-top: 2px solid #e9ecef;
  margin-top: 2rem;
}

.btn {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
}

.btn-outline-secondary {
  border: 2px solid #6c757d;
  color: #6c757d;
}
.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;
  }
  .btn {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}
.alert {
  border-radius: 10px;
  border: none;
  padding: 1.5rem;
}
.alert.alert-warning {
  background: #fff3cd;
  color: #856404;
  border-left: 4px solid #ffc107;
}

.quiz-container {
  -webkit-animation: quiz-slide-up 0.8s ease-out;
          animation: quiz-slide-up 0.8s ease-out;
}

@keyframes quiz-slide-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.quiz-question {
  -webkit-animation: quiz-question-fade-in 0.6s ease-out forwards;
          animation: quiz-question-fade-in 0.6s ease-out forwards;
}
.quiz-question:nth-child(1) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.quiz-question:nth-child(2) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.quiz-question:nth-child(3) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.quiz-question:nth-child(4) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.quiz-question:nth-child(5) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.quiz-question:nth-child(6) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.quiz-question:nth-child(7) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.quiz-question:nth-child(8) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.quiz-question:nth-child(9) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.quiz-question:nth-child(10) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

@keyframes quiz-question-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.step-card {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.step-card .step-description {
  margin-top: 10px;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.8rem;
}
.step-card .status-label {
  display: inline-block;
  margin-top: 10px;
  font-weight: bold;
}
.step-card .status-label span {
  padding: 4px 8px;
  border-radius: 4px;
}
.step-card .status-label span.submitted {
  background-color: #28a745;
  color: white;
}
.step-card .status-label span.in-progress {
  background-color: #ffc107;
  color: #000;
}
.step-card .status-label span.start {
  background-color: #007bff;
  color: white;
}
.step-card .status-label span.locked {
  background-color: #e9ecef;
  color: #6c757d;
}
.step-card--locked {
  opacity: 0.75;
  background: #f8f9fa;
  cursor: not-allowed;
}

.step-progress .steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin: 15px 0;
}
.step-progress .steps .step {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  font-size: 0.9rem;
}
.step-progress .steps .step.completed {
  background-color: #e9ecef;
  color: #007bff;
  border: 1px solid #dee2e6;
}
.step-progress .steps .step.in-progress {
  background-color: transparent;
  color: #28a745;
  border: 2px solid #28a745;
}

.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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          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;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          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;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  -webkit-transition: color 0.2s;
  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;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.shop-quiz-card:hover {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.shop-quiz-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.shop-quiz-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          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 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-weight: 600;
  color: #6c757d;
}

.shop-quiz-option__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 0.1rem;
  color: #198754;
  font-size: 1.15rem;
}

.shop-quiz-option__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  border-left: 4px solid #0dcaf0;
}

.shop-quiz-card__explanation-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #087990;
  margin: 0 0 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: background 0.2s, color 0.2s;
  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 {
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          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;
}

.admin_course_contents {
  padding: 2rem;
}
.admin_course_contents h6 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
}
.admin_course_contents h5 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #495057;
  margin: 2rem 0 1rem;
}
.admin_course_contents .create_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 1rem;
  background-color: #0d6efd;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.admin_course_contents .create_btn:hover {
  background-color: #0b5ed7;
  color: #fff;
}
.admin_course_contents .create_btn i {
  margin-left: 0.5rem;
}
.admin_course_contents .table {
  margin-top: 1rem;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.admin_course_contents .table thead {
  background-color: #f8f9fa;
}
.admin_course_contents .table thead th {
  padding: 1rem;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
}
.admin_course_contents .table tbody tr {
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.admin_course_contents .table tbody tr:hover {
  background-color: #f8f9fa;
}
.admin_course_contents .table tbody tr td {
  padding: 1rem;
  vertical-align: middle;
  color: #212529;
  border-bottom: 1px solid #dee2e6;
}
.admin_course_contents .table tbody tr td:first-child {
  font-weight: 500;
}
.admin_course_contents .table tbody tr td:first-child a {
  color: #0d6efd;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.admin_course_contents .table tbody tr td:first-child a:hover {
  color: #0a58ca;
}
.admin_course_contents .table tbody tr td:first-child a i {
  margin-left: 0.5rem;
  font-size: 0.875rem;
}
.admin_course_contents .btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 4px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.admin_course_contents .btn.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}
.admin_course_contents .btn.btn-outline-primary:hover {
  background-color: #0d6efd;
  color: #fff;
}
.admin_course_contents .btn.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}
.admin_course_contents .btn.btn-outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}

.admin_steps_content {
  background: white;
}
.admin_steps_content .container-fluid {
  max-width: 100%;
}
.admin_steps_content .step_description {
  padding: 2rem 1rem;
  position: relative;
  min-height: 90vh;
}
.admin_steps_content .step_description h2 {
  font-size: 20px;
  font-weight: 600;
}
.admin_steps_content .step_description .curriculum_btn {
  background: #0d6efd;
  color: white;
  border: none;
  display: block;
  width: 80%;
  margin: 1rem auto;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 1rem;
}
.admin_steps_content .step_description .mt-3 {
  margin: 2rem 0;
  width: 80%;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.admin_steps_content .step_description .mt-3 a:first-of-type {
  background: none;
  color: #0d6efd;
  font-weight: 600;
}

.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;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          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%;
  -webkit-transform: translateX(-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;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          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 {
  -webkit-filter: invert(1);
          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;
  border-left: 4px solid #28a745;
}
.evaluationModal .evaluation-body .alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border-left: 4px solid #dc3545;
}
.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%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  background: white;
  border-radius: 12px;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  -webkit-transition: background-color 0.2s;
  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;
  border-left: 4px solid #ffc107;
}
.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;
  border-left: 4px solid #17a2b8;
}

.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;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.sub-step-selector .form-select:focus {
  border-color: #007bff;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          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 {
  -webkit-transform: none;
          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;
  -webkit-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
          box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
  height: auto !important;
}

.modal-sm {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) !important;
          transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.modal-body {
  position: relative;
  padding: 1rem;
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
          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;
  -webkit-filter: brightness(0) invert(1);
          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;
  border-left: 4px solid #28a745;
}

#evaluationResult .alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border-left: 4px solid #dc3545;
}

.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;
  -webkit-transition: all 0.2s ease;
  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;
  -webkit-transform: translateX(2px);
          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;
  -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid #4a5568;
}

.code-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #2d3748;
  padding: 4px 4px 0 4px;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-bottom: none;
}

.code-tab {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: transparent;
  border: none;
  color: #a0aec0;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.code-tab:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.code-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  -webkit-box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  -webkit-transform: translateY(-2px);
          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;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.code-tab.active i {
  -webkit-transform: scale(1.1);
          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;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-animation: tabSlideIn 0.3s ease-out;
          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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
          box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}
.code-pane .btn-xs:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
          box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  -webkit-box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
          box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-success {
  background: none !important;
}

@-webkit-keyframes tabSlideIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes tabSlideIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            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;
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
          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%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80px;
  height: 8px;
  background: -webkit-gradient(linear, left top, left bottom, from(#1a1a1a), to(#000));
  background: linear-gradient(180deg, #1a1a1a, #000);
  border-radius: 0 0 8px 8px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
          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;
  -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
          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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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%;
  -webkit-transform: translate(-50%, -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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          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);
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  z-index: -1;
  pointer-events: none;
}
#top_page .container .enter_box .button:before {
  -webkit-animation: ripple 4s ease-out infinite;
          animation: ripple 4s ease-out infinite;
}
#top_page .container .enter_box .button:after {
  -webkit-animation: ripple 4s ease-out 1.5s infinite;
          animation: ripple 4s ease-out 1.5s infinite;
}
@-webkit-keyframes ripple {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(3);
            transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(3);
            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%;
  -webkit-transform: translate(-50%, -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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
header .header-top.header-top--logo-only {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0.5rem 1rem;
}
header .header-top .sidebar-toggle-container-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: all 0.3s ease;
  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);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
header .header-top .sidebar-toggle-container-header .sidebar-toggle-header i {
  margin-right: 0.4rem;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
header .header-top .nav-list .btn {
  padding: 0.5rem 0.5rem !important;
}
header .header-top .nav-list .btn:hover {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-transform: 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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: 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 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          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;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .header-top .search-input:focus {
  outline: none;
  border-color: #036EB8;
  -webkit-box-shadow: none;
          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;
  -webkit-transition: all 0.3s ease;
  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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
header nav .main-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  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: rgb(2.1818181818, 80, 133.8181818182);
}
header nav .header-right .btn {
  background: #036EB8;
  color: #fff;
  border-radius: 5px;
  border: none;
  padding: 12px 40px;
  font-weight: bold;
  cursor: pointer;
}

.card {
  border-radius: 10px;
  border: 1px solid #eee;
}
.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 {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

header .nav-list {
  position: relative;
  z-index: 11;
  margin: 0 !important;
}
header .nav-list li {
  display: inline-block;
  padding: 0 16px;
}

.school-layout {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.footer {
  margin-top: auto;
}

.side-menu {
  min-height: 100vh;
  height: 100%;
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          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;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-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 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.side-menu .list-group-item.dropdown-toggle i {
  margin-right: 0.75rem;
  color: #036EB8;
}
.side-menu .collapse {
  -webkit-transition: all 0.3s ease-in-out;
  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;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: all 0.3s ease;
  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;
  -webkit-transition: color 0.2s ease;
  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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.side-menu i {
  font-size: 150%;
  margin-right: 16px;
  color: #036EB8;
}

.index_table {
  margin: 40px 0;
  text-align: left;
  width: 100% !important;
  table-layout: fixed;
}
.index_table th {
  border-bottom: 2px solid #272727 !important;
}
.index_table tbody tr:nth-of-type(odd) {
  background: #f8f8f8;
}
.index_table th,
.index_table td {
  padding: 16px 8px;
}
.index_table th:first-of-type,
.index_table td:first-of-type {
  width: 15%;
}
.index_table th:nth-of-type(2),
.index_table td:nth-of-type(2) {
  width: 15%;
}
.index_table th:nth-of-type(3),
.index_table td:nth-of-type(3) {
  width: 35%;
}
.index_table th:nth-of-type(4),
.index_table td:nth-of-type(4) {
  width: 10%;
}
.index_table th:nth-of-type(5),
.index_table td:nth-of-type(5) {
  width: 10%;
}
.index_table th:last-of-type,
.index_table td:last-of-type {
  width: 10%;
}
.index_table th:last-of-type ul,
.index_table td:last-of-type ul {
  margin: 0;
}
.index_table th:last-of-type ul li,
.index_table td:last-of-type ul li {
  display: inline-block;
  margin-bottom: 0;
}
.index_table th:last-of-type ul li i,
.index_table td:last-of-type ul li i {
  font-size: 24px;
}
.index_table th:last-of-type ul li a,
.index_table td:last-of-type ul li a {
  padding-right: 8px;
}
.index_table th:last-of-type ul li .btn,
.index_table td:last-of-type ul li .btn {
  padding: 0;
  background: none;
  color: crimson;
}

.info_table {
  margin: 40px 0;
  text-align: left;
  width: 100% !important;
  table-layout: auto;
}
.info_table th {
  border-bottom: 2px solid #272727 !important;
}
.info_table tbody tr:nth-of-type(odd) {
  background: #f8f8f8;
}
.info_table th,
.info_table td {
  padding: 16px 12px;
  white-space: nowrap;
}
.info_table th:first-of-type,
.info_table td:first-of-type {
  min-width: 40px;
  width: auto;
}
.info_table th:nth-of-type(2),
.info_table td:nth-of-type(2) {
  min-width: 150px;
  width: auto;
}
.info_table th:nth-of-type(3),
.info_table td:nth-of-type(3) {
  min-width: 100px;
  width: auto;
}
.info_table th:nth-of-type(4),
.info_table td:nth-of-type(4) {
  min-width: 80px;
  width: auto;
}
.info_table th:last-of-type,
.info_table td:last-of-type {
  min-width: 150px;
  width: auto;
}
.info_table th:last-of-type ul,
.info_table td:last-of-type ul {
  margin: 0;
}
.info_table th:last-of-type ul li,
.info_table td:last-of-type ul li {
  display: inline-block;
  margin-bottom: 0;
}
.info_table th:last-of-type ul li i,
.info_table td:last-of-type ul li i {
  font-size: 24px;
}
.info_table th:last-of-type ul li a,
.info_table td:last-of-type ul li a {
  padding-right: 8px;
}
.info_table th:last-of-type ul li .btn,
.info_table td:last-of-type ul li .btn {
  padding: 0;
  background: none;
  color: crimson;
}

.course_indexBox {
  margin-top: 80px;
}
.course_indexBox .courseBox {
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  padding: 2rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.course_indexBox .courseBox .course-title {
  font-size: 20px;
  font-weight: 600;
  margin: 1rem 0 !important;
}
.course_indexBox .courseBox .course-title i {
  margin-right: 8px;
  background: #eef8ff;
  padding: 8px;
  border-radius: 50%;
}
.course_indexBox .courseBox p.course-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.course_indexBox .courseBox .text {
  margin: 3rem 0;
}

.course_form,
.message_form {
  margin: 0 !important;
}
.course_form h4,
.message_form h4 {
  margin-bottom: 80px !important;
}

.message_form,
.lesson_form,
.course_form {
  padding: 0 2rem;
}
.message_form h4,
.lesson_form h4,
.course_form h4 {
  margin: 0 0 2rem;
}
.message_form h4 i,
.lesson_form h4 i,
.course_form h4 i {
  margin-right: 8px;
}
.message_form label,
.lesson_form label,
.course_form label {
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
  padding-left: 0 !important;
}
.message_form label::before,
.lesson_form label::before,
.course_form label::before {
  display: none;
}
.message_form h6,
.lesson_form h6,
.course_form h6 {
  font-size: 16px;
  display: block;
  font-weight: 600;
  margin-bottom: 1.5rem !important;
  color: #666;
}
.message_form .form-check,
.lesson_form .form-check,
.course_form .form-check {
  padding-left: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2rem;
}
.message_form .form-check label,
.lesson_form .form-check label,
.course_form .form-check label {
  margin-bottom: 0 !important;
  margin-left: 8px;
}
.message_form .courseSelect,
.lesson_form .courseSelect,
.course_form .courseSelect {
  font-size: 18px;
  display: block;
  margin-bottom: 2rem;
  font-weight: 900;
}
.message_form .courseSelect span,
.lesson_form .courseSelect span,
.course_form .courseSelect span {
  font-size: 150%;
  color: #666;
}
.message_form .form-group,
.lesson_form .form-group,
.course_form .form-group {
  margin-bottom: 2rem;
}
.message_form .form-group h5,
.lesson_form .form-group h5,
.course_form .form-group h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2rem;
}
.message_form .form-group h6,
.lesson_form .form-group h6,
.course_form .form-group h6 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #666;
}
.message_form .form-group label,
.lesson_form .form-group label,
.course_form .form-group label {
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
  display: block;
}
.message_form .form-group .form-control,
.lesson_form .form-group .form-control,
.course_form .form-group .form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 1rem;
  -webkit-transition: border-color 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out;
}
.message_form .form-group .form-control:focus,
.lesson_form .form-group .form-control:focus,
.course_form .form-group .form-control:focus {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.message_form .form-group .form-select,
.lesson_form .form-group .form-select,
.course_form .form-group .form-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  -webkit-transition: border-color 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.message_form .form-group .form-select:focus,
.lesson_form .form-group .form-select:focus,
.course_form .form-group .form-select:focus {
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.25);
}
.message_form .form-group .form-select option,
.lesson_form .form-group .form-select option,
.course_form .form-group .form-select option {
  padding: 0.5rem;
  background-color: #fff;
}
.message_form .actions,
.lesson_form .actions,
.course_form .actions {
  margin-top: 2rem;
  text-align: right;
}
.message_form .actions a,
.lesson_form .actions a,
.course_form .actions a {
  color: #036EB8;
  font-weight: 600;
  font-size: 14px;
  margin-left: 8px;
  background: none;
}
.message_form .actions .btn,
.lesson_form .actions .btn,
.course_form .actions .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.lesson_detileBox ol li {
  display: block;
  letter-spacing: 0.03em;
  font-size: 14px;
  width: 80%;
}
.lesson_detileBox ol li span {
  font-weight: bold;
  display: block;
  color: #666;
  margin-bottom: 8px;
}

.filter-box .row {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.filter-box .col-3 a {
  margin: 0 !important;
  background: none !important;
  border: none !important;
  color: #036EB8 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 0 24px !important;
}

#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%;
  -webkit-transform: translate(-50%, -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;
}

.modal-dialog {
  margin: 0 auto;
}

.modal-header {
  border-bottom: none !important;
  padding: 1rem;
  position: relative;
  color: #fff;
  z-index: 1100;
}
.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 0.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: 0.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;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  -webkit-animation: fadeInOut 3s ease-in-out forwards;
          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;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            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: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  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: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  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 {
  border-right: 1px solid #dee2e6;
}

.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;
  -webkit-transition: max-height 0.3s ease-out;
  transition: max-height 0.3s ease-out;
}

.side-menu .submenu.show {
  max-height: 500px;
  -webkit-transition: max-height 0.3s ease-in;
  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 Messages */
#flash-toast {
  position: fixed;
  top: 32px;
  right: 32px;
  z-index: 9999;
  min-width: 300px;
  max-width: 400px;
}

#flash-toast .flash-message {
  -webkit-animation: fadeIn 0.5s;
          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;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* タブのスタイル */
.nav-tabs {
  margin-bottom: 20px;
}

/* カードのスタイル */
.card {
  margin-bottom: 20px;
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
          box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* ボタンのスタイル */
.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* フォームのスタイル */
.form-control:focus {
  border-color: #86b7fe;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
          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-content {
  border-radius: 0.5rem;
}

.modal-header {
  border-bottom: 1px solid #dee2e6;
}

.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.withdrawal-modal .withdrawal-modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          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;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          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;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.withdrawal-modal .withdrawal-modal-body .form-group .form-control:focus {
  border-color: #86b7fe;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
          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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          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;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  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;
  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, -webkit-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;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          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;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          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;
  border-left: 4px solid #667eea;
}
.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;
  -webkit-box-sizing: border-box;
          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 {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: none;
  transition: none;
}
.school_mail_setteing .card:hover {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: none;
          transform: none;
}
.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 {
  padding: 3rem 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 {
  -webkit-box-shadow: none;
          box-shadow: none;
}
#email-fields-container .btn-primary {
  background: linear-gradient(135deg, #036EB8 0%, #1a8fd9 100%) !important;
  font-size: 0.8rem;
}

.health_managementPage .health-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #dee2e6;
  padding: 0;
  margin-bottom: 1.2rem;
}
.health_managementPage .health-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6c757d;
  cursor: pointer;
  outline: none;
  -webkit-transition: color 0.2s, border-color 0.2s;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -2px;
}
.health_managementPage .health-tab i {
  margin-right: 0.35rem;
}
.health_managementPage .health-tab:hover {
  color: #036EB8;
}
.health_managementPage .health-tab.active {
  color: #036EB8;
  border-bottom-color: #036EB8;
}
.health_managementPage .health-tab-content #filter-form {
  margin: 2rem 0 !important;
}
.health_managementPage .health-tab-content .mt-3 {
  margin: 3rem 0 !important;
}
.health_managementPage .health-tab-content .mt-3 h6 {
  margin-bottom: 2rem !important;
}
.health_managementPage .health-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
  padding-right: 1rem;
  -webkit-overflow-scrolling: touch;
}
.health_managementPage .health-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.health_managementPage .health-table th, .health_managementPage .health-table td {
  border: 1px solid #dee2e6;
  padding: 12px;
  white-space: nowrap;
}
.health_managementPage .health-table thead th {
  background: #f8f9fa;
  font-weight: 600;
}
.health_managementPage .health-table tbody td {
  background: #fff;
}
.health_managementPage .health-table tbody tr:hover td {
  background: #f5f8fb;
}
.health_managementPage .health-table tbody tr:hover .health-sticky-col {
  background: #f5f8fb;
}
.health_managementPage .health-sticky-col {
  position: sticky;
  z-index: 3;
}
.health_managementPage thead .health-sticky-col {
  z-index: 5;
  background: #f8f9fa;
}
.health_managementPage tbody .health-sticky-col {
  background: #fff;
}
.health_managementPage .health-sticky-name {
  left: 0;
  min-width: 150px;
}
.health_managementPage .health-sticky-name::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: #dee2e6;
}
.health_managementPage .health-sticky-grade {
  left: 80px;
  min-width: 100px;
}
.health_managementPage .health-sticky-grade::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: #dee2e6;
}
.health_managementPage .health-sticky-class {
  left: 130px;
  min-width: 60px;
  -webkit-box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1);
          box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1);
}
.health_managementPage .health-sticky-class::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: #dee2e6;
}
.health_managementPage .health-table.no-class-col .health-sticky-grade {
  -webkit-box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1);
          box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1);
}
.health_managementPage .health-date-col {
  text-align: center;
  min-width: 45px;
  font-size: 10px;
  padding: 4px !important;
}
.health_managementPage .health-date-day {
  font-size: 9px;
  color: #6c757d;
}
.health_managementPage .health-date-cell {
  text-align: center;
  font-size: 11px;
  padding: 4px !important;
}
.health_managementPage .health-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 4px 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #495057;
}
.health_managementPage .health-legend-title {
  font-weight: 600;
  color: #333;
  margin-right: 4px;
}
.health_managementPage .health-legend-item {
  white-space: nowrap;
}
.health_managementPage .health-legend-num {
  font-weight: 700;
  margin-right: 1px;
}
.health_managementPage .health-filter-section {
  margin-bottom: 1rem;
}
.health_managementPage .health-filter-section .school-list-section__head-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.health_managementPage .health-filter-section .school-student-filter-scope {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.35rem;
}
.health_managementPage .health-filter-section .school-student-filter-scope__chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #e8f4fd;
  border: 1px solid #b8daf0;
  color: #036eb8;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.health_managementPage .health-filter-section .school-student-filter-scope__chip i {
  font-size: 0.95rem;
}
.health_managementPage .health-management-filter-form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.65rem 0.75rem;
}
.health_managementPage .health-management-filter-form__field {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  min-width: 0;
}
.health_managementPage .health-management-filter-form__field .form-label {
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
}
.health_managementPage .health-management-filter-form__field--period {
  -ms-flex-preferred-size: 7.5rem;
      flex-basis: 7.5rem;
}
.health_managementPage .health-management-filter-form__field--month {
  -ms-flex-preferred-size: 10.5rem;
      flex-basis: 10.5rem;
}
.health_managementPage .health-management-filter-form__field--year {
  -ms-flex-preferred-size: 6.5rem;
      flex-basis: 6.5rem;
}
.health_managementPage .health-management-filter-form__field--term {
  -ms-flex-preferred-size: 7rem;
      flex-basis: 7rem;
}
.health_managementPage .health-management-filter-form__field--grade {
  -ms-flex-preferred-size: 9.5rem;
      flex-basis: 9.5rem;
}
.health_managementPage .health-management-filter-form__field--class {
  -ms-flex-preferred-size: 11rem;
      flex-basis: 11rem;
}
.health_managementPage .health-management-filter-form__field--chart {
  -ms-flex-preferred-size: 13rem;
      flex-basis: 13rem;
}
.health_managementPage .health-management-filter-form .form-select,
.health_managementPage .health-management-filter-form .form-control {
  height: 32px;
  min-height: 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.5rem;
  font-size: 0.875rem;
}
.health_managementPage .health-management-filter-row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.health_managementPage .health-management-filter-row .col-2 {
  padding: 8px !important;
}
.health_managementPage .health-management-filter-row .form-select,
.health_managementPage .health-management-filter-row .form-control {
  height: 32px;
  min-height: 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.5rem;
  font-size: 0.875rem;
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn {
  min-width: 100px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: none;
  padding: 8px 16px !important;
  line-height: 1;
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn-primary:hover {
  background: linear-gradient(135deg, #5568d3 0%, #6a3d8f 100%);
  color: #fff;
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn-primary:active {
  background: linear-gradient(135deg, #5568d3 0%, #6a3d8f 100%);
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn-outline-secondary {
  background: #fff;
  color: #6c757d;
  border: 1px solid #dee2e6;
  margin-bottom: 0;
  line-height: 1.5;
  vertical-align: middle;
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn-outline-secondary:hover {
  background: #f8f9fa;
  color: #6c757d;
  border-color: #dee2e6;
}
.health_managementPage .d-flex.gap-2.justify-content-center .btn-outline-secondary:active {
  background: #f8f9fa;
}

/* 担任割当: 副担任セレクトと削除ボタンを横並び */
.page-school-homeroom .school-homeroom-assistants__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.page-school-homeroom .school-homeroom-assistants__row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
.page-school-homeroom .school-homeroom-assistants__select {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}
.page-school-homeroom .school-homeroom-assistants__remove {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0.25rem 0.4rem !important;
  min-width: 1.75rem;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64748b !important;
}
.page-school-homeroom .school-homeroom-assistants__remove:hover,
.page-school-homeroom .school-homeroom-assistants__remove:focus {
  color: #dc2626 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/*# sourceMappingURL=application.css.map */