@extends('dashboard.layouts.login_layout')

@section('content')
    <style>
        .error {
            color: red !important;
        }
    </style>
    <style type="text/css">
        .pass_eye_box {
            position: absolute;
            z-index: 9;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            width: 24px;
            height: 24px;
        }

        .eye-icon {
            position: absolute;
            top: 6px;
            right: 4px;
        }
        .keep-sign,
        .keep-sign label {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .keep-sign {
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .keep-sign label { margin-bottom: 0; position: relative; padding-left: 20px; cursor: pointer;}
        .keep-sign label span { cursor: pointer;}
        .keep-sign label span::before { 
            content: "";
            position: absolute;
            top: 1px;
            left: 0;
            width: 16px;
            height: 16px;
            border: 1px solid #5c5c5c;
            border-radius: 0;
        }
        .keep-sign label span::after { 
            content: "";
            position: absolute;
            top: 2px;
            left: 1px;
            background-image: url(../assets/dashboard/images/icon_check.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 14px;
            height: 14px;
        }
        .keep-sign input[type="checkbox"]:checked ~ span:before {
            background: #f59635;
            border: #f59635;
        }
        .keep-sign input[type="checkbox"] { display: none;}
        .mobile-title { display: none;}

        @media  only screen and (max-width: 991px) {  
            .login-content {
                min-width: 600px;
            }
            .login-aside { display: none !important;}
            .mobile-title { display: block;}
            .login.login-1 .login-content .login-form {
                width: 100%;
                max-width: 400px;
                border: 1px solid #d3d3d3;
                padding: 40px 24px;
                border-radius: 6px;
            }
        }
        @media  only screen and (max-width: 767px) {  
            .login-content {
                min-width: 500px;
            }
            .login.login-1 .login-content .login-form {
                padding: 30px 24px;
            }
        }
        @media  only screen and (max-width: 575px) {  
            .login-content {
                min-width: auto;
            }
            .login.login-1 .login-content .login-form {
                padding: 30px 12px;
            }
            .keep-sign {
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
            }
        }
    </style>
    <!--begin::Main-->

    <!--begin::Login-->
    <div class="login login-1 login-signin-on d-flex flex-column flex-lg-row flex-column-fluid bg-white" id="kt_login">
        <!--begin::Aside-->
        <div class="login-aside d-flex flex-column flex-row-auto" style="background-color: #7D4C9E;">
            <!--begin::Aside Top-->

            <!--end::Aside Top-->
            <!--begin::Aside Bottom-->
            <div class="aside-img d-flex flex-row-fluid bgi-no-repeat bgi-position-y-bottom bgi-position-x-center"
                style="">
                <div class="d-flex flex-column-auto flex-column"
                    style="-webkit-box-flex: 0;-ms-flex: none;flex: none;align-items: center;justify-content: center;width: 100%;padding: 0;background: #17242a;">

                    <!--begin::Aside title-->
                    <h1 class="text-center" style="color: #ffffff;">
                         Welcome to Loyalty & Rewards Platform<br>
                            Login for great experience
                    </h1>
                    <!--end::Aside title-->
                </div>
            </div>
        </div>
        <!--begin::Aside-->

        <!--begin::Content-->
        <div class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto">