/*                                                                                 
UUUUUUUU     UUUUUUUU   SSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEERRRRRRRRRRRRRRRRR   
U::::::U     U::::::U SS:::::::::::::::SE::::::::::::::::::::ER::::::::::::::::R  
U::::::U     U::::::US:::::SSSSSS::::::SE::::::::::::::::::::ER::::::RRRRRR:::::R 
UU:::::U     U:::::UUS:::::S     SSSSSSSEE::::::EEEEEEEEE::::ERR:::::R     R:::::R
 U:::::U     U:::::U S:::::S              E:::::E       EEEEEE  R::::R     R:::::R
 U:::::D     D:::::U S:::::S              E:::::E               R::::R     R:::::R
 U:::::D     D:::::U  S::::SSSS           E::::::EEEEEEEEEE     R::::RRRRRR:::::R 
 U:::::D     D:::::U   SS::::::SSSSS      E:::::::::::::::E     R:::::::::::::RR  
 U:::::D     D:::::U     SSS::::::::SS    E:::::::::::::::E     R::::RRRRRR:::::R 
 U:::::D     D:::::U        SSSSSS::::S   E::::::EEEEEEEEEE     R::::R     R:::::R
 U:::::D     D:::::U             S:::::S  E:::::E               R::::R     R:::::R
 U::::::U   U::::::U             S:::::S  E:::::E       EEEEEE  R::::R     R:::::R
 U:::::::UUU:::::::U SSSSSSS     S:::::SEE::::::EEEEEEEE:::::ERR:::::R     R:::::R
  UU:::::::::::::UU  S::::::SSSSSS:::::SE::::::::::::::::::::ER::::::R     R:::::R
    UU:::::::::UU    S:::::::::::::::SS E::::::::::::::::::::ER::::::R     R:::::R
      UUUUUUUUU       SSSSSSSSSSSSSSS   EEEEEEEEEEEEEEEEEEEEEERRRRRRRR     RRRRRRR
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/

#user_logo_and_roles{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#user_roles{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#user_addrole_buttons{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: end;
}


.user_profiles_blocks{
    display: flex;
@media(max-width:799px) {  
    flex-direction: column;
    gap: 50px;
}
@media(min-width:800px) {
    flex-direction: row;
    gap: 100px;
}
}


/*
███    ███ ██    ██         ██████  ██████   ██████  ███████ ██ ██      ███████ 
████  ████  ██  ██          ██   ██ ██   ██ ██    ██ ██      ██ ██      ██      
██ ████ ██   ████           ██████  ██████  ██    ██ █████   ██ ██      █████   
██  ██  ██    ██            ██      ██   ██ ██    ██ ██      ██ ██      ██      
██      ██    ██    ███████ ██      ██   ██  ██████  ██      ██ ███████ ███████
*/

#menu_cities2_trigger{
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: end;
    font-family: monospace;
    font-size: 14px;
    user-select: none;
    text-align: right;
    color: #0088cc;
}

#menu_cities2_wrapper_DIV{
    position: absolute;
    left: -300px;
    top: -250px;
    width: 250px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    z-index: 1;
    overflow-y: auto;
    max-height: 500px;
}

#menu_cities2_DIV{
    transition-duration: 0ms;
    background-color: #423f3f;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-around;

      
}
.menu_cities2_hidden{
    width: 0px;
    height: 0px;
}
.menu_cities2_shown{
    width: 100%;
    height: 100%;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .10); 
}

#menu_cities_trigger {
    display: flex;
    flex-direction: row;
    justify-content: end;
    font-family: monospace;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    text-align: right;

  
}




.menu_city_option{
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 10px;
}

.menu_city_option_population{
    text-align: right;
    color: #e8e8e8;
    font-style: normal;
    width: 40%;
}
.menu_city_option_cityname{
    text-align: right;
    color: #d5e2c0;
    width: 60%;
}



#user_add_user_BUTTON{
    width: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}


/*
██ ███    ██ ██    ██ ██ ████████ ███████ ███████ 
██ ████   ██ ██    ██ ██    ██    ██      ██      
██ ██ ██  ██ ██    ██ ██    ██    █████   ███████ 
██ ██  ██ ██  ██  ██  ██    ██    ██           ██ 
██ ██   ████   ████   ██    ██    ███████ ███████ 
*/
#user_repetprofile_invite{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#user_studentprofile_invite{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#user_userprofile_invite{
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid #e8e8e8;
    padding-left: 5px;
}

