/*  25/02/21 DS  */
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 {
    height: unset;
}
html #root {
    background-image:var(--c-primary);
    background-image: var(--c-bg-gradient);
    background-size:100% 100%;
    color: var(--c-white-e);
    background-repeat:no-repeat;
}

html body#root {
    /* background-color: var(--c-primary-c)!important; */
    background-color: #DAE5F1 !important;
}
#root app-root.app-body {
    background-color: var(--c-primary-c) !important
}

body,
body .ui-widget {
    font-family: Roboto;
}
#mainDiv {
    /* background: var(--c-bg-gradient); */
    /* background-size:100%; */
    /* background-repeat:no-repeat; */
}
#root p-button > button {
    width: unset;
    height: unset;
    border: unset
}

#root p-button > button, button {
    min-width: 24px;
    min-height: 24px;
    border-radius: var(--r);
    border: solid 1px var(--c-shade);
    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-shade-b);
        background-color: var(--c-shade);
        /* box-shadow: var(--ds-button); */
        color: var(--c-white-e);
    }
}

#root ::placeholder {
    color: var(--c-white-e)
}


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

/* SELECT */
#root select {
    width: 100%;
    min-height: 28px;
    border-radius: var(--r);
    border-color: var(--c-shade);
    transition: .25s;
    text-indent: 2px;
    /*      */
    outline: 0px;
}

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

@media not all and (hover: none) {
    #root select:hover {
        border-color: var(--c-shade-b);
    }

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

/*  */
#root :focus {
    outline: none;
    border-color: var(--c-emphasis)
}

#root a, #root .link {
    color: inherit
}

#root .desktop.device-desktop a :hover ,#root .desktop.device-desktop .link :hover {
    cursor: pointer
}

#root input {
    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;
}

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

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

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

#root input[type=checkbox]:focus {
    border-color: var(--c-emphasis);
}

#root input[type=checkbox]:checked {
    border-color: var(--c-yellow);
    transition: .125s;
    cursor: pointer;
    /*      */
    background-image: url(/v1.02/r/images/site/icons/Checkbox-On.svg);
    background-position: center center;
    background-size: 100% ;
    background-repeat: no-repeat ;
    background-color: var(--c-shade);
}

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

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

/* MODAL / Overlay Color */
body .ui-widget-overlay {
    background-color: rgba(27, 35, 47, 0.5);
/*  background-color:  var(--c-background);*/ /*DS*/
/*  opacity: 0.7;*/ /*DS*/
    mix-blend-mode: multiply;
}

/* MODAL / Resizable */
.ui-dialog .ui-resizable-se {
    display: none
}

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

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

/* HOVERS ON STAKE */
@media not all and (hover: none) {
    #root app-amount-input .stake:hover {
    }

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

    #root .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-primary-d);
        border: 2px solid var(--c-black)!important;
    }

    #root .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)
    }
}

/* 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: unset;
    top: 0;
    left: 0;
}

#root .numeric-input-wrapper {
    background-color: transparent;
    border: none;
    margin-right: unset;
    width: 100%;
    height: 100%;
    position: unset;
    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-white);
}

/* CURRENCY SYMBOL */
#root app-amount-input .stake .currency-symbol {
    position: absolute;
    left: 4px;
    top: 13px;
    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: var(--c-black);
    opacity: 1;
}

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

/* 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-white);
    /* letter-spacing: 0.8px; */
}

/* 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);
}

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

/* BET OUTRIGHT BUTTON */
#root .odds-selection-default, #root .outright-competitor {
   border: none;
   background-color: unset;
   border-radius: 10px;
   font-size: 13px;
   /* font-weight: bold; */
}
#root .view-page-sports-live .odds-selection-default, #root .view-page-sports-live .outright-competitor  {
    font-weight: normal; 
}
#root .match-odd {
    height: 100%;
    min-width: 45px;
}

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

#root .desktop .match-odd:not(.odds-not-offered):not(.odd-locked):not(.match-suspended) .odds-selection-default:hover,#root .desktop .outright-competitor:hover {
    border: solid 2px var(--c-green)!important;
    transition: .125s;
    cursor: pointer;
}

#root .odds-bet-slip-selected, #root .outright-competitor.bet-slip-selected {
    /*  Button selected */
    color: var(--c-white-e);
    /* font-weight: bold; */
    background-color:transparent;
    border-color: var(--c-green);
    border-style: solid;
    border-width: 2px;
    color: var(--c-green);
}
#root .odds-bet-slip-selected * {
    font-weight:bold;
}
/* MODAL  */
#root .desktop .ui-dialog {
/*    left: calc(50% - 230px)!important;*/
    max-width: 460px!important;
    overflow: hidden;
    border-radius: 4px
}

#root .desktop .ui-dialog .ui-dialog-content {
    overflow-y: scroll;
    height: 100%;
    max-height: 600px !important;
}

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

#root .desktop app-modal .desktop-register-popup  .ui-dialog-content.ui-widget-content {
    border: none;
    border-radius: 0;
    padding: 12px 12px 0;
}

#root .desktop .ui-dialog .ui-dialog-content::-webkit-scrollbar-track {
    background-color: var(--c-shade);
}

#root .desktop .ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb:vertical {
    background-color: var(--c-shade-b);
    border: 0px;
    border-radius: 0
}

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

#root input.check-box, #root input[type="checkbox"] {
    -webkit-appearance: none;
    /*     margin: 4px 8px 4px 0; */
    min-width: 24px;
    min-height: 24px;
    background-color: var(--c-shade-b) !important;
    border: 1px solid var(--c-shade-b);
}

#root .desktop.device-desktop .nav-sports .nav-tournament:hover .nav-tournament-selector, #root .desktop.device-desktop .nav-sports .nav-favorite:hover .nav-favorite-selector , #root .desktop.device-desktop .nav-sports .nav-category:hover .nav-category-selector, #root .desktop.device-desktop .nav-sports .nav-sport.partially-checked:hover .nav-sport-selector, #root .desktop.device-desktop .nav-sports .nav-sport.checked:hover .nav-sport-selector, #root .desktop.device-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);
    opacity: 1
}

#root .desktop.device-desktop .nav-sports .nav-tournament:hover .nav-tournament-selector:hover, #root .desktop.device-desktop .nav-sports .nav-favorite:hover .nav-favorite-selector:hover, #root .desktop.device-desktop .nav-sports .nav-category:hover .nav-category-selector:hover, #root .desktop.device-desktop .nav-sports .partially-checked .nav-sport-selector:hover, #root .desktop.device-desktop .nav-sports .nav-sport:hover .nav-sport-selector:hover, #root .desktop.device-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(/v1.02/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-b);
}

#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 .generic-form .reset-next-buttons-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#root .generic-form .reset-next-buttons-wrapper ui-button {
    display: inline-flex;
}

#root .generic-form .reset-next-buttons-wrapper ui-button[type="submit"]{
    width: 100%;
    flex: 1 0 100%;
}

#root .generic-form .reset-next-buttons-wrapper ui-button .button-submit-register {
    width: 100%;
    line-height: 24px;
}

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

#root .form-element-error {
    padding-left: 6px;
    line-height: 18px;
    font-size: 12px;
    font-style: italic;
    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 .form-element-wrapper {
    min-width: 300px;
}

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