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%;
    -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.masthead > section.inner,
#mainbody > section > section.page > section.inner,
#mainbody > section:not(.headerbar) > section.inner {
    margin: 0px auto;
    max-width: 1560px;
    width: calc(100% - 80px);
}

#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);
}

section.split > * {
    display: block;
    margin-top: 0px;
    margin-bottom: 20px !important;
}

ul.split > * {
    display: block;
    margin-top: 0px !important;
    margin-bottom: 40px !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='6'] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.split[data-count='7'] { grid-template-columns: repeat(7, 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: var(--shadowcolor) 0px 1px 8px 0px;
    -moz-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -webkit-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    border: 0.8px solid var(--bordercolor);
    padding: 5px 15px;
    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-weight: bold;
}

.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 {
    display: grid;
    column-gap: 20px;
}

section.grid > * {
    position: relative;
    min-width: 0;
    vertical-align: top;
}

section.grid:has(> aside:first-child) { grid-template-columns: 375px minmax(0, 1fr); }
section.grid:has(> section:first-child) { grid-template-columns: minmax(0, 1fr) 375px; }

section.grid > aside:first-child,
section.grid > section:first-child { grid-column: 1; }

section.grid > aside:last-child,
section.grid > section:last-child { grid-column: 2; }

section.grid > aside,
section.grid > section { width: auto; }

section.grid.small:has(> aside:first-child) { grid-template-columns: 120px minmax(0, 1fr); }
section.grid.small:has(> section:first-child) { grid-template-columns: minmax(0, 1fr) 120px; }

.dialogbox_inner section.grid:has(> aside:first-child) { grid-template-columns: var(--dialoggridwidth) minmax(0, 1fr); }
.dialogbox_inner section.grid:has(> section:first-child) { grid-template-columns: minmax(0, 1fr) var(--dialoggridwidth); }
.dialogbox_inner section.grid.nospace { column-gap: 0px; }

/* 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.indented:after,
section.profileheader:after { content: "."; display:block; clear:both; height:0; visibility:hidden; }


/* VSpacing */

section.inner section:has(+ section) {
    margin-bottom: 40px;
}

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

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;
    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: 100%;
    display: inline-block;
    border-radius: var(--rounding);
    background-color: var(--offwhite);
    overflow: hidden;
}

.panelholder > .inset > ul.fields {
    margin-top: 20px;
}

.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 {
    display: flex;
    flex-direction: column;
    border-radius: var(--rounding);
    margin: 20px;
}

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: 70px; }

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

.inset > span { position: relative; display: block; margin-top: 10px; }

.inset span.bottom > span { margin-top: 10px;}

.inset span.bottom > span:first-child { margin-top: 0px; }

.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;
}

*[data-component=stepshow] ul.pips > li {
    cursor: pointer;
    margin-bottom: 5px;
}

*[data-component=stepshow] ul.pips > li:last-child {
    margin-bottom: 0px;
}

*[data-component=stepshow] ul.pips > li.selected {
    font-family: 'ptrootbold',Arial,Helvetica,freesans,sans-serif; 
}

*[data-component=stepshow] ul.steps > li {
    display: none;
}

*[data-component=stepshow] ul.steps > li.selected {
    display: block;
}

section.masthead {
    position: relative;
    width: 100%;
    display: block;
    padding: 40px 0px;
}

section.masthead > section.inner {
    position: relative;
    background-color: var(--panelcolor); 
    border: 0.8px solid var(--bordercolor);
    height: 500px !important; 
    border-radius: var(--rounding);
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -moz-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
    -webkit-box-shadow: var(--shadowcolor) 0px 1px 8px 0px;
}

section.masthead > section.inner > span.bottom {
    position: absolute;
    left: 40px;
    bottom: 40px;
    width: calc(100% - 80px);
    text-shadow: rgba(0,0,0,0.3) 0px 1px 2px;
}

section.masthead > section.inner > span.bottom > h0 {
    font-size: 4em;
    margin-bottom: 0px;
}

section.masthead > section.inner > span.logo.image {
    position: absolute;
    left: -35px;
    top: 20px;
    height: calc(100% - 150px);
    aspect-ratio: 1/1;
    width: auto;
    background-image: url('/images/logo_white2048.png');
}


section.masthead > section.inner > span.hearts.image {
    position: absolute;
    right: -15px;
    top: 20px;
    background-image: url('/images/launch/heartslaun.png');
    height: calc(100% - 40px);
    aspect-ratio: 1/1;
    width: auto;
}


body[data-size="xs"] section.masthead > section.inner > span.hearts.image,
body[data-size="s"] section.masthead > section.inner > span.hearts.image {
    display: none;
}