.user_invite_description{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

.user_invite_link_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.user_invite_link{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #0088cc;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    }
.user_invite_action{
    display: flex;
    flex-direction: row;
    width: 20px;
    cursor: pointer;
    user-select: none;
}
.student_invite_subject_choise_BLOCK{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.repet_invite_subject_choise_BLOCK{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.invite_subject_option{
    color:#0088cc;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: fit-content;
}

.invite_subject_option_selected{
    border-bottom: 2px solid rgb(29, 252, 0);
}

.student_invite_way1_BLOCK{
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid #e8e8e8;
    padding-left: 5px;
}
.repet_invite_way1_BLOCK{
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid #e8e8e8;
    padding-left: 5px;
}
.student_invite_way1_description{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.repet_invite_way1_description{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.student_invite_way1_link_BLOCK{
display: flex;
flex-direction: column;
}
.repet_invite_way1_link_BLOCK{
display: flex;
flex-direction: column;
}

.student_invite_way1_link_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.repet_invite_way1_link_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.student_invite_way1_link_label{
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color:#4c4c4c;
}
.repet_invite_way1_link_label{
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color:#4c4c4c;
}
.student_invite_way1_link{
display: flex;
flex-direction: row;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
color: #0088cc;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.repet_invite_way1_link{
display: flex;
flex-direction: row;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
color: #0088cc;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.student_invite_way1_action{
display: flex;
flex-direction: row;
width: 20px;
cursor: pointer;
user-select: none;
}
.repet_invite_way1_action{
display: flex;
flex-direction: row;
width: 20px;
cursor: pointer;
user-select: none;
}
.link_copy_feedback{
display: flex;
flex-direction: row;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
color: #4c4c4c;
}


.student_invite_way2_BLOCK{
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-left: 1px solid #e8e8e8;
    padding-left: 5px;
}
.repet_invite_way2_BLOCK{
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-left: 1px solid #e8e8e8;
    padding-left: 5px;
}
.student_invite_way2_description{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.repet_invite_way2_description{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.student_invite_way2_invite_row{
    display: flex;
    flex-direction: row;
}
.repet_invite_way2_invite_row{
    display: flex;
    flex-direction: row;
}
.student_invite_way2_invite_input{
width: 100%;
}
.repet_invite_way2_invite_input{
width: 100%;
}
.student_invite_way2_invite_sendbutton{

}
.repet_invite_way2_invite_sendbutton{

}

.student_invite_way2_sent_feedback{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #4c4c4c;
}
.repet_invite_way2_sent_feedback{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #4c4c4c;
}
/*
██████  ███████ ██████  ███████ ████████         ██████  ██████   ██████  ███████ ██ ██      ███████ 
██   ██ ██      ██   ██ ██         ██            ██   ██ ██   ██ ██    ██ ██      ██ ██      ██      
██████  █████   ██████  █████      ██            ██████  ██████  ██    ██ █████   ██ ██      █████   
██   ██ ██      ██      ██         ██            ██      ██   ██ ██    ██ ██      ██ ██      ██      
██   ██ ███████ ██      ███████    ██    ███████ ██      ██   ██  ██████  ██      ██ ███████ ███████
*/


.user_repetprofileblock {

    display: flex;
    flex-direction: column;
    padding: 30px;
    background: white;
    border: 1px dotted var(--vscode-text);
  }

  #user_repetprofile_main {
    display: flex;
    flex-direction: column;
  }
  #user_repetprofile_students {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #user_repet_info{
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  #user_repet_stickerhead{
    display: flex;
    flex-direction: column;
    width: 128px;
    height: 128px;
    user-select: none;
  }

    .repets_pixel_ava_container{
    display: flex;
    flex-direction: column;
    width: 128px;
    height: 128px;
    user-select: none;
  }


  #user_repet_about{
    display: flex;
  }

  #teacherInviteNickName{
    border: 1px solid #e8e8e8;
  }

  #repet_add_student_BUTTON{
    width: 100px;
  }

 /*
███████ ████████ ██    ██ ██████  ███████ ███    ██ ████████         ██████  ██████   ██████  ███████ ██ ██      ███████ 
██         ██    ██    ██ ██   ██ ██      ████   ██    ██            ██   ██ ██   ██ ██    ██ ██      ██ ██      ██      
███████    ██    ██    ██ ██   ██ █████   ██ ██  ██    ██            ██████  ██████  ██    ██ █████   ██ ██      █████   
     ██    ██    ██    ██ ██   ██ ██      ██  ██ ██    ██            ██      ██   ██ ██    ██ ██      ██ ██      ██      
███████    ██     ██████  ██████  ███████ ██   ████    ██    ███████ ██      ██   ██  ██████  ██      ██ ███████ ███████
 */
 .user_studentprofileblock{
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: white;
    border: 1px dotted var(--vscode-text);
    min-width: 400px;
    gap: 20px;
    /* border-left: #2A2A2A solid 0.5px; */
 }

 #user_studentprofile_main {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  #user_studentprofile_repets {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #student_add_repet_BUTTON{
    width: 100px;
  }

/*                                                                                                                                                                                                                                          
PPPPPPPPPPPPPPPPP   RRRRRRRRRRRRRRRRR        OOOOOOOOO                     CCCCCCCCCCCCC     OOOOOOOOO     DDDDDDDDDDDDD      EEEEEEEEEEEEEEEEEEEEEE
P::::::::::::::::P  R::::::::::::::::R     OO:::::::::OO                CCC::::::::::::C   OO:::::::::OO   D::::::::::::DDD   E::::::::::::::::::::E
P::::::PPPPPP:::::P R::::::RRRRRR:::::R  OO:::::::::::::OO            CC:::::::::::::::C OO:::::::::::::OO D:::::::::::::::DD E::::::::::::::::::::E
PP:::::P     P:::::PRR:::::R     R:::::RO:::::::OOO:::::::O          C:::::CCCCCCCC::::CO:::::::OOO:::::::ODDD:::::DDDDD:::::DEE::::::EEEEEEEEE::::E
  P::::P     P:::::P  R::::R     R:::::RO::::::O   O::::::O         C:::::C       CCCCCCO::::::O   O::::::O  D:::::D    D:::::D E:::::E       EEEEEE
  P::::P     P:::::P  R::::R     R:::::RO:::::O     O:::::O        C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::E             
  P::::PPPPPP:::::P   R::::RRRRRR:::::R O:::::O     O:::::O        C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE::::::EEEEEEEEEE   
  P:::::::::::::PP    R:::::::::::::RR  O:::::O     O:::::O        C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::::::::::::E   
  P::::PPPPPPPPP      R::::RRRRRR:::::R O:::::O     O:::::O        C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::::::::::::E   
  P::::P              R::::R     R:::::RO:::::O     O:::::O        C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE::::::EEEEEEEEEE   
  P::::P              R::::R     R:::::RO:::::O     O:::::O        C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::E             
  P::::P              R::::R     R:::::RO::::::O   O::::::O         C:::::C       CCCCCCO::::::O   O::::::O  D:::::D    D:::::D E:::::E       EEEEEE
PP::::::PP          RR:::::R     R:::::RO:::::::OOO:::::::O          C:::::CCCCCCCC::::CO:::::::OOO:::::::ODDD:::::DDDDD:::::DEE::::::EEEEEEEE:::::E
P::::::::P          R::::::R     R:::::R OO:::::::::::::OO  ......    CC:::::::::::::::C OO:::::::::::::OO D:::::::::::::::DD E::::::::::::::::::::E
P::::::::P          R::::::R     R:::::R   OO:::::::::OO    .::::.      CCC::::::::::::C   OO:::::::::OO   D::::::::::::DDD   E::::::::::::::::::::E
PPPPPPPPPP          RRRRRRRR     RRRRRRR     OOOOOOOOO      ......         CCCCCCCCCCCCC     OOOOOOOOO     DDDDDDDDDDDDD      EEEEEEEEEEEEEEEEEEEEEE
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/

.problemcode_container{


display: flex;
flex-direction: row;
justify-content: space-between;
gap: 40px;
width: 100%;
    
}
#problemcode_example_block{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 600px;
}
.problemcode_example_container{
    display: flex;
    border: #4c4c4c 1px dotted;
    flex-direction: row;
}
#problemcode_example{
    display: flex;
    flex-direction: column;
    
    padding: 10px;
}
.problemcode_example_controls{
    display: flex;
    flex-direction: column;
}

#problemcode_example_header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#problemcode_example_tasknumandcode{
    display: flex;
    flex-direction: row;
    border: #4c4c4c 2px solid;
    align-items: center;
    gap: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

#problemcode_example_tasknum{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
}
#problemcode_example_code{
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    color: #0088cc;
}
#problemcode_example_sources{
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.problemcode_example_source{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    color:#999
}

#problemcode_example_theproblem{
    font-family: monospace;

}
#problemcode_similarcodes_container{
    display: flex;
    background-color: #ffee02;
}

#problemcode_statsandcomments_block{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 300px;
}

#problemcode_singleproblemtask{
    display: flex;
    flex-direction: column;
    background-color: #85c8de;
}
#problemcode_stats{
    display: flex;
    flex-direction: column;
    background-color: #db85de;
}
#problemcode_solutionhistory{
    display: flex;
    flex-direction: column;
    background-color: #85deaa;
}

#problemcode_name{
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
}

#problemcode_example_thepicture{
    display: flex;
    width: 200px;
    height: 200px;
}

#problemcode_solution_recipes{
    display: flex;
    flex-direction: column;
}

.problemcode_solution_recipe_head{
    display: flex;
    width: 50px;
    height: 50px;
    user-select: none;
    cursor: pointer;
}






/*
RRRRRRRRRRRRRRRRR   EEEEEEEEEEEEEEEEEEEEEE       CCCCCCCCCCCCCIIIIIIIIIIPPPPPPPPPPPPPPPPP   EEEEEEEEEEEEEEEEEEEEEE   SSSSSSSSSSSSSSS 
R::::::::::::::::R  E::::::::::::::::::::E    CCC::::::::::::CI::::::::IP::::::::::::::::P  E::::::::::::::::::::E SS:::::::::::::::S
R::::::RRRRRR:::::R E::::::::::::::::::::E  CC:::::::::::::::CI::::::::IP::::::PPPPPP:::::P E::::::::::::::::::::ES:::::SSSSSS::::::S
RR:::::R     R:::::REE::::::EEEEEEEEE::::E C:::::CCCCCCCC::::CII::::::IIPP:::::P     P:::::PEE::::::EEEEEEEEE::::ES:::::S     SSSSSSS
  R::::R     R:::::R  E:::::E       EEEEEEC:::::C       CCCCCC  I::::I    P::::P     P:::::P  E:::::E       EEEEEES:::::S            
  R::::R     R:::::R  E:::::E            C:::::C                I::::I    P::::P     P:::::P  E:::::E             S:::::S            
  R::::RRRRRR:::::R   E::::::EEEEEEEEEE  C:::::C                I::::I    P::::PPPPPP:::::P   E::::::EEEEEEEEEE    S::::SSSS         
  R:::::::::::::RR    E:::::::::::::::E  C:::::C                I::::I    P:::::::::::::PP    E:::::::::::::::E     SS::::::SSSSS    
  R::::RRRRRR:::::R   E:::::::::::::::E  C:::::C                I::::I    P::::PPPPPPPPP      E:::::::::::::::E       SSS::::::::SS  
  R::::R     R:::::R  E::::::EEEEEEEEEE  C:::::C                I::::I    P::::P              E::::::EEEEEEEEEE          SSSSSS::::S 
  R::::R     R:::::R  E:::::E            C:::::C                I::::I    P::::P              E:::::E                         S:::::S
  R::::R     R:::::R  E:::::E       EEEEEEC:::::C       CCCCCC  I::::I    P::::P              E:::::E       EEEEEE            S:::::S
RR:::::R     R:::::REE::::::EEEEEEEE:::::E C:::::CCCCCCCC::::CII::::::IIPP::::::PP          EE::::::EEEEEEEE:::::ESSSSSSS     S:::::S
R::::::R     R:::::RE::::::::::::::::::::E  CC:::::::::::::::CI::::::::IP::::::::P          E::::::::::::::::::::ES::::::SSSSSS:::::S
R::::::R     R:::::RE::::::::::::::::::::E    CCC::::::::::::CI::::::::IP::::::::P          E::::::::::::::::::::ES:::::::::::::::SS 
RRRRRRRR     RRRRRRREEEEEEEEEEEEEEEEEEEEEE       CCCCCCCCCCCCCIIIIIIIIIIPPPPPPPPPP          EEEEEEEEEEEEEEEEEEEEEE SSSSSSSSSSSSSSS 
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/






#recipies_container{
    display: flex;
    flex-direction: column;
}
.recipies_recipe_row{
    display: flex;
    flex-direction: row;
    border-bottom: #e8e8e8 1px solid;
    gap: 10px;
}
.recipies_recipe_label{
    display: flex;
    flex-direction: row;
    color: #4c4c4c;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    width: 80px;
}
.recipies_solutions_row{
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}
.recipies_solutions_repethead{
    display: flex;
    width: 30px;
    height: 30px;
    user-select: none;
    cursor: pointer;
}
.recipies_solutions_repethead_notaccepted{
    border: red 1px solid;
}
.recipies_solutions_repethead_draft{
    border: rgb(131, 130, 130) 1px solid;
}
.recipies_solutions_repethead_moderation{
    border: orange 3px solid;
}
.recipies_solutions_repethead_accepted{
    border:#0dc21c 1px solid;
}


.recipe_container{
    display: flex;
    @media(max-width:799px) {  
        flex-direction: column;
        gap: 50px;
    }
    @media(min-width:800px) {
        flex-direction: row;
        gap: 50px;

    }

}

#recipe_codeinfo_block{
    display: flex;
    flex-direction: column;
}

#recipe_codelabel {
    display: flex;
    flex-direction: row;
    font-size: 16px;
    color: #999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#recipe_problemexample_block{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 400px;
    }
    
#recipe_problemexample_theproblem{
    display: inline;
    font-family: monospace;

}
#recipe_problemexample_thepicture{
    display: flex;
    width: 150px;
    height: 150px;
}
#recipe_recipe_block{
    display: flex;
    flex-direction: column;
    border-left: #05b90e 2px solid; border-bottom-left-radius: 2px; padding-left: 1rem; border-top-left-radius: 2px;
    gap: 20px;
}

#recipe_recipeauthor_row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;

}

#recipe_recipeauthor_author{
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    color: #423f3f;
}

#recipe_recipestate_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: end;
    border-bottom: #e8e8e8 1px solid;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}

.recipe_recipestate_label{
    display: flex;
    color: #4c4c4c;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100px;
}

#recipe_recipestate_state{
    display: flex;

    font-size: 16px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.recipe_editablepart{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: #e8e8e8 1px solid;
}
.recipe_recipelink_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: end;
    /* border-bottom: #e8e8e8 1px solid;  */
    justify-content: space-between;
}
.recipe_recipelink_label{
    display: flex;
    color: #4c4c4c;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100px;
    user-select: none;
}
.recipe_recipelink_link{
    display: flex;
}
.recipe_editable_input {
    border:0;
    outline:0; 
    width: 300px;
    text-align: right;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color:#0088cc;
  
  }


  #recipe_recipeaddressee_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: end;
    /* border-bottom: #e8e8e8 1px solid; */
    justify-content: space-between;
  }
  .recipe_recipeaddressee_label{
    display: flex;
    color: #4c4c4c;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100px;
    user-select: none;
  }
  #recipe_recipeaddressee_all,#recipe_recipeaddressee_studentsonly{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    user-select: none;
    text-align: center;
    width: 75px;

  }
  .recipe_option_active{
    color:#0088cc;
    cursor: pointer;
    
  }
  .recipe_option_selected{
    font-weight: bold;
    border-bottom:#0dc21c 2px solid;
  }

  #recipe_isfree_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: end;
    /* border-bottom: #e8e8e8 1px solid; */
    justify-content: space-between;
  }

  .recipe_recipeisfree_label{
    display: flex;
    color: #4c4c4c;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100px;
    user-select: none;
  }

  #recipe_recipeisfree_free,#recipe_recipeisfree_donors{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    width: 75px;
    user-select: none;
  }
