/*


█████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
█░░░░░░██████████░░░░░░█░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░██░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█
█░░▄▀░░░░░░░░░░░░░░▄▀░░█░░▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█
█░░▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀░░█░░░░▄▀░░░░█░░▄▀░░░░░░░░░░█░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░█░░▄▀░░░░░░░░░░█░░▄▀░░░░░░░░░░█
█░░▄▀░░░░░░▄▀░░░░░░▄▀░░███░░▄▀░░███░░▄▀░░█████████░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████░░▄▀░░█████████░░▄▀░░█████████
█░░▄▀░░██░░▄▀░░██░░▄▀░░███░░▄▀░░███░░▄▀░░░░░░░░░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░█████████░░▄▀░░░░░░░░░░█░░▄▀░░░░░░░░░░█
█░░▄▀░░██░░▄▀░░██░░▄▀░░███░░▄▀░░███░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░█████████░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█
█░░▄▀░░██░░░░░░██░░▄▀░░███░░▄▀░░███░░░░░░░░░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░█████████░░░░░░░░░░▄▀░░█░░░░░░░░░░▄▀░░█
█░░▄▀░░██████████░░▄▀░░███░░▄▀░░███████████░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████████████░░▄▀░░█████████░░▄▀░░█
█░░▄▀░░██████████░░▄▀░░█░░░░▄▀░░░░█░░░░░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░░░░░█░░░░░░░░░░▄▀░░█░░░░░░░░░░▄▀░░█
█░░▄▀░░██████████░░▄▀░░█░░▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█
█░░░░░░██████████░░░░░░█░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░██░░░░░░█░░░░░░██░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█
█████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
*/
/* * {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} */
@font-face {
  font-family: "Library";
  font-style: normal;
  font-weight: 400;
  /* Браузер сначала попробует найти шрифт локально */
  src:
    /* Если не получилось, загрузит woff2 */
    url("/fonts/Library3amsoft.woff2") format("woff2"),
    /* Если браузер не поддерживает woff2, загрузит woff */
    url("/fonts/Library3amsoft.woff") format("woff");
}

@font-face {
  font-family: "Bauhaus";
  font-weight: normal;
  font-style: normal;
  /* Браузер сначала попробует найти шрифт локально */
  src:
    /* Если не получилось, загрузит woff2 */
    url("/fonts/bauhaus.woff2") format("woff2"),

}

html,body{
  margin: 0 !important;
  padding: 0 !important;
}

.mathjjjax 
{
    font-family: initial;
    z-index: 0;
}

.master_div {
  display: flex;
  flex-direction: column;
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  min-height: 100vh;

}

.master_headerandbody {
  width: 100%;

}

.master_footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: monospace;
  min-height: 4em;
}
#fetchfeedback {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 5vw;
  right: 5vw;
  flex-direction: column;
  height: 1.5rem;
  background-color: #333333;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
  @media screen  and (max-width: 800px) {
    font-size: 14px;
  }

  @media screen and (min-width: 800px) {
    font-size: 14px;
  }

  color: rgb(253, 253, 253);
}
.theProblem_tableinside{
  @media screen and (max-width: 400px) {
    font-size: xx-small;
  }


  @media screen and (min-width:400px) and (max-width: 800px) {
    font-size: x-small;
  }

  @media screen and (min-width: 800px) {

  }
}

#logo_container {
  display: flex;
  /* font-family: "Bauhaus"; */
  font-family: monospace;
  user-select: none;
  cursor: pointer;
  color: var(--vscode-text);
  font-size: xx-large;
}
#logo_container a{
  color: var(--vscode-text);
}

#subject_choise_trigger{
  font-size: 16px;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
  color:#0088cc;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#subject_choise_options{
  @media screen and (max-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    background-color: white;
    position: fixed;
    top: 4rem;
    overflow-y: auto;
    /* transition: 0.3s; */
    box-shadow:2px 3px 5px #999;
    border-top: 1.5rem white solid;
    border-bottom: 1.5rem white solid;
    z-index: 2;
  }

  @media screen and (min-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
    /* border: #014e61 1px solid; */
    box-shadow:2px 3px 5px #999;
    border-top: 2rem white solid;
    border-bottom: 2rem white solid;
    background-color: white;
    position: fixed;
    top: 4rem;
    overflow-y: auto;
    z-index: 2;
    /* transition: 0.3s; */
    /* padding-top: 1rem;
    padding-bottom: 1rem; */
  }
}


.show_menu_subjectchoise {

  left: 7rem;
  /* transition: 0.3s; */

}

.hide_menu_subjectchoise {
  left: -100vw;
  /* transition: 0.3s; */
}

  
.subject_choise_option_row {
  display: flex;
  justify-items: start;
  align-items: center;
  width: 80%;
  gap: 0.5rem;
  border-bottom: #014e61 1px dotted;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  font-size: 1.5rem;
}



.subject_choise_option_row_notselected {
  opacity: 0.8;
}







.menu_container {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 35px; 
  margin-top: 15px; 
  /* background-color: #F3F3F3;
   */
  /* border-bottom: 1px solid #E5E5E5; */
}


#menu_refs_container {
  display: flex;
  font-family: monospace;
  justify-content: flex-end;
  gap: 20px;
  flex-grow: 1;
}

.menu_ref_item {
  font-size: 1.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #014e61;
  display: flex;
  justify-content: end;
}

#hamburger-button {
  /* display: none; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
}
.sidebar_menu_refrow {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: end;
  border-bottom: 1px dotted #014e61;
  min-width: 90%;

 
}
#hamburger-button #sidebar-menu {
  /* visibility: hidden; */
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  /* gap: 10px; */
  align-content: center;
  flex-wrap: wrap;
  position: fixed;
  top: 90px;
  left: -100vw;
  /* min-height: 50vh; */
  width: 90vw;
  background-color: rgb(255, 255, 255);
  /* padding: 0px 10px; */
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-sizing: border-box;
  border: #e8e8e8 1px solid;
  border-radius: 8px;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .10);
  justify-content: space-around;
  transition: 0.3s;
  z-index: 1;
}
#hamburger-input:checked + #hamburger-button #sidebar-menu {
  /* visibility: visible; */
  left: 5vw;
  top:90px;
  transition: 0.3s;
}




#hamburger-input {
  display: none;
}

.hamburger-button-top,
.hamburger-button-middle,
.hamburger-button-bottom {
  height: 7px;
  background: rgb(31, 29, 29);
  border-radius: 5px;
  margin: 3px 0px;

}






.landing_container {
 
  display: flex;
  flex-direction: row;
  width: 90vw;
  user-select: none;
  justify-content: center;
  align-items: center;
  text-align: left;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   color: rgb(44, 44, 43);
  @media screen and (max-width: 800px) {
    font-size:14px;
  }

  @media screen and (min-width: 800px) {
    font-size: 14px;
  }
  
  /* min-height: 50vh; */
  /* background-color: #2A2A2A; */
}

