/* General Styles */
body {
    background-color: #000;
    display: flex;
    flex-direction: column;
    margin: 0;
    color: #cda77d;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 400;
    justify-content: top;
    align-items: center;
}

/* Header Styles */
h1 {
    color: #56bcbe;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    color: #56bcbe;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

h3 {
    color: #56bcbe;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
}

h4 {
    color: #56bcbe;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
}

/* Link Styles */
a {
    color: #b0cd7d;
    cursor: pointer;
    display: block;
    /* margin-top: 20px; */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #7dcd8c;
}

/* General Button Styles */
button {
    background-color: #3b8b94;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    width: auto;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
    background-color: #56bcbe;
    transform: scale(1.05);
}

/* Disabled Button Styles */
button:disabled {
    background-color: #aaa !important;
    color: #666 !important;
    cursor: not-allowed;
    transform: none;
}

/* Close Button Styles */
.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    z-index: 1010;
    padding: 20;
}

.close:hover,
.close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.message {
    color: #cda77d;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.header-section .logo-image {
    width: 100px; /* Adjust the width to your desired size */
    max-width: 100px; /* Set a max width to prevent it from getting too big */
    display: block;
    margin: 0 auto; /* Center the logo */
}

/* Image Styles */
.logo-container img {
    height: auto;
    max-width: 150px;
}

/* Container Styles */
.container {
    box-sizing: border-box;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
    width: 90%;
}

/* Form Styles */
.form {
    background-color: #112022;
    border-radius: 20px;
    box-sizing: border-box;
    margin: auto;
    max-width: 400px;
    padding: 20px;
    text-align: center;
    width: 100%;
}

.form label {
    color: #cda77d;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 400;
    display: block;
    margin-bottom: 10px;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form select,
.form textarea {
    color: #ffffff;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 400;
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 20px;
    background-color: #1a2b2c;
    border: 1px solid #3b8b94;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Modal Styles */
.modal {
/*    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    overflow: auto; */
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.modal-content {
/*   background-color: #112022;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    position: relative;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    color: #cda77d;
    text-align: center; */
    background-color: #112022;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    color: #cda77d;
    text-align: center;
    position: relative;
}

/* Close Button Styles */
.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    z-index: 1010;
    padding: 20;
}

.close:hover,
.close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Forgot Password Modal Styles */
.forgotPasswordModal .modal-content {
    padding: 10px;
    width: auto;
}

.forgotPasswordModal form input {
    background-color: #1a2b2c;
    border: 1px solid #3b8b94;
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    width: 90%;
    box-sizing: border-box;
}

.forgotPasswordModal form label {
    line-height: 1.2;
    margin-bottom: 5px;
}

/* Registration Modal Styles */
.registration-modal .modal-content {
    padding: 10px;
    width: 80%;
    max-height: 80vh;
    overflow-y: auto;
}

.registration-modal .multi-column-form {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    column-gap: 8px;
}

.registration-modal .multi-column-form .form-group {
    margin-bottom: 8px;
    width: 100%;
}

.registration-modal .multi-column-form input {
    background-color: #1a2b2c;
    border: 1px solid #3b8b94;
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    width: 90%;
}

.registration-modal .multi-column-form select {
    background-color: #1a2b2c;
    border: 1px solid #3b8b94;
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    width: 97%;
}

.registration-modal .multi-column-form button {
    background-color: #3b8b94;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    grid-column: span 3;
    padding: 6px 16px;
    width: 100%;
}

.registration-modal .multi-column-form button:hover {
    background-color: #56bcbe;
}

/* Generic Form Group Styles */
.form-group {
    margin-bottom: 15px;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.form-group input,
.form-group select {
    background-color: #1a2b2c;
    border: 1px solid #3b8b94;
    border-radius: 5px;
    color: #fff;
    padding: 10px;
    width: 100%;
}

#registerModal .form-group.two-wide {
    grid-column: span 2; /* Spans the div across two columns in a grid layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#registerModal .form-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 5px;
    grid-auto-rows: minmax(50px, auto);
}

/* Ensure fields take their correct positions */
 #registerModal .grid-fields {
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

#registerModal .form-group {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    /* margin-bottom: 10px; */
     line-height: .5;
}

#registerModal .form-group.full-width {
    grid-column: 1 / span 3;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}


#registerModal .form-group label {
    line-height: 1.5;
}

