.dial-container {
  margin: 10px auto;
  /* width: 720px; */
  overflow: hidden;
  /* background: #191919; */
  opacity: 0;
  transition: opacity 1s linear;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loaded {
  opacity: 1;
}
.dial-wrap {
  width: 33.33%;
  float: left;
  text-align: center;
  position: relative;
}
.dial-wrap > div {
  display: block;
}

.dial-text {
  display: block;
  position: relative;
  top: -99px;
  padding-bottom: -100px;
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Press Start 2P", sans-serif !important;
}

@media (min-width: 750px) {
  .dial-container {
    width: 720px;
  }
}

@media (max-width: 700px) {
  .dial-container {
    width: 100%;
    display: block;
  }

  .dial-wrap {
    width: 100%;
  }
}

@keyframes glow {
  from {
    /* box-shadow: 0 0 2px -5px #aff1b0; */
    box-shadow: 0 0 2px -5px rgba(235, 248, 236, 0.5);
  }
  to {
    box-shadow: 0 0 2px 5px rgba(212, 240, 214, 0.2);
  }
}

@keyframes clockwiseSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes antiClockwiseSpin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* #logo-space {
     animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: clockwiseSpin;
  animation-timing-function: linear; 
} */

.dot-2 {
  height: 12px;
  width: 12px;
  background-color: rgb(0, 0, 0);
  box-shadow: inset 0 0 50px rgb(155, 110, 0), inset 20px 0 80px rgb(87, 87, 87),
    inset -20px 0 80px rgb(217, 255, 0), inset 20px 0 300px rgb(0, 0, 0),
    inset -20px 0 300px rgb(217, 255, 0), 0 0 50px #fff, -10px 0 80px rgb(0, 0, 0),
    10px 0 80px rgb(217, 255, 0);
  border-radius: 50%;
  display: inline;
  margin-top: 5px;
  float: left;
  animation: glow 1s infinite alternate;
}

.dot {
  height: 12px;
  width: 12px;
  background-color: rgb(0, 255, 13);
  box-shadow: inset 0 0 50px rgb(70, 218, 2), inset 20px 0 80px rgb(125, 185, 97),
    inset -20px 0 80px #0ff, inset 20px 0 300px rgb(138, 235, 93), inset -20px 0 300px #0ff,
    0 0 50px #fff, -10px 0 80px rgb(70, 218, 2), 10px 0 80px #0ff;
  border-radius: 50%;
  display: inline;
  margin-top: 5px;
  float: left;
  animation: glow 1s infinite alternate;
}

#wallet-connection-heading {
  top: 5;
  position: relative;
  float: left !important;
  /* border: 1px solid red; */
  margin-right: 7px;
  font-size: 14px;
  font-weight: 200;
}

.icon-custom {
  color: #e92b2b;
  font-size: 24px;
}

#daily-rate,
#daily-compound,
#ref-bonus,
#lotteries {
  margin: 0px 5px;
  /* font-size: 2vmin; */
  font-weight: 200;
  font-family: "Kanit" !important;
}

.start-btn {
  text-align: center;
  display: inline-block;
  /* margin-top: 30px!important; */
  /* margin: 4px; */
  /* font-family: "Press Start 2p"; */
  font-weight: 300;
  font-size: 1rem;
  padding: 10px;
  background-color: var(--token);
  /* text-shadow: -1px -1px black, 1px 1px rgb(61, 61, 61); */
  color: rgb(255, 255, 255);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  box-shadow: 0 0.2em #fff;
  cursor: pointer;
  border: none;
  padding-top: 14px;
}
.start-btn:hover {
  text-align: center;
  display: inline-block;
  /* margin-top: 30px!important; */
  /* margin: 4px; */
  /* font-family: "Press Start 2p"; */
  font-weight: 300;
  font-size: 1rem;
  padding: 10px;
  background-color: #7c652b;
  /* text-shadow: -1px -1px black, 1px 1px rgb(61, 61, 61); */
  color: rgb(255, 255, 255);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  box-shadow: 0 0.2em #000000;
  cursor: pointer;
  border: none;
  padding-top: 14px;
}

.start-btn2 {
  text-align: center;
  display: inline-block;
  margin-top: 50px !important;
  margin: auto;
  font-weight: 300;
  font-size: 1.2rem;
  padding: 10px;
  background-color: #e92b2b00;
  text-shadow: -1px -1px black, 1px 1px rgb(61 61 61);
  color: #000000;
  border-radius: 7px;
  cursor: pointer;
  padding-top: 14px;
  width: 100%;
  box-shadow: 10px 20px 30px #070707;
  border: 2px solid #e92b2b;
}
.start-btn2:hover {
  box-shadow: inset 1px 1px 20px #ffc83b, 1px 2px 20px #ffc637;
  
}

hr {
  color: var(--lines);
  height: 1px;
  opacity: 1;
}

.start-btn:active {
  box-shadow: none;
  position: relative;
  top: 0.2em;
}

@media only screen and (max-width: 600px) {
  .start-btn {
    font-size: 12px !important;
  }
}
.justify-content-center {
  justify-content: space-around !important;
}
.maintext {
  color: #b9b8b8;
  font-size: 50px;
}
/* Style The Dropdown Button */
.dropbtn {
  background-color: transparent;
  color: white;
  padding-top: 3px;
  padding-left: 9px;
  font-weight: 800;
  border: none;
  font-size: 12px;
  display: flex;
  margin: auto;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  /* display: inline-block; */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000000cc;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  font-weight: 600;
  border-radius: 14px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 11px;
  border-radius: 14px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #212429e3;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: transparent;
}