/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    .loginMobileTable table, .loginMobileTable thead, .loginMobileTable tbody, .loginMobileTable th, .loginMobileTable td, .loginMobileTable tr {
        display: block !important;
    }



    .loginMobileTable tr {
        border: 1px solid #ccc !important;
    }

    .loginMobileTable td {
        border: none !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        text-align: center !important;
    }
}

.desktopLoginCenter {
    display: flex;
}

    .desktopLoginCenter #imgLogoLogin {
        width: 40%;
        padding-right: 5%;
        padding-bottom: 5%;
    }

    .desktopLoginCenter #formLogin {
        flex: 1;
    }
.bodyDesktopLogin {
    position: relative;
    top: 39vh;
}
.loginInput {
    background: unset !important;
    border: unset !important;
    border-bottom: 1px solid #939598 !important;
    color: #939598;
    font-size: 30px !important;
    width: 30vw;
    padding: 0px 0px 5px 15px !important;
}

.loginRound {
    height: 108px;
    width: 108px;
    border-radius: 100%;
    background: #EFE82B
}
@media screen and (max-width: 1000px) {
    .desktopLoginCenter {
        flex-direction: column;
        align-items: center;
    }

    .bodyDesktopLogin {
        top: 25vh;
    }
    #formLogin{
        width: 100%;
    }
    .loginInput{
        width: 90%;
    }
}