/* 2/2 DiS */
.match-score, .match-server, .set-score {
    display: flex;
    flex-direction: column !important;
}

.mobile .user-guest {
    margin-top: 0;
}

.user-guest {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}

#root .desktop .body .left-sidebar, #root .desktop .body .right-sidebar, #root .desktop .body .content {
    max-height: calc(100vh - 128px);
    background-color: var(--c-primary-b);
    /* color: var(--c-white); */
    /* margin: 0 0; */
}

body .ui-table .ui-table-thead>tr>th, body .ui-table .ui-table-tbody>tr, body .ui-paginator, body .ui-table .ui-table-tbody>tr>td {
    background-color: var(--c-primary);
    color: var(--c-white-e);
}

/*  */
.desktop .body .tabbed-betslip-content ::-webkit-scrollbar-track {
    background-color: var(--c-primary-c);
}

.desktop .body .tabbed-betslip-content ::-webkit-scrollbar-thumb:vertical {
    background-color: var(--c-emphasis);
    border: solid 2px var(--c-primary-c);
}

/* SCROLLBARS / END */
#root .desktop {
    width: 100%;
    height: 100%
}

#root .desktop .header {
    height: 112px;
    position: relative;
    background: var(--c-primary);
    padding: 0px;
    padding-top: 0;
    margin-bottom: 8px;
}

#root .desktop .body {
    padding: 0 0;
    flex-wrap: nowrap;
}

#root .desktop .body .left-sidebar {
    margin-left: 8px
}

#root .desktop .body .left-sidebar, #root .desktop .body .right-sidebar {
    /* width: 24%; */
    /* min-width: 320px; */
    width: 100%;
    display: inline-flex;
}

#root .desktop .body .left-sidebar {
    margin-left: 8px;
    flex: 1 2 250px;
    min-width: 250px;
    max-width: 300px;
}

#root .desktop .body .right-sidebar {
    flex: 1 0 328px;
    min-width: 328px;
    max-width: 360px;
}

#root .desktop .body .left-sidebar .navigation {
    width: 100%;
}

#root .desktop .body .content {
    min-width: 320px;
    margin: 0;
    flex: 5 1 480px;
}

#root .desktop .footer {
    padding: 36px 24%;
    
    order: 4;
    margin-top: auto;
   
}

#root .desktop .footer .links .link, #root .desktop .footer .logo.link {
    cursor: pointer;
}

.desktop .main-carousel {
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 8px 0;
}

.desktop .slideshow-container {
    height: 200px !important;
}

#root .desktop .header app-widget-host {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: inherit;
    justify-content: space-between;
}

#root .desktop .header .header-links-left {
    flex-direction: row;
    width: 100%;
    height: 40px;
    justify-content: flex-start;
}

#root .desktop .header .product-bar {
    width: calc(100% - 240px);
    z-index: 2;
    justify-content: flex-start;
    padding: 2px 8px
}

#root .desktop .header .product-bar .product-menu {
    flex-wrap: wrap;
    min-width: 112px;
    overflow: hidden;
    width: auto;
}

#root .desktop .header .product-bar .product-menu ul {
    justify-content: left;
    flex-wrap: wrap;
    margin-top: 0px;
}

#root .desktop .header .product-bar .product-menu ul li {
    flex-wrap: nowrap;
    margin-right: 8px;
}

#root .desktop .header .product-bar .sports-search {
    padding: 0 0 0 12px;
    flex: 1 0 320px;
    min-width: 320px;
    max-width: 360px;
}

#root .desktop .header .product-bar>app-widget-host {
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: 36px;
    width: auto;
}

#root .desktop .header .menu .menu-link {
    background-color: transparent;
}

#root .desktop .header a.menu-link {
    color: #fff;
    font-size: 16px;
    padding: 4px 4px;
    height: 36px;
    line-height: 1.75;
}

#root .desktop .header .menu li .menu-link .menu-label {
    white-space: nowrap
}

#root .desktop .header a.menu-link.active, #root .desktop .header .header-links-left .product-bar .betting-history {
    background-color: var(--c-primary-c);
    color: var(--c-emphasis);
    border-radius: 2px;
    padding: 4px 12px
}

#root .desktop .header .header-links-left .product-bar .betting-history {
    background-color: transparent;
}

#root .desktop .header .betting-history-link div {
    color: #fff;
    font-size: 16px;
    padding: 4px 4px;
    height: 36px;
    line-height: 1.75;
}

