/********************/
/***** GENERAL ******/
/********************/
body {
	font-family:'Nunito Sans',sans-serif !important;
}

h1, h2, h3, h4 {
	color:#20242e !important;
}

.heading-medium {
	font-size:1.4rem !important;
}
.section-heading {
	margin-top:2em;
	margin-bottom:1em;
	text-transform:uppercase;
}

.small-heading {
	font-size:1.5rem !important;
}

/* a tag / links */
.team-link {
	color: #20242E;
	text-decoration: none;
}
.game-link {
	color: #20242E;
	text-decoration: none;
}

.savant-container {
	margin-top:2em !important;
	margin-bottom:2em !important;
	padding-left: 0px !important;
    padding-right: 0px !important;
}

.savant-container-sc {
	margin-top: 0em !important;
    margin-bottom: 0em !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.savant-row {
	display: flex;
    justify-content: space-between;
	width:100%;
}

.savant-league-logo-img {
	height:50px !important;
	margin-right:1em;
}

/* center text */
.center-text {
  text-align: center !important;
}
/* Align content to the left*/
.left-content {
	align-content: flex-start;
	float:left;
}
/* Align content to the right*/
.right-content {
	align-content: flex-end;
	float:right;
}

/* Capitalize text */
.capitalize {
	text-transform:none;
	text-transform:capitalize;
}

/* Small spaing to left and right */
.small-spacing {
	margin-left:0.5em;
	margin-right:0.5em;
}

/* Small circle img */
.circle-img-small {
	width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
	margin-right:0.5em !important;
}

/* Extra small circle img */
.circle-img-xsmall {
	width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
	margin-right:0.5em !important;
}

/* Extra super small circle img */
.circle-img-xxsmall {
	width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
	margin-right:0.5em !important;
}

/* Extra small link */
.xsmall-link {
	font-size: 14px !important;
    color: black !important;
	font-weight:400 !important;
}

/*********************/
/***** NAV LINKS *****/
/********************/

.savant-table-nav-wrapper {
	border:1px solid #e5e5e5;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-bottom:5px;
	background-color: #F6F7F8;
	padding-top:0.5em;
	padding-bottom:0.5em;
}

.savant-nav-item {
	padding: 0em 0.25em;
}


.savant-nav-link.active {
	background-color:#2FB782 !important;
	text-transform:uppercase;
	font-weight:600;
	font-size:12px !important;
	color:#fff !important;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1)
}

.savant-nav-link{
	background-color:#F6F7F8 !important;
	text-transform:uppercase !important;
	font-weight:600;
	font-size:12px !important;
	color:#65686F !important;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.savant-nav-link:hover {
	border: 1px solid lightgray !important;
	border-radius: 6px !important;
}

.savant-nav-item-small, .savant-nav-item-small.active {
	font-size:10px !important;
}


.savant-nav-item-large, .savant-nav-item-large.active {
	font-size:14px !important;
	font-weight:500 !important;
}

.savant-dropdown-btn {
	text-transform:uppercase;
	font-weight:600;
	font-size:12px !important;
}
.savant-dropdown {
	padding-left:0em !important;
	padding-top:0.5em !important;
	padding-bottom:0.5em !important;
	width: max-content !important;
}

.savant-league-name {
	margin-bottom:0px !important;
}

/*******************/
/***** BUTTONS *****/
/*******************/

.savant-nav-small-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
	font-size: 9px !important;
    padding: 5px 10px 5px 10px !important;
}

.savant-nav-medium-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
	font-size: 12px !important;
    padding: 5px 10px 5px 10px !important;
}

.green-btn {
	background-color:#2fb682 !important;
	color:#fff !important;
}
.green-btn:hover {
	background-color:#138157 !important;
}

.read-more-btn {
	width:10%;
	border-radius:6px;
}

/*******************/
/***** TABLES ******/
/*******************/

.standings-container {
	border:1px solid #e5e5e5;
	padding:0px !important;
	border-radius: 5px;
	overflow:hidden;
}
.savant-table-container {
	border:1px solid #e5e5e5;
	padding:0px !important;
	border-radius: 5px;
}

table {
	border:none;
	margin-bottom:0px !important;
}

