@font-face {
  font-family: roboto_bold;
  src: url('../../../../../assets/font/roboto/Roboto-Bold.ttf') format("truetype");
  font-style: normal;
}

@font-face {
  font-family: roboto_medium;
  src: url('../../../../../assets/font/roboto/Roboto-Medium.ttf') format("truetype");
  font-style: normal;
}

@font-face {
  font-family: roboto_bc;
  src: url('../../../../../assets/font/roboto/Roboto-BoldCondensed.ttf') format("truetype");
  font-style: normal;
}

@font-face {
  font-family: roboto_black;
  src: url('../../../../../assets/font/roboto/Roboto-Black.ttf') format("truetype");
  font-style: normal;
}

@font-face {
  font-family: roboto_regular;
  src: url('../../../../../assets/font/roboto/Roboto-Regular.ttf') format("truetype");
  font-style: normal;
}

@font-face {
  font-family: opersans_regular;
  src: url('../../../../../assets/font/opensans/OpenSans-Regular.ttf') format("truetype");
  font-style: normal;
}

@font-face {
  font-family: opersans_bold;
  src: url('../../../../../assets/font/opensans/OpenSans-Bold.ttf') format("truetype");
  font-style: normal;
}

/* ############################## Begin Font Family ############################## */
.font_roboto_bold {
  font-family: roboto_bold;
}

.font_roboto_medium {
  font-family: roboto_medium;
}

.font_roboto_bc {
  font-family: roboto_bc;
}

.font_roboto_black {
  font-family: roboto_black;
}

.font_roboto_regular {
  font-family: roboto_regular;
}

.font_opersans_regular {
  font-family: opersans_regular;
}

.font_opersans_bold {
  font-family: opersans_bold;
}
/* ############################## End Font Family ############################## */

/* ############################## Begin General CSS ############################## */
body,
html {
  background-color: #FDC210;
  font-family: opersans_regular;
  font-size: 14px;
  font-style: normal;
  color: white;
  background: linear-gradient(to bottom, #FDC210 0%, #c1940d 80%, #674f06 100%) !important;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: #FDC210;
}
/* ############################## End General CSS ############################## */

/* ############################## Begin Pagination ############################## */
.list-wrapper,
.list-wrapper-md {
  padding: 0;
  overflow: hidden;
}

.simple-pagination ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  text-align: center;
}

.simple-pagination li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
}

.simple-pagination li a,
.simple-pagination li span {
  color: #666;
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #EBEBEB;
  background-color: #FFF;
  box-shadow: 0px 0px 10px 0px #EEE;
}

.simple-pagination .current {
  color: #365a97;
  /*background-color: #365a97;*/
  background-color: none;
  border-color: #365a97;
}

.simple-pagination .prev.current,
.simple-pagination .next.current {
  background: #EBEBEB;
}

/* ############################## End Pagination ############################## */

/* ############################## Begin Dropdowm ############################## */
.min_max_height {
  min-height: 56.5px;
  max-height: 56.5px;
}

.dropbtn {
  background: transparent;
  border: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  background-color: #1f1f1f;
  display: none;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  padding: 10px 20px;
  text-decoration: none;
  display: block;
  top: 23px;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/* ############################## End Dropdowm ############################## */

/* ############################## Begin 4exch CSS ############################## */
.bg-theme {
  background-color: #FDC210;
  background: #FDC210;
}

.bg-content {
  background: linear-gradient(to bottom, #FDC210 0%, #c1940d 80%, #674f06 100%) !important;
}

.bg_sportsbook {
  background-image: url(../../../web/assets/img/sport_content/bg_sport.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.text-theme {
  color: #FDC210;
}

.btn-category {
  -webkit-transition: 0.5s;
  transition: color 1s ease-out;
}

.btn-category:hover {
  color: #000;
  font-weight: bold;
}

.btn-play:hover {
  color: black;
  font-weight: bold;
  background-image: linear-gradient(#ffe39e, #7c5c0d);
}

.btn-play {
  text-transform: uppercase;
  color: #fff;
  width: 120px;
  height: 40px;
  background-color: #000;
  line-height: 32px;
  margin: 3px auto;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
  margin-top: -60px;
  border: 2px solid;
  border-image-slice: 1;
  border-width: 2px;
  border-image-source: linear-gradient(to bottom, #ffe39e, #7c5c0d);
}
.btn-sport-play:hover {
  background: linear-gradient(#ffe39e, #7c5c0d);
  font-weight: bold;
  color: #000;
}

.btn-sport-play {
  text-transform: uppercase;
  bottom: -3rem;
  left: 0;
  right: 0;
  background: black;
  padding: 0.625rem 1rem;
  border: 1px solid gold;
  border-radius: 50rem;
}


.roulette-top-left,.roulette-bottom-left,.roulette-top-right,.roulette-bottom-right {
  position: absolute;
}
.roulette-top-left {
  top: 12.5rem;
  left: 9rem;
}

.roulette-bottom-left {
  bottom: 16rem;
  left: 9rem;
}

.roulette-top-right {
  top: 12.5rem;
  right: 9rem;
}
.roulette-bottom-right {
  bottom: 16rem;
  right: 9rem;
}

/*
.home-roulette {
  background: url(../../../web/assets/img/feature_roulette.png) 0 0 no-repeat;
  background-size: 100% 100%;
  width: 1320px;
  height: 789px;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
}

.home-roulette .column {
  float: left;
  width: 50%;
  padding: 150px;
}

.home-roulette .roulette-top {
  padding: 35px 0 0;
}

.home-roulette .roulette-bottom {
  padding: 225px 0 0;
}
*/

.layui-layer {
  background-color: #000 !important;
}

.layui-layer-title {
  background-color: #000 !important;
  color: #FFF !important;
}

.layui-layer-btn .layui-layer-btn0 {
  border-color: gold !important;
  background-color: #FDC210 !important;
  color: #000 !important;
}

@media (max-width: 1399px) {
  .roulette-top-left {
    top: 11rem;
    left: 8rem;
  }
  
  .roulette-bottom-left {
    bottom: 13rem;
    left: 8rem;
  }
  
  .roulette-top-right {
    top: 11rem;
    right: 8rem;
  }
  .roulette-bottom-right {
    bottom: 13rem;
    right: 8rem;
  }
}
@media (max-width: 1399px) {
  .roulette-top-left {
    top: 8.5rem;
    left: 7rem;
  }
  
  .roulette-bottom-left {
    bottom: 10.5rem;
    left: 7rem;
  }
  
  .roulette-top-right {
    top: 8.5rem;
    right: 7rem;
  }
  .roulette-bottom-right {
    bottom: 10.5rem;
    right: 7rem;
  }
}

.bg-1st-header {
  background: linear-gradient(to bottom, #FDC210 0%, #c1940d 50%, #513e06 100%);
}
/* ############################## End 4exch CSS ############################## */