/* 3/2 DiS */
html,body {
    position: relative;
    max-width: 100% !important;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

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

#root p-button > button {
    width: unset;
    height: unset;
    border: unset
}

#root .ui-button,#root p-button > button, button {
    min-width: 24px;
    min-height: 24px;
    border-radius: var(--r);
    border: solid 1px var(--c-tint);
    background-color: inherit;
    color: inherit;
}

#root p-button > button:disabled, button:disabled {
    opacity: 0.30
}

@media not all and (hover: none) {
    button:hover {
        border: solid 1px var(--c-tint-b);
        background-color: var(--c-shade);
        /* box-shadow: var(--ds-button); */
        color: var(--c-white-e);
    }
}

/* LABEL */
#root label {
    margin: unset;
    /* padding: unset; */
}

/* SELECT */
#root select, #root .ui-dropdown {
    width: 100%;
    min-height: 28px;
    color: var(--c-white);
    background-color: var(--c-tint);
    border-radius: var(--r);
    border-color: var(--c-tint);
    transition: .25s;
    text-indent: 2px
}

#root select option {
    color: var(--c-black);
}

#root .ui-dropdown {
    border: var(--b-border);
    border-color: var(--c-tint);
}

#root .desktop select:hover {
    border-color: var(--c-tint-b);
    transition: .125s
}

#root .desktop .ui-dropdown:hover {
    border-color: var(--c-tint-b);
}

#root p-dropdown .ui-inputtext {
    border: none
}

/*  */
:focus {
    outline: none;
}

#root a, #root .link {
    color: var(--c-white)
}

#root .desktop a :hover, #root .desktop .link:hover {
    color: var(--c-white-e);
    cursor:poi
}

#root .ui-inputtext, #root input {
    color: var(--c-white);
    background-color: var(--c-primary-d);
    border-radius: var(--r);
    border: 1px solid var(--c-shade-b);
    box-sizing: border-box;
    min-height: 28px;
    /*     color: unset; */
    transition: .25s;
    text-indent: 6px;
   
    /*width: 188px;*/
}

#root .betslip input {
    background-color: unset;
    min-height: unset;
    padding: unset;
    /* border: unset; */
    display: inline-block;
}

#root .desktop input:hover {
    border-color: var(--c-tint-b);
    transition: .125s;
}

#root .desktop input[type=checkbox]:hover {
    border-color: var(--c-yellow);
    transition: .125s;
    cursor:pointer
}

#root input:focus,#root input:focus:hover {
    border-color: var(--c-emphasis);
}

/* Headers */
#root app-widget-host h2, #root app-widget-host p {
    padding: 0 16px;
}

/* Padding */
#root .padding {
    padding: 24px
}

/*********** LAYOUT: STAKE WRAPPER AND INPUT ***********/
#root app-amount-input .stake {
    padding: 0 2px;
    margin: 4px;
    min-width: 80px;
    max-width: 80px;
    height: 32px;
    position: relative;
    font-size: 12px;
}

#root app-amount-input .stake {
    border: 1px solid var(--c-shade-b);
    opacity: 0.8;
    border-radius: var(--r);
    background-color: var(--c-shade);
}

/* HOVERS ON STAKE */
#root .desktop app-amount-input .stake:hover {
}

#root .desktop .betslip-events-wrapper app-amount-input .stake:hover {
    color: var(--c-black);
    border: 1px solid var(--c-black);
    background-color: var(--c-white-e);
}

#root .desktop .groups-container app-amount-input .stake, #root .desktop .groups-container app-amount-input .stake:hover, #root .systems-rows-container app-amount-input .stake:hover, #root .systems-container app-amount-input .stake:hover, #root .multiple-container app-amount-input .stake:hover {
   background-color: var(--c-white-e);
    border: 1px solid var(--c-black);
}

