:root {
  --white-color: #fff;
  --white-t50: rgba(255, 255, 255, 0.5);
  --black-color: #1d1e20;
  --primary-red: #f03333;
  --primary: #f0ba33;
  --primary-gray: #d5d5d5;
  --border-color-custom: rgba(255, 255, 255, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#bitcoin-mining-calculator input,
#bitcoin-mining-calculator select,
#bitcoin-mining-calculator button,
#bitcoin-mining-calculator h2,
#bitcoin-mining-calculator {
  font-family: 'Krub';
  text-align: left;
}

#bitcoin-mining-calculator {
  color: var(--white-color);
}

.bitcoin-mining-calculator {
  font-size: 15px;
  max-width: 1240px;
  margin: 0 auto;
}


/* difficulty and block reward */
.difficulty-reward {
  display: flex;
  gap: 50px;
  margin: 50px 0;
}

.difficulty-box {
  border: var(--border-color-custom);
  border-radius: 12px;
  flex: 1;
  max-height: 280px;
}

#rewardChart,
#bitcoinMiningDifficultyChart {
  height: 250px;
}


#cost-mine-one-btc {
  display: block;
}

.gauge-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.gauge-label span {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-even-chart {
  height: 362px;
  margin-top: 20px;
}

/* Layout */
.blockchain-data {
  display: flex;
  flex-direction: column;
}



/* currency select */
.currency-selected-box,
.period-selected-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.period-selected-box {
  border: none;
}

.currency-selected-box .custom-label-currency,
.period-selected-box .custom-label-currency {
  margin-right: 10px;
}

.currency-selector {
  flex: 1;
  display: flex;
  margin-bottom: 0;
  border: none;
}

.currency-selected-box .currency-selector select,
.period-selected-box .period-selector select {
  padding: 0 5px;
  color: var(--white-color);
  background-color: #222;
  border: none;
  outline: none;
  height: 30px;
  border-radius: 5px;
  width: 60px;
  background-image: url('../images/down-arrow.svg');
  background-position: right center;
}

.period-selected-box .period-selector select {
  margin-right: 10px;
}

.blockchain-information-box {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.hosting-cost-information-box {
  padding: 0;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}


/*  */
.blockchain-metrics,
.miner-detail {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  background: var(--black-color);
  margin-bottom: 5px;
}

.blockchain-metrics .block-reward-display,
.blockchain-metrics .difficulty-display {
  background-color: var(--black-color);
  padding: 0 2px;
}

.result-box {
  display: flex;
  gap: 30px;
}

.header-input-box {
  display: flex;
}




/* NEW LAYOUT */
.bitcoin-mining-calculator-section {
  display: flex;
  gap: 20px;
}

.bitcoin-mining-calculator-left {
  width: 70%;
}

.bitcoin-mining-calculator-right {
  width: 30%;
}

/* MINER DETAIL */
.miner-detail-image-box {
  width: 100%;
  min-height: 235px;
}

.miner-detail-image-box {
  max-width: 235px;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
  padding: 10px;
}

.miner-detail-box {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  gap: 10px;
}

.miner-detail-item {
  width: 23%;
  flex-grow: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.miner-detail-item-full {
  width: 100%;
}

.miner-detail-item .miner-detail-item-image-box {
  width: 32px;
  height: 32px;
}

.miner-detail-item .miner-detail-item-text-box {
  display: flex;
  flex-direction: column;
}

.miner-detail-item .miner-detail-item-title {
  color: rgba(255, 255, 255, 0.85);
}

.miner-detail-item .miner-detail-item-value {
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
}

.miner-detail-item .miner-detail-item-unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--white-t50);
}

.blockchain-metrics .blockchain-metrics-text {
  flex-grow: 1;
}

/* FORM INPUTS */
.blockchain-information-left {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 10px;
  background: var(--black-color);
}

.form-control-box {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 0 200px;
  margin-bottom: 5px;
}

.form-control-box.bitcoin-price-box {
  min-width: 248px;
  max-width: 248px;
  flex: 1;
}

.form-control-box-special {
  background-image: url('../images/dashboard.svg');
  background-repeat: no-repeat;
  background-position: 5px 35px;
  background-color: #151515;
  background-size: 30px 30px;

}

.form-control-box-special label {
  background-color: var(--black-color);
}

.form-control-box-special.efficiency-bg {
  background-image: url('../images/power-plug.svg');
}

.form-control-box-special.power-bg {
  background-image: url('../images/electric-tower.svg');
}

.form-input-unit {
  position: absolute;
  height: 47px;
  right: 8px;
  top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  font-weight: 400;
}

.form-input-unit-double-top {
  height: 24px;
  right: 8px;
  top: 28px;
  border-bottom: 1px solid var(--white-t50);
}

.form-input-unit-double-down {
  height: 23px;
  right: 8px;
  top: 52px;
}

.form-control-box label,
.form-control-box .custom-label,
.bitcoin-mining-calculator .custom-label-time {
  font-size: 15px;
  width: 100%;
  line-height: 25px;
  padding-top: 3px;
  color: var(--white-t50);
  transition: all 0.3s linear;
  margin-bottom: 0;
}

.form-control-box label:hover,
.form-control-box .custom-label:hover,
.bitcoin-mining-calculator .custom-label-time:hover {
  color: var(--white);
}

.form-control-box .custom-label {
  padding-top: 0;
}

.form-control-box.miner-machine option {
  background-color: #222;
}

.bitcoin-mining-calculator .form-control-box input,
.bitcoin-mining-calculator .form-control-box select,
.bitcoin-mining-calculator .form-control-box .block-reward-display,
.bitcoin-mining-calculator .form-control-box .difficulty-display {
  max-height: 47px;
  min-height: 47px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  outline: none;
  border-radius: 3px;
  position: relative;
  background-size: 10px;
  font-size: 14px;
  color: var(--white-color);
  font-weight: 500;
  background-color: transparent;
  flex-grow: 1;
}




.bitcoin-mining-calculator .form-control-box input[type='range'] {
  background-color: transparent;
}

.bitcoin-mining-calculator .form-control-box input:focus,
.bitcoin-mining-calculator .form-control-box select:focus {
  border: 1px solid var(--primary);
}


.bitcoin-mining-calculator .form-control-range-box {
  height: 47px;
  align-self: center;
  flex: 2;
  margin-top: 25px;
}

.bitcoin-mining-calculator .form-control-range-box input {
  height: 26px;
}

.bitcoin-mining-calculator .form-control-box .block-reward-display,
.bitcoin-mining-calculator .form-control-box .difficulty-display {
  text-align: center;
  padding-right: 50px;
}

.bitcoin-mining-calculator .form-control-box input {
  padding: 7px 40px 7px 5px;
}

.bitcoin-mining-calculator .form-control-box-special input {
  padding-left: 45px;
  /* font-size: 16px; */
  border-radius: 0;
}


.bitcoin-mining-calculator .form-control-box .block-reward-display::before,
.bitcoin-mining-calculator .form-control-box .difficulty-display::before {
  content: 'BTC';
  position: absolute;
  background-color: #333;
  border-radius: 0 12px 12px 0;
  right: -3px;
  width: 46px;
  height: 41px;
  top: -3px;
  color: var(--white-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Krub";
  font-weight: 400;
}

.bitcoin-mining-calculator .form-control-box .difficulty-display::before {
  content: 'T';
}

.bitcoin-mining-calculator .form-control-box .block-reward-display,
.bitcoin-mining-calculator .form-control-box .difficulty-display {
  line-height: 22px;
  background-color: transparent;
}


.form-control-box input::-webkit-outer-spin-button,
.form-control-box input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-control-box input[type=number] {
  -moz-appearance: textfield;
}

.select-period-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--black-color);
}