/* .generator_container {
  display: flex;
  flex-direction: row;
  gap: 50px;
}

.generator_type_controls {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  margin-bottom: 40px;
  flex-direction: row;
  gap: 25px;
  width: 300px;
  margin-right: 10px;
  border: #113192 solid;
}

.generator_small_items_row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-bottom: 15px;
}



.generator_container_left {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  margin-bottom: 40px;
  flex-direction: row;
  gap: 25px;
}

.generator_container_right {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 40px;
  flex-direction: column;
  gap: 7px;
  min-height: 400px;
}


.generator_task {
  display: flex;
  flex-direction:row;
  gap: 7px;
  align-items:flex-start;
}
.generator_task_title {
  display: flex;
  flex-direction:column;
  gap: 10px;
  align-items: end;
}
.generator_task_info_header {
}
.generator_task_info_footer {
}

.generator_small_items_container {
  flex-wrap: wrap;
  display: flex;
  width: 900px;
  gap:2px;
  justify-content: center;
}

.generator_item_small {
  display: flex;
  flex-direction: row;

  background: papayawhip;
  width: 15px;
  height: 15px;
  justify-content: center;
  align-items: center;
  color: #2A2A2A;
  border-radius: 50%;

}

.generator_item_small_break {
  display: flex;
  flex-direction: row;

  background: rgb(255, 255, 255);
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  color: #2A2A2A;

}



.generator_item {
  display: flex;
  flex-direction: row;

  background: #113192;
  width: 50px;
  height: 25px;
  justify-content: center;
  align-items: center;
  color: whitesmoke;

}

.generator_item_long {
  display: flex;
  flex-direction: row;

  background: #113192;
  width: 250px;
  height: 25px;
  justify-content: center;
  align-items: center;
  color: whitesmoke;

} */


.button {
  background-color: #7c817c;
  /* Green */
  border: none;
  color: white;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 0px;
  cursor: pointer;
  width: 1em;
  height: 1em;
}


a:link {
  text-decoration: none;
  color: #343d3f;
}


a:visited {
  color: #343d3f;
}

.status0 {
  background-color: #adb1bd;
  width: 75px;
}

.status1 {
  background-color: #ff4500;
  width: 75px;
}

.status2 {
  background-color: #1ce61c;
  width: 75px;
}


.generator_type_button {
  background-color: wheat;
  /* Green */
  border: none;
  color: #2A2A2A;
  width: 50px;
  height: 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;


}


/* /$$   /$$                               /$$$$$$$                      /$$$$$$  /$$ /$$          
| $$  | $$                              | $$__  $$                    /$$__  $$|__/| $$          
| $$  | $$  /$$$$$$$  /$$$$$$   /$$$$$$ | $$  \ $$ /$$$$$$   /$$$$$$ | $$  \__/ /$$| $$  /$$$$$$ 
| $$  | $$ /$$_____/ /$$__  $$ /$$__  $$| $$$$$$$//$$__  $$ /$$__  $$| $$$$    | $$| $$ /$$__  $$
| $$  | $$|  $$$$$$ | $$$$$$$$| $$  \__/| $$____/| $$  \__/| $$  \ $$| $$_/    | $$| $$| $$$$$$$$
| $$  | $$ \____  $$| $$_____/| $$      | $$     | $$      | $$  | $$| $$      | $$| $$| $$_____/
|  $$$$$$/ /$$$$$$$/|  $$$$$$$| $$      | $$     | $$      |  $$$$$$/| $$      | $$| $$|  $$$$$$$
 \______/ |_______/  \_______/|__/      |__/     |__/       \______/ |__/      |__/|__/ \_______/ */

 .user_profile_container {
  /* margin-left: 100px; */
  @media screen and (max-width: 800px) {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  @media screen and (min-width: 800px) {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  }
}






.user_logo {
}
.user_info_container {
  @media screen and (max-width: 800px) {
    display: flex;
    flex-direction: column;
    
    /* border-left: #2A2A2A solid 0.5px; */
  
    width: 90vw;
  }

  @media screen and (min-width: 800px) {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: white;
    border: 1px dotted var(--vscode-text);
    /* border-left: #2A2A2A solid 0.5px; */
    

  }
 
}

.user_info_divheader{
  font-family: monospace;
  font-size: 2rem;
}

.user_info_string{
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e8e8e8;
}

.user_info_column{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e8e8e8;
}

.user_info_column_label{
  display: flex;
  flex-direction: row;
  align-items: end;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.user_info_invited_by_row{
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 5px;
}
.user_info_invited_by_ava{
    width: 30px;
    height: 30px;
    overflow: hidden;
}
.user_info_invited_username{
font-family: monospace;
color: var(--warhol-blue);
font-weight: bold;
cursor: pointer;
user-select: none;
}



.user_info_string_label{
  display: flex;
  flex-direction: row;
  align-items: end;
  color:#343d3f;
  flex:3;
}

.user_info_string_content{
  /* background: yellow; */
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: end;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  flex: 7;
}

.user_info_string_statusinfo{
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 10px;

}

.editable_input {
  border:0;
  outline:0; 
  width:100%; 
  text-align: right;
  font-family: monospace;
  font-size: 16px;
  color:#0088cc;

}



.user_connections {
  display: flex;
  flex-direction: column;
  flex: 1;
  
  /* border-left: #2A2A2A solid 0.5px; */
  gap: 10px;
}

.user_connections_divheader{
  font-family: monospace;
  font-size: 2rem;
}

.user_connections_string {
  display: flex;
  flex-direction: row;
  gap: 5px;
  border-bottom: 1px solid #e8e8e8; 
}

.user_connections_string_name{
  display: flex;
  flex-direction: row;
  flex: 5;
  font-size: 1rem;
  font-family: monospace;
  align-items: center;
  


}
.user_connections_string_status {
  display: flex;
  flex-direction: row;
  flex: 3;
  align-items: center;
  color:#343d3f;
  font-size: 0.7rem;

}
.user_connections_string_controls{
  display: flex;
  flex-direction: row;
  flex: 2;
  justify-content: end;
  gap: 0.7rem;
  align-items: center;
}

.user_connections_invitestring {
  display: flex;
  flex-direction: row;
}

/* .user_connections_invitestring_label{
  display: flex;
  flex-direction: row;
  align-items: center;
  color:#343d3f;
  flex:3;
}
 */
.user_connections_invitestring_inputandsend{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 10px;

  flex:7;
}
.user_connection_invitestring_subjectchoise_trigger {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-family: monospace;
  font-size: 1.5rem;
  font-weight: 900;
  color: #2b7485;
  user-select: none;
  cursor: pointer;
  border-bottom: #014e61 1px dotted;
  position: relative;
  /* z-index: -1; */
}

#menu_studentInvite_subjectOptions,#menu_teacherInvite_subjectOptions {
  @media screen and (max-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background-color: white;
    position: absolute;
    top: 2rem;
    width: 8rem;

    box-shadow:2px 3px 5px #999;
    border-top: 1.2rem white solid;
    border-bottom: 1.2rem white solid;
  }

  @media screen and (min-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 8rem;
    /* border: #014e61 1px solid; */
    box-shadow:2px 3px 5px #999;
    border-top: 2rem white solid;
    border-bottom: 2rem white solid;
    background-color: white;
    position: absolute;
    top: 2rem;
    gap: 0.5rem;


    border-top: 1.2rem white solid;
    border-bottom: 1.2rem white solid;
  }
  


}

.menu_studentInvite_subjectOption,.menu_teacherInvite_subjectOption {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* width: 80%; */
  border-bottom: #014e61 1px dotted;
  cursor: pointer;
  user-select: none;


}

.user_connections_invitesendfeedback{

}

.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  height: 1.5rem;

  cursor: pointer;
}

  /* ACTION */
  .action {
    border: 1px dotted #0088cc;


    color: #0088cc;
    transition-duration: 300ms;
    
  }
  
  .action:hover {
    background-color: #0088cc;
    border: 1px dotted  white;
    color: white;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .10); 
    transition-duration: 300ms;
  }

