/*Header*/
.desktop app-block.header {
    flex-direction: column;
    background-image:var(--c-linear-gradient-1);
    font-size: 1.1rem;
    color: var(--c-text-light);
    padding:0px 20px;
    position:sticky;
    top:0;
    z-index:900
    /* margin-bottom:8px; */
}

.desktop app-block.header-links {
    display: flex;
    align-items: center;
}
.desktop .header-links-time {
     height: var(--c-header-bottom);
    align-items:center;
    justify-content:center;
    border-bottom:1px solid var(--c-background-white-10);
    font:var(--t-tiny-text)
}
.desktop .header-links-time .time-text {
    margin-right:5px;
}
.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-l-sidebar-min);
    text-align:center;
}
.desktop .header .logo img {
    height:38px;
    width:auto;
    margin:0 auto;
}
.header .navigation-button {
    cursor:pointer;
}
.header .navigation-button app-block {
    width:22px;
    height:22px;
    filter:saturate(0) invert(1);
    background-repeat:no-repeat;
     background-image:var(--c-global-icon-spritesheet);
    background-position: -303px -9px;
}
.header .search-button app-block {
     width:22px;
     height:22px;
     filter:saturate(0) invert(1);
     background-repeat:no-repeat;
      background-image:var(--c-global-icon-spritesheet);
     background-position: -68px -10px;
}
 .header .user > app-widget-host >app-block {
    width: 100%;
    height: 100%;
    display: flex;
    align-items:center;
}
.header .user-area {
    width: 100%;
    height: 100%;
    display: flex;
    align-items:center;
}
.header .user-guest {
    justify-content: flex-end;
    align-items: center
}

 .header .user {
    /* flex: 1 1 var(--c-r-sidebar-max); */
    /* max-width: var(--c-r-sidebar-max); */
    color: var(--c-text-light);
    order: 3;
}

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

 .header .account-info data-view {
    display: flex;
    /* padding: 12px 5px 0px 5px; */
}
.header .account-info-wrapper {
    background-color:var(--c-background-white-30);
    align-items:center;
    border-radius:var(--r-10);
    padding-right:5px;
}
 .header .account-info,
 .header .account-block{
    margin-left:auto;
    height:100%;
    /* max-width:90px; */
    width:100%;
    align-items:center;
    color:var(--c-text-light-e);
    font:var(--t-small-text-bold);
}
 .header .account-info .login-separator {
     height:23px;
     width:1px;
     background-color:var(--c-background-white-30);
     margin:0px 8px;
     margin-left:4px;
 }
 .header .account-info .account-arrow {
     width:16px;
     height:16px;
     background-repeat:no-repeat;
     background-image:var(--c-global-icon-spritesheet);
     background-size: 450px auto;
     background-position: -166px -59px;
     background-position: -21px -57px;
     /* filter:saturate(0) invert(1); */
 }
.header .account-block .deposit-button {
    /* min-width:23px; */
    height:40px;
    background-color:var(--c-accent-color);
    /* border-radius:50%; */
    justify-content:center;
    align-items:center;
    padding: 0px 14px;
    border-radius:var(--r-10);
}
.header .account-block .deposit-badge {
    min-width:23px;
    height:23px;
    background-color:var(--c-accent-color);
    border-radius:50%;
    align-items:center;
    justify-content:center
}
.header .account-block .deposit-badge .icon {
    width:18px;
    height:18px;
    filter:saturate(0) invert(1) brightness(10);
    background-repeat:no-repeat;
    background-size:400px auto;
    background-image:var(--c-global-icon-spritesheet);
    background-position: -34px -49px;
    display:block;
}
 .header .account-block:not(:empty) {
     /* margin-right:10px; */
 }
