html, body {
height: 100vh;
  margin: 0;
}

:root {
    color-scheme: dark;
    --highlight_color: #3bb883;
    --text_first_color: #fff;
    --text_second_color: #b8b8bb;

    --background_main: #1f1f1f;
    --backgroundcolor_one: #161618;
    --backgroundcolor_two: #1b1b1f;
}

a {
    text-decoration: none;
    color: inherit;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome and Opera */
}

.nopoint--event {
    cursor: not-allowed;
    pointer-events: none;
}

#world_box {
    position: relative;
    z-index: 1;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    box-sizing: border-box;    

    height: 100%;
    width: 100%;

    background-color: #111014;
}


#left_box {
    position: relative;
    z-index: 3;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;    

    height: 100%;

    background-color: #16151b;
    transition: all ease-in-out 0.2s;
}

.left_box--normal {
     width: 320px;   
}

.left_box--small {
     width: 70px;   
}

#task_logo {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 4;

    height: 90px;
    width: 100%;

    flex-shrink: 0;

    background-repeat: no-repeat;
    background-position: center;

    box-sizing: border-box;
}

.task_logo--normal {
    background-image: url(/img/repo/task_logo.png);
    background-size: 160px 90px;
}

.task_logo--small {
    background-image: url(/img/repo/task_logo_small.png);
    background-size: 70px 90px;
}


#menu_box {
    
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;    

    overflow: hidden;
    height: 100%;
    width: 100%;
}

#menu_size_button {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;    
    padding: 0px 20px;

        flex-shrink: 0;

    height: 60px;
    width: 100%;
    
    background-color: transparent;
    border-bottom: 1px solid #2b2a33;

    transition: all ease-in-out 0.2s;
}

#menu_size_button:hover {
    cursor: pointer;
    filter: brightness(1.2);
    background-color: #1a1a1f;
}

#menu_size--icon {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;  
    
    flex-shrink: 0;

    height: 20px;
    width: 20px;
    border-radius: 50%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    transition: all ease-in-out 0.2s;

}


.menu_size--icon--normal {
    background-image: url(/img/repo/menu_arrow_left_icon.png);
}

.menu_size--icon--small {
    background-image: url(/img/repo/menu_arrow_right_icon.png);
}

#menu_size--text {
    margin-left: 10px;
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;    

    width: fit-content;

    color:#ffffff;
    font-size: 14px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
}


#menu_scroll_container {
    position: relative;
    z-index: 4;

    height: 100%;
    width: 100%;

    overflow-y: auto;
}

.menu_spacer {
    position: relative;
    z-index: 4;

    height: 20px;
    width: 100%;
}

.menu_titel_container {
    margin-top: 10px;
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;    
    padding: 0px 20px;

    height: 24px;
    width: 100%;
}

.menu_titel_container--small {
    justify-content: center !important;
}

.menu_titel--icon {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;   
    
        flex-shrink: 0;

    height: 10px;
    width: 10px;
    border-radius: 50%;

    background-color:#616161;

}

.menu_titel--text {
    margin-left: 10px;
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;    

    width: fit-content;

    color:#616161;
    font-size: 13px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.menu_button {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;    
    padding: 0px 20px;

    height: 50px;
    width: 100%;

    transition: all 0.2s ease-in-out;
}

.menu_button:hover { 
    cursor: pointer; filter: brightness(1.2); padding: 0px 25px; 
}

.menu_button:hover .menu_button--text { color: #ffac29; }


.menu_button--small {
    justify-content: center !important;
}

.menu_button--icon {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;    

    height: 20px;
    width: 20px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    transition: all ease-in-out 0.2s;

}



.menu_button--text {
    margin-left: 10px;
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;    

    width: fit-content;

    color:#ffffff;
    font-size: 15px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    transition: color 0.2s ease-in-out;

}

#menu_server_status_box {
    position: relative;
    z-index: 4;
    padding: 5px;
    margin-bottom: 5px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;    

    min-height: 0px;
    width: 100%;

    transition: all 0.2s ease-in-out;
}

#menu_server_status_container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5px;

    height: fit-content;
    width: 100%;
    border-radius: 5px;
    background-color: #1d1c24;
}

#menu_server_status--icon {
    display: none;
    position: relative;
    height: 14px;
    width: 14px;
    border-radius: 5px;
}

.menu_server_status--icon_online {
    background-color:#3bb883;
}

.menu_server_status--icon_offline {
    background-color:#b83b3b;
}

#menu_server_status--titel {
    font-size: 14px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;  
    margin-right: 10px;
}

#menu_server_status--text {
    font-size: 14px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;  
}

.menu_server_status--text_online {
    color:#3bb883;
}

.menu_server_status--text_offline {
    color:#b83b3b;  
}

#menu_account_container {
    position: relative;
    z-index: 4;

    display: flex;

    box-sizing: border-box;    
    align-items: flex-start;
    justify-content: flex-start;

    flex-shrink: 0;

    width: 100%;

    background-color: #1d1c24;
}

.menu_account_container--normal {
    height: 70px;
    flex-direction: row;
    flex-wrap: nowrap;
}

.menu_account_container--small {
    height: 140px;
    flex-direction: column;
    flex-wrap: wrap;
}

#menu_account_container--avatar {
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
    z-index: 4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;    

    height: 50px;
    width: 50px;

    border-radius: 50%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-color: #0c0c0c;

    transition: all 0.2s ease-in-out;
}

#menu_account_container--text {
    top: 17px;
    left: 70px;
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;

    color:#fff;
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;    
}

#menu_account_container--status {
    top: 32px;
    left: 70px;
    position: absolute;
    z-index: 4;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;

    font-size: 14px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;    
}

.menu_account_container--status_online {
    color:#3bb883;
}

.menu_account_container--status_offline {
    color:#696969;
}

#menu_account_container--logout_button {
    z-index: 4;
        position: absolute;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    height: 40px;
    width: 40px;

    background-color: #2b2a33;
    border: 1px solid #373642;
    border-radius: 5px;

    background-image: url(/img/repo/menu_logout_icon.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 24px;

    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);

}

#menu_account_container--logout_button:hover {
    cursor: pointer;
    filter: brightness(1.2);
}

.menu_account_container--logout_button--normal {
    top: 15px;
    right: 10px;

    transition: 0.2s all ease-in-out;
}

.menu_account_container--logout_button--small {
    top: 75px;
    right: 15px;

}