/*---------------------------------
###################################
-----------------------------------
    Name: Tranquilidade Public Site
    Author: Unipartner.com
-----------------------------------
###################################
---------------------------------*/

/*-----------------------------------
		CalculatorInvest
-----------------------------------*/
/***** Geral *****/
.calculator-invest p {
    color: var(--TRQ-Cinza-6);
}
/***** Smaller Phone Viewpoints *****/
@media (min-width: 320px){
	.calculator-invest{
		width: 100%;
		max-width: 1170px;
		margin: auto;
	}
	.calculator-invest .calculator-invest-logicDiv, .calculator-invest .calculator-invest-cardsDiv .investCard-calculator{
		width: 90%;
		max-width: 1170px;
		border-radius: 5px;
		padding: 40px 25px;
		margin: auto;
		box-shadow: 0px 0px 30px 0px #0000001A;
	}
	.calculator-invest .calculator-invest-logicDiv .calculator-invest-logicDiv-inputs {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
	}
	.calculator-invest .textInvest-title {
		text-align: center;
		line-height: initial;
	}
	.calculator-invest .textInvest-title p {
		line-height: 1em;
	}
	.calculator-invest .calculator-invest-logicDiv{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.calculator-invest .calculator-slide, .calculator-invest .calculator-dropdown{
		position:relative;
		width: 100%;
		max-width: 275px;
	}
	.calculator-invest .currency-code{
		position: relative;
		font-weight: 600;
	}
	.calculator-invest .currency-code::after {
		position: absolute;
		bottom: 3.4em;
		left: 6em;
		content: "€";
	}
	.calculator-invest .calculator-invest-logicDiv .invest-logicDiv-title{
		font-size: 14px;
		font-weight: 590;
		margin-top: 1.5em;
		margin-bottom: 0.7em;
		color: var(--TRQ-Cinza-6);
	}
	.calculator-invest .calculator-invest-logicDiv .calculator-slide .amountInvest-input {
		color: var(--secondary-text-color);
		font-family: var(--font-Roboto);
		font-weight: 590;
		border-radius: 5px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	}
	.calculator-invest .calculator-invest-logicDiv .calculator-slide input.amountInvest-input{
		border-color: var(--Neutrals-N4);
	}
	.calculator-invest .calculator-invest-logicDiv input.slideAmount-style {
		background: var(--Neutrals-N4);
		-webkit-appearance: none;
		height: 5px;
		border-radius: 0 10px 10px 0;
		width: 100%;
		outline: none; /* Remove outline */
		-webkit-transition: .2s; /* 0.2 seconds transition on hover */
		transition: opacity .2s;
	}
	/* Mouse-over effects */
	.calculator-invest .calculator-invest-logicDiv input.slideAmount-style:hover {
	  opacity: 1; /* Fully shown on mouse-over */
	}

	/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
	.calculator-invest .calculator-invest-logicDiv input.slideAmount-style::-webkit-slider-thumb {
		-webkit-appearance: none; /* Override default look */
		appearance: none;
		width: 21px; /* Set a specific slider handle width */
		height: 21px; /* Slider handle height */
		background: var(--white);
		border: 5px solid var(--Primary-G4);
		border-radius: 50%;
		cursor: pointer; /* Cursor on hover */
		position: relative;
		z-index: 10;
	}
	.calculator-invest .calculator-invest-logicDiv input.slideAmount-style::-moz-range-thumb {
		width: 21px; /* Set a specific slider handle width */
		height: 21px; /* Slider handle height */
		background: var(--white);
		border: 5px solid var(--Primary-G4);
		border-radius: 50%;
		cursor: pointer; /* Cursor on hover */
		position: relative;
		z-index: 10;
	}
	.calculator-invest .calculator-invest-logicDiv input.slideAmount-style::-moz-range-progress{
		background-color: var(--Primary-G4);
	}
	.calculator-invest .calculator-invest-logicDiv .slideAmountDescription-style{
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 0.5em;
		position: absolute;
	}
	.calculator-invest .calculator-invest-logicDiv .slideAmountDescription-style p{
		font-size: 12px;
		font-weight: 500;
	}
	.calculator-invest .calculator-dropdown #dropdownValues {
		font-family: var(--font-Roboto);
		font-size: 14px;
		font-weight: 590;
		color: var(--Primary-G4);
		border-radius: 5px;
		width: 100%;
		height: 40px;
		padding: 0px 5px;
		border-color: var(--Neutrals-N4);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	}
	.calculator-invest .calculator-dropdown label.dropdownCalculator{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		font-weight: 500;
		border-radius: 5px;
		width: 100%;
		height: 40px;
		padding: 7.5px 10px;
		border: 1px solid var(--Neutrals-N4);
		color: var(--Neutrals-N4);
		margin-bottom: 0;
	}
	.calculator-invest .calculator-dropdown label.dropdownCalculator:hover{
		cursor: pointer;
	}
	.calculator-invest .calculator-dropdown label.dropdownCalculator.selected{
		color: var(--Primary-G4);
	}
	.calculator-invest .calculator-dropdown label.dropdownCalculator p{
		font-size: 14px;
		font-weight: 500;
	}
	.calculator-invest .calculator-dropdown label.dropdownCalculator.selected p{
		font-weight: 590;
	}
	.calculator-invest .calculator-dropdown label.dropdownCalculator .uil-arrow-down.selected{
		transform: rotate(180deg);
		transition: transform 200ms linear;
	}
	.calculator-invest .calculator-dropdown label.dropdownCalculator .uil-arrow-down::before{
		content: '';
		display: inline-block;
		width: 11px;
		height: 8px;
		background: url(./images/black2-arrow-down_select);
		background-repeat: no-repeat;
		z-index: -1;
		cursor: pointer;
	}
	.calculator-invest .calculator-dropdown .dropdown-values{
		display: none;
		border: 1px solid var(--Neutrals-N4);
		padding: 0 1px;
		margin-top: 5px;
		border-radius: 5px;
		text-align: left;
		position: absolute;
		width: 100%;
		z-index: 5;
		background-color: var(--white);
	}
	.dropdown-values .drop-list-value{
		padding: 11px 10px;
		font-size: 14px;
		font-weight: 500;
	}
	.dropdown-values .drop-list-value:hover{
		background: #E2FBEA;
		color: var(--Primary-G4);
		cursor: pointer;
	}
	.dropdown-values .drop-list-value.selected{
		background: #E2FBEA;
		color: var(--Primary-G4);
		font-weight: 590;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dropdown-values .drop-list-value.selected::after{
		content: '';
		background: url(./images/Vector-Green-Medium-Dark);
		background-repeat: no-repeat;
		display: inline-block;
		width: 14px;
		height: 10px;
	}
	.calculator-invest .calculator-radioList{
		width: 100%;
		max-width: 275px;
	}
	.calculator-invest .calculator-radioList .radioList-calculator{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.calculator-invest .calculator-radioList .radioList-calculator .riskChoiceButton {
		border: 1px solid var(--Neutrals-N4);
		padding: 10px 20px;
		border-radius: 5px;
		width: 110px;
		height: 40px;
		font-family: var(--font-Roboto);
		font-weight: 500;
	}
	.calculator-invest .calculator-radioList .radioList-calculator .riskChoiceButton:hover{
		cursor: pointer;
		font-weight: 590;
		border: 1px solid var(--secondary-text-color);
		color: var(--secondary-text-color);
	}
	.calculator-invest .calculator-radioList .radioList-calculator .riskChoiceButton.selected {
		background-color: #E2FBEA;
		border-color: var(--secondary-text-color);
		font-weight: 590;
		color: var(--secondary-text-color);
	}
	
	/***************************************************************** Cards *****************************************************************************/
	.calculator-invest .calculator-invest-cardsDiv {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 100%;
		max-width: 1170px;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-calculator{
		max-width: 370px;
		padding: 40px 5px;
		margin-top: 3em;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-container.investCard-header{
		display: flex;
		justify-content: center;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-left{
		width: 40%;
		text-align: center;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-right {
		width: 60%;
		padding-left: 10px;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-right .investCard-header-subTitle{
		display: none;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-subTitleMobile{
		margin-top: 0.5em;
		font-size: 12px;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-subTitleMobile p{
		font-size: 12px;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-body{
		text-align: center;
		margin-top: 1em;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-body .investCard-body-title .investCard-body-minTitle{
		font-size: 11px;
		font-weight: 590;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-body .investCard-body-title .investCard-body-minValue{
		font-size: 37px;
		font-weight: 590;
		line-height: 1em;
		color: var(--secondary-text-color);
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-body .investCard-body-title .investCard-body-minValueSimbolo{
		font-size: 17px;
		font-weight: 400;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-body .investCard-body-table{
		display: flex;
		justify-content: center;
		border-top: 1px solid var(--Neutrals-N4);
		border-bottom: 1px solid var(--Neutrals-N4);
		padding: 10px 0;
	}
	.calculator-invest .investCard-body-table .investCard-body-tableLeft, .calculator-invest .investCard-body-table .investCard-body-tableCenter{
		border-right: 1px solid var(--Neutrals-N4);
	}
	.calculator-invest .investCard-body-table .investCard-body-tableLeft, .calculator-invest .investCard-body-table .investCard-body-tableCenter, .calculator-invest .investCard-body-table .investCard-body-tableRight{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 5px;
		width: 33%;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-body .investCard-body-table .investCard-body-table-texts{
		font-size: 11px;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-body .investCard-body-table .investCard-body-table-values {
		font-size: 22px;
		font-weight: 590;
		color: var(--secondary-text-color);
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer{
		margin-top: 1.5em;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer .investCard-footer-title{
		font-size: 13px;
		font-weight: 590;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer .investCard-footer-description{
		margin-top: 1em;
		font-size: 14px;
		font-weight: 500;
		display: none;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer .investCard-footer-description p{
		font-size: 13px;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer .investCard-footer-title::after {
		content: '';
		display: inline-block;
		width: 11px;
		height: 8px;
		background: url(./images/black2-arrow-down_select);
		background-repeat: no-repeat;
		margin-left: 5px;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer .investCard-footer-title.active::after {
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer-linksContainer{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 2em;

	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer-linksContainer .investCard-link1{
		background-color: var(--button-color);
		color: var(--white);
		border-radius: 5px;
		padding: 10px 20px;
		display: flex;
		justify-content: center;
		width: 50%;
		font-size: 15px;
		font-weight: 590;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer-linksContainer .investCard-link2{
		color: var(--TRQ-Cinza-6);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		font-size: 15px;
		font-weight: 590;
	}
}

@media (min-width: 360px){
	.calculator-invest .calculator-invest-cardsDiv .investCard-calculator{
		padding: 40px 25px;
	}
	.calculator-invest .currency-code::after{
		left: 8em;
	}
	.calculator-invest .calculator-radioList .radioList-calculator .riskChoiceButton{
		width: 130px;
	}
}

@media (min-width: 414px){
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-right .investCard-header-subTitle{
		display: block;
		margin-top: 0.5em;
		font-size: 13px;
		line-height: 1.2em;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-right .investCard-header-subTitle p{
		font-size: 13px;
		line-height: 1.2em;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-header-subTitleMobile{
		display: none;
	}
}

@media (min-width: 500px){
	.calculator-invest .calculator-invest-cardsDiv{
		width: 90%;
	}
}

@media (min-width: 1020px){
	.calculator-invest .calculator-invest-logicDiv .calculator-invest-logicDiv-inputs{
		flex-direction: row;
	}
	.calculator-slide {
		margin-top: 2.8em;
	}
	.calculator-invest .calculator-slide, .calculator-invest .calculator-dropdown{
		margin-right: 2em;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-calculator{
		position: relative;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer .investCard-footer-title::after{
		display: none;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer .investCard-footer-description {
		display: block;
	}
	.calculator-invest .calculator-invest-cardsDiv .investCard-footer-linksContainer{
		display: flex;
		align-items: center;
		margin-top: 2em;
		position: absolute;
		bottom: 3rem;
		width: 320px;
		max-width: 320px;
	}
}
@media (min-width: 1250px){
	.calculator-invest .calculator-invest-logicDiv, .calculator-invest .calculator-invest-cardsDiv, .calculator-invest .calculator-invest-cardsDiv .investCard-calculator{
		width: 100%;
	}
}