/*.view-page-account-documents .header .account-block.kyc-none:not(:empty),
.view-page-account-documents .header .account-block.kyc-full:not(:empty),
.hover .header .account-block:not(:empty):hover{
    background-color:var(--c-background-white-10);
    position:relative;
}
.view-page-account-documents .header .account-block.kyc-none:not(:empty)::before,
.view-page-account-documents .header .account-block.kyc-full:not(:empty)::before,
.hover .header .account-block:not(:empty):hover::before{
    content:"";
    position:absolute;
    height:5px;
    width:100%;
    bottom:0px;
    background-color:var(--c-accent-color)
}*/

 .header .account-block > app-widget-host {
    padding:0px 12px;
     padding-right:6px;
}
.header .account-icon {
    min-width:22px;
    height:22px;
    border-radius:50%;
    background-color:var(--c-accent-color);
    margin-right:8px;
}
.header .balance-value {
    margin-left: 8px;
    margin-right: 8px;
}
.desktop .header .deposit.link div {
    padding: 4px 10px;
    /* margin-top: 7px; */
    background-color: var(--c-green)
}

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

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

.desktop .header .button.logout-button {
    padding: 4px 6px;
    margin:0;
    /* 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.3rem;
    font-weight:bold;
}

.desktop .header .product-menu a {
    color: var(--c-text-light-e);
    padding: 4px 12px;
    font:var(--t-small-text-bold)
}
.desktop .header .product-menu a span {
    /* display:block; */
    /* height:22px; */
    margin-top: 4px;
}
.desktop .header .product-menu a::before {
    width:22px;
    height:22px;
    content:"";
    display:block;
    filter:saturate(0) invert(1) brightness(2);
    background-repeat:no-repeat;
    background-image:var(--c-global-icon-spritesheet);
    
    margin-right:5px;
}
.desktop .header .product-menu .cms-menu-live-betting a::before {
    /* background-image:url(/v1.015/r/images/in2bet/icons/v3/play.svg); */
    background-position: -393px -9px;
}
.desktop .header .product-menu .cms-menu-offers a::before {
    background-position: -128px -9px;
}
.desktop .header .product-menu .cms-menu-offers a.active::before,
.desktop .header .product-menu .cms-menu-live-betting a.active::before{
   filter:unset
}
.desktop .header .product-menu li {
    padding:0;
}
#root .desktop .header .product-menu a.active, .desktop .hover .header .product-menu a:hover {
    color: var( --c-text-dark-blue);
    background-color:var(--c-background-white);
    position:relative;
    /* border-bottom: 5px solid var(--c-emphasis); */
}
#root .desktop .header .product-menu a.active::after {
    position:absolute;
    content:"";
    left:0;
    bottom:0;
    height:4px;
    width:100%;
    background-color:var(--c-accent-color)
}
.desktop .header app-language {
    order:1;
    margin-left:1vw;
}
.desktop .header app-language, .desktop .header app-odds-format {
    margin-right: 5px
}

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


#root  app-language .ui-dropdown {
    background-color:transparent;
    padding-right:0;
}
.mobile .header {
    background-color: transparent;
    box-shadow: unset;
    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-text-light);
    padding:10px;
    padding-bottom:0px;
}
.mobile .header > app-widget-host {
    background-image:var(--c-linear-gradient-1);
    border-radius:var(--r-10);
    padding:0 12px;
}

.mobile .header .logo {
    display: block;
    position: unset;
    max-width: var(--c-logo-size-mobile);
    width:100%;
    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;
    margin-right:2vw
    /* padding-left: 8px; */
}

.mobile .header-links.right {
    justify-content: flex-end;
    margin-left:auto;
    /* padding-right: 8px; */
}

.mobile .mobile-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mobile .mobile-link .icon {
    width: 22px;
    height:22px;
     filter:saturate(0) invert(1);
    background-repeat:no-repeat;
     background-image:var(--c-global-icon-spritesheet);
    background-position: -303px -9px;
}

