/* Early Win Variables */

:root {
    --s-x: 8px;
    --c-white-e: #fff;
    --c-tint: #fff1;
    --c-tint-b: #fff2;
    --c-tint-c: #fff3;
    --c-red: red;
    --c-green: hsl(120deg 100% 25.1%);
    --c-green-b: hsl(120 100% 28% / 1);
    --c-early-win: hsl(248.21deg 79.83% 76.67%);
    --c-early-win-hover: hsl(248 80% 82% / 1);
    --bc-surface: var(--c-tint);
    --bc-surface-b: var(--c-tint-b);
    --bg-button-primary: var(--c-green);
    --bg-button-primary-hover: var(--c-green-b);
    --bg-button-primary-disabled: var(--c-tint);
    --bg-button-secondary: var(--c-tint-b);
    --bg-button-secondary-hover: var(--c-tint-c);
    --bg-button-secondary-disabled: var(--c-tint);
    --r-md: 4px;
    --r-lg: 8px;
    --f-f: 'Open Sans', 'Arial', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-f-icon: 'primeicons';
    --f-heading-lg: 600 20px/28px var(--f-f);
    --f-heading-md: 600 18px/24px var(--f-f);
    --f-heading-sm: 600 16px/24px var(--f-f);
    --f-body-lg: 600 14px/20px var(--f-f);
    --f-body-md: 500 14px/20px var(--f-f);
    --f-body: 400 14px/20px var(--f-f);
    --f-label: 700 14px/20px var(--f-f);
    --f-meta: 400 14px/16px var(--f-f);
    --f-meta-b: 400 14px/20px var(--f-f);
    --f-summary-label: 600 11px/24px var(--f-f);
    --f-summary-value: 400 12px/24px var(--f-f);
    --f-modal-main: var(--f-heading-sm);
    --f-history-match-teams: var(--f-body);
    --f-history-match-score: var(--f-meta);
    --f-selection-market-name: var(--f-body-md);
    --f-selection-name: var(--f-label);
    --f-selection-odds-original: var(--f-body);
    --f-selection-odds-new: var(--f-value-strong);
    --f-event-name: var(--f-body-lg);
    --f-info: var(--f-body);
    --f-value-strong: 700 14px/20px var(--f-f);
    --f-button-lg: 600 16px/20px var(--f-f);
    --f-button-md: 600 14px/20px var(--f-f);
    --f-action-sm: 600 12px/24px var(--f-f);
    --ls-heading-lg: -0.01em;
    --ls-heading-sm: -0.005em;
    --ls-default: 0;
    --c-text-primary: rgb(255 255 255 / 90%);
    --c-text-secondary: rgb(255 255 255 / 80%);
    --c-text-muted: rgb(255 255 255 / 60%);
    --c-text-disabled: rgb(255 255 255 / 40%);
    --c-text-accent: #4db8ff;
    --c-text-on-accent: #ffffff;
    --c-odds-old: #a7b0bf;
    --c-odds-new: #4db8ff;
    --c-status: rgb(255 255 255 / 80%);
    --c-link: #7ccaff;
}

/* Early Win Layout */

.ui-dialog.early-win-dialog {
    height: auto;
}

@media (max-width: 1050px) {
    .ui-dialog.early-win-dialog {
        max-width: 500px;
    }
}

.ui-resizable-handle {
    display: none;
}

@media (min-width: 640px) {
    .ui-dialog.early-win-dialog {
        min-width: 500px;
        width: 500px;
    }
}

.ui-dialog.early-win-dialog .ui-dialog-content {
    padding: 16px 16px 96px;
    flex-direction: column;
    display: flex;
}

.ui-dialog.early-win-dialog .ui-dialog-content app-bet-early-win {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
}