.table-standings th {
  	
	font-size:12px;
	/*background-color:#F6F7F8 !important;
	color:#66686e !important;*/
	background-color: #1a3150 !important;
	color:#fff !important;
}
.table-savant th{
	background-color:#F6F7F8 !important;
	font-size:12px;
	color:#66686e !important;
}

.standing-row:hover td {
	font-weight:600 !important;
}
.savant-table-row:hover td {
	font-weight:600 !important;
}
.savant-table-row:hover .table-date {
	font-weight:600 !important;
}

.savant-table-row i {
	color:#aeaeae !important;
}
.savant-table-row i:hover {
	color: #20242E !important;
}

.table-standings th, td {
  padding-left: 1.5em !important;
}
.table-savant th, td{
	padding-left: 1.5em !important;
}


.table-standings td {
  	font-size:14px;
	font-weight:400;
	color: #20242E;
	text-align: left;
}
.table-savant td {
	font-size:14px;
	font-weight:400;
	color: #20242E;
	text-align: left;
}

.savant-table-footer {
	background-color:#F6F7F8 !important;
	min-height:30px;
}


.table-flag-img {
	height:20px;
	margin-right:1em;
}
.table-logo-img {
	width:20px;
	margin-right:1em;
}

.table-date {
	font-size: 1.1em;
    font-weight: 500;
}
.table-time {
	
}

.empty-table-msg {
	color:#2a5c65;
	font-weight:500;
	margin-top:1em;
	margin-bottom:1em;
}

/* Odds table */
.game-table-odds th {
	
	font-size:12px;
	/*background-color:#F6F7F8 !important;
	color:#66686e !important;*/
	background-color: #1a3150 !important;
	color:#fff !important;
}
.game-table-odds td{
	padding-left:0px !important;
	text-align:left;
}

.ou-separator-row td {
	background-color:#F6F7F8 !important;
	font-size:12px;
	font-weight:600;
	color:#66686e !important;
}

/*********************/
/***** STANDINGS *****/
/*********************/

.standings-league-logo-img {
	max-height:50px;
	margin-right:1em;
}
.standings-league-name {
	margin-bottom:0px !important;
}
.standings-league-season {
	font-size:12px;
}

.league-info{
	margin-right:1em;
	
}

.standings-team-logo-img {
	width:20px;
	margin-right:1em;
}


/* Form characters*/
.form-character {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  
  color: white;
  margin: 0 3px;
}

.form-win {
	background-color: #2FB782;
}
.form-lost {
	background-color: #EA1042;
}
.form-draw {
	background-color: #3498db;
}

.desc-green {
	border-left: 3px solid green;
}
.desc-blue {
	border-left: 3px solid blue;
}
.desc-yellow {
	border-left: 3px solid yellow;
}

/**********************/
/***** BOOKMAKERS *****/
/**********************/
.bookmaker-logo-small {
	max-height: 25px;
}

/*********************/
/***** GAME PAGE *****/
/*********************/

.savant-hero {
    margin-bottom: 1em;	
}
.game-data-row {
	background-color:#1a3150;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	padding:1em;
}
.game-data-row .hero-league-row {
	height:50px;
}
.game-data-row .country-logo {
	height:30px;
	width:30px;
	border-radius:50% !important;
	background-repeat:no-repeat;
    background-size:cover;
	background-position:center;
}
.game-data-row .league-name {
	font-size:1.5em;
	font-weight:600;
	color:white;
	margin-left:1em;
}

.hero-time-row {
	color:#fff;
	font-size:1.1em;
	font-weight:500;
}
.hero-time-row .clock-icon {
	margin-right:0.5em;
}

.hero-teams-row {
	margin-top:2em !important;
}
.game-team-wrapper {
	color:#fff;
}
.game-team-wrapper .game-team-name {
	font-weight:500;
	font-size:1.5em !important;
}
.game-team-wrapper .game-team-logo {
	width:60px;
}

.game-team-wrapper .game-form-character {
	display: inline-block;
	  width: 10px;
	  height: 10px;
	  line-height: 10px;
	  text-align: center;
	  font-size: 5px;
	  font-weight: bold;
	  border-radius: 50%;
	  color: white;
	  margin: 0 5px;
}

.game-menu-row {
	background-color:#F6F7F8;
	border:1px solid #e5e5e5;
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	padding:1em;
}

