/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-fluid {
    width: 100%;
    padding: 0 20px;
}

/* Header styles */
.header {
    padding: 20px 0;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.75);
    width: 100%;
}

.logo-container {
    padding: 0 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: auto;
    margin: 0 auto;
}

.logo img {
    height: 45px;
    max-width: 100%;
}

/* Main content styles */
.main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    width: 100%;
}

.login-form-container {
    background-color: #fff;
    padding: 30px;
    width: 100%;
    max-width: 500px;
    min-width: 365px;
}

.form-header {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #cb1743;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 16px;
}

.password-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.password-wrapper .password-input {
    border: none;
    flex-grow: 1;
    margin-bottom: 0;
}

.password-wrapper .password-input:focus {
    outline: none;
}

.password-visibility-toggle {
    padding: 10px;
    border-left: 1px solid #ddd;
    color: #cb1743;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-visibility-toggle:hover, .password-visibility-toggle:focus {
    color: #003d82;
    outline: none;
}

.password-visibility-toggle .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Eye icon */
.password-visibility-toggle .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23cb1743' d='M572.52 241.4C518.29 135.59 410.93 64 288 64S57.71 135.59 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.29-71.59 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z'/%3E%3C/svg%3E");
}

.password-visibility-toggle:hover .icon, .password-visibility-toggle:focus .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23003d82' d='M572.52 241.4C518.29 135.59 410.93 64 288 64S57.71 135.59 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.29-71.59 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z'/%3E%3C/svg%3E");
}

/* Eye slash icon */
.password-visibility-toggle.slashed .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23cb1743' d='M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346.39 400H320zm318.2 47.45l-63.77-52.62c45.42-32.82 82.31-74.55 106.32-124.42a32.35 32.35 0 0 0 0-29.19C526.29 135.59 418.93 64 296 64a293.76 293.76 0 0 0-109.81 21.24L48.11 5.11a16 16 0 0 0-22.62 2.28L2.28 34.11a16 16 0 0 0 2.28 22.62l589.33 486.25a16 16 0 0 0 22.62-2.28l23.21-26.72a16 16 0 0 0-2.28-22.62zM433 301.4L274.6 170.47a95.53 95.53 0 0 1 126.31 126.31z'/%3E%3C/svg%3E");
}

.password-visibility-toggle.slashed:hover .icon, .password-visibility-toggle.slashed:focus .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23003d82' d='M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346.39 400H320zm318.2 47.45l-63.77-52.62c45.42-32.82 82.31-74.55 106.32-124.42a32.35 32.35 0 0 0 0-29.19C526.29 135.59 418.93 64 296 64a293.76 293.76 0 0 0-109.81 21.24L48.11 5.11a16 16 0 0 0-22.62 2.28L2.28 34.11a16 16 0 0 0 2.28 22.62l589.33 486.25a16 16 0 0 0 22.62-2.28l23.21-26.72a16 16 0 0 0-2.28-22.62zM433 301.4L274.6 170.47a95.53 95.53 0 0 1 126.31 126.31z'/%3E%3C/svg%3E");
}

.form-group .select-server {
    width: 100%;
    font-size: 16px;
    padding: 10px 3px;
}

.login-button {
    width: 100%;
    padding: 12px;
    background-color: #cb1743;
    color: white;
    border: none;
    border-radius: 2px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #003d82;
}

.login-button:disabled {
    background-color: #9e9e9e;
    cursor: not-allowed;
}

.error-message {
    color: #d32f2f;
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    padding: 10px;
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
}

/* Footer styles */
.footer {
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.75);
    padding: 20px 0;
    margin-top: auto;
    width: 100%;
}

.sponsors-container {
    text-align: center;
    margin: 0 auto;
}

.sponsors-header {
    color: #e62050;
    text-align: center;
    font: 400 20px / 20px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    margin: 0 0 25px;
}

.sponsors-logos {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.sponsor-logo img {
    height: 60px;
    margin: 0 30px 25px;
    max-width: 100%;
    opacity: 0.9;
    transition: all 0.3s;
}

.sponsor-logo img:hover {
    opacity: 1;
}

/* Responsive styles */
@media (max-width: 768px) {
    .logo-container {
        flex-direction: column;
        gap: 20px;
    }

    .sponsors-logos {
        gap: 15px;
    }

    .sponsor-logo img {
        max-height: 40px;
    }
}