.container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding-top: 30px;
}
.container .container-inner{
    display: flex;
    width: 100%;
    max-width: 1700px;
    height: 100%;
    flex-direction: row;
}
.container .container-inner .container-left{
    display: flex;
    width: 100%;
    max-width: 1294px;
    justify-content: space-between;
}
.container .container-inner .container-left .menu{
    display: flex;
    background: #2A2C4A 0% 0% no-repeat padding-box;
    border-radius: 20px;
    width: 320px;
    height: 476px;
    flex-direction: column;
}
.container .block-title{
    display: block;
    width: 100%;
    height: 35px;
    text-align: center;
    letter-spacing: 0px;
    color: #C7D0FE;
    font-size: 14px;
    border-bottom: 1px solid #443d73;
    padding-top: 20px;
}
.container .container-inner .container-left .menu .menu-list{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
}
.container .container-inner .container-left .menu .menu-list .item{
    width: 269px;
    height: 45px;
    display: flex;
    align-items: center;
    text-align: left;
    letter-spacing: 0px;
    color: #D5DCFF;
    font-size: 13px;
    margin-left: 25px;
    cursor: pointer;
    padding-left: 0px;
    border-radius: 23px;
    overflow: hidden;
    margin-bottom: 10px;
}
.container .container-inner .container-left .menu .menu-list .item .bg{
    width: 246px;
    height: 45px;
    display: flex;
    align-items: center;
    text-align: left;
    letter-spacing: 0px;
    color: #D5DCFF;
    font-size: 13px;
    background: transparent url(../img/chevron.png) no-repeat 240px center;
    cursor: pointer;
    padding-left: 23px;
}
.container .container-inner .container-left .menu .menu-list .item .bg:hover,.container .container-inner .container-left .menu .menu-list .item.active .bg{
    transition: 0.5s;
    box-shadow: inset 300px 0 0 0 var(--hover-bg-color);
}
.container .container-inner .container-left .menu .menu-list .item .icon{
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.container .container-inner .container-left .menu .menu-list .item .icon-map{
    background: transparent url(../img/menu/natal.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item:hover .icon-map,.container .container-inner .container-left .menu .menu-list .item.active .icon-map{
    background: transparent url(../img/menu/natal-active.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item .icon-day{
    background: transparent url(../img/menu/day.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item:hover .icon-day,.container .container-inner .container-left .menu .menu-list .item.active .icon-day{
    background: transparent url(../img/menu/day-active.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item .icon-compare{
    background: transparent url(../img/menu/compare.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item:hover .icon-compare,.container .container-inner .container-left .menu .menu-list .item.active .icon-compare{
    background: transparent url(../img/menu/compare-active.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item .icon-moon{
    background: transparent url(../img/menu/moon.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item:hover .icon-moon,.container .container-inner .container-left .menu .menu-list .item.active .icon-moon{
    background: transparent url(../img/menu/moon-active.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item .icon-school{
    background: transparent url(../img/menu/school.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item:hover .icon-school,.container .container-inner .container-left .menu .menu-list .item.active .icon-school{
    background: transparent url(../img/menu/school-active.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item .icon-weather{
    background: transparent url(../img/menu/weather.png) no-repeat right center;
}
.container .container-inner .container-left .menu .menu-list .item:hover .icon-weather{
    background: transparent url(../img/menu/weather-active.png) no-repeat right center;
}

#header-menu-content{
    display: none;
    position: absolute;
    right: 45px;
    z-index: 99999999;
    top: 70px;
}
.header-menu-content{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    background: #EFF2FF 0% 0% no-repeat padding-box;
    border-radius: 20px;
    opacity: 1;
    width: 350px;
    padding-top: 40px;
}
.header-menu-content .item{
    width: 258px;
    height: 45px;
    display: flex;
    align-items: center;
    text-align: left;
    letter-spacing: 0px;
    font-size: 13px;
    cursor: pointer;
    padding-left: 15px;
    overflow: hidden;
    background: #F8F9FF 0% 0% no-repeat padding-box;
    border: 1px solid #C2CAF2;
    border-radius: 23px;
    opacity: 1;
    color: #000000;
    margin-left: 37px;
    margin-bottom: 15px;
}
.header-menu-content .item:hover{
    background: #8162DE 0% 0% no-repeat padding-box;
    border: 1px solid #8162DE;
    color: #FFFFFF;
}
.header-menu-content .lang{
    position: relative;
    display: block;
    text-align: center;
    border-top: 1px solid #AEB6DB;
    width: 269px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 25px;
    padding-top: 20px;
}
.header-menu-content .lang a{
    width: 45px;
    height: 30px;
    background: #F8F9FF 0% 0% no-repeat padding-box;
    border: 1px solid #C2CAF2;
    opacity: 1;
    display: inline-block;
    border-radius: 50%;
    font-size: 13px;
    text-align: center;
    padding-top: 15px;

}
.header-menu-content .lang a:hover{
    color: #ffffff;
    background: #8162DE 0% 0% no-repeat padding-box;
    border: 1px solid #8162DE;
}
.header-menu-content .item .icon{
    display: block;
    margin-right: 15px;
    width: 25px;
    height: 25px;
}
.header-menu-content .item .icon-account{
    background: transparent url(../img/menu/account.png) no-repeat right center;
}
.header-menu-content .item:hover .icon-account{
    background: transparent url(../img/menu/account-active.png) no-repeat right center;
}
.header-menu-content .item .icon-help{
    background: transparent url(../img/menu/help.png) no-repeat right center;
}
.header-menu-content .item:hover .icon-help{
    background: transparent url(../img/menu/help-active.png) no-repeat right center;
}
.header-menu-content .item .icon-security{
    background: transparent url(../img/menu/security.png) no-repeat right center;
}
.header-menu-content .item:hover .icon-security{
    background: transparent url(../img/menu/security-active.png) no-repeat right center;
}
.header-menu-content .item .icon-new{
    background: transparent url(../img/menu/new.png) no-repeat right center;
}
.header-menu-content .item:hover .icon-new{
    background: transparent url(../img/menu/new-active.png) no-repeat right center;
}
.header-menu-content .item .icon-logout{
    background: transparent url(../img/menu/logout.png) no-repeat right center;
}
.header-menu-content .item:hover .icon-logout{
    background: transparent url(../img/menu/logout-active.png) no-repeat right center;
}