/*Estilos Formularios*/

form{
    margin: 10px 0;
}

label{
    font-weight: 600;
    text-transform: uppercase;
}

textarea{
    height: 300px;
    padding: 10px 40px;
}

input,select{
    padding: 0 10px;
}

input,select,textarea{
    font-family: 'Montserrat', sans-serif;
    border: none;
}

input,select,.campo,.campo_select{
    height: 40px;
}

input[type=file]{
    display: none;
}

.campo,.campo_select{
    margin: 5px 0;
    border-radius: 3px;
    overflow: hidden;
}

.campo_ok{
    border: 1px solid green;
}

.campo_error{
    border: 1px solid red;
}

.campo input:focus{
    outline: none;
}

.campo::before,.campo_select::before,.campo_textarea::before,.obligatorio::after{
    width: 40px;
    height: 40px;
    font-family: 'Font Awesome 5 Free';
    font-size: 18px;
    font-weight: 900;
    color: #454445;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.archivo .preview{
    height: 180px;
    margin: 5px 0;
    border-radius: 3px;
    background-color: #FFF;
}

.obligatorio::after{
    content: '\f069';
    font-size: 9px;
    color: #FFF;
    right: 0;
    transform: skewX(-2deg) translateX(1px);
    background-color: #454445;
}

.obligatorio.ok::after,.obligatorio.error::after{
    font-size: 12px;
}

.obligatorio.ok::after{
    content: '\f00c';
    background-color: green; 
}

.obligatorio.error::after{
    content: '\f00d';
    background-color: red;
}

button{
    height: 40px;
    padding: 0 10px;
    margin: 10px 0;
    font-family: 'Montserrat', sans-serif;
    color: #FFF;
    background-color: #454445;
    text-transform: uppercase;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

.archivo label{
    margin: 0;
    cursor: pointer;
}

.campo_select::before{
    content: '\f07c';
}

.intervalo::before{
    content: '\f2f2';
}

.texto::before{
    content: '\f303';
}

.usuario::before{
    content: '\f007';
}

.clave::before{
    content: '\f084';
}

.email::before{
    content: '\f1fa';
}

.font::before{
    content: '\f031';
}

.url::before{
    content: '\f0c1';
}

.direccion::before{
    content: '\f3c5';
}

.tlf::before{
    content: '\f095';
}

.movil::before{
    content: '\f3cd';
}

.fax::before{
    content: '\f1ac';
}

.mapa::before{
    content: '\f5a0';
}

.clock::before{
    content: '\f017';
}

.intervalo::before{
    content: '\f2f2';
}

.inbox::before{
    content: '\f01c';
}

.mensaje::before{
    content: '\f658';
}

/*Fin Estilos Formularios*/