:root {
    --backgroundColor:#f0dedb;
    --selectionColor: #B31B1B;
}
body{margin:0px;}
* {box-sizing: border-box;}
a, button.a { color: var(--selectionColor); text-decoration: none; border: none; background-color: transparent;}

#container{
    height:100vh; 
    background-color: var(--backgroundColor);
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    display: flex; flex-flow: column nowrap;
}
#main {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1vw;
}

.hide{display: none;}

.infoBox, .infoBoxOpen:popover-open { 
    outline: 1px solid black;
    border: 3px solid var(--selectionColor); 
    border-radius: 8px;
    display: grid; grid-template-rows: 1fr; gap: 2px;
    background-color: var(--selectionColor);
}

.infoBoxOpen:popover-open {
    height:fit-content ;max-width:80vw; max-height: 80vh; overflow: auto;
}

.infoBox>* {
    background-color: white; padding: 5px; border-radius: 5px;
}
.infoBoxOpen:popover-open>* {
    background-color: white; padding: 5px; border-radius: 5px;
}

.infoBox>div.title, .infoBoxOpen:popover-open>div.title {
    text-align: center; padding: 5px; color: white; font-size: larger;
    background-color: var(--selectionColor);
}