._loading-header_13vnw_1 {
    font-family: Big Shoulders Text, sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .6px;
    color: #1d0a30
}

._logo-gradient_13vnw_9 {
    background-size: 200% 200%;
    background-image: repeating-linear-gradient(-90deg, #f7f7f700, #f7f7f733, #f7f7f766, #f7f7f799, #f7f7f7cc, #f7f7f7);
    animation: _loader_13vnw_1 alternate .5s infinite
}

@keyframes _loader_13vnw_1 {
    0% {
        background-position: 0% 50%
    }

    to {
        background-position: 100% 50%
    }
}

._selection-container_1n038_1 {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    place-items: center;
    margin: 0 auto;
    position: relative
}

._selector-container_1n038_10 {
    display: flex;
    flex-direction: row;
    padding: 8px;
    width: fit-content;
    margin: 0 auto
}

._category-selector_1n038_18 {
    display: flex;
    max-width: 100%;
    font-family: Big Shoulders Text, sans-serif;
    font-weight: 700;
    border-radius: 4px;
    padding: 8px 16px;
    background-position: calc(100% - 10px) 50%;
    background-color: #ececec;
    background-color: var(lightgray, #ececec);
    box-sizing: border-box;
    color: #222;
    color: var(black, #222);
    letter-spacing: 1.2px;
    height: 40px;
    font-size: 14px;
    text-transform: uppercase;
    line-height: normal;
    text-align: center;
    border: 0;
    min-width: 268px;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 0 auto
}

._fa_1n038_45 {
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 24px;
    font-weight: lighter;
    color: var(black, #222);
    padding-top: 40px;
    margin-left: -30px
}

._hamburger_1xr5j_1 {
    cursor: pointer
}

._hamburger_1xr5j_1 div {
    height: 3px
}

._hamburger_1xr5j_1:hover div {
    background-color: #ff69b4 !important
}

._match-card_165kw_1 {
    display: flex;
    flex-direction: column;
    padding: 8px;
    min-width: 148px;
    border-radius: 6px;
    box-shadow: 0 3px #d3d3d3;
    position: relative;
    transition: transform .25s ease-in-out, box-shadow .25s ease-in-out
}

._match-card_165kw_1:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 3px #0000001a
}

._match-card-meta_165kw_16 {
    position: absolute;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 100%;
    top: 0;
    left: 0
}

._match-card-meta-content_165kw_25 {
    display: flex;
    justify-content: space-between;
    padding-inline: 4px
}

._match-card-body_165kw_31 {
    position: relative;
    margin-top: 16px
}

._spacing_165kw_36 {
    padding-block: 8px
}

._match-card-top_165kw_40 {
    display: flex;
    flex-direction: row
}

._match-card-left_165kw_45 {
    display: flex;
    flex-direction: column;
    flex-basis: 2fr;
    width: 70%;
    justify-content: center;
    gap: 8px
}

._match-card-left-top_165kw_54,
._match-card-left-bottom_165kw_62 {
    display: flex;
    gap: 4px;
    padding-block: 4px;
    align-items: center;
    width: 100%
}

._match-card-right_165kw_70 {
    display: flex;
    flex-direction: column;
    flex-basis: 1fr;
    width: 30%;
    font-size: 12px;
    font-family: IBM Plex Mono, monospace;
    justify-content: center;
    align-items: center;
    place-content: space-evenly
}

._match-card-right-label_165kw_82 {
    font-size: 10px;
    font-family: IBM Plex Mono, monospace
}

._match-card-bottom_165kw_87 {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0
}

._match-card-bottom-probabilities_165kw_94 {
    display: flex;
    font-size: 10px;
    padding-top: 4px;
    align-items: center
}

._team-badge_165kw_101 {
    width: 16px;
    display: flex
}

._team-brand_165kw_106 {
    font-size: 14px;
    display: flex;
    gap: 4px;
    width: 50%
}

._team-brand_165kw_106 span {
    text-wrap: nowrap
}

._team-win-prob_165kw_116 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    font-family: IBm Plex Mono, monospace;
    font-size: 12px;
    text-align: center
}

._td-logo-lockup_162tp_1 {
    display: flex;
    align-items: center;
    background-color: inherit;
    min-width: unset;
    gap: 8px;
    font-family: Big Shoulders Text, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    text-wrap: wrap;
    height: 36px;
    line-height: normal
}

._td-logo-lockup_162tp_1 img {
    width: 16px
}

._td-logo-lockup_162tp_1._td-logo-lockup--lg_162tp_18 {
    height: 48px
}

._td-logo-lockup_162tp_1._td-logo-lockup--lg_162tp_18 img {
    width: 24px
}

._td-logo-lockup-link_162tp_25 {
    color: inherit;
    transition: color .3s ease, text-decoration-color .3s ease;
    text-decoration: underline;
    text-decoration-color: transparent
}

._td-logo-lockup-link_162tp_25:hover {
    color: #979797;
    text-decoration-color: #979797
}

._mono_162tp_36 {
    font-family: IBM Plex Mono, monospace;
    font-weight: inherit;
    font-size: inherit;
    text-align: inherit;
    justify-content: inherit !important;
    min-width: unset !important
}

._data-table-container_et1xz_1 {
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    overflow: auto;
    white-space: normal;
    margin-bottom: 8px
}

._data-table_et1xz_1 {
    border-collapse: collapse;
    width: 100%;
    font-family: IBM Plex Mono, monospace;
    font-size: 12px
}

._data-table_et1xz_1 thead {
    box-shadow: inset 0 -1px #1d0a30
}

._data-table_et1xz_1 thead th {
    padding-inline: 4px;
    height: 42px;
    text-wrap-mode: nowrap;
    box-shadow: inset 0 -1px #1d0a30
}

._data-table_et1xz_1 thead th:last-child {
    padding-right: 8px
}

._data-table_et1xz_1 thead._sticky_et1xz_28 {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #fff;
    box-shadow: inset 0 -1px #1d0a30;
    z-index: 2
}

._data-table_et1xz_1 thead._sticky_et1xz_28 th:first-child {
    background-color: #fff;
    left: 0;
    z-index: 2;
    position: sticky;
    padding-left: 8px
}

._data-table_et1xz_1 th._sticky_et1xz_28 {
    padding-left: 8px;
    background-color: #fff;
    left: 0;
    z-index: 2;
    position: sticky;
    box-shadow: inset 0 -1px #1d0a30
}

._data-table_et1xz_1 tbody tr td:last-child {
    padding-right: 8px
}

._data-table_et1xz_1 tbody tr:nth-child(odd) td {
    background-color: #fff
}

._data-table_et1xz_1 tbody tr:nth-child(2n) td {
    background-color: #f2f2f2
}

._data-table_et1xz_1 td {
    padding-inline: 4px;
    scroll-snap-align: start;
    background-clip: padding-box;
    vertical-align: middle
}

._data-table_et1xz_1 td._sticky_et1xz_28 {
    position: sticky;
    left: 0;
    box-shadow: inset -2px 0 #0000001a;
    z-index: 1;
    padding-left: 8px
}

._data-table_et1xz_1 thead tr {
    text-transform: uppercase;
    font-weight: 600
}

._data-table_et1xz_1 thead tr th {
    padding-block: 8px;
    padding-inline: 4px;
    min-width: 60px;
    vertical-align: middle;
    box-sizing: content-box
}

._data-table_et1xz_1 tbody tr {
    height: 42px
}

._data-table_et1xz_1 td {
    min-width: 64px
}

._string-header_et1xz_91 {
    text-align: left
}

._string-header_et1xz_91._sortable_et1xz_94:hover {
    background-color: #bfbfbf;
    cursor: pointer
}

._number-header_et1xz_99 {
    font-variant-numeric: tabular-nums;
    text-align: right
}

._number-header_et1xz_99._sortable_et1xz_94:hover,
._selected-header_et1xz_108._sortable_et1xz_94:hover {
    background-color: #bfbfbf;
    cursor: pointer
}

._string-cell_et1xz_113 {
    text-align: left;
    padding-inline: 4px;
    overflow: hidden;
    text-overflow: ellipsis
}

._number-cell_et1xz_120 {
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-inline: 4px
}

._content-container_jtfxi_1 {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 800px;
    background-color: #fff;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 3px #d3d3d3;
    min-height: 200px
}

._chart-title_14b8n_1 {
    margin-bottom: 0;
    margin-top: 8px;
    color: inherit;
    letter-spacing: .6px;
    font-size: 24px
}

._footer_gncm0_1 {
    padding-top: 16px;
    font-family: Big Shoulders Text, sans-serif;
    font-size: 12px !important;
    color: gray;
    letter-spacing: .6px
}

._footer_gncm0_1:before {
    content: "Data provided by Opta. ";
    font-size: 12px !important
}

._axis_979h0_1 {
    font-family: inherit
}

._axis_979h0_1 path {
    display: none
}

._axis_979h0_1 text {
    font-family: inherit;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .6px
}

._axis_979h0_1 line {
    stroke-dasharray: 3 3;
    stroke: #d3d3d3;
    stroke-width: 1
}

._wrapper_1alx3_1 {
    container-name: wrapper;
    container-type: inline-size;
    display: grid;
    gap: 32px
}

@container wrapper (width < 800px) {
    ._filter-container_1alx3_9 {
        flex-direction: column
    }
}

._pagination-container_6v7ta_1 {
    padding: 16px;
    display: flex;
    justify-content: center;
    font-family: Big Shoulders Text;
    letter-spacing: 1.2px;
    font-size: 18px
}

._pagination-container_6v7ta_1 button {
    border: none;
    background: none;
    cursor: pointer;
    color: #1d0a30
}

._pagination-container_6v7ta_1 button:hover {
    color: #fe7aae
}

._filter-container_ut191_1 {
    margin: 16px 0
}

._filter-container_ut191_1 label {
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    font-family: Big Shoulders Text, sans-serif;
    font-variant: all-small-caps;
    font-size: 18px;
    letter-spacing: .6px;
    padding: 0 8px
}

._search-input_ut191_15 {
    min-width: 220px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid grey;
    margin: 0 0 8px;
    font-family: Big Shoulders Text, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .6px
}

._input-area_ut191_27 {
    position: relative
}

._clear-input-button_ut191_31 {
    background: none;
    font-family: IBM Plex Mono, monospace;
    font-weight: 800;
    border: 0;
    position: absolute;
    top: 45%;
    right: 20px;
    left: 88%;
    justify-self: center;
    text-align: end;
    cursor: pointer;
    color: #1d0a30
}

._clear-input-button_ut191_31:hover {
    color: #fe7aae
}

@media (max-width: 400px) {
    ._filter-container_ut191_1 label {
        max-width: unset
    }
}

._data-table-container_1mnv2_1 {
    background-color: #fff;
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 8px
}

._data-table_1mnv2_1 {
    border-collapse: collapse;
    width: 100%
}

._data-table-head_1mnv2_13 {
    border-bottom: 1px solid #1d0a30
}

._data-table-row_1mnv2_17 {
    height: 32px;
    cursor: pointer
}

._data-table-row_1mnv2_17:nth-child(2n) {
    background-color: #fff
}

._data-table-row_1mnv2_17:nth-child(2n):hover {
    background-color: #1d0a3066
}

._data-table-row_1mnv2_17:nth-child(odd) {
    background-color: #f2f2f2
}

._data-table-row_1mnv2_17:nth-child(odd):hover {
    background-color: #1d0a3066
}

._data-table-row-expand_1mnv2_34 {
    text-align: center
}

._selected-row_1mnv2_38 {
    background-color: #1d0a30 !important;
    color: #fff !important
}

._selected-row_1mnv2_38 ._data-table-cell_1mnv2_42 {
    color: #fff
}

._data-table-header_1mnv2_46 {
    font-family: IBM Plex Mono, monospace;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: gray;
    padding: 8px 4px 4px;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

._data-table-header_1mnv2_46:hover {
    background-color: #1d0a3066 !important;
    color: #fff
}

._data-table-header_1mnv2_46._selected-column_1mnv2_64 {
    background-color: #1d0a30 !important;
    color: #fff
}

._main-rating_1mnv2_69 {
    text-align: center !important;
    width: 70px;
    border-left: 1px solid #1d0a30;
    border-right: 1px solid #1d0a30
}

._main-col_1mnv2_76 {
    text-align: left;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

._main-group-col_1mnv2_84 {
    width: 180px;
    min-width: 120px;
    text-align: left;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

._data-table-cell_1mnv2_42 {
    font-family: IBM Plex Mono, monospace;
    font-size: 12px;
    color: #1d0a30;
    text-align: center;
    padding: 0 4px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

._data-table-cell_1mnv2_42._selected-column_1mnv2_64 {
    font-weight: 800
}

._match-card_1u4oy_1 {
    display: flex;
    flex-direction: column;
    padding: 8px;
    width: 232px;
    border-radius: 6px;
    box-shadow: 0 3px #d3d3d3;
    position: relative;
    margin-block: 4px;
    transition: transform .25s ease-in-out, box-shadow .25s ease-in-out
}

._match-card_1u4oy_1:hover {
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 4px 3px #0000001a
}

._match-card-meta_1u4oy_18 {
    position: absolute;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 100%;
    top: 0;
    left: 0
}

._match-card-meta-content_1u4oy_27 {
    display: flex;
    justify-content: space-between;
    padding-inline: 4px
}

._match-card-body_1u4oy_33 {
    position: relative;
    margin-top: 16px;
    height: 100%;
    display: flex;
    align-items: center
}

._spacing_1u4oy_41 {
    padding-block: 8px
}

._match-card-top_1u4oy_45 {
    display: flex;
    flex-direction: row
}

._match-card-left_1u4oy_50 {
    display: flex;
    width: 60%;
    justify-content: center;
    gap: 8px
}

._match-card-left-top_1u4oy_57,
._match-card-left-bottom_1u4oy_64 {
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%
}

._match-card-right_1u4oy_71 {
    display: flex;
    flex-direction: column;
    flex-basis: 1fr;
    width: 40%;
    font-size: 10px;
    font-family: IBM Plex Mono, monospace;
    justify-content: center;
    align-items: center;
    place-content: space-evenly
}

._match-card-right-label_1u4oy_83 {
    font-size: 10px;
    font-family: IBM Plex Mono, monospace
}

._match-card-bottom_1u4oy_88 {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0
}

._match-card-bottom-probabilities_1u4oy_95 {
    display: flex;
    font-size: 10px;
    padding-top: 4px;
    align-items: center
}

._team-badge_1u4oy_102 {
    width: 16px !important;
    height: 16px !important;
    display: flex
}

._team-brand_1u4oy_108 {
    font-size: 14px;
    display: flex;
    gap: 4px;
    width: 100%;
    text-transform: uppercase;
    align-items: center
}

._team-brand_1u4oy_108 span {
    text-wrap: nowrap
}

._team-power-rating_1u4oy_120 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-family: IBm Plex Mono, monospace;
    font-size: 12px;
    text-align: center
}

@media (max-width: 555px) {
    ._match-card_1u4oy_1 {
        width: auto;
        min-width: 232px;
        max-width: 400px
    }
}

.App .init-placeholder {
    width: 100%;
    text-align: center;
    font-family: Big Shoulders Text, sans-serif;
    letter-spacing: .6px
}

body {
    background-color: #f7f7f7;
    margin: 0
}

.pulse {
    animation: infinite 1s pulse
}

@keyframes pulse {
    0% {
        stroke-width: 0;
        stroke-opacity: 1
    }

    to {
        stroke-width: 4;
        stroke-opacity: 0
    }
}

a {
    text-decoration: none;
    color: unset
}

.show {
    width: 260px;
    margin: 0 auto
}

.swipe-button {
    border: none;
    background: none;
    cursor: pointer;
    color: #1d0a30
}

.swipe-button:hover {
    color: #fe7aae
}

@media (max-width: 290px) {
    .show {
        width: 100%
    }
}

@keyframes blink {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes typing {
    0.0000% {
        content: ""
    }

    1.1395% {
        content: "D"
    }

    2.2791% {
        content: "De"
    }

    3.4186% {
        content: "Dec"
    }

    4.5581% {
        content: "Deci"
    }

    6.6977% {
        content: "Decis"
    }

    7.6977% {
        content: "Decisi"
    }

    8.6977% {
        content: "Decisio"
    }

    9.6977% {
        content: "Decision"
    }
}

.var-text {
    --caret: currentcolor
}

.var-text:before {
    content: "Decision";
    animation: typing 20.5s
}

.varText:after {
    content: "";
    border-right: 1px solid var(--caret);
    animation: blink 1s linear infinite
}

.show-more-btn {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 0 2px;
    font-family: Big Shoulders Text, sans-serif;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    color: #1d0a30;
    border: 1px solid #1d0a30;
    padding: 8px 16px;
    transition: all .3s ease-in-out;
    position: relative;
    top: -24px
}

.show-more-btn:hover {
    border-color: #fd4890;
    color: #fd4890
}

.App>div>div>div:first-child {
    flex-wrap: wrap;
    width: 337px !important;
    height: 547px !important;
}

.App>div>div>div:last-child {
    height: 96% !important;
}

.App {
    width: 394px;
    height: 100%;
    transform: scale(0.883248730964467, 1);
    transform-origin: 0 0;
}

#root {
    /* width: 394px; */
    width: 100%;
    height: 100%;
}

body,
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}