/* 
    Created on : 1/12/2022, 04:57:27 PM
    Author     : jsmartinezr
*/

.material_input
{
    /*font-family: 'Montserrat' !important;
    font-size: 18px !important;*/
    position: relative;
    margin-bottom:20px;
    margin-top: 25px;
    /*padding-left: 0 !important;
    padding-right: 0 !important;*/
}

input[type="text"], input[type="number"], select, textarea
{
    /*font-size:18px;*/
    padding:2px 2px 2px 4px;
    display:block;
    width:100%;
    border:none;
    border-bottom:1px solid #393C3E;
    border-radius: 0px;
}

input[type="checkbox"]
{
    margin: 6px 0 0;
}

select
{
    padding:4px 2px 2px 0px !important;
}

textarea
{
    width: 100%;
}

input:focus, select:focus, textarea:focus
{
    outline:none;
}

.lblMaterial, input:optional ~ .lblMaterial
{
    color:#999;
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:3px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

input:focus ~ .lblMaterial, input:valid ~ .lblMaterial, 
select:focus ~ .lblMaterial, select:valid ~ .lblMaterial, 
textarea:focus ~ .lblMaterial, textarea:valid ~ .lblMaterial
{
    font-size:14px;
    color:#999;
    top:-20px;
}

.bar
{
    position:relative;
    display:block;
    width:100%;
}

.bar:before, .bar:after
{
    content:'';
    height:2px;
    width:0;
    /*bottom:1px;*/
    position:absolute;
    background:#393C3E;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

.bar:before
{
    left:50%;
}

.bar:after
{
    right:50%;
}

input:focus ~ .bar:before, input:focus ~ .bar:after
{
    width:50%;
}

/*ESTO SE PODRÍA ELIMINAR*/
.highlight
{
    position:absolute;
    height:100%;
    width:100%;
    top:-4%;
    left:0;
    pointer-events:none;
    opacity:0;
}

input:focus ~ .highlight
{ 
    -webkit-animation:inputlighter 0.3s ease;
    -moz-animation:inputlighter 0.3s ease;
    animation:inputlighter 0.3s ease;
}

@-webkit-keyframes inputlighter
{
    from
    {
        opacity:0.5;
        background:#393C3E;
    }
    to
    {
        width:0;
        background:transparent;
    }
}

@-moz-keyframes inputlighter
{
    from
    {
        opacity:0.5;
        background:#393C3E;
    }
    to
    {
        width:0;
        background:transparent;
    }
}
@keyframes inputlighter
{
    from
    {
        opacity:0.5;
        background:#393C3E;
    }
    to
    {
        width:0;
        background:transparent;
    }
}