@CHARSET "UTF-8";

body { 
    background-color: var(--backgroundcolor); 
    color: var(--textcolor); 
    min-height: 100%;
    width: 100%;
}

body {
    position: relative;
    text-rendering: optimizeLegibility;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#mainbody {
    position: relative;
    height: auto;
    min-height: calc(100vh - 300px);
}

#footer,
#mainbody {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}


#footer {
    background-color: var(--footercolor);
}

#mainbody {
    padding-bottom: 80px
}

#footer > section > section.inner,
#mainbody > section:not(.header) > section.inner {
    margin: 0px 30px;
}

#mainbody > section:not(.header) > section.inner:first-of-type {
    margin-top: 40px;
}

#footer > section {
    position: relative;
    padding-bottom: 100px;
}

#header > section > section.inner {
    width: 100%;
}

section.inner section:not([data-component]) + section { margin-top: 40px; }

.split > section + section { margin-top: 0px !important; }

section.inner {
    margin-bottom: 40px;
}

section.inner section:not([data-component=]) + section { margin-top: 40px; }

ul.list > li.grouping { margin-bottom: 30px; }

.link:hover { text-decoration: underline; }
.link { color: var(--linkcolor); }
.link:before { content: '['; }
.link:after { content: ']'; }

.grid_icon { width: 100%; display: block; }

.grid_icon > aside + section {
    float: left;
    width: calc(100% - 70px);
    margin-left: 20px;
}

.grid_icon > aside:has(+section) {
    float: left;
    width: 50px;
}

.grid_icon:after {
    content: "."; display:block; clear:both; height:0; visibility:hidden;
}

.split { 
    width: 100%; 
    display: inline-grid;
    grid-column-gap: 20px;
}

.split > * {
    margin-bottom: 20px;
    vertical-align: top;
    display: block;
}


.split > *:first-child {
    margin-top: 0px !important;
}


