.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Use viewport width */
    height: 100%; /* Use viewport height */
    background-color: rgba(0, 0, 0, 0.7);
    overflow-y: scroll; /* Add a scrollbar when content exceeds the maximum height */
    z-index: 999999; /* Set the desired z-index value for the overlay */

}

.overlay-content {
    position: absolute;
    top: 50%; /* Use viewport height */
    left: 37%; /* Use viewport width */
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 1920px) {
    .overlay-content {
        top: 60%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 1680px) {
    .overlay-content {
        top: 80%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 1280px) {
    .overlay-content {
        top: 80%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 1280px) and (max-height: 768px) {
    .overlay-content {
        top: 100%;
    }
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 980px) {
    .overlay-content {
        top: 150%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 480px) {
    .overlay-content {
        top: 160%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 420px) {
    .overlay-content {
        top: 200%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 375px) {
    .overlay-content {
        top: 250%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

/*members*/

.overlay-content-members {
    position: absolute;
    top: 50%; /* Use viewport height */
    left: 37%; /* Use viewport width */
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 1920px) {
    .overlay-content-members {
        top: 60%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 1680px) {
    .overlay-content-members {
        top: 80%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 1280px) {
    .overlay-content-members {
        top: 90%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 1280px) and (max-height: 768px) {
    .overlay-content-members {
        top: 110%;
    }
}

/* Add a media query to adjust top for resolutions smaller than 1800px */
@media screen and (max-width: 980px) {
    .overlay-content-members {
        top: 190%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 480px) {
    .overlay-content-members {
        top: 210%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 420px) {
    .overlay-content-members {
        top: 250%; /* Adjust top position for resolutions smaller than 1800px */
    }
}

@media screen and (max-width: 375px) {
    .overlay-content-members {
        top: 290%; /* Adjust top position for resolutions smaller than 1800px */
    }
}





.close {
    position: absolute;
    top: -16px;
    right: 10px;
    font-size: 50px;
    cursor: pointer;
}

/* Style for the password dialog */
.password-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999; /* Set the desired z-index value for the overlay */
}

.password-dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 999999; /* Set the desired z-index value for the overlay */
}

/* Add other styles as needed */
.overlay-text {
	text-align: left; /* Align the text to the left */
	font-size: 16px; /* Set the font size to 14 pixels (adjust as needed) */
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    color: black;
}

/* Define a style for list elements */
.overlay-text-small {
    text-align: left; /* Align the text to the left */
    font-size: 12px; /* Set the font size to 14 pixels (adjust as needed) */
    font-family: 'Roboto', sans-serif;
    color: black;
}

/* Define a style for list elements */
.overlay-list {
    text-align: left; /* Align the text to the left */
    font-size: 15px; /* Set the font size to 14 pixels (adjust as needed) */
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    color: black;
}



/* Define a style for list item elements */
li {
    margin: 5px 0; /* Add some margin between list items (adjust as needed) */
}