#root .desktop .groups-container app-amount-input .stake.input-active:hover, #root .systems-rows-container app-amount-input .stake.input-active:hover, #root .systems-container app-amount-input .stake.input-active:hover, #root .multiple-container app-amount-input .stake.input-active:hover {
    background-color: var(--c-white-e)
}
#root .betslip-wrapper .betslip-bets-container app-amount-input .stake{
    background-color: var(--c-white-e)
}
#root .betslip-wrapper .betslip-bets-container app-amount-input .stake span > span{
    color: var(--c-black)
}
#root .betslip-wrapper .betslip-bets-container app-amount-input .stake span > input{
    color: var(--c-black-e)
}

/* BETSLIP STAKE INPUT STATES */
#root .betslip .stake.zero-value .numeric-input-wrapper {
    /* opacity: .4; */
    height: unset;
    position: unset;
    height: 100%;
    position: unset;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#root .numeric-input-wrapper {
    background-color: transparent;
    border: none;
    margin-right: unset;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#root .numeric-input-wrapper input {
    min-height: unset;
    width: 100%;
    height: 100%;
    text-align: right;
    font-weight: 600;
    font-size: 14px;
    border: 0;
    line-height: 16px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 12px 6px 2px 6px;
}

/********* STAKE LABEL & CURRENCY SYMBOL ***********/
/* Light */
#root .betslip-events-wrapper app-amount-input .numeric-input-wrapper span {
    color: var(--c-black);
}

/* Dark */
#root .groups-container app-amount-input .stake span, #root .systems-rows-container app-amount-input .stake span, #root .systems-container app-amount-input .stake span, #root .multiple-container app-amount-input .stake span {
    color: var(--c-black);
}

/* CURRENCY SYMBOL */
#root app-amount-input .stake .currency-symbol {
    position: absolute;
    left: 4px;
    top: 8px;
    font-weight: 400;
}

/******************** INPUT SPAN ***********************/
/* State: Zero Value */
/* Light */
#root .betslip-events-wrapper app-amount-input .stake.zero-value input {
    color: var(--c-black);
    opacity: 0.5;
}

/* Dark */
#root .systems-rows-container app-amount-input .stake.zero-value input, #root .systems-container app-amount-input .stake.zero-value input, #root .groups-container app-amount-input .stake.zero-value input, #root .multiple-container app-amount-input .stake.zero-value input {
    color: grey;
    opacity: 1;
}

/* State: Has Value */
/* Light */
#root .betslip-events-wrapper app-amount-input .stake.has-value input {
    color: var(--c-black-e);
}

/* Dark */
#root .systems-rows-container app-amount-input .stake.has-value input, #root .systems-container app-amount-input .stake.has-value input, #root .groups-container app-amount-input .stake.has-value input, #root .multiple-container app-amount-input .stake.has-value input {
        color: var(--c-black-e);
}

/* State: Input-Active */
#root app-amount-input .stake.input-active {
    background-color: var(--c-white-e);
}

#root app-amount-input .stake.input-active input, #root app-amount-input .stake.input-active span {
    color: var(--c-black);
}

#root app-amount-input .stake.has-value.input-active input {
    color: var(--c-black-e);
}

/* BET SELECTION BUTTON */
#root .odds-selection-default {
    /* min-width: 40px; */
}

/* BET OUTRIGHT BUTTON */
#root .odds-selection-default, #root .outright-competitor {
    background-color: var(--c-shade);
    border: solid 1px var(--c-shade);
    border-radius: var(--r);
}

#root .match-odd {
    height: 100%;
    min-width: 52px;
}

#root .odds-selection-default .odd span {
    margin: auto;
    font-weight: 600;
}

#root .desktop .odds-selection-default:hover,#root .outright-competitor:hover {
    border: solid 1px var(--c-emphasis-b);
    transition: .125s;
    background-color: var(--c-shade-b);
}

#root .desktop .match-odd.odd-locked .odds-selection-default:hover {
    border: 1px solid var(--c-shade);
    background-color: var(--c-shade);
    cursor: not-allowed
}

