/* ===== FONTS ===== */
@font-face {
  font-family: 'LatoWeb';
  font-display: swap;
  src: url(/dsuown9evwz4y.cloudfront.net/Fonts/Lato-Regular.woff2) format('woff2'), url(/dsuown9evwz4y.cloudfront.net/Fonts/Lato-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'gilroybold';
  font-display: swap;
  src: url(/dsuown9evwz4y.cloudfront.net/Fonts/Gilroy-Bold.woff2) format('woff2'), url(/dsuown9evwz4y.cloudfront.net/Fonts/Gilroy-Bold.woff) format('woff');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'Open24DisplaySt';
  font-display: swap;
  src: url(/dsuown9evwz4y.cloudfront.net/Fonts/Open24DisplaySt.woff2) format('woff2');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'Glyphicons Halflings';
  font-display: swap;
  src: url(/dsuown9evwz4y.cloudfront.net/Fonts/glyphicons-halflings-regular.woff) format('woff')
}

/* ===== BASE ===== */
body {
  font-family: 'LatoWeb';
  font-size: 14px
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit
}

.home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
  font-family: 'gilroybold'
}

.home-progressive-jackpot .jackpot-container {
  font-family: 'Open24DisplaySt'
}

.announcement-outer-container {
  font-family: 'latobold'
}

.glyphicon {
  font-family: 'Glyphicons Halflings'
}

/* ===== THEME ===== */
.site-header {
  background: linear-gradient(to bottom, #078d00 0, #000000cc 70%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .1)
}

.login-panel .register-button {
  background: #11d925;
  background: linear-gradient(to left, #000000%, #0da80a 70%)
}

.site-footer a {
  flex-basis: calc((100% - 15px * 6) / 5);
  color: #676767;
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
  background-color: inherit
}

.register-modal .modal-body,
.forgot-password-modal .modal-body {
  background: linear-gradient(to left, #237f0f 0, #000000b0 100%);
  color: #ffffff
}

.modal-header {
  background-color: #0a4c31;
  background-image: linear-gradient(to bottom, #03cc00 0, #029900 100%);
  text-align: center;
  border: 1px solid #000000;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  min-height: 50px;
  text-transform: uppercase
}

.modal-body {
  background: #0000009c;
  color: #9bdb1a
}

.modal-footer {
  background: linear-gradient(to top, #03cc00 0, #029900 100%);
  color: #fff;
  border: 1px solid #000000
}

p {
  color: #ffffff;
  font-family: verdana;
  font-size: 14px
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: verdana;
  color: white;
  font-size: 14px
}

.site-description h1,
.site-description h2,
.site-description h3,
.site-description p,
.site-description a,
.site-description div {
  color: #fff;
  font-family: verdana
}

.footer-container {
  color: #ffffff;
  font-family: verdana;
  font-size: 14px
}

.top-menu > li > a {
  text-decoration: none;
  display: block;
  padding: 20px 0;
  width: 100%;
  text-align: center;
  color: inherit;
  text-transform: inherit;
  font-size: 12px
}

a {
  color: #9bdb1a;
  text-decoration: none
}

/* ===== CSS VARIABLES ===== */
:root {
  --border-col: #00f8ec;
  --base-col: #FFFFFF;
  --btn-col: #000000;
  --base-mid-col: #000000;
  --base-side-col: #00f8ec
}

a {
  color: #00ff00;
  text-decoration: none
}

/* ===== SOSMED BAR ===== */
.ard-sosmed-bar {
  display: flex;
  gap: 5px;
  background-color: transparent;
  width: auto;
  height: auto;
  bottom: 15%;
  left: 0;
  position: fixed;
  z-index: 125;
  transition: all .7s ease;
  font-family: "Raleway", sans-serif;
  font-size: 20px !important
}

.ard-sosmed-bar.closed {
  transform: translate(-77%, 0);
  opacity: .8
}

.ard-sosmed-bar.closed:hover {
  opacity: .85
}

.ard-sosmed-bar.open {
  transform: translate(0, 0)
}

.ard-sosmed-bar .left {
  display: flex;
  flex-direction: column;
  background-color: #257b00;
  border: 2px solid #33ff00;
  z-index: 98;
  width: 135px;
  border-radius: 15px;
  padding: 5px;
  align-items: center;
  justify-items: center;
  gap: 10px
}

.left div {
  width: 75%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-col);
  border-radius: 10px;
  padding: 5px
}

.headlogo {
  width: 80%
}

.left div a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: large;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.ard-sosmed-bar .right {
  display: flex;
  flex-direction: row;
  background: radial-gradient(circle, #009f2a 0, var(--base-mid-col) 100%);
  width: 40px;
  padding: 10px 0 10px 0;
  z-index: 99;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.promotion-info {
  color: #fff;
  background: #0e0e0e
}

.ard-sosmed-bar .right span:first-child {
  width: 100%;
  opacity: 1
}

.ard-sosmed-bar .right span:last-child {
  width: 0;
  opacity: 0
}

.ard-sosmed-bar a,
.ard-sosmed-bar span {
  text-align: center;
  color: #ca9b18;
  -webkit-text-stroke: 1px black;
  user-select: none
}

.ard-sosmed-bar .right span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #ffffff;
  transition: all .4s ease;
  display: flex;
  align-items: center
}

.ard-sosmed-bar .left div a img {
  height: 100%;
  overflow: hidden !important
}

.bar-footer {
  font-size: medium
}

.ard-sosmed-bar.closed.ardhide {
  transform: translate(-75.5%, 0)
}

@media screen and (max-width: 600px) {
  .ard-sosmed-bar {
    scale: .7
  }

  .ard-sosmed-bar.closed {
    transform: translate(-98.5%, 0)
  }

  .ard-sosmed-bar.open {
    transform: translate(-21%, 0)
  }
}

/* ===== LC BUTTON ===== */
@media only screen and (min-width: 601px) {
  .LcButton {
    display: none
  }
}

@media only screen and (max-width: 600px) {
  .LcButton {
    position: fixed;
    bottom: 55px;
    right: 14px;
    z-index: 100;
    width: 50px;
    height: 66px
  }
}