.header .betbuilder-toggle{
    display: none
}

.header{
    display: flex;
    position: sticky;
    top: 0;
    z-index: 51
}
.header app-widget-host{
    display: flex
}
.header > app-widget-host{
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 16px;
    color: var(--c-white);
    background-image: linear-gradient(323deg, var(--c-black-e), var(--c-primary) 70%);
    z-index: 999
}
.header-left > app-widget-host,
.header-right > app-widget-host{
    align-items: center;
    justify-content:flex-end
}
.header .logo img{
    cursor: pointer;
    width: 130px;
    height: auto
}
.header .main-menu{
    padding-left: 25px
}
.header .menu .menu-link{
    font-size: 16px;
    line-height: 16px;
    color: var(--c-white);
    background: transparent;
    padding-right: 5px;
    text-transform: uppercase
}

.header .menu li:not(:last-child) a:after {
    content:"|";
    margin-left:9px;;
    font-weight:normal;
    color: var(--c-white);
}
.header .menu .menu-link:hover{
    color: var(--c-white-e)
}
.header .menu .menu-link.active{
    font-weight: bold;
    color: var(--c-white-e)
}
.header .header-menu-item{
    text-transform: uppercase;
 /*   margin-right: 15px; */
    cursor: pointer;
    position: relative
}
.header .header-menu-item.link,
.header .header-menu-item.dropdown .header-icon{
    opacity: .8
}
.header .header-menu-item.link:hover,
.header .header-menu-item.dropdown .header-icon:hover{
    opacity: 1
}
.header .header-menu-item > app-widget-host{
    display: flex;
    align-items: center;
}
.header .header-icon{
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    transition: .3s
}
.header-right > app-widget-host > app-block:not(.user-guest),
.header .header-menu-item .contact-us-icon,
.header .account-info{
    margin-left:8px
}

.header .header-icon.promo-icon{
    background-image: url("/v1.171/r/images/cybet/icons/icon_promo.png")
}
.header .header-icon.search-icon{
    background-image: url("/v1.171/r/images/cybet/icons/icon_search_new.png")
}
.header .header-icon.contact-us-icon{
    background-image: url("/v1.171/r/images/cybet/icons/icon_contacts.png")
}
.header .header-promotion-icon{
    background-image: url(/v1.171/r/images/cybet/icons/gift-white.svg);
    width: 20px;
    height: 20px;
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* margin: 0 5px; */}
.header .hover-text{
    display: flex;
    align-items: center;
    text-transform: capitalize;
    max-width: 0;
    overflow: hidden;
    transition: .3s;
    white-space: nowrap;
    position: absolute;
    bottom: -25px;
    color: var(--c-primary);
    background-color: var(--c-primary-d);
    border-radius: var(--r-b)   
}
.header .hover-text > div{
    padding: 5px
}
.header .header-menu-item:hover .hover-text{
    max-width: 110px
}
.header .unread-messages:hover .hover-text{
    max-width: 110px;
    padding-left: 5px
}
.header .header-menu-item.dropdown{
    position: relative;
    z-index: 1000;
    
}
.header  .header-menu-item.dropdown {
    margin-left:auto
}
#root.contactus-dropdown .header .header-menu-item.dropdown .hover-text {
    display: none
}
.header .header-menu-item .dropdown-content{
    display: none;
    position: absolute;
    background-color: var(--c-white-e);
    color: var(--c-primary);
    top: 30px;
    z-index: 2
}

.contactus-dropdown .h-align-center.addclass-added,
.contactus-dropdown-mobile .h-align-center.addclass-added,
.h-align-center.removeclass-added,
.h-align-center.removeclass-added-mobile,
.contactus-dropdown-mobile .h-align-center.addclass-added-mobile{
    display: none
}
.contactus-dropdown .h-align-center.removeclass-added,
.contactus-dropdown .contact-us-icon.header-icon.removeclass-added,
.contactus-dropdown-mobile .h-align-center.removeclass-added-mobile{
    display: block
}
#root.contactus-dropdown .header .header-menu-item .dropdown-content,
#root.contactus-dropdown .header .mask-overlay.c-dropdown > app-widget-host,
#root.account-dropdown .header .mask-overlay.a-dropdown > app-widget-host,
#root.contactus-dropdown-guest .header .header-menu-item .dropdown-content{
    display: block
}
.header .header-menu-item .dropdown-content > app-widget-host,
.header .header-menu-item .dropdown-content > div >  app-widget-host{
    display: flex;
    flex-direction: column;
    width: 160px;
}
.header .header-menu-item .dropdown-content a{
    color: var(--c-primary);
}
.header .header-menu-item .dropdown-element a{
    padding: 0 5px;
    line-height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer
}
.header .header-menu-item .dropdown-element button {
    padding:0px;
}
.header .header-menu-item .dropdown-element:hover{
    background-color: var(--c-shade)
}
.header .header-menu-item .dropdown-element a:before{
    content: '';
    height: 30px;
    width: 30px;
    background-position: center;
    background-size: contain;
    margin-right: 5px;
        background-repeat: no-repeat;
}

