:root {
  --textColor: #000000;
  --textColorFocus: #2c2c2c;
  --borderColor: #EDEDED;
  --primaryColor: #46B555;
  --primaryColorFocus: #13801C;
  --metricsDescriptionColor: #000000CC;
}

body {
  /* padding: 1rem 1rem; */
  margin: auto;
  font-family: "Montserrat", sans-serif;
  /* background-color: #e6e6e6; */
}

div {
  padding: 0px !important;
  margin: 0px !important;
}

#loadingScreen {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

#title {
  margin-top: 20px;
}

.loader {
  margin: auto;
  border: 16px solid #f3f3f3;
  /* Light grey background */
  border-top: 16px solid #3498db;
  /* Blue color */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
}

.btn {
  width: 120px;
}





@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* font css styling */
.roboto-thin {
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-style: italic;
}




.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid;
  border-color: #3498db #0000;
  animation: l1 1s infinite;
  height: 50%;
}

label {
  text-transform: capitalize;

}

button {
  border-radius: 30px !important;
  color: white !important;
}



.primaryButton {
  background-color: var(--primaryColor);
  border: none;
  border-radius: 30px;
  color: white;
  margin-top: 0px !important;
  transition: all .3s ease;
  padding: 6px 32px;
}

.primaryButton:hover {
  transform: scale(1.2);
  background-color: var(--primaryColorFocus);

}

.secondaryButton {
  background-color: var(--textColorFocus);
  border: none;
  border-radius: 30px;
  color: white;
  margin-top: 0px !important;
  transition: all .3s ease;
  padding: 6px 32px;
}

.secondaryButton:hover {
  transform: scale(1.2);
  background-color: var(--textColor);

}



.section {
  display: flex;
  flex-direction: column;
  height: 90%;
  justify-content: space-between;
}

.myProgressBar {
  border: 3px solid var(--borderColor);
  height: 20px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px !important;
  transition: all .5s ease;
}

.myProgress {
  /* background-color: var(--primaryColorFocus); */
  /* background: rgb(4, 97, 255); */
  background: linear-gradient(189deg, var(--primaryColor) 0%, var(--primaryColorFocus) 100%);

  height: 15px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}



.questionRow {
  color: var(--textColor);
  /* padding-bottom: 8px !important; */
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

.questionIcon {
  margin-left: 1rem !important;
  background-color: transparent;
  padding: 10px;
  border-radius: 50%;
  border: 2px solid var(--primaryColor);
  width: 30px;
  height: 30px;
  text-align: center;
  transform: scale(0.75);
  display: flex;
  justify-content: center;
  align-items: center;
}

.questionIcon::after {
  content: '!';
  font-size: 20px;
  font-weight: bold;
  color: var(--primaryColor);
}

.layoutImage {
  width: auto;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  padding-right: 10px;
}

#s1rd1,
#s1rd2 {
  margin-left: 50px !important;
}

input[type='number'],
input[type='text'],
input[type='password'] {
  border: none;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 2px solid var(--primaryColor);
  outline: none;
  font-size: 16px;
  padding: 5px;
  width: 100%;
  font-weight: 500;
}

input[type='number']:focus,
input[type='text']:focus,
input[type='password']:focus {
  border: none;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 2px solid var(--primaryColorFocus);
  outline: none;
  font-size: 16px;
  padding: 5px;
  width: 100%;
  box-shadow: none;
}

input:read-only {
  border-bottom: 2px solid var(--primaryColorFocus);
}

input[type="radio"] {
  background-color: #ffffff !important;
  border: 2px solid #e2e2e2 !important;
}

input[type="radio"]:checked {
  background-color: var(--primaryColorFocus) !important;
  --bs-form-check-bg-image: none !important;

}
.form-check{
  /* background-color: aqua; */
  width: 100px;
}
.readOnlyLabel {
  /* background-color: #92c3ff !important; */
  /* border-color: #92c3ff; */
  /* color: white; */

}

#minimumAndMaximumSection>.container {
  position: relative;
  padding: 1rem 1rem;
  text-align: center;
  margin: 16px 0px !important;
}

