/************* ESTILOS DEL LOADIN MATERIAL ***************/
.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite, colorsIngenio 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colorsIngenio 5.6s ease-in-out infinite;
}

@-webkit-keyframes colorsIngenio {
    0% {
        stroke: #4285F4;
    }

    25% {
        stroke: #DE3E35;
    }

    50% {
        stroke: #F7C223;
    }

    75% {
        stroke: #1B9A59;
    }

    100% {
        stroke: #4285F4;
    }
}

@keyframes colorsIngenio {
    0% {
        stroke: #4285F4;
    }

    25% {
        stroke: #DE3E35;
    }

    50% {
        stroke: #F7C223;
    }

    75% {
        stroke: #1B9A59;
    }

    100% {
        stroke: #4285F4;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

.ParentCenter {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/**************** Clases Utiles ******************/
.textoEmastErp:first-letter {
    text-transform: uppercase
}

.textoEmastErp {
    text-transform: lowercase
}

/**************** SOBRE-ESCRITURA DE CLASES  *************/

/****** CLASES DE jquery Valid ******/
/* Permite que los mensajes de jquery validate no ocupen espacio en el DOM(que hace que desplacen los otros elementos)*/
.validation-invalid-label {
    float: left;
    position: absolute !important;
    top: 32px !important;
    left: 0px !important;
    text-align: initial;
}

/* Permite que los mensajes de jquery validate no ocupen espacio en el DOM(que hace que desplacen los otros elementos)*/
.validation-valid-label {
    float: right;
    position: absolute !important;
    top: 32px !important;
    width: 100% !important;
    text-align: initial;
    /*height: 20px;*/
}

/* permite poner los mensajes de error de jquery validate muy cerquita de los inputs*/
label[for=Usuario] {
    /*top: 34px !important;*/
}

/* Permite poner los chulitos verdes de jquery validate a la derecha*/
.validation-valid-label:before {
    /*left: initial !important;
    right: 0 !important;*/
}

.form-group {
    margin-bottom: 2rem;
}