/*#region betslip footer*/
.universal .betslip-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: auto;
    width: 296px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation-timing-function: ease-in-out;
    animation-duration: 300ms;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 9;
}

.universal .bg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    height: 56px;
    box-sizing: border-box;
    cursor: pointer;
}

    .universal .bg.expanded {
        height: 44px;
    }

.universal ._expand_betslip {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .universal ._expand_betslip .line {
        width: 1px;
        height: 24px;
        background: #595959;
    }

#betslipFooter ._total_odds {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

    #betslipFooter ._total_odds ._title {
        font-size: 12px;
        font-weight: 400;
        height: 14px;
        line-height: 14px;
        color: #848484;
    }

    #betslipFooter ._total_odds ._odds {
        font-size: 16px;
        font-weight: 500;
        height: 19px;
        line-height: 120%;
        color: #FFFFFF;
    }

.universal ._counting {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .universal ._counting .count {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        border-radius: 100px;
        color: #000000;
        background: #FFD200;
    }

    .universal ._counting .text {
        font-size: 16px;
        font-weight: 500;
        height: 19px;
        line-height: 19px;
        color: #FFFFFF;
    }

#betslipFooter ._collapsible {
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 300ms ease-in-out;
}

    #betslipFooter ._collapsible._rotate {
        transform: rotate(-180deg);
    }
/*#endregion*/

/*#region bet-dialog*/
.bet-dialog {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    box-sizing: border-box;
    z-index: 12;
}
/*#endregion*/

/*#region matches*/
.betSlip .matches {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    overflow: auto;
}

.mobile .betSlip .matches {
    max-height: calc(var(--rvh) - 292px);
}

    .mobile .betSlip .matches.sys {
        max-height: calc(var(--rvh) - 348px);
    }

    .mobile .betSlip .matches.small {
        max-height: calc(var(--rvh) - 400px);
    }

    .mobile .betSlip .matches.sys.small {
        max-height: calc(var(--rvh) - 456px);
    }

.betSlip.min102 {
    min-height: 102px;
}
/*#endregion*/

/*#region betTabs*/
.betSlip .betTabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 12px;
    padding-left: 12px;
    background: #FFFFFF;
}

    .betSlip .betTabs > div {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 36px;
        overflow: hidden;
        cursor: pointer;
    }

        .betSlip .betTabs > div:after {
            content: "";
            position: absolute;
            display: block;
            height: 2px;
            bottom: 0;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
        }

        .betSlip .betTabs > div.active:after {
            left: calc(50% - 16px);
            width: 32px;
        }

        .betSlip .betTabs > div span {
            display: inline-block;
            height: 16px;
            line-height: 16px;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            color: #848484;
        }

        .betSlip .betTabs > div.active span {
            color: #000000;
        }

        .betSlip .betTabs > div.disabled {
            opacity: .5;
            cursor: not-allowed;
        }
/*#endregion*/

/*#region match*/
.betSlip ._home_away {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    height: 32px;
}

.betSlip .match .teams {
    height: 14px;
    line-height: 14px;
    font-size: 12.5px;
    font-weight: 400;
    color: #4d4d4d;
}

.betSlip .match .close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.betSlip .dashed-line {
    border-bottom: 1px dashed #E3E3E3;
}

.betSlip .match .dashed-line {
    margin: 0 12px;
}

.betSlip .match .oddGame {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    font-size: 12.5px;
    font-weight: 400;
}

.betSlip .match .live {
    display: flex;
    align-items: center;
    gap: 8px;
}

.betSlip .match .liveIcon {
    display: inline-block;
    height: 13px;
    line-height: 13px;
    font-style: Italic;
    font-size: 11px;
    font-weight: 700;
    color: #D94245;
}

.betSlip .match .max-bet-odd {
    height: 13px;
    line-height: 13px;
    font-size: 11px;
    opacity: .5;
}

.betSlip .match .result {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    font-weight: 400;
    color: #000000;
}

.betSlip .match ._game_info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
}

.betSlip .match ._outcome_price {
    display: flex;
    justify-content: space-between;
}

    .betSlip .match ._outcome_price .pick,
    .betSlip .match ._outcome_price .oddVal {
        height: 17px;
        line-height: 17px;
        font-size: 14px;
        font-weight: 600;
        color: #000000;
    }

.betSlip .match .maxBet_bankers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.betSlip .bankers,
.betSlip .sbankers {
    width: 14px;
    height: 14px;
    line-height: 15px;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    border-radius: 4px;
}
/*#endregion*/

/*#region summary*/
.betSlip .summary {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    padding: 8px 12px;
}

