/* color: Das Browser-Stylesheet setzt für dialog sonst CanvasText statt der Schriftfarbe des body.
   margin-top: Nicht vertikal zentriert, sondern wie bisher im oberen Bereich.
   padding: Ohne trifft ein Klick nur dann den Dialog selbst, wenn er auf den Hintergrund (::backdrop) geht */
.zeitreihen-download-modal {
    color: inherit;
    margin-top: min(150px, 20vh);
    background-color: #fefefe;
    padding: 0;
    border: 1px solid #888;
    width: fit-content;
    /* min-width hätte sonst Vorrang vor max-width und der Dialog wäre in schmalen Fenstern breiter als das Fenster */
    min-width: min(500px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: zeitreihen-download-modal-animatetop;
    animation-duration: 0.5s;
}

/* Die Breite des Dialogs richtet sich nach den Formularzeilen, z.B. nach den eingeblendeten Datumsfeldern (in Firefox breiter
   als in Chrome). Lange Texte sollen ihn nicht verbreitern, sondern umbrechen: contain gibt ihnen keine eigene Breite. */
#zeitreihen-download-title,
.zeitreihen-download-messstellen-zeile,
.zeitreihen-download-confirm {
    contain: inline-size;
}

.zeitreihen-download-messstellen-zeile {
    display: block;
}

.zeitreihen-download-modal::backdrop {
    background-color: rgba(0,0,0,0.5);
}

@keyframes zeitreihen-download-modal-animatetop {
    from {transform: translateY(-350px); opacity:0}
    to {transform: translateY(0); opacity:1}
}

a.close-zeitreihen-download-modal {
    color: #666666;
    float: right;
    font-size: 25px;
    font-weight: bold;
    padding: 2px;
}

/* Nicht :focus, da showModal() den Link beim Öffnen automatisch fokussiert */
a.close-zeitreihen-download-modal:hover,
a.close-zeitreihen-download-modal:focus-visible {
    color: #2a2a2a;
    text-decoration: none;
    cursor: pointer;
}

.zeitreihen-download-modal-body {
    padding: 5px 20px 20px 20px;
}

.zeitreihen-download-form {
    width: initial;
    background: initial;
    padding: initial;
    border: initial;
}

.zeitreihen-download-datepicker {
    display: inline-block;
    white-space: nowrap;
    margin-left: 5px;
}

.zeitreihen-download-zeitraum-hinweis {
    margin-top: 1px;
}

/* Sonst überschreibt display: inline-block das hidden-Attribut */
.zeitreihen-download-datepicker[hidden] {
    display: none;
}

/* Formularfelder erben die Schriftart nicht. Mit der kleineren Schrift passen Auswahl und Datumsfelder in eine Zeile */
#zeitreihen-download-daterange,
.zeitreihen-download-datepicker input[type="date"] {
    font-family: inherit;
    font-size: 11px;
    margin: initial;
    border: 1px solid #a3b6c3;
}

/* Die globale Formatierung von "form label" (Block mit fester Breite) passt nicht zu den Radiobuttons */
.zeitreihen-download-form label {
    clear: none;
    display: inline;
    float: none;
    width: auto;
    text-align: left;
    padding-right: 0;
    margin: 0 5px 0 0;
}

.zeitreihen-download-form input[type="checkbox"] {
    margin-left: 5px;
}

.zeitreihen-download-form input[type="radio"],input[type="checkbox"] {
    margin-top: 2px;
    margin-bottom: 2px;
    vertical-align: top;
}

.zeitreihen-download-table {
    width: 100%;
    border: 1px solid #cddce1;
    border-spacing: 1px;
    border-collapse: separate;
}

.zeitreihen-download-table tr:nth-child(odd) {
    background-color: #e1ebed;
}

.zeitreihen-download-table tr:nth-child(even) {
    background-color: #f2f5f6;
}

.zeitreihen-download-table td {
    padding: 4px 3px;
}

/* Feste Breite, sonst verschiebt die automatische Tabellenbreite beim Einblenden der Datumsfelder die Spalten (Firefox) */
.zeitreihen-download-table td:first-child:not([colspan]) {
    width: 70px;
    white-space: nowrap;
}

.zeitreihen-download-error-message {
    color: #b51a1a;
    visibility: hidden;
}

.zeitreihen-download-confirm {
    font-weight: bold;
}

.zeitreihen-download-progress {
    display: block;
    width: 100%;
    margin: 0 0 12px 0;
}

/* Sonst überschreibt display: block das hidden-Attribut */
.zeitreihen-download-progress[hidden] {
    display: none;
}

.zeitreihen-download-confirm-close {
    font-weight: normal;
}

.zeitreihen-download-form .button,
.open-zeitreihen-download-modal-link.button {
    margin: 2px 0;
    height: 20px;
    padding: 0 6px;
}