body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.background {
    background-image: url('../graphics/yotrza-bg-portal.webp');
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.button-container {
    margin-top: 40px;
}

.title {
    margin-top: 20px; /* Space from the top */
    color: blak;
    font-size: 36px;
    font-weight: bold;
    padding-top: 10px; /* Extra padding at the top */
}

.button {
    padding: 10px 20px;
    margin: 5px;
    border-radius: 20px;
    border: none;
    color: white;
    background-color: #007BFF;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #0056b3;
}

.footer {
    position: absolute; /* Positions the note at the bottom of the viewport */
    bottom: 0; /* Aligns to the bottom */
    width: 100%; /* Ensures it spans the width of the background */
    text-align: center; /* Centers the text */
    padding: 10px 0; /* Adds padding above and below the text */
}
.branch-popup div:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
    cursor: pointer; /* Change cursor to indicate interactivity */
}

.side-note {
    color: gray;
    text-decoration: none;
    font-size: 18px;
    margin-bottom: 20px;
}

.side-note:hover {
    text-decoration: underline;
}

    #bank_code, #branch_code {
    width: 120px; /* Or any specific pixel width like 300px */
    direction: rtl; /* Right-to-left layout */
    unicode-bidi: bidi-override; /* Ensures override of any inherited text direction properties */
    }
    
    .branch-popup {
    display: none; /* Hidden by default */
    position: relative;
    background: white;
    border: 1px solid #ccc;
    z-index: 1000; /* Ensure it appears on top of other elements */
    width: auto;
    max-height: 200px;
    overflow-y: auto; /* Enable scroll if many items */
}

.form-container {
    position: fixed; /* Fixed position to keep it centered regardless of scrolling */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust positioning to truly center the div */
    width: 90%; /* Adjust width as necessary, could be fixed in px or responsive % */
    max-width: 600px; /* Maximum width */
    padding: 20px; /* Padding around the form */
    background: rgba(255, 255, 255, 0.95); /* Mostly white with slight transparency */
    border: 1px solid #ccc; /* Optional border */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional shadow for depth */
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

/* Ensure the content inside is not transparent */
.form-container * {
    background: transparent;
}