/* * * Header :: bar :: account * * */
.b-header_bar_account {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.b-header_bar_account_toggle {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-bottom: 1px;
    padding-left: 34px;
    font: 400 14px/1 'Roboto', sans-serif;
    text-decoration: none;
    color: #fff;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    cursor: pointer;
}

.b-header_bar_account_toggle:before {
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 22px;
}

.b-header_bar_account_toggle span {
    border-bottom: 1px dashed transparent;
    -webkit-transition: border 250ms;
    -o-transition: border 250ms;
    transition: border 250ms;
}

.b-header_bar_account_toggle:hover span {
    border-bottom-color: inherit;
}

@media (max-width: 767px) {

    .b-header_bar_account {
        display: block;
        position: static;
    }

    .b-header_bar_account_toggle {
        display: block;
        margin: -1px auto 0;
        padding: 8px;
        width: 28px;
        height: 28px;
        color: #7d7d7d;
    }

    .b-header_bar_account_toggle:before {
        left: 50%;
        top: 50%;
        margin: -14px 0 0 -14px;
        width: 28px;
        height: 28px;
        font-size: 28px;
    }

    .b-header_bar_account_toggle span {
        display: none;
    }

    .b-header_bar_account_toggle:hover {
        color: #1fa6a3;
    }

}

@media (min-width: 1264px) {

    .b-header_bar_account_toggle {
        font: 400 16px/1 'Roboto', sans-serif;
    }

}

.b-header_bar_account_box {
    position: absolute;
    z-index: 50;
    top: 100%;
    right: 0;
    margin-top: 10px;
    width: 340px;
    max-height: -webkit-calc(100vh - 78px);
    max-height: calc(100vh - 78px);
    color: #000;
    background: #fff;
    -webkit-box-shadow: 1px 5px 9px rgba(0, 0, 0, .21);
    box-shadow: 1px 5px 9px rgba(0, 0, 0, .21);
    -webkit-border-radius: 9px;
    border-radius: 9px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
}

.b-header_bar_account_box_inner {
    padding: 22px 30px 30px 22px;
    text-align: left;
}

@media (max-width: 767px) {

    .b-header_bar_account_box {
        left: 10px;
        top: 100%;
        right: 10px;
        margin-top: 0;
        width: auto;
        max-width: none;
    }

    .b-header_bar_account_box_inner {
        padding: 22px 14px;
    }

}

.b-header_bar_account_box_caption {
    margin-bottom: 16px;
    font: 400 18px 'Roboto', sans-serif;
}

.b-header_bar_account_box_close {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 8px;
    font-size: 23px;
    color: #9C9C9C;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    cursor: pointer;
}

.b-header_bar_account_box_close:hover {
    color: #1fa6a3;
}

.b-header_bar_account_box_links {
    margin-top: 16px;
}

.b-header_bar_account_box_links a {
    font: 400 14px 'Roboto', sans-serif;
    text-decoration: underline;
    color: #b8b8b8;
}

.b-header_bar_account_box_links a:hover {
    color: #1fa6a3;
}

.b-header_bar_account .b-header_bar_account_box {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(7px);
    -ms-transform: translateY(7px);
    -o-transform: translateY(7px);
    transform: translateY(7px);
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

.b-header_bar_account.opened .b-header_bar_account_box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}