@font-face{
font-family: LatoRegular;
src: url('Lato-Regular.ttf');
}

@font-face{
font-family: LatoBlack;
src: url('Lato-Black.ttf');
}


@font-face{
font-family: LatoBold;
src: url('Lato-Bold.ttf');
}

body {
}

.modalCenter{
    text-align:center;
}

.authProgressBar{
    margin-bottom: 1%;
}

.wrapperModal-progress-bar {
    opacity: 1;
    display:inline-block;
    position:relative;
    padding: 5px;
    border: 3px solid #F1F1F2;
    border-left: white;
    border-right: white;
    border-top: white;
    margin-bottom:2%;
}

.bar0
{
    height: 10px; 
    width: 0px; 
    background-color: #DBE1F2;
}

.bar30
{
    height: 10px; 
    width: 27%; 
    background-color: #DBE1F2;
}

.bar80
{
    height: 10px; 
    width: 77%; 
    background-color: #DBE1F2;
}

.bar50
{
    height: 10px; 
    width: 48%; 
    background-color: #DBE1F2;
}

.bar100
{
    height: 10px; 
    width: 90%; 
    background-color: #DBE1F2;
}

.percent0
{
    text-align: left;
    font: 12px/24px Lato;
    font-weight: bold;
    letter-spacing: 0;
    color: #3C5DBC;
    opacity: 1;
    position:absolute;
    top: -1px;
    left: 0px;
    font-family: inherit;
    font-style: inherit;
    font-size: 0.85em;
}

.percent30
{
    text-align: left;
    font: 12px/24px Lato;
    font-weight: bold;
    letter-spacing: 0;
    color: #3C5DBC;
    opacity: 1;
    position:absolute;
    top: -1px;
    left: 28%;
    font-family: inherit;
    font-style: inherit;
    font-size: 0.85em;
}

.percent80
{
    text-align: left;
    font: 12px/24px Lato;
    font-weight: bold;
    letter-spacing: 0;
    color: #3C5DBC;
    opacity: 1;
    position:absolute;
    top: -1px;
    left: 77%;
    font-family: inherit;
    font-style: inherit;
    font-size: 0.85em;
}

.percent50
{
    text-align: left;
    font: 12px/24px Lato;
    font-weight: bold;
    letter-spacing: 0;
    color: #3C5DBC;
    opacity: 1;
    position:absolute;
    top: -1px;
    left: 50%;
    font-family: inherit;
    font-style: inherit;
    font-size: 0.85em;
}

.percent100
{
    text-align: left;
    font: 12px/24px Lato;
    font-weight: bold;
    letter-spacing: 0;
    color: #3C5DBC;
    opacity: 1;
    position:absolute;
    top: -1px;
    left: 91%;
    font-family: inherit;
    font-style: inherit;
    font-size: 0.85em;
}

.modal-container-input-points
{
    border: 1px solid #D0D2D3;
    margin-top: 7%;
    margin-bottom: 5%;
    margin-left: 5%;
    margin-right: 5%;
}

.modal-container-input-points h3 
{
    margin-top      : -5%;
    background-color: white;
    padding         : 2%;
    margin-left     : 2%;
    max-width       : 80%;
    font-family     : LatoBold;
    font-size       : 1.004em;
    color           : #3C5DBC;
}
    
.modal-container-input-points p 
{   
    margin-bottom: 30px;
    margin-top: 10px;
}


.authTitle {
	text-align: center;
	font-family: LatoBlack;	
	color: #2A2A2A;
	width: 100%;
	margin-bottom: 4%;
	margin-top: 4%;
    font-size: 1.1em;
}

.authError{
    font-family: LatoBold;
    font-size: 0.8em;
    color: #ED5350
}

.attributeListCheckbox
{
    margin-left:15px;
    vertical-align: middle;
}

.attributeListLabel {
    margin-left: 1%;
}

.attributeListCheckbox input[type="checkbox"]
{
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 11px;
	border-radius: 3px;
	display: inline-block;
	position: relative;       
}

.attributeListCheckbox input[type="checkbox"]:active, .attributeListCheckbox input[type="checkbox"]:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.attributeListCheckbox input[type="checkbox"]:checked {
	background-color: #3c5dcd;
	border: 1px solid #cacece;
	color: #fafafa;
}

