/** source: https://www.w3schools.com/howto/howto_css_modals.asp */

/* The Modal (background) */
.musikgeschichte-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    /*position: absolute;*/
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: scroll;  /* Enable scroll if needed */
    background-color: rgb(180,180,180);
    background-color: rgba(180,180,180,0.4);
}

/* Modal Content/Box */
.musikgeschichte-modal-content {
    background-color: white;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;

    /*overflow: visible;*/
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
}

/**
 * 2024-01-16 Es wird jetzt data-colormode genutzt, nicht mehr color-mode, wir berücksichtigen hier beides.
 */
html[color-mode=dark] .musikgeschichte-modal-content, html[data-colormode=dark] .musikgeschichte-modal-content {
    background-color: black;
}


/* The Close Button */
.musikgeschichte-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

html[color-mode=dark] .musikgeschichte-modal-close, html[data-colormode=dark] .musikgeschichte-modal-close {
    color: #eee;
}

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