* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --main: #333;
    --bg-main: #f8f9fa;
    --muted: gray;
    --bg-muted: #ecebeb;
    --accent-calendar-day-color: firebrick;
    --accent-calendar-day-bg-color: #ffcccc;
    --team-tile-width-lg: 220px;

    --img-width-lg: 220px;
    --img-width-md: 100px;
    --img-width-sm: 40px;
    --img-width-xs: 40px;

    --img-height-lg: 220px;
    --img-height-md: 100px;
    --img-height-sm: 40px;
    --img-height-xs: 40px;

    --img-min-width-lg: 40px;
    --img-min-width-md: 40px;
    --img-min-width-sm: 30px;
    --img-min-width-xs: 20px;

    --img-font-size-lg: 150px;
    --img-font-size-md: 70px;
    --img-font-size-sm: 30px;
    --img-font-size-xs: 30px;

    --pagination-color: #190000;
    --pagination-bg: #fff;
    --pagination-border-color: #dee2e6;

    --pagination-active-color: #ffffdd;
    --pagination-active-bg: #190000cc;
    --pagination-active-border-color: #190000;

    --pagination-disabled-color: #19000077;
    --pagination-disabled-bg: #dee2e6;
    --pagination-disabled-border-color: #dee2e6;

    color-scheme: light;
}

.dark {
    --main: #fff;
    --main-rgb: 255, 255, 255;
    --bg-main: #212529;
    --bg-muted: #464c51;
    --accent-calendar-day-bg-color: #ff9966;
    color-scheme: dark;
}

body {
    background-color: var(--bg-main);
    color: var(--main);
}

:root.dark .no-dark {
    display: none;
}

:root:not(.dark) .on-dark {
    display: none;
}

/* Calendar styles */

.calendar .day {
    width: 14.28%;
}

@media (min-width: 992px) {
    .calendar .day .date {
        font-size: 24px;
    }
}

.calendar .day {
    border: lightgray 1px solid;
}

.calendar .day .date a {
    color: var(--main);
}

.calendar .no-match .date a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.calendar .day.muted {
    background-color: var(--bg-muted);
}

.calendar .day.muted, .calendar .day.muted .date a {
    color: var(--muted);
}

.calendar .day.muted img {
    filter: grayscale(100%);
}

.calendar .day.today .date a {
    padding: 2px;
    background-color: var(--accent-calendar-day-bg-color);
    color: var(--accent-calendar-day-color);
    border-radius: 50%;
}

/* End calendar styles */

.matches {
    min-height: 1em;
}

.match .match__score {
    width: 20%;
}

.match .match__team {
    width: 40%;
}

.match .match__team__lg {
    max-width: 240px;
}

.match .match__team__md,
.match .match__team__sm,
.match .match__team__xs {
    max-width: 160px;
}

.team-tile__shield img {
    width: 100%;
}

img.team-tile__shield__img__lg {
    max-width: var(--img-width-lg);
    max-height: var(--img-height-lg);
    min-width: var(--img-min-width-lg);
}

span.team-tile__shield__img__lg {
    font-size: var(--img-font-size-lg);
}

img.team-tile__shield__img__md {
    max-width: var(--img-width-md);
    max-height: var(--img-height-md);
    min-width: var(--img-min-width-md);
}

span.team-tile__shield__img__md {
    font-size: var(--img-font-size-md);
}

img.team-tile__shield__img__sm {
    max-width: var(--img-width-sm);
    max-height: var(--img-height-sm);
    min-width: var(--img-min-width-sm);
}

span.team-tile__shield__img__sm {
    font-size: var(--img-font-size-sm);
}

img.team-tile__shield__img__xs {
    max-width: var(--img-width-xs);
    max-height: var(--img-height-xs);
    min-width: var(--img-min-width-xs);
}

span.team-tile__shield__img__xs {
    font-size: var(--img-font-size-xs);
}

.event-nearest__event_team {
    width: 40%;
}

.event-nearest__event_date {
    width: 20%;
}

.team-tile__shield {
    background: radial-gradient(circle closest-side at center, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
    align-content: center;
}

.team-tile__buttons {
    min-height: 20px;
}

.team-tile__buttons div {
    width: 33%;
}

.pagination .page-item .page-link {
    color: var(--pagination-color);
    background-color: var(--pagination-bg);
    border-color: var(--pagination-border-color);
}

.pagination .page-item.active .page-link {
    color: var(--pagination-active-color);
    background-color: var(--pagination-active-bg);
    border-color: var(--pagination-active-bg);
}

.pagination .page-item.disabled .page-link {
    color: var(--muted);
    background-color: var(--bg-muted);
}

@media (width <= 992px) {
    .event-nearest__main, .event-nearest__nearest {
        width: 100%;
    }

    .team-tile-lg {
        width: 145px;
    }

    .team-logo {
        width: var(--img-width-md);
    }
}

@media (width > 992px) {
    .event-nearest__main, .event-nearest__nearest {
        width: 50%;
    }

    .team-tile-lg {
        width: var(--team-tile-width-lg);
    }

    .team-logo {
        width: var(--img-width-lg);
    }
}