/* Green */
.success {
  border-color: #04AA6D;
  color: green;
  transition-duration: 300ms;
}

.success:hover {
  background-color: #04AA6D;
  color: white;
  transition-duration: 300ms;
}

/* Blue */
.info {
  border-color: #2196F3;
  color: dodgerblue
  transition-duration: 300ms;
}

.info:hover {
  background: #2196F3;
  color: white;
  transition-duration: 300ms;
}

/* Orange */
.warning {
  border-color: #ff9800;
  color: orange;
  transition-duration: 300ms;
}

.warning:hover {
  background: #ff9800;
  color: white;
  transition-duration: 300ms;
}

/* Red */
.danger {
  border-color: #f44336;
  color: red
  transition-duration: 300ms;
}

.danger:hover {
  background: #f44336;
  color: white;
  transition-duration: 300ms;
}

/* Gray */
.default {
  border-color: #e7e7e7;
  color: black;
  transition-duration: 300ms;
}

.default:hover {
  background: #e7e7e7;
  transition-duration: 300ms;
}


.hide_4s {
  opacity: 0.0;
  transition-duration: 4s;
}

.hide_3s {
  opacity: 0.0;
  transition-duration: 3s;
}



.hide_2s {
  opacity: 0.0;
  transition-duration: 2s;
}






 







/*МЕНЮ ДЛЯ ВЫБОРА КУДА ПОСТУПАТЬ*/

#menu_programs_trigger {

  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: end;
  font-family: monospace;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  transition: 0.5s;
  text-align: right;
  height: 100%;
  color: #0088cc;


}
#menu_programs_options {
  @media screen and (max-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    height: 70vh;
    background-color: white;
    position: fixed;
    top: 10vh;
    overflow-y: auto;
    transition: 0.3s;
    box-shadow:2px 3px 5px #999;
    border-top: 1.5rem white solid;
    border-bottom: 1.5rem white solid;
  }

  @media screen and (min-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
    height: 80vh;
    /* border: #014e61 1px solid; */
    box-shadow:2px 3px 5px #999;
    border-top: 2rem white solid;
    border-bottom: 2rem white solid;
    background-color: white;
    position: fixed;
    top: 10vh;
    overflow-y: auto;
    transition: 0.3s;
    /* padding-top: 1rem;
    padding-bottom: 1rem; */
  }
  


}



.menu_programs_option {
  display: flex;
  flex-direction: column;
  width: 80%;
  border-bottom: #014e61 1px dotted;
  cursor: pointer;
  user-select: none;

}
.program_selected {
  background-color: rgba(28, 230, 28, 0.5) ;
}

.menu_programs_option:hover {
  background-color: rgba(28, 230, 28, 0.3) ;
}

.menu_programs_option:active {
  background-color: rgba(28, 230, 28, 1) ;
}

.menu_programs_option_header {
  display: flex;
  flex-direction: row;
  align-items: end;
  font-family: monospace;
  font-size: 1rem;
  font-weight: 900;
  padding-top: 5px;
}
.menu_programs_option_educationalprogram {
  display: flex;
  flex-direction: row;
  align-items: end;
  font-family: monospace;
  font-size: 0.5rem;
  color:#adb1bd;
}
.menu_programs_option_cathedra {
  display: flex;
  flex-direction: row;
  align-items: end;
  font-family: monospace;
  font-size: 0.5rem;
  color: #232525;
}
.menu_programs_option_entrancerequirements {
  display: flex;
  flex-direction: row;
  align-items: end;
  font-family: monospace;
  font-size: 0.7rem;
  color: #2b7485;
  padding-bottom: 5px;
}


.show_menu {

  left: 5vw;
  transition: 0.3s;

}

.hide_menu {
  left: -1000vw;
  transition: 0.3s;
}



.show_menu_filt {

  left: 0vw;
  transition: 0.3s;

}

.hide_menu_filt {
  left: -100vw;
  transition: 0.3s;
}

.show_invite_subjectoptions {

  left: 0vw;
  /* transition: 0.3s; */

}

.hide_invite_subjectoptions {
  left: -100vw;
  /* transition: 0.3s; */
}


/*

███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░░░███░░░░░░░░░░░░░░█░░░░░░░░░░░░███░░░░░░██░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░██████████░░░░░░█░░░░░░░░░░░░███░░░░░░░░░░░░░░░░███░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█
█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀▄▀░░███░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░░░░░░░░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀▄▀▄▀▄▀▄▀▄▀░░███░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█
█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░▄▀░░███░░▄▀░░░░░░▄▀░░█░░▄▀░░░░▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░░░░░█░░░░░░▄▀░░░░░░█░░░░▄▀░░░░█░░▄▀░░░░░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░██░░▄▀░░█░░▄▀░░░░▄▀▄▀░░█░░▄▀░░░░░░░░▄▀░░███░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░█
█░░▄▀░░██░░▄▀░░█░░▄▀░░████░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████████░░▄▀░░███████░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░████░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░█████████
█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████████░░▄▀░░███████░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░░░▄▀░░███░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░█
█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████████░░▄▀░░███████░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀▄▀▄▀▄▀▄▀▄▀░░███░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█
█░░▄▀░░░░░░░░░░█░░▄▀░░░░░░▄▀░░░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████████░░▄▀░░███████░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░░░░░▄▀░░░░███░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░█
█░░▄▀░░█████████░░▄▀░░██░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████████░░▄▀░░███████░░▄▀░░███░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░██░░▄▀░░█████░░▄▀░░██░░▄▀░░█░░▄▀░░█████████
█░░▄▀░░█████████░░▄▀░░██░░▄▀░░░░░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░▄▀▄▀░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░░░░░░░░░█████░░▄▀░░█████░░░░▄▀░░░░█░░▄▀░░░░░░▄▀░░█░░▄▀░░██░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░░░▄▀▄▀░░█░░▄▀░░██░░▄▀░░░░░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████
█░░▄▀░░█████████░░▄▀░░██░░▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█████░░▄▀░░█████░░▄▀▄▀▄▀░░█░░▄▀▄▀▄▀▄▀▄▀░░█░░▄▀░░██░░░░░░░░░░▄▀░░█░░▄▀▄▀▄▀▄▀░░░░█░░▄▀░░██░░▄▀▄▀▄▀░░█░░▄▀░░██░░▄▀░░█░░▄▀░░█████████
█░░░░░░█████████░░░░░░██░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░░░░░░░███░░░░░░░░░░░░░░█░░░░░░░░░░░░░░█████░░░░░░█████░░░░░░░░░░█░░░░░░░░░░░░░░█░░░░░░██████████░░░░░░█░░░░░░░░░░░░███░░░░░░██░░░░░░░░░░█░░░░░░██░░░░░░█░░░░░░█████████
███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
*/
/*
$$$$$$$$\  $$$$$$\   $$$$$$\  $$\   $$\             $$\  $$$$$$\  $$$$$$\ $$\   $$\  $$$$$$\  $$\       $$$$$$$$\       $$\ 
\__$$  __|$$  __$$\ $$  __$$\ $$ | $$  |           $$  |$$  __$$\ \_$$  _|$$$\  $$ |$$  __$$\ $$ |      $$  _____|     $$  |
 $$ |   $$ /  $$ |$$ /  \__|$$ |$$  /           $$  / $$ /  \__|  $$ |  $$$$\ $$ |$$ /  \__|$$ |      $$ |          $$  / 
 $$ |   $$$$$$$$ |\$$$$$$\  $$$$$  /           $$  /  \$$$$$$\    $$ |  $$ $$\$$ |$$ |$$$$\ $$ |      $$$$$\       $$  /  
 $$ |   $$  __$$ | \____$$\ $$  $$<           $$  /    \____$$\   $$ |  $$ \$$$$ |$$ |\_$$ |$$ |      $$  __|     $$  /   
 $$ |   $$ |  $$ |$$\   $$ |$$ |\$$\         $$  /    $$\   $$ |  $$ |  $$ |\$$$ |$$ |  $$ |$$ |      $$ |       $$  /    
 $$ |   $$ |  $$ |\$$$$$$  |$$ | \$$\       $$  /     \$$$$$$  |$$$$$$\ $$ | \$$ |\$$$$$$  |$$$$$$$$\ $$$$$$$$\ $$  /     
 \__|   \__|  \__| \______/ \__|  \__|      \__/       \______/ \______|\__|  \__| \______/ \________|\________|\__/      
                                                                                                                          
                                                                                                                         

*/