.betSlip ._subSummary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.betSlip .summary ._summary_values {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.betSlip .row_summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .betSlip .row_summary ._title {
        height: 16px;
        line-height: 16px;
        font-size: 13px;
        font-weight: 400;
        color: #848484;
    }

    .betSlip .row_summary ._calucalated {
        height: 16px;
        line-height: 16px;
        font-size: 13px;
        font-weight: 600;
        color: #000000;
    }
/*#endregion*/

/*#region stake*/
.betSlip .summary .topRow {
    display: flex;
    gap: 8px;
}

.betSlip .summary .__container {
    flex: 1;
    align-items: center;
    padding: 0 12px;
    height: 38px;
    border-radius: 10px;
    box-sizing: border-box;
}

    .betSlip .summary .__container .__input {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

        .betSlip .summary .__container .__input label {
            flex-shrink: 0;
            font-size: 16px;
            font-weight: 500;
            height: 19px;
            line-height: 19px;
            color: #848484;
        }

        .betSlip .summary .__container .__input input {
            display: block;
            flex: 1;
            -webkit-appearance: none;
            border: none;
            box-shadow: none;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: Roboto;
            font-size: 18px;
            font-weight: 700;
            text-align: end;
            box-sizing: border-box;
        }
/*#endregion*/

/*#region system cbx*/
.betSlip .cbxSystem {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    color: inherit;
    display: block;
    font-size: 16px;
    font-weight: 500;
    height: 24px;
    line-height: 24px;
    outline: none;
    padding: 0 12px 0 28px;
    border-radius: 4px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid #bebebe;
    background: #FFFFFF;
    background-image: url(/Images/chevron-down.svg?v=1.0.0.1);
    background-repeat: no-repeat;
    background-size: 28px 16px;
    background-position: left;
    box-sizing: border-box;
}
/*#endregion*/

/*#region accept any odds*/
.betSlip .cbx {
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

    .betSlip .cbx span:first-child {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        color: #848484;
        border: 1.5px solid #BEBEBE;
        box-sizing: border-box;
        transition: all .4s ease;
    }

.inp-cbx:checked + .cbx span:first-child {
    color: #fff;
    background: #27af4c;
    border-color: #27af4c;
}

    .inp-cbx:checked + .cbx span:first-child svg {
        stroke-dashoffset: 0;
    }

.betSlip .cbx span:first-child svg {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transform: translateZ(0);
    transition: all .3s ease;
    transition-delay: .1s;
}

.betSlip .cbx span:last-child {
    height: 16px;
    line-height: 16px;
    font-size: 13px;
    font-weight: 400;
    color: #848484;
}
/*#endregion*/

/*#region numpad*/
.betSlip .numpad {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.betSlip .top_pad,
.betSlip .bottom_pad {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.betSlip .numpad .pad_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    height: 48px;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    user-select: none;
    cursor: pointer;
}

.rtl-dir .betSlip .numpad .pad_btn.backspace svg {
    transform: rotate(180deg);
}

.betSlip .hide_keyboard {
    grid-column: span 2;
    gap: 8px;
    color: #848484 !important;
}

.numpad-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
}

    .numpad-container.show {
        margin-bottom: 8px;
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
    }
/*#endregion*/

/*#region buttons actions*/
.betSlip .summary button.action {
    padding: 0 12px;
    height: 38px;
    line-height: 120%;
    border: 0;
    background: #27AF4C;
    border-radius: 10px;
    font-family: Roboto;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 2;
}
/*#endregion*/

/*#region status card */
.betSlip .status-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 32px;
    background: #FFFFFF;
}

.betSlip .close_card {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
}

/*card*/
.betSlip ._card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .betSlip ._card .status-card__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

        .betSlip ._card .status-card__body ._status {
            width: 100%;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            color: #000000;
        }

        .betSlip ._card .status-card__body ._ref {
            width: 100%;
            height: 17px;
            line-height: 17px;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #848484;
        }

/*shares*/
.betSlip .status-card .shares {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .betSlip .status-card .shares ._button_share {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 16px;
        height: 36px;
        border-radius: 100px;
        background: #EEEEEE;
    }

        .betSlip .status-card .shares ._button_share span {
            height: 17px;
            line-height: 17px;
            font-size: 14px;
            font-weight: 500;
        }

.betSlip .status__buttons {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 12px;
}

    .betSlip .status__buttons .action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0;
        height: 48px;
        border: 0;
        border-radius: 10px;
        line-height: 120%;
        font-family: Roboto;
        font-weight: 500;
        font-size: 16px;
        z-index: 2;
        cursor: pointer;
    }

        .betSlip .status__buttons .action.done {
            color: #FFFFFF;
            background: #27AF4C;
        }

        .betSlip .status__buttons .action.reuse {
            color: #000000;
            background: #EEEEEE;
        }
/*#endregion*/

/*#region message block*/
.betSlip .message_block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .betSlip .message_block .buttons {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

        .betSlip .message_block .buttons button {
            padding-top: 0;
            padding-bottom: 0;
            height: 38px;
            font-family: 'Roboto';
            font-size: 16px;
            font-weight: 500;
            border: 0;
            border-radius: 10px;
            cursor: pointer;
        }

            .betSlip .message_block .buttons button.reset {
                grid-column: span 2;
            }

            .betSlip .message_block .buttons button.placeBet {
                grid-column: span 3;
            }

.betSlip .message_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 96px;
    border-radius: 10px;
}

    .betSlip .message_state span {
        width: 100%;
        height: 19px;
        line-height: 19px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }

    .betSlip .message_state._stateWait {
        gap: 24px;
        height: 168px;
    }
/*#endregion*/

/*#region changed price animation*/
.betSlip .changed {
    -webkit-animation: oddChange .5s 10 alternate;
    -moz-animation: oddChange .5s 10 alternate;
    -o-animation: oddChange .5s 10 alternate;
    animation: oddChange .5s 10 alternate;
}

@-webkit-keyframes oddChange {
    from {
        background-color: #FFC2B2;
    }

    to {
        background-color: #FFE0D1;
    }
}

@-ms-keyframes oddChange {
    from {
        background-color: #FFC2B2;
    }

    to {
        background-color: #FFE0D1;
    }
}

@keyframes oddChange {
    from {
        background-color: #FFC2B2;
    }

    to {
        background-color: #FFE0D1;
    }
}
/*#endregion*/

/*#region cashout*/
.cashoutDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

    .cashoutDialog .container {
        position: absolute;
        top: 12px;
        right: 12px;
        left: 12px;
        border-radius: 8px;
        z-index: 20;
    }

    .cashoutDialog .cashoutHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        height: 48px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        box-sizing: border-box;
    }

        .cashoutDialog .cashoutHeader span {
            width: 100%;
            height: 19px;
            line-height: 19px;
            font-size: 16px;
            font-weight: 500;
        }

        .cashoutDialog .cashoutHeader ._close {
            flex-shrink: 0;
            cursor: pointer;
        }

    .cashoutDialog .bet {
        display: block;
        float: unset !important;
        max-height: calc(100vh - 307px);
        overflow-x: auto;
        -moz-box-sizing: unset !important;
        -webkit-box-sizing: unset !important;
        box-sizing: unset !important;
    }

    .cashoutDialog .mb-amount-cashdout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 12px;
        border-radius: 8px;
    }

    .cashoutDialog .cashoutWrapper .cashoutMessage {
        height: 22px;
        line-height: 22px;
        font-size: 18px;
        font-weight: 500;
    }

    .cashoutDialog .container .cashoutWrapper .cashoutAmount {
        height: 24px;
        line-height: 24px;
        font-size: 20px;
        font-weight: 700;
    }

    .cashoutDialog .container .cashoutWrapper .cashoutCurrency {
        height: 24px;
        line-height: 24px;
        font-size: 20px;
        font-weight: 500;
    }

    .cashoutDialog button,
    .popup-container button {
        height: 42px;
        padding: 12px;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }

        .cashoutDialog button span,
        .popup-container button span {
            font-size: 16px;
            font-weight: 500;
        }

    .cashoutDialog .mb-amount-cashdout span.loading {
        width: 17px;
    }

        .cashoutDialog .mb-amount-cashdout span.loading:after {
            content: ' .';
            animation: dots 1s steps(5, end) infinite;
        }

    .cashoutDialog .cashoutWrapper,
    .cashoutDialog .mb-summary {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

@keyframes dots {
    0%, 20% {
        color: rgba(0,0,0,0);
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }

    40% {
        color: white;
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }

    60% {
        text-shadow: .25em 0 0 #27AF4C, .5em 0 0 rgba(0,0,0,0);
    }

    80%, 100% {
        text-shadow: .25em 0 0 #27AF4C, .5em 0 0 #27AF4C;
    }
}
/*#endregion*/

/*#region cashout popup */
.cashout-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

    .cashout-popup .popup-container {
        position: absolute;
        left: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 24px 12px 12px 12px;
        border-radius: 8px;
    }

    .cashout-popup ._title {
        line-height: 120%;
        font-size: 16px;
        font-weight: 500;
    }

    .cashout-popup ._sub-title {
        padding: 0 0 12px 0;
        line-height: 120%;
        font-size: 18px;
        font-weight: 500;
    }
/*#endregion*/