.game-container {
	border:1px solid #e5e5e5;
	padding:0px !important;
	border-radius: 5px;
	padding:1em !important;
}

.savant-content {
	padding-left:0px !important;
	padding-right:0px !important;
}
.savant-content-col {
	height:20%;
}

.savant-content-sidebar {
	height:20%;
}

#game-standings-table .standings-team-logo-img {
	width:12px !important;
}

#game-standings-table td {
	font-size:12px !important;
}

.highlight-row td{
	background-color: #d9f2e8 !important;
}

.game-table-standings>:not(caption)>*>* {
    padding: 0.25rem 0.4rem !important;
}

/**************/
/*** NEWS *****/
/**************/
#game-news {
	padding-left:0px;
}

.news-container {
	border:none;
	padding:1.5em 0px 0px 0px !important;
}

.news-row {
	/*border-bottom: 1px solid #f0eeee;*/
    padding-bottom: 30px;
    margin-bottom: 1em;
}

.news-nav {
	margin-bottom:1em;
}

.news-header-row .section-heading {
	margin-top:0em;
	margin-bottom:0em;
}

.news-heading {
	font-weight:bold;
	text-transform:none;
	display: flex;
    align-items: center;
    justify-content: center;
}

.news-header-row .game-team-logo {
	max-width:20px;
	height:auto;
	margin-right:0.3em;
	
}
.news-header-row .team-name {
	display: flex;
    align-items: center;
}


/* Carusel / Slider */

/* Ensure .row uses flexbox to align all .col elements */
.news-content-row .row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if needed */
}

/* Ensure each .col is a flex item that stretches */
.news-content-row .col-lg-4,
.news-content-row .col-md-6,
.news-content-row .col-sm-12 {
    display: flex; /* Make columns flex containers */
    flex-direction: column; /* Column direction to stack content */
    margin-bottom: 20px; /* Add spacing between rows */
}

/* Make all cards equal height */
.news-content-row .card {
    display: flex; /* Make card a flex container */
    flex-direction: column; /* Stack content inside card */
    height: 350px; /* Fixed height for all cards */
    flex-grow: 1; /* Allow cards to grow equally */
    border: none; /* Optional: Remove default border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow: hidden; /* Ensure content doesn't overflow */
    margin: 10px; /* Add some margin */
}

.news-content-row .card a {
    color:inherit !important;
}

/* Image styling to ensure uniform height */
.news-content-row .card-img-top {
    height: 150px; /* Fixed height for consistency */
    width: 100%; /* Ensure full width */
    object-fit: cover; /* Cover the space without stretching */
    background-color: #f0f0f0; /* Background for non-image cases */
    display: block; /* Ensure block-level behavior */
}

/* Card body styling */
.news-content-row .card-body {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    padding: 10px; 
}

/* Show full title */
.news-content-row .card-title {
    margin-bottom: 10px; 
    flex: 0; 
    white-space: normal; 
    font-size: 1rem; 
    font-weight: bold;
}

/* Truncate card text to fit within the card height */
.news-content-row .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds ellipsis (...) when truncated */
    -webkit-line-clamp: 4; /* Number of lines to display */
    max-height: 6.5em; /* Controls the maximum height (adjust based on line height and number of lines) */
    line-height: 1.5em; /* Controls line height */
    margin-bottom: 0; /* Adjust margin if needed */
	font-size:12px;
}


.card-site {
    display: flex; /* Use Flexbox for layout */
    align-items: center; /* Vertically center the items */
    justify-content: space-between; /* Space out items to make the date float right */
	margin-bottom:0.5em;
}

.news-outlet-link {
    display: flex;
    align-items: center; 
    text-decoration: none; 
    color: inherit; 
    margin-right: 0.5em; 
}

.card-date {
    margin-left: auto;
	font-size:12px;
	font-weight:300;
}

.card-lang {
    position: absolute;
    top: 5px;
    right: 5px;
    /* background-color: rgba(255, 255, 255, 0.7); */
    padding: 5px;
    border-radius: 5px;
}

.news-flag-img {
    width: 20px; /* Adjust the size of the flag image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%; /* Circle image */
}


/**************/
/*** TIPS *****/
/**************/

.tips-container {
	border:none;
	padding:1em 0px 0px 0px !important;
}

/* Tips analysis */
.analysis-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #586774;
    position: relative;
}

