@media(max-width:1400px) {
    body.login-page .content #splash-screen .logo,
    body.forgot-page .content #splash-screen .logo,
    body.confirmInvite-page .content #splash-screen .logo,
    body.reset-page #splash-screen .content .logo {
        padding-top: 10px;
    }
}

    @media (min-width: 48em) {

        body #splash-screen .center-section-wrapper {
            width: 380px;
        }
    }

    .login-includer {
        height: 100%;
    }

    #splash-screen .relative {
        position: relative;
        width: 100%;
    }


    #splash-screen {
        background-color: white;
        width: 100%;
        height: 100%;
        position: relative;
    }

        #splash-screen .ui-checkbox span {
            font-weight: 400;
        }

        #splash-screen .login-section {
            width: 100%;
            font-weight: normal;
            font-size: 15px;
            letter-spacing: normal;
        }

            #splash-screen .login-section form {
                width: 100%;
            }

                #splash-screen .login-section form .text, #splash-screen .login-section form .edit {
                    width: 100%;
                }

                #splash-screen .login-section form .field {
                    width: 100%;
                    position: relative;
                    margin-bottom: 10px;
                }

                    #splash-screen .login-section form .field .password-reveal {
                        left: unset;
                        right: 5px;
                    }

                    #splash-screen .login-section form .field .fa {
                        width: 30px;
                        text-align: center;
                    }

                    #splash-screen .login-section form .field input[placeholder] {
                        color: black;
                        /*font-family: Arial;*/
                        text-align: left;
                        direction: ltr;
                    }

                    #splash-screen .login-section form .field input {
                        height: 42px;
                        line-height: 30px;
                        /*font-family: Arial;*/
                        width: 100%;
                        /*padding: 20px 10px;*/
                        display: block;
                        background-color: white;
                        border: 1px solid silver;
                        border-radius: 0;
                        color: #D5D5D6;
                        box-shadow: none;
                    }

            #splash-screen .login-section .avatar {
                text-align: center;
                width: 100%;
                margin-bottom: 15px;
            }

                #splash-screen .login-section .avatar .image {
                    margin: 0 auto;
                    height: 80px;
                    width: 80px;
                    background-image: url(/images/avatar_inverse.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    margin-bottom: 15px;
                }

            #splash-screen .login-section form .field > div {
                display: inline-block;
                vertical-align: middle;
            }

            #splash-screen .login-section form .field label .fa {
                position: absolute;
                left: -30px;
                top: 18px;
            }

            #splash-screen .login-section form .field label {
                color: #A1A4AA;
                display: block;
                font-size: 12px;
                font-weight: 200;
                text-transform: uppercase;
                position: relative;
            }

                #splash-screen .login-section form .field label.error:before {
                    content: "";
                    position: absolute;
                    top: 26px;
                    border-radius: 50%;
                    width: 180px;
                    left: calc(50% - 90px);
                    height: 3px;
                    background-color: #FF358A;
                }

                #splash-screen .login-section form .field label.success:before {
                    content: "";
                    position: absolute;
                    top: 25px;
                    border-radius: 50%;
                    width: 180px;
                    left: calc(50% - 90px);
                    height: 4px;
                    background-color: #ADED00;
                }

        #splash-screen form button {
            font-size: 1.2em;
            font-weight: bold;
            margin-top: 20px;
            color: white;
            width: 100%;
            background-color: #118dcf;
            border-radius: 4px;
        }

        #splash-screen .register {
            color: #118dcf;
        }

        #splash-screen .sent-message {
            color: #969696;
            margin-top: 50px;
        }

            #splash-screen .sent-message a {
                display: block;
                color: #118dcf;
                text-align: center;
            }

        #splash-screen .center-section-wrapper {
            max-width: 380px;
            width: 95%;
            margin: 0 auto;
            position: relative;
            top: 5%;
        }

        /* OTP Form Styles */
        #splash-screen .otp-header {
            text-align: center;
            margin-bottom: 30px;
        }

        #splash-screen .otp-header h3 {
            color: #118dcf;
            margin-bottom: 10px;
            font-size: 1.4em;
            font-weight: bold;
        }

        #splash-screen .otp-header p {
            color: #666;
            font-size: 0.9em;
            margin: 0;
        }

        #splash-screen .otp-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
            direction: ltr;
        }

        #splash-screen .otp-resend {
            text-align: center;
            margin-bottom: 60px;
            font-size: 0.9em;
            color: #666;
        }

        #splash-screen .otp-resend a {
            color: #118dcf;
            text-decoration: underline;
            cursor: pointer;
        }

        #splash-screen .otp-resend a:hover {
            text-decoration: underline;
        }

        #splash-screen .otp-back {
            text-align: center;
            text-decoration: none;
            font-size: 1.3em;
            color: #666;
        }

        #splash-screen .otp-back a {
            color: #118dcf;
            text-decoration: none;
            cursor: pointer;
        }

        #splash-screen .otp-back a:hover {
            text-decoration: underline;
        }

        #splash-screen .otp-input {
            width: 45px;
            height: 50px;
            text-align: center;
            font-size: 1.8em;
            font-weight: bold;
            border: 2px solid #ddd;
            border-radius: 8px;
            background-color: white;
            color: #333;
            transition: all 0.3s ease;
        }

        #splash-screen .otp-input:focus {
            outline: none;
            border-color: #118dcf;
            box-shadow: 0 0 0 3px rgba(17, 141, 207, 0.3);
        }

        #splash-screen .otp-input:valid {
            border-color: #118dcf;
        }

        #splash-screen .otp-actions {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        #splash-screen .otp-actions .btn {
            font-size: 1.2em;
            font-weight: bold;
            margin: 0;
            color: white;
            width: 100%;
            background-color: #118dcf;
            border-radius: 4px;
            padding: 12px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #splash-screen .otp-actions .btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        #splash-screen .otp-actions .btn:not(:disabled):hover {
            background-color: #0d7ab8;
        }

        #splash-screen .otp-actions .btn-secondary {
            background-color: transparent;
            color: #118dcf;
            border: 2px solid #118dcf;
        }

        #splash-screen .otp-actions .btn-secondary:hover {
            background-color: #118dcf;
            color: white;
        }

        /* RTL Support for OTP */
        [dir="rtl"] #splash-screen .otp-container {
            direction: ltr;
        }

            #splash-screen .center-section-wrapper .center-section {
                padding: 30px 30px 40px 30px;
                background-color: #F1F1F7;
                position: relative;
            }

                #splash-screen .center-section-wrapper .center-section .user-agent {
                    left: 5px;
                    top: 5px;
                    position: absolute;
                    font-size: 1.5em;
                }

                    #splash-screen .center-section-wrapper .center-section .user-agent:hover:after {
                        content: attr(title);
                        display: block;
                        background-color: black;
                        color: white;
                        position: absolute;
                        font-size: .7em;
                        padding: 5px;
                    }


        #splash-screen .login-section .options {
            margin-top: 5px;
        }

            #splash-screen .login-section .options .ui-checkbox input[type=checkbox]:checked + span:after {
                top: 2px;
                right: 4px;
            }

            #splash-screen .login-section .options > span a {
                color: #118dcf;
                font-size: 14px;
            }

            #splash-screen .login-section .options > span, #splash-screen .login-section .options .ui-checkbox {
                line-height: 31px;
                vertical-align: top;
                padding: 0;
                margin: 0;
                font-size: 14px;
                color: #89898C;
            }

        #splash-screen .logo-section h2 {
            text-align: center;
            margin: 0;
            padding: 0;
            text-align: center;
            text-indent: -25%;
        }

    body.login-page #splash-screen .logo,
    body.forgot-page #splash-screen .logo,
    body.confirmInvite-page #splash-screen .logo,
    body.reset-page #splash-screen .logo {
        vertical-align: middle;
        max-width: 140px;
        margin: 0 auto;
        padding-top: 85px;
        padding-bottom: 10px;
    }

    body.login-page #splash-screen .logo-box {
        width: 100%;
    }

    body.login-page #splash-screen .moto {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        margin-left: 10px;
    }

        body.login-page #splash-screen .moto h1 {
            margin: 0;
        }

    #splash-screen .shadow {
    }

    body.login-page #splash-screen .status {
        display: block;
        text-align: center;
        margin-top: 10px;
        font-size: 1.4em;
    }

    #splash-screen .status .label {
        color: black;
    }

    #splash-screen .input-help {
        display: block;
        margin-top: 10px;
    }


    #splash-screen .links {
        margin-top: 20px;
    }

        #splash-screen .links nav, #splash-screen .links nav > div {
            line-height: 30px;
        }

            #splash-screen .links nav a:after {
                content: "\00b7";
                margin: 0 5px;
            }

            #splash-screen .links nav a:last-of-type:after {
                content: "";
            }

    #splash-screen .links {
        color: white;
        font-size: 14px;
    }

        #splash-screen .links a {
            color: white;
            font-size: 14px;
        }

            #splash-screen .links a.btn.btn-signup {
                background-color: transparent;
                border-color: #fff;
                margin-right: 10px;
                color: #fff;
                height: 30px;
                padding: 0 10px;
                border: 1px solid;
                border-radius: 3px;
                transition: border 200ms,box-shadow 200ms,color 200ms,;
                min-width: 60px;
                cursor: pointer;
                line-height: 2;
            }

                #splash-screen .links a.btn.btn-signup:hover, #splash-screen .links a.btn-btn-signup:focus {
                    background-color: #fff;
                    border-color: #F0EFFA;
                    color: #676D76;
                    text-decoration: none;
                }


    #splash-screen .instuctions p {
        font-size: 14px;
    }

    #splash-screen .error-summary {
        /*background-color: #FFCBBF;*/
        font-size: 13px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #E30000;
    }

    body.full-screen.login-page .wrapper, body.full-screen.forgot-page .wrapper, body.full-screen.signup-page .wrapper, body.full-screen.reset-page .wrapper, body.full-screen.confirmInvite-page .wrapper {
        padding-top: 0;
    }

    body.full-screen.login-page .content, body.full-screen.forgot-page .content, body.full-screen.signup-page .content, body.full-screen.reset-page .content, body.full-screen.confirmInvite-page .content {
        height: 100%;
    }

    body.full-screen.login-page, body.full-screen.forgot-page, body.full-screen.signup-page {
        direction: rtl;
        text-align: right;
    }

        body.full-screen.login-page input, body.full-screen.forgot-page input {
            text-align: left;
            direction: ltr;
        }

    body.full-screen input.rtl {
        direction: rtl;
        text-align: right;
    }

    #splash-screen .loading {
        text-align: center;
        direction: ltr;
        margin-bottom: 15px;
    }

        #splash-screen .loading > div {
            width: 13px;
            height: 13px;
            margin: 3px;
            display: inline-block;
        }

        #splash-screen .loading .dot {
            width: 10px;
            height: 10px;
            padding: 5px;
            background-color: #D8D8DF;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
            -webkit-animation: loginlLoading 2s infinite; /* Chrome, Safari, Opera */
            animation: loginlLoading .8s infinite;
        }

            #splash-screen .loading .dot.first {
                animation-delay: 0.2s;
            }

            #splash-screen .loading .dot.second {
                animation-delay: 0.4s;
            }

            #splash-screen .loading .dot.third {
                animation-delay: 0.6s;
            }

    .signup-page form {
        margin: 0 15px 0 5px;
    }

    .signup-page .field {
        margin: 10px 0;
        width: 100%;
        position: relative;
        display: inline-block;
    }

        .signup-page .field input[type=password], .signup-page .field input[type=password][placeholder] {
            padding: 5px 5px 5px 5px;
        }

        .signup-page .field input[password-reveal] {
            padding: 5px 5px 5px 5px;
        }

        .signup-page .field input:not(.ng-pristine).ng-invalid,
        .signup-page .field input:not(.ng-pristine).ng-invalid-email {
            border: 2px solid rgba(252, 14, 14, 0.55);
        }

        .signup-page .field .password-reveal {
            left: 0;
        }

    .signup-page #splash-screen form button:hover {
        background-color: #01115a;
        border-color: #204d74;
    }

    .signup-page #splash-screen form button {
        font-size: 1.1em;
    }

    .signup-page #splash-screen .terms {
        font-size: 1em;
    }

        .signup-page #splash-screen .terms a {
            color: #118dcf;
            font-size: 1em;
            border-radius: 4px;
        }

    .signup-page .field input {
        width: 60%;
        font-size: .8em;
        padding: 5px;
        text-align: right;
        direction: rtl;
        border: 1px solid #CDCDCF;
        border-radius: 5px;
    }

    .signup-page .fieldset label {
        width: 40%;
    }

    .signup-page label {
        display: inline-block;
        font-weight: normal;
        font-size: 0.9em;
    }

    .signup-page .marketing-page {
        padding: 20px 30px 20px 20px;
        position: relative;
        height: calc(100% - 62px);
        overflow-y: auto;
    }

        .signup-page .marketing-page .marketing-details {
            font-size: 1.2em;
        }

            .signup-page .marketing-page .marketing-details .cell div:first-child {
                max-width: 60px;
            }

            .signup-page .marketing-page .marketing-details .cell div:nth-child(2) {
                padding-top: 5px;
            }

    .signup-page .login {
        height: 40px;
        margin: 10px 30px;
    }

        .signup-page .login span {
            display: inline-block;
            vertical-align: middle;
            font-size: .9em;
            margin-left: 20px;
        }

        .signup-page .login a {
            font-weight: bold;
            display: inline-block;
            vertical-align: middle;
            border-radius: 4px;
            text-align: center;
            border: none;
            padding: 7px 5px;
            box-shadow: 0px 0px 5px silver;
            color: #fff;
            background-color: #118dcf;
        }

            .signup-page .login a:hover {
                background-color: #01115a;
                border-color: #204d74;
            }

    .signup-page .marketing-page .center-block {
        margin: 0 auto;
        z-index: 2;
        width: 70%;
    }

        .signup-page .marketing-page .center-block .text-logo {
            font-size: 3em;
            font-weight: bold;
            text-align: center;
            padding: 6px 0;
            border-top: 2px solid;
            border-bottom: 2px solid;
            border-color: #118dcf;
        }

    .signup-page .marketing-page .add-img {
        padding: 30px 0 15px 0;
    }

        .signup-page .marketing-page .add-img img {
            width: 95%;
            height: auto;
        }

    .signup-page .divider-2 {
        padding: 1px;
        background-color: #EEEEF4;
        clear: both;
        margin: 0 -15px;
    }

    .footer-colors {
        position: absolute;
        width: 100%;
        bottom: 0;
    }

        .footer-colors div {
            height: 7px;
            width: 25%;
            display: inline-block;
            vertical-align: bottom;
        }


    .signup-page .marketing-page .marketing-text h1 {
        font-size: 2.8em;
        padding-top: 80px;
        margin: 0;
        color: #118CCE;
    }

    .signup-page .marketing-page .marketing-text h3 {
        font-size: 1.8em;
        margin: 0;
        padding: 20px 0 5px 0;
    }

    .signup-page .marketing-page .marketing-text p {
        padding: 5px 0;
        margin: 0;
        font-size: 1.5em;
    }

    .registration-succeeded {
        background-color: white;
        padding: 15px;
        border-radius: 25px;
    }

        .registration-succeeded .fa {
            font-size: 3.1em;
            margin-top: 10px;
        }

        .registration-succeeded p {
            font-size: 1.3em;
        }


    .signup-page .modal.in .modal-dialog {
        width: 95%;
    }

        .signup-page .modal.in .modal-dialog .modal-body {
            max-height: 600px;
            overflow-y: auto;
            width: 100%;
        }

    .signup-page .reg-success {
        margin: 0 auto;
        max-width: 1000px;
    }

        .signup-page .reg-success .add-img {
            max-width: 750px;
            margin: 0 auto;
        }

        .signup-page .reg-success .help-btn {
            cursor: pointer;
        }

        .signup-page .reg-success p {
            line-height: 30px;
        }


    @media (max-width: 1024px) {

        .signup-page .reg-success .add-img {
            width: 100% !important;
        }
    }