@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:has(> .fullscreen) {
    position: fixed;
    margin: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
}

.fullscreen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin: 0px !important;
}

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

#footer {
    margin-top: 40px !important;
    padding: 0px 40px;
    height: 60px;
    margin-bottom: 0px !important;
    width: calc(100% - 80px);
}

#footer > section > section.inner,
#mainbody > section > section.page > section.inner,
#mainbody > section:not(.headerbar) > section.inner {
    margin: 0px auto;
    width: calc(100% - 80px);
    max-width: var(--maxwidth);
}

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

#footer > section { position: relative; top: 10px; }

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

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

.link:hover { text-decoration: underline; }
.link { color: #24f; }
.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:not([data-count]) {
    grid-template-columns: repeat(auto-fit, 350px);
}

.split.small {
    grid-template-columns: repeat(auto-fit, 260px);
}

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


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

.split[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split[data-count='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split[data-count='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split[data-count='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

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

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

.bubble {
    border: 0.8px solid var(--bordercolor);
    background-color: var(--menuitem);
    box-shadow:0px 0px 3px var(--shadowcolor); 
    -moz-box-shadow:0px 0px 3px var(--shadowcolor); 
    -webkit-box-shadow:0px 0px 3px var(--shadowcolor);
    padding: 5px 15px 7px;
    border-radius: 19px;
    cursor: pointer;
}


*[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; }

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

.drop {
    box-shadow:0px 1px 3px rgba(0,0,0,.1); -moz-box-shadow:0px 1px 3px rgba(0,0,0,.1); -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.1);
}

/* Grid */

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

section.grid.small > aside { width: 120px; }
section.grid.small > section { width: calc(100% - 160px); }

.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.inner section:has(+ section) {
    margin-bottom: 20px;
}

* + h0,
* + h1,
* + header { margin-top: 20px; }

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

.right { float: right; }

ul > li:has(> ul) { margin-bottom: 20px; }

ul > li:last-child:has(> ul) { margin-bottom: 0px; }

h1:has(+pre) { margin-bottom: 10px; }

li.grouping { margin-bottom: 10px; }

.stats > li:not(.noborder) { border: 1px solid #eee; padding: 10px; }
.stats > li:not(.noborder) > span { margin-right: 10px; vertical-align: top; }
.stats > li:not(.noborder) > span:last-child { margin-right: 0px; }

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

/* blocks */

ul.blocks {
    position: relative;
    display: block;
    width: calc(100% + 20px);
    margin-bottom: 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 > * {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: var(--offwhite);
    display: block;
}

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.block3x1 { width: calc(100%); padding-top: calc((100% - 60px) / 3); }
ul.blocks > li.block3x2 { width: calc(100%); padding-top: calc((100% - 60px) / 3 * 2); }
ul.blocks > li.block3x3 { width: calc(100%); padding-top: calc((100% - 60px)); }
ul.blocks > li.block2x1 { width: calc((100% / 3) * 2); padding-top: calc((100% - 60px) / 3); }
ul.blocks > li.block2x2 { width: calc((100% / 3) * 2); padding-top: calc((100% - 60px) / 3 * 2); }
ul.blocks > li.block1x1 { width: calc(100% / 3); padding-top: calc((100% - 60px) / 3); }
ul.blocks > li.block1x2 { width: calc(100% / 3); padding-top: calc((100% - 60px) / 3 * 2); }
ul.blocks > li.block1x0 { width: calc(100% / 3); padding-top: calc((100% - 60px) / 6); }

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

.panelholder {
    position: relative;
    width: calc(100% - 8px);
    display: inline-block;
    border: 4px solid var(--bordercolor);
    border-radius: var(--rounding);
    background-color: var(--offwhite);
    overflow: hidden;
    box-shadow:0px 0px 5px var(--shadowcolor); 
    -moz-box-shadow:0px 0px 5px var(--shadowcolor); 
    -webkit-box-shadow:0px 0px 5px var(--shadowcolor);
}

.panelholder:not(.container) {
    min-height: 200px;
}

section.container > *:first-of-type:not(.titlebar) {
    position: relative;
    margin: 20px;
    width: calc(100% - 40px) !important;
}

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

.photocard {
    background-color: transparent;
    border-radius: 3px;
    padding: 10px 0px;
}

.photocard > span {
    width: 200px;
    border: none;
    height: calc(200px * 85/65);
    background-image: url('/images/noimage.png');
    background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

section.noresults[data-component='repeater'] {
    display: none;
}

.inset {
    position: relative;
    border-radius: var(--rounding);
    margin: 20px;
    width: calc(100% - 40px);
    height: auto;
}

span:has(> span.stat) { position: relative; bottom: -5px; }

.stat { padding: 3px 8px; top: -3px; right: -3px; border-radius: var(--rounding); }
.stat.up { background-color: rgba(0, 180, 0, 1); color: #fff; }
.stat.down { background-color: rgba(255, 0, 0, 1); color: #fff; }

.inset span.top { width: 100%; height: 80px; }

.statholder > .inset span.top { height: 40px; }

.inset span.base { position: relative; width: 100%; margin-top: 20px; }

.inset span.base > h0 { margin-bottom: 25px; vertical-align: bottom; }

.inset span.bottom { position: absolute; left: 0px; width: 100%; bottom: 0px; }

.inset span.bottom > h0 { position:relative; margin-bottom: 25px; vertical-align: bottom; }

.job.panelholder { min-height: 250px; }

.job.panelholder > .inset > .base > * { margin-bottom: 5px; }

.job.panelholder > .inset > .base > *:last-of-type { margin-bottom: 0px; }

.inset span.companylogo {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 64px;
    height: 64px;
    border-radius: var(--rounding);
}

.inset span.flag {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 200px;
    height: 200px;
    opacity: 0.2;
}


.panelholder > span.bodyimage {
    width: 100%;
    aspect-ratio: 4/5;
    background-color: #f2f2f2;
    height: auto;
}


ul.datingcard .panelholder section.inset {
    margin-top: -82px;
}