.analysis-cell:first-of-type {
    border-right: none;
}

.analysis-cell:first-of-type::before,
.analysis-cell:first-of-type::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 22px;
    height: 1px;
    background-color: #586774;
    transform-origin: right center;
}

.analysis-cell:first-of-type::before {
    transform: rotate(60deg);
}

.analysis-cell:first-of-type::after {
    transform: rotate(-60deg);
}

.analysis-icon {
	font-size:18px;
	color:#2FB782;
}

.analysis-text {
	font-size:1.2em;
	font-weight:500;
	color:#baccdc;
}

.analysis-text-static {
	font-size:1.2em;
	font-weight:500;
	color:white;
}

.analysis-text-percent {
	font-size: 1.5em;
    font-weight: 600;
}

.analysisdata {
    display: flex;
    align-items: center;
	padding-left:1.5em;
}

.analysis-data-icon {
	font-size:18px;
	color:#2FB782;
	width:5% !important;
}
.analysis-data-text {
	width:95% !important;
	color:black;
	padding:1em;
	flex: 1;
}

.game-tips-data {
	
}
.game-tips-data h3 {
	font-size:1.3em;
	color:#1a3150 !important;
	font-weight:600;
}
.game-tips-data i {
	font-size:1.2em;
	color:#1a3150;
}

.inline-heading {
	font-size:1.1em;
	color:#1a3150;
	font-weight:500;
}



/* Predictions */
.pred-content-row {
	margin-top:1em;
	margin-bottom:2em;
}
.pred-team-logo {
	font-size:30px;
	color: #1a3150 !important;
}
.pred-team-logo img {
	width:30px;
}
.pred-team-name {
	color: #021639;
    font-size: 14px;
    font-weight: 500;
}
.pred-team-odds-wrapper {
	border: 2px solid #052643;
    border-radius: 5px;
	overflow: hidden;
	width:80%;
	margin:auto;

}
.pred-bookmaker-logo img {
	height:30px !important;
	width:auto;
	margin-right: 0;
}
.pred-team-odds-row {
    display: flex;
    align-items: center; /* Vertical alignment */
    justify-content: flex-start; /* Horizontal alignment */
    padding: 0; /* Removes padding inside the row */
    margin: 0; /* Adjust as needed to fit your design */
}

.pred-team-percentage {
	padding-top:0.2em;
	padding-bottom:0.2em;
}

.pred-percentage {
	font-size: 16px;
    color: #1a3150;
    font-weight: 500;
}

.pred-team-odds {
    display: flex;
    align-items: center; /* Centering vertically */
    justify-content: center; /* Centering horizontally */
    background-color: #1a3150;
    color: #fff;
    height: 30px; /* Adjust height as needed */
    flex-grow: 1; /* Takes up remaining space */
    margin: 0; /* Ensures no extra space around */
    padding: 0; /* Removes any default padding */
}

.pred-odds {
	font-size: 14px;
    font-weight: 500;
}

.double-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
	gap: 5px;
}


/* Tips table */

.game-tips-wrapper {
	background-color:#f7f8f9;
	border-left:1px solid #eaeaea;
	border-right:1px solid #eaeaea;
	border-bottom:1px solid #eaeaea;
}
.game-tips-header {
	background-color:#1a3150 !important;
	font-size:12px;
	color:#fff !important;
	padding:1em !important;
	margin-bottom:1em;
}
.game-tips-row {
	background-color: #fff;
    padding: 0.3em;
    border: 1px solid #eaeaea;
    margin-left: 0.3em !important;
    margin-right: 0.3em !important;
    margin-bottom: 0.5em !important;
	align-items: center;
}
.game-tips-row a {
	color:#1a3150 !important;
}
.pool-field-row {
	padding:0px;
}
.pool-field {
	text-transform:capitalize;
	padding:0px !important;
	text-align:left !important;
}

.pool-img {
	max-width:50px;
	width:50px;
	padding:0px;
}

.time-date-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bet-time {
	color: #021639;
	font-size:12px;
	font-weight:500;
}
.bet-date {
	font-size:12px;
	font-weight:500;
}

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

.bet-teams {
	color: #021639;
	font-size:14px;
	font-weight:500;
}

