:root {
  --max-width: 56%;
}

/* html {
  min-height: 100%;
} */

/*making footer appear at the bottom of blank pages & go it down at pages with a lot of content */
body {
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  max-height: fit-content;
  /*background-color: blueviolet;*/
  position: relative;
}

h3 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: 300;
  font-size: 2rem;
}

h5 {
  font-size: 1.1rem;
}

.my_footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: whitesmoke;
}

.mobile {
  width: 50rem;
}

.card_subject {
  display: inline-block;
  width: 20vw;
}

.card_menu {
  /*display: inline-block;*/
  width: 45rem;
  min-height: fit-content;
  max-height: fit-content;
}

.round_menu {
  display: inline;
  width: min-width;
}

iframe {
  aspect-ratio: 16/9;
}


@media(max-width: 575px) {
  body {
    font-size: 0.7rem;
    min-width: fit-content;
  }

  h3,
  h4,
  h5 {
    font-size: 1rem;
    font-weight: 0;
  }

  .mobile {
    width: 20rem;
  }

  .mobile button {
    margin-top: 0.2rem;
    width: 30rem;
  }

  .mobile .btn {
    margin: 0.2rem;
    width: 20rem;
  }

  .card_subject {
    display: block;
    width: 98vw;
  }

  .card_menu {
    margin-top: 2vh;
    display: block;
    width: 98vw;
  }
}

.menu_font {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.rating {
  /* overflow: hidden; */
  transform: translate(-50%, -50%) rotateY(180deg);
  /* display: flex; */
  /* vertical-align: bottom;
    display: inline-block; */
  /* width: 155px;
    height: 30px; */
}

.section_1 {
  background-color: rgb(245, 244, 244);
  padding: 10px;
  border-style: solid;
  border-width: 0.1rem;
  border-color: grey;
}

.section_1:hover {
  background-color: lightgrey;
  font-size: 1.1rem;
  cursor: grab;

}

#a_id_section {
  display: block;
  color: black;
}

#a_id_section:hover {
  text-decoration: none;
  /* text-decoration: underline; */
  /* text-decoration: line-through; */
  color: black;
  font-weight: 900;

}

#lecture:hover {
  background-color: lightgrey;

}

#a_id {
  display: block;
  color: blue;
  font-style: italic;

}

#a_id:hover {
  text-decoration: none;
  color: blue;
  /* font-size: 1.1rem; */
  font-weight: bold;

}

/* #img_fit{ */
/* height: 10rem; */
/* object-fit: cover; */
/* object-fit: none; */
/* object-fit: scale-down; */
/* object-fit: contain; */
/* object-fit: fill; */
/* } */

.img_scale:hover {
  /* opacity: 2; */
  transform: scale(1.1);
  z-index: 1;
}

.nav-link {
  padding: 0%;
}

#box {
  padding: 1rem;
  border-style: dashed;
  border-color: grey;
}

.box {
  border: 1px solid grey;
  /*background-color: blue;*/
}

.box.dragging {
  background-color: yellow;
}

.draggable_lecture:hover {
  cursor: grab;
  background-color: blanchedalmond;
  box-shadow: 0 0 10px 2px;
}

.draggable_lecture.dragging {
  background-color: blanchedalmond;
  box-shadow: 0 0 10px 2px;
}

.draggable_section.draggingSection {
  background-color: aquamarine;
}

.section_box {
  border: 1px solid;
  border-radius: 1rem;
  border-color: black;
  height: fit-content;
  width: 70rem;
  box-shadow: 0 0 10px 2px;
}

.lecture_box {
  padding: 2rem;
  margin: auto;
  /* display: block; */
  position: absolute;
  top: 3Vh;
  left: 10vw;
  border-radius: 0.5%;
  /* position: absolute; */
  width: 80vw;
  height: fit-;
  background-color: white;
  /* overflow-y: scroll; */
  /* overflow-y: auto; */
}

.editLectureBox {
  display: block;
  /*position: absolute;
    /*border: 1px solid;*/
  /*border-color: #aaaaaa;*/
  padding: 5rem;
  ;
  border-radius: 1rem;
  top: 30vh;
  left: 35rem;
  background-color: white;
  height: fit-content;
  padding: 1rem;
  box-shadow: 0 0 10px 2px;
}

