/* farms CSS */

.farms-single-section {
  padding: 18px;
  border-radius: 15px;
  margin-bottom: 30px;
}

.coin-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.coin-desc-left img {
  max-width: 60px;
  width: 100%;
}

.coin-desc-right h4 {
  color: greenyellow;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
}

.coin-desc-right ul {
  margin-top: 14px;
}

.dropdown a {
  text-transform: capitalize;
}

.coin-desc-right ul li {
  display: inline-block !important;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  color: #fff;
}

.bd {
  border: 2px solid greenyellow;
  border-radius: 15px;
  padding: 2px 6px;
}

.bg {
  background: #2ea07b;
  padding: 3px 11px;
  border-radius: 9px;
  margin-left: 14px;
  cursor: pointer;
}

.bg:active {
  background-image: linear-gradient(to bottom, greenyellow, greenyellow);
}

.calculat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: #f69c3d;
  margin-top: 15px;
}

.unlocks h3 {
  font-size: 12px;
  font-weight: 400;
  font-family: "Kanit", sans-serif;
  margin-top: 10px;
  color: #fff;
}

.calculat-left h6 {
  font-size: 16px;
  font-weight: 400;
  font-family: "Kanit", sans-serif;
}

.calculat-left p {
  font-size: 12px;
  font-weight: 400;
  font-family: "Kanit", sans-serif;
  margin-top: 13px;
  margin-bottom: 1px;
}

.calculat-right h6 {
  font-size: 16px;
  font-weight: 600;
  font-family: "Kanit", sans-serif;
  margin-left: 4px;
}

.calculat-right h6 i {
  margin-right: 5px;
  color: #1fc7d4;
  cursor: pointer;
}

.harvest {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: rgb(255, 255, 255);
}

.harvest h2 {
  font-family: "Kanit", sans-serif;
  font-size: 20px;
  margin-top: 10px;
  color: white;
}

.unlocks h2 {
  font-family: "Kanit", sans-serif;
  font-size: 20px;
  margin-top: 10px;
  color: white;
}

.harvest span {
  font-size: 16px;
  background-color: greenyellow;
  border-radius: 15px;
  padding: 10px 15px 10px 15px;
  color: rgb(0, 0, 0);
  height: 42px;
  cursor: pointer;
}

.harvest:hover span {
  background-image: linear-gradient(to bottom, #32868d, #56b5bd);
}

.unlocks a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0px none;
  border-radius: 16px;
  box-shadow: rgba(14, 14, 44, 0.4) 0px -1px 0px 0px inset;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  outline: currentcolor none 0px;
  -webkit-transition: background-color 0.2s ease 0s;
  transition: background-color 0.2s ease 0s;
  height: 48px;
  padding: 0px 24px;
  background-color: greenyellow;
  color: rgb(0, 0, 0);
  margin-bottom: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}

.farm-desc {
  text-align: center;
  padding-top: 0px;
}

.calculat-right {
  text-align: right;
}

.farm-desc {
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 16px;
  font-family: "Kanit", sans-serif;
  margin-top: 10px;
  display: block;
  border-top: 3px solid #ffffffc9;
  padding-top: 10px;
}

a:hover {
  text-decoration: none;
}

.token-title {
  text-align: center;
  margin: 36px 0;
}

.token-title h1 {
  display: inline-block;
  text-align: right;
  color: greenyellow;
  font-size: 32px;
  font-weight: 600;
}

.token-name h4 {
  font-family: Kanit, sans-serif;
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 14px;
}

#dark,
#dark header {
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  background-color: #fff;
}

.token-img img {
  max-width: 60px;
  width: 100%;
}

.token-title h2 {
  font-family: Kanit, sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 65px;
  line-height: 1.1;
  margin-bottom: 14px;
  margin-top: 60px;
}

.footer-are {
  overflow: hidden;
  padding-top: 65px;
  padding-bottom: 10px;
}

.footer-menu ul li {
  display: inline-block;
}

.footer-menu {
  text-align: right;
}

.footer-menu ul li a {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: #fff;
  text-align: center;
  line-height: 32px;
  color: greenyellow;
  font-size: 17px;
  text-decoration: none !important;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-left: 11px;
}

.footer-menu ul li a:hover {
  background: #1fc7d4;
  color: #fff;
}

.footer-text {
  font-size: 13px;
  line-height: 15px;
  color: greenyellow;
  padding: 10px 0 14px;
}

.bodar {
  border-top: 1px solid #ffffff70;
  padding-top: 14px;
}

