/* Auto-extracted from Auth/signup.blade.php */

/* ----- block 1 ----- */
body {
    background: url('../../images/dark_bg.png') !important;
    color: #e7e7e7;
}

a:hover {
    color: #FEA116;
}

        .banner-img1 {
            position: absolute;
            top: 12%;
            left: 4%;
        }

        .banner-img2 {
            position: absolute;
            top: 11%;
            left: 20%;
            z-index: -1;
        }

        .signup_div {
            margin-top: 5%;
        }

        @media (min-width: 1025px) and (max-width: 1700px) {
            .banner-img1 {
                position: absolute;
                top: 12%;
                left: 5%;
                height: 77% !important;
            }

            .banner-img2 {
                position: absolute;
                top: 11%;
                left: 10%;
                z-index: -1;
                height: 85% !important;
            }

            .signup_div2 {
                margin-top: 3%;
                height: 600px;
                overflow: auto;
                -ms-overflow-style: none;
                /* IE and Edge */
                scrollbar-width: none;
                /* Firefox */
            }

            .signup_div2::-webkit-scrollbar {
                display: none;
            }
        }

        @media (min-width: 1701px) {
            .banner-img1 {
                position: absolute;
                top: 12%;
                left: 4%;
                height: 80% !important;
            }

            .banner-img2 {
                position: absolute;
                top: 11%;
                left: 10%;
                z-index: -1;
                height: 85% !important;
            }

            .signup_div2 {
                margin-top: 3%;
            }
        }

        @media (max-width: 460px) {
            .banner-img1 {
                position: absolute;
                top: 12%;
                left: 4%;
                height: 90% !important;
            }

            .banner-img2 {
                position: absolute;
                top: 11%;
                left: 10%;
                z-index: -1;
                height: 95% !important;
            }

            .signup_div2 {
                margin-top: 8%;
            }
        }

        .signup_image {
            width: 100%;
            padding: 15%;
        }

        @media (max-width: 460px) {
            .signup_image {
                width: 90%;
                padding: 8%;
            }

            .signup_div {
                width: 100%;
            }

            .signup_div2 {
                width: 100%;
                margin-top: 100%;
            }

            .banner-img1 {
                /* position: absolute; */
                top: 7%;
                height: 25% !important;
            }

            .banner-img2 {
                position: absolute;
                top: 2%;
                /* left: 0%; */
                z-index: -1;
                height: 27% !important;
            }
        }



        body {
            text-transform: uppercase;
        }

        .btn-primary:hover,
        .btn-primary:active {
            border: none;
            outline: none;
        }

        .form-control {
            padding: 10px 3%;
        }

        .text-primary {
            color: red !important;
        }

        .fs-large {
            font-size: large;
        }

        .btn-primary {
            background-color: red !important;
            border-color: red !important;
        }

        .btn-primary:hover,
        .btn-primary:active {
            color: red !important;
            background-color: white !important;
            border: 1px solid red !important;
        }

        a:hover {
            color: red !important;
        }

        .loader {
            position: fixed;
            width: 100%;
            height: 100%;
            text-align: center;
            color: #fff;
            background: rgb(1 3 31 / 50%);
            padding-top: 17%;
            z-index: 22222;
        }

        @media (max-width: 680px) {
            .signup_title {
                font-size: 20px;
                padding: 4px;
            }

            .loader {
                position: fixed;
                width: 100%;
                height: 100%;
                text-align: center;
                color: #fff;
                background: rgb(1 3 31 / 50%);
                padding-top: 90%;
                z-index: 22222;
            }

            .signup_div2_mobile {
                margin: 0% !important;
            }
        }

        .signup_div2_mobile {
            margin: 0%;
            padding: 3% 5% !important;
        }

        .title {
            max-width: 400px;
            margin: auto;
            text-align: center;
            font-family: "Poppins", sans-serif;

            h3 {
                font-weight: bold;
                color: black;
            }

            p {
                font-size: 12px;
                color: #118a44;

                &.msg {
                    color: initial;
                    text-align: initial;
                    font-weight: bold;
                }
            }
        }

        .otp-input-fields {
            margin: auto;
            background-color: white;
            box-shadow: 0px 0px 8px 0px #02025044;
            max-width: 400px;
            width: auto;
            display: flex;
            justify-content: center;
            gap: 10px;
            padding: 40px;

            input {
                height: 60px;
                width: 60px;
                background-color: transparent;
                border-radius: 4px;
                border: 1px solid #2f8f1f;
                text-align: center;
                outline: none;
                font-size: 16px;

                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

                /* Firefox */
                &[type=number] {
                    -moz-appearance: textfield;
                }

                &:focus {
                    border-width: 2px;
                    border-color: darken(#2f8f1f, 5%);
                    font-size: 20px;
                }
            }
        }

        .result {
            max-width: 400px;
            margin: auto;
            padding: 24px;
            text-align: center;

            p {
                font-size: 24px;
                font-family: 'Antonio', sans-serif;
                opacity: 1;
                transition: color 0.5s ease;

                &._ok {
                    color: green;
                }

                &._notok {
                    color: red;
                    border-radius: 3px;
                }
            }
        }