.currenttime {
    font-weight: bold;
    color: var(--current-time-color);
}

.start-time {
    font-weight: bold;
    color: var(--start-time-color);
    font-size: small;
}

.match-list {
    height: auto;
    max-width: 100%;
    /* Ensures full width utilization */
    padding: 8px;
    /* Adds padding around the container */
    background-color:var(--match-list-background);
    /* Light background for contrast */
    border-radius: 10px;
    /* Rounded corners for better aesthetics */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.filter-row {
    color: var(--match-row-text);
    opacity: 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    margin: 0rem 0.5rem;
    background-color: var(--match-row-background);
    transition: background-color 0.3s ease;
}

.ad-row {
    color: var(--match-row-text);
    opacity: 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    margin: 0rem 0.5rem;
    border-bottom: 1px solid var(--match-row-border); /* Separates each match visually */
    background-color: var(--match-row-background);
    transition: background-color 0.3s ease;
}

.match-row {
    color: var(--match-row-text);
    opacity: 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    margin: 0rem 0.5rem;
    border-bottom: 1px solid var(--match-row-border); /* Separates each match visually */
    background-color: var(--match-row-background);
    transition: background-color 0.3s ease;
}

.match-row-unselected {
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

.match-list-item {
    color: var(--match-list-item-text);
}

.match-row:hover {
    background: var(--primary-color);
    cursor: pointer;
    /* Highlight on hover */
    color: var(--match-row-text-hover);
    transition: background-color 0.3s ease;
}

.match-row:active {
    background: var(--primary-color);
    /* Highlight on hover */
    color: var(--match-row-text-hover);
    transition: background-color 0.3s ease;
}

.match-row:hover .match-list-item  {
    color: var(--match-list-item-text-hover);
    transition: background-color 0.3s ease;
}

.match-row:hover .score  {
    color: var(--match-list-item-text-hover);
    transition: background-color 0.3s ease;
}

.match-row:hover .start-time  {
    color: var(--match-list-item-text-hover);
    transition: background-color 0.3s ease;
}

.match-info-row {
    color: var(--match-info-row-text);
    background-color: var(--match-row-background);
    font-size: .8em;
    padding: 0.5rem 1rem;
    margin: 0rem 0.5rem;
    transition: background-color 0.3s ease;
}

.score {
    color: var(--match-list-item-text);
    font-size: .8em;
}

.current-score {
    font-size: 1.3rem;
}

.statistics-icon {
    fill: var(--statistics-icon-color);
}

.league-list {
    background-color: var(--league-list-background);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.country-header {
    background-color: var(--league-country-header-background);
    border-bottom: 2px solid var(--league-country-header-border);
}

.league-item {
    background-color: var(--league-item-background);
    border-left: 4px solid var(--league-item-border-unselected);
    /* Change color to match theme */
    cursor: pointer;
    margin: 0 0 2px 0;
    transition: background-color 0.3s ease, border-left 0.3s ease, color 0.3s ease;
}

.league-item:hover {
    background-color: var(--primary-color);
    color: white;
    border-left: 4px solid var(--league-item-border-unselected-hover);
    /* Change color to match theme */
    transition: background-color 0.3s ease, border-left 0.3s ease, color 0.3s ease;
}

.league-item-selected {
    border-left: 8px solid var(--league-item-border-selected);
    transition: background-color 0.3s ease, border-left 0.3s ease, color 0.3s ease;
}

.league-item-selected:hover {
    border-left: 8px solid var(--league-item-border-selected-hover);
    transition: background-color 0.3s ease, border-left 0.3s ease, color 0.3s ease;
}

.empty-match-row {
    background-color: var(--warning-background); /* Light yellow for warning */
    border: 0px;
    padding: 10px;
    margin: 5px;
}

.select-all-button {
    border-color: var(--primary-color);
    border-width: 1px;
    color: var(--primary-color);
}

.select-all-button:hover {
    background-color: var(--select-all-button-hover-color);
    color: white;
}

.select-none-button {
    border-color: var(--highlight-color);
    border-width: 1px;
    color: var(--highlight-color);
}

.select-none-button:hover {
    background-color: var(--select-none-button-hover-color);
    color: white;
}

.responsive-icon {
    font-size: clamp(12px, 3vw, 20px);
}