@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
    font-family: "Roboto", sans-serif;
    font-style:normal
}
.LoginRight .formWrapper .passwordBox {
    position: relative;
}
    .LoginRight .formWrapper .passwordBox .keyboard {
        position: absolute;
        top: 7px;
        right: 7px;
        margin-right: 0;
        font-size: 30px;
        z-index: 999;
        cursor: pointer;
    }

.LoginRight .formWrapper .g-recaptcha div {
    margin: 0 auto !important;
}
.LoginRight .formWrapper .classic-forgot {
    display: none!important;
}
.LoginLeft {
    height: 98VH;
    width: 49.5%;
    margin-top: 1vh;
    margin-left: 0.5%;
    background-color: #2D60A1; /* For browsers that do not support gradients */
    background-image: linear-gradient(#14646C, #2D60A1);
    border-radius: 32px;
    float: left;
    overflow: hidden;
    position: relative;
}

    .LoginLeft .sliderWrap {
        width: 450px;
        height: 600px;
        position: absolute;
        top: auto;
        left: 50%;
        margin-left: -225px;
        top: 50%;
        margin-top: -300px;
    }

        .LoginLeft .sliderWrap .sliderText {
            width: 100%;
            color: #fff;
            font-size: 35px;
            height: 150px;
            text-align: center;
            overflow: hidden;
        }
        .LoginLeft .sliderWrap .sliderImage {
            width: 450px;
            height: 450px;
            overflow: hidden
        }

        .LoginLeft .sliderWrap .icon {
            width: 100px;
            height: 100px;
            position: absolute;
        }

            .LoginLeft .sliderWrap .icon.remider {
                right: -53px;
                top: 110px
            }

            .LoginLeft .sliderWrap .icon.bank {
                left: -135px;
                top: 306px;
            }
            .LoginLeft .sliderWrap .icon.gst {
                left: -74px;
                top: 90px
            }
            .LoginLeft .sliderWrap .icon.bill {
                right: -105px;
                top: 440px
            }

            .LoginLeft .sliderWrap .icon.shop {
                left: -98px;
                top: 490px
            }

            .LoginLeft .sliderWrap .icon img {
                max-width: 100%;
                max-height: 100%;
            }

.LoginRight {
    min-height: 98VH;
    width: 50%;
    margin-top: 1vh;
    background-color: #fff;
    border-radius: 32px;
    float: left;
    overflow: hidden;
    position:relative;
}
    .LoginRight .copyright {
        width: 100%;
        font-size: 14px;
        color: #606060;
        text-align: center;
    }
    .LoginRight .formWrapper {
        padding-top: 150px;
        padding-left:50px;
        padding-right:50px;
        padding-bottom:50px;
        
    }

        .LoginRight .formWrapper .backBtn {
            position: absolute;
            top: 20px;
        }

        .LoginRight .formWrapper .loginTitle {
            color: #000;
            font-size: 20px;
            font-weight: 500
        }
            .LoginRight .formWrapper .loginTitle span {
                color: var(--mdb-secondary-color);
                font-size: 14px;
                font-weight: bold
            }

        .LoginRight .formWrapper .otpBox {
            width: 40px;
            text-align: center;
            float: left;
            margin-right: 10px;
        }
        .LoginRight .formWrapper a.forgot {
            color: #2D60A1;
            font-size: 16px;
            float: right;
            font-weight:600;

        }

.carousel-control-prev, .carousel-control-next{ display:none;}
.LoginRight .formWrapper .v2pLoginLogo {
    text-align: center;
}
.LoginRight .formWrapper .v2pLoginLogo img{
    width:112px;
}
.LoginRight .formWrapper .resetConfirmation {
    background: #f1f1f1;
    border-radius: 32px;
    text-align: center;
}
    .LoginRight .formWrapper .resetConfirmation i.iconsize {
        font-size: 64px;
    }
    .LoginRight .formWrapper .resetConfirmation p {        
        font-size: 22px;
    }


.footer-links-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.footer-links {
    margin: 0;
    padding: 5px;
    list-style: none;
    display: flex;
    justify-content: center; /* centers the list horizontally */
    align-items: center; /* centers items vertically (optional) */
    width: 100%;
}

    ul.footer-links li {
        margin: 0 10px 0 10px;
        padding: 0;
        list-style: none;
        /* float removed */
        width: auto;
        margin-bottom: 10px;
    }

        ul.footer-links li a {
            color: #007bff;
        }

@media only screen and (max-width: 1500px) {
    /** Left Panel */
    .LoginLeft .sliderWrap {
        width: 400px;
        height: 500px;        
        margin-left: -200px;         
        margin-top: -250px;
    }
        .LoginLeft .sliderWrap .sliderText {            
            font-size: 28px;
            height: 100px;             
        }
        .LoginLeft .sliderWrap .sliderImage {
            width: 400px;
            height: 400px;
            overflow: hidden
        }
    .LoginLeft .sliderWrap .icon { 
         width:70px;
         height:70px;
    }
        .LoginLeft .sliderWrap .icon.remider {
            right: -43px;
            top: 110px
        }

        .LoginLeft .sliderWrap .icon.bank {
            left: -105px;
            top: 250px;
        }

        .LoginLeft .sliderWrap .icon.gst {
            left: -54px;
            top: 90px
        }

        .LoginLeft .sliderWrap .icon.bill {
            right: -85px;
            top: 375px
        }

        .LoginLeft .sliderWrap .icon.shop {
            left: -78px;
            top: 410px
        }
    /** Left Panel */
    .LoginRight .formWrapper {
        padding-top: 70px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 1275px) {
    /** Left Panel */
    .LoginLeft .sliderWrap {
        width: 350px;
        height: 450px;
        margin-left: -175px;
        margin-top: -225px;
    }

        .LoginLeft .sliderWrap .sliderText {
            font-size: 28px;
            height: 100px;
        }

        .LoginLeft .sliderWrap .sliderImage {
            width: 350px;
            height: 350px;
            overflow: hidden
        }

        .LoginLeft .sliderWrap .icon {
            width: 70px;
            height: 70px;
        }

            .LoginLeft .sliderWrap .icon.remider {
                right: -43px;
                top: 110px
            }

            .LoginLeft .sliderWrap .icon.bank {
                left: -105px;
                top: 230px;
            }

            .LoginLeft .sliderWrap .icon.gst {
                left: -54px;
                top: 90px
            }

            .LoginLeft .sliderWrap .icon.bill {
                right: -60px;
                top: 375px
            }

            .LoginLeft .sliderWrap .icon.shop {
                left: -58px;
                top: 370px
            }
    /** Left Panel */
    .LoginRight .formWrapper {
        padding-top: 50px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 30px;
    }
    .LoginRight .formWrapper .loginTitle {
        
        font-size: 18px;
         
    }
}

@media only screen and (max-width: 1140px) {
    /** Left Panel */
    .LoginLeft .sliderWrap {
        width: 300px;
        height: 400px;
        margin-left: -150px;
        margin-top: -200px;
    }

        .LoginLeft .sliderWrap .sliderText {
            font-size: 24px;
            height: 100px;
        }

        .LoginLeft .sliderWrap .sliderImage {
            width: 300px;
            height: 300px;
            overflow: hidden
        }

        .LoginLeft .sliderWrap .icon {
            width: 70px;
            height: 70px;
        }

            .LoginLeft .sliderWrap .icon.remider {
                right: -43px;
                top: 80px
            }

            .LoginLeft .sliderWrap .icon.bank {
                left: -95px;
                top: 230px;
                max-width:75%
            }

            .LoginLeft .sliderWrap .icon.gst {
                left: -54px;
                top: 90px
            }

            .LoginLeft .sliderWrap .icon.bill {
                right: -50px;
                top: 345px
            }

            .LoginLeft .sliderWrap .icon.shop {
                left: -58px;
                top: 370px
            }
    /** Left Panel */

    .LoginRight .formWrapper .loginTitle {
        font-size: 16px;
    }

    .LoginRight .formWrapper {
        padding-top: 50px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 30px;
    }
}

@media only screen and (max-width: 775px) {
    /** Left Panel */
    .LoginLeft{
        display:none;
    } 
    /** Left Panel */

    .LoginRight {
        min-height: 98VH;
        width: 100%;
        margin-top: 1vh; 
    }

        .LoginRight .formWrapper {
            padding-top: 40px;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 30px;
        }
}


@media only screen and (max-height: 775px) {
     

    

        .LoginRight .formWrapper {
            padding-top: 40px;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 30px;
        }
}



/** This class is being used to forcefully hide message - Attempting to reconnect to the server 1 of 8 */
#components-reconnect-modal {
    display: none !important;
}
/** //This class is being used to forcefully hide message - Attempting to reconnect to the server 1 of 8 */