/* -------------------------------------------*--------------*--------------------------------------------------*/
/*                    -----------------------*   CUSTOM CSS   *------------------------                         */
/* -------------------------------------------*--------------*--------------------------------------------------*/


:root {
  --blue: #4650ff;
  --tran_one: all .1s ease-in-out;
}

.section {
	max-width: 915px;
    margin: 0 auto;
}

.simulador-wrapper {
	background: radial-gradient(50% 50% at 50% 50%, rgba(156, 251, 255, 0.70) 0%, #FFF 100%);
}

.simulador-first-step {
	text-align: center;
}

.simulador-first-step h3 {
	color: #4650FF;
	font-size: 55px;
	font-weight: 700;
	margin: 15px 0;
}

.simulador-first-step h4 {
	color: #3C3950;
	font-size: 45px;
	font-weight: 700;
	margin-bottom: 25px;
	line-height: 1.1;
}

.simulador-first-step p {
	color: #3C3950;
	font-size: 33px;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 30px;
}

.simulador-wrapper button {
	border-radius: 50px;
	background: linear-gradient(33deg, #0FF 9.95%, #4650FF 60.13%);
	color: #FFF;
	font-size: 25px;
    font-weight: 700;
    border: 0;
    padding: 15px 30px;
    margin-top: 20px;
}


.input-block {
	position: relative;
}

.tooltip-icon {
    color: #000000;
    cursor: pointer;
    margin-left: 5px;
	
}

.tooltip {
    display: inline-block;
    position: absolute;
    left: 240px;
    top: -5px;
}

.tooltip-text {
    display: inline-block;
    position: absolute;
    left: 470px;
    top: -5px;
}

.tooltip .tooltip-text,
.tooltip-text .tooltip-text {
    visibility: hidden;
    width: 330px;
    position: absolute;
    background-color: #39414d;
    border: 1px solid #39414d;
    z-index: 1;
	margin-top: 15px;
    left: 30%;
    opacity: 0;
    transition: opacity 0.3s;
}

.input-block .tooltip-text p {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    padding: 15px;
    line-height: 18px;
}

.tooltip .tooltip-text img {
    width: 100%; 
    height: auto;
}

.tooltip:hover .tooltip-text,
.tooltip-text:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-icon {
    cursor: pointer;
}

.input-dual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 30px;
}

.input-block p {
	margin-bottom: auto;
	color: #1316FF;
	font-size: 18px;
	font-weight: 700;
}

.button-center p {
	color: #4650FF;
	font-size: 14px;
}

.input-radio {
	position: relative;
}

.input-radio .error-message {
    font-size: 14px;
	position: absolute;
    bottom: -15px;
    left: 0;
}
.simulador-wrapper input:not([type="radio"]),
.simulador-wrapper select {
	width: 100%;
	border-radius: 20px;
	border: 1px solid #4650FF;
	background: #FFF;
	margin-top: 8px;
	padding: 10px 20px;
}

.input-block {
	margin-bottom: 30px;
	display: flex;
    flex-direction: column;
}

.simulador-second-step {
	border-radius: 38.857px;
	background: linear-gradient(180deg, rgba(0, 255, 255, 0.63) 0%, rgba(255, 255, 255, 0.00) 100%);
	padding: 70px 80px;
	margin-top: 20px;
}

.select-simple-display .tooltip .tooltip-text {
	width: 430px;
	left: -65%;
}

.input-block fieldset {
	border: 0;
	display: flex;
	padding: 0;
}

.input-block div, 
.input-block p {
	margin-right: 20px;
}

.input-radio {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.input-radio input:not([type='radio']) {
	width: auto;
	margin: 0;
}

.input-radio p,
.input-radio label {
	margin-bottom: 0 !important;
}

.simulador-variables,
.select-simult-display {
	display: none;
}

.input-radio input[type='radio'] {
	border: 1px solid #1316FF;
	width: 19px;
   	height: 19px;
}

.input-radio input[type='radio']:after {
	background: #1316FF;
}

.simulador-third-step {
	border-radius: 30px;
	background: linear-gradient(180deg, #4650FE -6.38%, rgba(255, 255, 255, 0.00) 96.25%);
	padding: 30px;
	position: relative;
}

.simulador-third-header {
	text-align: center;
	color: #fff;
}

.simulador-third-header h3 {
	font-size: 40px;
	color: #fff;
	margin: 0;
    margin-bottom: 5px;
}

.simulador-third-header p {
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 3px;
}

.simulador-third-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px;
    margin-top: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.simulador-third-results img {
	width: 100%;
	height: auto;
}

.simulador-third-results div {
    display: flex;
    align-items: flex-end;
    position: relative;
}

.simulador-third-results-left img {
	max-height: 250px;
}

.simulador-results-text div {
	font-size: 55px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	font-family: sailecbold;
}

.simulador-results-text p {
    font-size: 15px;
    font-weight: 700;
    color: #00FFFE;
    line-height: 1.2;
    margin-top: 8px;
}

.simulador-results-text {
	position: absolute !important;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center !important;
	text-align: center;
}

.simulador-third-results-left .simulador-results-text {
	top: 95px;
}

.simulador-results-text div:after,
.simulador-third-save div:after {
	content: '€';
    font-size: 30px;
    position: relative;
    top: -6px;
}

.simulador-third-save {
	border-radius: 50%;
	width: 153px;
	height: 153px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #00FFFE;
	color: #4650FF;
	position: absolute;
	top: 130px;
    right: -45px;

}

.simulador-third-save p {
	font-size: 15px;
	font-weight: 700;
}

.simulador-third-save div {
	font-size: 52px;
	font-family: sailecbold;
	line-height: 1;
}

.simulador-third-alert {
    background-color: #fff;
    border: 1px solid var(--blue);
    border-radius: 10px;
    font-family: sailecbold;
    font-size: 14px;
    color: var(--blue);
    padding: 10px;
    max-width: 540px;
    margin: 0 auto;
    margin-top: 40px;
}

.simulador-third-legal {
    font-family: sailecregular;
    color: #595959;
    font-size: 13px;
    margin: 0 auto;
    margin-top: 20px;
    max-width: 540px;
}

.button-center {
	text-align: center;
}

.simulador-second-step button {
    padding: 15px 70px;
}

.simulador-second-step,
.simulador-third-step {
	display: none;
}

.simulador-third-step {
	margin-top: 20px;
}




/* -------------------------------------------*-----------------*--------------------------------------------------*/
/*                    -----------------------*   MEDIA QUERIES   *------------------------                         */
/* -------------------------------------------*-----------------*--------------------------------------------------*/



@media (max-width: 1280px) { 

	.section {
		padding: 0 30px;
	}

}

@media (max-width: 1050px) {



}

@media (max-width: 991px) { 



}

@media (max-width: 899px) { 
	.input-block p {
		font-size: 15px;
	}

	.tooltip-text {
		left: 435px;
	}

	.tooltip {
		left: 200px;
	}

	.tooltip .tooltip-text, .tooltip-text .tooltip-text {
		left: -150px;
	}
}


@media (max-width: 768px) {
	.section {
		padding: 0 40px;
	}

	.input-dual,
	.input-radio {
		display: block;
	}

	.tooltip-text {
        left: 200px;
    }
}

@media (max-width: 575px) {
	.simulador-third-results-left .simulador-results-text {
		top: 33px;
	}

	.simulador-results-text div {
		font-size: 40px;
	}

	.simulador-results-text {
		top: 40px;
	}

	.simulador-second-step {
		padding: 45px 35px;
	}	

	.simulador-third-save {
		width: 140px;
		height: 140px;
		top: 30px;
		right: -45px;
	}
}