.createLectureBox {
  display: block;
  /*position: absolute;*/
  /*border: 1px solid;*/
  /*border-color: #aaaaaa;*/
  border-radius: 5px;
  top: 30vh;
  left: 35rem;
  /*background-color: whitesmoke;*/
  height: fit-content;
  padding: 1rem;
  box-shadow: 0 0 10px 2px;
}

/*=======================================*/
.popUpEditQuiz {
  display: none;
}

.popUpEditQuiz.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  left: 2rem;
  top: -1rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}

/*===============================================*/


.popUp {
  display: none;
}

.popUp.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  left: 2rem;
  top: -1rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}

.popUpSectionPage {
  display: none;
}

.popUpSectionPage.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  top: -1.5rem;
  left: 2rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}

.popUpDeleteSection {
  display: none;
}

.popUpDeleteSection.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  top: -2rem;
  left: 1rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}


.popUpEditLecture {
  display: none
}

.popUpEditLecture.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  top: -3rem;
  left: 3.5rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}

.popUpAddLecture {
  display: none
}

.popUpAddLecture.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  top: -3rem;
  left: 6rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}

.popUpCreateSection {
  display: none;
}

.popUpCreateSection.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  top: 3rem;
  left: 2.5rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}

.popUpEditSection {
  display: none;
}

.popUpEditSection.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  top: -3rem;
  left: 3rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}


/* ============================================== */
.createSection {
  display: none;
}

.createSection.openModal {
  display: block;
}

.createSectionBox {
  display: block;
  position: absolute;
  /*border: 1px solid;*/
  /*border-color: #aaaaaa;*/
  border-radius: 1rem;
  top: 30vh;
  left: 35rem;
  background-color: white;
  height: fit-content;
  width: 50rem;
  padding: 2rem;
  box-shadow: 0 0 10px 2px;
}

.editSection {
  display: none;
}

.editSection.openModal {
  display: block;
}

/* ============================================ */
#lectureModal {
  display: none;
}

#lectureModal.openModal {
  display: block;
}

/*=========================================*/
.hint {
  display: none;
}

.hint.openModal {
  display: block;
  /*background-color: whitesmoke;*/
  background-color: blanchedalmond;
  /* border-width: 3px;
  border-style:solid;
  border-color: red; */
  border: 2px solid blanchedalmond;
  border-radius: 10px;
  color: blue;
  padding: 0.5rem;
  height: 12vh;
  width: 20vw;
  z-index: 1;
  position: absolute;
  left: 4rem;
  bottom: 3rem;
}


.my_alert {
  display: none;
}

.my_alert.openModal {
  display: block;
  /*background-color: whitesmoke;*/
  background-color: blanchedalmond;
  /* border-width: 3px;
  border-style:solid;
  border-color: red; */
  border: 2px solid blanchedalmond;
  border-radius: 10px;
  color: blue;
  padding: 0.5rem;
  height: fit-content;
  width: fit-content;
  z-index: 1;
  position: absolute;
  left: 4rem;
  bottom: 3rem;
}

/*=======================Lecture Note Modal==============================*/
.create_lecture {
  display: inline;
  border: solid 3px lightgrey;
  border-radius: 10px;
}

/*.create_lecture:hover {
    background-color: #aaaaaa;
    color: white;
}*/

.lecture_note {
  display: none;
}

.lecture_note.openModal {
  display: block;
  background-color: blanchedalmond;
  border: 2px solid blanchedalmond;
  border-radius: 10px;
  color: blue;
  padding: 0.5rem;
  position: absolute;
  height: fit-content;
  width: fit-content;
  padding: 1rem;
  left: 12rem;
  top: -7rem;
  z-index: 1;
}

.lib_box {
  display: block;
  position: absolute;
  border: 1px solid;
  border-color: #aaaaaa;
  border-radius: 1%;
  top: 30vh;
  left: 35rem;
  background-color: whitesmoke;
  height: fit-content;
  width: 40rem;
}

/*============================================*/
.fileUploadModule {
  display: none;
}

.fileUploadModule.openModal {
  display: block;
  background-color: whitesmoke;
  border: 1px solid lightgrey;
  border-radius: 10px;
  padding: 0.5rem;
  position: absolute;
  height: fit-content;
  width: fit-content;
  padding: 1rem;
  left: 12rem;
  top: 10rem;
  z-index: 1;
  opacity: 1;
}