.recipe_buttons_block{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
  #recipe_buttons_normal{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
    border-left: #e8e8e8 2px solid; border-bottom-left-radius: 2px; padding-left: 1rem; border-top-left-radius: 2px;
  }
  #recipe_buttons_danger{
    width: 40%;
    display: flex;
    flex-direction: column;
    
    gap: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: red;
    border-left: red 2px solid; border-bottom-left-radius: 2px; padding-left: 1rem; border-top-left-radius: 2px;
  }

  .recipe_buttons_hidden{
    height: 0;
  }
/*
        GGGGGGGGGGGGGEEEEEEEEEEEEEEEEEEEEEENNNNNNNN        NNNNNNNNEEEEEEEEEEEEEEEEEEEEEERRRRRRRRRRRRRRRRR    222222222222222    
     GGG::::::::::::GE::::::::::::::::::::EN:::::::N       N::::::NE::::::::::::::::::::ER::::::::::::::::R  2:::::::::::::::22  
   GG:::::::::::::::GE::::::::::::::::::::EN::::::::N      N::::::NE::::::::::::::::::::ER::::::RRRRRR:::::R 2::::::222222:::::2 
  G:::::GGGGGGGG::::GEE::::::EEEEEEEEE::::EN:::::::::N     N::::::NEE::::::EEEEEEEEE::::ERR:::::R     R:::::R2222222     2:::::2 
 G:::::G       GGGGGG  E:::::E       EEEEEEN::::::::::N    N::::::N  E:::::E       EEEEEE  R::::R     R:::::R            2:::::2 
G:::::G                E:::::E             N:::::::::::N   N::::::N  E:::::E               R::::R     R:::::R            2:::::2 
G:::::G                E::::::EEEEEEEEEE   N:::::::N::::N  N::::::N  E::::::EEEEEEEEEE     R::::RRRRRR:::::R          2222::::2  
G:::::G    GGGGGGGGGG  E:::::::::::::::E   N::::::N N::::N N::::::N  E:::::::::::::::E     R:::::::::::::RR      22222::::::22   
G:::::G    G::::::::G  E:::::::::::::::E   N::::::N  N::::N:::::::N  E:::::::::::::::E     R::::RRRRRR:::::R   22::::::::222     
G:::::G    GGGGG::::G  E::::::EEEEEEEEEE   N::::::N   N:::::::::::N  E::::::EEEEEEEEEE     R::::R     R:::::R 2:::::22222        
G:::::G        G::::G  E:::::E             N::::::N    N::::::::::N  E:::::E               R::::R     R:::::R2:::::2             
 G:::::G       G::::G  E:::::E       EEEEEEN::::::N     N:::::::::N  E:::::E       EEEEEE  R::::R     R:::::R2:::::2             
  G:::::GGGGGGGG::::GEE::::::EEEEEEEE:::::EN::::::N      N::::::::NEE::::::EEEEEEEE:::::ERR:::::R     R:::::R2:::::2       222222
   GG:::::::::::::::GE::::::::::::::::::::EN::::::N       N:::::::NE::::::::::::::::::::ER::::::R     R:::::R2::::::2222222:::::2
     GGG::::::GGG:::GE::::::::::::::::::::EN::::::N        N::::::NE::::::::::::::::::::ER::::::R     R:::::R2::::::::::::::::::2
        GGGGGG   GGGGEEEEEEEEEEEEEEEEEEEEEENNNNNNNN         NNNNNNNEEEEEEEEEEEEEEEEEEEEEERRRRRRRR     RRRRRRR22222222222222222222
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/
.generator2_container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#generator2_bank_container{
    display: flex;
    flex-direction: column;
    @media screen and (min-width: 800px) {

        width: 50%;
    }

} 
#generator2_task_container{
    display: flex;
    flex-direction: column;
    align-items: end;
    background-color: aliceblue;
    @media screen and (max-width: 799px) {
        width: 100%;
     }
     @media screen and (min-width: 800px) {
         width: 50%;
     }
} 


#generator2_bankfilter_container{
    display: flex;
    background-color: white;
    flex-direction: row;
    gap: 10px;
    scroll-margin-block-start: 110px;
    scroll-behavior: smooth;
    width: calc(100% - 50px);
    /* height: 50px; */
    /* left: 5vw; */
    /* position: fixed; */
    padding: 5px;
    /* border-radius: 5px;  */
    /*border-bottom: 1px solid #bbddaa;*/
    
    /* border-radius: 5px; */
    /* border: 4px solid #423f3f; */
    /* border-top: #423f3f 2px dashed; */
    /* border-bottom: #423f3f 2px dashed; */

    /* box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .10); */
    margin-bottom: 10px;
}