.attributeListCheckbox input[type="checkbox"]:checked:after {
	content: '\2714';
    font-size: 17px;
    position: absolute;
    top: -5%;
    left: 20%;
    color: #fafafa;
}

.authSelectTitle {
    font-family     : LatoBold;
    font-size       : 1.04em;
    color           : #3C5DBC;
    margin-left     : 5%;
    margin-bottom   : 5%;
}

.authSelect{
    width: 100%;
    padding-left: 5%;
    display:flex;
    display:-ms-flexbox;
    
}

.authSelect ul li:first-child {
    padding-bottom: 100%;
}

.authSelect ul li:not(:first-child) {
    margin-top: 100%;
    padding-bottom: 100%;
}

.authSelectLabel
{
    white-space: nowrap;
    font-size: 1.004em;
}


.authSelectOption{
    list-style: none;   
}



.authSelectOption input[type=radio]
{
    display: none;
}



.authSelectOption label  
{
    display: block;
    float: left;
    color: #000;
    cursor: pointer;
}

.authSelectOption input[type=radio] + label
{

    width            : 1.25em;
    height           : 1.25em;
    border           : 0.1em solid #000000;
    border-radius    : 0.625em;
    vertical-align   : middle;
    line-height      : 1.25em;
    text-indent      : 2em;
    font-family      : LatoRegular;
    font-size        : 1.004em;
}

.authSelectOption input[type=radio]:checked + label
{
    border           : 0.1em solid #3C5DBC;
    background       : #3C5DBC;
    font-family      : LatoBold;
}

.registryLinkArea
{
    margin-left: 10%;
}

.divMainButtons
{
    bottom: 4%;
    left:0%;
    position:fixed;
    width:100%;
    text-align: center;
}

.divMainButtonsMainPage
{
    bottom: 4%;
    width:100%;
    text-align:center;
    margin-left:auto;
}

.optionalLabel {
    font-family: LatoBold;
    font-size: 1.004em;
    margin-left: 5%;
    padding-bottom: 2%;
    color: #3c5dcd;
}



.divRecoveryButtons {
	padding:0;
    text-align: center;
	width: 100%;
}



.btn-back-modal-only {
	background-color: #F1F1F2;
    font-size       : 1.004em;
    font-family     : LatoBold;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 4% 2% 25%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;
}

.btn-back-modal-only:hover {
	background-color: #F1F1F2;
    font-size       : 1.004em;
    font-family     : LatoBold;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 4% 2% 25%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;
}

.btn-back-modal-only:focus {
	background-color: #F1F1F2;
    font-size       : 1.004em;
    font-family     : LatoBold;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 4% 2% 25%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;
}

.btn-back-modal {
	background-color: #F1F1F2;
    font-size       : 1.004em;
    font-family     : LatoBold;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 5% 2% 25%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
}

.btn-back-modal:hover {
	background-color: #F1F1F2;
    font-family     : LatoBold;
    font-size       : 1.004em;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 5% 2% 25%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
}

.btn-back-modal:focus {
	background-color: #F1F1F2;
    font-family     : LatoBold;
    font-size       : 1.004em;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 5% 2% 25%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
}

.btn-back-modal-only:active {
	background-color: #F1F1F2;
    font-size       : 1.004em;
    font-family     : LatoBold;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 4% 2% 25%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;
}


.btn-forward-modal {
	background-color: #3C5DBC;
	border          : 0;
    font-size       : 1.004em;
    font-family     : LatoBold;
	color           : #FFFFFF;
	text-transform  : uppercase;
	padding         : 2% 20% 2% 5%;
	background-image: url('right_arrow.svg');
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
}

.btn-forward-modal:hover {
	background-color: #3C5DBC;
	border          : 0;
    font-size       : 1.004em;
    font-family     : LatoBold;
	color           : #FFFFFF;
	text-transform  : uppercase;
	padding         : 2% 20% 2% 5%;
	background-image: url('right_arrow.svg');
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
}

.btn-forward-modal:focus {
	background-color: #3C5DBC;
	border          : 0;
    font-size       : 1.004em;
    font-family     : LatoBold;
	color           : #FFFFFF;
	text-transform  : uppercase;
	padding         : 2% 20% 2% 5%;
	background-image: url('right_arrow.svg');
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
}

