@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i');
@phone: ~"screen and (max-device-width: 767.98px) and (orientation: portrait)";
@phone-h: ~"screen and (max-device-width: 767.98px) and (orientation: landscape)";
@tab-v: ~"screen and (min-device-width: 768px) and (max-device-width: 1023.98px) and (orientation: portrait)";
@tab-h: ~"screen and (min-device-width: 768px) and (max-device-width: 1023.98px) and (orientation: landscape)";
@discard-laptop-mini :~"screen and (min-device-width: 1020px) and (max-device-width: 1021px)";
@laptop: ~"screen and (min-device-width: 1024px) and (max-device-width: 1399.98px)";
@desktop :~"screen and (min-device-width: 1400px)  and (max-device-width: 1679.98px)";
@largescreen :~"screen and (min-device-width: 1680px)";

:root {
    --color-scale-1: red;
    --color-scale-2: #f0ad4e;
    --color-scale-3: green;
    --color-scale-4: #82e982;
}

body {
    font-size: 14px;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    font-family: 'Raleway', sans-serif !important; // -webkit-font-smoothing: antialiased;

    .text-scale-1 {
        color: var(--color-scale-1);
    }

    .text-scale-2 {
        color: var(--color-scale-2);
    }

    .text-scale-3 {
        color: var(--color-scale-3);
    }

    .text-scale-4 {
        color: var(--color-scale-4);
    }

    .invalid {

        .input-group-text,
        input {
            border-color: var(--color-scale-1) !important;
        }
    }

    footer {
        width: 100%;
        font-size: 10px;
        color: #9B9B9B !important;
        min-height: 45px;

        @media @phone,
        @phone-h {
            height: 80px;
        }

        @media @largescreen {
            font-size: 16px;
        }

        .img-tcn {
            background-image: url(/web/assets/images/logo/logo_thecapitalnet_grey.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            height: auto;
            padding: 0;
            width: 80px;
            height: 26px;
            max-height: 34px;

            &:hover,
            &.active {
                background-image: url(/web/assets/images/logo/tcn_logo_2x.png);
            }

        }

    }

    .form-control:disabled,
    .form-control[disabled='true'] {
        color: #8a8a8a;
    }

    .tnc-text {
        font-size: 12px;
    }

    .c-pointer {
        cursor: pointer;
    }
}

.app-logo {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 4vw;
    width: 100%;
    margin-top: 10px;

    @media @phone,
    @phone-h {
        height: 40px;
    }
}

.login-page,
.signup-page,
.verification-page,
.consent-verification-page {

    .heading {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;

        @media @phone,
        @phone-h {
            margin-bottom: 20px;
        }

        @media @largescreen {
            font-size: 20px;
        }
    }

    .sub-heading {
        font-size: 12px;
        font-weight: 500;
        color: #868686;
        margin-bottom: 25px;

        @media @largescreen {
            font-size: 16;
        }

        .mandatory-icon {
            font-size: 6px;
            height: 18px;
            position: relative;
            right: 0px;
            top: -6px;
            color: #dc3545;
        }
    }

    .form-control {
        font-size: 12px;
        font-weight: 600;
        border: 0px;
        border-bottom: 2px solid #ccc;
        border-radius: 0;
        outline: none;
        min-height: 35px !important;
        background-color: transparent;
        box-shadow: none !important;
        appearance: none;

        &.empty {
            color: #9B9B9B !important;
            font-size: 12px !important;

            @media @largescreen {
                font-size: 18px !important;
            }
        }

        @media @phone,
        @phone-h {
            height: 26px !important;
            font-size: 12px;
            padding: 0px;
        }

        @media @largescreen {
            font-size: 18px;
        }



    }

    select {
        &.form-control {
            background-image: url(/web/assets/images/drop_down_arrow_2x.png);
            background-position: calc(100% - 11px);
            background-size: 12px;
            background-repeat: no-repeat;

            &.disabled {
                pointer-events: none;
                color: #8a8a8a;
            }
        }
    }

    input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-weight: 600 !important;
        color: #9B9B9B !important;
        font-size: 12px !important;

        /* Firefox */
        @media @phone,
        @phone-h {
            font-size: 12px !important;
        }

        @media @largescreen {
            font-size: 18px !important;
        }
    }

    .input-group {
        margin-bottom: 25px !important;
    }

    .input-group-text {
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid #ccc;
        border-radius: 0;

        img {
            width: 12px;

            @media @largescreen {
                width: 22px;
            }
        }

    }

    .regenerate {
        font-size: 12px;
    }

    .submit-btn,
    .signup-btn,
    .login-btn {

        button {
            font-size: 12px;
            font-weight: 600;
            background-color: #0067AC;
            color: #fff;
            border: 0;
            padding: 15px 10px;
            // color: #fff;
            border-radius: 10px;
            height: 45px;

            &:disabled {
                background-color: #E0E0E0;
                color: inherit;
            }
        }
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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

    .resend-otp {
        font-size: 12px;
        font-weight: 600;
        color: #0067AC;
        padding-bottom: 0px;
        cursor: pointer;

        i {
            font-size: 14px;
            color: #212529;
        }
    }

    .otp-timer {
        background-color: inherit;
        width: 40px;
        border-bottom: 2px solid #ccc;
        display: flex;
        padding: 0px;

        input {
            border: none;
            text-align: center;
            width: 40px;
            height: 100%;
        }

        input:focus-visible {
            outline: none;
        }
    }
}

.login-page {
    width: 100%;
    // min-height: calc(~"100vh - 45px");

    .progress-loading {
        width: 100%;
        left: 0;
        right: 0;
        position: absolute;
        height: 100vh;
        // background: #3f3f3f63;
        font-size: 25px;
        display: none;
        bottom: 0;
    }

    .login-container {
        // width: 100%;
        // max-width: 600px;
        padding: 0 10px;
        width: 464px;

        @media @phone {
            width: 100%;
        }

        @media @largescreen {
            width: 600px;
        }

        .signup-text {
            a {
                color: #0067AC !important;
                font-weight: 600;
                font-size: 12px;
                text-decoration: underline;

                @media @largescreen {
                    font-size: 16px;
                }
            }
        }

        .login-box {
            background-color: #F7F7F7;
            border-radius: 14px;
            padding: 20px 60px;

            // width: 464px;
            @media @phone,
            @phone-h {
                padding: 20px 25px;
            }

            // .heading {
            //     font-size: 16px;
            //     font-weight: 600;
            //     margin-bottom: 15px;

            //     @media @phone,
            //     @phone-h {
            //         margin-bottom: 20px;
            //     }

            //     @media @largescreen {
            //         font-size: 22px;
            //     }
            // }

            // .sub-heading {
            //     font-size: 12px;
            //     font-weight: 500;
            //     color: #868686;
            //     margin-bottom: 25px;

            //     @media @largescreen {
            //         font-size: 16;
            //     }
            // }

            // .form-control {
            //     font-size: 14px;
            //     font-weight: 600;
            //     border: 0px;
            //     border-bottom: 2px solid #ccc;
            //     border-radius: 0;
            //     outline: none;
            //     min-height: 35px !important;
            //     background-color: transparent;
            //     box-shadow: none !important;

            //     @media @phone,
            //     @phone-h {
            //         height: 26px !important;
            //         font-size: 13px;
            //         padding-left: 0px;
            //     }

            //     @media @largescreen {
            //         font-size: 18px;
            //     }
            // }

            // input::placeholder {
            //     /* Chrome, Firefox, Opera, Safari 10.1+ */
            //     font-weight: 600 !important;
            //     color: #9B9B9B !important;
            //     font-size: 12px !important;

            //     /* Firefox */
            //     @media @phone,
            //     @phone-h {
            //         font-size: 13px !important;
            //     }

            //     @media @largescreen {
            //         font-size: 17px;
            //     }
            // }

            // .input-group {
            //     margin-bottom: 25px !important;
            // }

            // .input-group-text {
            //     background-color: transparent;
            //     border: 0;
            //     border-bottom: 2px solid #ccc;
            //     border-radius: 0;

            //     img {
            //         width: 12px;

            //         @media @largescreen {
            //             width: 22px;
            //         }
            //     }

            // }

            // .login-btn {

            //     button {
            //         font-size: 12px;
            //         font-weight: 600;
            //         background-color: #0067AC;
            //         color: #fff;
            //         border: 0;
            //         padding: 15px 10px;
            //         // color: #fff;
            //         border-radius: 10px;
            //         min-height: 45px;

            //         @media @largescreen {
            //             font-size: 16px;
            //         }

            //         &:disabled {
            //             background-color: #E0E0E0;
            //             color: inherit;
            //         }
            //     }
            // }


            .divider {
                font-size: 11px;
                color: #9B9B9B;
                font-weight: 600;
            }

            .social-text {
                font-size: 14px;
                color: #9B9B9B;
                font-weight: 600;
            }

            .forgotpassword {
                color: #CBCBCB;
                font-size: 12px;
                // font-weight: 600;
                // margin-top: -16px;

                a {
                    color: #212529;
                    text-decoration: none;
                }

                @media @phone,
                @phone-h {
                    margin-top: 0px;
                }
            }

            .remember-me {
                padding-top: 16px;
                padding-bottom: 20px;

                @media @phone,
                @phone-h {
                    padding-top: 5px;
                    padding-bottom: 20px;
                }

                label {
                    font-size: 11px;

                    @media @largescreen {
                        font-size: 15px;
                    }
                }

                img {
                    height: 15px;

                    @media @phone,
                    @phone-h {
                        height: 16px;
                    }

                    @media @largescreen {
                        height: 20px;
                    }
                }
            }

            .google-signup-btn {
                button {
                    font-size: 14px;
                    color: #9B9B9B;
                    border: 0;
                    padding: 13px 10px;
                    border: 1px solid #EDEDED;
                    background-color: #fff;
                    border-radius: 10px;

                    @media @largescreen {
                        font-size: 18px;
                    }
                }
            }

            .microsoft-signup-btn {
                button {
                    font-size: 14px;
                    color: #9B9B9B;
                    border: 0;
                    padding: 13px 10px;
                    border: 1px solid #EDEDED;
                    background-color: #fff;
                    border-radius: 10px;

                    @media @largescreen {
                        font-size: 18px;
                    }
                }
            }
        }

    }

    .input-box-error {
        font-size: 10px;
        margin-top: -25px;

        .help-block {
            color: rgb(236, 15, 15);
        }
    }
}

.login-success {}


.signup-page {
    // min-height: calc(~"100vh - 45px");
    width: 100%;

    .url-expiry-text {
        position: absolute;
        top: 0;
        justify-content: flex-end;

        @media @phone,
        @phone-h {
            position: inherit;
            margin-bottom: 10px;
            justify-content: center;
        }
    }

    .signup-container {
        // width: 100%;
        // max-width: 600px;
        padding: 0 10px;
        width: 480px;

        @media @phone,
        @phone-h {
            width: 100%;
        }

        @media @largescreen {
            width: 600px;
        }

        .signup-text {
            a {
                color: #0067AC !important;
                font-weight: 600;
                font-size: 12px;
            }
        }

        .signup-box {
            background-color: #F7F7F7;
            border-radius: 14px;
            padding: 20px 60px;

            // width: 464px;
            @media @phone,
            @phone-h {
                padding: 20px 25px;
            }

            // .heading {
            //     font-size: 16px;
            //     font-weight: 600;
            //     margin-bottom: 15px;
            // }

            // .sub-heading {
            //     font-size: 12px;
            //     font-weight: 500;
            //     color: #868686;
            //     margin-bottom: 25px;
            // }

            // .form-control {
            //     font-size: 14px;
            //     font-weight: 600;
            //     border: 0px;
            //     border-bottom: 2px solid #ccc;
            //     border-radius: 0;
            //     outline: none;
            //     min-height: 35px !important;
            //     background-color: transparent;
            //     box-shadow: none !important;

            //     @media @phone,
            //     @phone-h {
            //         height: 26px !important;
            //         font-size: 13px;
            //         padding: 0px;
            //     }

            //     @media @largescreen {
            //         font-size: 18px;
            //     }

            //     &.empty {
            //         color: #9B9B9B !important;
            //         font-size: 12px !important;
            //     }
            // }

            // input::placeholder {
            //     /* Chrome, Firefox, Opera, Safari 10.1+ */
            //     font-weight: 600 !important;
            //     color: #9B9B9B !important;
            //     font-size: 12px !important;

            //     /* Firefox */
            //     @media @phone,
            //     @phone-h {
            //         font-size: 13px !important;
            //     }
            // }

            // .input-group {
            //     margin-bottom: 25px !important;
            // }

            // .input-group-text {
            //     background-color: transparent;
            //     border: 0;
            //     border-bottom: 2px solid #ccc;
            //     border-radius: 0;

            //     img {
            //         width: 12px;
            //     }

            // }

            // .signup-btn {

            //     button {
            //         font-size: 12px;
            //         font-weight: 600;
            //         background-color: #0067AC;
            //         color: #fff;
            //         border: 0;
            //         padding: 15px 10px;
            //         // color: #fff;
            //         border-radius: 10px;
            //         height: 45px;

            //         &:disabled {
            //             background-color: #E0E0E0;
            //             color: inherit;
            //         }
            //     }
            // }

            .signup-text {
                font-size: 14px;
                margin-top: 20px;

                a {
                    font-weight: 500;
                    color: inherit;
                    font-size: 12px;
                    text-decoration: underline;
                }
            }

            .divider {
                font-size: 11px;
                color: #9B9B9B;
                font-weight: 600;
            }

            .social-text {
                font-size: 14px;
                color: #9B9B9B;
                font-weight: 600;
            }

            .forgotpassword {
                color: #CBCBCB;
                font-size: 12px;
                font-weight: 600;
                margin-top: -16px;

                a {
                    color: #CBCBCB;
                    text-decoration: none;
                }
            }

            .tc-checkbox {

                @media @phone,
                @phone-h {
                    padding-bottom: 20.37px;
                    // padding-left: 10px;
                }

                label {
                    font-size: 12px;
                }

                img {
                    height: 15px;

                    @media @phone,
                    @phone-h {
                        height: 16px;
                    }

                    @media @largescreen {
                        height: 20px;
                    }
                }
            }

            .google-signup-btn {
                button {
                    font-size: 14px;
                    color: #9B9B9B;
                    border: 0;
                    padding: 13px 10px;
                    border: 1px solid #EDEDED;
                    background-color: #fff;
                    border-radius: 10px;
                }
            }

            .microsoft-signup-btn {
                button {
                    font-size: 14px;
                    color: #9B9B9B;
                    border: 0;
                    padding: 13px 10px;
                    border: 1px solid #EDEDED;
                    background-color: #fff;
                    border-radius: 10px;
                }
            }

            .email-area {
                i {
                    cursor: pointer;
                    display: flex;
                }

                .disabled {
                    pointer-events: none;
                    opacity: 0.5;
                }
            }

            .otp-area {
                i {
                    cursor: pointer;
                }

                .disabled {
                    pointer-events: none;
                    opacity: 0.5;
                }
            }
        }
    }

    .input-box-error {
        font-size: 10px;
        margin-top: -25px;

        .help-block {
            color: rgb(236, 15, 15);
        }
    }
}

.verification-page {
    // min-height: calc(~"100vh - 45px");
    width: 100%;



    .invalid {

        .input-group-text,
        input {
            border-bottom: 2px solid #e01919;
        }
    }

    // .submit-btn {

    //     button {
    //         font-size: 12px;
    //         font-weight: 600;
    //         background-color: #0067AC;
    //         color: #fff;
    //         border: 0;
    //         padding: 15px 10px;
    //         // color: #fff;
    //         border-radius: 10px;
    //         height: 45px;

    //         &:disabled {
    //             background-color: #E0E0E0;
    //             color: inherit;
    //         }
    //     }
    // }

    .submit-text {
        font-size: 14px;
        margin-top: 20px;

        a {
            font-weight: 500;
            color: inherit;
            font-size: 12px;
            text-decoration: underline;
        }
    }

    .progress-loading {
        width: 100%;
        left: 0;
        right: 0;
        position: absolute;
        height: 100vh;
        // background: #3f3f3f63;
        font-size: 25px;
        display: none;
        bottom: 0;
    }

    .otp-container {
        padding: 0 10px;
        width: 464px;

        @media @phone {
            width: 100%;
        }

        .otp-box {
            background-color: #F7F7F7;
            border-radius: 14px;
            padding: 20px 60px;
            // width: 464px;
        }
    }

    .verification-container {
        width: 700px;

        @media @phone {
            width: 100%;
        }

        .option-box {
            background-color: #F7F7F7;
            border-radius: 14px;
            padding: 20px 60px;

            // width: 464px;
            @media @phone,
            @phone-h {
                padding: 20px 20px;
            }

            .google-signup-btn {
                font-size: 14px;
                border: 0;
                padding: 13px 10px;
                border: 1px solid #EDEDED;
                background-color: #FFFFFF;
                border-radius: 4px 4px 4px 4px;
            }

            .microsoft-signup-btn {
                font-size: 14px;
                border: 0;
                padding: 13px 10px;
                border: 1px solid #EDEDED;
                background-color: #FFFFFF;
                border-radius: 4px 4px 4px 4px;
            }

            .social-text {
                font-size: 14px;
                color: #606060;
                font-weight: 600;
            }

            .submit-button {
                margin-top: 20px; // margin-bottom: 25px;

                button {
                    height: 50px;
                    width: 250px;
                    background-color: #0067AC;
                    font-size: 14px;
                    color: #ffffff;
                    font-weight: 600;
                    padding: 0px 5%;
                    margin-right: 20px;
                    border-radius: 4px;

                    @media @phone,
                    @phone-h,
                    @tab-h,
                    @tab-v {
                        width: 100%;
                        background: #0067AC;
                    }
                }
            }
        }

        .verification-box {
            background-color: #F7F7F7;
            border-radius: 14px;
            padding: 20px 60px;

            @media @phone,
            @phone-h {
                padding: 20px 20px;
            }

            .detail {

                @media @phone,
                @phone-h,
                @tab-h,
                @tab-v {
                    display: block;
                }

                .profile-picture {
                    width: 174px;
                    height: 174px;
                    border: 1px solid #EDEDED;
                    background-color: #ffffff;
                    padding: 30px;
                    margin: auto;
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                    margin-bottom: 30px;
                    border-radius: 4px;
                    cursor: pointer;

                    @media @phone,
                    @phone-h,
                    @tab-h,
                    @tab-v {
                        width: 130px;
                        height: 125px;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        padding: 0px;
                    }

                    .camara-img {
                        color: #CBCBCB;
                        margin-top: 14px;

                        .button-blue {
                            background-color: #0067AC !important;
                        }
                    }

                    .edit-div {
                        margin: 7px;
                        margin-top: 117px;
                        height: 23px; // padding: 3px;
                        width: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #ccc;
                        ;

                        .edit-profile-img {
                            // height: 30px;
                        }
                    }
                }

                .profile-picture:hover {
                    .edit-div {
                        box-shadow: 0px 0px 6px 0px black;
                        background-color: black;
                        border: 1px solid #ffffff;
                    }
                }

                .upload-button label {
                    width: 90px;
                    height: 25px;
                    color: #fff;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    background-color: #63C29E;
                    display: inline-flex;
                    align-items: center;
                    font-size: 9px;
                    line-height: 10px;
                    font-weight: bold;
                    justify-content: center;
                    border-radius: 4px;
                    cursor: pointer;

                    .upload-img {
                        height: 20px !important;
                        margin-right: 2.8px;
                        width: 20px;
                        background-size: contain;
                        background-image: url(/web/assets/images/upload_icon_2x.png);
                    }
                }
            }

        }
    }


    .input-box-error {
        font-size: 10px;
        margin-top: -25px;

        .help-block {
            color: rgb(236, 15, 15);
        }
    }

    &.invalid-url {
        height: 95% !important;
        font-weight: 600;
        line-height: 15px;
        font-size: 20px;

        @media @largescreen {
            font-size: 30px;
        }
    }

    .toast {
        position: absolute;
        width: 350px;
        height: 82px;
        right: 20px;
        left: auto;
        top: 10px !important;

        .toast-container {
            border: 4px solid;
            border-radius: 10px;
            width: 100% !important;
            position: fixed;
            min-height: 80px;
            color: #FFFFFF;
            cursor: pointer;
            z-index: 100;
            -webkit-box-shadow: -1px 2px 13px -4px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: -1px 2px 13px -4px rgba(0, 0, 0, 0.75);
            box-shadow: -1px 2px 13px -4px rgba(0, 0, 0, 0.75);

            @media @phone,
            @phone-h {
                width: 70%;
                margin-top: 20px;
            }

            .icon-wrapper {
                float: left;
                border-radius: 5px 0 0 5px;
                margin-right: 10px;
                width: 20%;
                background-color: #FFFFFF;
                font-size: 40px;
                display: flex;
                justify-content: center;
                align-items: center;

                .icon-error {
                    color: #D8644F;
                }

                .icon-info {
                    color: #16aaff;
                }

                .icon-warning {
                    color: #BA8939;
                }

                .icon-success {
                    color: #397657;
                }
            }

            .toast-message {
                font-size: 14px;
                align-self: center;
                letter-spacing: 0.1em;
                width: 75%;
            }
        }

        .error {
            background-color: #D8644F;
            border-color: #D8644F;
        }

        .info {
            background-color: #16aaff;
            border-color: #16aaff;
        }

        .warning {
            background-color: #BA8939;
            border-color: #BA8939;
        }

        .success {
            background-color: #397657;
            border-color: #397657;
        }
    }

    .toast-hide {
        visibility: hidden;
        opacity: 0;
        z-index: 10001;
        transition: visibility 0s linear 500ms, opacity 500ms ease;
        margin: 0 !important;
        border: 0 !important;
    }
    
    .toast-show {
        visibility: visible;
        opacity: 1;
        z-index: 10001;
        transition: visibility 0s linear 0s, opacity 500ms ease;
        top: 60px;
    
        @media @largescreen {
            top: 80px;
        }
    }
}

.forgot-password-page {
    // min-height: calc(~"100vh - 45px");
    width: 100%;

    .heading {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .sub-heading {
        font-size: 12px;
        font-weight: 500;
        color: #868686;
        margin-bottom: 25px;
    }

    .form-control {
        font-size: 14px;
        font-weight: 600;
        border: 0px;
        border-bottom: 2px solid #ccc;
        border-radius: 0;
        outline: none;
        min-height: 35px !important;
        background-color: transparent;
        box-shadow: none !important;

        @media @phone,
        @phone-h {
            height: 26px !important;
            font-size: 13px;
            padding-left: 0px;
        }

        @media @largescreen {
            font-size: 18px;
        }
    }

    input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-weight: 600 !important;
        color: #9B9B9B !important;
        font-size: 12px !important;

        /* Firefox */
        @media @phone,
        @phone-h {
            font-size: 13px !important;
        }
    }

    .input-group {
        margin-bottom: 25px !important;
    }

    .input-group-text {
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid #ccc;
        border-radius: 0;

        img {
            width: 12px;
        }

    }

    .invalid {

        .input-group-text,
        input {
            border-bottom: 2px solid #e01919;
        }
    }

    .submit-btn {

        button {
            font-size: 12px;
            font-weight: 600;
            background-color: #0067AC;
            color: #fff;
            border: 0;
            padding: 15px 10px;
            // color: #fff;
            border-radius: 10px;
            height: 45px;

            &:disabled {
                background-color: #E0E0E0;
                color: inherit;
            }
        }
    }

    .submit-text {
        font-size: 14px;
        margin-top: 20px;

        a {
            font-weight: 500;
            color: inherit;
            font-size: 12px;
            text-decoration: underline;
        }
    }

    .email-container {
        width: 464px;
        padding: 0 10px;

        @media @phone {
            width: 100%;
        }

        @media @largescreen {
            width: 600px;
        }


        .email-box {
            background-color: #F7F7F7;
            border-radius: 14px;
            padding: 20px 60px;
            // width: 464px;
        }

        .email-success-box {
            background-color: #F7F7F7;
            border-radius: 14px;
            padding: 20px 60px;
            // width: 464px;
        }
    }


    .input-box-error {
        font-size: 10px;
        margin-top: -25px;

        .help-block {
            color: rgb(236, 15, 15);
        }
    }

    .link-item {
        color: #007bff;
        text-decoration: none;
        background-color: transparent;
        cursor: pointer;

        &:hover {
            color: #0056b3;
            text-decoration: underline;
        }
    }
}