*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0px;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  background-color: #E6E6E6;
}

/* Style for header */
.header {
  overflow: hidden;
  background-color: #237CC7;
}

.header h1 {
  font-size: 11px;
  color: #fff;
  display: flex;
  flex-flow: row;
  align-items: left;
  font-weight: normal;
  margin: 0 10px;
  padding: 7px 0;
}

.top-banner {
  background-color: #237CC7;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #003E71;
  border-radius: 0px;
  overflow: hidden;
  margin-top: 0px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  text-transform: none;
  font-weight: 600;
  font-size: 14px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #002748;
  color: white;
}

/* Add an active class to highlight the current page */
.topnav a.logo {
  background-color: #003E71;
  color: white;
  font-family: 'Kefa',Times,serif;
  font-weight: normal;
  font-size: 20px;
  text-transform: none;
  padding-top: 11px;
  padding-right: 28px;
  padding-bottom: 11px;
  padding-left: 18px;
}

.topnav a.active {
  color: #01d099;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.topnav .twitter-follow-button {
  display: none;
}

@media screen and (max-width: 768px) {
  .topnav .twitter-follow-button {
    display: block;
    float: left;
    margin-top: 13px;
  }
}

/* When the screen is less than 768 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 480px) {
  .topnav a:not(:nth-child(-n+2)) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (min-width: 480px) and (max-width: 600px) {
  .topnav a:not(:nth-child(-n+3)) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (min-width: 600px) and (max-width: 680px) {
  .topnav a:not(:nth-child(-n+4)) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (min-width: 680px) and (max-width: 768px) {
  .topnav a:not(:nth-child(-n+5)) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (min-width: 768px) and (max-width: 960px) {
  .topnav a:not(:nth-child(-n+6)) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 960px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border-bottom: 1px solid #002748;
  }
  .topnav.responsive .twitter-follow-button {
    display: none;
  }
}

.menu_livescore {
  background-color: transparent;
  border-radius: 0px;
  overflow: hidden;
  width: 100%;
  padding: 0px;
  margin-top: 1px;
  border: 0px;
  border-style: none;
  text-align: center;
}

#tabs-home-container {
    display: flex;
    justify-content: center;
    margin: 5px 0px 5px 0px;
}

.tab-home {
    background-color: #fff;
    color: #000;
    padding: 8px 10px;
    margin: 0 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
}

.tab-home:hover {
    background-color: #003E71;
    color: #fff;
}

.tab-home.active {
    background-color: #00a570;
    color: #fff;
}

.button {
  background-color: #fff;
  color: #000;
  padding: 8px 10px;
  margin: 0 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: bold;
  text-transform: none;
  font-size: 13px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.button:hover {
  background-color: #003E71;
  color: #fff;
}

.button.active {
  background-color: #00a570;
  color: #fff;
}

@media screen and (min-width: 980px) {
  .iframe {
    margin-top: -45px; /* Margin top for the iframe header */
  }
}

@media screen and (min-width: 880px) and (max-width: 980px) {
  .iframe {
    margin-top: -45px; /* Margin top for the iframe header */
  }
}

@media screen and (min-width: 830px) and (max-width: 880px) {
  .iframe {
    margin-top: -70px; /* Margin top for the iframe header */
  }
}

@media screen and (min-width: 768px) and (max-width: 830px) {
  .iframe {
    margin-top: -76px; /* Margin top for the iframe header */
  }
}

@media screen and (max-width: 768px) {
  .iframe {
    margin-top: -76px; /* Margin top for the iframe header */
  }
}

h2 {
  color: #004080;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  text-transform: none;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

p {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: left;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.wrapper {
  max-width: 980px;
  margin: 0 auto; /* Center the wrapper */
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 1fr; /* Default to a single column on small screens */
}

@media screen and (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 3.9fr; /* Two columns for larger screens */
  }

  .sidebar {
    width: 100%; /* Sidebar takes full width for smaller screens */
  }

  .content {
    width: 100%; /* Content takes full width for smaller screens */
  }

  .header, .footer, .top-banner, .menu {
    grid-column: 1 / -1; /* Ensure these elements span across both columns */
  }
}

@media screen and (min-width: 680px) and (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 3.2fr; /* Two columns for medium-sized screens */
  }

  .sidebar {
    width: 100%; /* Sidebar takes full width on small screens */
    min-width: 160px; /* Ensure the sidebar has a minimum width of 160px */
    /* width: 164px; /* If you want the sidebar to be a fixed 160px width for small screens (and not stretch) */
  }

  .content {
    width: 100%; /* Content takes full width */
  }

  .header, .footer, .top-banner, .menu {
    grid-column: 1 / -1; /* Ensure these elements span across both columns */
  }
}

