.up-panel {
    background : #4ea6c7;
    display    : none;
    height     : 80px;
    padding    : 10px;
}

.up-panel.shown {
    display : block !important;
}

.up-wrapper {
    margin        : 0 auto;
    max-width     : 1210px;
    padding-left  : 30px;
    padding-right : 30px;
}

.up-header {
    align-items : center;
    display     : flex;
}

.up-header-logo {
    margin-right : auto;
    width        : 190px;
}

.up-header-logo img {
    height : auto;
    width  : 100%;
}

.up-header-auth {
    align-items         : center;
    background          : #4ea6c7;
    border              : 1px solid #fff;
    border-radius       : 100px;
    -moz-box-align      : center;
    -webkit-box-align   : center;
    cursor              : pointer;
    display             : flex;
    justify-content     : center;
    padding             : 5px 27px;
    position            : relative;
    transition          : 0.5s;
    -moz-user-select    : none;
    -webkit-user-select : none;
    user-select         : none;
    width               : 300px;
}

.up-header-auth p {
    align-items       : center;
    -moz-box-align    : center;
    -webkit-box-align : center;
    color             : #fff;
    display           : flex;
    -ms-flex-align    : center;
    font-size         : 14px;
    font-weight       : 300;
    margin-bottom     : 0;
    margin-right      : 10px;
    transition        : 0.5s;
}

.up-header-auth_img {
    align-items       : center;
    background        : #fff;
    border-radius     : 50%;
    -moz-box-align    : center;
    -webkit-box-align : center;
    -moz-box-pack     : center;
    -webkit-box-pack  : center;
    display           : flex;
    -ms-flex-align    : center;
    -ms-flex-pack     : center;
    height            : 30px;
    justify-content   : center;
    width             : 30px;
}

.up-header-auth-menu {
    background    : #fff;
    border-radius : 20px;
    box-shadow    : 0 14px 30px rgb(0 0 0 / 14%);
    display       : none;
    position      : absolute;
    right         : 0;
    top           : 59px;
    width         : 300px;
    z-index       : 1;
}

.up-header-auth-menu.shown {
    display : block !important;
}

.up-profile-menu_link {
    align-items         : center;
    border-top          : 1px solid #f6f6f6;
    -moz-box-align      : center;
    -webkit-box-align   : center;
    color               : #123b60 !important;
    display             : flex;
    -ms-flex-align      : center;
    font-size           : 14px;
    padding             : 15px 28px;
    position            : relative;
    text-decoration     : none;
    transition-duration : 0.5s;
    transition-property : background;
    z-index             : 1;
}

.up-profile-menu_link:first-child {
    border : none;
}

.up-profile-menu_link:hover {
    background : rgba(174, 224, 228, 0.2);
}

.up-profile-menu_link .icon {
    align-items       : center;
    -moz-box-align    : center;
    -webkit-box-align : center;
    -moz-box-pack     : center;
    -webkit-box-pack  : center;
    display           : flex;
    -ms-flex-align    : center;
    -ms-flex-pack     : center;
    height            : 20px;
    justify-content   : center;
    margin-right      : 8px;
    width             : 20px;
}

.up_m-header_burger {
    display  : none;
    height   : 24px;
    position : relative;
    width    : 32px;
}

.up_m-header_burger span {
    background    : #fff;
    border-radius : 2px;
    display       : block;
    height        : 2px;
    left          : 0;
    position      : absolute;
    transition    : 0.5s;
    width         : 32px;
}

.up_m-header_burger span:nth-child(1) {
    top : 0;
}

.up_m-header_burger span:nth-child(2) {
    top : 10.5px;
}

.up_m-header_burger span:nth-child(3) {
    top : 21px;
}

.up_m-header_burger.shown span:nth-child(1) {
    top       : 10.5px;
    transform : rotate(45deg);
}

.up_m-header_burger.shown span:nth-child(2) {
    opacity : 0;
}

.up_m-header_burger.shown span:nth-child(3) {
    top       : 11px;
    transform : rotate(-45deg);
}

.up_m-header_burger span:nth-child(1) {
    top : 0;
}

.up_m-menu {
    background : #4ea6c7;
    height     : calc(100vh - 60px);
    left       : -100%;
    overflow-y : scroll;
    position   : fixed;
    top        : 60px;
    transition : 0.5s;
    width      : 100%;
    z-index    : 10;
}

.up_m-menu-auth {
    border-bottom : 1px solid rgba(255, 255, 255, 0.2);
    border-top    : 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom : 10px;
    padding       : 40px 20px 15px;
}

.up_m-menu-auth a {
    align-items       : center;
    border-top        : 1px solid #f6f6f6;
    -moz-box-align    : center;
    -webkit-box-align : center;
    color             : #fff;
    display           : flex;
    -ms-flex-align    : center;
    font-size         : 14px;
    padding           : 15px 0;
    text-decoration   : none;
}

.up_m-menu-auth a .icon {
    align-items       : center;
    -moz-box-align    : center;
    -webkit-box-align : center;
    -moz-box-pack     : center;
    -webkit-box-pack  : center;
    display           : flex;
    -ms-flex-align    : center;
    -ms-flex-pack     : center;
    height            : 20px;
    justify-content   : center;
    margin-right      : 20px;
    width             : 20px;
}

.up_m-menu-auth_name {
    color         : #fff;
    font-size     : 18px;
    font-weight   : 600;
    line-height   : 22px;
    margin-bottom : 16px;
}

.up_m-menu-auth_balance {
    align-items       : center;
    -moz-box-align    : center;
    -webkit-box-align : center;
    -moz-box-pack     : justify;
    -webkit-box-pack  : justify;
    display           : flex;
    -ms-flex-align    : center;
    justify-content   : space-between;
}

.up_m-menu-auth_balance p {
    color     : #fff;
    font-size : 18px;
    margin    : 0;
    padding   : 0;
}

.up_m-menu-auth_balance p span {
    font-weight : 700;
}

.up_m-menu_nav {
    padding : 20px;
}

.up_m-menu_nav a {
    color           : #fff;
    display         : block;
    font-size       : 14px;
    font-weight     : 600;
    line-height     : 17px;
    margin-bottom   : 20px;
    text-decoration : none;
}

@media screen and (max-width : 768px) {
    .up-panel {
        height  : 60px;
        padding : 5px 0;
    }

    .up-wrapper {
        padding-left  : 20px;
        padding-right : 20px;
    }

    .up-header-logo {
        width : 160px;
    }

    .up_m-header_burger {
        display : block;
    }

    .up_m-menu.shown {
        left : 0 !important;
    }

    .up-header-auth {
        display : none;
    }
}