:root {
    --theme-color : #0097da;
}

body {

    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}


.content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
}

.login_logo {
    padding: 68px 50px;
    border-right: 1px solid #eee;
    width: 50%;
    max-width: 700px;
}

#notify_login_success {
    background:green; color:#fff;
}

#notify_login_error {
    background:red; color:#fff;
}


.input-icon {
    position: relative;
    left: 0;
}

.input-icon>i {
    color: #ccc;
    position: absolute;
    margin: 11px 2px 4px 10px;
    z-index: 3;
    width: 16px;
    font-size: 16px;
    text-align: center;
    left: 0;
}

.input-icon>.form-control {
    padding-left: 33px;
}


.form_section {
    padding: 68px;
}


.form_section .input-icon>.form-control, .form_section .btn {
    border-radius: 20px !important;
}

.form_section .login_action_btn {
    color: #fff;
    width: 140px;
    font-size: 13px;
}


.password-grp-input {
    display: flex; flex-direction: row;
}

.password-grp-input .input-icon {
    flex: 2;
}

.switch-pswd {
    padding: 5px;
    font-size: 20px;
    opacity: 0.6;
}

.switch-pswd i {
    cursor: pointer;
}

.hide {
    display: none !important; }

.show {
    display: block !important; }

.btn.green:not(.btn-outline) {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    padding: 10px 12px;
}
.btn.green:not(.btn-outline).reset-btn {
    border: 1px solid #FFFFFF;
    background: #707070;
    padding: 10px 12px;
}

.app-icons {
    max-width: 170px;
}

/* Mobile */
@media only screen
and (max-device-width: 768px) {
    .login_section .round-landing-logo {
        margin: 20px;
        max-width: 136px;
    }
}



/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }
}


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }

    .form_section {
        padding: 40px;
        margin: auto;
        text-align: center;
    }

    .login_logo {
        width: 100%;
    }

    .app-icons{
        max-width: 140px;
    }
}