﻿ body, html {
                 height: 100%;
                 margin: 0;
                 font-family: Arial, sans-serif;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 background-color: #f4f4f9;
             }

             .main-container {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 width: 100%;
                 height: 100%;
             }

             .login-container {
                 background-color: #fff;
                 padding: 20px 40px;
                 border-radius: 10px;
                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                 width: 100%;
                 max-width: 400px;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
             }

                 .login-container h1 {
                     text-align: center;
                     margin-bottom: 20px;
                     color: #333;
                 }

                 .login-container p {
                     margin-bottom: 10px;
                     color: #555;
                     text-align: center;
                 }

                 .login-container table {
                     width: 100%;
                 }

                     .login-container table td {
                         padding: 10px 0;
                     }

                 .login-container label {
                     font-weight: bold;
                     color: #333;
                 }

                 .login-container input[type="text"],
                 .login-container input[type="password"],
                 .login-container input[type="submit"] {
                     width: 100%;
                     padding: 10px;
                     margin: 5px 0;
                     border: 1px solid #ccc;
                     border-radius: 5px;
                     box-sizing: border-box;
                 }

                 .login-container input[type="submit"] {
                     background-color: #007BFF;
                     color: #fff;
                     border: none;
                     cursor: pointer;
                     transition: background-color 0.3s;
                 }

                     .login-container input[type="submit"]:hover {
                         background-color: #0056b3;
                     }

                 .login-container .validation-summary-errors {
                     border: 1px solid red;
                     padding: 10px;
                     background-color: #ffe6e6;
                     color: red;
                     border-radius: 5px;
                     margin-bottom: 10px;
                     text-align: center;
                 }

                 .login-container .field-validation-error {
                     color: red;
                     font-size: 0.9em;
                 }

             #loadingHider {
                 display: none;
             }

             #loading {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 margin-bottom: 10px;
             }


             .loader {
                 width: 40px;
                 height: 40px;
                 border: 4px solid #f3f3f3; /* Light gray */
                 border-top: 4px solid #007BFF; /* Blue */
                 border-radius: 50%;
                 animation: spin 1s linear infinite;
             }

             @@keyframes spin {
                 0% {
                     transform: rotate(0deg);
                 }

                 100% {
                     transform: rotate(360deg);
                 }
             }


             /*
        .loader {
                 width: 120px;
                 height: 20px;
                 -webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
                 background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
                 animation: l4 2s infinite steps(6);
             }

             */

             @@keyframes l4 {
                 100% {
                     background-size: 120%;
                 }
             }

             .login-container input[type="submit"].disabled {
                 background-color: #ccc;
             }

             .validation-summary-errors {
                 list-style-type: none; /* Remove bullets */
                 padding-left: 0; /* Remove default padding */
             }

                 .validation-summary-errors ul {
                     list-style-type: none; /* Remove bullets */
                     padding-left: 0; /* Remove default padding */
                 }

                 .validation-summary-errors li {
                     margin-left: 0; /* Ensure no extra indentation */
                 }