@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@-webkit-keyframes rotate360 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

/*bordes redondos contenedor login*/
div.md-card {
    border-radius: 7px;
    border-style:hidden;
    margin: auto;
    top:auto;
    bottom:auto;
    max-width: 330px;
    
}

/*detalle de border-bottom de contenedor login*/
#login_form {
    border-bottom-color: transparent;
    margin: auto;
    top:auto;
    bottom:auto;
    max-width: 320px;
}

/*posicion de login*/
#login_page_wrapper {
    position: relative;
    margin: 5px auto 40px auto;
    top: auto;
    left: auto;
    right: auto;
    bottom:auto;
    max-width: 340px;
}

/*ancho de cajas de texto*/
.input {
    width: 95%;
}


.form {
    height:auto;
    margin: 0 auto;

}

/*detalle de cajas input sobreadas y afinamiento de lineas cajas de textos*/
.md-input-wrapper {
    background-color:ghostwhite;
    border-radius:8px;
}

/*linea bottom caja de texto contraseña contenedor login*/
#login_password {
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
}

/*linea bottom caja de texto usuario-login contenedor login*/
#login_username {
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
}

/*detalle del borde verde de contenedor ayuda*/
.md-card .md-card-content {
    border-bottom-color: transparent;
    border-bottom-style: hidden;
}

/*linea bottom caja de texto en "tu correo electronico* seccion restablecer contraseña*/
#login_email_reset {
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
}

#loginNotifocation, #loginNotificacionSes, #loginNotifocationSuccess, #loginNotifocationWarning, #loginBloqMayus {
    position: fixed;
    bottom: 18px;
    text-align: center;
    color: white;
    padding: 10px;
    border-radius: 4px;
    width: 400px;
    left: 50%;
    margin-left: -199px;
    display: none;
}

