/************************************
* Tuition Calculator
************************************/
/*** Quick Util classes ***/
.p-0 {
	padding: 0;
}

.p-1 {
	padding: 1rem;	
}

.bg-light-gray {
	background-color: #f4f4f8;	
}

.bg-white {
	background-color: #fff;	
}
/*** End Quick Util classes ***/

.tuition-calculator input[type="range"] {
	padding: 0;
}

.tuition-calculator__title {
  text-align: center;
  text-wrap: balance;
  font-size: 1.5rem;
}

.tuition-calculator__instructions {
  text-align: center;
  text-wrap: balance;
  margin-bottom: 2rem;
}

.tuition-calculator label {
  display: inline;
  font-size: 1rem;
  font-weight: normal;
  color: #4b4f55;
  width: auto;
}

.tuition-calculator input[type="radio"] {
	margin-left: 0;
}

.tuition-calculator__location {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tuition-calculator__values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.tuition-calculator__values > div {
  flex: 1 1 170px;
}

.tuition-calculator__values label {
  font-size: 1.125rem;
  display: block;
  margin-bottom: 0.5rem;
}

.tuition-calculator__fees {
  display: flex;
  justify-content: flex-end;
}

.tuition-calculator__hours {
  width: clamp(200px, 40vw, 400px);
}

.tuition-calculator__fees {
  display: flex;
  gap: 2rem;
  font-weight: bold;
}

.tcf-item > span {
  display: block;
  font-size: 1.75rem;
  font-size: 1.3125rem;
}

.calc-total {
  background-color: #2A3B7C;
  color: #b2e0e3;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.3125rem;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.calc-total__price {
  color: #fff;
  font-size: 1.75rem;
}

.calc-disclaimer p {
  padding-top: 1rem;
  text-align: center;
  font-size: 90%;
  font-size: smaller;
}

.calc-disclaimer a {
  color: #2A3B7C;
}

@media (min-width: 500px) {
  .tuition-calculator__title {
    font-size: 1.75rem;
  }

  .tuition-calculator__location {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .tuition-calculator label {
    font-size: 1.3125rem;
  }

  .tuition-calculator__values label {
    font-size: 1.5rem;
  }

  .tcf-item > span {
    font-size: 1.75rem;
  }

  .calc-total {
    flex-direction: row;
    gap: 1rem;
    text-align: left;
    align-items: center;
    justify-content: center;
    font-size: 1.3125rem;
  }

  .calc-total__price {
    font-size: 2.25rem;
  }
}