﻿.input_animate {
    background-color: transparent;
    z-index: 2;
    transition: 0.4s;
    border: 1px solid transparent;
    width: 100%;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
    margin-top: 0rem !important;
    padding-top: 0rem !important;
    padding-bottom: 0.5rem !important;
}

.input_animate:focus {outline: none; border: 1px solid transparent !important;}

.input_animate_borderbase {border-bottom:1px solid rgba(255,255,255,0.1);}
.border-bottom-light {transition: 0.2s;}
.border-bottom-azul {border-bottom: 1px solid white;}
.border-bottom-animated {-webkit-animation: border-bottom-width 0.4s forwards; /* for less modern browsers */ animation: border-bottom-width 0.4s forwards; margin-top: -1px;}

/* Animaciones responsive */
@-webkit-keyframes border-bottom-width {
    from {width: 0%;}
    to {width: 100%;}
}

@-moz-keyframes border-bottom-width {
    from {width: 0%;}
    to {width: 100%;}
}

@-o-keyframes border-bottom-width {
    from {width: 0%;}
    to {width: 100%;}
}

@keyframes border-bottom-width {
    from {width: 0%;}
    to {width: 100%;}
}

.border_bottom_animated_inverse {
    -webkit-animation: border_bottom_animated_inverse 0.4s forwards; /* for less modern browsers */
    animation: border_bottom_animated_inverse 0.4s forwards;
    margin-top: -1px;
}


/* Animaciones responsive (vuelta a primer estado) */
@-webkit-keyframes border_bottom_animated_inverse {
    from {width: 100%;}
    to {width: 0%;}
}

@-moz-keyframes border_bottom_animated_inverse {
    from {width: 100%;}
    to {width: 0%;}
}

@-o-keyframes border_bottom_animated_inverse {
    from {width: 100%;}
    to {width: 0%;}
}

@keyframes border_bottom_animated_inverse {
    from {width: 100%;}
    to {width: 0%;}
}

/* Ocultar placeholder al hacer click */
input:focus::placeholder {opacity: 0;}

.input_animate {color:white;}
.input_animate::placeholder {color:rgba(255,255,255,0.7) !important;}
.input_animate[disabled="disabled"]::placeholder {color:#828282 !important; }
.form-control:focus {color:white;}

/* Desactivado */
.input_animate[disabled="disabled"] {opacity:0.5; background-color:rgba(255,255,255,0) !important;}

/* Estilos para label (elemento prescindible) */
.labelinput_animate {position:absolute; transition:0.4s; left:15px; z-index:1;}
.labelinput_animate.no-margin-top {margin-top:0px;}
.labelinput_animate.margin-top-minus {margin-top:-23px;}

.label_under_text {position:absolute; left:15px; bottom:-28px;}

.label_under_textSpawn {-webkit-animation: label_under_textSpawn 0.4s forwards; /* for less modern browsers */ animation: label_under_textSpawn 0.4s forwards;}

/* Animaciones responsive spawn */
@-webkit-keyframes label_under_textSpawn {
    from {left:30px; opacity:0;}
    to {left:15px; opacity:1;}
}

@-moz-keyframes label_under_textSpawn {
    from {left:30px; opacity:0;}
    to {left:15px; opacity:1;}
}

@-o-keyframes label_under_textSpawn {
    from {left:30px; opacity:0;}
    to {left:15px; opacity:1;}
}

@keyframes label_under_textSpawn {
    from {left:30px; opacity:0;}
    to {left:15px; opacity:1;}
}