﻿.main-container {
    margin-top: 2.5rem;
}

.left-main-container {
    padding-top: 8px;
}

    .left-main-container .home-title {
        font-style: normal;
        font-size: 42px;
        line-height: 63px;
        color: var(--blue-color);
    }

    .left-main-container .login-title-container .home-title {
        font-style: normal;
        font-size: 42px;
        line-height: 30px;
        color: #333E48;
    }

    .left-main-container .login-title-container .login-span {
        font-style: normal;
        font-size: 16px;
        line-height: 22px;
        color: var(--dark-gray-color);
    }

    .left-main-container .home-btn {
        width: 205px;
        background-color: #333E48;
        border: 2px solid #333E48;
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: white;
        transition: all 500ms cubic-bezier(.77,0,.175,1);
    }

        .left-main-container .home-btn:hover {
            background-color: #333E48;
            color: var(--white-color);
            transition: all 500ms cubic-bezier(.77,0,.175,1);
        }

        .Resend-btn {
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        color: var(--blue-color);
        transition: all 500ms cubic-bezier(.77,0,.175,1);
    }

    .left-main-container .form-container .homeTextBox {
        width: 65% !important;
    }

        .left-main-container .form-container .homeTextBox::-webkit-input-placeholder {
            color: var(--blue-color);
        }

        .left-main-container .form-container .homeTextBox::-ms-input-placeholder {
            color: var(--blue-color);
        }

        .left-main-container .form-container .homeTextBox:-ms-input-placeholder {
            color: var(--blue-color);
        }

    .left-main-container .captch-container #CaptchaInputText-error {
        color: #f00;
    }

    .left-main-container .captch-container #RefrechCapcha {
        position: absolute !important;
        left: 220px;
        background-image: url(../media/svgs/refresh-icon.svg) !important;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px;
        float: left;
        height: 35px;
        width: 35px;
        background-color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }

.captch_text {
    width: 65% !important;
}

    .captch_text::-webkit-input-placeholder {
        color: var(--blue-color);
    }

    .captch_text::-ms-input-placeholder {
        color: var(--blue-color);
    }

    .captch_text:-ms-input-placeholder {
        color: var(--blue-color);
    }

#CaptchaImage {
    width: 200px;
}

#Replace {
    transform: translateX(0%);
    opacity: 1;
    transition: all 1s ease-in-out;
}

.HideShow {
    transform: translateX(-25%) !important;
    opacity: 0 !important;
    transition: all 1s ease-in-out;
}

.RefrechCaptchaIcon {
    font-size: 20px;
    margin-inline-start: 10px;
    cursor: pointer;
    background-color: var(--white-color);
    padding: 5px;
    border-radius: 5px;
    color: var(--blue-color);
}

@media(max-width:760px) {
    .main-container {
        margin-top: .5rem;
    }

        .main-container .row .right-main-container {
            margin-top: 3rem;
        }
}

@media(max-width:568px) {
    .main-container {
        margin-top: 4rem;
    }

        .main-container .row {
            padding-inline: 15px;
        }

    .left-main-container .form-container .homeTextBox {
        width: 85% !important;
    }

    .captch_text {
        width: 85% !important;
    }
}