.header .header-menu-item .dropdown-element.faq-link a:before{
    background-image: url(/v1.171/r/images/cybet/icons/faq-dark.svg);
        width: 30px;
    height: 20px;
}
.header .header-menu-item .dropdown-element.live-chat a:before{
    background-image: url("/v1.171/r/images/cybet/icons/icon_livechat.png")
}
.header .header-menu-item .dropdown-element.call-center a:before{
    background-image: url("/v1.171/r/images/cybet/icons/icon_call_center.png")
}
.header .header-menu-item .dropdown-element.viber a:before{
    background-image: url("/v1.171/r/images/cybet/icons/icon_viber.png");
    height: 20px;
    background-position: bottom;
    background-repeat: no-repeat
}
.header .header-menu-item .dropdown-element.contact a:before{
    background-image: url("/v1.171/r/images/cybet/icons/icon_email.png")
}
.header .header-menu-item .dropdown-element.natasha a:before{
    background-image: url("/v1.171/r/images/cybet/icons/icon_natasha.png")
}
.header .lang-selector{
    display: flex;
    align-items: center;
    margin-right: 15px
}
.lang-selector .filter-language-name{
    display: none
}
body .lang-selector .ui-dropdown{
    border-radius: 0;
    width: 36px;
    min-width: 36px;
    border: 0;
    min-height: auto;
    background-color: transparent
}
#root .lang-selector .ui-dropdown:hover{
    border: 0
}
.lang-selector .ui-dropdown label.ui-dropdown-label{
    background-color: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center
}
body .ui-dropdown:not(.ui-state-disable).ui-state-focus{
    border: 0
}
.lang-selector label span{
    display: none
}
.lang-selector label img{
    border-radius: 50px;
    width: 19px;
    height: 19px;
    object-fit: cover
}
#root .lang-selector .ui-dropdown-trigger{
    display: none
}
#root .lang-selector .ui-dropdown-panel{
    width: 160px;
    top: 41px!important;
    border: 0;
    line-height: 28px;
    box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 30%)
}
#root .lang-selector li{
    display: flex;
    padding: 5px
}
#root .lang-selector li:hover{
    background-color: var(--c-shade)
}
.lang-selector li img{
    width: 25px;
    height: 19px
}
.lang-selector li span{
    margin-left: 10px
}
.lang-selector .ui-dropdown .ui-dropdown-panel{
    min-width: unset
}
.stream-error.not-allowed {
    display: grid;
    gap: .5rem;
    justify-items: center;
    padding: 1rem;
}
.mobile .stream-error.not-allowed > div {
    color: #ffffff;
}
.stream-error.not-allowed .button-submit-login,
.header .loginbutton button,
.header .register button,
.right-sidebar .guest-my-bets .loginbutton button{
    height: 36px;
    cursor: pointer;
    background: transparent;
    color: var(--c-white-e);
    padding: 0 12px;
    border: 1px solid var(--c-white-e);
    border-radius: 2px;
    margin-right: 5px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: .3px
}
.stream-error.not-allowed .button-submit-login {
    /*max-width: 65px;*/
    /*padding: 0 6px;*/
}
.os-ios .header .loginbutton button,
.os-ios .header .register button,
.os-ios .right-sidebar .guest-my-bets .loginbutton button {
    text-transform:none;
}
.stream-error.not-allowed .button-submit-login,
.header .loginbutton button,
.right-sidebar .guest-my-bets .loginbutton button{
    background: var(--c-emphasis);
    border: 0;
    color: var(--c-primary)
}
.header .account-info{
    margin-right: 20px;
    cursor: pointer
}
.header .account-info > app-widget-host{
    display: flex;
    flex-direction: row;
    height: 36px;
    align-items: center
}
.header .account-info > app-widget-host > .beto-content-block{
    color: var(--c-white-e);
    display: flex;
    align-items: center
}
.header .account-info > app-widget-host > .beto-content-block:after{
    display: flex;
    content: "";
    width: 15px;
    height: 15px;
    background-image: url(/v1.171/r/images/cybet/icons/arrow-down.svg);
    background-size: contain;
    margin: 0 5px
}
.header .user-account .deposit-link{
    margin-right: 8px;
    display: flex;
   
}
 
