/*Header*/
.desktop app-block.header {
    flex-direction: column;
    background-color: var(--c-primary-b);
    font-size: 1.1rem;
    color: var(--c-white);
    margin-bottom:8px;
}

.desktop app-block.header-links {
    display: flex;
    align-items: center;
}

.desktop app-block.header-links.top {
    height: var(--c-header-top);
    justify-content: space-evenly;
}

.desktop app-block.header-links.bottom {
    height: var(--c-header-bottom);
    justify-content: space-between;
    align-items: center;
    background-color: var(--c-primary-c)
}

.desktop .header app-search {
    flex: 1 1 328px;
    max-width: 400px;
    min-width: 328px;
    margin: 0 auto;
   
}

.desktop .header .logo {
    width: var(--c-logo-size);
}

.desktop .header .user > app-widget-host >app-block {
    width: 100%;
    height: 100%;
    display: flex;
}

.header .user-guest {
    justify-content: flex-end;
    align-items: center
}

.desktop .header .user {
    flex: 1 1 var(--c-r-sidebar-max);
    max-width: var(--c-r-sidebar-max);
    color: var(--c-white)
}

.desktop .header .user-account {
    justify-content: space-between
}

.desktop .header .account-info data-view {
    display: flex;
    padding: 12px 5px 0px 5px;
}
.desktop .header .account-info {
    margin-left:auto
}
.desktop .header .user-account app-block {
    margin-right:5px;
}
.desktop .header .deposit.link div {
    padding: 4px 10px;
    margin-top: 7px;
    background-color: var(--c-primary-d)
}

.desktop .header .user-links {
    display: flex;
}

.desktop .header .toggle-amount {
    margin-top: 5px
}

.desktop .header .button.logout-button {
    padding: 4px 6px;
    margin: 6px 8px 0px 0px;
}

.desktop .header .unread-messages {
    margin-top: 5px;
}

.desktop .header .messages.link {
    display: flex;
}

.desktop .header .product-menu {
    height: 100%;
    margin-right: auto;
    font-size: 1.2rem
}

.desktop .header .product-menu a {
    color: var(--c-white);
    padding: 4px;
}

.desktop .header .product-menu a.active, .desktop .hover .header .product-menu a:hover {
    color: var(--c-white-e);
    border-bottom: 5px solid var(--c-white-e)
}

.desktop .header app-language, .desktop .header app-odds-format {
    margin-right: 5px;
    max-width: 120px;
    width: 100%;
}

.desktop .header app-time {
    margin-right: 8px;
}

.desktop .header app-language .ui-dropdown-label, .desktop .header app-odds-format .ui-dropdown-label {
    height: 35px;
}

.mobile .header {
    background-color: var(--c-primary);
    box-shadow: var(--ds-2p);
    background-image: unset !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: var(--c-header-mobile);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 90;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-content: start;
    color: var(--c-white);
    font-size: 0.9rem;
    
}

.mobile .header .logo {
    display: block;
    position: unset;
    width: var(--c-logo-size-mobile);
    height: auto;
    left: unset;
    top: unset;
    margin-left: unset;
    height: auto;
}

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

.mobile .header-links.left, .mobile .header-links.right {
    width: calc(50% - var(--c-logo-size-mobile) / 2)
}

.mobile .header-links.left {
    justify-content: flex-start;
    padding-left: 8px;
}

.mobile .header-links.right {
    justify-content: flex-end;
    padding-right: 8px
}

.mobile .mobile-link {
    flex: 1 1 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mobile .mobile-link.sports-live {
    align-items:flex-start
}
.mobile .mobile-link .icon {
    width: 24px;
}

.mobile .header-links.right .mobile-link {
    position: relative;
    padding-left: 8px
}

.mobile .header .openbets-counter .bets-number, .mobile .header .messages data-view {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: var(--c-red);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    top: 2px;
    right: 0px;
    font-size: 0.8rem
}

.mobile .header .messages data-view {
    top: 0px;
    right: -5px;
}

.mobile .user-guest {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 8px
}

.mobile .mobile-link.account .icon {
    width: 20px;
    margin-bottom: 5px
}
.header .button.login {
    background-color:var(--c-primary-d);
    text-align: center;
}