/* =========================================================
           GLOBAL
           ========================================================= */

        html,
        body {
            width: 100%;
            min-height: 100%;
            margin: 0;
            padding: 0;
        }

        body {

            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;

            animation: fadeInAnimation ease 1.5s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;

            overflow-x: hidden;
        }

        @keyframes fadeInAnimation {

            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }


        /* =========================================================
           LOGIN PAGE
           ========================================================= */

        #layoutAuthentication {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        #layoutAuthentication_content {
            flex: 1 0 auto;
            display: flex;
            align-items: center;
            width: 100%;
        }

        #layoutAuthentication_content main {
            width: 100%;
        }

        #layoutAuthentication_footer {
            flex-shrink: 0;
        }


        /* =========================================================
           LOGIN CARD
           ========================================================= */

        .login-container {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
        }

        .login-card {

            width: 100%;

            border: 0;
            border-radius: 18px;

            overflow: hidden;

            background-color: rgba(255, 255, 255, 0.98);

            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.08);
        }


        /* =========================================================
           BRANDING AREA
           ========================================================= */

        .branding-section {

            height: 100%;

            min-height: 520px;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 50px;
        }

        .branding-section img {

            display: block;

            width: 100%;
            max-width: 500px;
            height: auto;

            margin: 0 auto;
        }


        /* =========================================================
           LOGIN FORM
           ========================================================= */

        .login-section {

            padding: 55px 50px;
        }

        .login-title {

            font-weight: 600;

            margin-bottom: 25px;
        }


        /* =========================================================
           INPUT GROUP
           ========================================================= */

        .login-input-group {

            display: flex;

            width: 100%;

            border-radius: 8px;

            overflow: hidden;
        }

        .login-input-group .input-group-text {

            min-height: 48px;

            display: flex;
            align-items: center;
            justify-content: center;

            white-space: nowrap;
        }

        .login-input-group .form-control {

            min-width: 0;

            height: 48px;

            font-size: 15px;
        }


        /* =========================================================
           CAPTCHA
           ========================================================= */

        .captcha-container {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

            flex-wrap: wrap;

            margin-top: 20px;
            margin-bottom: 15px;
        }

        .captcha-container img {

            max-width: 100%;

            height: auto;
        }

        .captcha-reset {

            white-space: nowrap;
        }


        /* =========================================================
           LOGIN ACTION
           ========================================================= */

        .login-actions {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;

            margin-top: 25px;
        }

        .login-button {

            min-width: 110px;

            min-height: 45px;

            font-weight: 600;
        }


        /* =========================================================
           LOADING
           ========================================================= */

        .loading {

            display: none;

            text-align: center;
        }


        /* =========================================================
           FOOTER
           ========================================================= */

        .login-footer {

            padding: 15px 10px;

            text-align: center;
        }

        .login-footer label {

            color: #ccc;

            font-size: 12px;

            line-height: 1.5;
        }


        /* =========================================================
           MOBILE
           ========================================================= */

        @media (max-width: 991.98px) {

            #layoutAuthentication_content {
                align-items: flex-start;
            }

            .login-container {
                padding-top: 25px;
                padding-bottom: 25px;
            }

            .branding-section {

                min-height: auto;

                padding: 35px 30px 20px;
            }

            .branding-section img {
                max-width: 420px;
            }

            .login-section {

                padding: 30px 35px 40px;
            }
        }


        @media (max-width: 767.98px) {

            body {
                background-attachment: scroll;
            }

            .login-container {

                padding-left: 15px;
                padding-right: 15px;

                padding-top: 15px;
                padding-bottom: 15px;
            }

            .login-card {

                border-radius: 14px;
            }

            .branding-section {

                padding: 25px 25px 10px;
            }

            .branding-section img {

                max-width: 330px;
            }

            .login-section {

                padding: 25px 25px 30px;
            }

            .login-title {

                font-size: 1.4rem;

                margin-bottom: 20px;
            }

            .login-actions {

                flex-direction: column;

                align-items: stretch;

                width: 100%;
            }

            .login-actions .forgot-password {

                text-align: center;

                order: 1;
            }

            .login-actions .login-button-container {

                width: 100%;

                order: 2;
            }

            .login-button {

                width: 100%;
            }

            .loading {

                order: 3;

                width: 100%;
            }
        }


        @media (max-width: 575.98px) {

            .login-container {

                padding-left: 10px;
                padding-right: 10px;
            }

            .branding-section {

                padding: 20px 20px 5px;
            }

            .branding-section img {

                max-width: 270px;
            }

            .login-section {

                padding: 20px 18px 25px;
            }

            .login-input-group .input-group-text {

                padding-left: 10px;
                padding-right: 10px;

                font-size: 13px;
            }

            .login-input-group .form-control {

                font-size: 14px;
            }

            /* Prevent @utas.edu.om from making the input overflow */
            .email-domain {

                font-size: 11px !important;

                padding-left: 7px !important;
                padding-right: 7px !important;
            }

            .captcha-container {

                align-items: flex-start;

                flex-direction: column;
            }

            .captcha-reset {

                align-self: flex-end;
            }

            .form-control {

                min-height: 45px;
            }

            .login-footer label {

                font-size: 10px;
            }
        }


        @media (max-width: 380px) {

            .login-section {

                padding-left: 14px;
                padding-right: 14px;
            }

            .branding-section img {

                max-width: 230px;
            }

            .login-input-group .input-group-text {

                padding-left: 7px;
                padding-right: 7px;
            }

            .email-domain {

                font-size: 10px !important;
            }
        }

        /* Full-screen loading overlay */
        #utasPageLoader {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            z-index: 99999;

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease;
        }

        #utasPageLoader.show {
            opacity: 1;
            visibility: visible;
        }

        /* Rotating UTAS logo */
        .utas-loader-logo {
            width: 90px;
            height: 90px;
            object-fit: contain;

            animation: utasRotate 1.5s linear infinite;
        }

        @keyframes utasRotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .utas-loader-text {
            margin-top: 20px;
            font-size: 15px;
            color: #666;
            font-weight: 500;
        }