#root .odds-bet-slip-selected, #root .outright-competitor.bet-slip-selected, #root .desktop .odds-bet-slip-selected:hover, #root .desktop .outright-competitor.bet-slip-selected:hover {
    /*  Button selected */
    color: var(--c-white-e);
    font-weight: bold;
    border-color: var(--c-tint-b);
    background-color: var(--c-emphasis);
}

/*  */
#root .desktop .ui-dialog {
    width: 20%!important;
    left: calc(50% - 10%)  !important;
}

#root .ui-dialog .ui-dialog-titlebar-icon span {
    color: var(--c-black)
}

/*  */
/* CHECKBOX */
#root .check-box:focus {
    border-color: var(--c-shade)
}

#root .betslip input.check-box {
    -webkit-appearance: none;
    margin: 4px 8px 4px 0;
    min-width: 24px;
    min-height: 24px;
    background-color: var(--c-shade) !important;
    border: 1px solid var(--c-shade-b);
}

#root .desktop .nav-sports .nav-tournament:hover .nav-tournament-selector, #root .desktop .nav-sports .nav-favorite:hover .nav-favorite-selector , #root .desktop .nav-sports .nav-category:hover .nav-category-selector, #root .desktop .nav-sports .nav-sport.partially-checked:hover .nav-sport-selector, #root .desktop .nav-sports .nav-sport.checked:hover .nav-sport-selector, #root .desktop .nav-sports .nav-sport:hover .nav-sport-selector {
    border: solid 1px var(--c-shade-b);
    background-color: var(--c-shade);
    border-radius: var(--r);
}

#root .desktop .nav-sports .nav-tournament:hover .nav-tournament-selector:hover, #root .desktop .nav-sports .nav-favorite:hover .nav-favorite-selector:hover, #root .desktop .nav-sports .nav-category:hover .nav-category-selector:hover, #root .desktop .nav-sports .partially-checked .nav-sport-selector:hover, #root .desktop .nav-sports .nav-sport:hover .nav-sport-selector:hover, #root .desktop .nav-sports .nav-favorites:hover .nav-favorites-selector:hover {
    border: solid 1px var(--c-shade-b);
    border-radius: 2px;
    background-size: 24px 24px;
    border: solid 1px var(--c-yellow);
}

#root .checkbox-wrapper input.check-box:checked, #root .nav-category.checked .nav-category-selector.checked, #root .nav-sport-selector.checked .nav-category-selector, #root .nav-sports .nav-tournament .nav-tournament-selector.checked {
    background-image: url(/v2.28/r/images/site/icons/Checkbox-On.svg) !important;
    background-position: center center !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-color: var(--c-shade)!important;
}

#root .mobile .nav-sports .nav-tournament .nav-tournament-selector, #root .mobile .nav-sports .nav-favorite .nav-favorite-selector , #root .mobile .nav-sports .nav-category .nav-category-selector, #root .mobile .nav-sports .nav-sport.partially-checked .nav-sport-selector, #root .mobile .nav-sports .nav-sport.checked .nav-sport-selector, #root .mobile .nav-sports .nav-sport .nav-sport-selector {
    border: solid 1px var(--c-shade);
    background-color: var(--c-shade);
    border-radius: var(--r);
}

/* FORMS */
#root .generic-form .form-row {
    flex-wrap: wrap
}

#root .mobile .generic-form .form-row {
    flex-direction: column;
}

#root .form-element-error {
    padding-left: 6px;
    line-height: 18px;
    font-size: 12px;
    color: var(--c-red)
}

#root form .form-row > label {
    line-height: 2.2;
    text-indent: 9px;
    margin-right: auto
}

#root .desktop form .form-row > label {
    width: 30%;
    min-width: 200px;
}

#root .desktop form .form-row > div {
    min-width: 200px;
}

#root .desktop .header form .form-row > label, #root .desktop .header form .form-row > div {
    min-width: unset ;
}