.task_container {
  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: column;
  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: column;

  }    
}

.task_navigation_container {
  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: column;
      gap: 2px;
  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: column;
      gap: 2px
  }  
}


.task_navigation_taskinfo_container {
  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: row;
      gap: 10px;
  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: row;
  } 

}

.task_navigation_taskinfo_taskname {
  display: flex; 
  flex: 1;
  flex-direction: column;
  justify-content: center;
  font-size: 2.5em; 
  font-family:monospace;
}
.task_navigation_taskinfo_creationinfo {
  display: flex; 
  flex:4;
  flex-direction: column;
  justify-content: center;
  font-size:smaller; 
  font-family:monospace;
}



.task_navigation_problemitems_container{
  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      white-space: nowrap;
      gap: 10px;

  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      white-space: nowrap;
      gap: 10px;


  } 

}

.task_navigation_problemitem_container{
  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: column;
      width: 15vw;
      min-width: 15vw;
      height: 15vw;
      align-items: center;
      justify-content: center;
  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: column;
      width: 4rem;
      min-width: 4rem;
      height: 4rem;
      min-height: 4rem;
      align-items: center;
      justify-content: center;
  } 
}



.task_problem_container {
  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: column;
      gap: 20px;
      align-items: center;
      margin-bottom: 100px;
  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: row;
      gap: 10vw;
      align-items: center;
      margin-top: 100px;
  }  
}

