::-webkit-input-placeholder {
color: #888;
}

:-moz-placeholder {
color: #888;
}

::-moz-placeholder {
color: #888;
}

:-ms-input-placeholder {
color: #888;
}
/* TOPO */
/* topo fixed via js */  
.fixed{
    position: fixed;
    margin-top: calc(0% - 24px);
}
input{
    border-radius: var(--border-radius);
    height: 45px;
}
#formcliente .box-form{
    width: 100%;
    font-size: 12px;
    margin: 0 auto;
    position: relative;
}
#formcliente .box-form .topo{
    background: var(--cor-laranja);
    display: flex;
    height: var(--header-height);
    width: 100%;
    z-index: 999;
    /* box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4); */
}
#formcliente .box-form .topo{
    height: var(--header-height);
}
#formcliente .box-form .topo a:first-of-type{
width: 45px;
margin: 0 auto;
}
#formcliente .box-form .topo span{
text-align: center;
font-size: 20px;
color: white;
width: 80%;
}
#formcliente .box-form .topo .icon{
background: var(--cor-laranja);
transition: all 0.3s linear;
height: var(--header-height);
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#formcliente .box-form .topo .icon:hover{
background: white;
transition: all 0.3s linear;
color: var(--cor-laranja);
}
#formcliente .box-form .topo .icon i{
    font-size: 18px;
}

/* FORM */
#formcliente .box-form #form{
margin: auto;
}
#formcliente .box-form .box-dados .titulo{
font-size: 1.6em;
padding: 0.5em 0 0.5em 0;
line-height: 35px;
color: var(--cor-laranja);
}
#formcliente .box-form .box-dados .titulo::after{
display: flex;
margin-top: 0.5em;
content: '';
background: var(--cor-laranja);
height: 1px;
width: 100%;
margin: 0 auto;
}

#formcliente #form .anexo{
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
min-height: 140px;
box-sizing: border-box;
background: var(--cor-laranja);
padding: 0 20px;
border-radius: 5px;
margin: 0 auto;
margin-top: 2em;
width: 950px;
}
#formcliente #form .anexo .border-anexo{
position: relative;
border-color: rgba(38, 38, 38, 0.15);
background-color: rgba(230,120,23,0.9);
border-style: dashed;
border-width: 2px;
box-sizing: border-box;
text-align: center;
}
#formcliente input[type="text"],
#formcliente input[type="email"],
#formcliente input[type="url"],
#formcliente input[type="number"],
#formcliente input[type="date"],
#formcliente input[type="time"],
#formcliente select,
#formcliente textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 15px;
padding: 7px;
font-size: 14px;
}
#formcliente select{
color: black;
}
#formcliente select{
color: #888;
}
#formcliente select option:first-child{
color: #888;
}
option:checked { color: black; }

#formcliente input[type="text"]:hover,
#formcliente input[type="email"]:hover,
#formcliente input[type="url"]:hover,
#formcliente input[type="number"]:hover,
#formcliente input[type="date"]:hover,
#formcliente input[type="time"]:hover,
#formcliente select:hover,
#formcliente textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid var(--cor-laranja);
}

#formcliente input[type="text"]:focus,
#formcliente input[type="email"]:focus,
#formcliente input[type="url"]:focus,
#formcliente input[type="number"]:focus,
#formcliente input[type="date"]:focus,
#formcliente input[type="time"]:focus,
#formcliente select:focus,
#formcliente textarea:focus {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid var(--cor-laranja);
}

#formcliente textarea {
height: 200px;
max-width: 100%;
resize: none;
}

#formcliente .box-form .box-submit{
margin: 0 auto;
width: 950px;
}
#formcliente .box-submit .btn-form{
margin: 1.5em 0;
font-weight: 600;
color: white;
width: 100%;
background: var(--cor-laranja);
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.24);
}
#formcliente .box-submit button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}

#formcliente button[type="submit"]:hover {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}

#formcliente button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#formcliente input:focus,
#formcliente textarea:focus {
outline: 0;
border: 1px solid #aaa;
}

/* INFO ANEXOS */
#formcliente #infoanexo{
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
width: 950px;
box-sizing: border-box;
background: var(--cor-laranja);
padding: 0 20px;
border-radius: 5px;
margin: 0 auto;
margin-top: 2em;
display: none;
}
#formcliente #infoanexo .info{
color: white;
padding: 10px;
text-align: center;
}
#formcliente #infoanexo .info .titulo{
font-weight: 700;
display: block;
}
#formcliente #infoanexo .info .text{

}
/* ERROS */
#formcliente .error{
color: #b10;
font-size: 13px;
}
#formcliente input[aria-invalid="true"]{
border: 1px solid #b10;
}
#formcliente input[aria-invalid="true"]:focus,
#formcliente input[aria-invalid="true"]:hover{
border: 1px solid #b10;
}
/* INPUT FILE */
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
display: inline-block;
cursor: pointer;
margin: 0 auto;
}
.inputfile:focus + label,
.inputfile + label:hover {
}

.inputfile + label * {
pointer-events: none;
}

.border-anexo label i{
display: block;
font-size: 3em;
margin-bottom: 10px;
color: rgba(255,255,255, 0.5)
}

/*BNT */
.btn input[type="radio"]{
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;

}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: var(--cor-laranja);
border-color: var(--cor-laranja);
width: 50%;
}

.btn-outline-primary {
color: var(--cor-laranja);
background-color: transparent;
background-image: none;
border-color: var(--cor-laranja);
width: 50%;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}

.btn-outline-primary:hover {
color: #fff;
background-color: var(--cor-laranja);
border-color: var(--cor-laranja);
}

#formcliente .box-form .box-dados .termos{
    display: flex;
    align-items: center;
}


input[type='checkbox']{ height: 0; width: 0; }

input[type='checkbox'] + label{
transition: color 250ms cubic-bezier(.4,.0,.23,1);
}
input[type='checkbox'] + label > span{
display: flex;
justify-content: center;
align-items: center;
margin-right: 1em;
width: 15px;
height: 15px;
background: transparent;
border: 1px solid #9E9E9E;
border-radius: 2px;
cursor: pointer;  
transition: all 250ms cubic-bezier(.4,.0,.23,1);
}

input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label{
color: #fff;
}
input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span{
background: rgba(255,255,255,.1);
}


input[type='checkbox']:checked + label > span{
background: var(--cor-laranja);
animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);
}

@keyframes shrink-bounce{
0%{
    transform: scale(1);
}
33%{    
    transform: scale(.85);
}
100%{
    transform: scale(1);    
}
}

.modal{
    text-align: justify;
    border-radius: 5px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
}
.modal .img-modal{
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal .img-modal > img{
    max-width: 280px;
}
.modal .sub-modal{
    margin-top: 1em;
    font-size: 1em;
    font-weight: bold;
}
.modal .text-modal{
    font-size: 0.9rem;
}