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

.names {
  position: absolute;
}

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

h1,
h2,
h3,
h4,
th {
  color: blueviolet !important;
}
h1 {
  display: inline-block !important;
}
input[type="text"]:disabled {
  background: rgb(248, 248, 248);
}
.top {
  margin: 1rem;
}

/* card-header bg color */
.card-header {
  background: blueviolet;
  color: white;
}
/* card body */
.card-body-2,
.card-body-3 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.card-body-4 {
  padding-top: 3px;
}
/* rows */
.row {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
}

/* margin impacted wrap */
#btm_row_right_col_calc,
#btm_row_left_col_calc {
  flex-wrap: nowrap !important;
  text-align: center !important;
}

.btm_row_right_col {
  width: 50%;
}
.l_btm,
.btm_row_left_col {
  width: 50%;
}

.top_row {
  width: 25%;
}
#top_row1_ab label,
#top_row2 label {
  color: white !important;
}
/* Rounded border */
hr.rounded {
  border-top: 5px solid #000000;
  border-radius: 5px;
}

.bottom {
  margin: 1rem;
}
/* range 1 */
#rangeDiv1,
#rangeDiv2,
#rangeDiv3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
tr:nth-child(even) {
  background-color: #fcfcfc;
}

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

/* video */
section.flexible-content--one-column-text-wide .video,
section.flexible-content--two-column-text .video {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50%;
  object-position: 50%;
  width: 100%;
  height: 100%;
}

/* media query */
@media screen and (max-width: 1400px) and (min-width: 1201px) {
  h1,
  h3,
  h4,
  .mb-3,
  .form-control,
  .form-select,
  p {
    font-size: 99% !important;
    /* color: aquamarine !important; */
  }
  .form-label,
  .btn-primary,
  td,
  tr,
  th,
  b {
    font-size: 90% !important;
    /* color: aquamarine !important; */
  }
  input {
    width: 70px !important;
  }
  .form-select {
    width: 9rem !important;
  }
}

@media screen and (max-width: 1200px) and (min-width: 992px) {
  h1,
  h3,
  h4,
  .mb-3,
  .form-control,
  .form-select,
  p {
    font-size: 99% !important;
    /* color: aquamarine !important; */
  }
  .form-label,
  .btn-primary,
  .input-group-text,
  td,
  tr,
  th,
  b {
    font-size: 82% !important;
    /* color: aquamarine !important; */
  }
  input {
    width: 70px !important;
  }
  .form-select {
    width: 9rem !important;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
  h1,
  h3,
  h4,
  .mb-3,
  .form-control,
  .form-select,
  p {
    font-size: 80% !important;
    /* color: aquamarine !important; */
  }
  .form-label,
  .btn-primary,
  .input-group-text,
  td,
  tr,
  th,
  b {
    font-size: 82% !important;
    /* color: aquamarine !important; */
  }
  input {
    width: 70px !important;
  }
  .form-select {
    width: 9rem !important;
  }
}

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

@media screen and (max-width: 576px) and (min-width: 500px) {
  h1,
  h3,
  h4,
  .form-control,
  .form-select,
  p {
    font-size: 97% !important;
    /* color: rgb(66, 80, 206) !important; */
  }
  .form-label,
  .btn-primary,
  .input-group-text,
  .mb-3,
  td,
  tr,
  th,b {
    font-size: 75% !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: 60% !important;
    /* color: rgb(206, 66, 66) !important; */
  }
  .form-label,
  .input-group-text,
  .btn-primary ,.mb-3,
  td,
  tr,
  th {
    font-size: 55% !important;
    /* color: rgb(206, 66, 66) !important; */
  }
  input {
    width: 35px !important;
  }
  .form-select {
    width: 6rem !important;
  }
}