#generator2_bankfilter_sources{
    display: flex;
    width: 100%;
    flex-direction: column;

    flex-wrap: wrap;
    max-height: 45px;

    /* border-top: 1px solid #e8e8e8; */
}
#generator2_bankfilter_sources_container{
    display: flex;
    flex-direction: column;
 

    /* border-top: 1px solid #e8e8e8; */
}
#generator2_sourcesall_button{
    cursor: pointer;
    user-select: none;
}
.generator2_filter_item_selected{
    /* background-color: rgb(29, 252, 0); */
    font-weight: 900;

}


.generator2_bankfilter_source_label{
    color:#0088cc;
    cursor: pointer;
    user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    border: #423f3f 1px dashed;
    width: 70px;
    text-align: center;

}
#generator2_bankfilter_tasknums{
    display: flex;
    flex-direction: row;
    /* width: 100%; */
    /* height: 25px; */

}
#generator2_part1all_button{
    cursor: pointer;
    user-select: none;
}
#generator2_bankfilter_tasknums_part1{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 25px;
    flex-wrap: wrap;
}
#generator2_bankfilter_tasknums_part1_container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 25px;

}
#generator2_part2all_button{
    cursor: pointer;
    user-select: none;
}
#generator2_bankfilter_tasknums_part2{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 25px;

    flex-wrap: wrap;
}
#generator2_bankfilter_tasknums_part2_container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 25px;


}
.generator2_bankfilter_tasknum_label{
    color:#0088cc;
    cursor: pointer;
    user-select: none;
    font-size: 16px;
    width: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border: #4c4c4c 1px dashed;



}

#generator2_taskcreation_container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    width: calc(100% - 50px);
    /* height: 50px; */
    gap: 10px;
    background-color: aliceblue;
    /* z-index: 1; */
    /* right: 5vw;
    position: fixed; */
    padding: 5px;
    /* border-radius: 5px; */
    /* border: 4px solid #423f3f; */
    /* border: 1px dashed #423f3f; */
    margin-bottom: 10px;
    scroll-margin-block-start: 110px;
    scroll-behavior: smooth;
    /* box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .10); */
}


#generator2_actions_container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    width: 100%;
    height: fit-content;
    /* border-left: 1px solid #e8e8e8; */
    /* position:fixed; */



    /* top: 200px; */
    /* box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .10); */


}
.generator2_WASDheader{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #423f3f;
    font-weight: 900;
    user-select: none;
    margin-left: 50px;

}

.generator2_action{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #0088cc;
    cursor: pointer;
    user-select: none;
    padding-left: 5px;
}



#generator2_generatebutton{
 cursor: pointer;
 user-select: none;
}
#generator2_pdfbutton{
 cursor: pointer;
 user-select: none;
}
.generator2_disabledbutton{
    opacity: 0.2;
}
#generator2_bank_and_task_container{
    display: flex;
    @media screen and (max-width: 799px) {
        display: flex;
        flex-direction: column;
        gap: 100px;
        width: 100%;
        margin-top: 60px;
    }
    @media screen and (min-width: 800px) {
        flex-direction: row;
        justify-content: space-between;
        /* position: relative;
        top: 100px; */
        width: 100%;
        margin-top: 60px;
    }


}

#generator2_bank_problems_container{

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

        width: 100%;
    }
    @media screen and (min-width: 800px) {

        /* position: relative;
        top: 100px; */
        width: calc(100% - 50px);
    }

    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    
}

