body {
  background-image: url("https://www.precisely.com/app/themes/precisely/dist/images/codebg_64eab913.svg");
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
/* #content {
  position: fixed !important;
  width: 97vw;
} */

@font-face {
    font-family: "Precisely Demi";
    src: url(https://www.precisely.com/app/themes/precisely/dist/fonts/Precisely-Demi_b589980e.eot);
    src: url(https://www.precisely.com/app/themes/precisely/dist/fonts/Precisely-Demi_b589980e.eot);
    src:
        local("Precisely Demi"),
        local("Precisely-Demi"),
        url(https://www.precisely.com/app/themes/precisely/dist/fonts/Precisely-Demi.eot?#iefix) format("embedded-opentype"),
        url(https://www.precisely.com/app/themes/precisely/dist/fonts/Precisely-Demi_67080ef5.woff) format("woff"),
        url(https://www.precisely.com/app/themes/precisely/dist/fonts/Precisely-Demi_2b75d01b.ttf) format("truetype"),
        url(https://www.precisely.com/app/themes/precisely/dist/fonts/Precisely-Demi.svg#Precisely-Demi) format("svg");
    font-weight: normal;
    font-style: normal;
}

*{
  font-family: 'Precisely Demi', Arial, sans-serif !important;
}

.form-range::-webkit-slider-thumb {
  background: #8017e1 ;
}

.form-range::-moz-range-thumb {
  background: #8017e1 ;
}

.form-range::-ms-thumb {
  background: #8017e1 ;
}

.form-range::-webkit-slider-thumb:active {
  background-color: #8017e1;
}
.form-range::-webkit-slider-thumb,
.custom-range:focus::-webkit-slider-thumb, 
.custom-range:focus::-moz-range-thumb,
.custom-range:focus::-ms-thumb {
  box-shadow: #8017e1;
}


.top,
.bottom {
  width: 98%;
}

h1,h2,h5 {
  color: #8017e1 !important;
}
h1 {
  display: inline-block !important;
}

.top {
  margin: 1rem;
}
.bottom {
  margin: 1rem;
}
tr:nth-child(even) {
  background-color: #fcfcfc;
}

.d-flex {
  flex-direction: column;
}
#rangeDiv,
#calc_value_div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* media query */

@media screen and (min-width: 1130px) {
  .main {
    font-size: 100%;
  }
  input {
    width: 80px !important;
  }
  .form-select {
    width: 10rem !important;
  }
}
@media screen and (max-width: 1130px) and (min-width: 700px) {
  h1,
  h3,
  h4,
  .mb-3,
  .form-control,
  .form-select,
  p {
    font-size: 99% !important;
    /* color: aquamarine !important; */
  }
  .form-label,
  td,
  tr,
  th {
    font-size: 90% !important;
    /* color: aquamarine !important; */
  }
  input {
    width: 70px !important;
  }
  .form-select {
    width: 9rem !important;
  }
}

@media screen and (max-width: 700px) and (min-width: 600px) {
  h1,
  h3,
  h4,
  .form-control,
  .form-select,
  p {
    font-size: 98% !important;
    /* color: rgb(255, 127, 238) !important; */
  }
  .form-label,
  .mb-3,
  td,
  tr,
  th {
    font-size: 85% !important;
    /* color: rgb(255, 127, 238) !important; */
  }
  input {
    width: 60px !important;
  }
  .form-select {
    width: 8rem !important;
  }
}

@media screen and (max-width: 600px) and (min-width: 500px) {
  h1,
  h3,
  h4,
  .form-control,
  .form-select,
  p {
    font-size: 97% !important;
    /* color: rgb(66, 80, 206) !important; */
  }
  .form-label,
  .mb-3,
  td,
  tr,
  th {
    font-size: 83% !important;
    /* color: rgb(66, 80, 206) !important; */
  }
  input {
    width: 50px !important;
  }
  .form-select {
    width: 7rem !important;
  }
}

@media screen and (max-width: 500px) and (min-width: 400px) {
  h1,
  h3,
  h4,
  .form-control,
  .form-select,
  p {
    font-size: 95% !important;
    /* color: rgb(206, 66, 66) !important; */
  }
  .form-label,
  .mb-3,
  td,
  tr,
  th {
    font-size: 81% !important;
    /* color: rgb(206, 66, 66) !important; */
  }
  input {
    width: 35px !important;
  }
  .form-select {
    width: 6rem !important;
  }
}