#minimumAndMaximumSection>.container>label {
  margin-bottom: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: var(--textColor);
  font-size: 1.2rem;
}

#minimumAndMaximumSection>.container>.questionIconMetric {
  position: absolute;
  top: 5px;
  right: 20%;
}

.questionIconMetric {
  margin-left: .3rem;
  /* background-color: #CECECE; */
  border: 2px solid var(--primaryColor);
  padding: 10px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  transform: scale(0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s ease;
  cursor: pointer;
}

.questionIconMetric::after {
  content: '!';
  font-size: 20px;
  color: var(--primaryColor);
  font-weight: bold;
  color: var(--primaryColor);

}

/* .questionIconMetric:hover {
  background-color: var(--primaryColorFocus);
  
} */

/* .questionIconMetric:hover .questionIconMetric::after {
  color: #ffffff !important;
} */

input[type='range'] {
  background-color: transparent !important;
  border: 0px;
  /* appearance: none !important;
  -webkit-appearance: none !important; */
}

input[type='range']::-webkit-slider-runnable-track {
  background-color: var(--primaryColor);
  height: 5px;
}

input[type='range']::-webkit-slider-thumb {
  background-color: #ffffff;
  border: 3px solid var(--primaryColorFocus);
  width: 20px;
  height: 20px;
  margin-top: -7px;
}

input[type='range']::-moz-range-track {
  background-color: var(--primaryColor);
}

input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 50%;
  cursor: pointer;
}

tr {
  /* background-color: #2c2c2c; */
  /* padding: 1rem 2rem; */
  height: 80px;
  border-bottom: 2px solid var(--primaryColor);
  /* margin-top: 10px; */
}

td:not(:first-child) {
  text-align: center;
}

th:not(:first-child) {
  text-align: center;
}

.minusButton {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 1rem 1rem;
  border-radius: 50%;
  font-weight: 500;
  background-color: var(--textColorFocus);
  cursor: pointer;
  transition: all .3s ease;

}
.minusButton:hover{
  transform: scale(1.3);
}

.minusButton::after {
  content: '-';
}

.plusButton {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 1rem 1rem;
  border-radius: 50%;
  font-weight: 500;
  background-color: var(--primaryColorFocus);
  cursor: pointer;
  transition: all .3s ease;
}
.plusButton:hover{
  transform: scale(1.3);
}

.plusButton::after {
  content: '+';
}



#metricsDescription {
  position: absolute;
  margin: auto;
  min-width: 400px;
  max-width: 600px;
  align-content: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  background-color: var(--metricsDescriptionColor);
  color: #ffffff;
  border-radius: 20px;
  
}

#questionDescription {
  position: absolute;
  margin: auto;
  border-radius: 20px;
  align-content: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  background-color: var(--primaryColorFocus);
  color: #ffffff;
  min-width: 400px;
  max-width: 600px;
  /* border: 2px solid var(--textColorFocus); */

}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px !important;
  font-size: 22px;
  /* background: var(--primaryColor); */
  /* color: white; */
  /* border-top-left-radius: 20px; */
  /* border-top-right-radius: 20px; */
  width: 100%;
  font-weight: 500;
  margin-left: 20px;

}
.body{
  padding: 14px 20px !important;
}
.fa-solid {
  align-content: center;
  margin-right: 8px;
}
#metricDescriptionContainer,#questionDescriptionContainer{
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100vh;
  align-content: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  display: none;
  z-index: 1;
  background-color: #eeeeee8e;
}

#summeryPageHeader{
  width: 100%;
  display: block;
  /* position: absolute; */
  height: 400px;
  /* background-color: #000000; */
  background-image: url('./assets/Background.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

}
.roundedWhiteContainer{
  border-radius: 20px;
  background-color: #FFFFFFCC;
}
.whiteContainer2
{
  border-radius: 20px;
  background-color: #eff7f0;
  padding: 15px 15px !important;
  margin-right: 10px !important;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.greenContainer{
  border-radius: 10px;
  background-color: #daf0dd;
  border: 2px solid #b5e1bb;
  padding: 20px !important;
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 40px !important;
}