@font-face {
    font-family: 'ScoreBoard';
    src: url('fonts/SCOREBOARD.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
    font-family: 'OctinSports';
    src: url('fonts/octin_sports.otf') format('truetype');
	font-weight: normal;
}

.matches {
	min-width: 450px;
    border-collapse: collapse;
}
.matches thead {
    background-color: #1c3a5e; /* Dark blue background for table header */
    color: #fff; /* White text color for table header */
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #46597a; /* Darker blue border for separation */
	position: sticky;
    top: 130px; /* Adjust this value to match the combined height of the top bars */
    z-index: 998; /* Slightly lower than the second bar */	
}

.matches thead th {
    padding: 10px;
    font-size: 1rem;
}

.matches tfoot {
    background-color: #1c3a5e; /* Dark blue background for table footer */
    text-align: center;
	position: sticky;
	bottom: 0;
	border-top: 2px solid #46597a; /* Darker blue border for separation */
}

.matches tfoot td {
    padding: 8px;
}




		
.navigation {
	background-color: #f0f0f0;
    text-align: center;
    margin-top: 0px;
    position: sticky;
    top: 63px;
    z-index: 999; /* Ensures the top bar stays above other content */
}

.navigation button {
    background-color: #1c3a5e; /* Dark blue background for buttons */
    color: #fff; /* White text color for buttons */
    border: none;
    padding: 4px 9px;
    margin: 3px;
    cursor: pointer;
	font-weight: bold;
    font-size: 0.75rem;
}


.navigation .current {
    background-color: #450f01; /* Darker blue current color for buttons */
    color: #fff; /* White text color for current button */
    cursor: default;
}

.navigation .multiplier {
	width:98%;
    background-color: #450f01; /* Darker blue current color for buttons */
    color: #fff; /* White text color for current button */
    cursor: default;
}


@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

.match-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
	padding: 2px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f5f5f5;
    width: 100%;
}

.match {
    display: flex;
	flex-wrap: nowrap;
	justify-content:space-between;
    padding: 2px;
    width: 100%;

}

.teams-box {
    display: flex;
    flex-direction: column;
	justify-content: center;
    align-items: center;	
	
}

.team-container {
    display: flex;
    align-items: center;
	padding-top:2px;
	padding-bottom:2px;	

}

.team-name {
	font-family: 'OctinSports';
    font-weight: bold;
	font-size: 0.8em;
    color: #333; /* Default text color */
    text-align: left; /* Center alignment for team names */
    overflow: hidden;
    text-overflow: ellipsis; 
	width:100px;
	padding-left:5px;
}

.flag-round-container {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 50%;

}

.flag-round-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.guess-score {
	color: #267137;
}
.guess-winner {
	color: #ff9900;
}
.guess-nothing {
	color: #C20D0D;
}


.score-box {
    font-size: 1.5em;
    font-weight: bold;
    padding: 15px;
	min-width: 50px;
	
}



.score {
	font-family: 'ScoreBoard';
	font-size: 40px;
	margin-top:-7px;
	margin-bottom:-7px;

}

.hidden {
	padding-top:12px;
	padding-bottom:12px;
    align-items: center;	
	font-size: 20px;
}

.prediction {
	margin-top:0px;
	margin-bottom:0px;

}

.custom-number-input {
    display: inline-flex;
    align-items: center;
	padding-top:8px;
	padding-bottom:8px;
	
}

.custom-number-input .value {
	font-family: 'ScoreBoard';
	font-size: 40px;
	color: #1c3a5e;
}

.custom-number-input span {
    cursor: pointer;
    user-select: none;
    padding: 0; /* Remove extra padding */
    margin: 0 2px; /* Smaller margin */
    font-size: 1.25rem; /* Smaller font size */

    color: #333; /* Darker gray for the symbol */
    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1rem; /* Ensure line height matches the size */
    transition: background-color 0.2s, transform 0.2s; /* Smooth transition */
		
}

.custom-number-input span:hover {

    transform: scale(1.05); /* Slightly enlarge on hover */
}

.custom-number-input span:active {
    transform: scale(0.95); /* Slightly shrink on active */
}


.custom-number-input .decrement,
.custom-number-input .increment {
    font-size: 1.25rem;
	color: transparent;  
	text-shadow: 0 0 0 grey;
}




.points-box {
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 15px;
	width:50px;
	
}

.points {
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #1c3a5e;
    color: white;
    border-radius: 3px;
	cursor: pointer;
    transition: background-color 0.3s ease;

}

.time-status-box {
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    text-align: center;
    font-size: 0.7em;
	width:55px;
	
}


.live {
    color: #ff0000;
}
.next {
    color: #1c3a5e;
}
.finished {
    color: #595959;
}
.postponed {
    color: #e69900;
}

.live_bg {
    background-color: #faebeb;
	border: 1px solid #ff0000;
}
.next_bg {
    background-color: #d8e5f3;
	border: 1px solid #1c3a5e;
}
.finished_bg {
    background-color: #d9d9d9;
	border: 1px solid #595959;
}
.postponed_bg {
    background-color: #ffeecc;
	border: 1px solid #e69900;
}


.odds-container {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Reduced width */
	padding:3px;
}

.odds-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Reduced width */
    padding: 0px; /* Further reduced padding */
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.odds-box-star {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Reduced width */
    padding: 0px; /* Further reduced padding */
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.odds-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 2px; /* Further reduced margin */
    font-size: 0.7em; /* Further reduced font size */
}

.odds-value {
    font-size: 0.9em; /* Further reduced font size */
    color: #007bff;
}

.radio_item{
display: none !important;
}

.label_item {
opacity: 0.2;
background-image: url('img/star_empty.png'); /* Path to the second image */
}

.radio_item:checked + label {
opacity: 1;
background-image: url('img/star_fill.png'); /* Path to the second image */
}

.wdl {
    text-align: center;    /* Center the text */
}
.wdl span {
    display: inline-block; /* Allow padding and alignment */
    color: white;          /* Text color */
    text-align: center;    /* Center the text */
    padding: 5px 10px;     /* Padding for some space */
    border-radius: 5px;    /* Rounded corners */
	font-family: monospace;      /* Use a monospace font for uniformity */
}

.wdl span.win {
    background-color: green; /* Green for Win */
}

.wdl span.draw {
    background-color: gray;  /* Gray for Draw */
}

.wdl span.lose {
    background-color: red;   /* Red for Lose */
}

.popup_team_title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background-color: #1C3A5C;
    padding: 10px;
    color: #f0f0f0;
    width: 100%;
    box-sizing: border-box;
    /* Remove display: flex to test colspan rendering */
}

.popup_date {
	text-wrap: nowrap;
	text-align: center;
	font-family: monospace; 
	font-weight: bold;
}