.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
}

body:has(.modal-overlay[style*="display: block"]) {
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  z-index: 1001;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  display: none;
  opacity: 0;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  color: #333;
  font-size: 24px;
}

.modal-content {
  margin-top: 1rem;
}

.modal-fees-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.page-hbrain-training {
  .modal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;

    h1 {
      color: var(--grey-800);
    }
    h2 {
      color: var(--primary-800);
    }
    .modal-content-body {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 16px;

      @media (max-width: 1026px) {
        flex-direction: column;
        align-items: center;
      }

      .flex-col {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        flex: 1;
      }

      .flex-row {
        display: flex;
        flex-direction: row;
        gap: 8px;
      }

      .panel {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .grow-and-scroll {
          flex: 1;
        }

        .panel-content {
          padding: 1rem;
          border-radius: 8px;
          background-color: var(--grey-100);
          white-space: pre-wrap;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          max-width: 700px;

          p {
            color: var(--grey-700);
          }

          .lesson-accordion-item {
            display: flex;
            flex-direction: column;

            .lesson-accordion-item-content {
              flex-direction: column;
            }
          }

          .lesson-accordion-item-button,
          .topic-accordion-item-button {
            width: 100%;
            display: flex;
            gap: 8px;
            justify-content: flex-start;
            align-items: center;
            background: none;
            border: none;
            outline: none;
            font-family: var(--f-public-sans);
            text-transform: none;
            font-size: 18px;
            font-style: normal;
            line-height: normal;
            cursor: pointer;
            color: var(--primary-800);
            p {
              font-weight: 700;
              color: var(--primary-800);
              text-align: left;
            }
          }

          .lesson-accordion-item-button.no-topics {
            cursor: default;
            font-weight: 400;

            p {
              font-weight: 400;
            }

            .iconify[data-icon="mdi:chevron-right"] {
              opacity: 0;
            }

            .iconify[data-icon="mdi:human-welcome"],
            .iconify[data-icon="material-symbols:star-rounded"] {
              opacity: 1;
            }
          }

          .topic-accordion-item {
            display: flex;
            flex-direction: column;

            .topic-accordion-item-content {
              flex-direction: column;
            }

            .caption {
              color: var(--grey-500);
              margin-left: 2rem !important;
              margin-right: 1rem !important;
            }
          }

          .topic-accordion-item-button {
            margin-left: 0.5rem !important;
            p {
              font-weight: 400;
              color: var(--primary-800);
            }
          }

          .topic-accordion-item-button.no-chapters {
            cursor: default;

            .arrow-icon {
              opacity: 0;
            }
          }
        }
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      margin: 0 !important;
    }

    li {
      margin: 0 !important;

      @media (max-width: 1026px) {
        text-align: left;
      }
    }

    .content-item {
      font-weight: 700;
      color: var(--primary-800);
    }
  }

  .resources-list {
    list-style-type: disc;
    
    strong {
      font-weight: 400;
    }
    li {
      font-size: 16px;
      font-weight: 400;
      color: var(--primary-800);
    }
  }
}