.generator2_bank_problem_example_container{
    display: flex;
    flex-direction: row;
    border: #4c4c4c 1px dotted;
    /* justify-content: space-between;  */
    /* border: 1px solid #e8e8e8;  */
}
.generator2_bank_problem_example{
    display: flex;
    flex-direction: column;
    
    padding: 5px;
    width: 100%;
}
.generator2_bank_problem_example_rightdiv{
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: end;
}
.generator2_bank_problem_example_header{
    display: flex;
    flex-direction: row;
    font-size: 16px;
    color: #999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.generator2_bank_problem_example_problem{
    @media screen and (max-width: 799px) {
        display: flex;
        flex-direction: column-reverse;
        
    }
    @media screen and (min-width: 800px) {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

}
.generator2_bank_problem_example_content{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.generator2_bank_problem_example_theproblem{
    display: inline;
    font-family: monospace;

}
.generator2_bank_problem_example_thepicture{
    display: flex;
    width: 150px;
    height: 150px;

   

}
.generator2_bank_problem_example_controls{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* width: 40px; */
    height: 100%;

    gap: 10px;
}

.generator2_bank_problem_example_controls_topblock{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 40px; */
 

}
.generator2_bank_problem_example_controls_middleblock{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 40px; */


}
.generator2_bank_problem_example_controls_bottomblock{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 40px; */


}
.generator2_bank_problem_example_control_first_green{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0dc21c;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}
.generator2_bank_problem_example_control_first_link{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0088cc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}
.generator2_bank_problem_example_control{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0dc21c;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.generator2_bank_problem_example_control_info{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #423f3f;
    font-family: monospace;
    font-size: 20px;
}


#generator2_taskinfo_container{
    display: flex;
    flex-direction: row;
    align-items: end;
}
#generator2_taskinfo_count{
    margin-top: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10px;
}
.generator2_taskinfo_count_none{
    opacity: 0.2;
}







#generator2_task_problems_container{
    min-height: 60vh;
    height: min-content;
    gap: 15px;
    @media screen and (max-width: 799px) {

        width: 100%;
    }
    @media screen and (min-width: 800px) {

        /* position: relative;
        top: 100px; */
        width: calc(100% - 50px);
    }
}



.generator2_task_editableheader {
    border: 0;
    outline: 0;
    width: 100%;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: #0088cc;
    font-weight: 900;
}
.generator2_task_problem_example_container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* border: 1px solid #e8e8e8;  */
    padding: 10px;
    gap: 15px;
}
.generator2_task_problem_example_leftdiv{
    display: flex;
    flex-direction: column;
}
.generator2_task_problem_example_rightdiv{
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: end;
}
.generator2_task_problem_example_header{
    display: flex;
    flex-direction: row;
    font-size: 16px;
    color: #999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.generator2_task_problem_example_content{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.generator2_task_problem_example_theproblem{
    display: inline;
    font-family: monospace;

}
.generator2_task_problem_example_thepicture{
    display: flex;
    width: 150px;
    height: 150px;
}


.generator2_task_problem_example_controls{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 40px;
    height: 100%;
    border-left: 1px solid #e8e8e8;
    gap: 10px;
}

.generator2_task_problem_example_controls_topblock{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
 

}
.generator2_task_problem_example_controls_middleblock{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;


}
.generator2_task_problem_example_controls_bottomblock{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;


}
.generator2_task_problem_example_control_first_green{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0dc21c;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}
.generator2_task_problem_example_control_first_link{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0088cc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}
.generator2_task_problem_example_control{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0dc21c;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.generator2_task_problem_example_control_info{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0dc21c;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}



















#generator_datasources{
    display: flex;
    flex-direction: row;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 20px;
    
}



.generator_datasource{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

#generator_examtasknums{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e8e8e8;
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 20px;
    flex-wrap: wrap;
}

.generator_examtasknum{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

#generator_tags{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e8e8e8;
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 20px;
}

.generator_tag{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}


.generators_actions_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
 
}
.generators_filter {
}
.generators_createone {
}

.generators_generator_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-bottom: 1px solid #e8e8e8;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}


.generator_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.generator_item_label{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 10px;
}





/*

PPPPPPPPPPPPPPPPP   RRRRRRRRRRRRRRRRR           GGGGGGGGGGGGGRRRRRRRRRRRRRRRRR      SSSSSSSSSSSSSSS 
P::::::::::::::::P  R::::::::::::::::R       GGG::::::::::::GR::::::::::::::::R   SS:::::::::::::::S
P::::::PPPPPP:::::P R::::::RRRRRR:::::R    GG:::::::::::::::GR::::::RRRRRR:::::R S:::::SSSSSS::::::S
PP:::::P     P:::::PRR:::::R     R:::::R  G:::::GGGGGGGG::::GRR:::::R     R:::::RS:::::S     SSSSSSS
  P::::P     P:::::P  R::::R     R:::::R G:::::G       GGGGGG  R::::R     R:::::RS:::::S            
  P::::P     P:::::P  R::::R     R:::::RG:::::G                R::::R     R:::::RS:::::S            
  P::::PPPPPP:::::P   R::::RRRRRR:::::R G:::::G                R::::RRRRRR:::::R  S::::SSSS         
  P:::::::::::::PP    R:::::::::::::RR  G:::::G    GGGGGGGGGG  R:::::::::::::RR    SS::::::SSSSS    
  P::::PPPPPPPPP      R::::RRRRRR:::::R G:::::G    G::::::::G  R::::RRRRRR:::::R     SSS::::::::SS  
  P::::P              R::::R     R:::::RG:::::G    GGGGG::::G  R::::R     R:::::R       SSSSSS::::S 
  P::::P              R::::R     R:::::RG:::::G        G::::G  R::::R     R:::::R            S:::::S
  P::::P              R::::R     R:::::R G:::::G       G::::G  R::::R     R:::::R            S:::::S
PP::::::PP          RR:::::R     R:::::R  G:::::GGGGGGGG::::GRR:::::R     R:::::RSSSSSSS     S:::::S
P::::::::P          R::::::R     R:::::R   GG:::::::::::::::GR::::::R     R:::::RS::::::SSSSSS:::::S
P::::::::P          R::::::R     R:::::R     GGG::::::GGG:::GR::::::R     R:::::RS:::::::::::::::SS 
PPPPPPPPPP          RRRRRRRR     RRRRRRR        GGGGGG   GGGGRRRRRRRR     RRRRRRR SSSSSSSSSSSSSSS  
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/
.general_progress_container{
    display: flex;
    flex-direction: column;
  }
  .progress_tasknum_and_task_container{
    display: flex;
    @media screen and (max-width: 799px) {
        display: flex;
        flex-direction: column;
    }
    @media screen and (min-width: 800px) {
        display: flex;
        flex-direction: row;
        gap: 100px;
        justify-content: space-between;
    }
  }
  
#progress_container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
}

#progress_estimation_block{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    background-color: #4c4c4c;
    padding: 5px;
    gap: 10px;
    width: 100%;
    

}
#progress_estimation_block_wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    border: #423f3f 2px solid;
    padding: 5px;
    width: 50%;
}

#progress_estimation_leftblock{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#progress_estimation_ava{
    display: flex;
    height: 75px;
    width: 75px;
    border-radius: 50%;
    overflow: hidden;
}
#progress_estimation_rightblock{
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 5px;
    align-items: start;
    flex-grow: 1;
}
#progress_estimation_barandres_row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    width: 100%;
    flex-grow: 1;
}
#progress_estimation_subjandscale_row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#progress_estimation_barandres_bar{
 display: flex;
 flex-direction: row;
 gap: 2px;
 height: 15px;
 padding: 5px;
 border: #e8e8e8 1px solid;
 width: 100%;
 flex-grow: 1;
}
.progress_estimation_barandres_item{
    display: flex;
    min-width: 3px;
    background-color: #e8e8e8;
    flex-grow: 1;
}

.progress_estimation_barandres_item_empty{
    display: flex;
    min-width: 3px;
    border: #e8e8e8 1px solid;
    flex-grow: 1;
}
#progress_estimation_firstrow{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: start;

}

.progress_estimation_firstrow_label{
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    color:#4c4c4c;
}


#progress_estimation_finalresult{
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    font-weight: bold;
    color: #e8e8e8;
}

#progress_estimation_subject{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #e8e8e8;
}

#progress_estimation_usernickname{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #e8e8e8;
    position: relative;
}

.progress_estimation_usernickname_active{

    color:#0088cc;
    user-select: none;
    cursor: pointer;
}

#progress_user_choise_wrapper{
    position: absolute;
    top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    z-index: 1;
    overflow-y: auto;
}
#progress_user_choise_options{
    transition-duration: 0ms;
    background-color: #423f3f;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: start;
    justify-content: space-between;
    cursor: default;
    user-select: none;
}

.progress_user_choise_options_hidden{
    width: 0px;
    height: 0px;
}
.progress_user_choise_options_shown{
    /* width: 200px; */

    padding: 10px;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .10); 
}

