/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/
:root {
  --site-font: "Roboto", sans-serif;
  --site-color-1: rgb(5, 40, 90);
  --site-color-2: #1666b5;
  --site-color-3: #115292;
  --site-color-4: #ffcd00;
  --site-color-5: rgb(43, 144, 255);
  --site-gray: #eaf0f6;
  --site-gray-rgb: 136, 136, 136;
  --site-white: #ffffff;
  --site-white-rgb: 255, 255, 255;
  --site-base: #0ca554;
  --site-base-rgb: 12, 165, 84;
  --site-black: #151515;
  --site-black-rgb: 21, 21, 21;
  --site-primary: #f3f3f3;
  --site-primary-rgb: 243, 243, 243;
  --site-bdr-color: #dddddd;
  --site-bdr-color-rgb: 221, 221, 221;
  --site-letter-spacing: -0.04em;
  --site-letter-spacing-two: -0.02em;
  --bs-dark-rgb: rgba(19, 22, 24, 1);
  --bs-blue-rgb: rgba(0, 0, 0, 0.9);
}

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
  font-size: 1rem;
  padding-top: 69px;
}

a {
  color: var(--site-gray);
}

a,
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}

::-moz-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--site-font);
  color: var(--site-black);
  margin: 0;
  letter-spacing: var(--site-letter-spacing);
}

p {
  margin: 0;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
}

::-moz-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bg-blue1 {
  background: var(--site-color-1) !important;
}

.bg-blue2 {
  background: var(--site-color-2) !important;
}

.bg-blue3 {
  background: var(--site-color-3) !important;
}

.bg-blue4 {
  background: var(--site-color-5) !important;
}

.bg-orange1 {
  background: var(--site-color-4) !important;
}

.bg-light-gray {
  background-color: rgb(223, 227, 238);
}

.bg-dark-ez {
  background: var(--bs-dark-rgb) !important;
}

.bg-gradient1 {
  background: rgb(222, 222, 222);
  background: linear-gradient(
    90deg,
    rgba(222, 222, 222, 1) 0%,
    rgba(241, 241, 241, 1) 35%,
    rgba(255, 255, 255, 1) 100%
  );
}

