header{height: 110px;}
.headerLogo{float: left; position:relative; z-index: 1; width: 210px; padding-top: 20px;}
.headerLogo a{display: block;}
.headerLogo img{display: block; width: 100%;}

nav.headerMenu{display: block; padding: 14px 0px 0px; position: relative;}
nav.headerMenu > ul{display: inline-flex; width: auto; max-width:100%;}
nav.headerMenu > ul > li{padding-right: 14px; font-weight: 600; font-size: 18px; line-height: 20px;}
nav.headerMenu > ul > li:nth-child(1){padding-right: 0px;}

nav.headerMenu > ul > li > a{color: #ffffff; font-size: 23px; display: inline-block; position: relative;}
nav.headerMenu > ul > li a:hover{color: #1b75bc;}
nav.headerMenu > ul > li a:focus, nav.headerMenu > ul > li a:active{background-color:#ffffff; color: var(--secondary-color);}
nav.headerMenu > ul > li > a.active{color: #1b75bc;}

#welcome, .menuitem_text{display:none; width:0; height: 0; overflow: hidden}

nav.headerMenu > ul > li > span.fa-shield-alt {position:absolute;top:25px; right:-5px; color:#fdbe37}

.mobilePhone, .mobileShow, .headerMenu a.headerMenu_toggleMobile{display: none;}

.active_nav a span { color: #51C7F6}

#mail_menu_btn,#switch_to_teacher, #costumes_link, #convert_to_teacher{display: inline-block; position:absolute; top:7px; width:40px; height:40px; border:1px solid #b4b4b4; font-size: 25px; color:#ffffff}
#mail_menu_btn:hover{color:#545454}
#switch_to_teacher,#convert_to_teacher{background-color:#9c349a}
#switch_to_teacher:hover,#convert_to_teacher:hover{background-color:#d283ec; color:#545454}
#switch_to_student{background-color:#1765a3}
#switch_to_student:hover{background-color:#d9e4fc; color:#545454}
#convert_to_teacher{font-size:12px; line-height:15px; padding-top:5px; color:white}

#costumes_link{right:115px; padding-top:5px}
#costumes_link img{width:35px}

#mail_menu_btn{position: absolute; display: block; padding-top:4px; font-size: 25px}
/*#mail_menu_btn{position: absolute; display: block; top:10px; border: none; font-size: 35px}*/

@media screen and (max-width: 1024px) {
    header{height: 80px;}
    .headerLogo{width: 180px; padding-top: 16px;}
    .headerUpper{padding: 12px 0px 0px 0px;}
    /*nav.headerMenu{padding: 14px 0px 0px;}*/
    /*nav.headerMenu > ul > li{padding-right: 14px; font-size: 18px;}*/
}

/* @media screen and (max-width: 2560px) { */
    .headerUpper, .mobileHide {display: none;}
    #welcome{display: block; width:auto; height: auto}
    nav.headerMenu{position: absolute; z-index:200; top: 0px; padding: 0px;}
    .headerMenu a.headerMenu_toggleMobile{display: flex; flex-direction: column; justify-content: center; border: 1px solid #b4b4b4; width: 40px; height: 40px; padding: 3px 3px 0 3px;}
    .headerMenu a.headerMenu_toggleMobile span{display:block; height: 3px; background-color: #ffffff; margin: 2px}
    .headerMenu a.headerMenu_toggleMobile:hover span{background-color: #545454}
    nav.headerMenu > ul{display: block;}
    nav.headerMenu > ul[aria-hidden="true"]{display: none;}
    nav.headerMenu > ul > li{padding-right: 0px; border-bottom: 2px solid #ffffff}
    nav.headerMenu > ul > li:last-child{border: 0px}

    nav.headerMenu > ul > li > span.fa-shield-alt {top:30px; right:15px; font-size: 20px}
    .menuitem_text{display:inline-block; overflow: visible; vertical-align:top; width:auto; height: auto; color:#545454; margin-right:8px; font-size: 20px; font-weight: normal}
    a:hover .menuitem_text{color:#0fb8f6}


    #mail_menu_btn span.menuitem_text{display: none}
    #mail_menu_btn a {color:#ffffff}

    #mail_menuitem{display: none}

    .mobilePhone{display: block; position: absolute; right: 100px; top: 15px;}
    .mobilePhone a{display: flex; flex-direction: column; justify-content: center; border: 1px solid #b4b4b4; width: 56px; height: 50px;}
    .mobilePhone a img{display: block; width: 32px; margin: 0px auto;}

    nav.headerMenu > ul{position: absolute; top: 57px; background-color: #f5f5f6; color: #545454; padding: 8px 25px 20px; width: 580px; max-width: none; direction: rtl;}
    nav.headerMenu > ul > li{font-size: 24px; line-height: 28px; padding-top: 12px;}
    nav.headerMenu > ul > li > a{color: var(--main-color); width:100%; text-align: right}
    nav.headerMenu > ul > li.admin_menu_item > a{color:#7f8dcb}
    nav.headerMenu > ul > li > a:hover{color: #0fb8f6;}
    nav.headerMenu > ul > li > a > img{width:24px}

    nav.headerMenu > ul > li.mobileShow{display: flex; padding-top: 8px; margin-top: 24px; border-top: 1px solid #8fdcf8; align-items: center;}
    nav.headerMenu > ul > li.mobileShow strong{padding-left: 20px;}
    nav.headerMenu > ul > li.mobileShow > ul{display: flex; color: white;}
    nav.headerMenu > ul > li.mobileShow > ul a{color: white;}

    nav.headerMenu > ul > li.mobileShow > ul > li{padding-right: 28px; position: relative; font-weight: 600;}
    nav.headerMenu > ul > li.mobileShow > ul > li:before{content: '|'; width: 28px; font-size: 16px; line-height: 20px; position: absolute; right: 0px; top: 4px; text-align: center;}
    nav.headerMenu > ul > li.mobileShow > ul > li:nth-child(1){padding-right: 0px;}
    nav.headerMenu > ul > li.mobileShow > ul > li:nth-child(1):before{display: none;}
/* } */

#tests_menu_mobile{display: none}
@media screen and (max-width: 540px) {
    #tests_menu_mobile{display: block}
    #tests_menu_desktop{display: none}

    #tests_submenu i{margin-left:10px; font-size:10px}
}