.task_problem_itself{


  @media screen and (max-width: 800px) {
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  @media screen and (min-width: 800px) {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 50vw;
      min-width: 50vw;

  }    



}

.task_problem_thepicture{
  display: flex; width: 100%; min-height: 3rem; max-height: 300px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.task_problem_theproblem {
  @media screen and (max-width: 800px) {
      display:inline; 
      font-family:monospace;
      
      width: 90vw;
      /* flex-direction: column; */
  }
  @media screen and (min-width: 800px) {
      display: inline; 
      font-family:monospace;
      font-size: large;
      /* flex-direction: column; */
      
  }  
}

.task_problem_hintsandanswers {

  @media screen and (max-width: 800px) {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 80vw;
  }
  @media screen and (min-width: 800px) {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 30vw;
      min-width: 30vw;
  }    


  
}
.task_problem_hintsandanswers_theAnswers {
  display: flex; flex-direction: column; width: 100%; font-family:monospace; gap: 10px;  
}
.button-30 {
  align-items: center;
  appearance: none;
  background-color: #FCFCFD;
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  display: inline-flex;
  font-family: monospace;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
}

.button-30:focus {
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button-30:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-30:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}




/* CSS */
.button_default {
background-color: rgba(51, 51, 51, 0.05);
border-radius: 8px;
border-width: 0;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: monospace;
font-size: 14px;
font-weight: 500;
line-height: 20px;
list-style: none;
margin: 0;
padding: 10px 12px;
text-align: center;
transition: all 200ms;
vertical-align: baseline;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button_disabled {
  pointer-events: none;
  opacity: 0.5;
}


.button_correctanswer {
  background-color: chartreuse;
  pointer-events: none;
  border-radius: 8px;
  border-width: 0;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  font-family: monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  transition: all 200ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button_wronganswer {
  pointer-events: none;
  background-color: #FE3939;
  border-radius: 8px;
  border-width: 0;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  font-family: monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  transition: all 200ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}



.my-shakeYes {
  animation-name: shakeYes;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;

}


@keyframes shakeYes {
  0% { transform: translate(0px, -4px)}
  10% { transform: translate(0px, 0px)}
  20% { transform: translate(0px, -4px)}
  30% { transform: translate(0px, 0px)}
  40% { transform: translate(0px, -4px)}
  50% { transform: translate(0px, 0px)}
  60% { transform: translate(0px, -4px)}
  70% { transform: translate(0px, 0px)}
  80% { transform: translate(0px, -5px)}
  90% { transform: translate(0px, 0px)}
  100% { transform: translate(0px, 0px)}
}

.my-shakeNo {
  animation-name: shakeNo;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;

}

@keyframes shakeNo {
  0% { transform: translate(2px, 0px)}
  25% { transform: translate(-2px, 0px)}
  50% { transform: translate(2px, 0px)}
  75% { transform: translate(-2px, 0px)}
  100% { transform: translate(0px, 0px)}



}

/* 
/$$$$$$  /$$$$$$$$ /$$$$$$  /$$$$$$$$ /$$$$$$  /$$$$$$  /$$$$$$$$ /$$$$$$  /$$$$$$   /$$$$$$ 
/$$__  $$|__  $$__//$$__  $$|__  $$__/|_  $$_/ /$$__  $$|__  $$__/|_  $$_/ /$$__  $$ /$$__  $$
| $$  \__/   | $$  | $$  \ $$   | $$     | $$  | $$  \__/   | $$     | $$  | $$  \__/| $$  \__/
|  $$$$$$    | $$  | $$$$$$$$   | $$     | $$  |  $$$$$$    | $$     | $$  | $$      |  $$$$$$ 
\____  $$   | $$  | $$__  $$   | $$     | $$   \____  $$   | $$     | $$  | $$       \____  $$
/$$  \ $$   | $$  | $$  | $$   | $$     | $$   /$$  \ $$   | $$     | $$  | $$    $$ /$$  \ $$
|  $$$$$$/   | $$  | $$  | $$   | $$    /$$$$$$|  $$$$$$/   | $$    /$$$$$$|  $$$$$$/|  $$$$$$/
\______/    |__/  |__/  |__/   |__/   |______/ \______/    |__/   |______/ \______/  \______/  */
                                                                                          
.statistics_efforts_container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  user-select: none;
}

.statistics_effort_month_examtasksnumbers {
  display: flex;
  flex-direction: row;
}
.statistics_effort_month_examtasksnumbers_emptydiv {
  width: 10vw;
  min-width: 10vw;
}
.statistics_effort_month_examtasksnumbers_number {
  
@media screen and (max-width: 800px) {
  font-size: xx-small;
  font-family: monospace;


  flex:1;

  display: flex;
  justify-content: center;
  align-items: center;

}

@media screen and (min-width: 800px) {
font-size: small;
font-family: monospace;

font-size:small;
flex:1;

display: flex;
justify-content: center;
align-items: center;
}  






}
.statistics_effort_month_examtasksnumbers_points {
  display: flex;
  font-family: monospace;
  flex:2;
  font-size: medium;
  justify-content: flex-end;
  align-items: center;
}
.statistics_effort_month_dayactivity {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.statistics_effort_month_dayactivity_day {
  width: 10vw;
  min-width: 10vw;
  font-size:x-small;
  font-family: monospace;
  
}
.statistics_effort_month_dayactivity_quant {
  font-size: xx-small;
  font-family: monospace;
  flex:1;

  display: flex;
  justify-content: center;
 
}
.statistics_effort_month_dayactivity_points {
  font-size: normal;
  font-family: monospace;
  flex:2;

  display: flex;
  justify-content: flex-end;
 
}

/*Если совсем небольшие усилия <=5 */
.statistics_effort_very_empty {
  display: flex;
  flex-direction: row;

  background: rgb(133, 132, 132);
  width: 2px;
  height: 2px;
  justify-content: center;
  align-items: center;
  color: rgb(133, 132, 132);
  border-radius: 50%;
}
.statistics_effort_very_little {
  display: flex;
  flex-direction: row;

  background: #93d4ee;
  width: 0.8em;
  height: 0.8em;
  justify-content: center;
  align-items: center;
  color: #b1daea;
  border-radius: 50%;
}
/*Если просто усилия [6,10] */
.statistics_effort_little {
  display: flex;
  flex-direction: row;

  background: #62ccf0;
  width: 1em;
  height: 1em;
  justify-content: center;
  align-items: center;
  color: #85c8de;
  border-radius: 50%;
}
/*Если норм усилия [11,15 */
.statistics_effort_normal{
  display: flex;
  flex-direction: row;

  background: #0195ae;
  width: 1.2em;
  height: 1.2em;
  justify-content: center;
  align-items: center;
  color: #0195ae;
  border-radius: 50%;
}
/*Если много (a lot) усилия 16-20 */
.statistics_effort_alot{
  display: flex;
  flex-direction: row;

  background: #01556a;
  width: 1.3em;
  height: 1.3em;
  justify-content: center;
  align-items: center;
  color: #01556a;
  border-radius: 50%;
}

.statistics_effort_super{
  display: flex;
  flex-direction: row;

  background:  #014e61;
  width: 1.4em;
  height: 1.4em;
  justify-content: center;
  align-items: center;
  color:  #02303b;
  border-radius: 50%;
}
/*
$$$$$$$$\  $$$$$$\   $$$$$$\  $$\   $$\  $$$$$$\        $$\       $$$$$$\  $$$$$$\ $$$$$$$$\ 
\__$$  __|$$  __$$\ $$  __$$\ $$ | $$  |$$  __$$\       $$ |      \_$$  _|$$  __$$\\__$$  __|
 $$ |   $$ /  $$ |$$ /  \__|$$ |$$  / $$ /  \__|      $$ |        $$ |  $$ /  \__|  $$ |   
 $$ |   $$$$$$$$ |\$$$$$$\  $$$$$  /  \$$$$$$\        $$ |        $$ |  \$$$$$$\    $$ |   
 $$ |   $$  __$$ | \____$$\ $$  $$<    \____$$\       $$ |        $$ |   \____$$\   $$ |   
 $$ |   $$ |  $$ |$$\   $$ |$$ |\$$\  $$\   $$ |      $$ |        $$ |  $$\   $$ |  $$ |   
 $$ |   $$ |  $$ |\$$$$$$  |$$ | \$$\ \$$$$$$  |      $$$$$$$$\ $$$$$$\ \$$$$$$  |  $$ |   
 \__|   \__|  \__| \______/ \__|  \__| \______/$$$$$$\\________|\______| \______/   \__|   
                                               \______|                                     */


  .taskslist_container{
      display: flex; 
      flex-direction: column; 
      gap: 35px;
  }


 
  .taskslist_task_container{
    display: flex; 
    flex-direction: column; 
    gap: 5px;
    border-bottom: 1px solid #e8e8e8;
  }
  
  .taskslist_task_container_deleted {
    background: darksalmon;
  }
  .taskslist_formebyme_header{
      display: flex;
      flex-direction: row;
      font-family: monospace;
      font-size: 1.5rem;
      gap: 2rem
  }

  .formebyme_notselected{
      color:rgb(168, 167, 167)
  }
  
  
  .taskslist_task_infocontrolsrow{
      display: flex;
      flex-direction: row;
      gap: 5px;
      align-items: center;
      user-select: none;

  }
  .taskslist_task_infocontrolsrow_namedate{
      display: flex;
      flex-direction: column;
  }

  .taskslist_task_infocontrolsrow_namedate_name{
      display: flex;
      flex: 20;
      font-family: monospace;

      

  }
  .taskslist_task_infocontrolsrow_namedate_date{
      font-family: monospace;
 
  }

  .taskslist_task_infocontrolsrow_createdforby{
      font-family: monospace;
      flex: 50;
      font-size:10px;
  }

  .taskslist_task_infocontrolsrow_controls{
      font-family: monospace;
      display: flex;
      flex: 20;
      flex-direction: row;
      justify-content: end;

  }
  .taskslist_task_infocontrolsrow_control_repeatright{

      cursor: pointer;
  }
  .taskslist_task_infocontrolsrow_control_repeatall{

      cursor: pointer;
  }
  .taskslist_task_infocontrolsrow_control_repeatwrong{

      cursor: pointer;
  }
  .taskslist_task_infocontrolsrow_control_delete{

      cursor: pointer;
  }

  .tasklist_task_comment{
      display: flex;
      flex-direction: row;
      font-family: monospace;
      user-select: none;

  }
  .taskslist_problemsrow{
      display: flex;
      width: 90vw;
      min-width: 90vw;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
  }
  .taskslist_problemitem {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.8em;
      min-width: 0.8em;
      height: 0.8em;
      min-height: 0.8em;
  }         

  .taskslist_problem_empty {
  display: flex;
  flex-direction: row;
  
  background: rgb(133, 132, 132);
  width: 2px;
  height: 2px;
  justify-content: center;
  align-items: center;
  color: rgb(133, 132, 132);
  border-radius: 50%;
}
.taskslist_problem_right {
  display: flex;
  flex-direction: row;
  
  background:chartreuse;
  width: 0.5em;
  height: 0.5em;
  justify-content: center;
  align-items: center;
  color: #b1daea;
  border-radius: 50%;
}

.taskslist_problem_wrong {
  display: flex;
  flex-direction: row;
  
  background: rgb(254, 57, 57);;
  width: 0.5em;
  height: 0.5em;
  justify-content: center;
  align-items: center;
  color: #85c8de;
  border-radius: 50%;
}






/* 
$$$$$$$\   $$$$$$\ $$$$$$$$\ $$$$$$\ $$\   $$\  $$$$$$\  
$$  __$$\ $$  __$$\\__$$  __|\_$$  _|$$$\  $$ |$$  __$$\ 
$$ |  $$ |$$ /  $$ |  $$ |     $$ |  $$$$\ $$ |$$ /  \__|
$$$$$$$  |$$$$$$$$ |  $$ |     $$ |  $$ $$\$$ |$$ |$$$$\ 
$$  __$$< $$  __$$ |  $$ |     $$ |  $$ \$$$$ |$$ |\_$$ |
$$ |  $$ |$$ |  $$ |  $$ |     $$ |  $$ |\$$$ |$$ |  $$ |
$$ |  $$ |$$ |  $$ |  $$ |   $$$$$$\ $$ | \$$ |\$$$$$$  |
\__|  \__|\__|  \__|  \__|   \______|\__|  \__| \______/ 
*/

.rating_container {

  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: column;
      gap: 35px;

  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: row;
      justify-content: space-between;

  }  

}
.rating_table {

  @media screen and (max-width: 800px) {
      display: flex; 
      flex-direction: column;
      gap: 10px;


  }
  @media screen and (min-width: 800px) {
      display: flex; 
      flex-direction: column;
      width: 40vw;
      gap: 10px;


  } 

}
.rating_table_header {
  display: flex;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.5em;
}

.rating_table_subheader{
  display: flex;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rating_table_row {
  display: flex;
  flex-direction: row;
  border-bottom: #014e61 1px solid;
}
.rating_table_row_position {
  display: flex;
  flex: 1;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rating_table_row_nickname {
  display: flex;
  flex: 5;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rating_table_row_result {
  display: flex;
  justify-content: end;
  flex: 4;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.rating_table_yourposition {
  display: flex;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight:900;
  color: rgb(2, 192, 81);
}



/* 
______   _______   __       __  ______  __    __  __    __   ______  
/      \ /       \ /  \     /  |/      |/  \  /  |/  |  /  | /      \ 
/$$$$$$  |$$$$$$$  |$$  \   /$$ |$$$$$$/ $$  \ $$ |$$ | /$$/ /$$$$$$  |
$$ |__$$ |$$ |  $$ |$$$  \ /$$$ |  $$ |  $$$  \$$ |$$ |/$$/  $$ |__$$ |
$$    $$ |$$ |  $$ |$$$$  /$$$$ |  $$ |  $$$$  $$ |$$  $$<   $$    $$ |
$$$$$$$$ |$$ |  $$ |$$ $$ $$/$$ |  $$ |  $$ $$ $$ |$$$$$  \  $$$$$$$$ |
$$ |  $$ |$$ |__$$ |$$ |$$$/ $$ | _$$ |_ $$ |$$$$ |$$ |$$  \ $$ |  $$ |
$$ |  $$ |$$    $$/ $$ | $/  $$ |/ $$   |$$ | $$$ |$$ | $$  |$$ |  $$ |
$$/   $$/ $$$$$$$/  $$/      $$/ $$$$$$/ $$/   $$/ $$/   $$/ $$/   $$/  */

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}




.large_textref
{
  font-size: 2.5em;
}


/*
$$$$$$\ $$\   $$\ $$$$$$$\  $$$$$$$$\ $$\   $$\       $$$$$$$\   $$$$$$\   $$$$$$\  $$$$$$$$\ 
\_$$  _|$$$\  $$ |$$  __$$\ $$  _____|$$ |  $$ |      $$  __$$\ $$  __$$\ $$  __$$\ $$  _____|
$$ |  $$$$\ $$ |$$ |  $$ |$$ |      \$$\ $$  |      $$ |  $$ |$$ /  $$ |$$ /  \__|$$ |      
$$ |  $$ $$\$$ |$$ |  $$ |$$$$$\     \$$$$  /       $$$$$$$  |$$$$$$$$ |$$ |$$$$\ $$$$$\    
$$ |  $$ \$$$$ |$$ |  $$ |$$  __|    $$  $$<        $$  ____/ $$  __$$ |$$ |\_$$ |$$  __|   
$$ |  $$ |\$$$ |$$ |  $$ |$$ |      $$  /\$$\       $$ |      $$ |  $$ |$$ |  $$ |$$ |      
$$$$$$\ $$ | \$$ |$$$$$$$  |$$$$$$$$\ $$ /  $$ |      $$ |      $$ |  $$ |\$$$$$$  |$$$$$$$$\ 
\______|\__|  \__|\_______/ \________|\__|  \__|      \__|      \__|  \__| \______/ \________|
                                                                                            
*/

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

.index_login_container {
  
/* position: fixed;
right: 50px;
top: 20px; */
/* transform: translateY(-50%); */
background: var(--card-bg);
padding: 15px;
/* border-radius: 16px; */
/* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); */
display: flex
;
flex-direction: column;
gap: 12px;
z-index: 1002;
border: 10px solid #f9f9ff;
}
.index_login_text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  cursor: pointer;
  user-select: none;
}
.index_login_loginicons {
  display: flex; 
  flex-direction: row;
  border: #014e61 1px dotted;
  justify-content: center;
}


/*
$$$$$$\   $$$$$$\   $$$$$$\  $$$$$$$$\  $$$$$$\   $$$$$$\        $$$$$$$\  $$$$$$$$\ $$\   $$\ $$$$$$\ $$$$$$$$\ $$$$$$$\  
$$  __$$\ $$  __$$\ $$  __$$\ $$  _____|$$  __$$\ $$  __$$\       $$  __$$\ $$  _____|$$$\  $$ |\_$$  _|$$  _____|$$  __$$\ 
$$ /  $$ |$$ /  \__|$$ /  \__|$$ |      $$ /  \__|$$ /  \__|      $$ |  $$ |$$ |      $$$$\ $$ |  $$ |  $$ |      $$ |  $$ |
$$$$$$$$ |$$ |      $$ |      $$$$$\    \$$$$$$\  \$$$$$$\        $$ |  $$ |$$$$$\    $$ $$\$$ |  $$ |  $$$$$\    $$ |  $$ |
$$  __$$ |$$ |      $$ |      $$  __|    \____$$\  \____$$\       $$ |  $$ |$$  __|   $$ \$$$$ |  $$ |  $$  __|   $$ |  $$ |
$$ |  $$ |$$ |  $$\ $$ |  $$\ $$ |      $$\   $$ |$$\   $$ |      $$ |  $$ |$$ |      $$ |\$$$ |  $$ |  $$ |      $$ |  $$ |
$$ |  $$ |\$$$$$$  |\$$$$$$  |$$$$$$$$\ \$$$$$$  |\$$$$$$  |      $$$$$$$  |$$$$$$$$\ $$ | \$$ |$$$$$$\ $$$$$$$$\ $$$$$$$  |
\__|  \__| \______/  \______/ \________| \______/  \______/       \_______/ \________|\__|  \__|\______|\________|\_______/ 
                                                                                                                         

*/

.accessdenied_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}
.accessdenied_message {
  font-family: monospace;
  font-size: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}




/* 

$$$$$$\  $$$$$$$$\ $$\   $$\ $$$$$$$$\ $$$$$$$\   $$$$$$\ $$$$$$$$\  $$$$$$\  $$$$$$$\  
$$  __$$\ $$  _____|$$$\  $$ |$$  _____|$$  __$$\ $$  __$$\\__$$  __|$$  __$$\ $$  __$$\ 
$$ /  \__|$$ |      $$$$\ $$ |$$ |      $$ |  $$ |$$ /  $$ |  $$ |   $$ /  $$ |$$ |  $$ |
$$ |$$$$\ $$$$$\    $$ $$\$$ |$$$$$\    $$$$$$$  |$$$$$$$$ |  $$ |   $$ |  $$ |$$$$$$$  |
$$ |\_$$ |$$  __|   $$ \$$$$ |$$  __|   $$  __$$< $$  __$$ |  $$ |   $$ |  $$ |$$  __$$< 
$$ |  $$ |$$ |      $$ |\$$$ |$$ |      $$ |  $$ |$$ |  $$ |  $$ |   $$ |  $$ |$$ |  $$ |
\$$$$$$  |$$$$$$$$\ $$ | \$$ |$$$$$$$$\ $$ |  $$ |$$ |  $$ |  $$ |    $$$$$$  |$$ |  $$ |
\______/ \________|\__|  \__|\________|\__|  \__|\__|  \__|  \__|    \______/ \__|  \__|
                                                                                       
*/
.generator_container {
  display: flex;
  flex-direction: row;
}
.generator_problemexamples_container{
display: flex;
flex-direction: column;
width: 50%;
}
.generator_massactions_container {
width: 50px;
height: 300px;
display: flex;
flex-direction: column;
position: fixed;
left: 50vw;
top: 30vh;
bottom: 0;
justify-content: space-between;
align-items: end;

}
.generator_generation_container {
width: 50px;
height: 300px;
display: flex;
flex-direction: column;
position: fixed;
right: 5vw;
top: 30vh;
bottom: 0;
justify-content: space-between;
align-items: end;

}

.generator_filter_buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: start;
}
.generator_filter_button {
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 2rem;
  user-select: none;
  cursor: pointer;
}

.generator_generation_row_quantity {
  display: flex;
  flex-direction: row;

  justify-content: start;
  align-items: center;
  font-size: 1.2rem;
  font-family: monospace;
  user-select: none;
}
.generator_generation_row_arrow {
  display: flex;
  flex-direction: row;
 
  width: 1rem;
  justify-content: start;
  align-items: center;
  font-size: 1.2rem;
  font-family: monospace;
  user-select: none;
}
#show_only_selected_problems{
  cursor: pointer;
}
.generator_generation_row_addressee {
  display: flex;
  flex-direction: row;

  justify-content: start;
  align-items: end;
  font-size: 1.2rem;
  font-family: monospace;
  user-select: none;
}
#generator_generation_row_action {
  display: flex;
  flex-direction: row;

  justify-content: end;
  align-items: end;
  font-size: 2rem;
  font-family: monospace;
  user-select: none;
  cursor: pointer;
}

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

.generator_generation_responseinfo{
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-family: monospace;
  font-size: 1rem;
  width: 100%;
}




.generator_actions_buttons {
  display: flex;
  flex-direction: column;
  justify-items: end;
  align-items: center;
  gap: 15px;
}
.generator_action_button {
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 2rem;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
}
#generator_action_removeall{
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 2rem;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  color: chocolate;
}