.btn-forward-modal-only {
	background-color: #3C5DBC;
	border          : 0;
    font-size       : 1.004em;
    font-family     : LatoBold;
	color           : #FFFFFF;
	text-transform  : uppercase;
	padding         : 2% 20% 2% 5%;
	background-image: url('right_arrow.svg');
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;
}

.btn-forward-modal-only:hover {
	background-color: #3C5DBC;
	border          : 0;
    font-size       : 1.004em;
    font-family     : LatoBold;
	color           : #FFFFFF;
	text-transform  : uppercase;
	padding         : 2% 20% 2% 5%;
	background-image: url('right_arrow.svg');
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;

}

.btn-forward-modal-only:focus {
	background-color: #3C5DBC;
	border          : 0;
    font-size       : 1.004em;
    font-family     : LatoBold;
	color           : #FFFFFF;
	text-transform  : uppercase;
	padding         : 2% 20% 2% 5%;
	background-image: url('right_arrow.svg');
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;
}

.btn-back-registry,
.btn-back-registry:hover,
.btn-back-registry:focus{
    background-color: #F1F1F2;
    font-size: 1.004em;
    font-family: LatoBold;
    border: 0;
    color: #3C5DBC;
    text-transform: uppercase;
    padding: 2% 5% 2% 20%;
    background-image: url(left_arrow.svg);
    background-position: 10% 50%;
    background-repeat: no-repeat;
    background-size: 12%;
}

.btn-forward-registry,
.btn-forward-registry:hover,
.btn-forward-registry:focus{
    background-color: #3C5DBC;
    border: 0;
    font-size: 1.004em;
    font-family: LatoBold;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 2% 17% 2% 5%;
    background-image: url(right_arrow.svg);
    background-position: 90% 50%;
    background-repeat: no-repeat;
    background-size: 12%
}


@media (min-width: 450px){

    .demandAttrListli {
        margin-left: 5%;
        margin-top: 20px;
        padding:0;
    }
}

@media (max-width: 400px)
{
    .btn-forward-modal,
    .btn-forward-modal:hover,
    .btn-forward-modal:active,
    .btn-forward-modal:focus {
	background-color: #3C5DBC;
    border: 0;
    font-size: 1.004em;
    font-family: LatoBold;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 2% 11% 2% 5%;
    background-image: url(right_arrow.svg);
    background-position: 90% 50%;
    background-repeat: no-repeat;
    background-size: 12%;
    }


    

    .btn-forward-modal-only,
    .btn-forward-modal-only:hover,
    .btn-forward-modal-only:active,
    .btn-forward-modal-only:focus {
	    background-color: #3C5DBC;
	    border          : 0;
        font-size       : 1.004em;
        font-family     : LatoBold;
	    color           : #FFFFFF;
	    text-transform  : uppercase;
	    padding         : 2% 11% 2% 5%;
	    background-image: url('right_arrow.svg');
	    background-position: 90% 50%;
	    background-repeat: no-repeat;
	    background-size : 12%;
        left: 15%;
        position: relative;
    }

    .modal-container-input-points
    {
        border: 1px solid #D0D2D3;
        margin-top: 0%;
        margin-bottom: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }


    .btn-back-modal,
    .btn-back-modal:hover,
    .btn-back-modal:active,
    .btn-back-modal:focus{
       background-color: #F1F1F2;
        font-family: LatoBold;
        font-size: 1.004em;
        border: 0;
        color: #3C5DBC;
        text-transform: uppercase;
        margin-left: 3%;
        padding: 2% 5% 2% 14%;
        background-image: url(left_arrow.svg);
        background-position: 10% 50%;
        background-repeat: no-repeat;
        background-size: 12%;
    }

    .btn-back-modal-only,
    .btn-back-modal-only:hover,
    .btn-back-modal-only:focus,
    .btn-back-modal-only:active {
	background-color: #F1F1F2;
    font-size       : 1.004em;
    font-family     : LatoBold;
	border          : 0;
	color           : #3C5DBC;
	text-transform  : uppercase;
	padding         : 2% 4% 2% 19%;
	background-image: url('left_arrow.svg');
	background-position: 10% 50%;
	background-repeat: no-repeat;
	background-size : 12%;
    left: 15%;
    position: relative;
    }
    
}



