/* Estilos para pantallas pequeñas (teléfono) */
@media screen and (max-width: 767px) {

    .header-wrapper-login {
        background-color: #0058a2;
        color: #FFFFFF;
        width: 100%;
        padding: 25px 4% 0 4%;
        height: 41px;
        position: absolute;
        font-size: 50px;
        z-index: 10;
        left: 0px;
    }
    #textoHeader {
        top: -55px;
        position: relative;
        font-size: 14px;
        left: 12px;
    }
    /* Estilos para teléfono aquí */
    input[type=text], input[type=password], input[type=datetime-local], input[type=tel] #UserName {
        background: url(../arrow-select.png) no-repeat right bottom #eaeaea;
        background-size: 20px auto;
        width: 100%;
        height: 36px;
        border: 0;
        top: -32px;
        padding: 0 4%;
        margin: 20px 0;
        font-size: 27px;
        outline: none;
        left: 0;
        border-radius: 0px;
        position: relative;
    }
}


/* Estilos para pantallas medianas (tablet) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .header-wrapper-login {
        background-color: #0058a2;
        color: #FFFFFF;
        width: 100%;
        padding: 25px 4% 0 4%;
        height: 41px;
        position: relative;
        font-size: 50px;
        z-index: 10;
        left: 0px;
    }
    #textoHeader {
        top: -55px;
        position: relative;
        font-size: 14px;
        left: 35px;
        font-weight: bold;
    }
    /* Estilos para tablet aquí */
    input[type=text], input[type=password], input[type=datetime-local], input[type=tel] #UserName {
        background: url(../arrow-select.png) no-repeat right bottom #eaeaea;
        background-size: 20px auto;
        width: 100%;
        height: 36px;
        border: 0;
        top: -32px;
        padding: 0 4%;
        margin: 20px 0;
        font-size: 27px;
        outline: none;
        left: 30%;
        border-radius: 0px;
        position: relative;
    }
}

/* Estilos para pantallas grandes (computadora) */
@media screen and (min-width: 1024px) {
    .header-wrapper-login {
        background-color: #0058a2;
        color: #FFFFFF;
        width: 100%;
        padding: 25px 4% 0 4%;
        height: 41px;
        position: relative;
        font-size: 50px;
        z-index: 10;
        left: 0px;
    }
    #textoHeader {
        top: -55px;
        position: relative;
        font-size: 14px;
        left: 35px;
        font-weight: bold;
    }

    /* Estilos para computadora aquí */
    input[type=text], input[type=password], input[type=datetime-local], input[type=tel] #UserName {
        background: url(../arrow-select.png) no-repeat right bottom #eaeaea;
        background-size: 20px auto;
        width: 100%;
        height: 36px;
        border: 0;
        top: -32px;
        padding: 0 4%;
        margin: 20px 0;
        font-size: 27px;
        outline: none;
        left: 250%;
        border-radius: 0px;
        position: relative;
    }

}