.header .user-account .deposit-link > div,
.header .user-account .logout-button{
    display: flex;
    align-items: center;
    background-color: var(--c-emphasis);
    padding: 0 5px; 
    text-transform: uppercase;
    font-weight: bold;
    color: var(--c-primary);
    cursor: pointer;
    border-radius:3px;
    width:100%;
    justify-content:
    center;
    
}
.mobile .header .user-account .deposit-link {
    align-items:center;
}
.mobile .header .user-account .deposit-link > div {
     width:80px;
    height:30px;
    font-size:11px;
}
.header .user-account .logout-button{
    background-color: var(--c-tint-b);
    color: var(--c-white-e);    
    height: 100%
}
.header .user-account .deposit-link:hover,
.header .user-account .logout-button:hover{
    opacity: .7
}
.header .user-account .account-info{
    position: relative
}
.header .user-account .unread-messages > app-widget-host{
    align-items: center;
    margin-right: 10px;
    position: relative;
    cursor: pointer
}
.header .user-account .unread-icon{
    background-image: url("/v1.171/r/images/cybet/icons/icon-email-white.svg");
    width: 20px;
    height: 20px;
    opacity: .8;
    background-size: contain
}
.header .user-account .unread-icon:hover{
    opacity: 1
}
.header .user-account .unread-icon app-content-block,
.view-page-account-messages .message-button-input .unread-icon app-widget-host{
    position: absolute;
    top: 1px;
    right: 2px;
    background-color: var(--c-emphasis);
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: bold;
    color: var(--c-primary);
    line-height: 17px
}
.view-page-account-messages .message-button-input .unread-icon app-widget-host{
    top: -6px;
    right: unset;
    left: 50%;
    transform: translateX(34px);
}
.header .user-account .dropdown-content{
    display: none;
    position: absolute;
    top: 37px;
    z-index: 100;
    color: var(--c-primary);
    width: 340px;
    right: 0;
    background-color: var(--c-white-e);
    box-shadow: 0px 0px 14px 0px var(--c-black)
}
.desktop .header .desktop-account-dropdown{
    position: relative
}
.desktop .header .user-account .dropdown-content{
    top: 49px
}
#root.account-dropdown .header .user-account .dropdown-content{
    display: block
}
.header .user-account .dropdown-content > app-widget-host,
.header .user-account .funds > app-widget-host{
    flex-direction: column
}
.header .user-account .user-menu-header{
    background-color: var(--c-primary-d);
    height: 40px
}
.header .user-account .user-menu-header > app-widget-host{
    align-items: center
}
.header .user-account .user-menu-header .incognito-mode{
    display: flex;
    align-items: center;
    margin-left:10px;
    margin-right: auto;
    text-transform: uppercase
}
.header .user-account .user-menu-header .incognito-mode::before,
.header .user-account .user-menu-header .show-hide-ballance app-widget-host::before{
    display: flex;
    background-image: url(/v1.171/r/images/cybet/icons/icon-incognito.svg);
    content: '';
    height: 20px;
    width: 20px;
    background-position: center;
    background-size: contain;
    margin-right: 5px;
    opacity: .8
}
.header .user-account .user-menu-header .show-hide-ballance app-widget-host::before{
    width: 44px;
    height: 44px;
    background-image: url(/v1.171/r/images/cybet/icons/icon-switched-off.svg)
}
#root.hide-ballance .header .user-account .user-menu-header .show-hide-ballance app-widget-host::before{
    background-image: url(/v1.171/r/images/cybet/icons/icon-switched-on.svg)
}
#root.hide-ballance .header .account-info > app-widget-host > .beto-content-block.fullbalance,
.header .account-info > app-widget-host > .beto-content-block.incognito-balance{
    display: none
}
#root.hide-ballance .header .account-info > app-widget-host > .beto-content-block.incognito-balance{
    display: flex
}
#root .total-net-balance > app-widget-host{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px
}
.total-net-balance-label{
    font-weight: bold
}
.tnb-value{
    opacity: .4;
    font-weight: bold;
}
.desktop .tnb-value{
    opacity: 1
}
.player-protection-btn{
    flex: 1 1 100%;
    margin: 15px 0
}
.desktop .header .player-protection-btn{
    padding: 0 10px;
    margin-top: 0
}
.player-protection-btn > div{
    display: flex;
    align-items: center;
    background-color: var(--c-emphasis);
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--c-primary);
    cursor: pointer;
    border-radius: 3px;
    line-height: 1.6;
    justify-content: center;
    opacity: .7;
    transition: all .3s
}
.mobile .player-protection-btn > div,
.player-protection-btn:hover > div{
    opacity: 1
}

