/* Full height viewport fix */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #c8c8c8;
    font: 600 16px/18px 'Open Sans', sans-serif;
}

/* Ensure the row takes full height */
.row {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Center login box */
.login-box {
    width: 100%;
    max-width: 525px;
    position: relative;
    background: #f3f2f7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto !important;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

/* Styling for login card */
.card {
    width: 500px;
    background: #f3f2f7;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    margin: auto;
    height: auto !important;
    min-height: fit-content !important;
}

/* Login and sign-up container */
.login-snip {
    width: auto;
    padding: 90px 70px 50px 70px;
    background: #02226e;
    border-radius: 10px;
    height: auto !important;
}

/* Fix height issue on form switch */
.login-space {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

/* Hide radio inputs */
.login-snip .sign-in,
.login-snip .sign-up {
    display: none;
}

/* Styling for tabs */
.login-snip .tab {
    font-size: 22px;
    margin-right: 15px;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.login-snip .sign-in:checked + .tab,
.login-snip .sign-up:checked + .tab {
    color: #fff;
    border-color: #1161ee;
}

/* Hide login and sign-up forms by default */
.login-snip .login,
.login-snip .sign-up-form {
    display: none;
    height: auto !important;
}

/* Show login form when "Login" is checked */
.login-snip .sign-in:checked ~ .login-space .login {
    display: block !important;
}

/* Show sign-up form when "Sign Up" is checked */
.login-snip .sign-up:checked ~ .login-space .sign-up-form {
    display: block !important;
    height: auto !important;
    min-height: fit-content !important;
}

/* Input field styles */
.login-space .group {
    margin-bottom: 15px;
}

    .login-space .group .label,
    .login-space .group .input,
    .login-space .group .button {
        width: 100%;
        color: #fff;
        display: block;
    }

    .login-space .group .input,
    .login-space .group .button {
        border: none;
        padding: 15px 20px;
        border-radius: 25px;
        background: rgba(255,255,255,.1);
    }

    /* Ensure password fields are styled correctly */
    .login-space .group input[data-type="password"] {
        text-security: circle;
        -webkit-text-security: circle;
    }

    /* Label styling */
    .login-space .group .label {
        color: #f7f8fa;
        font-size: 12px;
    }

    /* Button styling */
    .login-space .group .button {
        background: #747578;
    }

/* Divider */
.hr {
    height: 2px;
    margin: 60px 0 50px 0;
    background: rgba(255,255,255,.2);
}

/* Footer */
.foot {
    text-align: center;
}

/* Bootstrap column height fix */
.col-md-6 {
    height: auto !important;
}

/* Image scaling fix */
img {
    max-width: 100%;
    height: auto;
}

/* Placeholder text color */
::placeholder {
    color: #b3b3b3;
}