.bgModals {
  background-image: url(../images/betez-bgd-football.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgBodylogin {
  background-image: url(../images/betez-bgd-football.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgLoginBox {
  background-color: rgba(0, 0, 0, 0.4);
  color: #f7f7f7;
}

.fs-06 {
  font-size: 0.6rem;
}

.fs-7 {
  font-size: 0.7rem;
}

.fs-8 {
  font-size: 0.8rem;
}

.fs-9 {
  font-size: 0.9rem;
}

.fs-10 {
  font-size: 1rem;
}

.fs-12 {
  font-size: 1.2rem;
}

.fs-14 {
  font-size: 1.4rem;
}

.fs-16 {
  font-size: 1.6rem;
}

.fs-18 {
  font-size: 1.8rem;
}

.fs-20 {
  font-size: 2rem;
}

.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.topBar {

  background: rgb(2,65,147);
  background: linear-gradient(90deg, rgba(2,65,147,1) 0%, rgba(3,87,196,1) 35%, rgba(4,109,246,1) 100%);
  color: #fff;
  min-height: 36px;
  text-transform: uppercase;
  z-index: 3;
}

.topBar a {
  color: #f7f7f7;
}

.topBar img {
  display: inline-block;
  width: 18px;
}

.logoBar {
  top: 36px;
  z-index: 3;
}

.main_content {
  z-index: 3;
}

.owl-nav {
  display: none;
}

/* Slider Start */

.swiper {
  width: 100%;
  height: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background-image: url(../images/betez-headlines.png);
}

.swiper .swiper-slide {
  height: 600px;
  line-height: 600px;
}

/* Slider End */

/* .nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
} */

.nav-scroller {
  position: relative;
  height: 2rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding: 0.5rem;
  font-size: 0.7rem;
}

.icon-nav {
  display: inline-block;
  height: 18px;
  fill: white;
}

.nav-scroller .nav-link:hover {
  color: var(--site-color-4);
}

.nav-scroller .active {
  font-weight: 500;
  color: var(--site-color-4);
}

.leftMenu {
  display: block;
}

.leftMenu li {
  display: block;
  font-size: 14px;
  line-height: 1rem;
  margin-bottom: 1px;
  padding: 8px;
}

.leftMenu li.title {
  font-size: 16px;
}

.leftMenu li.active {
  background-color: rgba(20, 20, 20, 0.6);
  border-radius: 8px;
}

.leftMenu li.active:hover {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

.leftMenu li a {
  display: block;
  color: #f7f7f7;
}

.leftMenu li img {
  display: inline-block;
  padding-right: 2px;
  width: 26px;
}

.leftMenu .form-check {
  min-height: 1rem;
}

.promoBanners {
  display: block;
}

.promoBanners .item {
  background-color: rgba(20, 20, 20, 0.9);
  display: block;
  padding: 8px 8px 48px;
}

.teamBox {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* margin-bottom: 0.4rem; */
  padding: 8px;
}

.gameHeader {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

.gameHeader span {
  text-align: center;
  width: 33%;
}

.teamRow {
  border-radius: 8px;
  /* color: rgba(255, 255, 255, 0.8); */
  padding: 4px;
  margin-bottom: 4px;
  vertical-align: middle;
}

.teamRow:nth-child(2) {
  background-color: rgba(20, 20, 20, 0.4);
}

/*.family-games .teamRow:nth-child(even) {
  background-color: rgba(20, 20, 20, 0.4);
}*/

.teamRow .teamName {
  display: block;
  font-size: 0.875rem;
  line-height: 0.875rem;
}

.teamRow .pitcher {
  display: block;
  font-size: 10px;
  line-height: 10px;
  padding-left: 24px;
}
.teamRow .btn {
  border-color: rgb(100, 174, 255);
  color: rgb(100, 174, 255);
  font-size: 0.8rem;
  margin: 0px 2px;
  /*width: 33%;*/
}

.teamRow button.selected {
  background-color: rgb(53, 144, 255);
  border-color: rgb(247, 247, 247);
  color: rgb(247, 247, 247);
}

.sticky-slip {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 48px;
}

.pixBox {
  display: block;
  font-size: 0.8rem;
  padding-bottom: 10px;
}

.pixBox span {
  display: block;
}

.allSports {
  color: #f7f7f7;
}

.allSports li img {
  display: inline-block;
  padding-right: 2px;
  width: 26px;
}

#span-lines {
  font-size: 0.8rem !important;
}

.div-active .btn-odds,
.div-active .btn-odds:hover {
  background-color: var(--site-color-1);
  border: 1px solid var(--site-color-2);
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
}

.pick_container {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 2px;
  padding: 2px;
}

.casinoPageBgd {
  background: #03396c url("/backend/images/casino-page-bgd.jpg") no-repeat
    center top / cover;
}

.casinoLiveBgd {
  background: #ff0000 url("/backend/images/casino-live-bgd.jpg") no-repeat
    center top / cover;
}

.casinoFrame {
  animation: pulsate 1.5s infinite alternate;
  border: 0.2rem solid #fff;
  border-radius: 4rem;
  padding: 0.4em;
  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #bc13fe,
    0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe;
}

/********************* Start Captcha *********************/
#captcha input[type="text"] {
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#captcha button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

#captcha canvas {
  background: url(../images/denim.png);
  display: block;
  margin: auto;
  min-width: 260px;
  max-width: 300px;
  max-height: 100px;
  /*prevent interaction with the canvas*/
  pointer-events: none;
}
/* End Captcha */

/*/ `md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  body {
    padding-bottom: 100px;
  }

  .topBar {
    visibility: hidden !important;
  }

  .logoBar {
    top: 0px;
    z-index: 3;
  }
}

@media (max-width: 575.98px) {
  .teamRow {
    font-size: 0.8rem;
  }

  .swiper {
    margin-top: -10px;
  }

  .swiper .swiper-slide {
    height: auto;
    line-height: 200px;
  }

  .swiper .swiper-slide img {
    width: 60%;
  }
}

.hide {
  display: none !important;
}

/************************** Racebook Start **************************/

.raceTime {
  background-color: #65737e !important;
  border: 1px solid #a7adba !important;
  border-radius: 4px !important;
  color: #f7f7f7;
  padding: 4px !important;
  font-size: 0.8rem !important;
}

/* Horses Colors */
.tbred-1 {
  color: #fff;
  background: #f10;
  padding: 4px 6px;
}

.tbred-2 {
  color: #444;
  background: #fcfdfc;
  border: 1px solid #bebebe;
  padding: 4px 6px;
}

.tbred-3 {
  color: #fff;
  background: #2659c2;
  padding: 4px 6px;
}

.tbred-4 {
  color: #000;
  background: #f7eb00;
  padding: 4px 6px;
}

.tbred-5 {
  color: #fff;
  background: #00aa4f;
  padding: 4px 6px;
}

.tbred-6 {
  color: #fdf00b;
  background: #35373a;
  padding: 4px 6px;
}

.tbred-7 {
  color: #333;
  background: #f47e37;
  padding: 4px 6px;
}

.tbred-8 {
  color: #333;
  background: #f8b6c3;
  padding: 4px 6px;
}

.tbred-9 {
  color: #333;
  background: #00b5af;
  padding: 4px 6px;
}

.tbred-10 {
  color: #fff;
  background: #6510b3;
  padding: 4px 6px;
}

.tbred-11 {
  color: #cb3232;
  background: #7c8180;
  padding: 4px 6px;
}

.tbred-12 {
  color: #333;
  background: #82c341;
  padding: 4px 6px;
}

.tbred-13 {
  color: #fff;
  background: #5c2913;
  padding: 4px 6px;
}

.tbred-14 {
  color: #f7eb00;
  background: #760c30;
  padding: 4px 6px;
}

.tbred-15 {
  color: #333;
  background: #b4a87d;
  padding: 4px 6px;
}

.tbred-16 {
  color: #f60;
  background: #a0c6e9;
  padding: 4px 6px;
}

.tbred-17 {
  color: #fff;
  background: #042a51;
  padding: 4px 6px;
}

.tbred-18 {
  color: #82c341;
  background: #054637;
  padding: 4px 6px;
}

.tbred-19 {
  color: red;
  background: #0b4c86;
  padding: 4px 6px;
}

.tbred-20 {
  color: #f7eb00;
  background: #9f005b;
  padding: 4px 6px;
}

.tbred-21 {
  color: #22013f;
  background: #c7b4e2;
  padding: 4px 6px;
}

.tbred-22 {
  color: #fff;
  background: #40516f;
  padding: 4px 6px;
}

.tbred-23 {
  color: #233f04;
  background: #33aa92;
  padding: 4px 6px;
}

.tbred-24 {
  color: #fff;
  background: #466038;
  padding: 4px 6px;
}
/************************** Racebook End **************************/

/************************************ Light Styles *************************************/

[data-bs-theme="light"] {
  .bodyLight {
    background: var(--site-gray);
  }

  .logoBar,
  .grayGradient,
  footer {
    background: rgb(0,0,83);
    background: linear-gradient(90deg, rgba(0,0,83,1) 0%, rgba(25,25,119,1) 48%, rgba(28,28,132,1) 100%);
  }

  .navbar-expand-md .navbar-nav .nav-link {
    color: #f7f7f7;
  }

  .blueSite,
  .offSidebar,
  .sidebarMenu,
  .navScroll,
  .item,
  .allSports,
  .allSports li {
    background: rgb(5, 40, 90) !important;
  }

  .accordion-button {
    background: rgb(5, 40, 90) !important;
    color: #f7f7f7;
  }

  .gameHeader {
    color: rgba(255, 255, 255, 0.9);
  }

  .teamRow:nth-child(2) {
    background-color: rgba(20, 20, 20, 0.1);
  }

  /*.family-games .teamRow:nth-child(even) {
    background-color: rgba(20, 20, 20, 0.1);
  }*/

  .mobileFooter {
    display: block;
  }

  .mobileFooter a {
    color: #333;
  }

  #allSportsModal .modal-body {
    background-color: var(--site-color-1);
  }

  .allSports li {
    border-bottom: 1px solid #115292;
    font-size: 0.85rem;
  }

  .allSports .title,
  .allSports li a {
    color: #f7f7f7;
  }

  #span-lines h5.text-bg-dark,
  #span-lines h6.text-bg-dark {
    color: #202020 !important;
  }

  .div-active .btn-odds,
  .div-active .btn-odds:hover {
    background-color: #189ad3;
    border: 1px solid #71c7ec;
  }

  .raceTime {
    background-color: #65737e !important;
    border: 1px solid #a7adba !important;
    border-radius: 4px !important;
    color: #f7f7f7;
    padding: 4px !important;
    font-size: 0.8rem !important;
  }

  .calendar-icon {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust this value as needed */
    transform: translateY(-50%);
    cursor: pointer;
  }


}