:root {
    --main-color: 40, 120, 140;
}

body {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  color: #f0f0f0;
  background-color: #10100E;  
  margin: 0;
  padding: 0;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 0.8vw;
}


body::before {
  z-index:-1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #10100E;
  background: radial-gradient(circle  at right top, rgba(var(--main-color), 0.1) 5%, #10100E 50%);
  pointer-events: none; 
}


.blackdash-logo {
    width: 65%;
}

.row1 {
  z-index:2;
    height: 60vh;
  display: flex;
    margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 1vh;
  
}

.row2{
   z-index:2;
  height: 40vh;
  display: flex;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-bottom: 1vh;
}

.div-stock {
   z-index:2;
    display: flex;
    flex-direction: column;
    width: 30vw; 
    background: #161616;
   background: radial-gradient(circle  at right top, rgba(var(--main-color), 0.3) 0%, rgba(var(--main-color), 0.2) 15%, #161616 65%);
  border: 0px;
  color: white;  
    border-radius: 20px;
    margin-right: 2vw;
    padding: 40px;
  margin: 1vw;
}

.div-stock-color {
    margin-top: auto;
}

.div-graph {
   z-index:2;
  display: flex;
    width: 70vw;
    padding: 30px;
    justify-content: center;
    align-items: center;
  margin: 1vw;
}



.div-config {
  z-index:2;
  flex-grow: 1;
  border: 1px solid #ffffff1c;
  border-radius: 30px;
  margin: 1vw;
  padding: 30px;
  justify-content: center;
  align-items: center;
}


.author {
  font-size: 0.65vw;
  margin-top: 0.5vw;
  margin-bottom: 0.5vw;
}



.btn {
  background-color: rgba(var(--main-color));
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: #2a2a3961;
}

.btn:active {
  background-color:rgba(var(--main-color));
}


input[type="number"],
select,
input[type="range"] {
  background-color: #2a2a3961;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px;
  padding-left: 10px;
  padding-right: 10px; 
  margin-bottom: 16px;
}

input[type="number"]::placeholder,
select option:first-of-type {
  color: #aaa;
}

input[type="range"] {
  -webkit-appearance: none;
  height: 1px;
  background-color: #2a2a3961;
  margin-bottom: 24px;
  border-radius: 200px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background-color: rgba(var(--main-color));
  border-radius: 50%;
  cursor: pointer;
}

label {
  color:#fff;
}


.row-div {
  display: flex;
  flex-direction: row;
}

.Select-control {
  background-color: rgb(25, 25, 25) !important;
  border: solid rgba(100, 100, 100, 0.4) 2px !important;
}


.Select-value-label {
  color: white !important;
}

.Select input {
  color: white;
}


.VirtualizedSelectOption {
  background-color: rgb(25, 25, 25);
  color:white;
}


.VirtualizedSelectFocusedOption {
  background-color: blue;
  color: white;
}

.select-menu-outer {
  display : block !important;
}

.radio-group .form-check {
  padding-left: 0;
  padding-bottom: 10px;
  /***
  background color
  check color
  outline (border color)
  ***/
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 4px;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0px;
  padding-bottom: 4px;
}

.black-dropdown {
  background: rgb(25, 25, 25);
  min-width: 12vw !important;
  width: 12vw;
  margin-bottom: 1vw;
}

.currency-dropdown {
  background: rgb(25, 25, 25);
  min-width: 5vw !important;
  width: 5vw;
  margin-bottom: 1vw;
  min-height: 0.5vw !important;
  height: 0.5vw;
}

.period-dropdown {
  background: rgb(25, 25, 25);
  min-width: 8vw !important;
  width: 8vw;
  margin-bottom: 1vw;
}

.currency-dropdown {
  background: rgb(25, 25, 25);
  min-width: 4.5vw !important;
  width: 4.5vw;
}

.period-dropdown {
  background: rgb(25, 25, 25);
  min-width: 6vw !important;
  width: 6vw;
}

.input-box {
  background: rgb(25, 25, 25);
  min-width: 7vw !important;
  width: 7vw;
  margin-bottom: 1px;
  padding-bottom: 1px;
  padding-left: 0px;
  margin-left: 0px;
  margin: 0px;
}

.vol-input {
  width: 10vw;
  min-width: 10vw;
}

.graph {
  padding: 10vw;
  margin: 10vw;
}

.greeks-h3 {
  font-size: 1.2vw;
  color: rgba(var(--main-color), 0.9);
  margin: 0;
  margin-bottom: 0.5vw;
  margin-top: 1vw;
}

.calculations-h3 {
  font-size: 1.2vw;
  color: rgba(var(--main-color), 0.9);
  margin: 0;
  margin-bottom: 0.5vw;
}

h2 {
  font-size: 1.5vw;
  margin-top: 2vh;
  margin-bottom: 0.7vw;
  color: rgba(var(--main-color), 0.9);
  margin: 0;
  margin-bottom: 1vw;
}


h3 {
  font-size: 1.2vw;
  color: rgba(var(--main-color), 0.9);
  margin: 0;
  margin-bottom: 20px;
}


h5 {
  font-size: 0.8vw;
  color: white;
  margin: 0;
  margin-bottom: 1vw;
  margin-right: 0.5vw;
  font-size: 0.8rem;
}



td {
  padding-right: 1vw;
  color: white;
  margin: 0;
  margin-bottom: 20px;
  font-size: 0.8rem;
  margin-right: 5px;
  padding-left: 0vw;
}


.btn {
  --bs-btn-font-size: 0.8vw;
  margin-bottom: 1vw;
}


.div-stock-logo {
  max-width: 75%;
}

.header-h5 {
  font-size: 0.8vw;
  margin-bottom: 0.5vw;
}

.exchange-h5 {
  font-size: 0.7vw;
  margin-bottom: 1vw;
}

.header-days {
  margin-bottom: 0.75vw;
}

@media (max-width: 768px) {
  .row1,
  .row2 {
      flex-direction: column;
      height: auto;
  }


  .div-stock,
  .div-graph,
  .div-config {
      width: 85vw;
      margin: 1vw;
      margin-bottom: 4%;
      padding: 3vw;
  }

  .div-stock {
      margin-top: 5%;
  }
  .div-graph {
      min-height: 50vh;
  }

}