#root .desktop .header .header-links-right {
    position: relative;
    width: 100%;
    height: 72px;
    padding-right: 8px;
    padding-top: 2px;
    /* margin-bottom: 4px; */
    background-color: var(--c-shade);
}

#root .desktop .header .login h2.login-header {
    display: none;
}

#root .desktop .header .login form {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
}

#root .desktop .header .login form button {
    height: 36px;
    padding: 0 24px;
}

#root .desktop .header .login .form-row, #root .desktop .header .register {
    display: inline-block;
    margin-right: 4px;
}

#root .desktop .header .register>div {
    height: 36px;
    font: bold 14px/35px "Open Sans", Arial, sans-serif;
    cursor: pointer;
    background: #18A460;
    color: #fff;
    padding: 0 24px;
    border-radius: 2px
}

#root .desktop .header .beto-login .generic-form .form-row input {
    color: var(--c-white);
    background: var(--c-tint-6);
    width: 160px;
    color: var(--c-background);
}

#root .desktop .header .beto-login .generic-form .form-row input:focus {
    background: var(--c-white);
}

#root .desktop .header .beto-login .generic-form .form-row input:visited {
    color: var(--c-yellow);
}

#root .desktop app-search span.ui-autocomplete {
    padding: 0;
}

#root .desktop app-search span>input {
    padding: 8px 12px;
    height: 36px;
}

#root .desktop .header .product-bar .sports-search input {
    width: 100%;
}

#root .desktop .right-sidebar .betslip {
    position: relative;
    display: flex;
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
}

.multiple-container {
    background-color: var(--c-primary-b);
}

#root .desktop .header .logo {
    /* position: absolute; */
    width: 180px;
    height: 60px;
    left: 20px;
    top: 5px;
    background-size: contain;
    display: flex;
    align-items: center;
    margin-top: 5px;
}

#root .desktop .header .logo img {
    margin-top: 0;
}

#root .desktop .desktop-register-popup {
    min-width: 500px;
    max-width: 500px;
    min-height: 500px;
    max-height: 500px;
    z-index: 2100 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
}
#root .desktop .desktop-register-popup .ui-dialog-content {
    overflow:hidden;
}

/* BETSLIP */
#root .desktop .betslip-container {
    padding: 0px;
    width: 100%;
}

/*  */
#root .desktop .nav-favorites-header {
    padding-left: 0;
}

#root .desktop .nav-sport, #root .desktop .nav-category, #root .desktop .nav-tournament {
    padding: 8px 8px 8px 8px;
}

#root .desktop .nav-sport-wrapper>div.active:first-child, #root .desktop .nav-sport-wrapper>div:last-child {
    border-bottom: solid 1px var(--c-primary-c);
}

#root .desktop .nav-tournament-wrapper:last-child {
    border-bottom: solid 0px var(--c-shade);
}

#root .desktop .nav-tournament-wrapper:first-child {
    border-top: solid 0px var(--c-shade);
}

#root .desktop .nav-favorites-panel>div {
    padding-left: 0
}

/*  */
#root span.numeric-input-wrapper input {
    border: 0;
    background-color: transparent;
    padding-right: 0px;
    /* line-height: 2; */
    color: var(--c-white);
}

#root span.numeric-input-wrapper::after {
    display: none
}

/*  */
.desktop .content {
    background-color: var(--c-background);
}

.desktop.view-page- .content {
    background-color: var(--c-background);
}

.desktop .content.user-page-content {
    padding-bottom: 32px
}

/*  */
.desktop .body .menu {
    height: 100%;
    background-color: var(--c-background);
    flex-wrap: wrap;
}

.desktop .body .live-betting-menu .menu {
    flex-direction: row;
    justify-content: flex-start;
    height: 30px;
    width: 100%;
}

.livebetmenu_container.ng-star-inserted {
    width: 150px;
    height: 30px;
}

.break {
    /* flex-basis: 100%; */
    height: 0;
}

