@font-face {
                font-family: 'almoni-dl';
                font-style: normal;
                font-weight: 300;
                src: url('fonts/almoni-dl-aaa-300.eot'); /* IE9 Compat Modes */
                src: local('Heebo'), local('Heebo-Regular'),
                url('fonts/almoni-dl-aaa-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/almoni-dl-aaa-300.woff') format('woff'), /* Modern Browsers */
                url('fonts/almoni-dl-aaa-300.ttf') format('truetype'), /* Safari, Android, iOS */
                url('fonts/almoni-dl-aaa-300.svg#Heebo') format('svg'); /* Legacy iOS */
            }
            @font-face {
                font-family: 'almoni-dl';
                font-style: normal;
                font-weight: 400;
                src: url('fonts/almoni-dl-aaa-400.eot'); /* IE9 Compat Modes */
                src: local('Heebo Medium'), local('Heebo-Medium'),
                url('fonts/almoni-dl-aaa-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/almoni-dl-aaa-400.woff') format('woff'), /* Modern Browsers */
                url('fonts/almoni-dl-aaa-400.ttf') format('truetype'), /* Safari, Android, iOS */
                url('fonts/almoni-dl-aaa-400.svg#Heebo') format('svg'); /* Legacy iOS */
            }
            @font-face {
                font-family: 'almoni-dl';
                font-style: normal;
                font-weight: 700;
                src: url('fonts/almoni-dl-aaa-700.eot'); /* IE9 Compat Modes */
                src: local('Heebo Bold'), local('Heebo-Bold'),
                url('fonts/almoni-dl-aaa-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/almoni-dl-aaa-700.woff') format('woff'), /* Modern Browsers */
                url('fonts/almoni-dl-aaa-700.ttf') format('truetype'), /* Safari, Android, iOS */
                url('fonts/almoni-dl-aaa-700.svg#Heebo') format('svg'); /* Legacy iOS */
            }

                                    @font-face {
                font-family: 'Figtree';
                font-style: normal;
                font-weight: 200;
                src: url('/css/fonts/figtree/Figtree-Light.ttf') format('truetype');
            }
            @font-face {
                font-family: 'Arimo';
                font-style: normal;
                font-weight: 200;
                src: url('/css/fonts/arimo/Arimo-Light.ttf') format('truetype');
            }
                        @font-face {
                font-family: 'Figtree';
                font-style: normal;
                font-weight: 300;
                src: url('/css/fonts/figtree/Figtree-Medium.ttf') format('truetype');
            }
            @font-face {
                font-family: 'Arimo';
                font-style: normal;
                font-weight: 300;
                src: url('/css/fonts/arimo/Arimo-Medium.ttf') format('truetype');
            }
                        @font-face {
                font-family: 'Figtree';
                font-style: normal;
                font-weight: 400;
                src: url('/css/fonts/figtree/Figtree-Regular.ttf') format('truetype');
            }
            @font-face {
                font-family: 'Arimo';
                font-style: normal;
                font-weight: 400;
                src: url('/css/fonts/arimo/Arimo-Regular.ttf') format('truetype');
            }
                        @font-face {
                font-family: 'Figtree';
                font-style: normal;
                font-weight: 600;
                src: url('/css/fonts/figtree/Figtree-SemiBold.ttf') format('truetype');
            }
            @font-face {
                font-family: 'Arimo';
                font-style: normal;
                font-weight: 600;
                src: url('/css/fonts/arimo/Arimo-SemiBold.ttf') format('truetype');
            }
                        @font-face {
                font-family: 'Figtree';
                font-style: normal;
                font-weight: 700;
                src: url('/css/fonts/figtree/Figtree-Bold.ttf') format('truetype');
            }
            @font-face {
                font-family: 'Arimo';
                font-style: normal;
                font-weight: 700;
                src: url('/css/fonts/arimo/Arimo-Bold.ttf') format('truetype');
            }
                        @font-face {
                font-family: 'Figtree';
                font-style: normal;
                font-weight: 800;
                src: url('/css/fonts/figtree/Figtree-ExtraBold.ttf') format('truetype');
            }
            @font-face {
                font-family: 'Arimo';
                font-style: normal;
                font-weight: 800;
                src: url('/css/fonts/arimo/Arimo-ExtraBold.ttf') format('truetype');
            }
                        html,body{
                font-family: 'almoni-dl','Arial';
                font-weight: 400;
                font-size: 16px;
            }
            ul{
                margin:0;
                padding:0;
                list-style: none;
            }
            button{
                background:transparent;
                border:0;
                padding:0;
            }
            ul{
                margin:0;
                padding:0;
                list-style: none;
            }
            input:focus{
                outline-color: #4c7bf4b3;
            }
            .wrapper,
            .bgWrap,
            .container-fluid,
            .container-fluid>.row{
                direction: ltr;
            }
            .nopadding {
                padding: 0 !important;
            }
            .bgWrap{
                background:url("../images/bg.jpg") center center no-repeat;
                background-size: cover;
                padding: 50px;
            }
            .bgWrap:before{
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                top:0;
                right:0;
                background: #8080807d;
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64b4ce', endColorstr='#053046',GradientType=0 ); /* ie6-9 */
            }

            .bgWrap.register {
                background:url("../images/register-background.png") center center no-repeat;
                background-size: cover;
            }
            .bgWrap.register::before {
                background: #8080807d;
            }

            .centerdTxt{
                text-align: center;
                color:#fff;
                position: relative;
            }
            .centerdTxt h1{
                font-size: 2.375rem;
                font-weight: 300;
                margin:0;
                margin-bottom: 50px;
            }
            .centerdTxt h1 span{
                font-weight: 400;
            }
            .centerdTxt h2{
                font-size: 1.125rem;
                margin:0;
                margin-bottom: 50px;
            }
            .centerdTxt a{
                font-size: 1.125rem;
                color: #fff;
                padding:7px 15px;
                border:1px solid #fff;
                display: inline-block;
                background: transparent;
                transition: all .25s ease-in-out;
                -moz-transition: all .25s ease-in-out;
                -webkit-transition: all .25s ease-in-out;
            }
            .centerdTxt a:hover,
            .centerdTxt a:focus{
                text-decoration: none;
                color:#5bb3cf;
                background: #fff;
                transition: all .25s ease-in-out;
                -moz-transition: all .25s ease-in-out;
                -webkit-transition: all .25s ease-in-out;
            }

            .newAccount{
                padding:40px;

            }
            .newAccount span{
                color:#5cb4d0;
                font-weight: 700;
                font-size: 1.063rem;
            }
            .newAccount a{
                display: inline-block;
                color:#848484;
                font-weight: 400;
                border:1px solid #848484;
                padding:5px 10px;
                margin-left:10px;
                transition: all .25s ease-in-out;
                -moz-transition: all .25s ease-in-out;
                -webkit-transition: all .25s ease-in-out;
            }

            .logoWrap:hover{
                text-decoration: none;
            }

            .inputWrap label.recaptchaCode{
                width: 100%;
            }

            .checkWrap{
                float: left;
            }
            .checkWrap label{
                width: 100%;
                margin: 0;
            }


            .sl2,
            .sl3B{
                text-align: center !important;
            }
            .loginFooter *{
                display: inline-block;
            }
            .loginFooter{
                text-align: center;
                color: rgba(123,123,123,0.68);
                font-size: 0.95rem;
                padding: 10px 0;
            }
            .loginFooter a{
                color: rgba(123,123,123,0.68);
                text-decoration: underline;
                margin-left:10px;
            }
            .loginFooter a:last-child{
                text-decoration: none;
            }
            .loginFooter a span{
                vertical-align: middle;
                text-decoration: underline;
            }
            .loginFooter a svg.language{
                width: 19px;
                height: 19px;
                fill: rgba(123,123,123,0.68);
                vertical-align: middle;
            }
            .innerErrorPage{
                padding: 50px;
                text-align: center;
            }
            .computerImg{
                margin-top: -45px;
                max-width: 80%;
            }
            .innerErrorPage{
                font-size: 1.125rem;
            }
            .innerErrorPage h1{
                color:#5cb4d0;
                font-weight: 700;
                font-size: 2.25rem;
                margin:40px 0;
            }
            .innerErrorPage h2{
                color: #5f5f5f;
                font-size: 1.563rem;
                margin:0;
                margin-bottom: 40px;
            }
            .innerErrorPage p{
                margin:0;
            }
            .innerErrorPage a{
                color: #5cb4d0;
            }

            .orWithGoogle{
                position: relative;
                height: 16px;
                margin: 20px auto 20px;
            }

            .orWithGoogleLiner{
                background-color: var(--auth-border-color-light);
                height: 1px;
                position: absolute;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                top: 50%;
                width: 100%;
                z-index: 1;
            }

            .googleSignUp{
                float: left;
                padding: 20px;
            }

            .googleSignUp iframe{
                  transform: scale(1.6)
            }

            div.big-preloader{
                display: none;
                width: 100%;
                height: 200px;
                background: url("../images/preLoader.svg") 50% 50% no-repeat;
                text-align: center;
                font-size: 11pt;
                color: #545454;
            }

            div.submitButtonsWrapper {
                margin-top: 10px;
            }

            .inputWrap input:not(.invalid) ~ p {
                display: none;
            }

            #registerForm:has( .register-step-three:not(.hidden)) {
                justify-content: center;
                padding-bottom:  130px;
            }

            .register .rightSide {
                background: #ffffff;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            #registerForm .big-preloader {
                height: 67px;
            }

            /*#registerForm .inputWrap p, .checkboxWrap ~ p {*/
            /*    margin: 0;*/
            /*    text-align: start;*/
            /*    background-color: #cc3567;*/
            /*    color: white;*/
            /*    padding-inline: 5px;*/
            /*    border: 1px solid #cc3567;*/
            /*    border-radius: 0 0 5px 5px;*/
            /*    width: 150px;*/
            /*    font-size: .8rem;*/
            /*}*/

            #registerForm .inputWrap input.invalid {
                border-color: #cc3567;
            }

            .register h2.head-title {
                margin-bottom: 0;
            }

            .register p.head-sentence {
                padding-bottom: 30px;
            }

            .register .inputWrap {
                position: relative;
            }

            .register .checkboxWrap {
                display: flex;
                align-items: center;
                min-width: 480px;
                gap: 10px;
            }

            .register .checkboxWrap label {
                margin: 0;
                display: inline-table;
                font-weight: 400;
                font-size: 14px;
            }

            .register .checkboxWrap input {
                margin: 0;
            }

            .register button.showPassBtn {
                position: absolute;
                top: 6px;
            }

            .welcome-dialog-wrapper .btnWithLoader,
            button.download-multiple,
            a.support-send.btnWithLoader,
            a.tooltip-confirm-button.btnWithLoaderPopup,
            div.innerview-save-box a.btnWithLoader {
                display: inline-block;
                outline: none;
                height: 40px;
                line-height: 40px;
                text-align: center;
                width: 120px;
                border-radius: 30px;
                background: white;
                border: 1px solid var(--secondary-blue);
                color: var(--secondary-blue);
                letter-spacing: 1px;
                font-size: 16px;
                cursor: pointer;
                transition: all 0.25s ease;
            }
            a.tooltip-confirm-button.btnWithLoaderPopup{
                border: 1px solid #fff;
                background: var(--secondary-blue);
                color: #fff;
                width: 140px;
                height: 20px;
                line-height: 20px;
                text-decoration: none;
                margin-top: -3px;
            }
            a.tooltip-confirm-button.btnWithLoaderPopup:hover{
                color: var(--secondary-blue);
                background: #fff;
            }
            .welcome-dialog-wrapper .btnWithLoader:hover,
            button.download-multiple:hover,
            a.support-send.btnWithLoader:hover,
            div.innerview-save-box a.btnWithLoader:hover {
                color:white;
                background: var(--secondary-blue);
            }

            a.support-send.btnWithLoader.showLoader,
            a.tooltip-confirm-button.btnWithLoaderPopup.showLoader,
            div.innerview-save-box a.showLoader {
                width: 40px;
                border-color: #bbbbbb;
                border-width: 3px;
                font-size: 0;
                border-left-color: var(--secondary-blue);
                animation: rotating 2s 0.25s linear infinite;
            }
            a.tooltip-confirm-button.btnWithLoaderPopup.showLoader{
                width: 20px;
                border-color: #fff;
                border-left-color: #bbb;
            }

            a.tooltip-confirm-button.btnWithLoaderPopup.showLoader:hover{
                color: #fff;
                background: var(--secondary-blue);
            }
            a.support-send.btnWithLoader.validate,
            a.tooltip-confirm-button.btnWithLoaderPopup.validate,
            div.innerview-save-box a.validate {
                font-size: 16px;
                color: white;
                background: var(--secondary-blue);
            }
            a.tooltip-confirm-button.btnWithLoaderPopup.validate{
                color: var(--secondary-blue);
                background: #fff;
            }
            a.support-send.btnWithLoader.error,
            a.tooltip-confirm-button.btnWithLoaderPopup.error,
            div.innerview-save-box a.validate.error {
                color: white !important;
                background: var(--primary-red);
                border: 2px solid var(--primary-red);
            }

            .inputWrap.repeatPassword-wrap {
                margin-top: 0;
            }

            .register-step-two {
                margin-bottom: 50px;
            }

            #registerForm .verificationCodeTxt {
                margin-bottom: 15px;
            }

            div#captcha {
                padding-top: 10px;
            }

            .register-success-text p {
                font-size: 22px;
                line-height: 1;
                margin-bottom: 20px;
            }

            .register-success-images .awsome {
                width: 310px;
            }

            #like #svg_2 {
                stroke: none;
            }

            .like {
                height: 124px;
                width: 124px;
                margin-top: -20px;
            }

            .inputWrap.lastname-wrap {
                margin-top: 0;
            }

            .inputWrap input:not(.invalid) ~ p, .checkboxWrap:has(input:not(.invalid)) ~ p , .captcha-container div:not(.invalid) ~ p {
                display: none;
            }

            .meckano-logo-container{
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: start;
                height: 59px;
                > div.meckano-logo-inner-container{
                    height: 100%;
                    > svg{
                        width: 112px;
                        height: 100%;
                        fill: #333;
                    }
                }
            }

            :root {
                --auth-primary: #0073EA;
                --auth-black: #323338;
                --auth-action: #FFAD44;
                --auth-error: #FF3366;
                --auth-backgorund: #F6F9FF;
                --auth-gray-color: #676879;
                --auth-gray-second: #ECEDF5;
                --auth-border-color: #E6E9EF;
                --auth-border-color-light: #9AADBD;
                --auth-border-color-second: #C5C7D0;
                --auth-hover: #0255A3;
                --auth-hover-btn: #FFBF6D;
                --auth-primary-hover: #007FFF;
                --auth-meter: #E7F1FF;

                --auth-red: #E30000;
                --auth-yellow: #FFAE00;
                --auth-green: #41BB00;

                --auth-font-size-tiny: 10px;
                --auth-font-size-xxs: 12px;
                --auth-font-size-xms: 13px;
                --auth-font-size-xs: 14px;
                --auth-font-size-s: 15px;
                --auth-font-size: 16px;
                --auth-font-size-ms: 17px;
                --auth-font-size-m: 19px;
                --auth-font-size-l: 21px;
                --auth-font-size-title: 22px;

                --auth-btn-height: 41px;

                                    --auth-rotate: -90deg;
                    --auth-font-family: 'figtree', sans-serif;
                            }

            meter {
                margin: 0 auto 1em;
                width: 100%;
                height: 5px;
            }
            /* for chrom only see ticket 1790 */
            .selector:not(*:root), meter {
                height: 12px;
            }
            meter::-webkit-meter-bar {
                background: none;
                background-color: var(--auth-meter);
                border: none;
            }

            /* Webkit based browsers */
            meter[value="1"]::-webkit-meter-optimum-value { background: var(--auth-red); }
            meter[value="2"]::-webkit-meter-optimum-value { background: var(--auth-action); }
            meter[value="3"]::-webkit-meter-optimum-value { background: var(--auth-green); }
            meter[value="4"]::-webkit-meter-optimum-value { background: var(--auth-primary); }

            /* Gecko based browsers */
            meter[value="1"]::-moz-meter-bar { background: var(--auth-red); }
            meter[value="2"]::-moz-meter-bar { background: var(--auth-action); }
            meter[value="3"]::-moz-meter-bar { background: var(--auth-green); }
            meter[value="4"]::-moz-meter-bar { background: var(--auth-primary); }

            div.wrapperMeter{
                text-align: left;
                margin-top: 15px;
            }
            meter::-webkit-meter-bar,
            meter::-webkit-meter-optimum-value,
            meter::-moz-meter-bar{
                border-radius: 2px;
            }
            div.wrapperPasswordStrength{
                margin-top: -15px;
                font-size: 13px;
                font-weight: 800;
            }

            .container-auth{
                min-height: 100vh;
                height: fit-content !important;
                font-family: var(--auth-font-family);

                .auth-row{
                    display: flex;
                    min-height: 100vh;
                    padding: 32px;
                    background: var(--auth-backgorund);

                    p{
                        margin: 0;
                        text-align: start;
                        font-size: 15px;
                        text-wrap: pretty;
                        color: var(--auth-black);
                    }

                    a{
                        &:focus{
                            outline: none;
                        }
                    }

                    .auth-cover{
                        max-width: 550px;
                        border-radius: 10px;
                        overflow: hidden;
                        background: url(/images/vector-auth.png);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        filter: drop-shadow(0 4px 5.3px rgba(0, 115, 234, 0.15)) drop-shadow(0 -4px 4px rgba(0, 115, 234, 0.06));

                        &.auth-loading{
                            filter: none;
                        }
                    }

                    .rightSideText{
                        flex: 15%;
                        display: flex;
                        align-items: end;
                        justify-content: start;

                        p{
                            font-size: var(--auth-font-size-xs);
                        }
                    }

                    .rightSide{
                        flex: 40%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        min-height: fit-content;
                        padding: 82px 20px 50px 20px;
                        position: relative;

                        form{
                            max-width: 400px;
                            width: 100%;
                        }

                        .logoWrap{
                            display: block;
                            width: fit-content;
                        }

                        .inputWrap{
                            margin: 14px 0;

                            input:not([type="submit"]):not([name="submit"]):not([type="button"]){
                                height: 40px;
                                width: 100%;
                                padding: 4px 12px;
                                border: 1px solid var(--auth-border-color);
                                border-radius: 5px;
                                font-size: var(--auth-font-size-s);
                                text-align: start;
                                padding-inline-start: 18px;

                                &.password,&.email {
                                    text-align: left;
                                    direction: ltr;
                                }

                                &.otp-number-input{
                                    height: 54px;
                                    padding: 0;
                                    border-color: var(--auth-border-color);
                                    text-indent: unset;
                                    text-align: center;

                                    &.otp-error{
                                        border: 1px solid var(--auth-error);
                                    }

                                    ::placeholder{
                                        font-size: var(--auth-font-size-xs);
                                    }
                                }

                                &.input-error{
                                    border: 1px solid var(--auth-error);
                                }
                            }

                            label,label span{
                                text-align: start;
                            }

                            .inputWrap.floatingLabel {
                                position: relative;
                            }

                            &.floatingLabel {
                                margin: 15px 0;

                                button.showPassBtn{
                                    opacity: 0;
                                    visibility: hidden;
                                }

                                label {
                                    position: absolute;
                                    z-index: 0;

                                    top: 11px;
                                    right: unset;
                                    left: 20px;
                                    width: max-content;
                                    padding: 0 8px;

                                    color: var(--auth-black);
                                    font-size: var(--auth-font-size-xms);
                                    font-weight: normal;
                                    pointer-events: none;

                                    transition: all ease-in-out 0.3s;

                                    .phone-plus{
                                        font-size: var(--auth-font-size-tiny);
                                    }
                                }

                                input.invalid ~ label{
                                    background: #ffffff;
                                    top: -10px;
                                    font-size: var(--auth-font-size-xms);

                                    z-index: 2;
                                    color: var(--auth-error);
                                }

                                input.focus ~ .showPassBtn{
                                    opacity: 1;
                                    visibility: visible;
                                    transition: all ease-in-out 0.3s;
                                }

                                input.focus ~ label{
                                    background: #ffffff;
                                    top: -10px;
                                    font-size: var(--auth-font-size-xxs);
                                    font-weight: bold;
                                    z-index: 2;
                                }
                            }

                            .fullname-error{
                                display: block;

                                width: 125%;
                                margin-top: 1px;

                                font-size: var(--auth-font-size-xxs);
                                text-align: start;
                                color: var(--auth-error);
                            }
                        }

                        .inputWrap input[type="submit"],
                        .inputWrap input[type="button"],
                        .auth-button,
                        .auth-button-reverse{
                            display: block;
                            width: 100%;
                            height: var(--auth-btn-height);
                            border-radius: 6px;
                            font-size: var(--auth-font-size-s);
                            line-height: var(--auth-btn-height);
                            text-align: center;
                            text-indent: 0;

                            &:hover{
                                text-decoration: none;
                            }
                        }

                        .auth-button-reverse{
                            color: var(--auth-primary);
                            border: 1px solid var(--auth-primary);
                        }

                        .inputWrap input[type="submit"],
                        .inputWrap input[type="button"],
                        .auth-button{
                            &:not(:has(.btn-reverse)):not(.btn-reverse) {
                                background: var(--auth-primary);
                                color: #fff;
                                border: 0;

                                &:hover{
                                    background: var(--auth-hover);
                                }
                            }
                        }


                        .inputWrap label{
                            font-weight: bold;
                            margin-bottom: 5px;
                            float: none;
                            width: fit-content;
                            color: var(--auth-black);
                        }

                        .language-switcher-wrapper{
                            font-size: var(--auth-font-size-xs);
                            position: relative;

                            .multi-language{
                                width: 14px;
                                height: 14px;
                            }

                            .chevronIcon {
                                width: 10px;
                                height: 6px;
                                transform: rotate(180deg);
                            }

                            li{
                                width: 100%;
                                text-align: center;

                                &:first-child{
                                    border-bottom: 1px solid var(--auth-border-color-second);
                                }

                                a{
                                    width: 100%;
                                    display: block;
                                    color: var(--auth-black);
                                    text-decoration: none;

                                    &:hover{
                                        background: var(--auth-gray-second);
                                    }
                                }
                            }

                            .language-switcher{
                                position: relative;
                                z-index: 1;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                gap: 10px;
                                width: 85px;

                                border: 1px solid var(--auth-border-color-second);
                                border-radius: 50px;
                                padding: 3px 7px;
                                background: #fff;
                            }

                            .toggle-btn{
                                position: relative;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 50px;
                                width: 100px;
                                border: 1px solid;
                                color: black;
                                background: #fff;
                            }

                            .language-switcher-selection{
                                position: absolute;
                                top: -44px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;

                                width: 85px;
                                margin-bottom: -17px;
                                padding-bottom: 18px;
                                max-height: min-content;

                                opacity: 0;
                                visibility: hidden;

                                background: #fff;
                                border: 1px solid var(--auth-border-color-second);
                                border-radius: 7px 7px 0 0;

                                &.open-selection{
                                    animation: languageSwitcher .3s forwards;
                                }
                            }

                            #lang-toggle:checked ~ .language-switcher-selection {
                                display: flex;
                            }
                        }

                        .auth-head{
                            margin-bottom: 26px;
                            width: 92%;

                            .auth-title{
                                font-weight: bold;
                                font-size: var(--auth-font-size-l);

                                &.auth-title-register{
                                    font-size: var(--auth-font-size-l);
                                }
                            }
                        }

                        .auth-head-restoration{
                            margin: 50px 0 30px;
                            width: 92%;

                            .auth-head-restoration-title{
                                font-weight: bold;
                                font-size: var(--auth-font-size);
                            }
                        }

                        .appLinks{
                            position: unset;

                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 15px;

                            transform: none;

                            a svg{
                                fill: none;
                                width: 120px;
                                height: 40px;
                            }
                        }

                        .auth-inputs{
                            position: relative;
                            margin-bottom: 16px;

                            .inputWrap.xCP{
                                display: flex;
                                flex-direction: column;
                            }

                            .auth-password{
                                position: relative;

                                .inputWrap{
                                    margin: 0;
                                }

                                .showPassBtn{
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    right: 25px;
                                    display: flex;
                                    align-items: center;

                                    transform: none;

                                    svg{
                                        width: 18px;
                                        height: 13px;
                                        fill: var(--auth-gray-color);

                                        &:hover{
                                            fill: var(--auth-primary);
                                        }
                                    }
                                }
                            }

                            .password-wrapper{
                                flex-wrap: wrap;
                                margin-top: 5px;

                                .inputWrap{
                                    flex: 100%;
                                    margin: 0;

                                    .password-strength{
                                        display: flex;
                                        justify-content: end;
                                        gap: 4px;
                                        label{
                                            width: fit-content;
                                        }
                                        p,strong,span{
                                            font-size: var(--auth-font-size-xxs);
                                        }

                                        .password-strength-0{
                                            color: var(--auth-gray-color);
                                        }
                                        .password-strength-1{
                                            color: var(--auth-red);
                                        }
                                        .password-strength-2{
                                            color: var(--auth-action);
                                        }
                                        .password-strength-3{
                                            color: var(--auth-green);
                                        }
                                        .password-strength-4{
                                            color: var(--auth-primary);
                                        }
                                    }
                                }
                            }
                            .user-wrapper{
                                display: flex;
                                justify-content: space-between;

                                .inputWrap{
                                    flex: 0 0 48%;
                                }
                            }

                            .privacy-newsletter-wrapper{
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                margin-top: 25px;

                                .privacy.invalid ~ label{
                                    color: var(--auth-error) !important;
                                    a{
                                        color: var(--auth-error) !important;
                                    }
                                }

                                label{
                                    font-size: var(--auth-font-size-xxs);

                                    a{
                                        color: var(--auth-black);
                                        text-decoration: underline;
                                    }
                                }
                            }

                            .loginNotification{
                                min-height: 40px;
                                font-size: 14px;
                                color: var(--auth-error);

                                &.otp-error-open{
                                    position: absolute;
                                    top: 91%;
                                    max-width: 58%;
                                }
                            }

                            .pwSnt{
                                margin-top: 80px;

                                .pwSnt-top{
                                    display: flex;
                                    gap: 10px;
                                    margin-bottom: 10px;
                                }

                                .pwSnt-content{
                                    font-weight: bold;
                                }
                            }
                        }

                        .auth-remember-me{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            input:not([type="submit"]):not([name="submit"]):not([type="button"]){
                                height: fit-content;
                                margin: 0;
                            }
                        }

                        #verificationCode,.register-step-two {
                            margin-top: 72px;

                            .time-code{
                                padding-bottom: 24px;
                            }

                            .verificationCodeSMS{
                                width: 100%;

                                .verificationCodeSMS-placeholder {
                                    direction: ltr;
                                    unicode-bidi: bidi-override;
                                }
                            }

                            .verificationCodeTxt-title{
                                font-size: var(--auth-font-size-ms);
                                font-weight: bold;

                                .verificationCodeTxt-title-code{
                                    font-size: var(--auth-font-size-s);
                                    font-weight: normal;
                                }
                            }
                            label.verificationCode{
                                margin-bottom: 15px;
                            }
                        }

                        .registerNotification,.registerNotificationNote{
                            display: flex;
                            flex-direction: column;

                            color: var(--auth-error);
                            font-size: var(--auth-font-size-xxs);
                            text-align: start;
                            padding-inline-start: 18px;

                            .closeIcon{
                                width: 7px;
                                height: 7px;
                                fill: var(--auth-error);
                            }
                        }

                        .buttons-container{
                            display: flex;
                            justify-content: end;
                            margin-bottom: 43px;

                            .resend{
                                color: var(--auth-primary);
                                font-size: var(--auth-font-size-xs);
                                margin-top: 10px;
                            }
                        }

                        .register-step-two {
                            .otp-number-inputs{
                                margin-bottom: 5px;
                            }

                            .inputWrap label{
                                margin-bottom: 18px;
                            }

                            .buttons-container{
                                display: flex;
                                justify-content: start;
                                flex-direction: column;
                                margin-bottom: 43px;
                                margin-top: 10px;

                                .buttons-container-text{
                                    font-weight: bold;
                                    font-size: var(--auth-font-size-xms);
                                }

                                .buttons-container-actions{
                                    display: flex;
                                    justify-content: start;
                                    gap: 10px;

                                    .resend,.send{
                                        padding: 0;
                                        color: var(--auth-primary);
                                        font-size: var(--auth-font-size-xs);
                                        margin-top: 0;
                                        border: none;
                                        background: none;
                                    }
                                }
                            }
                        }

                        .auth-social{
                            .auth-google{
                                position: relative;
                                overflow: hidden;
                                padding: 2px;
                            }
                            .orWithGoogleText{
                                position: absolute;
                                left: 0;
                                right: 0;
                                z-index: 2;
                                margin: auto;
                                width: 80px;
                                color: var(--auth-gray-color);
                                background-color: #fff;
                                font-size: var(--auth-font-size-s);
                                font-weight: 700;
                                line-height: 16px;
                                text-align: center;
                            }
                        }

                        .submitButtonsWrapper{
                            .backToLogin{
                                margin-top: 12px;
                            }
                        }

                        .inputWrap{
                            .rememberMe{

                                display: flex;
                                align-items: center;
                                gap: 8px;

                                margin: 0;

                                input{
                                    height: fit-content;
                                }

                                span{
                                    flex-shrink: 0;
                                    font-weight: normal;
                                    font-size: var(--auth-font-size-xxs);
                                }
                            }
                        }

                        .login-sso-btns-wrapper{
                            display: flex;
                            flex-direction: column;
                            gap: 10px;

                            div.login-sso-btn{
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                width: 100%;


                                .auth-microsoft{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 17px;

                                    width: 100%;
                                    height: var(--auth-btn-height);

                                    background: #fff;
                                    border: 1px solid #dadce0;
                                    font-weight: 600;
                                    border-radius: 4px;
                                    cursor: pointer;

                                    span{
                                        color: var(--auth-black);
                                        font-size: var(--auth-font-size-xs);
                                        font-
                                    }

                                    img{
                                        width: 20px;
                                    }
                                }
                            }
                        }
                        .newAccount{
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            width: 100%;
                            padding: 0;

                            &.newAccount-login{
                                margin: 29px 0;

                                &:hover{
                                    background: transparent;
                                }
                            }

                            span{
                                color: var(--auth-black);
                                font-size: var(--auth-font-size-s);
                            }

                            a{
                                padding: 0;
                                border: none;
                                color: var(--auth-primary);
                                font-weight: bold;
                                font-size: var(--auth-font-size-s);
                            }
                        }
                        .forgotPass{
                            text-decoration: none;
                            color: var(--auth-primary);
                            font-size: var(--auth-font-size-xs);
                        }

                        .otp-number-inputs {

                            display: flex;
                            gap: 25px;
                            flex-direction: row;
                            width: 100%;
                            direction: ltr;
                        }

                        .auth-backto,.backToLogin{
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            width: 100%;
                            height: var(--auth-btn-height);
                            margin-top: 10px;

                            font-size: var(--auth-font-size-xs);
                            color: var(--auth-primary);
                            font-weight: bold;
                            text-align: center;
                            text-decoration: none;
                            cursor: pointer;

                        }

                        .register-step-three{
                            .register-success-text{
                                h2{
                                    font-size: var(--auth-font-size-m);
                                    font-family: var(--auth-font-family);
                                    color: var(--auth-black);
                                    font-weight: bold;
                                    margin: 0;
                                }

                                .register-success-text-title{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 14px;
                                }

                                .register-success-content{
                                    p{
                                        font-size: var(--auth-font-size-s);
                                        text-align: center;
                                        line-height:  20px;
                                    }
                                    margin: 30px 0;
                                }
                            }
                        }
                        #registerForm {
                            display: flex;
                            flex-direction: column;

                            margin:0 auto;
                            max-width: 80%;
                            min-height: 80%;
                            width: 100%;

                            text-align: center;

                            &:not(:has(.register-step-three.hidden)) {
                                .logoWrap {
                                    width: fit-content;
                                    margin: 0 auto;
                                    margin-bottom: 20px;
                                }
                            }
                        }

                        .auth-head-recover{
                            margin-bottom: 42px;
                            margin-top: 29px;
                            width: 92%;
                            .auth-head-recover-title{
                                font-weight: bold;
                                font-size: var(--auth-font-size-ms);
                            }
                            font-size: var(--auth-font-size-s);
                        }
                        .update-phone{
                            margin-top: 40px;

                            h3{
                                margin-bottom: 20px;
                                font-weight: bold;
                                text-align: start;
                                font-size: var(--auth-font-size-ms);
                            }

                            .submit-update-phone-wrapper{
                                display: flex;
                                gap: 10px;

                                .inputWrap{
                                    width: 100%;

                                    .send,.resend{
                                        color: var(--auth-black);
                                        font-size: var(--auth-font-size-s);
                                        border: 1px solid var(--auth-black);
                                        line-height: 11px;
                                    }
                                }
                            }

                            .updatePhoneError{
                                color: var(--auth-error);
                            }
                        }
                        input:-webkit-autofill {
                            box-shadow: 0 0 0 1000px #fff inset !important; /* background color */
                            -webkit-text-fill-color: var(--auth-black) !important;
                        }
                    }

                    .leftSide{

                        flex: 45%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 64px 0;
                        margin-top: 100px;

                        .left-side-content{
                            display: flex;
                            flex-direction: column;
                            gap: 8px;

                            .left-side-content-title{
                                height: auto;
                                overflow: hidden;

                                h1{
                                    margin: 0;
                                    font-size: var(--auth-font-size-title);
                                    font-weight: bold;
                                    color: var(--auth-black);
                                }

                                h2{
                                    font-size: var(--auth-font-size-m);
                                    margin: 0;
                                }
                            }

                            img{
                                margin: 60px 0;
                                width: 100%;
                                                                    transform: rotateY(180deg);
                                                            }

                            a{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 16px;

                                width: fit-content;
                                margin-top: 16px;
                                padding: 7px 20px;

                                font-size: var(--auth-font-size-s);
                                color: #fff;
                                border-radius: 100px;
                                border: 1px solid #fff;

                                &:hover{
                                    text-decoration: none;
                                }

                                &.btn-hov-arr{
                                    &:hover{
                                        .arrow-icon{
                                            opacity: 1;
                                                                                            right: 26px;
                                            
                                            transition: all .3s ease-in-out;
                                        }
                                        .button-text{
                                                                                    padding-left: 0;
                                            padding-right: 34px;
                                                                                    transition: padding .3s ease-in-out;
                                        }
                                    }
                                }

                                &.more-btn-login{
                                    background: var(--auth-action);

                                    &:hover {
                                        background: var(--auth-hover-btn);
                                    }
                                }

                                &.more-btn-register{
                                    background: var(--auth-primary);
                                    &:hover {
                                        background: var(--auth-primary-hover);
                                    }
                                }

                                .button-text{
                                    padding-left: 17px;
                                    padding-right: 17px;
                                    transition: padding .3s ease-in-out;
                                }

                                .arrow-icon{
                                    width: 16px;
                                    height: 13px;
                                    fill: #fff;
                                    opacity: 0;
                                                                            right: 40px;
                                        transform: rotate(180deg);
                                                                        position: absolute;
                                    transition: all .3s;
                                }
                            }
                        }
                    }
                }

                .auth-footer{

                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 16px;

                    margin-top: auto;
                    padding-top: 40px;
                    width: 100%;
                    max-width: 400px;

                    text-decoration: none;
                    font-size: var(--auth-font-size-xs);

                    .auth-footer-actions{

                        .auth-footer-links{
                            display:flex;
                            gap: 12px;

                            a{
                                font-size: var(--auth-font-size-xxs);
                                color: var(--auth-gray-color);
                                text-decoration: none;

                                &:hover{
                                text-decoration: underline;
                                }
                            }
                        }

                        .login_copyrights{
                            margin-top: 8px;

                            font-size: var(--auth-font-size-xxs);
                            color: var(--auth-gray-color);
                        }
                    }
                }

                .chevronIcon{
                    width: 14px;
                    height: 9px;
                }

                .btn{
                    width: 100%;
                    height: var(--auth-btn-height);
                    border:0;
                    border-radius: 6px;
                    background: var(--auth-primary);
                    color:#fff;
                    font-size: var(--auth-font-size-s);
                    line-height: var(--auth-btn-height)x;
                }
                .btn-reverse{
                    display: block;
                    width: 100%;
                    height: var(--auth-btn-height);
                    border-radius: 6px;
                    background: transparent;
                    color: var(--auth-primary);
                    border: 1px solid var(--auth-primary);
                    font-size: var(--auth-font-size-s);
                    line-height: var(--auth-btn-height);
                    font-weight: bold;

                    &:hover{
                        text-decoration: none;
                    }
                }

                ::placeholder{
                    font-size: 15px;
                    color: var(--auth-gray-color);
                }
            }

            .animate-up{
                opacity: 0;
                animation: slideUp .8s ease forwards .8s;
            }

            .animate-up-second{
                opacity: 0;
                animation: slideUp 1s ease forwards 1s;
            }

            .animate-opacity{
                opacity: 0;
                animation: opacity .5s ease forwards .5s;
            }

            .animate-opacity-second{
                opacity: 0;
                animation: opacity 1s ease forwards 1s;
            }

            @keyframes slideIn {
                0% {
                    transform: translateX(-200px) scale(.2);
                }
                100% {
                    transform: translateX(0px) scale(1);
                }
            }

            @keyframes slideUp {
                0% {
                    opacity: 0;
                    transform: translateY(300px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0px);
                }
            }

            @keyframes opacity {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }

            @keyframes opacity {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }


            .inputWrap input:not(.invalid) ~ p, .checkboxWrap:has(input:not(.invalid)) ~ p , .captcha-container div:not(.invalid) ~ p {
                display: none;
            }

            #tooltip-confirm {
                display: none;
            }


            @keyframes languageSwitcher {
                0% {
                    opacity: 0;
                    visibility: hidden;
                }
                100% {
                    opacity: 1;
                    visibility: visible;
                }
            }

            @media (max-width: 1240px) and (min-width: 768px) {
                .container-auth .auth-row  .rightSideText{
                    flex: 0;
                }
            }
            @media (max-width: 768px) {
                .container-auth {
                    .auth-row{
                        flex-direction: column-reverse;
                        background: #fff;
                        padding: 27px;

                        .leftSide{
                            display: none;
                        }

                        .rightSideText{
                            flex: 100%;
                            justify-content: center;
                            margin-top: 20px;
                        }

                        .rightSide{
                            .otp-number-inputs{
                                gap: 12px;
                            }

                            .auth-social .auth-google{
                                padding: unset;
                                position: unset;
                                width: 100%;
                                overflow: unset;
                            }
                            
                            #registerForm{
                                max-width: 100%;
                            }
                        }

                        .auth-cover{
                            flex: 100%;
                            padding: 27px 0 0;
                            background: none;
                            filter: none;
                        }
                    }
                }
            }
            @keyframes onAutoFillStart { from {} to {} }

            input:-webkit-autofill {
              animation-name: onAutoFillStart;
              animation-duration: 0.01s;
            }

            .grecaptcha-badge {
                bottom: 25% !important;
                transform: scale(0.9);
            }

            .login_dillers{

                .inputWrap{
                    .password {
                        position: relative;
                    }
                    .rME {
                        font-size: 0.95rem !important;
                        outline: none;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-block: 10px 20px;
                    }


                    .checkWrap label {
                        width: 100%;
                        margin: 0;
                    }

                    label {
                        width: 100%;
                        width: 100%;
                        text-align: start;
                        color: #444444;
                        font-weight: 400;
                        font-size: 1rem;
                        margin-bottom: 10px;
                    }

                    .forgotPass {
                        float: right;
                        text-decoration: underline;
                        font-size: 0.95rem;
                        margin-top: 10px;
                    }

                    .showPassBtn{
                        position: absolute;
                        right: 13px;
                        bottom: 13px;
                    }
                }

                .check {
                    width: 20px;
                    height: 20px;
                    background: #fff;
                    display: inline-block;
                    border: 1px solid #666666;
                    text-align: center;
                    vertical-align: top;
                    margin-left: 5px;
                }

                .inputWrap + .inputWrap {
                    margin-top: 20px;
                    position: relative;

                    .password-wrapper{
                        position: relative;
                        .showPassBtn{
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            right: 25px;
                            z-index: 1;
                            display: flex;
                            align-items: center;

                            transform: none;

                            svg{
                                width: 18px;
                                height: 13px;
                                fill: var(--auth-gray-color);

                                &:hover{
                                    fill: var(--auth-primary);
                                }
                            }
                        }
                    }
                }

                .inputWrap input:not([type="submit"]):not([name="submit"]) {
                    width: 100%;
                    border: 1px solid #a1a1a1;
                    height: 50px;
                    text-indent: 15px;
                    line-height: 50px;
                    font-size: 1.125rem;
                    text-align: left;
                    direction: ltr;
                    padding-inline-start: 15px;
                }

                .inputWrap input[type="submit"], .inputWrap input[type="button"] {
                    width: 100%;
                    border: 0;
                    color: #fff;
                    font-size: 1.188rem;
                    height: 50px;
                    line-height: 50px;
                }

                #loginForm {
                    width: 310px;
                    margin: 0 auto;
                    max-width: 80%;
                    text-align: center;
                    min-height: 80%;

                    .logoWrap {
                        display: block;

                        .logoDiller img {
                            max-width: 250px;
                        }
                    }
                }

                #loginForm p, #registerForm .verificationCodeTxt:not(.time-code) {
                    color: #7a7a7a;
                    font-size: 1.188rem;
                    margin: 0;
                    margin-top: 20px;
                    border-top: 1px solid #ebebeb;
                    padding: 20px 0;
                }
                .check{
                    width: 20px;
                    height: 20px;
                    background: #fff;
                    display: inline-block;
                    border: 1px solid #666666;
                    text-align: center;
                    vertical-align: top;
                    margin-right: 5px;

                }
                .check svg{
                    width: 80%;
                    height: 100%;
                    opacity: 0;
                }
                .checkWrap input[type="checkbox"]{
                    width: 20px;
                    height: 20px;
                    right: 0;
                    top: 0;
                    position: absolute;
                    opacity: 0;
                }
                .checkWrap input[type="checkbox"]:checked + .check svg{
                    opacity: 1;
                }
            }