html {
  background-color: #2c323a;
}

body {
  background: #2c323a;
  color: #9caaa5;
  margin-top: 5rem;
}

.bg-steel {
  /* Top horizontal main bar */
  background-color: #1a212a;
}

#leftbox {
  float:left;
  background:transparent;
  width:20%;
  height:280px;
}

#middlebox{
  float:left;
  background:transparent;
  width:60%;
  height:280px;
  padding-left:20px;
  padding-right:20px;
}

#rightbox{
  float:right;
  background:transparent;
  width:20%;
  height:280px;
}

@media (max-width: 768px) {

  #leftbox,
  #middlebox {
    width: 100%;
    height: 100%;
    float: none;
  }

  #rightbox {
    display: none;
  }
}

.fixed-width-td {
  width: 150px;
  }

td div, th div, td, th, select {
  color: white;
}

/* Define your desired background colors */
.table-striped tbody tr:nth-child(odd), .table-striped tbody tr:nth-child(odd) select {
  /* Target odd table rows and the select element within it */
  background-color: #1a212a; /* Slightly darker background for even rows */
}

.table-striped tbody tr:nth-child(even), .table-striped tbody tr:nth-child(even) select {
  /* Target even table rows and the select element within it */
  background-color: #2c323a; /* Light gray background for odd rows */
}

a, a:link, a:visited {
  color: #9caaa5;
  background-color: transparent;
}

a:hover {
  color: white;
}

.site-header {
    background-color: #1a212a;
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
}

main {
    padding-top: 60px;
}

.site-header .navbar-brand{
  /* Edit the 'odds' from the 'oddsEV' logo */
  color: #9caaa5;
  font-weight: bold;
  border-radius: 4px; /* Optional border radius for rounded corners */
  padding-left: 5px
}

.site-header .navbar-brand span{
  /* Edit the 'EV' from the 'oddsEV' logo */
  color: white;
  border: solid 1px #9caaa5;
  padding: 5px; /* Optional padding for the "EV" */
  margin-left: 2px; /* Optional padding for the "EV" */
  padding-right: 5px; /* Optional padding for the "EV" */
  border-radius: 8px; /* Optional border radius for rounded corners */
}

.site-header .navbar-nav .nav-link {
  /* Edit links in the top main horizontal bar */
  color: #9caaa5!important;
  border-radius: 5px; /* corner radius */
}

.site-header .navbar-nav .nav-link:hover {
  /* Edit links in the top main horizontal bar when hoverred*/
  color: white!important;
  border: solid 1px #50C878;
}

.site-header .navbar-nav .dropdown-menu.show {
  /* Edit the showed dropdown menu - Value Bets menu */
  background-color: #1a212a !important;
  color: #9caaa5 !important;
}

.card {
  margin:4px;
  padding:4px;
  background-color: #1a212a;
}

.card-title {
  color: white;
}

.text-muted {
  /* Used in register, logout templates */
  color: #9caaa5!important;
}

.form-control{
  /* All inputs (including result inputs) to the calculators */
  padding: 2px;
  background-color: #1a212a;
  border-color: #9caaa5;
  color: #9caaa5;
}

/* Override default input styles */
.form-control:focus {
  background-color: #2c323a; 
  border-color: white;     
  box-shadow: none;          /* Remove any box shadow */
  color: white;            
  outline: none;             /* Remove the outline on focus */
}

span.align-right {
    float: right;
}

.btn-primary {
  background-color: #1a212a;
  border-color: #9caaa5;
  color: #9caaa5;
}

.btn-primary-white {
  background-color: #1a212a;
  border-color: #9caaa5;
  color: white;
}

.btn-primary:hover, .btn-primary-white:hover {
  background-color: #2c323a;
  border-color: #50C878;
  color: white;
}

.btn-secondary {
  background-color: transparent;
  border-color: transparent;
  color: #9caaa5;
}

.btn-light {
  background-color: transparent;
  border-color: transparent;
  color: #9caaa5;
  padding: 0px;
  margin: 0px;
  margin-left: 7px;
}

.btn-secondary:hover, .btn-secondary.active {
  background-color: transparent;
  border-color: #50C878;
  color: white;
}

.btn-light:hover {
  background-color: transparent;
  border-color: transparent;
  color: white;
}

.chevron {
  color: #9caaa5;
}

.chevron:hover {
  color: white;
}

ul {
  margin: 0;
}

.content-section {
  /* Login template */
  background: #1a212a;
  padding: 10px 20px;
  border: 1px solid #9caaa5;
  border-radius: 4px;
  margin-bottom: 20px;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.alert {
  background-color:#1a212a;
  border-color:#50C878;
  color:white;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* Ensure it's on top of other content */
}

/* Style for the checkboxes */
input[type="checkbox"] {
  accent-color: #1a212a; /* Background color when checked */
}

.logo-img {
  height: 40px;          /* default size */
  width: auto;
  object-fit: contain;
}

/* when screen is smaller */
@media (max-width: 768px) {
  .logo-img {
    height: 32px;        /* smaller size */
  }
}

@media (max-width: 480px) {
  .logo-img {
    height: 26px;        /* very small screens */
  }
}