﻿.fba-password-validation-header {
	font-size: 15px;
	color: #3A3F51;
	font-weight: bold;
	padding: 15px 0px 5px 0px;
}

.fba-password-validation-rule {
	font-size: 14px;
	color: #656C87;
	list-style-type: none;
	padding: 0;
}

.fba-password-validation-rule-valid {
	color: #007f40;
}

	.fba-password-validation-rule-valid > em:before {
		content: "\e948"
	}

.fba-password-validation-rule-invalid {
	color: #cb0311;
}

	.fba-password-validation-rule-invalid > em:before {
		content: "\e907"
	}


.timeline-steps {
	display: flex;
	justify-content: center;
	flex-wrap: wrap
}

	.timeline-steps .timeline-step {
		align-items: center;
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 1rem
	}

@media (min-width:768px) {
	.timeline-steps .timeline-step:not(:last-child):after {
		content: "";
		display: block;
		border-top: .50rem dotted #337ab7;
		width: 3.3rem;
		position: absolute;
		left: 7.5rem;
		top: .3125rem
	}

	.timeline-steps .timeline-step:not(:first-child):before {
		content: "";
		display: block;
		border-top: .50rem dotted #337ab7;
		width: 3.3rem;
		position: absolute;
		right: 7.5rem;
		top: .3125rem
	}
}

.timeline-steps .timeline-content {
	width: 10rem;
	text-align: center
}

	.timeline-steps .timeline-content .inner-circle {
		border-radius: 1.5rem;
		height: 1rem;
		width: 1rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background-color: #337ab7
	}

		.timeline-steps .timeline-content .inner-circle:before {
			content: "";
			background-color: #337ab7;
			display: inline-block;
			height: 3rem;
			width: 3rem;
			min-width: 3rem;
			border-radius: 6.25rem;
			opacity: .5
		}

/* Concluded steps start */
.timeline-steps .concluded .inner-circle {
	background-color: #1e983b !important
}

	.timeline-steps .concluded .inner-circle:before {
		background-color: #1e983b !important;
	}

.timeline-steps .current .inner-circle:before {
	animation: fadeinout 3s ease-in-out;
	animation-iteration-count: infinite;
}

.timeline-steps .error .inner-circle {
	background-color: #ec2121 !important
}

	.timeline-steps .error .inner-circle:before {
		background-color: #ec2121 !important;
	}

.timeline-steps .concluded-start:not(:last-child):after {
	border-top: .50rem dotted #1e983b !important;
}

.timeline-steps .concluded-end:not(:first-child):before {
	border-top: .50rem dotted #1e983b !important;
}

.timeline-steps .active-start:not(:last-child):after {
	animation-name: fade;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.timeline-steps .active-end:not(:first-child):before {
	animation-name: fade;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* Concluded steps end */

/* Fade animation start */
@keyframes fade {
	0% {
		opacity: 1;
	}

	10% {
		opacity: 0.8;
	}

	20% {
		opacity: 0.6;
	}

	30% {
		opacity: 0.4;
	}

	40% {
		opacity: 0.2;
	}

	50% {
		opacity: 0;
	}

	60% {
		opacity: 0.2;
	}

	70% {
		opacity: 0.4;
	}

	80% {
		opacity: 0.6;
	}

	90% {
		opacity: 0.8;
	}
}

@keyframes fadeinout {
	0%,100% {
		opacity: .5;
	}

	50% {
		opacity: 1;
	}
}
/* Fade animation end */


.timeline-steps .timeline-content .timeline-step-current .inner-circle {
	background-color: #3b82f6 !important
}

	.timeline-steps .timeline-content .timeline-step-current .inner-circle:before {
		background-color: #3b82f6 !important;
	}

.img-logo {
	width: 150px;
}

#reloadBtn a{
	color: #fff;
}

.phoneType_wrapper > p {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: -6px;
}

.phoneType_radios {
	display: flex;
	align-items: center;
	gap: 18px;
}

.phoneType_radios input[type=radio] {
	accent-color: #337AB7;
	cursor: pointer;
}

.phoneType_radios > div {
	display: flex;
	align-items: center;
}

.phoneType_radios > div > label {
	margin-bottom: 0;
	font-weight: normal !important;
	cursor: pointer;
	padding-left: 6px;
}

.phoneInputs_wrapper {
	display: flex;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 24px;
}

#divDDD {
	max-width: 72px;
}

#divCodigoPais, .phoneInputs_wrapper {
	display: none;
}

.phoneNumber_wrapper {
	width: 100%;
}

#ddiCountryCode {
	text-overflow: ellipsis;
    white-space: nowrap;
}

.actionsWrapper {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#mfaContainer summary {
	font-weight: bold;
	color: #337AB7;
}

#btnResendCode {
	display: none;
	background-color: transparent;
    border: 0;
    font-weight: bold;
    color: #3a3f51;
    text-decoration: underline;
	cursor: pointer;
	margin-top: 6px;
}

#btnResendCode[disabled],
#btnResendCode:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

#btnResendCode[disabled].successResend,
#btnResendCode:disabled.successResend {
	color: #1e983b;
}

#dicaCelular {
	color: #337AB7;
    font-weight: bold;
}

#labelSyncPhone {
	font-style: italic;
	font-size: 14px;
	display: inline-block;
}

.phoneTip_wrapper {
	border-bottom: 1px solid #e9e9e9;
	margin-bottom: 16px;
}

#btnSyncPhone {
	margin-bottom: 8px;
	height: 28px !important;
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: #337AB7;
	font-weight: bold;
	text-decoration: underline;
	margin-left: -4px;
}

#btnSyncPhone[disabled],
#btnSyncPhone:disabled {
	color: #1e983b;
	opacity: 0.6;
	cursor: not-allowed;
}