#modal {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 1;

  padding: 5vh;
  background-color: var(--color_overlay_light);

  z-index: var(--z_index_modal);

  transition: opacity 0.5s;
}

#modal.hidden {
  display: none;
  opacity: 0;
}

#modal > .content {
  height: 100%;
  padding: 1vh;

  background-color: var(--color_back_1);
  box-shadow: 0 0 5px var(--color_accent_1);

  display: flex;
  gap: 10px;
}

#modal > .content .right, #modal > .content .left {
  display: flex;
  flex-direction: column;
}

#modal > .content .left {
  flex-basis: 65%;
  gap: 10px;
  overflow: scroll;
}

#modal > .content .right {
  flex-grow: 1;
  gap: 20px;
}

#modal * {
  font-size: var(--fsz_course_list);
}

/* CLOSE */
/* NAME */
#modal .name h2 {
  font-size: var(--fsz_modal_unit_h2);
  padding: 2px 5px;
  border-radius: var(--button_border_radius);
}
#modal > .content .name {
  display: flex;
  gap: 20px;
}


/* VIDEOS */
#modal .videos.large {
  flex-grow: 1;
}
#modal .videos iframe {
  width: 100%;
  height: 100%;
}


/* CHECKS */
#modal .checks {
  --color_back: transparent;
  --color_border: var(--color_accent_1);
  --color_text: var(--color_accent_1);
  --internal_margin: 3px;
  --border_radius: var(--general_border_radius);;
  
  position: relative;
  background-color: var(--color_back);

  padding: var(--internal_margin);
  border-radius: var(--border_radius);

  border: 1px solid var(--color_border);
}
#modal .checks .checks_container * {
  font-size: var(--fsz_section_item);
}

#modal .checks > .content {
  --padding: 5px;
  height: 100%;
  padding: var(--padding);
  border-radius: var(--border_radius);

  display: flex;
  flex-direction: column;
  gap: 3px;
}
#modal .checks .check_holder {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
#modal .checks .question_mark {
  z-index: var(z_index_question_modal);
}
#modal .checks.status_complete {
  --color_border: var(--color_accent_completed_general);
  --color_back: var(--color_accent_completed_general);
  --color_text: var(--color_accent_1);
}
#modal .checks.status_question .question_mark {
  opacity: 1;
  /* --color_border: var(--color_accent_question); */
}

#modal .checks * {
  color: var(--color_text);
}



/* NOTES */
#modal .notes {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  gap: 5px;

  position: relative;
}

#modal .notes .notes_top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#modal .notes textarea {
  width: 100%;
  flex-grow: 1;
}

#modal .notes .saver {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;

  /* position: absolute;
  bottom: 1rem;
  left: 5%;
  width: 90%; */

  /* background-color: ; */
}
#modal .notes .saver * {
  font-size: 1rem;
}


/* FOLDER */
#modal .folder {
  padding: 5px;
  border: 1px solid var(--color_accent_1)
}
#modal .folder.large {
  flex-grow: 1.5;
}
#modal .folder iframe {
  width: 100%;
  height: 100%;
}