﻿/* C0002 - Change UI of user type options */
.login-box, .register-box {
    width: 450px;
}

.option-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
}

    .option-flex .custom-radio {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .option-flex .custom-radio [type=radio] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .option-flex .custom-radio .radio-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid #ced4da;
            position: relative;
            border-radius: 0.25rem;
        }

        .option-flex .custom-radio .label-icon {
            background-size: auto 40px;
            background-repeat: no-repeat;
            background-position: center 10px;
            margin-bottom: 0;
            padding: 15px 18px;
            text-align: center;
            justify-content: center;
            display: flex;
            align-items: baseline;
        }

        .option-flex .custom-radio .or-separator {
            margin: 0 24px;
        }

        .option-flex .custom-radio label,
        .option-flex .custom-radio .or-separator {
            font-weight: 400;
            line-height: 1.2;
            text-align: center;
        }


    /* IMAGE STYLES */
    .option-flex [type=radio] + .label-icon {
        cursor: pointer;
    }

    /* CHECKED STYLES */
    .option-flex [type=radio]:checked + .label-icon {
        background: #007bff;
        background-size: auto 40px;
        background-repeat: no-repeat;
        color: #ffffff;
    }

@media only screen and (max-width: 575px) {
    .login-box, .register-box {
        width: 95%;
    }
    .option-flex .custom-radio .label-icon {
        padding: 14px 16px;
    }
    .option-flex .custom-radio .or-separator {
        margin: 0 15px;
    }
}