.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 {
    background-color:transparent;
    padding:0;
    height:auto;
    min-width:90px;
    border-radius:var(--r-10);
    
   
}
 .header .logout-button {
    font-size:0;
    width:24px;
    height:24px;
    min-width:unset;
    border:0;
    filter:saturate(0) invert(1);
    background-repeat:no-repeat;
     background-image:var(--c-global-icon-spritesheet);
    background-position: -509px -9px;
}
 .header .button div {
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
     color:var(--c-text-light-e);
    font:var(--t-small-text-bold)
    
}
 .header .button.login {
    background-color:transparent;
    border:1px solid var(--c-text-light-e);
     margin-right:auto;
}
.header .button.register {
    background-color:var(--c-accent-color);
    margin-right:5px;
   
}
.site-content {
    max-width:1000px;
     display:block;
}
.site-text-content {
    color:var(--c-text-light-e);
    font:var(--t-small-text-normal);
    
    display:block;
}
.site-text-content h2 {
    background-color: unset;
    border-left: 4px solid var(--c-accent-color);
    border-radius: 0px;
    padding:5px 0px;
    padding-left:20px;
}
.site-text-content > div p,
.site-text-content > div  > span,
.site-text-content > div li,
.site-text-content > div p  span,
.site-text-content > div li span{
     font:var(--t-small-text-normal)!important;
    text-align:left!important;
}
.site-text-content  img {
    width:100%;
    height:auto;
    max-width:1000px
}
.site-text-content a {
    color:var(--c-accent-color)
}
.sub-links button {
    width:100%;
    color:var(--c-text-light-e);
    text-align:left;
    font:var(--t-small-text-normal);
    opacity:.8;
    border:0;
}
.sub-links button.pressed {
    color:var(--c-accent-color);
    opacity:1;
}
.sub-links button:hover {
    border:0
}
.header .search-container {
     right:0px;
    position:fixed;
    top:-100px;
    padding:10px;
   background-image: var(--c-linear-gradient-1);
    background-size:100vw var(--c-header-top);
    background-position:right center;
    border-bottom-left-radius:var(--r-10);
    border-bottom-right-radius:var(--r-10);
    box-shadow:inset 0px 1px 2px #00000033;
    z-index:800
}
.show-search .search-container {
    top:calc(var(--c-header-top) + var(--c-header-bottom));
   
     font:var(--t-small-text-normal);
}
.search-container input {
    background-color:var(--c-background-white-10)
}
#root .search-container app-search input {
    height: 36px;
    width: 100%;
    color:var(--c-text-light-e);
    background-position: 6px 6px;
    background-repeat: no-repeat;
    background-size: 24px;
    text-indent: 8px;
    padding: 8px 12px;
    background-color:var(--c-background-white-10);
    border:1px solid var(--c-background-white-50);
    position: relative;
    font:var(--t-small-text-normal);
    padding-right:55px;
}
 .search-container .search-dropdown .ui-autocomplete {
    display:flex;
    flex-direction:column
}
#root  .search-container  .ui-autocomplete-panel {
     position:unset;
    border-radius:var(--r-10);
     border-top-left-radius:0;
    border-top-right-radius:0;
    background-color: var(--c-brand-color);
    min-width:unset;
    padding:10px;
 }
 .search-container .close-search-button {
     width:45px;
     height:45px;
     /* border:1px solid var(--c-background-white-50); */
     border-radius:var(--r-10);
     margin-left:8px;
     position:absolute;
     right:10px;
     z-index:100;
     cursor:pointer;
 }
.search-container .close-search-button::before {
    width:20px;
    height:20px;
    position:absolute;
    background-repeat: no-repeat;
    background-image: var(--c-global-icon-spritesheet);
    background-size:450px auto;
    background-position: -103px -55px;
    filter:saturate(0) invert(1) brightness(10);
    left:50%;
    top:50%;
    content:"";
    transform:translate(-50%,-50%);
    pointer-events: none;
}
#root  .search-container  .ui-autocomplete-panel li{
    background-color:var(--c-background-white-10);
    border-radius:var(--r-10);
}
#root  .search-container  .ui-autocomplete-panel li:not(:last-child) {
    margin-bottom:10px;
} 
 .search-container .search-dropdown .ui-autocomplete-loader {
     position:absolute;
     right:40px;
     top:22.5px;
 }
.mobile  .search-container {
    z-index:-1;
}
.show-search .mobile  .search-container {
    box-shadow:inset 0px 8px 6px #00000033;
    top:calc(var(--c-header-mobile) - 8px);
    width:calc(100% - (var(--c-mobile-padding) * 2));
    right:unset;;
    left:var(--c-mobile-padding);
    padding-top:15px;
}
.desktop .header .search-container {
    right:20px;
}