.select-period-wrapper .custom-label-time {
  border: none;
  padding-top: 0;
}

.select-period-box {
  background-color: var(--border-color-custom);
  border-radius: 8px;
  display: flex;
}

#bitcoin-mining-calculator .select-period {
  cursor: pointer;
  padding: 7px;
  height: 42px;
  flex: 1;
  outline: none;
  border: 1px solid var(--border-color-custom);
  transition: background .3s ease, color .3s ease;
  background-color: #333;
  font-size: 14px;
  font-weight: 400;
  color: var(--white-color);
  border-radius: unset;
}

#bitcoin-mining-calculator .select-period.active-period {
  background-color: var(--primary);
  color: var(--white-color);
}

/* REWARD */
.tabs-reward {
  width: 100%;
  background: var(--black-color);
  margin: 20px 0 10px;
}

.tab-buttons-reward {
  display: flex;
  border-bottom: none;
  border-top: none;
  border-radius: 8px;
  background: var(--black-color) !important;
}


.tab-buttons-reward button {
  flex: 1;
  padding: 10px;
  cursor: pointer;
  color: var(--white-color) !important;
  border: none;
  background: var(--black-color) !important;
  transition: all 0.3s ease;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-buttons-reward button:hover {
  color: var(--primary) !important;
  border-radius: 3px;
}

.tab-buttons-reward button.active-reward {
  background: #151515 !important;
  color: var(--primary) !important;
  border-radius: 3px;
}

.tab-content-reward {
  padding-top: 10px;
  display: none;
  background: var(--black-color);
  /* min-height: 250px; */
}

.tab-content-reward.active-reward {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 0;
  gap: 10px;

}

.mining-calculator-result-box .mining-calculator-result-row {
  padding: 3px;
  border-radius: 8px;
  width: 100%;
  /* width: 48%; */
  display: flex;
  align-items: center;
}

.mining-calculator-result-row.gray-light {
  border: 1px solid var(--border-color-custom);
  border-radius: 5px;
}

.mining-calculator-result-row .mining-calculator-result-text-box {
  display: flex;
  flex-direction: column;
}

.mining-calculator-result-text-box span {
  color: var(--white-t50);
}

.mining-calculator-result-text-box .daily-mined-bitcoin,
.mining-calculator-result-text-box .daily-mined-bitcoin-usd,
.mining-calculator-result-text-box .daily-total-cost,
.mining-calculator-result-text-box .daily-profit,
.mining-calculator-result-text-box .monthly-mined-bitcoin,
.mining-calculator-result-text-box .monthly-mined-bitcoin-usd,
.mining-calculator-result-text-box .monthly-total-cost,
.mining-calculator-result-text-box .monthly-profit,
.mining-calculator-result-text-box .yearly-mined-bitcoin,
.mining-calculator-result-text-box .yearly-mined-bitcoin-usd,
.mining-calculator-result-text-box .yearly-total-cost,
.mining-calculator-result-text-box .yearly-profit {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s linear;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  max-width: 150px;
}

.mining-calculator-result-box .mining-calculator-result-row div {
  display: flex;
  justify-content: space-between;
}

.mining-calculator-result-box .mining-calculator-result-row div img {
  width: 30px;
  height: 30px;
  margin: 0 10px;
}


/* Disclaimer */
.disclaimer-box {
  margin-top: 5px;
  background: var(--black-color);
}

.disclaimer-title {
  font-weight: 600;
  color: var(--white-color);

}

.disclaimer-text {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--white-color);
}