.split[data-count='2'] { grid-template-columns: 1fr 1fr; }
.split[data-count='3'] { grid-template-columns: 1fr 1fr 1fr; }
.split[data-count='4'] { grid-template-columns: 1fr 1fr 1fr 1fr; }
.split[data-count='5'] { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.split[data-count='auto'] { grid-template-columns: repeat(auto-fit, 280px); }

aside .split {
    grid-template-columns: 1fr !important;
}

div.logo {
    position: relative;
    display: inline-block;
}

li.panel + li.panel {
    margin-top: 40px;
}

.chatbubble,
.bubble {
    border: 0.8px solid var(--bordercolor);
    background-color: var(--menuitem);
    padding: 5px 15px;
    border-radius: 19px;
    cursor: pointer;
    background-color: #fff;
}

.chatbubble {
    padding: 3px 10px;
    border-radius: 12px;
}

*[data-color] span.icon {-webkit-filter: invert(100%); filter: invert(100%); }

*[data-color='blue'] { background-color: #24f !important; color: #fff; }
*[data-color='green'] { background-color: #5ab64d !important; color: #fff; }
*[data-color='postit'] { background-color: #f6e6bd !important; }
*[data-color='red'] { background-color: #d71313 !important; color: #fff; }

.bubble.selected {
    font-family: 'ptrootbold',Arial,Helvetica,freesans,sans-serif;
}

.drop {
    border-color: #000 !important;
    box-shadow:0px 2px 5px var(--shadowcolor); 
    -moz-box-shadow:0px 2px 5px var(--shadowcolor); 
    -webkit-box-shadow:0px 2px 5px var(--shadowcolor);
}

/* Grid */

section.grid > * { position: relative; float: left; vertical-align: top; }
section.grid > *:first-child { margin-right: 20px; }
section.grid > aside { width: var(--gridwidth); }
section.grid > section { width: calc(100% - (var(--gridwidth) + 20px)); }

.dialogbox_inner section.grid:not(.nospace) > section { width: calc(100% - (var(--dialoggridwidth) + 20px)); }
.dialogbox_inner section.grid.nospace > section { width: calc(100% - (var(--dialoggridwidth))); }
.dialogbox_inner section.grid > aside { width: var(--dialoggridwidth); }

/* Indented */

section.indented > * { position: relative; float: left; vertical-align: top; }
section.indented > *:first-child { margin-right: 20px; }
section.indented > aside { width: 80px; }
section.indented > section { width: calc(100% - (80px + 20px)); }

/* ProfilePic */

section.profileheader > * { position: relative; float: left; vertical-align: top; }
section.profileheader > *:first-child { margin-right: 40px; }
section.profileheader > aside { width: 240px; }
section.profileheader > section { width: calc(100% - (240px + 40px)); }

/* Clear */

section.grid:after,
section.indented:after,
section.profileheader:after { content: "."; display:block; clear:both; height:0; visibility:hidden; }


/* VSpacing */

section + p,
section + span:not(.icon),
section:not([data-component='pager']) + section,
span + ul,
ul + *,
p + *,
p + p { margin-top: 20px; }

*:not(span) + h0,
* + h1,
* + header { margin-top: 20px; }

*:not(section):not(aside):not(h0):not(h1) + section,
* + form.controldata {
    margin-top: 20px;
}

form > p + ul {
    margin-top: 20px;
}

ul.info > li {
    margin-bottom: 20px;
}

section.debug {
    border: 1px solid #f00;
    padding: 10px;
    width: calc(100% - 20px);
}

/* blocks */

ul.blocks {
    position: relative;
    display: block;
    width: calc(100% + 20px);
}

ul.blocks:after { content: "."; display:block; clear:both; height:0; visibility:hidden; }

ul.blocks > * {
    position: relative;
    display: inline-block;
    background-color: transparent;
    float: left;
    border: 0px;
    padding: 0px;
}

ul.blocks > li > *:not(ul) {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: relative;
    display: block;
    overflow: hidden;
}

.bordered {
    background-color: var(--offwhite);
    border: 0.8px solid var(--bordercolor);
}

.borderedclear {
    background-color: var(--backgroundcolor);
    border: 0.8px solid var(--bordercolor);
}

ul.blocks > li > .noinset {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

ul.blocks > li span.source {
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding: 2px 10px;
    font-size: 14px;
    background-color: #fff;
}

ul.blocks > li span.source::before {
    content: "Source:";
    margin-right: 5px;
}

ul.blocks > li.block3x0 { width: calc(100%); aspect-ratio: 6 / 1; }
ul.blocks > li.block3x1 { width: calc(100%); aspect-ratio: 3 / 1; }
ul.blocks > li.block3x2 { width: calc(100%); aspect-ratio: 3 / 2; }
ul.blocks > li.block3x3 { width: calc(100%); aspect-ratio: 1 / 1; }
ul.blocks > li.block2x0 { width: calc((100% / 3) * 2); aspect-ratio: 2 / 1; }
ul.blocks > li.block2x1 { width: calc((100% / 3) * 2); aspect-ratio: 2 / 1; }
ul.blocks > li.block2x2 { width: calc((100% / 3) * 2); aspect-ratio: 1 / 1; }
ul.blocks > li.block1x1 { width: calc(100% / 3); aspect-ratio: 1 / 1; }
ul.blocks > li.block1x2 { width: calc(100% / 3); aspect-ratio: 3 / 2; }
ul.blocks > li.block1x0 { width: calc(100% / 3); aspect-ratio: 2 / 1; }
ul.blocks > li.block0x0 { width: calc(100% / 6); aspect-ratio: 1 / 1; }

ul.blocks.selectable > li.item.selected > span.bordered {
    border-color: #f00;
    border-width: 3px;
    left: -2.2px;
    top: -2.2px;
}

ul.blocks > li > span.inverse {
    background-color: #4a5ead;
    color: #fff;
}

ul.blocks > li > span.inverse > *:first-child {
    margin-top: 60px;
}

ul.blocks > li > span.inverse > * {
    margin: 10px;
    width: calc(100% - 20px);
}

ul.blocks > li > span.inverse > * {
    text-align: center;
}

ul.blocks > li > span.inverse > * + h0 {
    margin-top: -10px;
}

ul.blocks > li > .image {
    border-radius: 3px;
    overflow: hidden;
}

.panelholder {
    width: 100%;
    display: block;
    min-height: 200px;
    background-color: var(--offwhite);
}

.panelholder:after {
    content: "."; display:block; clear:both; height:0; visibility:hidden;
}

.map_holder,
.map { width: 100%; height: 100%; }

ol.numbered {
    margin-bottom: 20px;
}

ol.numbered > li {
    list-style-type: decimal;
    margin-left: 40px;
    width: calc(100% - 40px);
    margin-bottom: 10px;
}