.header .user-account .user-data{
    margin: 0 10px;
    font-weight: bold
}
.header .user-account .user-data > app-widget-host{
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-primary-d);
}
.header .user-account .funds{
    padding: 10px
}
.header .user-account .funds .balance > app-widget-host,
.header .user-account .funds .withdrawable > app-widget-host,
.header .user-account .funds .internal-available-bonus > app-widget-host,
.header .user-account .funds .internal-available-rollover > app-widget-host{
    justify-content: space-between;
    padding: 5px 0;
    letter-spacing: -.5px
}
.header .user-account .funds .internal-available-rollover .internal-available-rollover-target data-view{
    display: flex;
}
.header .user-account .funds .amount{
    opacity: .4;
    font-weight: bold
}
.header .user-account .account-menu{
    padding: 10px
}
.header .user-account .account-menu .account-link{
    flex: 1;
    cursor: pointer;
  /*  padding-right: 10px */
}
.header .user-account .account-menu .account-link > div,
.mobile .header .user-account .logout-button{    
    justify-content: center;
    align-items: center;
    display: flex;
    border: 1px solid var(--c-primary);
    padding: 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    opacity: .7
}
/*.header .user-account .account-menu .logout-button{
    display: flex;
    background-color: unset;
    border: 0;
    font-size: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    padding-left: 5px;
    opacity: .7;
    background-image: url("/v1.171/r/images/cybet/icons/icon-logout.svg");
    background-size: 32px;
    background-position: center right;
    background-repeat: no-repeat
}*/
.header .user-account .account-menu .account-link:hover,
.header .user-account .account-menu .logout-button:hover{
    opacity: 1
}


.header .deposit-limit-waiting{
  position: absolute
}

.header .kycWarningRibbon{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}
.header .kycWarningRibbon app-widget-host{
    display: flex;
    flex-direction: column;
}
.header .kycWarningRibbon .kycInnerRibbon app-widget-host{
    justify-content: center;
    font-weight: bold;
    color: var(--c-white-e)
}
.header .kycWarningRibbon .kycInnerRibbon app-widget-host .beto-content-block{
    text-align: center
}
.header .kycWarningRibbon .kyc-content-holder{
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--c-white-e);
    line-height: 18px;
}
.header .kycWarningRibbon .kyc-content-holder .fakeLink{
    color: var(--c-red);
    text-decoration: underline
}


.header .user-account .dropdown-content .show-hide-tnb app-widget-host::before{
    display: flex;
    background-image: url(/v1.107/r/images/site/icons/icon-eye-open.svg);
    content: '';
    height: 20px;
    width: 20px;
    background-position: center;
    background-size: 40px;
    margin-left: 10px;
    margin-bottom: 3px;
}
.show-hide-tnb app-widget-host::before{
    display: flex;
    background-image: url(/v1.197/r/images/site/icons/icon-eye-open.svg);
    content: '';
    height: 20px;
    width: 20px;
    background-position: center;
    background-size: 40px;
    margin-left: 10px;
    margin-bottom: 3px;
}
#root.show-tnb   .show-hide-tnb app-widget-host::before{
    background-image: url(/v1.197/r/images/site/icons/icon-eye-closed.svg)
}
#root  .tnb-value > app-widget-host{
    align-items: center;
    flex-direction:row;
}
#root  .tnb-value data-view{
    display: none
}
#root.show-tnb  .tnb-value data-view{
    display: block
}