.tipster-field {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.game-tip {
	color: #0f5d66;
	font-size:14px;
	font-weight:500;
}

.odds-btn {
	background-color: #1a3150 !important;
    color: #fff !important;
    font-size: 10px !important;
    text-transform: none;
}

.game-tipster a {
	font-size:12px;
}

.game-tips-header .col,
.game-table-tips .col {
    flex-grow: 1;
    padding: 5px; /* Ensuring padding is the same can help with alignment */
    box-sizing: border-box;
    text-align: center; /* Center align the text if needed */
}

.analysis-field {
	display: none;
    margin-top: 0.5em !important;
    padding-top: 1em;
	padding-bottom:1em;
    border-top: 1px solid #eaeaea;
}
.game-analysis {
	font-weight:300 !important;
	color: #212529 !important;
}
.toggle-analysis-btn {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 12px;
	background-color: #1a3150 !important;
	border-radius:3px;
}

/* Specific flex adjustments for columns that need to be wider */
.game-tips-header .tips-field,
.game-table-tips .tips-field {
    /*flex-grow:3;*/
    flex: 0 0 40%;
}

.game-tips-header .teams-league-field,
.game-table-tips .teams-league-field {
	flex: 0 0 20%;
	/*flex-grow: 0.5;
    flex-basis: 20%;*/
}

.game-tips-header .time-date-field,
.game-table-tips .time-date-field,
.game-tips-header .odds-field,
.game-table-tips .odds-field {
	flex: 0 0 10%;
	/*flex-grow: 0;
    flex-basis: 10%;*/
}

/* You might need to adjust these individually if there are still alignment issues */
.game-tips-header .pool-field,
.game-table-tips .pool-field,
.game-tips-header .tipster-field,
.game-table-tips .tipster-field {
	flex: 0 0 12%;
    /*flex-grow: 1;
    flex-basis: 10%;*/
}

/****************/
/***** ODDS *****/
/****************/


.odds-container {
	padding:0px !important;
}
.odds-ticker {
	color: #2a5c65;
    font-size: 12px;
    border: 1px solid #eae9e9;
    border-radius: 5px;
    padding: 0.2em 0.5em;
    font-weight: 500;
}
.filter-wrapper {
	margin: .5em auto;
}
.filter-btn {
	border: 1px solid transparent;
	border-radius: 5px;
	color: #2a5c65;
	font-size: 12px;
    font-weight: 500;
	padding: 0.2em 0.5em;
	background-color: inherit;
}
.filter-btn:hover {   
    border-color:#eae9e9;
	color: #17213e;
    font-weight: 600;
	background-color: inherit;
}

.filter-btn-active {
	color: #edeff3;
    background-color: #2eb173;
    border-color: #2eb173;
}

.bookmaker-name {
	color: #2a5c65;
    margin-left: 0.5em;
    font-weight: 500;
    font-size: 12px;
}

.highest-odds {
	border:1px solid #1a3150 !important;
}

@media only screen and (max-width: 768px) {
	
	/* TABLES */
	.table-standings th {
		font-size:9px;
	}

	.table-standings th, td {
	  padding: 0.25em !important;
	}

	.table-standings td {
		font-size:9px;
	}
	
	.table-savant th {
		font-size:9px;
	}
	.table-savant th, td{
		padding: 0.25em !important;
	}
	.table-savant td{
		font-size:9px;
	}
	
	/* Navigation */
	.savant-nav-link {
		font-size:10px !important;
		padding: 0.5em 0.5em !important;
	}
	.savant-nav-link.active {
		font-size:10px !important;
		padding: 0.5em 0.5em !important;
	}
	
	
	.savant-nav-pills {
		margin-left:0px !important;
	}
	
	/* Games list */
	.savant-league-name {
		font-size:1.2em !important;
	}
	.savant-league-logo-img {
		height: 30px !important;
		margin-right: 0.5em;
	}
	.league-info {
		margin-right: 0.5em;
	}
	.savant-dropdown-btn {
		font-size:10px !important;
	}
	.league-change {
		margin-left:auto;
	}
	
	/* STANDINGS */
	.form-character {
	  width: 12px;
	  height: 12px;
	  line-height: 12px;
	  font-size: 6px;
	  margin: 0 1px;
	}
	
	/* Buttons */
	.read-more-btn {
		width:25%;
		border-radius:6px;
	}
	
}