#generator_action_add1toall{
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 2rem;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  color:forestgreen;
}
#generator_action_subtr1toall{
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 2rem;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  color:rgb(37, 96, 173);
}



.generator_filter_single_info {
  display: flex;
  flex-direction: row;
}


#generator_problemExamplesContainer{
  display: flex; flex-direction: column; margin-top: 1rem; gap: 1rem;
  border-right: 1px solid #e8e8e8;
  @media screen and (max-width: 450px) {
    width: calc(100%);
}
@media screen and (min-width: 800px) {
  width: 100%;
}
}

.generator_problemExample{
  display: flex; 
  flex-direction: column;
  border-bottom: 1px solid #e8e8e8;
}
.generator_problemexample_tptp{
@media screen and (max-width: 450px) {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 800px) {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
}
.generator_problemexample_thepicture{
display: flex; width: 100%; max-height: 200px;
user-select: none;

}
.generator_problemexample_theproblem{
  font-family: monospace;
}

.generator_problemexample_header{
  display: flex; flex-direction: row; justify-content: space-between; align-items:center;
}

.generator_problemexample_header_leftpart{
  display: flex; flex-direction: row; justify-content: start; align-items:center; gap: 5px;
}
.generator_problemexample_header_rightpart{
  display: flex; flex-direction: row; justify-content: end; align-items:center;
}


.generator_problemexample_header_numandcode {
  font-family: monospace; font-size: 1.5rem;
}

.generator_problemexample_header_abilitybar {
  display: flex;
  min-height: 1rem;
  gap: 1px;
}

.generator_problemexample_header_abilitybar_verygood {
  display: flex;
  width: 5px;
  background-color: rgb(20, 170, 20);
}
.generator_problemexample_header_abilitybar_good {
  display: flex;
  width: 5px;
  background-color:greenyellow;
}
.generator_problemexample_header_abilitybar_null {
  display: flex;
  min-width: 5px;
  background-color: rgb(89, 90, 88);
}
.generator_problemexample_header_abilitybar_bad {
  display: flex;
  width: 5px;
  background-color: rgb(240, 92, 55);
}


.generator_problemexample_header_sources {
  display: flex; flex-direction: row; align-items: center; gap: 5px;
}

.generator_problemexample_header_source {
  background-color: darkblue; color: aliceblue; font-family: monospace; display: flex; align-items: center; text-align: center;
}

.generator_problemexample_header_actions {
  display: flex;
  flex-direction: row;
  justify-items: end;
  align-items: center;
  gap: 10px;
}


.generator_problemexample_header_action_remove {
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 1.5rem;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  color: chocolate;
}
.generator_problemexample_header_action_select{
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 1.5rem;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  color:forestgreen;
}

.generator_problemexample_header_action_notactive{
  display: flex;
  flex-direction: row;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  font-size: 1.5rem;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  color:rgb(189, 189, 189);
}




#sources_filter_options {
  @media screen and (max-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    background-color: white;
    position: absolute;
    top: 6.5rem;
    overflow-y: auto;
    transition: 0.3s;
    box-shadow:2px 3px 5px #999;
    border-top: 1.5rem white solid;
    border-bottom: 1.5rem white solid;
  }

  @media screen and (min-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
    /* border: #014e61 1px solid; */
    box-shadow:2px 3px 5px #999;
    border-top: 2rem white solid;
    border-bottom: 2rem white solid;
    background-color: white;
    position: absolute;
    top: 6.5rem;
    overflow-y: auto;
    transition: 0.3s;
    /* padding-top: 1rem;
    padding-bottom: 1rem; */
  }
  


}