.activs {
  color: greenyellow !important;
}

#headerMenu ul li a {
  outline: 0;
  font-weight: 600;
}

@media (min-width: 350px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto;
    padding: 10px;
  }
  #scrollable {
    height: 250px;
  }
}

@media (min-width: 1024px) {
  .grid-container {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
  }
  #scrollable {
    height: 300px;
  }
}

@media all and (max-width: 767px) {
  .extras {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .footer-text {
    text-align: center !important;
    margin-top: 10px;
  }
  .bodar {
    display: none;
  }
  .footer-menu {
    text-align: center !important;
    border-top: 1px solid #fff;
    padding-top: 27px;
  }
}

@media all and (max-width: 493px) {
  .token-title h2 {
    font-size: 35px;
  }
  .token-title h1 {
    font-size: 17px;
  }
}

@media all and (max-width: 359px) {
  .token-title h1 {
    font-size: 15px;
  }
}

.detailed {
  color: white;
  display: none;
}

.collapsible {
  cursor: pointer;
}

.active,
.collapsible:hover {
  color: greenyellow;
}

.spaceBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.attr_text {
  color: rgb(0, 0, 0);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.btnDetail {
  border: 2px solid white;
  border-radius: 25px;
  padding: 5px 20px 5px 20px;
  margin: 10px 2px 10px 2px;
  cursor: pointer;
  color: white;
}

.btnDetail:active {
  background-image: linear-gradient(to bottom, #32868d, #56b5bd);
}

.gradient-border {
  position: relative;
  border-radius: 3px;
}

.gradient-border:after {
  content: "";
  position: absolute;
  top: calc(-1 * 3px);
  left: calc(-1 * 3px);
  height: calc(100% + 3px * 2);
  width: calc(100% + 3px * 2);
  background: linear-gradient(
    60deg,
    #f79533,
    #f37055,
    #ef4e7b,
    #a166ab,
    #5073b8,
    #1098ad,
    #07b39b,
    #6fba82
  );
  border-radius: calc(2 * 3px);
  z-index: -1;
  -webkit-animation: animatedgradient 3s ease alternate infinite;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@-webkit-keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn_connect {
  cursor: pointer;
  background: greenyellow;
}

.btn_logout {
  cursor: pointer;
  background: #f69c3d;
}

.account {
  border: 2px solid white;
  margin: 0px 5px 5px 5px;
}

.wrapedStat {
  border-radius: 5px;
  padding: 20px;
  background: greenyellow;
}

/*===Stats class===*/

.grid-item {
  font-size: 15px;
  text-align: center;
  color: white;
  background-color: #27262c;
  border-radius: 10px;
}

.base_btn {
  font-size: 16px;
  background-color: #2ea07b;
  border-radius: 15px;
  padding: 10px 15px 10px 15px;
  color: white;
  height: 42px;
  cursor: pointer;
}

.base_btn:active {
  background-image: linear-gradient(to bottom, #f69c3d, #f69c3d);
}

.baseInput {
  border-radius: 10px;
  border: 1px solid #f69c3d;
  padding: 5px;
}

.newFont {
  font-family: Aquire;
}

.refText {
  color: rgb(0, 0, 0);
  font-weight: bold;
}

.input_val {
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 5px;
}

.textBlack {
  color: black;
}

.refWidth {
  width: -webkit-fill-available;
}

.aprNum {
  color: greenyellow;
}

.bgArrayHistory {
  border-radius: 15px;
  background: black;
  padding: 10px;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
}

#scrollable {
  overflow-y: scroll;
  padding: 10px;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */

#scrollable::-webkit-scrollbar {
  display: none;
}

.grid_cal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  margin-bottom: 24px;
  font-family: jura, sans-serif;
}

.bw_pad {
  margin-bottom: 20px;
  font-size: 15px;
  margin-right: 20px;
}

.c_item {
  margin-bottom: 2px;
}

.c_token {
  color: #ff5e00;
}

.c_val {
  color: #f69c3d;
}

.nonSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*=== Loader class ===*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: black;
}

.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 14px arial;
}

/*=== btntop ===*/

#btntop {
  display: inline-block;
  background-color: greenyellow;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 25px;
  position: fixed;
  bottom: 15px;
  right: 12px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#btntop:hover {
  cursor: pointer;
  background-color: transparent;
}

#btntop:active {
  background-color: #555;
}

#btntop.show {
  opacity: 1;
  visibility: visible;
}