.authentication {
    height: 100vh;
    width: 100%;
    background-color: $primaryColor;
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url(../images/competiotionBg.webp);
        background-repeat: repeat;
        z-index: -1;
        opacity: .1;
    }
    .authentication_overview {
        background-color: #fff;
        height: 80%;
        max-height: 500px;
        width: 850px;
        border-radius: 30px;
        padding: 20px 30px;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        .quiz_logo{
            padding-bottom: 20px;
            img{
                max-height: 80px;
                width: auto;
                object-fit: contain;
            }
        }
        h5{
                font-size: 22px;
                font-weight: 600;
                font-family: 'Inter', sans-serif;
                text-align: center;
                color: #232323;
                line-height: 30px;
        }
        .authentication_form{
            padding-top: 20px;
            .form-floating{
                .form-control{
                    border-radius: 35px;
                    height: 50px;
                    padding: 22px 10px 5px 25px;
                    font-size: 15px;
                    &:focus{
                        outline: 0;
                        box-shadow: none;
                        border-color: #c3c3c3;
                    }
                }
                label{
                    font-size: 14px;
                    padding: 12px 10px 10px 30px;
                }
            }
            .authentication_btn{
                width: 100%;
                height: 45px;
                background-color: $primaryColor;
                color: $whiteColor;
                font-size: 15px;
                border-radius: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 15px;
                &:hover{
                    background-color: #5c4cb5;
                }
            }
        }

        .box_image{
            padding: 0 20px;
            img{
                max-height: 500px;
                width: 100%;
                object-fit: contain;
            }
        }
       
    }

    .register_content{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 50px;
    }
}


.loading_screen{
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .loader {
        width:100px;
        height:100px;
        display:inline-block;
        padding:0px;
        opacity:0.5;
        border:5px solid $primaryColor;
        border-radius: 16px;
        -webkit-animation: loader 1s ease-in-out infinite alternate;
        animation: loader 1s ease-in-out infinite alternate;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            height: 50px;
            width: 50px;
            object-fit: contain;
        }
     }
     
     .loader:before {
       content: " ";
       position: absolute;
       z-index: -1;
       top: 10px;
       left: 10px;
       right: 10px;
       bottom: 10px;
       border: 5px solid $primaryColor;
     }
     
    //  .loader:after {
    //    content: " ";
    //    position: absolute;
    //    z-index: -1;
    //    top: 20px;
    //    left: 20px;
    //    right: 20px;
    //    bottom: 20px;
    //    border: 5px solid $primaryColor;
    //  }
     
     @keyframes loader {
        from {transform: rotate(0deg) scale(1,1);border-radius:0px;}
        to {transform: rotate(360deg) scale(0, 0);border-radius:50px;}
     }
     @-webkit-keyframes loader {
        from {-webkit-transform: rotate(0deg) scale(1, 1);border-radius:0px;}
        to {-webkit-transform: rotate(360deg) scale(0,0 );border-radius:50px;}
     }
}