:root {
	--bgDisabled: #EDEDED;
	--colorDisabled: #CCCCCC;
	--bgActived: #F7F7F7;
	--colorActived: #00B880;
}

@font-face {
	font-family: "FuturaPTBook";
	src: url("/fonts/venda/futura-pt-book.otf");
}

body,
#home-menu, 
.linha-divisor .cabecalho,
.linha-divisor2 .voltar, 
a.voltar-assinatura,
a.voltar-assinatura:hover,
a.voltar-assinatura:focus {
	background-color: #FFF;
}

.container {
	font-family: "FuturaPTBook";
	font-size: 14px;
}

.active {
	background-color: var(--bgActived) !important;
	color: var(--colorActived) !important;
}

.steps {
	display: inline-block;
	font-size: 15px;
	height: 62px;
	position: relative;
	vertical-align: middle;
	width: 100%;
	border: 1px solid #ccc;
	background-color: var(--bgDisabled);
	color: var(--colorDisabled);
}

.step1 {
	border-right: none;
}

.step2 {
	border-right: none;
	border-left: none;
}

.step3 {
	border-left: none;
}

.step2:after, 
.step3:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 1.25em solid #fff;
	border-top: 2em solid transparent;
	border-bottom: 2em solid transparent;
}

.step1:before, 
.step2:before {
	content: "";
	position: absolute;
	right: -1.25em;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 1.25em solid var(--bgDisabled);
	border-top: 2em solid transparent;
	border-bottom: 2em solid transparent;
}

.step1.active:before, 
.step2.active:before {
	border-left: 1.25em solid var(--bgActived);
}

.step-text {
	font-size: 16px;
	margin-top: 17px;
}

.text-overflow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.step-round {
	border-radius: 50%;
	width: 26px;
	height: 26px;
	background-color: #ccc;
	color: #fff;
	text-align: center;
	display: inline-block;
	margin-right: 5px;
	margin-left: 10px;
}

.active .step-round {
	background-color: var(--colorActived);
}

.step2 .step-text, 
.step3 .step-text {
	margin-left: 25px;
}

.login-cadastro {
	margin-top: 25px;
	margin-bottom: 25px;
}

.login-cadastro button, 
.login-cadastro button:hover, 
.login-cadastro button:focus, 
.btn-cartoes button,
.btn-cartoes button:hover,
.btn-cartoes button:focus {
	font-size: 16px;
	background-color: var(--bgDisabled);
	color: var(--colorDisabled);
	border: 1px solid #CCCCCC;
	box-shadow: none !important;
}

.login-cadastro button.active,
.btn-cartoes button.active {
	background-color: #fff !important;
	color: var(--colorActived) !important;
}

.campos-pagamento {
	margin-top: -40px;
}

.btn-cartoes {
	margin-bottom: 10px;
}

.btn-cartoes button {
	text-align: left;
}

.btn-cartoes button.active {
	background-color: var(--bgActived) !important;
}

.btn-submit, 
.btn-submit:hover, 
.btn-submit:active, 
.btn-submit:focus {
	background-color: var(--colorActived) !important;
	color: #fff !important;
	margin-top: 10px;
	border: none !important;
}

.assinatura-esqueci-senha {
	font-size: 14px !important;
}

.form-group {
	margin-bottom: 7px;
}

.form-group label {
	font-size: 14px;
	font-weight: normal;
}

.btn-opcao-pagamento img {
	width: 60px;
	filter: grayscale(100%);
}

button.btn-opcao-pagamento.active {
	background-color: var(--bgActived) !important;
	border-color: var(--colorActived) !important;
}

.btn-opcao-pagamento.active img {
	filter: grayscale(0%);
}

.valores-plano-total::before {
	width: 20%;
	left: 87%;
}

#btn-pagar {
	font-size: 16px;
	width: 70%;
	margin-left: 15%;
}

.cartao-modelo {
	background-color: #EDEDED;
	border: 1px solid #EDEDED;
	border-radius: 5px;
	padding: 30px 13px;
	color: #CCCCCC;
	font-size: 16px;
}

.cartao-modelo .chip img {
	width: 40px;
}

.cartao-modelo .numero {
	margin: 10px 0 15px;
}

@media (max-width: 991px) {
	.login-cadastro .pl-0 {
		padding-left: 15px !important;
	}

	.login-cadastro .pr-0 {
		padding-right: 15px !important;
	}

	#lc-login .px-0, 
	#lc-cadastro .px-0 {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	.steps {
		width: 112%;
	}

	.step2 .step-text, 
	.step3 .step-text {
		margin-left: 12px;
	}

	.btn-pagamento {
		margin-bottom: 15px;
	}

	.campos-pagamento {
		margin-top: 0;
	}

	#step-2 .login-cadastro .col-md-6:first-child {
		margin-bottom: 15px;
	}

	#pagamento-cartao-1 .pr-3 {
		padding-right: 15px !important;
	}

	#pagamento-cartao-1 .pl-3 {
		padding-left: 15px !important;
	}

	#btn-pagar {
		width: 100%;
		margin-left: 0;
	}
}