.progress_user_choise_addressee_row{
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 5px;
    user-select: none;
    cursor: pointer;
    
    }
    
.progress_user_choise_addressee_row_selected{
    border: 1px solid #0dc21c;
}
.progress_user_choise_ava{
    display: flex;
    width: 40px;
    height: 40px;
}
.progress_user_choise_nickname{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #e8e8e8;
}

#progress_estimation_vkshare{
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
}


#progress_map_and_task_container{
    display: flex;
    margin-top: 10px;
    @media screen and (max-width: 799px) {
        display: flex;
        flex-direction: column;
    }
    @media screen and (min-width: 800px) {
        display: flex;
        flex-direction: row;
        gap: 100px;
        justify-content: space-between;
        /* padding-left: 50px; */
    }
}

#progress_progressmap_block{
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* margin-left: 50px; */
    /* align-items: center; */


    /* background-color: var(--vscode-gray); */
}
.progress_progressmap_container{
    display: flex;
    flex-direction: column;
}
#progress_progressmap_topaffordancesblock{
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 100px;
    margin-bottom: 20px;
}


#go_sber_variantiks{
    background-color: rgb(41, 167, 41);
    color: black;
  
  
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: transform 0.2s;
      font-family: monospace;
      width: 40px;
      height: 40px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
  }
#go_fipi_variantiks{
    background-color: var(--warhol-electric-green);
    color: var(--button-text-dark);
  
  
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: transform 0.2s;
      font-family: monospace;
      width: 40px;
      height: 40px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
  }
  #go_yash_variantiks{
    background-color: var(--warhol-electric-green);
    color: var(--button-text-dark);
  
  
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: transform 0.2s;
      font-family: monospace;
      width: 40px;
      height: 40px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
  }
  #go_statgrad_variantiks{
    background-color: var(--warhol-electric-green);
    color: var(--button-text-dark);
  
  
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: transform 0.2s;
      font-family: monospace;
      width: 40px;
      height: 40px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
  }
  #go_real_variantiks{
    background-color: var(--warhol-electric-green);
    color: var(--button-text-dark);
  
  
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: transform 0.2s;
      font-family: monospace;
      width: 40px;
      height: 40px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
  }
#progress_tasknum_container{
    display: flex;
    flex-direction: column;
    min-height: 200px;
    @media screen and (max-width: 799px) {
        width: 100%;
    }
    @media screen and (min-width: 800px) {
        width: 45%;
    }

    
}

#progress_map_container{
    display: flex;
    
    gap: 30px;

    @media screen and (max-width: 799px) {
        width: 100%;
        flex-direction: column;
    }
    @media screen and (min-width: 800px) {
        width: 100%;
        flex-direction: row;
    }
    
}


.progress_situation_block_header{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
}
.progress_situation_examtasknum_block{
    display: flex;
    flex-direction: row;
    /* background-color: #999; */



}

  :root {
    --wave-blue: #0066FF;
    --wave-pink: #FF00FF;
    --wave-cyan: #00FFFF;
    --pulse-red: #CC0000;
    --core-yellow: #FFFF00;
    --background: #f0f7ff;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  @keyframes wave-pulse {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }
  
.progress_situation_examtasknum_headerrow{

    /* background: radial-gradient(circle at 30% 70%, #4ECDC4 20%, transparent 70%); */
    /* background: repeating-radial-gradient(circle at 50% 50%, var(--wave-pink) 0% 2%, transparent 2% 4%, var(--wave-pink) 4% 6%, transparent 6% 8%); */
    /* background: repeating-radial-gradient(circle at 30% 70%, var(--wave-cyan), var(--wave-cyan) 15%, transparent 15%, transparent 30%); */
/* 
    animation: wave-pulse 1s infinite;
    background: radial-gradient(circle, var(--wave-cyan) 0%, var(--wave-blue) 70%, transparent 85%); */


    /* background: radial-gradient(
        circle at center in hsl longer hue,
        red,
        blue
      ); */
      /* background: radial-gradient(circle at 30% 70%, transparent 30%, var(--warhol-blue) 70%); */
      /* background: repeating-radial-gradient(circle at center center, yellow 10px, yellow 20px, #009966 20px, #009966 30px, purple 30px, purple 40px); */
    color: var(--button-text-dark);
    border: none;
    cursor: pointer;
    font-weight: bold;

    font-family: monospace;
    display: flex;

    justify-content: center;
    align-items: center;
    /* display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 250px;
    min-width: 250px;
    /* background-color: var(--warhol-blue); 
    background-color: #999;
    color: white;
    padding: 0px 15px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s;
    font-family: monospace;
    align-items: center; */
}
.progress_situation_examtasknum_headerrow_leftpart{
    
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 150px;

}

.progress_situation_examtasknum_headerrow_rightpart{
    display: flex;
    flex-direction: row;
    gap: 5px;


}

.progress_situation_examtasknum_headerrow_rightpart_label{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: pink;
    /* width: 75px; */
    align-items: end;
    text-align: right;
}
.progress_situation_examtasknum_headerrow_rightpart_primarypoints{
    display: flex;
    flex-direction: row;
    justify-content: end;
    text-align: right;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    width: 20px;
    margin-left: 20px;
    color: var(--vscode-text);
    /* font-weight: bold; */
}
.progress_situation_examtasknum_headerrow_rightpart_action{
    display: flex;
}
.progress_situation_examtasknum_codestates_block{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    gap: 3px; 
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 20px;
}
.progress_situation_examtasknum_codestate_item{
    /* display: flex;
    flex-direction: row;
    height: 15px;
    width: 15px;

    user-select: none;
    cursor: pointer; */
    width: 15px;
    height: 15px;
    /* border: 1px solid var(--vscode-border); */
    cursor: pointer;
    border-radius: 50%;

}

.progress_situation_examtasknum_codestate_item_wrapper{
    display: flex;
    flex-direction: row;
    height: 25px;
    width: 20px;
    /* border-radius: 4px; */
    user-select: none;
    justify-content: center;
    align-items: center;

}


.progress_situation_examtasknum_codestate_item_wrapper_active{
    cursor: pointer;
    border: #423f3f 1px dotted;
    background-color: white;
    /* border: 1px solid var(--vscode-text); */
    /* border: #999 1px dashed; */
}
.progress_situation_examtasknum_codestate_item_wrapper_inactive{
 background-color: #999;
 /* border: #999 1px solid; */
}

/*
                                                                                                                                            
                                       bbbbbbbb                                                                                             
                                       b::::::b                    CCCCCCCCCCCCC     OOOOOOOOO     DDDDDDDDDDDDD      EEEEEEEEEEEEEEEEEEEEEE
                                       b::::::b                 CCC::::::::::::C   OO:::::::::OO   D::::::::::::DDD   E::::::::::::::::::::E
                                       b::::::b               CC:::::::::::::::C OO:::::::::::::OO D:::::::::::::::DD E::::::::::::::::::::E
                                        b:::::b              C:::::CCCCCCCC::::CO:::::::OOO:::::::ODDD:::::DDDDD:::::DEE::::::EEEEEEEEE::::E
ppppp   ppppppppp   rrrrr   rrrrrrrrr   b:::::bbbbbbbbb     C:::::C       CCCCCCO::::::O   O::::::O  D:::::D    D:::::D E:::::E       EEEEEE
p::::ppp:::::::::p  r::::rrr:::::::::r  b::::::::::::::bb  C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::E             
p:::::::::::::::::p r:::::::::::::::::r b::::::::::::::::b C:::::C              O:::::O     O:::::O  D:::::D     D:::::DE::::::EEEEEEEEEE   
pp::::::ppppp::::::prr::::::rrrrr::::::rb:::::bbbbb:::::::bC:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::::::::::::E   
 p:::::p     p:::::p r:::::r     r:::::rb:::::b    b::::::bC:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::::::::::::E   
 p:::::p     p:::::p r:::::r     rrrrrrrb:::::b     b:::::bC:::::C              O:::::O     O:::::O  D:::::D     D:::::DE::::::EEEEEEEEEE   
 p:::::p     p:::::p r:::::r            b:::::b     b:::::bC:::::C              O:::::O     O:::::O  D:::::D     D:::::DE:::::E             
 p:::::p    p::::::p r:::::r            b:::::b     b:::::b C:::::C       CCCCCCO::::::O   O::::::O  D:::::D    D:::::D E:::::E       EEEEEE
 p:::::ppppp:::::::p r:::::r            b:::::bbbbbb::::::b  C:::::CCCCCCCC::::CO:::::::OOO:::::::ODDD:::::DDDDD:::::DEE::::::EEEEEEEE:::::E
 p::::::::::::::::p  r:::::r            b::::::::::::::::b    CC:::::::::::::::C OO:::::::::::::OO D:::::::::::::::DD E::::::::::::::::::::E
 p::::::::::::::pp   r:::::r            b:::::::::::::::b       CCC::::::::::::C   OO:::::::::OO   D::::::::::::DDD   E::::::::::::::::::::E
 p::::::pppppppp     rrrrrrr            bbbbbbbbbbbbbbbb           CCCCCCCCCCCCC     OOOOOOOOO     DDDDDDDDDDDDD      EEEEEEEEEEEEEEEEEEEEEE
 p:::::p                                                                                                                                    
 p:::::p                                                                                                                                    
p:::::::p                                                                                                                                   
p:::::::p                                                                                                                                   
p:::::::p                                                                                                                                   
ppppppppp
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################

*/







#problemcode_example_controls{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#problemcode_example_controls_inc{
    width: 20px;
    height: 20px;
    display: flex;
    user-select: none;
    cursor: pointer;
}
#problemcode_example_controls_quant{
    width: 20px;
    height: 20px;
    display: flex;
    user-select: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}