/*========================================*/
.fileLibraryModule {
  display: none;
}

.fileLibraryModule.openModal {
  display: block;
  background-color: whitesmoke;
  border: 1px solid lightgrey;
  border-radius: 10px;
  padding: 0.5rem;
  position: absolute;
  height: fit-content;
  width: fit-content;
  padding: 1rem;
  left: 12rem;
  top: 10rem;
  z-index: 1;
  opacity: 1;
}



/*=======================================*/
.editQuizQuestionModule {
  display: none;
}

.editQuizQuestionModule.openModal {
  display: block;
}

/*=======================================*/
.show_quiz_box {
  display: block;
  position: absolute;
  /*border: 1px solid;*/
  /*border-color: #aaaaaa;*/
  border-radius: 1rem;
  top: 20vh;
  left: 15rem;
  background-color: whitesmoke;
  height: fit-content;
  width: 50rem;
  padding: 1rem;
  box-shadow: 0 0 10px 2px;
  z-index: 1;
  opacity: 1;
}


/*=============================================*/
.fileLibUploadModule {
  display: none;
}

.fileLibUploadModule.openModal {
  display: block;
  background-color: whitesmoke;
  border: 1px solid lightgrey;
  border-radius: 10px;
  padding: 0.5rem;
  position: absolute;
  height: fit-content;
  width: fit-content;
  padding: 1rem;
  left: 12rem;
  top: 10rem;
  z-index: 1;
  opacity: 1;
}

/*=====================================*/
.videoFileModule {
  display: none;
}

.videoFileModule.openModal {
  display: block;

}

.file_box {
  display: block;
  position: absolute;
  /*border: 1px solid;*/
  /*border-color: #aaaaaa;*/
  border-radius: 1rem;
  top: 20vh;
  left: 35rem;
  background-color: whitesmoke;
  height: fit-content;
  width: 50rem;
  padding: 1rem;
  box-shadow: 0 0 10px 2px;
}

/*========================================*/
.popUpLecture {
  display: none;
}

.popUpLecture.openModal {
  display: block;
  padding: 0.1rem;
  position: absolute;
  left: 2rem;
  top: -1rem;
  height: fit-content;
  width: fit-content;
  border: solid 1px black;
  background-color: white;
  z-index: 1;
  font-size: small;
  box-shadow: 0 0 10px 2px;
}

/*=====================================*/
.editSectionTitle {
  display: none;
}

.editSectionTitle.openModal {
  display: block;
}


/*================================*/
.textFileModule {
  display: none;
}

.textFileModule.openModal {
  display: block;
}

/*===========================================*/
.urlModule {
  display: none;
}

.urlModule.openModal {
  display: block;
}

/*===============================================*/
.quiz_box {
  display: block;
  /*border: 1px solid;*/
  /*border-color: #aaaaaa;*/
  border-radius: 1rem;
  height: fit-content;
  /* width: fit-content;*/
  background-color: white;
  padding: 2rem;
  box-shadow: 0 0 10px 2px;
}

.quizEditBox {
  display: block;
  position: absolute;
  border-radius: 1rem;
  top: 30vh;
  left: 35rem;
  background-color: white;
  height: fit-content;
  width: 50rem;
  padding: 2rem;
  box-shadow: 0 0 10px 2px;
}

/*==========================================================*/
.subject_box {
  /*background-color: #aaaaaa;*/
  /*border: solid 1px blue;*/
  border-radius: 5px;
  height: fit-content;
  width: 20rem;
  box-shadow: 0 0 10px 2px;
}

.subject_box_bar {
  display: flex;
  border-bottom: 1px solid grey;
  height: 5rem;
}

.subject_box_bar:hover {
  background-color: whitesmoke;
  border-bottom: 1px solid grey;
  height: 5rem;
  box-shadow: 0 0 10px 2px;
}

/*=====================================================*/

#openSectionModal {
  display: none;
}

#openSectionModal.openModal {
  border-radius: 5px;
  border-color: grey;
  border-width: 2pc;
  display: block;
  position: absolute;
  bottom: 10px;
  left: 200px;
  width: 300px;
  height: 200px;
  background-color: grey;
}

#sections {
  position: relative;
}


/*===========================================*/



/*========================================*/
.lecture_string {
  display: inline;
  border: solid 3px lightgrey;
  border-radius: 10px;
}