#registerModal h1, h2, h3, h4 {
    line-height: 1;
}

/* Links Row */
.links-row {
    display: inline-block !important;
    gap: 5px;
    align-content: center;
}

.links-row a {
    display: inline-block;
    color: #b0cd7d;
    text-decoration: none;
}

.links-row a:hover {
    text-decoration: underline;
    color: #7dcd8c;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        width: 100%;
    }

    .content-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .left-div,
    .right-div,
    .center-div {
        padding: 15px;
        width: 100%;
    }

    #addEventModal form {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .form-group {
        grid-column: span 1;
        width: 100%;
    }

    /* Additional adjustments for buttons or larger inputs */
    .form-group button, .form-group input, .form-group select, .form-group textarea {
        width: 100%;
    }

    .modal-content {
        width: 95%; /* Take up almost full width on mobile */
        max-width: 95%; /* Remove fixed max-width for smaller screens */
        padding: 15px; /* Reduce padding on mobile */
    }

    .close {
        font-size: 24px; /* Slightly smaller close button on mobile */
    }

    .modal-wrapper {
        flex-direction: column;
    }

    #addEventModal,
    .side-panel {
        max-width: 100%;
    }

    .side-panel {
        display: block; /* Ensure it's visible */
    }

    .side-panel, .modal-content {
        overflow-y: auto; /* Allow scrolling inside these containers */
        max-height: 90vh; /* Limit the height to avoid overflow on small screens */
    }
}

@media screen and (max-width: 1024px) {
    .registration-modal .modal-content {
        width: 90%; /* Adjust width for tablets */
        max-height: 75vh; /* Slightly reduce the max-height on smaller screens */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
    }
}

/* Wider screens (e.g., desktops) */
@media (min-width: 1024px) {
    #editDetailsModal .modal-content,
    #addEventModal .modal-content,
    #editEventModal .modal-content {
        width: 80%;
        max-width: 900px; /* Increase max width for desktop */
    }

    .side-panel {
        width: 350px; /* Maintain its default width on larger screens */
    }

    #forgotPasswordModal .modal-content {
        /* Adjusted for tablets */
 /*       transform: translateY(-300%); /* Moves it slightly up */
    }

}

/* Medium screens (e.g., tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    #editDetailsModal .modal-content,
    #addEventModal .modal-content,
    #editEventModal .modal-content {
        width: 85%;
        max-width: 700px; /* Adjust width for tablet */
    }

    #addEventModal .modal-content {
        width: 85%; /* Adjust width for tablet */
        max-width: 700px; /* Ensure modal fits well on tablet */
    }

    #forgotPasswordModal .modal-content {
        /* Adjusted for tablets */
/*        transform: translateY(-200%); /* Moves it slightly up */
    }
}

/* Mobile devices */
@media (max-width: 767px) {
    #editDetailsModal .modal-content,
    #addEventModal .modal-content,
    #editEventModal .modal-content {
        width: 95%; /* Stay within 90-95% for smaller screens */
    }

    #addEventModal .modal-content {
        width: 95%; /* Take up almost full width on mobile */
        max-width: 95%; /* Remove fixed max-width for smaller screens */
        padding: 15px; /* Reduce padding on mobile */
    }

    .modal-content {
        width: 95%; /* Adjust modal width on smaller screens */
        padding: 15px; /* Adjust padding for mobile */
        max-height: 90vh; /* Ensure the modal doesn't overflow the screen */
        overflow-y: auto; /* Allow vertical scrolling */
    }

    .modal {
        align-items: flex-start; /* In case center is too much on mobile */
    }

    #forgotPasswordModal .modal-content {
        /* Adjusted for mobile phones */
/*        transform: translateY(-100%); /* Keeps it centered */
        width: 95%; /* Optional: Adjust width for smaller screens */
    }

    .registration-modal .modal-content {
        width: 95%; /* Take up more space on smaller screens */
        max-height: 70vh; /* Reduce max-height even more on mobile */
        overflow-y: auto; /* Allow scrolling if content exceeds max-height */
    }
}