body .body > app-widget-host {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.desktop .body .menu li a {
    height: 30px;
    line-height: 1.6;
    padding: 4px 12px;
    border-right: var(--b-border);
    border-bottom: var(--b-border);
    color: var(--c-white);
    background-color: var(--c-black);
    font-weight: 600;
}

.desktop .body .menu li a:last-child {
    border: none
}

.desktop .body .menu li a.active, .desktop .body .menu li a:hover {
    border-right: none;
    color: var(--c-emphasis) !important;
}

.mobile .body .menu li a.active, .mobile .body .menu li a:hover {
    border-right: none;
    color: var(--c-emphasis) !important;
}

.desktop .body .menu li a span {
    text-align: center;
    width: 100%;
}

:focus {
    outline: none;
}

#root a {
    color: var(--c-white);
}

#root .desktop .header .header-links-left .product-bar .betting-history-link div:hover {
    color: var(--c-emphasis);
    cursor: pointer;
}

#root .desktop a :hover {
    color: var(--c-emphasis);
}

/*  */
#root .bet-container .bet-stake-payout .bet-stake-input input, #root .bet-container .bet-stake-payout .bet-payout-input input {
    width: 100%;
    padding: 0 30px 0 4px;
    text-align: right !important;
    height: 30px;
    line-height: 30px;
    -webkit-appearance: none;
    color: var(--c-black);
    padding: 0 5px!important;
}

#root app-amount-input .stake .currency-symbol {
    position: absolute;
    left: 4px;
    /* top: 12px; */
}

/* BETSLP MARGNS */
#root .betslip-container .systems-rows-container, #root .betslip-bets-container .groups-container, #root .betslip-container .bet-container {
    margin-bottom: 4px;
    border-radius: 4px;
    overflow: hidden;
}

#root .desktop .betslip-container .payout-input {
    /* hide payout */
    display: none
}

#root .footer {
    background-color: var(--c-primary-b);
}

#root .forgot-password.link {
    padding: 10px;
    color: var(--c-white);
    padding-right: 30px;
    margin-right: 20px;
}

/* USER ACCOUNT BAR */
#root .desktop .header .user .account-info.link {
    width: 124px;
    height: 100%;
    line-height: 2.8;
    position: relative;
    margin-right: 24px;
    color: var(--c-white);
    top: -24px;
    z-index: 1000
}

#root .desktop .header .user .account-info.link app-widget-host:before {
    content: "";
    display: block;
    position: relative;
    top: 10px;
    /* left: -28px; */
    width: 24px;
    height: 24px;
    opacity: .7;
    background: url(/v2.28/r/images/site/icons/user.svg) center center no-repeat;
    z-index: 999;
}

#root .desktop .header .user .account-info.link:hover {
    color: var(--c-white-e);
    cursor: pointer
}

#root .desktop .header .user .account-info.link:hover:before {
    opacity: 1;
}

#root mobile .user-new-message, .user-messages {
    padding: 20px;
}

#root .user-page-header {
    color: var(--c-white);
    background-color: var(--c-primary-b);
    display: flex;
    justify-content: center;
}

#root .user-page-content .deposit-methods-table > app-widget-host {
    padding: 0px;
}

#root .mobile .user-page-content .deposit-methods-table .deposit-method .deposit-method-label {
    padding-top: 15px;
    height: 50px;
    /* margin-top: 5px; */
}

#root .mobile .user-page-content .deposit-methods-table .deposit-method .deposit-method-label div {
    padding-top: 15px;
}

#root .user-new-message-link, #root .user-page-content, body .ui-dialog .ui-dialog-content {
    background-color: var(--c-primary-b);
    color: var(--c-white);
}

.account-statement {
    display: flex;
    justify-content: center;
}

.account-statement .generic-form {
    max-width: 900px;
}

.deposit-method-label div {
    color: var(--c-white)
}

#root .content .deposit-methods-table .deposit-method {
    border-top: 1px solid var(--c-primary-d);
}

#root .user-page-note {
    text-align: center;
    color: var(--c-white);
    text-indent: 24px;
    padding-top: 5px;
    cursor: pointer;
}

#root .desktop .user-links .link {
    padding: 12px;
    line-height: 1;
    color: var(--c-white)
}

#root .desktop .user-links .link:hover {
    color: var(--c-white-e);
    cursor: pointer
}

#root .desktop .user-links .deposit-link {
    background-color : var(--c-emphasis);
    color: var(--c-white-e);
    height:24px;
    margin-top:6px;
    line-height:0px;
    border-radius:2px
}

/* * * */
#root .back {
    margin: 0;
    width: 100%;
    display: flex;
    padding: 8px;
    background-color: var(--c-primary-b);
}

