body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #4080bf, #eda15e);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container full center */
.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    width: 750px;
    height: 425px;
    background: white;
    display: flex;
    overflow: hidden;
}

.login-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

/* Left Image Area */
.login-image-wrapper {
    flex: 1;
    height: 100%;
    margin-left: -20px;
}

.login-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Aligns image to top-left to avoid white space */
    display: block;
    margin-right: 40px;
}

.login-form {
    width: 345px;
    padding: 45px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left:-20px;
}

.login-form h2 {
    font-size: 25px;
    margin-bottom: 30px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 3px;
}

img {
    max-width: 95%;
    height: auto;
}

h2 {
    font-size: 35px;
    margin-bottom: 30px;
    font-weight: bold;
}

.btn-primary {
    background-color: #e67e22;
    border: none;
    color: white;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    background-color: #cf6d17 !important;
    color: white !important;
    box-shadow: none !important;
    border: none !important;
}

#togglePassword:hover{
    background-color: #E5E5E5;
    color: black;
}

.flag-icon {
    width: 20px;
    height: 15px;
    margin-right: 5px;
    margin-bottom: 3px;
}

#languageSelect {
    border-radius: 0px !important;  
}

.select2-selection {
    border-radius: 0px !important;
    background-color: #E5E5E5 !important;
}

.select2-results__option {
    border-radius: 0px !important;
}

input.custom-placeholder {
    background-color: #E5E5E5 !important;
}

input.custom-placeholder:focus {
    background-color: #E5E5E5 !important; /* Keep color when focused */
}

/* Autofill styles for Chrome, Safari, Edge */
#userName, #password:-webkit-autofill {
    background-color: #E5E5E5 !important;
    -webkit-box-shadow: 0 0 0px 1000px #E5E5E5 inset !important;
    box-shadow: 0 0 0px 1000px #E5E5E5 inset !important;
    /*-webkit-text-fill-color: #000 !important;*/ /* Keep text readable */
}

/* Optional: style the box when checked */
/*#rememberMe {
    background-color: #E5E5E5 !important;
    border-color: grey;*/ /* Border color when checked */
    /*accent-color: grey;
}*/

/*input[type="checkbox"] {
    accent-color: grey;*/ /* Change to your desired color */
/*}*/

input:focus,
input:focus-visible {
    outline: 1px solid black !important;
    box-shadow: none !important;
    border: black !important;
}

button:focus,
button:focus-visible {
    outline: 1px solid black !important;
    box-shadow: none !important;
}

/* Hide Edge and Chrome's built-in password reveal icons */
input::-ms-reveal,
input::-ms-clear {
    display: none !important;   
}

/* Remove default checkbox look */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 19px;
    height: 19px;
    border: 1px solid #747474; /* Dark grey border */
    background-color: #E5E5E5;
    cursor: pointer;
    position: relative;
}

/* Tick mark (using pseudo-element) */
.custom-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #404040;
    border-width: 0 3px 3px 0;
    transform: rotate(50deg);
}

/* Checked + Disabled state (border applied) */
.custom-checkbox:checked:disabled::after {
    border: solid #404040;
    border-width: 0 3px 3px 0;
}

.form-check-input:checked {
    background-color: #e5e5e5 !important;
    border-color: black !important;
    color: white;
}

/*.select2-results__option:hover {
    background-color: #E5E5E5 !important;
    color: black;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: none !important;
    color: none;
}*/

/* Hide Chrome-specific autofill icon */
/*input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}*/