.entityMessage
{
    margin-left     : 5%;
    margin-right    : 5%;
    font-family     : LatoRegular;
    font-size       : 1.004em;
    line-height: 1.506em;
}

.modal-info-icon{
    background-image: url('information.svg');
    background-size: 15px;
    display: block;
    background-position: center;
    height: 15px;
    width: 15px;
    background-repeat: no-repeat;
    display: inline-block;
}

.attributeList{
    width: 100%;
    padding-left: 5%;
    display:flex;
    display:-ms-flexbox;
}

.attributeListItem
{
    list-style: none;
    padding-top: 2%;
    padding-bottom: 2%;
    font-family: LatoBold;
    font-size: 1.004em;
}
/*
.attributeListItem:first-child{
    border-top: solid 1px #E6E7E8;
    border-bottom: solid 1px #E6E7E8;
}

.attributeListItem:not(:first-child){
    border-top: solid 1px #E6E7E8;
    border-bottom: solid 1px #E6E7E8;
}*/

.modal-area-destaque {
        text-align:center;
    }





.loadingSmall {
height: 50px;
width: 50px;
overflow: show;
margin: auto;
top: 5%;
}


.loadingSmall:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

.loadingSmall:not(:required):after {
content: '';
display: inline-block;
width: 50px;
height: 50px;
/*margin-top: 10em !important;*/
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
 border: 7px solid #f3f3f3;
    border-radius: 50%;
    border-top: 7px solid #3654a9;
    border-bottom: 7px solid #3654a9;
}

@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

.waitTextTitle{
    font-family:LatoBold;
    font-size: 1em;
    text-transform: uppercase;
}

.waitText{
    font-family:LatoRegular;
    font-size: 0.9em;
}

.mobile-note{
    font-family: LatoRegular;
    font-size: 0.84em;
    text-align:left;
}

.confirmationAttrDesc{
    font-family:LatoBold;
    font-size: 0.9em;
    word-wrap:normal;
}

.confirmationAttrVal {
    word-wrap: normal;
    font-family: LatoRegular;
    font-size: 0.8em;
    
}

.consentAttributeListItem
{
    padding-top: 2%;
    padding-bottom: 2%;
}

.consentAttributeListItem:first-child{
    border-top: solid 1px #E6E7E8;
    border-bottom: solid 1px #E6E7E8;
}

.consentAttributeListItem:not(:first-child){
    padding-top:0%;
    border-bottom: solid 1px #E6E7E8;
}

h1 span {
    text-align: center;
	font-family: LatoBlack;	
	color: #2A2A2A;
	width: 100%;
    font-size: 1.1em;
}

h2 span {
    /*text-align: center;*/
	font-family: LatoBlack;	
	color: #3C5DBC;
	width: 100%;	
    font-size: 1.05em;
}

.helpCardContainer{
    display: block;
    padding: 10px 15px;
    margin: 10px 0;
    height: auto;
    width: 100%;
    background-color: white !important;
    border: 1px solid #D0D2D3;
    font-family: LatoRegular;
}

.helpCardContainer .helpCardTitle {
    font-size: 20px;
    text-align: left;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 20px 30px;
    background-image: url(fa/img/Ajuda/plus.html);
    background-color: white !important;
    padding-right: 15%;
    cursor: pointer;

}

.helpCardContainer .helpCardTitle:not(.collapsed) {
    font-weight: bold;
    color: #3C5DBC;
    background-image: url(fa/img/Ajuda/minus.html);
}

.helpCardContainer .helpCardBody {
    margin-top: 25px;
}


.helpButton {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #3c5dcd !important;
}

@media screen and (max-width: 450px) {
    .helpVideo {
        display:none;
    }
    .helpVideoLink{
        display: inline;
        width:100%;
        height: 100%;
        cursor: pointer;
    }
}

@media screen and (min-width: 450px) {
    .helpVideoLink {
        display: none;
    }
}

.helpImage {
    width: 100%;
    height: 100%;
    max-width: 650px;
}