.bet-cont {
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--wp--style--block-gap);
}

.bet-tl,
.bet-stl {
    font-weight: var(--wp--custom--font-weight--bold);
}

.bet-tl {
    font-size: var(--wp--preset--font-size--medium);
    margin: 0 0 var(--wp--style--block-gap);
}

[data-th]::before,
.bet-in,
.bet-table tr:not(.bet-table-description) td
.fractional span,
.bet-section__hd .wp-element-button {
    font-size: var(--wp--preset--font-size--small) !important;
}

.bet-stl {
    font-size: var(--wp--preset--font-size--x-small) !important;
}

.bet-frm-lbl,
.bet-input,
.bet-select {
    font-size: var(--wp--preset--font-size--x-small) !important;
}

.bet-section__ct {
    padding: var(--wp--preset--spacing--xx-small);
    background-color: var(--wp--preset--color--foreground-alt);
}

.bet-section__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--surface);
    padding: var(--wp--preset--spacing--xxx-small) var(--wp--preset--spacing--xx-small);
    border-radius: var(--wp--custom--border--radius);
    margin-block-end: var(--wp--preset--spacing--baseline);
}

.bet-blocks,
.bet-frm-row,
.bet-frm-lbl,
.bet-inf,
.bet-badg,
.fractional span {
    display: flex;
}

.bet-frm-row {
    position: relative;
    align-items: center;
    justify-content: space-between;
    flex-flow: row wrap;
    margin-bottom: var(--wp--preset--spacing--baseline);
}

.bet-frm-lbl,
.bet-input,
.bet-select {
    flex: 0 0 100%;
}

.bet-frm-lbl {
    font-weight: var(--wp--custom--font-weight--bold);
}

.bet-input,
.bet-select {
    font-family: inherit;
    background-repeat: no-repeat;
    background-color: var(--wp--preset--color--white) !important;
    border-color: var(--wp--preset--color--dark-05);
}

.bet-input:hover,
.bet-input:focus,
.bet-select:hover,
.bet-select:focus {
    background-repeat: no-repeat;
    border-color: var(--wp--preset--color--dark-05);
}

@media screen and (min-width:600px) {
    .bet-frm-lbl {
        flex: 0 1 25%;
        justify-content: flex-end;
        padding: 0 var(--wp--preset--spacing--xx-small);
    }

    .bet-input,
    .bet-select {
        flex: 1 1 75%;
    }
}

.bet-inf {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate3d( 0, -50%, 0 );
    width: 1rem;
    height: 1rem;
    border-radius: 1rem;
    text-align: center;
    font-style: normal;
    line-height: 1rem;
    border: 1px solid rgba( 0, 0, 0, .05 );
}

.bet-table {
    width: 100%;
    max-width: 100%;
    background-color: var(--wp--preset--color--foreground);
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    box-shadow: 0 0 0 1px var(--wp--preset--color--dark-10);
    border-radius: var(--wp--custom--border--radius);
}

.bet-table--bets th:first-child,
.bet-table--bets td:first-child {
    text-align: center;
}

.bet-table .bet-table-description {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--foreground-alt);
}

.bet-table-description .bet-input {
    border: 0 none;
    outline: 0;
}

.bet-table-description td,
.bet-table .bet-table-description td:last-of-type {
    padding: 0;
}

.bet-table .bet-table-description .bet-input {
    margin: 0 !important;
    background-color: transparent !important;
    width: 100%;
    border: 0 none !important;
    border-radius: 0;
}

.bet-dead-heat .bet-lbl,
.bet-dead-heat .bet-frm-lbl {
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--base);
    text-align: left;
}

.bet-dead-heat .bet-select {
    width: 100%;
    max-width: 100%;
}

.bet-table thead tr {
    color: var(--wp--preset--color--base);
    background: var(--wp--preset--color--foreround);
}

.bet-table th {
    font-size: var(--wp--preset--font-size--x-small);
    border-right: 1px solid var(--wp--preset--color--light-10);
}

.bet-table th,
.bet-table td {
    border: 0 none;
    vertical-align: middle;
    text-align:  left;
}

.fractional {
    display: flex;
}

@media screen and (max-width:720px) {

    .bet-table--bets thead {
        display: none;
    }

    .bet-table--bets tr {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }

    .bet-table-dead-heats td {
        width: 100%;
    }

    [data-th] {
        text-align: left;
    }

    [data-th]::before {
        content: attr(data-th);
        display: block;
        text-align: left;
        color: var(--wp--preset--color--primary);
        font-weight: var(--wp--custom--font-weight--bold);
    }

    .bet-table--bets th:first-child { flex: 0 0 20% }
    [data-th="Outcome"] { flex: 0 0 80% }
    [data-th="Odds"] { flex: 0 0 100% }
    [data-th="Place Odds"], [data-th="Rule 4"] { flex: 0 0 50% }
}

.bet-table--bets th:first-child {
    width: 1.5rem;
}

.bet-table tr:not(.bet-table-description) td {
    padding: .375em .5em;
}

.bet-badge {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--surface);
    border-radius: 10em;
    padding: .5em .75em;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: var(--wp--custom--font-weight--bold);
}

.bet-table tr {
    vertical-align: top;
    box-shadow: 0 1px var(--wp--preset--color--dark-10);
}

.fractional span {
    height: 36px;
    line-height: 36px;
    padding: 0 .25rem;
   font-weight: var(--wp--custom--font-weight--bold);
}

.bet-property--min {
    max-width: 36px !important;
    text-align: center;
}

.bet-blocks {
    flex-flow: row wrap;
    align-content: stretch;
    gap: var(--wp--preset--spacing--baseline);
    margin: var(--wp--style--block-gap) 0;
}

.bet-blocks__li {
    flex-basis: 100%;
}

@media screen and (min-width: 720px) {
    .bet-blocks__li {
        flex-basis: calc( 33.333% - var(--wp--preset--spacing--x-small) );
    }
}

.bet-crd {
    padding: var(--wp--preset--spacing--small);
    border-radius: 0.375em;
    color: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--dark-10);
    height: 100%;
    text-align: center;
}

.hidden {
    display: none;
}
