body > header{
    height:var(--sz-hdr-h); 
    z-index:10;top:0; left:0px;
    display: block; 
    white-space: nowrap;
    background-color: var(--cl-hdr-back);
}
body > header, body > header a {
    background-color: var(--cl-hdr-back);
    color: var(--cl-hdr-front);
    text-decoration: none;
    vertical-align:middle;
}

#img_avatar {
     border-radius:100vw;
     overflow:hidden;
     max-height:35px;
     max-width:35px;
}

#mainsearch-sx{
    max-width:200px;
    min-width:50px;
    max-height:25px;
    border-radius:30px;
    border-width: 1px;
    border-color: var(--cl-hdr-back);
    background-color: var(--cl-body-back);
}

    
div#logo {
       display:inline-block;
       white-space: nowrap;
       vertical-align:middle;
       height: var(--sz-hdr-h);
    }
    
#logo span {display:inline-block; padding:8px;}
    
div#logo a {
        display:inline-block; 
        line-height:20px;
        vertical-align:baseline;
        font-size: var( --ft-logo-sz );
        padding-right: 10px;
        font-family:'Roboto';
        text-decoration:none;
        white-space: nowrap;
}

#logo img {width:16px;height:16px;display:inline-block;}
    @media screen and (max-width:391px){
    #logo span { max-width: 50px; font-size: 10pt; }
    #logo img {display: none;}
    #img_avatar { max-height:25px; max-width:25px; }
    #mainsearch-sx{max-width:90px; font-size: 10pt; }
}
    
    #form_mainsearch {
        white-space:nowrap;
        display:inline-block;
        text-align:left;
        padding: 0px;
        /* border:1px solid red; */
    }
    
    
    #form_mainsearch button{
        max-height:25px;max-width:25px;min-width:25px;text-align:center;border-radius:100vw;border:1px solid transparent;
    }
        
    ul#menuuser {
        display:inline-block;
        height:var(--sz-hdr-h); 
        width: var(--sz-hdr-h); 
        padding: 0px;
        margin: 0px;
        vertical-align:baseline;
    }
    #menuuser_avatar{
       margin-top: 2px;
       vertical-align:middle;
    }


    
@media screen and (max-width:500px){
    #form_mainsearch a{left:5px;}
    #form_mainsearch input{left:115px;width:150px;}
    #form_mainsearch button{left:265px;}
}



body nav{
    display: block; 
    border-bottom: 1px solid lightgrey;
    color: var(--cl-mmenu-front);
    background-color: var(--cl-mmenu-back);
    text-align:left;
    margin:0;
}



ul.menu {
    list-style:none; 
    margin:0; 
    padding:0px; 
    font-style:normal;
    display: block;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
}

ul.menu li>ul {
    color: var(--cl-smenu-front) !important;
    background-color: var(--cl-smenu-back) !important;
}

li.menuitem {
    position:relative; 
    font-style:normal;
}

li.menuitem ul li {
    padding-bottom: 8px;
}

ul#menuuser { text-align:right;}
ul#menuuser_avatar {position:relative;}

ul.menu li ul{  border: 1px dotted green;    width: auto; }


#menuuser ul {left:auto; right:0px;}



ul.menuuser {display: none;   }
li.menuitem:hover ul.menuuser { top:10px; min-width:100px; }

ul.menuuser li{ white-space: nowrap; text-align:right;width:auto; }

li.menuitem a { width: 100%; font-style:normal;     display: block;}

li.menuitem {  display: inline-block;  text-align: center; }
@media screen and (max-width:360px){li.menuitem > div { font-size:10pt; } }
@media screen and (min-width:361px){ li.menuitem > div { font-size:11pt; /*display:none; */ } }

ul li.menuitem div { padding: 5px;}

li.menuitem ul li a , li.menuitem ul li {  height:100%;    text-decoration: none; }

li.menuitem svg, .menuitem img{ max-height: 64px;  max-width: 64px;  min-height: 20px; min-width: 20px;}
li.menuitem svg{ height: 8%; width: 8%; }

#menuuser_avatar ul{ padding:10px; top: 30px;  }
#menuuser_avatar ul li { text-align:left; }



/* 910px */
@media screen and (min-width: 1910px )
{
    main{margin-left: 300px; } 
    body.look-d5 nav {position: fixed;
         top: 80px;
         left: 5px;
         display: block;
         border-right: 1px solid lightgray;
    }
    nav > ul >li.menuitem { display: block; }
    nav > ul >li.menuitem * { background-color: white;}
    nav > ul >li.menuitem div { display: block; text-align: left; margin-top: 10px; font-size: 12pt; font-weight: bold;}
    
    nav > ul.menu { width: 250px; padding-right: 5px;}
    nav > ul.menu li ul { display: block; text-align: right; border: 0px;}
    
    
    #menuuser_avatar:hover ul{
            margin:0px;
            z-index: 4444;
            position: absolute;
            left:0px;
            top:20px;
            display: inline-block;
            max-width: 200px;
            width: 100px;
            padding: 10px;
            text-align: left;
            border-color: green;
            color: green;
            background-color: lightgrey;
            padding-bottom: 5px;
            padding-top: 15px;
        }

    #menuuser_avatar:hover ul *{
        background-color: lightgrey;
        color: green;
    }

    #menu4 div { display: none; }
    #menu4 { position: fixed; right:10px; top:80px; }
}

/* 909px  стандартный экран */
@media screen and (max-width: 1909px ){

    li.menuitem:first-child ul {left:0px; right:auto;}
    li.menuitem:last-child ul {left:auto; right:0px;}
    li.menuitem:nth-last-child(2) ul {left:auto; right:0px;}
    li.menuitem:nth-child(2) ul {left:0px; right:auto;}

    
    ul.menu li.menuitem ul * , ul#menuuser li.menuitem:hover * {
        color: var(--cl-smenu-front) !important;
        background-color: var(--cl-smenu-back) !important;
    }

    li.menuitem:hover{
        color: green;
        background-color: lightgrey;
    }

    li.menuitem.hover ul,
    li.menuitem:hover ul{
        margin:0px;
        z-index: 4444;
        position: absolute;
        top:20px;
        display: inline-block;
        max-width: 300px;
        min-width: 200px;
        padding: 10px;
        text-align: left;
        border-color: green;
        color: green;
        background-color: lightgrey;
        padding-bottom: 5px;
        padding-top: 15px;
    }    
    
    li.menuitem:hover ul li{margin-bottom:8px;}
    li.menuitem:hover ul li:last-child{margin-bottom:0px;}
    ul.menu li ul{   display: none;    }
    li.menuitem:hover ul li svg{ display:inline-block; vertical-align: top; height: 20px; }
}


@media screen and (max-width:296px) { 
    ul.menu {text-align: left; }
    .cmenu .smenu {right: auto !important; left:0px !important;}
}