@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        input, select {
            font-family: droid-sans;
        }

        body {
            font-family: 'droid-sans', sans-serif !important;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #2d514f;
            padding: 30px;
    direction: rtl;
    float: right;
    width: 100%;
        }

        .container {
            position: relative;
            max-width: 850px;
            width: 100%;
            background: #fff;
            padding: 40px 30px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            perspective: 2700px;
        }

        .container .cover {
            position: absolute;
            top: 0;
            right: 50%;
            height: 100%;
            width: 50%;
            z-index: 98;
            transition: all 1s ease;
            transform-origin: left;
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }

        .container #flip:checked~.cover {
            transform: rotateY(-180deg);
        }

        .container #flip:checked~.forms .login-form {
            pointer-events: none;
        }

        .container .cover .front,
        .container .cover .back {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .cover .back {
            transform: rotateY(180deg);
        }

        .container .cover img {
            position: absolute;
            height: 100%;
            width: 100%;
            object-fit: cover;
            z-index: 10;
        }

        .container .cover .text {
            position: absolute;
            z-index: 10;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .container .cover .text::before {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0.1;
            background: #394262;
        }

        .cover .text .text-1,
        .cover .text .text-2 {
            z-index: 20;
            font-size: 26px;
            font-weight: 600;
            color: #fff;
            text-align: center;
        }

        .cover .text .text-2 {
            font-size: 15px;
            font-weight: 500;
        }

        .container .forms {
            height: 100%;
            width: 100%;
            background: #fff;
        }

        .container .form-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .form-content .login-form,
        .form-content .signup-form {
            width: calc(100% / 2 - 25px);
        }

        .forms .form-content .title {
            position: relative;
            font-size: 24px;
            font-weight: 500;
            color: #333;
        }

        .forms .form-content .title:before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            height: 3px;
            width: 25px;
            background: #394262;
        }

        .forms .signup-form .title:before {
            width: 20px;
        }

        .forms .form-content .input-boxes {
            margin-top: 30px;
        }

        .forms .form-content .input-box {
            display: flex;
            align-items: center;
            height: 50px;
            width: 100%;
            margin: 10px 0;
            position: relative;
        }

        .form-content .input-box input {
            height: 100%;
            width: 100%;
            outline: none;
            border: none;
            padding: 0 30px;
            font-size: 16px;
            font-weight: 500;
            border-bottom: 2px solid rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .form-content .input-box input:focus,
        .form-content .input-box input:valid {
            border-color: #394262;
        }

        .form-content .input-box i {
            position: absolute;
            color: #394262;
            font-size: 17px;
        }

        .forms .form-content .text {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .forms .form-content .text a {
            text-decoration: none;
        }

        .forms .form-content .text a:hover {
            text-decoration: underline;
        }

        .forms .form-content .button {
            color: #fff;
            margin-top: 40px;
        }
button#send-otp {
    color: #fff;
    background: #2d514f;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s ease;
    font-family: droid-sans;
    width: 100%;
    height: 3pc;
    font-size: 16px;
}
        .forms .form-content .button input {
            color: #fff;
            background: #2d514f;
            border-radius: 6px;
            padding: 0;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .forms .form-content .button input:hover {
            background: #5b13b9;
        }

        .forms .form-content label {
            color: #5b13b9;
            cursor: pointer;
        }

        .forms .form-content label:hover {
            text-decoration: underline;
        }

        .forms .form-content .login-text,
        .forms .form-content .sign-up-text {
            text-align: center;
            margin-top: 25px;
        }

        .container #flip {
            display: none;
        }

        @media (max-width: 730px) {
            .container .cover {
                display: none;
            }

            .form-content .login-form,
            .form-content .signup-form {
                width: 100%;
            }

            .form-content .signup-form {
                display: none;
            }

            .container #flip:checked~.forms .signup-form {
                display: block;
            }

            .container #flip:checked~.forms .login-form {
                display: none;
            }
        }

.otp-field.mb-4 {
    display: flex;
    align-items: center;
    direction: ltr;
    justify-content: center;
}

.otp-input {
    margin: 6px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    font-family: 'droid-sans';
}

.image-label {
    color: #757575 !important;
    padding-right: 25px;
    border-bottom: 2px solid #d2d2d2;
    width: 100%;
    line-height: 3pc;
}

.my-input {
height: 100%;
    width: 100%;
    outline: none;
    border: none;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    color: #808080;
    font-family: droid-sans;
}

span.invalid-feedback {
    font-size: 14px;
    color: red;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


.form-text {
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-secondary-color);
}

.forms .form-content label {
    color: #5d5d5d;
    cursor: pointer;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.alert.alert-primary {
    background: #547089f2;
    color: #fff;
    padding: 1pc;
    border-radius: 6px;
    border: 1px solid #2d514f;
    margin-top: 1pc;
}

.alert.alert-danger {
    background: #89545494;
    color: #fff;
    padding: 1pc;
    border-radius: 6px;
    border: 1px solid #c70000;
    margin-top: 1pc;
}

li {
    list-style: none;
}

span.required {
    color: red;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #dee2e6 !important;
    border-radius: 5px !important;
}

span.select2-selection.select2-selection--single {
    padding-bottom: 36px;
}

span#select2-side-container, span#select2-area-container, span#select2-polling_center-container {
    line-height: 36px;
}