.sports-sidebar-wrapper {
  position: relative;
  width: 220px;
  min-width: 220px;
  background: #fff;
  font-family: Arial, sans-serif;
}


/* =========================
   RACING SPORTS TITLE
========================= */

.racing-title {
  margin: 0;
  padding: 4px 8px;
  height: 26px;

  background: #2c3e50;
  color: #fff;

  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}


/* =========================
   LIST
========================= */

.sports-list {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* =========================
   SPORT ITEM
========================= */

.sport-item {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}


/* =========================
   SPORT BUTTON
========================= */

.sport-button {
  width: 100%;
  height: 28px;

  display: flex;
  align-items: center;

  border: none;
  outline: none;

  background: transparent;

  padding: 0 10px;

  color: #111;
  font-size: 14px;

  text-align: left;

  cursor: pointer;
}


.sport-button:hover {
  background: #e9e9e9;
  color: #000;
}


/* =========================
   HORSE RACING
========================= */

.horse-racing-btn {
  height: 38px;

  background-color: #fff;
  color: #fff;

  font-weight: 600;
}


.horse-racing-btn.active {
  background: #9e4025 !important;
  color: #fff !important;
}

.horse-racing-btn.active .sport-name {
  color: #fff !important;
}


.horse-racing-btn .sport-name {
  margin-left: 5px;
}


/* =========================
   GREYHOUND
========================= */

.greyhound-item {
  background: #f8f6f8;
}


.greyhound-item .sport-button {
  height: 38px;
}


/* =========================
   ALL SPORTS TITLE
========================= */

.all-sports-title {
  margin: 0;

  height: 28px;

  display: flex;
  align-items: center;

  padding: 0 8px;

  background: #2d4357;

  color: #fff;

  font-size: 15px;
  font-weight: 700;
}


/* =========================
   ACTIVE SPORT
========================= */

.active-sport .sport-button {
  background: #3d8062;
  color: #fff;
}


/* =========================
   ICON
========================= */

.sport-icon {
  width: 25px;
  min-width: 25px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  font-size: 18px;
}


.d-icon {
  width: 25px;
  display: inline-block;
}


/* =========================
   HORSE RACING RIGHT MENU
========================= */

.horse-racing-dropdown {
  position: fixed;

  left: 220px;
  top: 95px;

  width: 245px;

  background: #242424;

  z-index: 9999;

  border-left: 6px solid #2d4357;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}


/* =========================
   DROPDOWN HEADER
========================= */

.horse-dropdown-title {
  height: 40px;

  margin: 0;

  padding: 0 10px;

  display: flex;
  align-items: center;

  background: #2d4357;

  color: #fff;

  font-size: 16px;
  font-weight: 700;
}


/* =========================
   HORSE LIST
========================= */

.horse-list-box {
  height: 410px;

  overflow-y: auto;
  overflow-x: hidden;
}


/* Chrome scrollbar */

.horse-list-box::-webkit-scrollbar {
  width: 7px;
}

.horse-list-box::-webkit-scrollbar-track {
  background: #111;
}

.horse-list-box::-webkit-scrollbar-thumb {
  background: #777;
  border-radius: 5px;
}

.horse-list-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* =========================
   RACE LINK
========================= */

.horse-race-link {
  display: block;

  color: #fff;

  text-decoration: none;
}


.horse-race-link:hover {
  color: #fff;
  text-decoration: none;
}


/* =========================
   RACE ITEM
========================= */

.horse-race-item {
  min-height: 56px;

  display: flex;
  align-items: center;

  padding: 0 8px;

  color: #fff;

  font-size: 13px;
  font-weight: 600;
}


.horse-race-item:hover {
  background: #333;
}


/* =========================
   TIME
========================= */

.race-time {
  width: 48px;
  min-width: 48px;

  font-weight: 700;
}


/* =========================
   RACE NAME
========================= */

.race-name {
  margin-left: 2px;

  font-weight: 600;
}


#sidebar-landing {
  position: relative;
}

.all-sports-box {
  max-height: 61vh;
  overflow-y: scroll;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #333 #000;
}

/* Chrome / Edge / Safari */
.all-sports-box::-webkit-scrollbar {
  width: 8px;
}

/* Scrollbar background */
.all-sports-box::-webkit-scrollbar-track {
  background: #000 !important;
  border-radius: 0;
}

/* Scrollbar moving part */
.all-sports-box::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 0;
}

/* On hover */
.all-sports-box::-webkit-scrollbar-thumb:hover {
  background: #222;
}

@media (max-width: 991px) {

  #sidebar-landing {
    display: block !important;
  }

  #sidebar {
    position: fixed !important;

    top: 45px;
    left: 0;

    width: 245px;
    height: 100vh;

    max-height: 100vh !important;

    z-index: 99999 !important;

    transform: translateX(-100%);

    transition: transform 0.3s ease-in-out;

    overflow-y: auto;

    box-shadow: none;
  }

  #sidebar.sidebar-open {
    transform: translateX(0);
  }

  .sports-sidebar-wrapper {
    width: 100%;
  }
}

@media (max-width: 428px) {

  #sidebar {
    top: 19px;
  }
}

.special-menu h5 {
  background: none;
}

.sidebar-icon{
  height: 20px !important;
}