*{box-sizing: border-box;}
:root{
    --color-nav-text:#eee;
	
    --color-nav-background:#002c30;
   --color-nav-background-hover:#ffffff11;
	 
    --color-nav-border:#fff2;
	
}

body{background: #f1f1f1;margin: 0;padding: 0;font-family: sans-serif;overflow: hidden;}
svg{width: 20px;height: 20px;fill: var(--color-nav-text);}
.flexCe{display: flex;align-items: center;}
.hover:hover{background: var(--color-nav-background-hover);cursor: pointer;}



/* Header Session  */
.navigation{position: fixed;z-index: 99999;width: 100%;top: 0;}

.HdR{background: var(--color-nav-background);padding: 0 10px;border-bottom: 0.1px solid var(--color-nav-border);z-index: 99;}
.HdR .nav-button-left{width: 34px; padding: 8px;border-radius: 2px;}
/*hamburger*/
.HdR .nav-button-left .icon-nav-left{width: 18px;height: 18px;display: block;position: relative;z-index: 99999;background:yellow}
.HdR .icon-nav-left span,
.HdR .icon-nav-left span::before,
.HdR .icon-nav-left span::after{position: absolute;margin-top: .122rem;background: var(--color-nav-text);border-radius: 0.05em;
    display: block;height: .15em;width: -webkit-fill-available; --color-nav-text:black;}
.HdR .icon-nav-left span::before{margin-top: 6px;content: '';}
.HdR .icon-nav-left span::after{margin-top: 12px;content: '';}
.HdR .logo-session{width: fit-content;height: 45px;margin: 4px 0 4px 2%;}
.HdR .logo-session img{width: 100%;height: 100%;filter: brightness(24);}
.HdR .SSeS{flex: 1;width: max-content;display: block;}
.HdR .SinP{position: relative;width: 624px;height: 100%;
    border-radius: 2px;margin: 0 auto;}
.HdR .SinP .ins{flex: 1;}
.HdR .SinP .MiNp { position: absolute; top: 0; left: 0; background: transparent; color: var(--color-nav-text); font-size: 16px;
    padding: 5px 40px 5px 10px; border: none;  outline: none; width: -webkit-fill-available; 
    height: 100%; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--color-nav-border);
}
.HdR .SinP .MiNp:focus{box-shadow:  inset 0 0 0 2px #54a6c1; }
.HdR .SinP .submit{z-index: 999;}
.HdR .SinP .submit svg{display: block;margin: 7px;cursor: pointer;}
.HdR .login{padding: 8px 14px;font-size: 16px;color: var(--color-nav-text);text-decoration: none;
    border-radius: 3px;background: var(--color-nav-border);}

/* .navigation  */
.nav{position: fixed;overflow: auto;background: var(--color-nav-background);width: 228px;left: 0;height: 100%;
    border-right: 1px solid var(--color-nav-border);transition: 0.3s;}

.nav-open .nav{width: 0; }
.nav-title{background: var(--color-nav-border);overflow: hidden;margin: 0;}
.nav-title span{display: block; margin: 10px 0 10px 15px;height: 24px;overflow: hidden;color: var(--color-nav-text);}
.nav .group{display: flex;flex-direction: column;padding: 8px 0;}
.nav .group .list{position: relative;height: 36px;overflow: hidden;}
.nav .group .list a{display: block;padding: 0 12px 0 40px;line-height: 2.6;margin: 0 8px;font-size: 14px;
    text-decoration: none;border-radius: 3px;color: var(--color-nav-text);}
.nav .group.to .list a::after{content: '';position: absolute;height: 10px !important;width: 10px !important;
    left: 22px;top: 13px;border: solid 1px var(--color-nav-text);border-radius: 50%;}
.nav .group .list a:hover{background: var(--color-nav-background-hover);text-decoration: underline;}
.nav .group.to .list a:hover::after{background: var(--color-nav-text);}
.nav .group .list .icon{position: absolute;top: 6.5px;left: 15px;width: 25px;height: 25px;display: flex;
    align-items: center;justify-content: center;}
/*padding*/
.main-contener{padding: 37px 0 0 230px; transition: 0.3s;}
.nav-open .main-contener{padding: 54px 0 0 0;}

@media screen and (max-width:880px){.HdR .SinP{    width: 80%;}

    .nav{ width: 0;}
    .nav-open .nav{ width: 230px;}
    .main-contener{ padding: 37px 0 0 0;}
    .nav-open .openmob{ width: 100%; height: 100%; position: fixed; top: 0; display: block; 
        background: var(--color-nav-border); z-index: -1;}
}

@media screen and (max-width:540px){.HdR .SinP .ins{ display: none;}

.HdR .sEoP.SSeS{ position: absolute; top: 0; left: 0; width: 100%; background: var(--color-nav-background); z-index: 999;}
    .HdR .SinP{ width: max-content; float: right;}
    .HdR .sEoP .SinP{ width: 100%; height: 50px; }

    .HdR .SinP .MiNp{padding: 5px 50px; border-radius: 0; box-shadow: none; border-bottom: solid 1px var(--color-nav-border);}
    .HdR .SinP .MiNp:focus{box-shadow: none;border-bottom: 2px solid #54a6c1;}

    .HdR .sEoP .ins{ display: block;}
    .sEoP span.search-back,
    .sEoP icon.submit{ display: block; width: 50px; display: flex; align-items: center; justify-content: center; z-index: 9999;}

    .HdR .sEoP .MiNp,
    .sEoP span.search-back,
    .sEoP icon.submit{    height: 50px;}
    .sEoP span.search-back:hover{background: var(--color-nav-background-hover);}
}