/**/
/**/
/**/
/**/
/**/
/* MENU ITEM TITEL */
/* Opmaak van de sub_titles die tussen de onderdelen in staan. */
.zyanthos_menu_item_explanation {
  margin-top: clamp(5px, 3%, 4%);
  margin-bottom: clamp(5px, 1%, 2%);
  margin-left: clamp(5px, 5%, 5%);
  margin-right: clamp(5px, 5%, 5%);

  font-size: 80%;
}

/**/
/**/
/**/
/**/
/**/
/**/
/**/
.item_container {
  margin-left: clamp(2%, 5%, 5%);
  margin-right: clamp(1%, 5%, 5%);
}
.item_box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.button_box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/**/
/**/
/**/
/**/
/**/
/* WERKBLAD TITEL*/
/* Voor hier de titel van het werkblad in. */
.content_menu_input_title {
  pointer-events: all;
  cursor: pointer;
  background-color: #f0eca2;
  border: solid 1px #000000;

  width: calc(100% - 16px);
  padding-left: clamp(3px, 2%, 3%);
  font-size: clamp(1.5vh, 1.5vw, 1rem);
}

/**/
/**/
/**/
/**/
/**/
/* SELECTEER WOORDENLIJST */
/* Selecteer de woordenlijst en zet deze in een array. */
.item_word_selector {
  pointer-events: all;
  background-color: #c1c1c1;
  border: solid 1px #000000;
  border-radius: 5px;

  width: 100%;
  height: clamp(15px, 4vh, 40px);
  margin-bottom: clamp(3px, 2%, 10px);
  padding-left: clamp(3px, 2%, 3%);
  font-size: clamp(1.5vh, 1.5vw, 1rem);
}
.item_word_selector_01.active {
  pointer-events: all;
  background-color: #f0eca2;
  border: solid 1px #000000;
}
.item_word_selector_02.active {
  pointer-events: all;
  background-color: #f0eca2;
  border: solid 1px #000000;
}
.item_word_selector_03.active {
  pointer-events: all;
  background-color: #f0eca2;
  border: solid 1px #000000;
}

/**/
/**/
/**/
/**/
/**/
/* SELECTEER HOEVEELHEID WOORDEN */
/* Selecteer hoeveell woorden er geflitst moeten worden. */
.item_timer_selector {
  pointer-events: none;
  background-color: #c1c1c1;
  border: solid 1px #000000;
  border-radius: 5px;

  width: 100%;
  height: clamp(15px, 4vh, 40px);
  margin-bottom: clamp(3px, 2%, 10px);
  padding-left: clamp(3px, 2%, 3%);
  font-size: clamp(10px, 3vh, 100%);
}
.item_timer_selector.active {
  pointer-events: all;
  background-color: #f0eca2;
  border: solid 1px #000000;
}
.item_timer_slider_text {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin: 0 50px 0;
  font-size: 60%;
}
.item_timer_slider_box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.item_timer_slider {
  pointer-events: all;
  cursor: pointer;
  width: 100%;
}

/**/
/**/
/**/
/**/
/**/
/* BASIC BUTTON */
/* Dit is de standaard opmaak van alle knoppen in het menu. */
.menu_button {
  border-radius: 5px;
  width: 100%;
  height: clamp(25px, 4vh, 50px);
  margin-bottom: clamp(10px, 2%, 3%);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.btn_shuffle_de_woorden {
  pointer-events: none;
  background-color: #c1c1c1;
  border: solid 1px #000000;
  border-radius: 5px;
  margin-top: 1%;
}
.btn_shuffle_de_woorden.active {
  pointer-events: all;
  cursor: pointer;
  background-color: #6cf795;
  border: solid 1px #000000;
}

/**/
.btn_word_timer_start {
  pointer-events: none;
  background-color: #c1c1c1;
  border: solid 1px #000000;
  border-radius: 5px;
}
.btn_word_timer_start.active {
  pointer-events: all;
  cursor: pointer;
  background-color: #6cf795;
  border: solid 1px #000000;
}
.btn_word_timer_pause {
  display: none;
  pointer-events: all;
  cursor: pointer;
  background-color: #6cf795;
  border: solid 1px #000000;
}
.btn_word_timer_continue {
  display: none;
  pointer-events: all;
  cursor: pointer;
  background-color: #6cf795;
  border: solid 1px #000000;
}

/**/
.btn_generate_wordlist {
  pointer-events: none;
  background-color: #c1c1c1;
  border: solid 1px #000000;
  border-radius: 5px;
}
.btn_generate_wordlist.active {
  pointer-events: all;
  cursor: pointer;
  background-color: #6cf795;
  border: solid 1px #000000;
}

/**/
.btn_download_wordlist {
  pointer-events: none;
  background-color: #c1c1c1;
  border: solid 1px #000000;
  border-radius: 5px;
}
.btn_download_wordlist.active {
  pointer-events: all;
  cursor: pointer;
  background-color: #6cf795;
  border: solid 1px #000000;
}

/**/
.btn_generate_wordlist1 {
  pointer-events: none;
  background-color: #c1c1c1;
  border: solid 1px #000000;
  border-radius: 5px;
}
.btn_generate_wordlist1.active {
  pointer-events: all;
  cursor: pointer;
  background-color: #6cf795;
  border: solid 1px #000000;
}

@media screen and (max-width: 1251px) {
}