.sources_filter_option_row {
  display: flex;
  justify-items: start;
  align-items: center;
  width: 80%;
  gap: 0.5rem;
  border-bottom: #014e61 1px dotted;
  user-select: none;
  cursor: pointer;
}


.sources_filter_option_row_indicator{
  height: 1rem;
  width: 1rem;
  border-radius: 0.3rem;
  border: #999 1px solid;
}
.sources_filter_option_row_indicator_selected {
  background-color: chartreuse;
}
.sources_filter_option_row_indicator_notselected {
  background-color:#D6D6E7;
}


.sources_filter_option_row_label{
  font-family: monospace;
  font-size: 1.5rem;
  min-height: 2rem;
}

.sources_filter_option_row_label_notselected {
  color: #999;
}


#show_only_selected_problems_trigger{
  user-select: none;
  cursor: pointer;
} 

.generator_showonlyselected_header{
  display: flex;
  flex-direction: row;
  font-family: monospace;
  font-size: 2rem;
  padding-top: 2rem;
}
/*МЕНЮШКА ДЛЯ ВЫБОРА АДРЕСАТОВ*/
#choose_addresse_trigger{
  cursor: pointer;
}
#choose_addresse_options{
  @media screen and (max-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    background-color: white;
    position: fixed;
    top: 20vh;
    overflow-y: auto;
    transition: 0.3s;
    box-shadow:2px 3px 5px #999;
    border-top: 1.5rem white solid;
    border-bottom: 1.5rem white solid;
    z-index: 1;
  }

  @media screen and (min-width: 800px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;
    /* border: #014e61 1px solid; */
    box-shadow:2px 3px 5px #999;
    border-top: 2rem white solid;
    border-bottom: 2rem white solid;
    background-color: white;
    position: fixed;
    top: 20vh;
    overflow-y: auto;
    transition: 0.3s;
    /* padding-top: 1rem;
    padding-bottom: 1rem; */
  }
}


  
.choose_addresse_option_row {
  display: flex;
  justify-items: start;
  align-items: center;
  width: 80%;
  gap: 0.5rem;
  border-bottom: #014e61 1px dotted;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
  font-size: 1.5rem;
}