.loaderspinner {
    color: rgba(4,106,116,1);
    font-size: 45px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    /*position: relative;*/
    transform: translateZ(0);
    animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
    z-index: 90000;
    position: fixed;
    /*width: 100px;
    height: 100px;*/
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

@keyframes mltShdSpin {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes round {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


.cdspinner {
    position: fixed;
    background-color: rgba(255,255,255,0.6);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 90000;
    display: none;
}
    .cdspinner::after {
        /*content: 'Bienvenido a ControlDoc';*/
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        width: 300px;
        height: 100px;
        left: 50%;
        top: 61%;
        /*margin-left: -130px;*/
        margin-left: -105px;
        z-index: 90003;
    }
#spin-spinner {
    position: fixed;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    border-radius: 60px;
    -webkit-animation: 4s rotate360 linear infinite reverse;
    animation: 4s rotate360 linear infinite reverse;
    z-index: 90002;
}

.logocdspinner {
    position: fixed;
    background-color: rgba(255,255,255,0.1);
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -35px;
    z-index: 90001;
}

    .logocdspinner:before {
        content: "";
        display: block;
        position: relative;
        width: 45px;
        height: 45px;
        background: #1ccbf3;
        opacity: 0.7;
        border-bottom-left-radius: 30px;
        border-top-right-radius: 30px;
        -ms-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
        left: 23px;
        top: 8px;
    }

    .logocdspinner:after {
        content: "";
        display: block;
        position: relative;
        width: 45px;
        height: 45px;
        background: #94d646;
        opacity: 0.7;
        border-bottom-left-radius: 30px;
        border-top-right-radius: 30px;
        -ms-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        top: -22px;
        left: 8px;
    }

.spinner1 {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    border-radius: 50px;
    -webkit-animation: 2s rotate360 linear infinite reverse;
    -moz-animation: 2s rotate360 linear infinite reverse;
    -ms-animation: 2s rotate360 linear infinite reverse;
    -o-animation: 2s rotate360 linear infinite reverse;
    animation: 2s rotate360 linear infinite reverse;
    z-index: 90000;
}

    .spinner1:after {
        content: '';
        display: block;
        position: relative;
        top: -47px;
        left: 36px;
        width: 26px;
        height: 26px;
        border-radius: 13px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

    .spinner1:before {
        content: '';
        display: block;
        position: relative;
        top: 38px;
        left: -21px;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

.spinner2 {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-animation: 2s rotate360 linear infinite reverse;
    -moz-animation: 2s rotate360 linear infinite reverse;
    -ms-animation: 2s rotate360 linear infinite reverse;
    -o-animation: 2s rotate360 linear infinite reverse;
    animation: 2s rotate360 linear infinite reverse;
    z-index: 90000;
}

    .spinner2:after {
        content: '';
        display: block;
        position: relative;
        top: 96px;
        left: 43px;
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

    .spinner2:before {
        content: '';
        display: block;
        position: relative;
        top: 46px;
        left: 105px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

.spinner3 {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-animation: 2s rotate360 linear infinite reverse;
    -moz-animation: 2s rotate360 linear infinite reverse;
    -ms-animation: 2s rotate360 linear infinite reverse;
    -o-animation: 2s rotate360 linear infinite reverse;
    animation: 2s rotate360 linear infinite reverse;
    z-index: 90000;
}

    .spinner3:after {
        content: '';
        display: block;
        position: relative;
        top: -37px;
        left: 5px;
        width: 24px;
        height: 24px;
        border-radius: 12px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

    .spinner3:before {
        content: '';
        display: block;
        position: relative;
        top: 10px;
        left: -15px;
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

.spinner4 {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-animation: 2s rotate360 linear infinite reverse;
    -moz-animation: 2s rotate360 linear infinite reverse;
    -ms-animation: 2s rotate360 linear infinite reverse;
    -o-animation: 2s rotate360 linear infinite reverse;
    animation: 2s rotate360 linear infinite reverse;
    z-index: 90000;
}

    .spinner4:after {
        content: '';
        display: block;
        position: relative;
        top: 56px;
        left: -12px;
        width: 18px;
        height: 18px;
        border-radius: 9px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

    .spinner4:before {
        content: '';
        display: block;
        position: relative;
        top: 94px;
        left: 11px;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

.spinner5 {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-animation: 2s rotate360 linear infinite reverse;
    -moz-animation: 2s rotate360 linear infinite reverse;
    -ms-animation: 2s rotate360 linear infinite reverse;
    -o-animation: 2s rotate360 linear infinite reverse;
    animation: 2s rotate360 linear infinite reverse;
    z-index: 90000;
}

    .spinner5:after {
        content: '';
        display: block;
        position: relative;
        top: 86px;
        left: 74px;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

    .spinner5:before {
        content: '';
        display: block;
        position: relative;
        top: 76px;
        left: 96px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

.spinner6 {
    position: fixed;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-animation: 2s rotate360 linear infinite reverse;
    -moz-animation: 2s rotate360 linear infinite reverse;
    -ms-animation: 2s rotate360 linear infinite reverse;
    -o-animation: 2s rotate360 linear infinite reverse;
    animation: 2s rotate360 linear infinite reverse;
    z-index: 90000;
}

    .spinner6:after {
        content: '';
        display: block;
        position: relative;
        top: 15px;
        left: 100px;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

    .spinner6:before {
        content: '';
        display: block;
        position: relative;
        top: -4px;
        left: 80px;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background-color: rgba(4,106,116,1);
        z-index: 90002;
    }

.capt {
    background-color: #e4e4e4;
    width: 100%;
    height: 85px;
    border-radius: 7px;
}

#mainCaptcha {
    position: relative;
    left: 60px;
    top: 5px;    
}

 #btncaptcha {
    position: relative;
    left: 10px;    
    bottom: 15px;
    border: none;   
    background-color: #e4e4e4;
}

#btnAudio {
    position: relative;
    left: 2px;
    bottom: 15px;
    border: none;
    background-color: #e4e4e4;
}

#txtcaptcha {
    position: relative;
    left: 10px;
    bottom: 20px;
    border: none;
}

#mainCaptcha2 {
    position: relative;
    left: 60px;
    top: 5px;
}

#btncaptcha2{
    position: relative;
    left: 10px;
    bottom: 15px;
    border: none;
    background-color: #e4e4e4;
}

#btnAudio2 {
    position: relative;
    left: 2px;
    bottom: 15px;
    border: none;
    background-color: #e4e4e4;
}

#txtcaptcha2 {
    position: relative;
    left: 10px;
    bottom: 20px;
    border: none;
}

.box {
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -3%;
    margin-top: 26%;
    font-weight: bold;
}

.googleAuth {
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    background-color: #efefef;
}

.googleAuth-input {
    background: #dddddd !important;
    border-radius: 5px !important;
    border: 1px solid #cbcbcb;
    margin: 20px 0px;
}
.google-logo {
    height: 10%;
    width: 10%;
    padding-bottom: 10px;
}

.msAuth {
    margin-top: 1.2rem;
}

.ms-button {
    display: block;
    text-align: center;
    background-color: #2F2F2F;
    color: white;
    font-family: Roboto, sans-serif;
    padding: 2px 16px;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    line-height: 42px;
    font-size: 16px;
    font-weight: 500;
}

    .ms-button img {
        margin-right: 10px;
    }

    .ms-button:hover {
        background-color: #3A3A3A;
        color: white;
        text-decoration: none;
    }

    .ms-button:focus, .ms-button:active {
        background-color: #3A3A3A;
        border-color: #1a1a1a;
        color: white;
        text-decoration: none;
    }