.wrapper > * {
  background-color: #237CC7;
  color: #fff;
  border-radius: 0px;
  padding: 0px;
  font-size: 12px;
  /* needed for the floated layout*/
  margin-bottom: 0px;
}

.sidebar {
  background-color: #B1B3BD;
  text-align: center;
}

.content {
  background-color: #E6E6E6;
  text-align: center;
}

/* Style for Unit-1 */
.unit-1 {
  background-color: #237CC7; /* Set the background color for the banner */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .unit-1 {
    height: 60px;
  }
}

@media screen and (min-width: 768px) {
  .unit-1 {
    height: 90px;
  }
}

/* Hide ad when in portrait mode */
@media screen and (orientation: portrait) {
  .unit-2, .unit-3 {
    display: none;
  }
}

/* Optionally, show the ad again when in landscape mode */
@media screen and (orientation: landscape) {
  .unit-2, .unit-3 {
    display: block; /* or inline-block depending on your layout */
  }
}

/* Style for Unit-2 */
@media screen and (min-width: 680px) {
     .unit-2 {
        margin-top: 10px;
        margin-bottom: 10px;
        min-height: 600px;
     }
}

/* Style for Unit-3 */
@media screen and (min-width: 680px) {
     .unit-3 {
        margin-top: 20px;
        margin-bottom: 10px;
     }
}

#Unit-3 {
    position: -webkit-sticky;
    position: sticky;
    left: 17;
    top: 0;
}

/* Style for Unit-4 */
.unit-4 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px;
}

/* Style for Unit-5 */
#Unit-5 {
left: 0;
position: -webkit-sticky;
position: sticky;
text-align: center;
bottom: 0px;
width: 100%;
z-index: 999;
}

.links {
  color: black;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
  padding-left: 10px;
}

.links a {
  background-color: transparent; /* Background color */
  color: black; /* Link color */
  text-decoration: none; /* Remove underline from links */
  font-weight: bold;
}

.links a:hover {
  background-color: transparent; /* Background on mouse-over */
  color: red; /* Red color on mouse-over */
  text-decoration: underline;
  font-weight: bold;
}

.dot_links {
  height: 4px;
  width: 4px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 2px;
  margin-left: 0px;
  margin-right: 5px;
}

.footer_links {
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0px;
  margin-bottom: 0px;
}

.footer_links a {
  background-color: transparent; /* Background color */
  color: white; /* link color */
  display: inline-block; /* Make the links appear inline */
  padding: 5px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.footer_links a:hover {
  background-color: transparent; /* Background on mouse-over */
  color: yellow; /* Yellow color on mouse-over */
  text-decoration: none; 
}

.footer_links a.active {
  background-color: transparent;
  color: #aaa; /* Add a grey color to the "active/current" link */
  font-weight: bold;
}

.dot {
  height: 3px;
  width: 3px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 3px;
}

.stats {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

.copyright {
  margin: 2em 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
}

.follow-us-title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.follow-us {
  min-width: 300px;
  text-align: center;
  text-decoration: none;  
}

.follow-us a {
  color: white;
  text-decoration: none;
}

.follow-us a:visited {
  color: white;
  text-decoration: none;
}

.follow-us a:hover {
  color: white;
  text-decoration: none;
}

.fab {
  padding: 10px;
  font-size: 25px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fab:hover {
  opacity: 0.7;
  color: white;
  text-decoration: none;
}

.fa-external-link-square-alt {
  background: #26c54d;
  color: white;
}

.fa-link {
  background: #26c54d;
  color: white;
}

.fa-facebook-f {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

/* Style for iframe */
#iframe {
  width: 100%;
  height: 2000px;
  padding: 0px;
  margin: 0px;
  border: 0px;
  border-style: none;
  text-align: center;
}
  
    /* COMPACT CAPTCHA */

.capbox {
	background-color: #BBBBBB;
	background-image: linear-gradient(#BBBBBB, #9E9E9E);
	border: #2A7D05 0px solid;
	border-width: 2px 2px 2px 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: inline-block;
	padding: 5px 8px 5px 8px;
	border-radius: 4px 4px 4px 4px;
	}

.capbox-inner {
	font: bold 12px arial, sans-serif;
	color: #000000;
	background-color: #E3E3E3;
	margin: 0px auto 0px auto;
	padding: 3px 10px 5px 10px;
	border-radius: 4px;
	display: inline-block;
	vertical-align: middle;
	}

#CaptchaDiv {
	color: #000000;
	font: normal 25px Impact, Charcoal, arial, sans-serif;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
	background-color: #FFFFFF;
	user-select: none;
	display: inline-block;
	padding: 3px 14px 3px 8px;
	margin-right: 4px;
	border-radius: 4px;
	}

#CaptchaInput {
	border: #38B000 2px solid;
	margin: 3px 0px 1px 0px;
	width: 105px;
	}