body{
    background: url('/images/background.png') no-repeat center center fixed;
    background-size: cover;
}
/* Guest Table Container */
.main_guest_table_container {
    border: 1px solid #a5d6a7;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding shadow to the border */
}
 
.guest-info-header {
    position: relative;
    text-align: left; /* Center the text */
    padding: 10px;
    background-color: #1aa398; /* Green background for the header */
    color: white; /* White text color */
}
 
.guest-info-header h2 {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding-left: 5px;
    font-family: sans-serif;
}
 
/* Rest of your CSS remains the same */
.guest_table_container {
    justify-content: center; /* Center horizontally */
    padding: 10px;
}
 
.guest-table {
    width: 100%;
    max-width: 1500px; /* Increased max-width for larger table */
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #e8f5e9; /* Light green background for table */
    border: 1px solid #c8e6c9; /* Slightly darker green for border */
}
 
.guest-table th, .guest-table td {
    border: 1px solid #ced1ce; /* Slightly darker green for cell borders */
    padding: 16px; /* Increased padding for larger cells */
    text-align: left;
}
 
.guest-table th {
    font-size: 14px; /* Increased font size for header */
}
 
.guest-table td {
    color: #666;
    font-size: 14px; /* Slightly larger font size for cells */
}
 
.guest-table tr:nth-child(even) {
    background-color: #f1f8e9; /* Light green for alternate rows */
}
 
.guest-table tr:hover {
    background-color: #c8e6c9; /* Medium green for row hover */
}
 
.btn {
    display: inline-block;
    padding: 8px 10px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #4caf50; /* Green */
    color: white;
}
 
.btn:hover {
    background-color: #45a049;
}
 
.check-out-column {
    text-align: center;
}
 
/* Masked Text Styles */
.masked-text {
    font-style: italic;
    color: #999;
}
 
/* Toggle Button */
.toggle-button {
    position: absolute;
    right: 0; /* Aligns button to the right */
    top: 50%;
    transform: translateY(-50%); /* Vertically centers the button */
    background-color: #2f72b6;
    color: white;
    border: none;
    padding: 7px 16px;
    margin-right: 30px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
}
.backBtn{
    position: absolute;
    right: 0; /* Aligns button to the right */
    top: 50%;
    transform: translateY(-50%); /* Vertically centers the button */
    background-color: #2f72b6;
    color: white;
    border: none;
    text-decoration: none;
    padding: 7px 16px;
    margin-right: 170px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
}
.backBtn:hover{
    background-color: #21649b; /* Darker shade on hover */ 
}
 
.toggle-button:hover {
    background-color: #21649b; /* Darker shade on hover */
}



 
/* Responsive adjustments */
@media (max-width: 1200px) {
    .main_guest-container {
        margin-left: 50px;
    }
    .guest-container {
        width: 500px;
    }
}
 
@media (max-width: 768px) {
    .main_guest-container {
        margin-left: 20px;
        margin-top: 50px;
    }
    .guest-container {
        width: 90%; /* Take most of the width on smaller screens */
        height: auto; /* Let the height adjust naturally */
    }
    .guest-form {
        margin: 0 20px; /* Reduce form margin for smaller screens */
    }
    .guestBtn, .guestBtn1 {
        width: 100%; /* Make buttons take the full width */
    }
}
 
@media (max-width: 576px) {
    .guest-header {
        padding: 20px;
    }
    .guest-form {
        margin: 0 10px; /* Further reduce form margin */
    }
    .guest-input-container button {
        padding: 5px;
    }
    .toggle-button {
        padding: 8px 15px; /* Adjust button size */
    }
}
 
@media (max-width: 400px) {
    .guest-container {
        width: 100%; /* Full width on very small screens */
        height: auto; /* Auto height */
    }
    .guest-header img {
        width: 80px; /* Smaller logo */
    }
}


@media screen and (max-width: 1540px){
    .main_guest_table_container {
        border: 1px solid #a5d6a7;
        width: 100%;
        max-width: 1100px;
        margin: 40px auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding shadow to the border */
    }
    .toggle-button {
        position: absolute;
        right: 0; /* Aligns button to the right */
        top: 50%;
        transform: translateY(-50%); /* Vertically centers the button */
        background-color: #2f72b6;
        color: white;
        border: none;
        padding: 4px 12px;
        margin-right: 20px;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .backBtn{
        position: absolute;
        right: 0; /* Aligns button to the right */
        top: 50%;
        transform: translateY(-50%); /* Vertically centers the button */
        background-color: #2f72b6;
        color: white;
        border: none;
        text-decoration: none;
        padding: 4px 12px;
        margin-right: 170px;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        font-size: 17px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1340px){
    .main_guest_table_container {
        border: 1px solid #a5d6a7;
        width: 100%;
        max-width: 1100px;
        margin: 40px auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding shadow to the border */
    }
    .toggle-button {
        position: absolute;
        right: 0; /* Aligns button to the right */
        top: 50%;
        transform: translateY(-50%); /* Vertically centers the button */
        background-color: #2f72b6;
        color: white;
        border: none;
        padding: 4px 12px;
        margin-right: 20px;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .backBtn{
        position: absolute;
        right: 0; /* Aligns button to the right */
        top: 50%;
        transform: translateY(-50%); /* Vertically centers the button */
        background-color: #2f72b6;
        color: white;
        border: none;
        text-decoration: none;
        padding: 4px 12px;
        margin-right: 170px;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        font-size: 17px;
    }
}
@media screen and (max-width: 480px){
    /* Guest Table Container */
.main_guest_table_container {
    border: 1px solid #a5d6a7;
    width: 100%;
    max-width: 1500px;
    height: 660px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding shadow to the border */
}
/* Make the table take full width */
.guest-table {
    width: 100%;
    border-collapse: collapse;
}

/* Stack the columns vertically inside each row */
.guest-table tr {
    display: block;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 2px;
    background-color: #f9f9f9;
}

/* Make both th and td behave like block elements */
.guest-table td, .guest-table th {
    display: block;
    text-align: left;
    width: 100%;
    height: 88px;
    padding: 2px 0;
    border: none;
    position: relative;
}

/* Style for the header above each column in mobile */
.guest-table td:before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: black;
}

/* Remove table headers from the original layout (mobile only) */
.guest-table thead {
    display: none;
}
/* Rest of your CSS remains the same */
.guest_table_container {
    margin-top: 10px;
    height: 550px; /* Set a fixed height */
    overflow-y: auto; /* Enable vertical scroll */
    overflow-x: hidden; /* Hide horizontal scroll */
}
h2.gst{
    font-size: 12px;
}
/* Toggle Button */
.toggle-button {
    position: absolute;
    right: 0; /* Aligns button to the right */
    top: 50%;
    transform: translateY(-50%); /* Vertically centers the button */
    background-color: #2f72b6;
    color: white;
    border: none;
    padding: 5px 8px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 10px;
}
.backBtn{
    position: absolute;
    right: 0; /* Aligns button to the right */
    top: 50%;
    transform: translateY(-50%); /* Vertically centers the button */
    background-color: #2f72b6;
    color: white;
    border: none;
    text-decoration: none;
    padding: 5px 8px;
    margin-right: 100px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size: 10px;
}
}