@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');



#meters_qty {

    width: 100%;

}



/********** Range Input Styles **********/

/*Range Reset*/

input[type="range"] {

    -webkit-appearance: none;

    appearance: none;

    background: transparent;

    cursor: pointer;

    width: 15rem;

}



/* Removes default focus */

input[type="range"]:focus {

    outline: none;

}



/***** Chrome, Safari, Opera and Edge Chromium styles *****/

/* slider track */

input[type="range"]::-webkit-slider-runnable-track {

    background-color: #2EA9EF;

    border-radius: 0.5rem;

    height: 0.5rem;

}



/* slider thumb */

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    /* Override default look */

    appearance: none;

    margin-top: -12px;

    /* Centers thumb on the track */



    /*custom styles*/

    background-color: #00589C;

    height: 2rem;

    width: 2rem;

    border-radius: 50%;

}



input[type="range"]:focus::-webkit-slider-thumb {

    border: 1px solid #053a5f;

    outline: 3px solid #053a5f;

    outline-offset: 0.125rem;

}



/******** Firefox styles ********/

/* slider track */

input[type="range"]::-moz-range-track {

    background-color: #053a5f;

    border-radius: 0.5rem;

    height: 0.5rem;

}



/* slider thumb */

input[type="range"]::-moz-range-thumb {

    border: none;

    /*Removes extra border that FF applies*/

    border-radius: 0;

    /*Removes default border-radius that FF applies*/



    /*custom styles*/

    background-color: #5cd5eb;

    height: 2rem;

    width: 1rem;

}



input[type="range"]:focus::-moz-range-thumb {

    border: 1px solid #053a5f;

    outline: 3px solid #053a5f;

    outline-offset: 0.125rem;

}



#data-output {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media(max-width:768px) {
.mold-type-container{
	display:none !important;
}
    #data-output{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

}



.form-calculator-title{

    text-align: center;

    font-weight: 700;

    color: #2EA9EF;

    font-size: 25px !important;

}

.price-calculator-container{

    border: solid 3px #2EA9EF;

    padding: 10px;

    border-radius: 20px;

    background-color: #ffffff;
    padding-bottom: 35px;

}

.price-calculator-container form{

    max-width: 90%;

    margin: 0 auto;

}

.price-results{

    font-weight: bold;

    text-align: center;

}

#fixmold-price-calculator-form br{

    display: none;

}

.send-estimate{

    background-color: #2EA9EF;

    border: solid 1px #2EA9EF;

    padding: 12px 25px;

    border-radius: 10px;

    width: 100%;

    margin: 0 auto;

    text-align: center;

    font-size: 16px;

    font-weight: 600;

    color: #fff;
	max-height: 50px;

}

#fixmold-price-calculator-form label{

    color: #2EA9EF;
    font-weight: 600;

}



 #fixmold-price-calculator-form select{

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

    background-color: #f2f2f2;

    color: #333;

    outline: none;

 }

 .price-calculator-container{
	margin:20px;
	max-width:1200px;
	margin:0 auto;
	margin-top:35px;
	margin-bottom:35px;
}
.price-calculator-container select{
	display:initial !important
}
#data-output{
	margin-top:25px
}
#meters_qty{
	margin-bottom:20px !important;
	margin-top:20px !important;
}
.price-calculator-container h4{
	font-size:16px !important;
}
#final-extiamte{
	    font-weight: 700;
    color: #2ea9ef;
    font-size: 20px !important;
    border: solid 2px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}
.small-text{
	font-size:14px;
}
#fixmold-price-calculator-form input{
	width:100%;
	    margin-bottom: 10px;
    border-radius: 5px;
}

.success-message{    font-size: 20px;
    font-weight: 700;
    line-height: 1.25em;
    text-align: center;}
.success-message-container{
	padding:8px;
}
.success-message-container p{
	text-align:center;
    margin-bottom: 50px;
}
.big-meters-qty-container{
	width: 100%;
    text-align: center;
	margin-bottom:50px;
}
.big-meters-qty-container span{
    border-bottom: 4px dashed #bdc3c7;
    text-align: center;
    font-weight: 700;
    font-size: 5rem;
    width: 300px;
    height: 100px;
    line-height: 60px;
    margin: 40px auto;
    letter-spacing: -.07em;
    text-shadow: #fff 2px 2px 2px;
    margin-bottom: 37px !important;
}
 
.buttons-row{
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
	margin-top:20px;
}
.prev-button{
	background-color: #c3c3c3 !important;
    border: 1px solid #c3c3c3 !important;
}

 .confirm-link-container{
     text-align: center;
     margin-top: 10px;
 }
 .confirm-appointment-link{
     background-color: #2ea9ef;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 15px;
    text-align: center;
    text-transform: uppercase;
    font-size: 35px;
 }
#controls-container{
	    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 30px;
}
#slider-range-container{
	text-align:center;
}
#content-container{
	display:grid;
	grid-template-columns:auto auto;
}

@media(max-width:900px){
	#controls-container, 
#content-container,#step2{
		grid-template-columns:auto !important;
	}
}

#step2{
	    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 25px;
}
.confirm-appointment-link {
	border-radius:50px !important;
}