#root .back .back-button {
    display: flex ;
    font-size: 16px;
    line-height: 24px;
    background-color: var(--c-primary);
    border-radius: var(--r);
    padding: 6px 12px
}

#root .back-button:before {
    display: block ;
    color: var(--c-white);
    content: "";
    background-image: url("/v2.28/r/images/site/icons/back-arrow.svg");
    height: 24px;
    width: 24px;
    margin-left: -4px;
    margin-right: 4px;
    opacity: 0.7
}

#root .back-button:hover:before {
    opacity: 1
}

#root .back-button:hover {
    color: var(--c-white-e);
    box-shadow: var(--ds-2p);
    background-color: var(--c-emphasis)
}

#root .user-page-content .back {
    padding: 8px 0px
}

/*-----*/
body .ui-chkbox .ui-chkbox-box.ui-state-active {
    border-color: var(--c-emphasis);
    background-color: var(--c-emphasis);
}

.button-submit-profile-form {
    background-color: var(--c-emphasis);
    font-weight: 700;
    color: var(--c-white-e);
    height: 40px;
}

#root .desktop .user-account .logout button {
    padding: 4px 12px;
    margin: 4px 8px;
    height: 28px;
    line-height: 1;
    background-color: var(--c-primary-c);
    color: var(--c-white)
}

#root .desktop .user-account .logout button:hover {
    background-color: var(--c-primary-d);
    color: var(--c-white-e)
}

/*  */
#root .desktop .left-sidebar .balance-details, #root .left-sidebar .left-user-account-menu {
    padding: 20px 24px;
    background-color: var(--c-primary-b);
    border-bottom: var(--b-border)
}

#root .desktop .left-sidebar .balance-details {
    background-color: var(--c-primary-b);
    color: var(--white);
}

#root .desktop .left-user-account-menu .link{
    margin-bottom: 12px;
}

#root .desktop .left-user-account-menu .level-1.link {
    font-weight: 600;
    height: 36px;
    line-height: 4.4;
    margin-top: 10px;
    border-top: var(--b-border)
}

#root .left-sidebar .beto-block.left-user-account-menu app-content-block:nth-child(2) {
    border-top: none;
    margin-top: -10px
}

#root .desktop .left-user-account-menu .link:hover {
    color: var(--c-emphasis-b);
    text-decoration: underline;
    cursor: pointer
}

.row-rollover .value>app-widget-host {
    flex-direction: row
}

#root .balance-details .row .value {
    font-weight: 700;
    color: var(--c-emphasis)
}

/*  */
.ui-calendar.ui-calendar-w-btn .ui-inputtext {
    width: calc(100% - 34px)
}

/*  */
#root .desktop .bet-container .bet-details-odds .bet-match-info .bet-match-tournament-info {
    flex: 0 1;
    min-width: 0;
}

/*  */
.profile-info, .profile-header, .documents-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-header, .documents-header {
    height: 40px;
    font-size: 25px;
    font-weight: 600;
    margin: 20px 0px;
}

.form-row ngx-combo-datepicker {
    display: flex;
}

tel-input input {
    margin: 0px;
    padding: 0px;
}

.form-row ngx-combo-datepicker select {
    flex: 1 1 33.33%;
}

.form-element-wrapper {
    position: relative;
}

.generic-form .form-row .form-element-wrapper .form-element-error {
    color: red;
    display: flex;
    width: 200px;
    top: 5px;
}

.desktop form {
    max-width: 720px;
}

.desktop .login-menu-register .login {
    margin-top: 30px;
}

.change-password-content form {
    padding-left: 0px;
    padding-right: 0px;
}

.submit-login {
    background-color: var(--c-emphasis);
    height: 40px;
}

.desktop .generic-form input, .desktop .generic-form select, .desktop .generic-form .ui-dropdown-label {
    color: var(--c-white);
}

.profile-document-upload, .profile-document-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#root .user-page-content .user-top, #root .user-page-content .user-menu {
    color: var(--c-white-e);
    padding-bottom: 16px;
}

#root .user-page-content .user-top .funds app-block div {
    color: var(--c-white-e);
}

#root app-history {
    background-color: var(--c-primary-b);
}

#root .history-header .ui-calendar {
    width: 100%;
    margin-top: 8px;
}

.desktop .beto-messages.user-messages {
    padding: 0 36px;
    order: 1
}

