@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap");

* {
  font-family: "Roboto Slab", serif;
}

:root {
  --color-green: #1c6946;
  --color-light-blue: #87ecfa;
  --color-orange: #fd8d14;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray: #d9d9d9;
  --color-red: #ff0000;
}

body {
  background: url("../images/bg-container.png") no-repeat center/auto;
}

.bg-red{
  background-color: #FF3C30 !important;
}
.bg-light-blue {
  background-color: var(--color-light-blue) !important;
}
.bg-orange {
  background-color: var(--color-orange) !important;
}
.text-green {
  color: var(--color-green);
}

.bg-green {
  background: var(--color-green) !important;
}

.headline4 {
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.subtitle-home {
  font-size: 1.5rem;
  line-height: 2.25rem;
  text-align: center;
}

.btn-secondary {
  border: 2px solid var(--color-green);
  border-radius: 99px;
  padding: 12px 15px;
  font-size: 14px;
  font-weight: bold;
}

.btn-primary {
  background-color: var(--color-green) !important;
  color: var(--color-white);
  border-radius: 99px;
  padding: 12px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.btn-default {
  background-color: var(--color-gray);
  color: var(--color-black);
  border-radius: 99px;
  padding: 12px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.circle-indicator-stepper {
  border: 1px solid var(--color-white);
  background-color: var(--color-white);
  padding: 4px;
}

.label-indicator-stepper {
  width: 7rem;
}

.err-field {
  color: var(--color-red) !important;
}
#card-stepper {
  height: 45vh;
}

#stepper-1 #stepper-2 #stepper-3 #stepper-4 #stepper-5 #stepper-7 {
  height: 30vh;
}
#stepper-6 {
  height: 50vh;
}
#stepper-8 {
  height: 59vh;
}

.img-stepper-form {
  width: 80% !important;
}

#circles-slider.ui-slider {
  border-radius: 20px;
  background: #d9d9d9;
  border: none;
  height: 4px;
}

#circles-slider .ui-slider-handle {
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: -10px;
  margin-left: -7px;
  /* border: 2px solid #1C6946;  */
  background-color: #1c6946;
}

.ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
  border: none !important;
}

#circles-slider .ui-slider-pip {
  top: 3px;
}

#circles-slider .ui-slider-pip .ui-slider-line {
  width: 4px;
  height: 15px;
  margin-top: -8px;
  border-radius: 4px;
  margin-left: -2px;
  background: #d9d9d9;
}

#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
  /* border:1px solid red; */
  /* top: -7px;  */
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
  /* display: none; */
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
  /* margin: 0; */
}

#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
  left: -2em;
  display: none;

  text-align: right;
}

#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
  left: 2em;
  text-align: left;
  display: none;
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
  font-weight: normal;
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected {
  font-weight: bold;
}

#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
  color: #434d5a;
}


.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #25b09b;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
        mask: var(--_m);
    -webkit-mask-composite: source-out;
        mask-composite: subtract;
    animation: l3 1s infinite linear;
    }
    @keyframes l3 {
			to { transform: rotate(1turn);
    }
}
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}


input[type=radio] {
  height:25px !important; 
  width:25px !important; 
  vertical-align: middle !important;
}