#problemcode_example_controls_dec{
    width: 20px;
    height: 20px;
    display: flex;
    user-select: none;
    cursor: pointer;
}

#problemcode_example_controls_gen{
    width: 20px;
    height: 20px;
    display: flex;
    user-select: none;
    cursor: pointer;
}

#progress_tasknum_problems_container{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
/*                                                                                                                           
RRRRRRRRRRRRRRRRR                  AAA         TTTTTTTTTTTTTTTTTTTTTTTIIIIIIIIIINNNNNNNN        NNNNNNNN        GGGGGGGGGGGGG
R::::::::::::::::R                A:::A        T:::::::::::::::::::::TI::::::::IN:::::::N       N::::::N     GGG::::::::::::G
R::::::RRRRRR:::::R              A:::::A       T:::::::::::::::::::::TI::::::::IN::::::::N      N::::::N   GG:::::::::::::::G
RR:::::R     R:::::R            A:::::::A      T:::::TT:::::::TT:::::TII::::::IIN:::::::::N     N::::::N  G:::::GGGGGGGG::::G
  R::::R     R:::::R           A:::::::::A     TTTTTT  T:::::T  TTTTTT  I::::I  N::::::::::N    N::::::N G:::::G       GGGGGG
  R::::R     R:::::R          A:::::A:::::A            T:::::T          I::::I  N:::::::::::N   N::::::NG:::::G              
  R::::RRRRRR:::::R          A:::::A A:::::A           T:::::T          I::::I  N:::::::N::::N  N::::::NG:::::G              
  R:::::::::::::RR          A:::::A   A:::::A          T:::::T          I::::I  N::::::N N::::N N::::::NG:::::G    GGGGGGGGGG
  R::::RRRRRR:::::R        A:::::A     A:::::A         T:::::T          I::::I  N::::::N  N::::N:::::::NG:::::G    G::::::::G
  R::::R     R:::::R      A:::::AAAAAAAAA:::::A        T:::::T          I::::I  N::::::N   N:::::::::::NG:::::G    GGGGG::::G
  R::::R     R:::::R     A:::::::::::::::::::::A       T:::::T          I::::I  N::::::N    N::::::::::NG:::::G        G::::G
  R::::R     R:::::R    A:::::AAAAAAAAAAAAA:::::A      T:::::T          I::::I  N::::::N     N:::::::::N G:::::G       G::::G
RR:::::R     R:::::R   A:::::A             A:::::A   TT:::::::TT      II::::::IIN::::::N      N::::::::N  G:::::GGGGGGGG::::G
R::::::R     R:::::R  A:::::A               A:::::A  T:::::::::T      I::::::::IN::::::N       N:::::::N   GG:::::::::::::::G
R::::::R     R:::::R A:::::A                 A:::::A T:::::::::T      I::::::::IN::::::N        N::::::N     GGG::::::GGG:::G
RRRRRRRR     RRRRRRRAAAAAAA                   AAAAAAATTTTTTTTTTT      IIIIIIIIIINNNNNNNN         NNNNNNN        GGGGGG   GGGG
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/


#rating2_container{
    @media screen and (max-width: 799px) {
        display: flex;
        flex-direction: column;
        gap: 100px;

    }
    @media screen and (min-width: 800px) {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
        flex-wrap: wrap;
}
}
#rating2_friends_block{
    display: flex;
    flex-direction: column;
    max-width: 350px;
}
.rating2_filter{
    display: flex;
    flex-direction: column;
    width: 150px;
    gap: 20px;
    margin-right: 20px;
    align-items:end;
}
.rating2_filter_label {
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    color: var(--vscode-text);
}

.rating2_filter_selection{
    font-family: monospace;
    color: var(--warhol-blue);
    user-select: none;
    cursor: pointer;
    text-align: right;
}
.rating2_block_header_container{
    display: flex;
   font-family: monospace;
   font-size: 30px;
   align-items: center;
}
.rating2_block_header{
    display: flex;
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
}
.rating2_block_header2{
    display: flex;
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    padding-top: 10px;
}

.rating2_vkfriendsblock{
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}
.rating2_vkfriends_friend{
    display: flex;
    flex-direction: column;
    width: 50px;
    height: 60px;
    user-select: none;
    cursor: pointer;
}
.rating2_vkfriends_friend_selected{
    border: 4px solid #05b90e
}

.rating2_vkfriends_friend_ava{
    display: flex;
    width: 50px;
    height: 50px;
}
.rating2_vkfriends_friend_label{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 9px;
    color: #4c4c4c;
}

.rating2_block_ivite_action {
    display: flex;
    flex-direction: row;
    justify-content: end;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #0088cc;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    width: 100px;
    text-align: right;

}
.rating2_block_row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    border-bottom: #4c4c4c 1px dotted;
}
.rating2_block_position{
    display: flex;
    flex-direction: row;
    justify-content: end;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #423f3f;
    width: 30px;
    text-align: right;
    align-items: start;
}
.rating2_block_ava{
    display: flex;
    width: 30px;
    height: 30px;
}
.rating2_block_userinfo{
    display: flex;
    flex-direction: row;
    align-items: start;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    width: 150px;
    cursor: pointer;
    user-select: none;
    color: var(--warhol-blue);
    font-weight: bold;
}
.rating2_block_result{
    display: flex;
    flex-direction: row;
    font-size: 30px;
    justify-content: end;
    font-weight:lighter;
    font-family: monospace;
    width: 100px;
    align-items: start;
}


#rating2_program_block{
    display: flex;
    flex-direction: column;
    max-width: 300px;
    background: white;
    padding: 25px;
    border: 1px dotted var(--vscode-text);

}
#rating2_university_block{
    display: flex;
    flex-direction: column;
    max-width: 300px;
    background: white;
    padding: 25px;
    border: 1px dotted var(--vscode-text);

}
#rating2_overall_block{
    display: flex;
    flex-direction: column;
    max-width: 300px;
    background: white;
    padding: 25px;
    border: 1px dotted var(--vscode-text);

}






/*
TTTTTTTTTTTTTTTTTTTTTTT         AAA                 SSSSSSSSSSSSSSS KKKKKKKKK    KKKKKKK   SSSSSSSSSSSSSSS 
T:::::::::::::::::::::T        A:::A              SS:::::::::::::::SK:::::::K    K:::::K SS:::::::::::::::S
T:::::::::::::::::::::T       A:::::A            S:::::SSSSSS::::::SK:::::::K    K:::::KS:::::SSSSSS::::::S
T:::::TT:::::::TT:::::T      A:::::::A           S:::::S     SSSSSSSK:::::::K   K::::::KS:::::S     SSSSSSS
TTTTTT  T:::::T  TTTTTT     A:::::::::A          S:::::S            KK::::::K  K:::::KKKS:::::S            
        T:::::T            A:::::A:::::A         S:::::S              K:::::K K:::::K   S:::::S            
        T:::::T           A:::::A A:::::A         S::::SSSS           K::::::K:::::K     S::::SSSS         
        T:::::T          A:::::A   A:::::A         SS::::::SSSSS      K:::::::::::K       SS::::::SSSSS    
        T:::::T         A:::::A     A:::::A          SSS::::::::SS    K:::::::::::K         SSS::::::::SS  
        T:::::T        A:::::AAAAAAAAA:::::A            SSSSSS::::S   K::::::K:::::K           SSSSSS::::S 
        T:::::T       A:::::::::::::::::::::A                S:::::S  K:::::K K:::::K               S:::::S
        T:::::T      A:::::AAAAAAAAAAAAA:::::A               S:::::SKK::::::K  K:::::KKK            S:::::S
      TT:::::::TT   A:::::A             A:::::A  SSSSSSS     S:::::SK:::::::K   K::::::KSSSSSSS     S:::::S
      T:::::::::T  A:::::A               A:::::A S::::::SSSSSS:::::SK:::::::K    K:::::KS::::::SSSSSS:::::S
      T:::::::::T A:::::A                 A:::::AS:::::::::::::::SS K:::::::K    K:::::KS:::::::::::::::SS 
      TTTTTTTTTTTAAAAAAA                   AAAAAAASSSSSSSSSSSSSSS   KKKKKKKKK    KKKKKKK SSSSSSSSSSSSSSS
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
##################################################################################################################################################################
*/