.hide {
  /* display: block; */
  /* display: none; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /*overflow-y: scroll;*/
  opacity: 100%;
  /* visibility: visible;
  visibility: hidden;*/
  z-index: 1;
}

.blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  /*overflow-y: scroll;*/
  opacity: 100%;
  /* visibility: visible;
  visibility: hidden;*/
  z-index: 2;
}

.video_library {
  background-color: grey;
  margin-top: 2px;
  border-radius: 5px;
  border-color: grey;
  border-width: 2px;
}

form_wrapper.hidden {
  display: hidden;
}

.d-1 {
  cursor: all-scroll;
  border-radius: 10px;
  border: solid;
  border-color: blue;
  min-width: 3rem;
  width: fit-content;
  margin: 1px;
  padding: 2px;
}

.d-1:hover {
  background-color: #aaaaaa;
  color: white;
}

.d-1-hidden {
  display: none
}

.d-2 {
  cursor: all-scroll;
  border-radius: 10px;
  border: solid;
  border-color: blue;
  min-width: 3rem;
  width: fit-content;
  margin: 1px;
  padding: 2px;
}

.d-2:hover {
  background-color: #aaaaaa;
  color: white;
}

.hovered {
  background-color: grey;
  border: solid;
  border-color: blue;
}


.file_title {
  overflow-x: auto;
}


.draggable-list li.over .draggable {
  background-color: #eaeaea;
}

.invisible {
  cursor: grab;
}

.closeCross:hover {
  border: solid 1px black;
  border-radius: 0.5rem;
  background-color: lightgray;
  width: fit-content;
  height: fit-content;
  cursor: auto;
  box-shadow: 0 0 10px 2px;
}

/*==========================Rating Stars Module======================*/
.rating>input {
  display: none;
  /* opacity: 1; */
}

.rating label {
  /*display: inline;*/
  cursor: pointer;
  width: 30px;
  padding-left: 1rem;
  position: relative;
  right: 4rem;
  /*background: #ccc;*/
}

.rating label::before {
  content: '\f005';
  font-family: 'Font Awesome 5 free';
  /* font-weight: 900; */
  position: relative;
  /* position: absolute; */

  /* display: block; */
  font-size: 20px;
  color: grey;
}

