:root {
    --wagerGreen: #1cad75;
    --backColour: #191919;
    --tabColour: #262626;
    --textColour: #f1f1f1;
    --highlight: #1cad75;
    --borderColour: #333333;
    --light: rgb(155, 155, 155);
    --boxShadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

.baseholder {
    background-color: var(--backColour);
    color: white;
}

.odds-screen-heading {
    text-align: center;
}

.odds-screen-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-direction: row;
}

.league-list {
    height: fit-content;
    width: 200px;
    border: 1px solid var(--borderColour);
    padding: 5px;
    border-radius: 10px;
}


.league-list-container,
.sport-group {
    width: 100%;
    flex: 1;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.sport-group {
    border-bottom: 1px solid var(--borderColour);
}

.sport-group-header {
    margin-top: 10px;
    width: 100%;
    font-size: 1.25em;
    text-align: left;
}

.league-list-heading {
    font-weight: bold;
    text-align: center;
}

.league-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    font-family: 'poppins', sans-serif;
    font-size: 0.8em;
    padding-top: 10px;
    padding-bottom: 10px;

}

.league-container:hover {
    cursor: pointer;
    color: var(--highlight);
}

.game-list {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
}

.game-list-container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}

.game-item {
    padding: 5px;
    height: 95px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borderColour);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.game-item-time-container {
    color: rgb(155, 155, 155);
}

.game-item:hover {
    cursor: pointer;
}

.game-item-cell {
    display: flex;
    justify-content: start;
    flex-direction: column;
}

.fa-desktop {
    margin-left: 5px;
}

.team-name {
    flex: 0.5;
    font-size: 1em;
    font-family: 'poppins', sans-serif;
}

.game-schedule-bets {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.bets-amount-container {
    display: flex;
    font-family: 'poppins', sans-serif;
    flex-direction: row;
    gap: 5px;
}


.game-schedule-odds-container {
    display: flex;
    flex-direction: column;
    justify-content: right;
    width: 100%;
    align-items: end;
    overflow: hidden;
}

.game-odds-container {
    font-family: 'Barlow Semi Condensed', sans-serif;
    width: 100%;
    max-width: 200px;
    border: 1px solid var(--borderColour);

    overflow: hidden;
}

.game-odds-header,
.game-odds-row {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.game-odds-header {
    font-weight: 600;
    font-size: 0.8em;
    padding: 3px 0;
    color: rgb(209, 209, 209);
    border-bottom: 1px solid var(--borderColour);
}

.game-odds-row {
    padding: 3px 0;
    font-size: 0.8em;
    border-bottom: 1px solid var(--borderColour);
}

.game-odds-cell {
    font-size: 1.1em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50px;
    padding: 0 3px;
}

.game-odds-row:last-child {
    border-bottom: none;
}

.bookmaker-image {
    width: 20px;
    border-radius: 4px;
}

.league-sport-image {
    width: 35px;
}

.bookmaker-odds-image {
    margin-bottom: 5px;
    border-radius: 5px;
    width: 80px;
}

.loading-container {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loader {
    height: 80px;
    aspect-ratio: 1;
    display: grid;
}

.loader:before,
.loader:after {
    content: "";
    --c: no-repeat linear-gradient(#1cad75 0 0);
    background: var(--c), var(--c);
    background-size: 25% 50%;
    animation: l5 1.5s infinite linear;
}

.loader:after {
    transform: scale(-1);
}

.odds-section {
    margin-top: 50px;
    margin-bottom: 3rem;
}

.odds-header {
    font-family: 'poppins', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.odds-subheading {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.odds-text {
    font-size: 1rem;
    color: #eaeaea;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.odds-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.odds-table th,
.odds-table td {
    padding: 0.75rem;
    border: 1px solid #444;
    text-align: left;
}

.odds-table th {
    background-color: #222;
    color: #fff;
}

.odds-table tr:nth-child(even) {
    background-color: #2a2a2a;
}

.odds-list,
.odds-ordered {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.odds-list li,
.odds-ordered li {
    margin-bottom: 0.5rem;
}

.cta-button {
    display: inline-block;
    background-color: #1cad75;
    color: #111;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.cta-button:hover {
    background-color: #17b77f;
}


@keyframes l5 {

    0%,
    5% {
        background-position: 33.4% 100%, 66.6% 100%
    }

    25% {
        background-position: 33.4% 100%, 100% 0
    }

    50% {
        background-position: 0 0, 100% 0
    }

    75% {
        background-position: 0 0, 66.6% 100%
    }

    95%,
    100% {
        background-position: 33.4% 100%, 66.6% 100%
    }
}

@media (max-width: 1200px) {
    .team-name {
        font-size: 1em;
    }

    .game-item {
        width: 350px;
    }

    .bookmaker-game-schedule {
        grid-template-columns: repeat(10, 1fr);
    }

    .game-list {
        padding: 0px;
    }
}

@media (max-width: 1000px) {
    .game-list-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .game-item {
        width: 500px;
    }
}

@media (max-width: 770px) {
    .game-list-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .game-item {
        width: 350px;
    }
}

@media (max-width: 514px) {
    .odds-screen-container {
        flex-direction: column;
    }

    .league-list {
        width: 100%;
    }

    .game-item {
        width: 100%;
    }

    .league-list-container,
    .sport-group {
        max-width: 100vw;
    }
}