#taskslist2_container{
    display: flex; 
    flex-direction: column; 
    gap: 10px;
}

.taskslist2_headerblock{
    display: flex;
    flex-direction: column;
}
#taskslist2_mainheader{
    display: flex;
    flex: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;

}
#taskslist2_forby_row{
    display: flex;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    @media(max-width:799px) {  
        flex-direction: row;
        justify-content: space-between;
    }
    @media(min-width:800px) {
        flex-direction: row;
        gap: 10px;
    }
}

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

.taskslist2_trigger_active{
    color: #0088cc; 
}
.taskslist2_trigger_plain{
    color:#423f3f; 
}

.taskslist2_task_container{
    display: flex; 
    gap: 5px;
    border-bottom: 1px solid #bbddaa;
    width: 100%;
    padding-top: 10px;
    @media(max-width:799px) {  
        flex-direction: column;
    }
    @media(min-width:800px) {
        flex-direction: row;
        align-items: center;
    }

}

.taskslist2_task_infoblock{
    display: flex;
    @media(max-width:799px) {  
        flex-direction: column;
    }
    @media(min-width:800px) {
        flex-direction: row;
        gap: 10px;
    }
}

.taskslist2_task_infoblock_nametypedate{
display: flex;
flex-direction: row;
padding: 5px;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.taskslist2_task_infoblock_nametype{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 10px;
}
.taskslist2_task_infoblock_name{
display: flex;
flex-direction: row;
gap: 5px;
align-items: center;
font-family: monospace;
font-size: 16px;
color:#0088cc;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.taskslist2_task_infoblock_type{
    display: flex;
    flex-direction: row;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #423f3f;
    width: 100px;
}
.taskslist2_task_infoblock_date{
    display: flex;
    flex-direction: row;
    width: 50px;
    gap: 5px;
    justify-content: end;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color:#999;
    user-select: none;
}
.taskslist2_task_infoblock_forby{

    @media(max-width:799px) {  
        display: flex;
        flex-direction: row;
        padding-left: 5px;
        padding-right: 5px;
        justify-content: space-between;
    }
    @media(min-width:800px) {
        display: flex;
        flex-direction: column;
        padding: 5px;
        justify-content: space-between;
        width: 95px;
    }


}

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

    gap: 5px;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 9px;
    color:#999;
    user-select: none;
}

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

    gap: 5px;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 9px;
    color:#999;
    user-select: none;
}


.taskslist2_task_resultsandactions_block{
    display: flex;
    @media(max-width:799px) {  
        flex-direction: column;
    }
    @media(min-width:800px) {
        flex-direction: row;
        gap: 10px;
        flex-grow: 1;
        justify-content: space-between;
    }
}
.taskslist2_problemsrow{
    display: flex;
    padding: 5px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.taskslist2_problemitem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.8em;
    min-width: 0.8em;
    height: 0.8em;
    min-height: 0.8em;
} 
.taskslist2_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%;
}
.taskslist2_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%;
}

.taskslist2_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%;
}

.taskslist2_task_resultandactions{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px;



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

    color: #423f3f;
    font-family: monospace;
    font-size: 16px;
    width: 150px;
}

.taskslist2_task_actions{
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 5px;
    width: 150px;
}