.rating label::after {
  content: '\f005';
  font-family: 'Font Awesome 5 free';
  font-weight: 900;
  position: absolute;
  /* position: relative; */
  display: block;
  font-size: 20px;
  color: yellow;
  top: 0;
  opacity: 0;
  transition: .5s;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

.rating label:hover:after,
.rating input:hover~label:after,
.rating input:checked~label:after {
  opacity: 1;
}

.stars-outer {
  position: relative;
  display: inline-block;
}

.stars-inner {
  position: absolute;
  top: 0;
  /* left: 0; */
  white-space: nowrap;
  overflow: hidden;
  /*color: yellow;*/
  /* width: var(--max-width);*/
}

.stars-outer::before {
  content: '\f005 \f005 \f005 \f005 \f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200;
  color: grey;
  font-size: 20px;
}

.stars-inner::before {
  content: '\f005 \f005 \f005 \f005 \f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: yellow;
  font-size: 20px;
}

/*===================End of Rating Stars Module=========================*/



/* ==========================VideoPlayer=========================== */
/* :root {
  --primary-color: grey;
  --font-color: white;
} */
.fas {
  /* color: var(--font-color); */
  font-size: 25px;
  color: black;
}


/* .player {
  max-width: 80vw;
  min-width: 800px;
  border: 5px solid black;
  border-radius: 10px;
  background: black;
  position: relative;
  cursor: pointer;
} */

video_1 {
  border-radius: 5px;
}

/* Containers */
.show-controls:hover .controls-container {
  opacity: 1;
  transition: all 0.1s ease-out;
}

.show-controls {
  width: 100%;
  height: 5%;
  /* background: dodgerblue; */
  border-color: rgb(253, 252, 252);
  z-index: 2;
  position: absolute;
  bottom: 0;
  cursor: default;
}

.controls-container {
  position: bottomp;
  bottom: -5px;
  width: 100%;
  height: 90px;
  margin-top: -95px;
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: all 0.5s ease-out 0.5s;

}

/* Progress Bar */
.progress-range {
  height: 8px;
  width: 95%;
  /* width: calc (100% - 100px); */
  /* background:rgba(255, 255, 255, 0.5) */
  background: grey;
  /* margin: auto; */
  border-radius: 10px;
  position: absolute;
  top: 5px;
  left: 15px;
  cursor: pointer;
  transition: height 0.1s ease-in-out;
}

.progress-range:hover {
  height: 12px;
}

.progress-bar {
  /* background: var(--primary-color); */
  background: white;
  width: 50%;
  height: 100%;
  border-radius: 10px;
  /* transition: all 0.5s ease; */
  cursor: pointer;
}


.control-group {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.controls-left,
.controls-right {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  top: 40px;
}

/* Left Controls -------------------------- */
.controls-left {
  justify-content: flex-start;
  margin-left: 15px;
}

/* Play & Pause */
.play-controls {
  margin-right: 15px;
}

.fa-play:hover,
.fa-pause:hover {
  color: var(--primary-color);
  cursor: pointer;
}

/* Volume */
.volume-icon {
  cursor: pointer;
}

.volume-range {
  height: 8px;
  width: 100px;
  background: rgba(209, 209, 209, 0.5);
  border-radius: 10px;
  position: relative;
  top: -21px;
  left: 50px;
  cursor: pointer;
}

.volume-bar {
  /* background: var(--font-color); */
  background: white;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: width 0.2s ease-in;
}

.volume-bar:hover {
  background: var(--primary-color);
}

/* Right Controls ---------------------------- */
.controls-right {
  justify-content: flex-end;
  margin-right: 15px;
}

.speed {
  position: relative;
  top: 10px;
}

.time {
  position: relative;
  top: 10px;
  color: white;
}

/* Playback Speed */
.speed {
  margin-right: 15px;
}

select {
  /* background: transparent; */
  /* color: var(--font-color); */
  color: black;
  border: none;
  font-size: 18px;
  position: relative;
  top: -2.5px;
  border-radius: 5px;
}

select>option {
  /* background: (0, 0, 0, 0.9); */
  background: rgb(255, 254, 254);
  border: none;
  font-size: 14px;
}

/* Elapsed Time & Duration */
.time {
  margin-right: 15px;
  color: var(--font-color);
  /* color: white; */
  font-weight: bold;
  user-select: none;
}

/* Fullscreen */
.fullscreen {
  cursor: pointer;
}

.video-fullscreen {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* Subtitle */
/*::cue {
  font-size: 20px;
  font-family: Georgia, serif;
  color: blue;
  background-position: right;
  opacity: 1;
}*/

/* Media Query: Large Smartphone (Vertical) */
@media screen and (max-width: 600px) {

  .fas {
    font-size: 20px;
  }

  .controls-container {
    height: 50px;
  }

  .control-group {
    position: relative;
    top: -25px;
  }

  /* Progress Bar */
  .progress-range {
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 0;
  }

  .progress-bar {
    border-radius: 0;
  }

  /* Volume Bar */
  .volume-range {
    width: 50px;
    left: 30px;
    top: -15px;
  }

  .speed,
  .time {
    top: 3px;
  }

  select {
    font-size: 12px;
  }

  .time {
    font-size: 12px;
  }
}

/* Media Query: Large Smartphone (Horizontal) */
/* @media screen and (max-width: 900px) and (max-height: 500px) {
  .player {
    max-height: 95vh;
    max-width: auto;
  }
  video {
    height: 95vh;
    object-fit: cover;
  }
  .video-fullscreen {
    height: 97.5vh;
    border-radius: 0;
  }
} */


/* .video-js {
  width: 50%; 
  height: 50%
} */


/* html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}
#content {
  height: 100%;
} */

/* 
#left {
  float: left;
  width: 70%;
  /* background: red; */
/* height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.5em;
} */

.my {
  max-width: 80vw;
  min-width: 800px;
  border: 5px solid black;
  border-radius: 10px;
  background: blue;
  /* position: relative; */
  cursor: pointer;
}

#video {
  max-width: 80vw;
  min-width: 800px;
  border: 1px solid lightgray;
  border-radius: 3px;
  /* background: black; */
  /* position: relative; */
  /* cursor: pointer; */

}

#scroll_col {
  /* float: left; */
  width: 100%;
  /* background-color: blue; */
  height: 600px;
  overflow: auto;
  /* overflow: scroll; */
  /* overflow: hidden; */
  /* box-sizing: border-box; */
}