.choose_addresse_option_row_selected {
  color: #000;
}
.choose_addresse_option_row_notselected {
  color:#999;
}


/*Фильтр для выбора номера задачи и тэгов*/

#tasknumsandtags_filter_options{
  @media screen and (max-width: 800px) {
      display: flex;
      flex-direction: column;
      justify-content: end;
      gap: 3rem;
      align-items: center;
      width: 90vw;
      background-color: white;
      position: absolute;
      top: 6.5rem;
      overflow-y: auto;
      transition: 0.3s;
      box-shadow:2px 3px 5px #999;
      border-top: 1.5rem white solid;
      border-bottom: 1.5rem white solid;
      gap: 10px;
      z-index: 1;
    }
  
    @media screen and (min-width: 800px) {
      display: flex;
      flex-direction: column;
      justify-content: end;
      gap: 2rem;
      align-items: center;
      width: 50vw;
      /* border: #014e61 1px solid; */
      box-shadow:2px 3px 5px #999;
      border-top: 2rem white solid;
      border-bottom: 2rem white solid;
      background-color: white;
      position: absolute;
      top: 6.5rem;
      overflow-y: auto;
      transition: 0.3s;
      z-index: 1;
      /* padding-top: 1rem;
      padding-bottom: 1rem; */
    }
  }

  #tasknumsandtags_filter_options_header_row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 80%;
  }

  .tasknumsandtags_filter_ALL_CHECKBOX_indicator{

      @media screen and (max-width: 800px) {
          height: 2rem;
          width: 2rem;
          border-radius: 0.3rem;
          border: #999 1px solid;
          cursor: pointer;
      }
    
      @media screen and (min-width: 800px) {
          height: 1.5rem;
          width: 1.5rem;
          border-radius: 0.3rem;
          border: #999 1px solid;
          cursor: pointer;
      }

  }

  .tasknumsandtags_filter_ALL_CHECKBOX_indicator_allselected {
      background-color: chartreuse;
    }
    .tasknumsandtags_filter_ALL_CHECKBOX_indicator_notallselected {
      background: repeating-linear-gradient(
          45deg,
          chartreuse,
          chartreuse 5px,
          #ffffff 5px,
          #ffffff 10px
        );
    }


  #tasknumsandtags_filter_options_container{
      display: flex;
      flex-direction: column;
      scrollbar-gutter: stable;
      max-height: 70vh;
      overflow-y: auto;
      min-width: 80%;
      @media screen and (min-width: 800px) {
      padding-bottom: 4rem;
      }
      @media screen and (max-width: 800px) {
          padding-bottom: 7rem;
      }
  }

  .tasknumsandtags_filter_numoption_row{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      border-bottom: #014e61 1px dotted;
      user-select: none;

  }

  .tasknumsandtags_filter_numoption_row_label{
      font-family: monospace;
      font-size: 1.5rem;
      cursor: pointer;
      /* min-height: 2rem; */
    }

  .tasknumsandtags_filter_numoption_row_indicator{

      @media screen and (max-width: 800px) {
          height: 1.5rem;
          width: 1.5rem;
          border-radius: 0.3rem;
          border: #999 1px solid;
          cursor: pointer;
      }
    
      @media screen and (min-width: 800px) {
          height: 1.2rem;
          width: 1.2rem;
          border-radius: 0.3rem;
          border: #999 1px solid;
          cursor: pointer;
      }

  }

  .tasknumsandtags_filter_numoption_row_indicator_allselected {
      background-color: chartreuse;
    }
    .tasknumsandtags_filter_numoption_row_indicator_notallselected {
      background: repeating-linear-gradient(
          45deg,
          chartreuse,
          chartreuse 5px,
          #ffffff 5px,
          #ffffff 10px
        );
    }
  .tasknumsandtags_filter_numoption_row_indicator_notselected {
  background-color:#D6D6E7;
  }

  .tasknumsandtags_filter_numoption_tags_container{
      display: flex;
      flex-direction: column;
      padding-bottom: 1rem;
  }

  .visibility_hidden {
      display: none;
  }

  .tasknumsandtags_filter_options_tags_row{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: end;
      gap: 1rem;
      user-select: none;
      cursor: pointer;
  }



  .tasknumsandtags_filter_options_tags_row_indicator{
      min-height: 0.8rem;
      min-width: 0.8rem;
      border-radius: 0.2rem;
      border: #999 1px solid;

    }
  .tasknumsandtags_filter_options_tags_row_indicator_selected{

      background-color: chartreuse;
    }
  .tasknumsandtags_filter_options_tags_row_label{
      display: flex;
      flex-direction: row;
      font-family: monospace;
      font-size: 1rem;
  }

  .tasknumsandtags_filter_options_tags_row_label_notselected{
      color:#999;
  }


 /*
 
$$$$$$\   $$$$$$\  $$\   $$\ $$$$$$$\   $$$$$$\  $$$$$$$$\  $$$$$$\  
$$  __$$\ $$  __$$\ $$ |  $$ |$$  __$$\ $$  __$$\ $$  _____|$$  __$$\ 
$$ /  \__|$$ /  $$ |$$ |  $$ |$$ |  $$ |$$ /  \__|$$ |      $$ /  \__|
$$ |      $$ |  $$ |$$ |  $$ |$$$$$$$  |\$$$$$$\  $$$$$\    \$$$$$$\  
$$ |      $$ |  $$ |$$ |  $$ |$$  __$$<  \____$$\ $$  __|    \____$$\ 
$$ |  $$\ $$ |  $$ |$$ |  $$ |$$ |  $$ |$$\   $$ |$$ |      $$\   $$ |
\$$$$$$  | $$$$$$  |\$$$$$$  |$$ |  $$ |\$$$$$$  |$$$$$$$$\ \$$$$$$  |
\______/  \______/  \______/ \__|  \__| \______/ \________| \______/ 
                                                                    
 */

.courses_creation_container{
display: flex;
flex-direction: column;
gap: 1rem;
}

.courses_creation_coursename_container{
display: flex;
flex-direction: column;
}
.courses_creation_label {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
  
.courses_creation_coursename_input {
width: 100%;
}

.courses_creation_coursedescription_container{
display: flex;
flex-direction: column;
}

.courses_creation_coursedescription_textarea {
width: 100%;

}

.courses_creation_modules_container{
display: flex;
flex-direction: column;
gap: 1rem;
}

.courses_creation_module_container{
display: flex;
flex-direction: row;
gap: 1rem;
}

.courses_creation_module_name_container{
display: flex;
flex-direction: column;
}
.courses_creation_module_number_container{
display: flex;
flex-direction: column;
}

.courses_creation_module_streamdate_container{
display: flex;
flex-direction: column;
}
.courses_creation_module_streamURL_container{
display: flex;
flex-direction: column;
}
.courses_creation_module_taskproto_container{
display: flex;
flex-direction: column;
}


#course_edit_logo{
width: 75px;
height:75px;
}

.course_edit_textarea_input{
width: 100%;
resize: none;

}

.course_edit_editable_input {
border:0;
outline:0; 
width:100%; 
text-align: left;
font-family: monospace;
font-size: 1.5rem;
border-bottom: #014e61 1px dotted;

}