body {
    font-family: "Arial", sans-serif;
    display: grid;
	gap: 0.5em;
    width: 90vw;
    justify-self: center;
}

h3 {
    margin-bottom: 0px;
}

h4 {
    margin-bottom: 0px;
    margin-top: 0.5em;
}

.wrapper {
    margin-right: auto;
    margin-left: auto;
}

/*both figures*/
.figure_wrapper {
    display:flex;
    border: 0.01em solid #CFCFCF;
    margin: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    /*padding top is included in margin-top of H4*/
    max-width: 90vw;
    box-shadow: 0.5em 0.5em 1em #CFCFCF;
    justify-content: space-between; /*here for vertical alignment, since flex-direction is column*/
    flex-direction: column;
}
/*single figures*/
.figures_wrapper{
    display:grid;
    width: 100%;
}

.figure_timeline{
    padding:1em;
}
.menu-title {
    display: inline-block;
    margin-bottom: 0.1em;
    margin-top: 0.5em;
    font-weight: bold;
    color: #871D33;
}

/*contents of main menu-items*/
.varitems {
    display:grid;
    grid-area: varitems;
    grid-auto-flow: row;
    row-gap: 0.5em;
    column-gap: 0.5em;
    align-self: flex-end;
    justify-self: center;
}
.appitems {
    display:grid;
    grid-area: appitems;
    grid-auto-flow: column;
    row-gap: 0.5em;
    column-gap: 1em;
    align-self: flex-end;
    justify-self: center;
}
.dropvar {
    grid-area: dropvar;
    justify-self: stretch;
    align-self: flex-start;
    padding-right: 1em;
}
.dropzeit {
    grid-area: dropzeit;
    justify-self: stretch;
    align-self: flex-start;
    padding-right: 1em;
}
.dropreg {
    grid-area: dropreg;
    justify-self: stretch;
    align-self: flex-start;
    padding-right: 1em;
}
.radio {
    grid-area: radio;
    justify-self: stretch;
    align-self: flex-start;
    padding-right: 1em;
}
.buttons {
    display:flex;
    /*grid-area: buttons;*/
    justify-self: center;
    align-self: end;
    gap: 0.5em;
}

/*order of menu-items.. main, left graph and right graph separately*/
.menu-items {
    display:grid;
    grid-template-columns: 1fr 1fr 0.5fr;	/* default mobile version */
    grid-template-rows: auto;	/* default mobile version */
    align-items: flex-end;
    padding: 1em;
    grid-template-areas:    ". . appitems"
                            "dropvar dropvar varitems"
                            "dropzeit dropzeit varitems"
                            "radio radio radio "
                            "dropreg dropreg dropreg";
}
.menu-items-leftGraph {
    display:grid;
    grid-template-columns: 1fr;	    /* default mobile version */
    align-items: baseline;
    gap:1em;
    padding-left: 1em;
}
.menu-items-rightGraph {
    display:grid;
    grid-template-columns: 1fr;	/* default mobile version */
    align-items: flex-start;
    gap: 1em;
}
.dropdown {
    width: 100%;
    min-width:21em;
    max-width:30em;
}
.onecolumn {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 0.5em;
    padding: 0.5em;
    align-self: end;
    justify-items: center;
}
.onerow {
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: auto;
    grid-auto-flow: column;
    row-gap: 0.5em;
    justify-self: flex-start;
    align-self: flex-start;
}

.onerowH3 {
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: auto;
    grid-auto-flow: column;
    column-gap: 1em;
}

/* Rounded border */
hr.rounded {
    border-top: 0.2em solid #CFCFCF;
    border-radius: 0.5em;
    margin:1em;
    max-width: 98%;
}
.box {
     /* Box-Eigenschaften */
    width: 10em; /* Breite der Box */
    background-color:#CFCFCF; /* Hintergrundfarbe */
    border: 0.1em solid #ccc; /* Randfarbe */
    border-radius: 0.5em; /*Abrundung der Ecken*/
    padding: 0.5em; /* Abstand zwischen Inhalt und Rand */
    margin: 0px;
    text-align: center; /* Textausrichtung */
}

.hoverbox {
    background-color:#332c2c44;
    color:#CFCFCF;
    padding:1em;
    margin:0px;
}

/*RadioItems to button*/
.radio-to-button {
    margin-left:-25px;
    padding-left:0.5em;
    padding-right:0.5em;
    padding-top:0.1em;
    padding-bottom:0.1em;
    color:#fff;
    background-color:#CFCFCF;
    border-radius:0.5em;
    cursor: pointer;
    }
.radio-to-button.checked {
    background-color:#871D33;
}
.radio-to-button:hover {
    background-color:#b1b1b1;
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5);
}
.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}
.form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.form-check-input:disabled ~ .form-check-label {
    color: #6c757d;
}

.form-check-label {
    margin-bottom: 0;
}

.form-check-inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0em;
    margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: 0.3125rem;
    margin-left: 0;
}

.dmc-slider-track {
    background-color: #CFCFCF;
    color: #871D33;
    height: 0.5em;
    /*&::before {
    background-color: #CFCFCF;
    }*/
}

.dmc-slider-thumb {
    height: 1em;
    width: 1em;
    background-color: #871D33;
    color: #871D33;
    border-color:#871D33;
    border-width: 0px;
}

.dmc-slider-bar {
    background-color: #871D33;
    color: #871D33;
    border-color:#871D33;
}

.dmc-slider-mark {
    width: 0.1em;
    height: 0.5em;
    border-radius: 3px;
    background-color: #871D33;
    color: #871D33;
    border-color:#871D33;
}

@media (min-width: 90em) {  /* Breite beträgt mindestens 90em */ 
	.figures_wrapper {
		grid-template-columns: 1.3fr 2fr;
	}
    .figure_timeline {
        align-items: space-between;
        aspect-ratio:8/5;
	}
    .menu-items {
        max-width: 80vw;
		grid-template-columns: 0.5fr 2fr 2fr 0.5fr;	
        grid-template-rows:auto;
        justify-content: center;
        justify-self: space-evenly;
        align-items: start;
        grid-template-areas:    "varitems dropvar radio appitems"
                                "varitems dropzeit dropreg appitems";
	}
    .varitems {
        /*grid-auto-flow: column;*/
        align-self: center;
        justify-self: center;
    }
    .appitems {
        /*grid-auto-flow: column;*/
        grid-auto-flow: row;
        align-self: center;
        justify-self: center;
    }
    .buttons {
        align-self: center;
        justify-self: center;
    }
    .menu-items-rightGraph {
        grid-template-columns: 4fr 1fr 1fr;
        justify-content: space-between;
    }
    #controls-and-graph-projections {
        font-size: 0.2em;
    }
}