/* STICKY MODE */
#root .desktop .livesportsfilter, #root .desktop .events-sport-header {
    position: sticky;
    top: 0px;
    z-index: 25;
}

#root .desktop.view-page-live-upcoming .livesportsfilter {
    top: 30px;
}

#root .desktop.view-page-live-upcoming .events-sport-header {
    top: 40px;
}

#root .desktop.view-page-live .events-sport-header {
    top: 30px;
}

#root .desktop .events-sport-header {
    padding: 0 8px
}

.events-tournament-header {
    align-items: center;
    background-color: var(--c-primary);
    display: flex;
    flex-direction: row;
    height: 32px;
    padding: 0 8px;
}

#root .desktop .events-tournaments-wrapper > app-market-headings-container {
    position: sticky;
    top: 48px;
    z-index: 900;
}

#root .desktop .events-tournaments-wrapper .events-tournament-header {
    /* position: sticky; */
    /* top: 80px; */
    z-index: 900;
    order: 0;
}

#root .events-item-wrapper .match-info .match-teams {
    display: flex;
    justify-content: center;
    order: 2;
}

#root app-market-headings-container {
    order: 2
}

/*  */
#root .match-market div .market-special {
    height: 100%;
    margin-left: 2px;
    background-color: unset;
    border: var(--b-border);
    border-right: 0;
    border-color: var(--c-shade);
    border-radius: 2px 0 0 2px;
    color: var(--c-white);
    /* font-weight: normal; */
}

/*  */
.sports-group-by {
    background-color: var(--c-primary-b);
    border-bottom: var(--b-border);
    color: var(--c-white);
    border-radius: var(--r-top)
}

.sports-group-by li:hover {
    color: var(--c-white-e);
    background-color: var(--c-primary-c);
}

.sports-group-by li label {
    margin: 0 8px
}

html .checkbox-wrapper input.check-box {
    -webkit-appearance: none;
    margin: 4px 8px 4px 0;
    flex: 0 0 24px;
    height: 24px;
    background-color: var(--c-primary-b);
    border: var(--b-border);
    border-radius: 2px;
}

html .checkbox-wrapper input.check-box:checked {
    background: url(/v2.28/r/images/site/icons/Checkbox-On.svg) center center no-repeat;
    background-color: var(--c-primary-b);
    border-color: #f8ed6f;
}

/*  */
#root .match-market {
    margin-right: 0
}

#root select, #root body .ui-dropdown, #root .ui-calendar input {
    border-radius: 2px
}

/* CONTENT FILLS */
.beto-sports-coupon {
    background-color: var(--c-primary-d);
}

.desktop.view-page- .content, .desktop.view-page-sports .content {
    background-color: var(--c-background)
}

/*  */
#root .beto-sports-filter.livesportsfilter ul.sports-filter {
    border-radius: var(--r-top)
}

#root .beto-sports-filter.livesportsfilter {
    background-color: var(--c-background)
}

#root .view-page-live .beto-sports-filter.livesportsfilter {
    position: sticky;
    top: 30px;
}

/*  */
#root .nav-sport-name, .nav-sport-wrapper[_ngcontent-yrx-c24] .nav-sport-panel[_ngcontent-yrx-c24] .nav-category-wrapper[_ngcontent-yrx-c24] .nav-category[_ngcontent-yrx-c24] .nav-category-name[_ngcontent-yrx-c24] {
    width: auto !important;
}

#root div.nav-sport-counter.nav-counter:before, #root .navbar-section-counter::before {
    content: "+"!important;
}

#root .nav-sport-counter.nav-counter, #root .navbar-section-counter {
    padding-left: 8px;
    display: block;
    font-style: italic;
    line-height: 13px;
    font-size: 11px ;
    font-weight: 700 ;
    margin-right: auto;
}

#root .nav-sport .nav-sport-icon {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center center;
}

#root .nav-category-name {
    width: auto
}

#root .window-tabs.tracker-tabs {
    line-height: 2.5;
    height: 36px;
    color: var(--c-black)
}

#root .window-tabs.tracker-tabs .tracker-tab:hover {
    line-height: 2.5;
    height: 36px;
    color: var(--c-emphasis);
    text-decoration: underline
}

.desktop .sr-widget {
    overflow: hidden
}

.desktop .featured-matches {
    margin-bottom: 8px;
    border-radius: var(--r-b);
    /* overflow: hidden; */
}