/*
Block Name: Loan Calculator
Description: Shows the LBF Loan Calculator.
*/

.block-calculator .container .container { width: 100%; max-width: 100%; }
.block-calculator label {
      font-weight: bold;
      display: block;
      margin-bottom: 0.5rem;
    }

.block-calculator  select {
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 10rem;
	border: 1px solid var(--brand-1);
	margin-top: .25rem;
	padding-right: 2rem;
    }


.block-calculator button {
      width: 100%;
      margin-bottom: 1rem;
      border-radius: 0.4rem;
    }

.block-calculator .value-display {
      font-weight: bold;
      margin-top: 0.5rem;
    }

span#amount-display {
	/*
	
	 width: 100%;
      height: 4rem;
      border-radius: 10rem;
      background: var(--brand-1);
      outline: none;
	border: none;
      margin-top: 0.5rem;
      transition: background 0.3s ease;
	*/
	
}

.block-calculator input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      height: 4rem;
      border-radius: 10rem;
      background: var(--brand-1);
      outline: none;
	border: none;
      margin-top: 0.5rem;
      transition: background 0.3s ease;
    }

.block-calculator input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 2rem;
      height: 2rem;
      background: var(--brand-2);
      border-radius: 50%;
      cursor: pointer;
	border: none;
      transition: background 0.3s ease, transform 0.2s ease;
    }

.block-calculator input[type="range"]::-webkit-slider-thumb:hover {
      background: var(--brand-3);
      transform: scale(1.1);
	
    }

.block-calculator input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border: 2px solid #2e7d32;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }

.block-calculator input[type="range"]::-moz-range-thumb:hover {
      background: #388e3c;
      transform: scale(1.1);
    }

.block-calculator button {
      background: var(--brand-1);
      color: #fff;
      border: none;
      cursor: pointer;
	padding: 1rem 2rem;
	font-size: 2rem;
	font-family: inherit;
    }

.block-calculator button:hover {
      background: var(--brand-2);
    }

.block-calculator input[type="select"] { font-size: 2rem; width: 100%; }

@media(max-width: 768px){
	.block-calculator .calculation-results{grid-template-columns: 1fr !important;}
}

@media(max-width: 400px){
	.block-calculator .container{grid-template-columns:1fr !important}
}