app-bet-early-win > div {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

app-bet-early-win .max-payout-change {
    display: inline-flex;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    flex-wrap: wrap;
    margin: 0 16px 8px;
    width: calc(100% - 32px);
}

app-bet-early-win .max-payout-change > span {
    display: inline-flex;
    justify-content: center;
}

app-bet-early-win .label-1 {
    flex: 1 1 100%;
}

.ui-dialog.early-win-dialog .ui-dialog-content app-bet-early-win .early-win-settlement-main-info {
    gap: 16px;
    padding: 16px;
}

.ui-dialog.early-win-dialog .ui-dialog-content app-bet-early-win app-bet-match {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 4px;
}

app-bet-early-win .selection-odds-change {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    padding: 16px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

app-bet-early-win .selection-odds-change .label {
    display: inline-flex;
    flex: 1 1 100%;
    justify-content: center;
}

app-bet-early-win .selection-odds-change .transition-icon {
    width: 24px;
    height: 24px;
}

app-bet-early-win .selection-odds-change .transition-icon:before {
    width: 24px;
    height: 24px;
    display: inline-block;
}

app-bet-early-win app-bet-match > div {
    display: inline-flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
}

.ui-dialog.early-win-dialog .ui-dialog-content .legend {
    width: 100%;
    height: auto;
    justify-content: center;
    padding: 0;
}

.early-win-settlement-actions {
    justify-content: space-between;
    position: absolute;
    bottom: 8px;
    width: 100%;
    left: 0;
    padding: 16px;
}

.early-win-settlement-actions .history-bet-action {
    display: inline-flex;
    min-width: 120px;
    justify-content: center;
    padding: 16px;
    gap: 4px;
}

.ui-dialog.early-win-dialog .history-selection-info {
    display: inline-flex;
    flex: 1 0 100%;
    justify-content: flex-start;
    column-gap: 8px;
    max-width: 100%;
}

.ui-dialog.early-win-dialog .history-match-info {
    display: inline-flex;
    flex-wrap: wrap;
}

.ui-dialog.early-win-dialog .history-match-info > div {
    display: inline-flex;
    flex: 1 1 100%;
}

.ui-dialog.early-win-dialog .history-match-info .match-date-code-wrapper {
    display: inline-flex;
    gap: 4px;
}

.ui-dialog.early-win-dialog .history-bet-selection {
    display: block;
    flex: 1 1 100%;
    min-width: 0%;
    overflow: hidden;
}

.ui-dialog.early-win-dialog .selection-and-odds .history-bet-odds {
    display: inline-flex;
    margin-left: unset;
}

.ui-dialog.early-win-dialog .selection-and-odds .history-bet-odds:not(.now) {
    order: 1;
}

.ui-dialog.early-win-dialog .selection-and-odds {
    align-items: center;
    position: unset;
    display: inline-flex;
    flex: 1 1 0%;
    min-width: auto;
    max-width: 100%;
    gap: 8px;
}

.ui-dialog.early-win-dialog .market-name {
    display: inline-flex;
    order: -1;
    flex: 0 0 auto;
    gap: 8px;
}

.early-win-dialog .market-name:after {
    min-width: 10px;
}

.ui-dialog.early-win-dialog .history-selection-info .selection-status {
    order: -1;
    display: none;
}

.history-bet-request-early-win-odds {
    order: 2;
    padding: 4px;
    margin: 4px 0;
    width: 100px;
    bottom: 8px;
    align-self: end;
}

.history-bet-match-details.settled-by-early-win .selection-and-odds .history-bet-odds.early-win:before {
    padding: 0px 2px 1px 2px;
    margin-right: 8px;
}

#root app-history .history-bet-wrapper .history-actions-wrapper button.history-bet-EarlyWin_Success {
    padding: 10px 20px 6px;
    display: flex;
}

#root app-history .history-bet-wrapper .history-actions-wrapper button.history-bet-EarlyWin_Success > div {
    flex-direction: column;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.early-win-dialog .selection-and-odds .history-bet-odds.now:after {
    margin-left: 6px;
    min-width: auto;
}

.early-win-dialog .selection-and-odds .history-bet-odds.now:before {
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* Early Win Styles */

app-bet-early-win .max-payout-change {
    font: var(--f-body);
    background-color: var(--bc-surface);
    border: 1px solid var(--c-text-muted);
    border-radius: var(--r-lg);
}

app-bet-early-win .current-payout {
    font: var(--f-selection-odds-original);
}

app-bet-early-win .new-payout {
    font: var(--f-selection-odds-new);
}

app-bet-early-win .max-payout-change > span {
    text-align: center;
}

app-bet-early-win .label-1 {
    font: var(--f-info);
}

.ui-dialog.early-win-dialog .ui-dialog-content app-bet-early-win .early-win-settlement-main-info {
    background-color: var(--bc-surface);
    border-radius: var(--r-lg);
}

app-bet-early-win .selection-odds-change {
    background-color: var(--bc-surface-b);
    border-radius: var(--r-md);
}

app-bet-early-win .selection-odds-change .label {
    text-align: center;
    font: var(--f-label);
}

app-bet-early-win .selection-odds-change span {
    font: var(--f-selection-odds-original);
}

app-bet-early-win .selection-odds-change .new-odds {
    font: var(--f-selection-odds-new);
    color: var(--c-text-on-accent);
}

app-bet-early-win .selection-odds-change .transition-icon {
    font-size: 20px;
    color: var(--c-early-win);
}

app-bet-early-win .selection-odds-change .transition-icon:before {
    content: "\e92e";
    font-family: 'primeicons';
    text-align: center;
    line-height: 24px;
}

.ui-dialog.early-win-dialog .ui-dialog-content .legend {
    text-align: center;
    font: var(--f-modal-main);
}

.early-win-settlement-actions .history-bet-action {
    font: var(--f-button-md);
    background: var(--c-early-win);
    color: var(--c-white-e);
    border-radius: var(--r-md);
}

.early-win-settlement-actions .history-bet-action:hover {
    background-color: var(--c-early-win-hover);
}

#root:has(#mainDiv.hover) .early-win-settlement-actions .history-bet-action {
    cursor: pointer;
}

.early-win-settlement-actions .history-bet-cancel-early-win-odds {
    background-color: var(--bg-button-secondary);
    background-image: unset;
}

.early-win-settlement-actions .history-bet-cancel-early-win-odds:hover {
    background-color: var(--bg-button-secondary-hover);
}

.ui-dialog.early-win-dialog .history-match-info .match-date-code-wrapper .betslip-match-code {
    font: var(--f-summary-value);
    font-weight: 600;
    opacity: 0.7;
}

.ui-dialog.early-win-dialog .history-match-info .match-date-code-wrapper .match-date {
    font: var(--f-summary-value);
}

.ui-dialog.early-win-dialog .history-bet-selection {
    font: var(--f-selection-name);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-dialog.early-win-dialog .selection-and-odds .history-bet-odds {
    font: var(--f-value-strong);
}

.ui-dialog.early-win-dialog .market-name {
    font: var(--f-selection-market-name);
}

.early-win-dialog .market-name:after {
    content: "\e932";
    font-family: 'primeicons';
    color: var(--c-text-muted);
    font-weight: 700;
    font-size: 18px;
}

.ui-dialog.early-win-dialog .history-bet-match-name {
    font: var(--f-event-name);
}

.history-bet-request-early-win-odds {
    background: var(--c-early-win);
    color: var(--c-white-e);
    border-radius: var(--r-md);
    font: var(--f-button-md);
}

.history-bet-match-details.settled-by-early-win .selection-and-odds .history-bet-odds.original {
    text-decoration: line-through;
    opacity: 0.7;
}

.history-bet-match-details.settled-by-early-win .selection-and-odds .history-bet-odds.early-win {
    color: var(--c-early-win);
}

.history-bet-match-details.settled-by-early-win .selection-and-odds .history-bet-odds.early-win:before {
    content: "EW";
    font: var(--f-summary-label);
    background-color: var(--c-early-win);
    color: var(--c-white-e);
    border-radius: var(--r-md);
}

#root app-history .history-bet-wrapper .history-actions-wrapper button.history-bet-EarlyWin_Success {
    background-color: var(--c-early-win);
    font:  var(--f-body-md);
}

#root app-history .history-bet-wrapper .history-actions-wrapper button.history-bet-EarlyWin_Success > div:after {
    content: "OK";
    font: var(--f-button-md);
    text-align: center;
}

.early-win-dialog .selection-and-odds .history-bet-odds.now {
    color: var(--c-text-muted);
}

.early-win-dialog .selection-and-odds .history-bet-odds.now:after {
    color: var(--c-text-muted);
    content: "@";
    font-weight: 400;
}

.early-win-dialog .selection-and-odds .history-bet-odds.now:before {
    font-family: 'primeicons';
    text-align: center;
    line-height: 20px;
}

.early-win-dialog .selection-and-odds .history-bet-odds.now.up {
    color: var(--c-red);
}

.early-win-dialog .selection-and-odds .history-bet-odds.now.down {
    color: var(--c-green);
}

.early-win-dialog .selection-and-odds .history-bet-odds.now.up:before {
    content: "\e92f";
}

.early-win-dialog .selection-and-odds .history-bet-odds.now.down:before {
    content: "\e92c";
}