/* RANGE SLIDER */
.slider-wrap {
  position: relative;
  border-radius: 5px;
  height: 44px;
  width: 100%;
  min-width: 280px;
  --dots: 14;
  --dot-size: 2px;
  --dot-color: #6b7280;
  --track-h: 6px;
}


/* dotted ticks (auto spacing) */
.slider-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 6px;
  background:
    radial-gradient(circle, var(--dot-color) 5%,
      transparent calc(var(--dot-size) + 0.1px)) center / calc(100% / var(--dots)) 100% repeat-x;
  pointer-events: none;
  /* z-index: 2; */
}

input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  background: transparent;
  height: 100%;
  outline: none;
  border: none;
  z-index: 1;
  padding: 7px 23px 5px !important;
  cursor: grab;
  transition: all 0.2s ease;
}

/* remove default track visuals */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
}

input[type="range"]::-ms-track {
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* thumb — square yellow with slight rounding */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary);
  border: none;
  border-radius: 2px;
  transform: translateY(calc(-50% + 3px));
  transition: all 0.2s ease;
  outline: none;
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--primary);
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(0, 0, 0, .12);
  transition: transform .08s ease, box-shadow .12s ease;
  outline: none;

}

.bar-chart {
  margin-top: 12px;

}

#gaugeBarChart {
  height: 160px;
}

/* Responsive for mobile */
@media screen and (max-width:900px) {

  .blockchain-information-box,
  .miners-information-box,
  .hosting-cost-information-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .blockchain-information-left,
  .miners-information-left,
  .hosting-cost-information-left {
    max-width: 100%;
    width: 100%;
  }

  .blockchain-information-right,
  .miners-information-right,
  .hosting-cost-information-right {
    width: 100%;
    flex: 1 0 0;
  }

  .form-control-box {
    width: 100%;
  }

  canvas {
    width: 100%;
    max-width: 100%;
  }

  .blockchain-metrics {
    flex-direction: column;
  }

  .blockchain-metrics .blockchain-metrics-text {
    text-align: center;
  }

  .header-input-box {
    margin-top: 10px;
  }

  .form-input-unit {
    bottom: 0;
  }

  .form-input-unit-double-top {
    bottom: 22px;

  }

  .form-input-unit-double-down {
    bottom: 0;
  }

  .form-control-box.bitcoin-price-box {
    max-width: 100%;
  }

  .tabs-reward {
    width: 100%;

  }

  .tab-content-reward {
    min-height: 140px;
  }

  .miner-detail {
    flex-direction: column;
    padding: 16px;
  }

  .miner-detail .miner-detail-box {
    width: 100%;
  }

  .miner-detail .miner-detail-item {
    width: 100%;
  }

  /* NEW LAYOUT */
  .bitcoin-mining-calculator-section {
    flex-direction: column;
  }

  .bitcoin-mining-calculator-left {
    width: 100%;
  }

  .bitcoin-mining-calculator-right {
    width: 100%;
  }

  .miner-detail-item {
    width: 47%;

  }

  .miner-detail-item-full {
    width: 100%;
  }

  /* MINER DETAIL */
  .miner-detail-image-box {
    max-width: 200px;
    margin: 0 auto;
    min-height:200px;
  }

}

@media screen and (max-width:480px) {
  #bitcoin-mining-calculator {
    min-width: 350px;
  }

}