/* performance bundle: @imports samengevoegd om netwerk-rondritten te beperken. */

/* ===== gebundeld uit activities.css ===== */
#activities li {
    margin: 0 0 20px 0;
    list-style: none;
}
/* ===== einde activities.css ===== */

/* ===== gebundeld uit birthday.css ===== */
#birthday {
max-width: 550px;
margin-bottom: 20px;
}
/* ===== einde birthday.css ===== */

/* ===== gebundeld uit content.css ===== */
#content {
display: flex;
gap: 20px;
align-items: flex-start;
}

#content section {
padding: 20px;
margin-bottom: 20px;
background: var(--color-surface-main);
border-radius: 6px;
box-shadow: var(--base-shadow);
}

#content section nav {
margin: 0 -20px;
border-bottom: 1px solid #D9DBE0;
}

#content section nav a {
height: 50px;
display: flex;
padding: 0 20px;
justify-content: flex-start;
align-items: center;
gap: 20px;
text-decoration: none;
color: #333333;
border-top: 1px solid #D9DBE0;
}

#content section nav a.active {
background: #FBF7FD;
color: #7B3FB3; 
}

#content section nav code {
width: 20px;
font-family: "Font Awesome 7 Free";
font-weight: 200;
color: #333333;
}

#content section nav a.active code { color: #7B3FB3; }

#content section nav code.reading::before { content: "\f058"; }

#content section nav code.important::before { content: "\f005"; }

#content section nav code.archive::before { content: "\f0c7"; }

#content section nav code.archive::before { content: "\f0c7"; }

#content section nav code.settings::before { content: "\f044"; }

#content section nav code.notifications::before { content: "\f0f3"; }

#content section nav code.unread::before { display: none; }


#content section nav code.comments::before { content: "\f086"; }

#content section nav code.respects::before { content: "\f004"; }

#content section nav code.system::before { content: "\f022"; }

#content section nav code.added::before { content: "\f0fe"; }

#content section nav code.friends::before { content: "\f2bb"; }

#content section nav code.email::before { content: "\f0e0"; }

#content section nav code.chat::before { content: "\f27a"; }

#content section nav mark {
height: 25px;
line-height: 25px;
padding: 0 8px;
margin-left: auto;
font-family: var(--base-font);
font-size: calc(var(--base-font-size) - 5px);
background: #FBF7FD;
color: #333333;
border: 1px solid #E8DAEF;
border-radius: 10px;
}

#content section nav a.active mark {
background: #7B3FB3;
color: #FFF;
border-color: #7B3FB3;
}

#content-inner {
flex: 1;
}

#content-sidebar {
width: 300px;
flex-shrink: 0;
}

#content-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

#content-header .heading {
  display: flex;
  flex-direction: column;
}

#content-header .heading h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

#content-header .heading mark {
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  font-size: var(--base-font-size);
  background: var(--color-surface-button-active);
  color: var(--color-button-active);
  border-radius: 999px;
  white-space: nowrap;
}

#content-header .heading p {
  margin: 0.5rem 0 0;
}

#content-header button {
height: 40px;
line-height: 40px;
  padding: 0 18px;
  background: var(--color-surface-button);
  color: var(--color-button);
  border-color: var(--color-border-button);
  border-radius: 5px;
  box-shadow: var(--color-shadow-button);
}

#content-header button:hover {
  color: color-mix(in srgb, var(--color-border-button) 45%, black);
  border-color: color-mix(in srgb, var(--color-border-button) 45%, black);
}

#content-header nav {
  flex-shrink: 0;
}
/* ===== einde content.css ===== */

/* ===== gebundeld uit footer.css ===== */
#footer {
	margin: 0px;
  grid-area: footer;
  line-height: 50px;
  display: flex;
  justify-content: center;
  gap: 16px; 
  background: #F19620;
  border-radius: 5px;
  box-shadow: var(--shadow-base);
}

#footer * {
  margin: 0 8px;
  color: #442804;
}

/* TABLET */
@media (min-width: 769px) and (max-width: 1024px) {

#footer { display: none; }

}

/* MOBILE */
@media (max-width: 768px) {

#footer { display: none; }

}
/* ===== einde footer.css ===== */

/* ===== gebundeld uit header.css ===== */
#header {
height: 60px;
grid-area: header;
position: relative;
z-index: 1;
background: var(--color-surface-header, var(--image-header));
border-radius: 8px;
box-shadow: var(--shadow-header);
}

/* Mobile */
@media (max-width: 768px) {

#header {
padding-top: 80px;
position: fixed;
inset: 0;
height: auto;
display: none;
z-index: 777;
transition: transform .3s ease;
border-radius: 0;
} 

#header.open {
display: block;
}


}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

#header {
padding-top: 80px;
position: fixed;
inset: 0;
height: auto;
display: none;
z-index: 777;
transition: transform .3s ease;
border-radius: 0;
}

#header.open {
display: block;
}


}
/* ===== einde header.css ===== */

/* ===== gebundeld uit logo.css ===== */
#logo.site-logo-rebuilt {
  width: 190px;
  height: 136px;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

#logo.site-logo-rebuilt > #logo-smileys,
#logo.site-logo-rebuilt > .site-logo-mascots,
#logo.site-logo-rebuilt > .site-logo-custom {
  position: static;
  display: block;
  width: 162px;
  height: 76px;
  max-width: 162px;
  max-height: 76px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  isolation: isolate;
}

#logo.site-logo-rebuilt > #logo-wrapper,
#logo.site-logo-rebuilt > .site-logo-orange-wrapper {
  display: none !important;
}

#logo.site-logo-rebuilt > .site-logo-wordmark-image {
  display: block;
  position: relative;
  left: -4px;
  top: -15px;
  width: 188px;
  height: 64px;
  max-width: 188px;
  max-height: 64px;
  margin: -9px auto 0;
  padding: 0;
  object-fit: contain;
  object-position: center center;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  isolation: isolate;
}

/* ===== einde logo.css ===== */

/* ===== gebundeld uit main.css ===== */
#main {
padding: 0px;
margin-bottom: -20px;
grid-area: main;
position: relative;
}

#main article {
padding: 20px;
margin: 0 0 20px 0;
overflow: hidden;
background: var(--color-surface-main);
border-radius: 6px;
box-shadow: var(--base-shadow);
}

#main article p { margin: 0 0 20px 0 }

#main article img {
max-width: 100%;
height: auto;
}










#main hr {
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background: #CCCCCC;
  color: #CCCCCC;
  border-width: 0px;
}

#main h1 { margin-bottom: 20px; }

#main h1 .button {
  margin: 10px 10px 0px 0px;
  float: right;
}

#main h1 button {
  margin: 10px 10px 0px 0px;
  float: right;
}

#main h2 { margin-bottom: 20px; }

#main h3 {
  margin-bottom: 10px;
}

#main a {
  text-decoration: underline;
}

#main a:hover {
  text-decoration: none;
}

#main a.button {
  text-decoration: none;
}

#main ol.list {
  margin-left: 1.5em;
  list-style-type: decimal;
}

#main ol.list li {
  margin-bottom: 0.5em;
}

#main ul.list {
  margin-left: 1.5em;
  list-style-type: square;
}

#main ul.list li {
  margin-bottom: 0.5em;
}



#main article h3 {
  margin: 0px;
}

#main article ul {
  margin: 0px 20px 10px 20px; 
  list-style-type: square;
}

#main article ul li {
  margin-bottom: 10px;
}

#main article ul ul {
  margin: 20px 20px 15px 20px;
}

#main article ul ul li {
  margin: 5px;
}

#main article ol {
  margin: 0px 20px 20px 20px;
}

#main article ol li {}

#main article dl {
  overflow: hidden;
}

#main article dt {
  width: 200px;
  margin-bottom: 10px;
  float:left;
  clear: both;
  text-align: right;
}

#main article dd {
  width: calc(100% - 220px);
  margin-bottom: 10px;
  float: right;
}

#main article dd.double input {
  width: calc(100% / 2 - 5px);
  float: left;
}

#main article dd.double input:nth-child(1) {
  border-radius: 5px 0px 0px 5px;
}

#main article dd.double input:nth-child(2) {
  float: right;
  border-radius: 0px 5px 5px 0px;
}

/*

#main section {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: auto;
  margin: 0 auto;
}

#main section[rel="three"] {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
}

*/

#main label {
  cursor: pointer;
  cursor: hand;
}

/* Mobile */
@media (max-width: 768px) {

#container #main { overflow: auto; }

#main article dl { float:none }
#main article dt { width: auto; float:none; text-align: left;}
#main article dd { width: auto; float:none }

 #main .profiles { --numcolumns: 2; }

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

 #main { overflow: auto; }

 #main .profiles { --numcolumns: 3; }

}
/* ===== einde main.css ===== */

/* ===== gebundeld uit menu.css ===== */
menu {
  height: 60px;
  padding: 5px;
  margin-bottom: 20px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  background: var(--color-surface-menu);
  border-radius: 6px;
  box-shadow: var(--base-shadow);
}

menu:hover a.active,
#menu:hover a.active {
  background: transparent;
}

menu li,
#menu li {
  padding: 0;
  display: inline-block;
  flex: 1;
}

menu a,
#menu a {
  height: 50px;
  line-height: 50px;
  display: block;
  text-decoration: none; 
  text-align: center;
  color: inherit;
  border-radius: 3px;
}

menu a:hover,
menu a.active:hover,
#menu a:hover,
#menu a.active:hover {
  background: color-mix(in srgb, var(--color-surface-menu) 15%, white);
}

menu a.active,
#menu a.active {
  background: color-mix(in srgb, var(--color-surface-menu) 15%, white);
  text-decoration: none;
}

@media (max-width: 768px) {
	
menu,
#menu {
  height: 50px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #CCCCCC;
  border-radius: 5px 5px 0 0;

  /* Horizontaal scrollen op mobiel */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

menu li,
#menu li {
display: inline-block;
}
}
/* ===== einde menu.css ===== */

/* ===== gebundeld uit nav.css ===== */
#nav {
  width: 100%;
  height: 49px;
  margin-bottom: 20px;
  list-style: none;
  display: flex;
  overflow: hidden;
  background: #CCCCCC;
  border-radius: 6px;
  box-shadow: var(--base-shadow);
}

#nav:hover .active {
  background: transparent;
}

#nav a {
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  display: inline-block;
  flex: 1;
  text-align: center;
  text-decoration: none;
}

#nav a:hover,
#nav a.active {
  background: #8F8F8F;
  text-decoration: none;
}
/* ===== einde nav.css ===== */

/* ===== gebundeld uit privacy.css ===== */
#privacyContainer {
	width: 200px;
	padding: 20px;
	margin: 0px -20px;
	position: fixed;
	bottom: 20px;
	text-align: left;
	background: #006699;
}
/* Search privacy: separate from the public-lists/profile privacy setting. */
.privacy-setting--search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 20px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(75, 114, 170, .18);
}

.privacy-setting--search .privacy-setting-copy {
    min-width: 0;
}

.privacy-setting--search .privacy-setting-title,
.privacy-setting--search .privacy-setting-description,
.privacy-setting--search .privacy-setting-status {
    display: block;
}

.privacy-setting--search .privacy-setting-title {
    margin-bottom: 4px;
}

.privacy-setting--search .privacy-setting-description,
.privacy-setting--search .privacy-setting-status {
    font-size: 13px;
    line-height: 1.45;
}

.privacy-setting--search .privacy-setting-description {
    color: #555;
}

.privacy-setting--search .privacy-setting-status {
    grid-column: 1 / -1;
    color: #6B6E7A;
}

.privacy-setting--search .privacy-toggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
}

.privacy-setting--search.is-saving {
    opacity: .72;
}

.privacy-setting--search.is-unavailable .privacy-toggle {
    cursor: default;
    opacity: .6;
}

/* ===== einde privacy.css ===== */

/* ===== gebundeld uit sidebar.css ===== */
 #sidebar {
  padding-top: 20px;
  grid-area: sidebar;
  position: relative;
  background: var(--color-surface-sidebar);
  border-radius: 6px;
  box-shadow: var(--base-shadow)
}

#sidebar-toggle { display:none; }

 #sidebar .pagination {
  background: #84A0C8;
  border-radius: 0px;
}

 #sidebar h1 {
  padding: 0px 20px 20px 20px;
  margin: 0px;
}

 #sidebar h2 {
  position: relative;
  width: fit-content;
  padding: 0 20px;
  margin: 0 0 0 -12px;
  background: #5A80B5;
  border-left: 6px solid #5A80B5;
  color: #fff;
  border-radius: 6px 6px 6px 0px;
}

 #sidebar h2::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid #3f5d88; /* donkerdere tint */
  border-left: 12px solid transparent;
}

 #sidebar ul {
  padding: 20px;
  margin: 0px;
}

 #sidebar ul li {
}

 #sidebar article {
  padding: 20px;
  margin: 0px;
}

 #sidebar article ol {
  margin: 0px 20px;
}
  
 #sidebar section {
  position: sticky;
  top: 20px;
  bottom: 20px;
}

 #sidebar dl dt,
 #sidebar dl dd {
  width: auto;
}

 #sidebar nav {
	margin-bottom: 20px;
  position: sticky;
  top: 20px;
  bottom: 20px;
}

 #sidebar nav a {
	display: block;
	text-decoration: none;
	margin: 3px 0;
}
 #sidebar nav a:hover {
	text-decoration: underline;
}

 #sidebar #lettersAlphabet {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

 #sidebar #lettersAlphabet button {
  width: 100%;
}

/* Mobile */
@media (max-width: 768px) {

 #sidebar {
padding-top: 100px;
position: fixed;
inset: 0;
height: 100vh;
z-index: 777;
transform: translateY(100%);
transition: transform 0.3s ease;
}

 #sidebar.open {
transform: translateY(0);
}

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

 #sidebar {
padding-top: 100px;
position: fixed;
inset: 0;
height: 100vh;
z-index: 777;
transform: translateY(100%);
transition: transform 0.3s ease;
}

 #sidebar.open {
transform: translateY(0);
}

}
/* ===== einde sidebar.css ===== */

/* ===== gebundeld uit tabs.css ===== */
#tabs {
width: 100%;
display: flex;
position: absolute;
top: 10px;
left: 10px;
justify-content: space-between;
align-items: center;
font-size: calc(var(--base-font-size) + 1px);
}

#tabs a {
flex: 1;
text-align: center;
height: 40px;
line-height: 40px;
text-decoration: none;
font-weight: bold;
color: #442804;
position: relative;
transition: transform 0.35s ease, opacity 0.35s ease;
}

#tabs a:hover {
top: -2px;
transform: translateY(-2px);
}

#tabs .active {
color: #FFF;
font-weight: bold;
}

#tabs .tab-count {
position: absolute;
top: 0px;
right: 0px;
background: linear-gradient(145deg, #ff5a5a, #d90000);
color: white;
font-size: 12px;
font-weight: bold;
padding: 2px 5px;
border-radius: 6px;
min-width: 18px;
height: 18px;
line-height: 14px;
text-align: center;
display: none;
vertical-align: middle;
}

/* Mobile */
@media (max-width: 768px) {

#tabs {
width: calc(100% - 40px);
display: block;
position: relative;
top: 70px;
left: 20px;
right: 20px;
font-size: calc(var(--base-font-size) + 4px);
}

#tabs a {
height: 50px;
line-height: 50px;
display: block;
padding: 0px;
margin-bottom: 20px;
text-align: left;
}

#tabs a:hover { 
top:0;
transform:none;
}

#tabs .tab-count { 
height: auto;
padding: 10px;
font-size: var(--base-font-size); 
}

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

#tabs {
width: calc(100% - 40px);
display: block;
position: relative;
top: 70px;
left: 20px;
right: 20px;
font-size: calc(var(--base-font-size) + 4px);
}

#tabs a {
height: 50px;
line-height: 50px;
display: block;
padding: 0px;
margin-bottom: 20px;
text-align: left;
}

#tabs a:hover { 
top:0;
transform:none;
}

#tabs .tab-count { 
height: auto;
padding: 10px;
font-size: var(--base-font-size); 
}

}

/* Ronde 249: ongelezen berichten direct naast de headerlink Berichten. */
#tabs .header-message-count {
    position: static !important;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 19px !important;
    height: 19px !important;
    margin-left: 6px;
    padding: 2px 5px !important;
    line-height: 15px !important;
    vertical-align: middle;
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    #tabs .header-message-count {
        min-width: 24px !important;
        height: 24px !important;
        padding: 3px 7px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }
}

/* ===== einde tabs.css ===== */

/* ===== gebundeld uit tabspage.css ===== */
#tabspage {
padding: 0;
margin: 0 0 20px 0;
background: var(--color-surface-tabspage);
color: var(--color-surface-text);
border-radius: 6px;
box-shadow: var(--shadow-tabspage);
}

#tabspage article {
padding: 0;
position: relative;
opacity: 1;
transition: opacity .25s ease;
background: var(--color-surface-tabspage);
border: 1px solid color-mix(in srgb, var(--color-surface-tabspage) 85%, black);
box-shadow: none;
}

#tabspage article.fade {
opacity: 0;
}

#tabspage article h3 {
padding: 20px;
}

#tabspage .pages {
margin: 20px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}

#tabspage .pages .prev,
#tabspage .pages .next {
transition: transform .2s ease, opacity .2s ease;
}

#tabspage .pages .prev {
justify-self: start;
}

#tabspage .pages .next {
justify-self: end;
}

#tabspage .pages .prev:hover {
transform: translateX(-4px);
}

#tabspage .pages .next:hover {
transform: translateX(4px);
}

#tabspage .pages .info {
justify-self: center;
transition: opacity .2s ease;
}

#tabspage-header {
width: auto;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid color-mix(in srgb, var(--color-surface-tabspage) 85%, black);
}

#tabspage-header a {
height: 70px;
line-height: 70px;
display: block;
flex: 1;
text-align: center;
text-decoration: none;
font-weight: 800;
color: color-mix(in srgb, var(--color-surface-tabspage) 35%, black);
}

#tabspage-header a:first-child { border-radius: 6px 0 0 0;}

#tabspage-header a:last-child { border-radius: 0 6px 0 0;}

#tabspage-header a.active {
background: var(--color-surface-main);
}

#tabspage-taskbar {
padding: 20px 20px 0 20px;
display: flex;
justify-content:space-between;
align-items:center;
background: var(--color-surface-main);
}

#tabspage-taskbar-about {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"icon title"
"icon text";
gap: 4px 16px;
align-items: start;
}

#tabspage-taskbar-about code {
line-height: 1;
grid-area: icon;
font-size: calc(var(--base-font-size) + 35px);
}

#tabspage-taskbar-about h1 {
margin: 0;
grid-area: title;
}

#tabspage-taskbar-about p {
margin: 0;
grid-area: text;
}

#tabspage-taskbar-search {
flex:1;
}

#tabspage-taskbar-display {
}

#tabspage-main {
padding: 20px;
display: grid;
grid-template-columns: 350px 1fr;
grid-template-areas: "sidebar content";
column-gap: 20px;
background: var(--color-surface-main);
border-radius: 0 0 6px 6px;
}

#tabspage-main.fullscreen {
padding: 20px;
display: grid;
grid-template-columns: auto;
grid-template-areas: " content";
column-gap: 0px;
background: var(--color-surface-main);
border-radius: 0 0 6px 6px;
}

#tabspage-main.fullscreen .profiles { --numcolumns: 6; }

#tabspage-main-sidebar .profiles { --numcolumns: 3; }

#tabspage-main-content {
width: auto;
padding: 20px;
grid-area: content;
border: 1px solid color-mix(in srgb, var(--color-surface-tabspage) 85%, black);
border-radius: 6px;
}

#tabspage-main-content.fullscreen {
grid-area: none;
}

#tabspage-main-content .profiles { --numcolumns: 4; }

#tabspage-full {
padding: 20px;
background: var(--color-surface-main);
border-radius: 0 0 6px 6px;
}

#tabspage-full .pages { margin: 0; }

#tabspage-full .profiles { --numcolumns: 6; }

#tabspage-tabs { margin-bottom: 10px; }

#tabspage-tabs .item-tabspage {
padding: 5px 15px;
margin: 0 10px 10px 0;
display: inline-block;
text-decoration: none;
font-weight: bold;
background: var(--color-surface-button-inactive); 
color: var(--color-button-inactive);
border: 1px solid var(--color-border);
border-radius: 6px;
transition: transform .2s ease;
}

#tabspage-tabs .item-inactive:hover {
background: color-mix(in srgb, var(--color-surface-button-inactive) 95%, black);
color: color-mix(in srgb, var(--color-border) 25%, black);
border-color: color-mix(in srgb, var(--color-border) 85%, black);
transform: scale(1.09);
}

#tabspage-tabs .item-active {
background: var(--color-surface-button-active); 
color: var(--color-button-active);
border-color: var(--color-button-active);
}
/* ===== einde tabspage.css ===== */

/* ===== gebundeld uit taskbar.css ===== */
#taskbar {
width: 220px;
height: auto;
padding: 20px;
position: fixed;
top: 20px;
bottom: 20px;
grid-area: taskbar;
z-index: 100;
background: var(--color-surface-taskbar);
color: white;
border-radius: 6px;
transition: transform 0.35s ease, opacity 0.35s ease;
box-shadow: var(--shadow-taskbar);
}

#taskbar-nav {
width: auto;
list-style: none;
font-size: calc(var(--base-font-size) + 1px);
line-height: 1.35;
}

#taskbar-nav a {
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
color: #FFF;
text-align: right;
border: 1px solid transparent;
border-radius: 6px;
transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

#taskbar-nav a:hover,
#taskbar-nav a:focus-visible {
background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.09) 100%);
border-color: rgba(255,255,255,.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
transform: translateY(-1px);
text-decoration: none;
outline: 0;
}

#taskbar-nav a.active {
background: #0B4793;
color: #FFFFFF;
border-radius: 6px;
box-shadow: var(--base-shadow);
}

#taskbar-nav .taskbar-icon-wrap {
display: none !important;
}

#taskbar-nav .taskbar-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}

#taskbar-nav .taskbar-icon svg {
width: 20px;
height: 20px;
display: block;
fill: currentColor;
}


#taskbar-nav a > .taskbar-icon,
#taskbar-nav a > .snoeten-nav-icon,
#taskbar-nav a > .snoeten-nav-icon-wrap,
#taskbar-nav a > code,
#taskbar-nav a > i,
#taskbar-nav a > svg,
#taskbar-nav a > img {
    display: none !important;
}

/* Taakbalkiconen zijn standaard al vóór JavaScript verborgen, zodat ze op
   gewone pagina's nooit kort tijdens het laden kunnen opflitsen. Alleen
   berichten.html zet snoeten-taskbar-icons-enabled op <html>. */
html.snoeten-taskbar-icons-enabled #taskbar-nav .taskbar-icon-wrap {
    display: inline-flex !important;
    width: 24px;
    min-width: 24px;
    margin: 0 auto 0 0;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
html.snoeten-taskbar-icons-enabled #taskbar-nav a > .taskbar-icon {
    display: inline-flex !important;
}
html.snoeten-taskbar-icons-enabled #taskbar-nav .taskbar-icon svg {
    display: block !important;
}
html.snoeten-taskbar-icons-enabled #taskbar-nav a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}


/* 2026-09-29 — gewone pagina's: icoon rechts direct achter de linktekst.
   Berichten gebruikt ongewijzigd de bestaande snoeten-taskbar-icons-enabled modus. */
html.snoeten-taskbar-icons-right #taskbar-nav .taskbar-icon-wrap {
    display: inline-flex !important;
    width: 20px;
    min-width: 20px;
    margin-left: 8px !important;
    margin-right: 0 !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    order: 2;
}
html.snoeten-taskbar-icons-right #taskbar-nav a > .taskbar-icon {
    display: inline-flex !important;
}
html.snoeten-taskbar-icons-right #taskbar-nav .taskbar-icon svg {
    display: block !important;
}
html.snoeten-taskbar-icons-right #taskbar-nav a {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Mobile */
@media (max-width: 768px) {

#taskbar {
width: auto;
padding-top: 80px;
position: fixed;
inset: 0;
height: 100vh;
display: none;
z-index: 777;
transition: transform .3s ease;
border-radius: 0;
}

#taskbar.open {
display: block;
}

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

#taskbar {
width: auto;
padding-top: 80px;
position: fixed;
inset: 0;
height: 100vh;
display: none;
z-index: 777;
transition: transform .3s ease;
border-radius: 0;
}

#taskbar.open {
display: block;
}

}
/* r502: vaste, volledig zichtbare taakbalk op desktop. */
@media (min-width: 1025px) {
    #taskbar.profile-taskbar-collapsible {
        width: 220px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
    }

    #taskbar.profile-taskbar-collapsible #logo {
        order: 1;
    }

    #taskbar.profile-taskbar-collapsible #taskbar-nav {
        width: 100%;
        order: 2;
    }

    #taskbar.profile-taskbar-collapsible #taskbar-nav a {
        min-height: 42px;
        margin-top: 8px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon-wrap {
        width: 24px;
        min-width: 24px;
        margin: 0;
        float: none;
        text-align: center;
    }

    #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon {
        width: 24px;
        height: 24px;
    }

    #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon svg {
        width: 24px;
        height: 24px;
    }

    #taskbar.profile-taskbar-collapsible #taskbar-nav .spread {
        height: 10px;
        display: block;
    }

}
/* 2026-09-29 — canonieke taakbalkinteractie: gelijk aan header, tekst rechts. */
html body #taskbar #taskbar-nav a:not(.snoeten-taskbar-align-disabled) {
    justify-content: flex-end !important;
    text-align: right !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

html body #taskbar #taskbar-nav a:hover:not(.snoeten-taskbar-hover-disabled),
html body #taskbar #taskbar-nav a:focus-visible:not(.snoeten-taskbar-hover-disabled) {
    background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.09) 100%) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
    transform: translateY(-1px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    outline: 0 !important;
}

html body #taskbar #taskbar-nav a.active:hover:not(.snoeten-taskbar-hover-disabled),
html body #taskbar #taskbar-nav a.active:focus-visible:not(.snoeten-taskbar-hover-disabled) {
    background: linear-gradient(180deg, #1F5EAD 0%, #144E98 52%, #0B4085 100%) !important;
    border-color: rgba(5,46,105,.76) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(3,31,75,.24), 0 3px 8px rgba(8,41,91,.24) !important;
    transform: none !important;
}

html.snoeten-taskbar-icons-enabled body #taskbar #taskbar-nav .taskbar-icon-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* 2026-09-29 — gewone pagina's: mouseover wijzigt uitsluitend de achtergrond. */
html.snoeten-taskbar-icons-right body #taskbar #taskbar-nav a:hover,
html.snoeten-taskbar-icons-right body #taskbar #taskbar-nav a:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.09) 100%) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    outline: 0 !important;
}

html.snoeten-taskbar-icons-right body #taskbar #taskbar-nav a.active:hover,
html.snoeten-taskbar-icons-right body #taskbar #taskbar-nav a.active:focus-visible {
    background: linear-gradient(180deg, #1F5EAD 0%, #144E98 52%, #0B4085 100%) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ===== einde taskbar.css ===== */

/* ===== gebundeld uit ../shared/user.css ===== */
#user {
height: 50px;
position: absolute;
top: 10px;
right: 10px;
bottom: 0px;
z-index: 800;
display: grid;
grid-template-areas: "name avatar";
text-align: right;
}

#user #user-name {
height: 40px;
line-height: 40px;
margin-right: 20px;
grid-area: name;
}

#user #user-shortcuts a {
height: 40px;
line-height: 40px;
margin-left: 20px;
display: inline-block;
text-decoration: none;
font-size: calc(var(--base-font-size));
color: #442804;
}

#user #user-avatar {
width: 40px;
height: 40px;
grid-area: avatar;
border-radius: 6px;
}

#user #user-avatar img {
width: 40px;
height: 40px;
border-radius: 4px;
}

/* Mobile */
@media (max-width: 768px) {

#user {
height: 50px;
position: absolute;
top: 100px;
left: 20px;
right: 20px;
grid-template-areas: "avatar name";
grid-template-columns: 70px 1fr;
text-align: left;
font-size: calc(var(--base-font-size) + 4px);
}

#user-avatar { 
width: 70px; 
height: 70px;
display: block; 
} 

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

#user {
height: 50px;
position: absolute;
top: 100px;
left: 20px;
right: 20px;
grid-template-areas: "avatar name";
grid-template-columns: 70px 1fr;
text-align: left;
font-size: calc(var(--base-font-size) + 4px);
}

#user-avatar { 
width: 70px; 
height: 70px;
display: block; 
} 

}
/* ===== einde ../shared/user.css ===== */

/* ===== gebundeld uit ../shared/toggle.css ===== */
#toggle { display: none; }

/* Mobile */
@media (max-width: 768px) {

#toggle {
width: auto;
height: 60px;
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: #FFF;
}
	
#toggleHeader,
#toggleTaskbar,
#toggleSidebar {
width: calc(100% / 3);
height: 60px;
line-height: 60px;
margin: 0;
float: right;
display: inline-block;
color: transparent;
font-weight: bold;
border-color: #FFF;
border-width: 0px;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
}

#toggleTaskbar, #toggleTaskbar:hover, #toggleTaskbar:active {
text-shadow: 0 0 0 #000;
font-size: calc(var(--base-font-size) - 1px);
}

#toggleSidebar, #toggleSidebar:hover, #toggleSidebar:active {
line-height: 10px;
text-shadow: 0 0 0 #000;
font-size: calc(var(--base-font-size) + 4px);
}

#toggleHeader, #toggleHeader:hover, #toggleHeader:active {
text-shadow: 0 0 0 #000;
font-size: calc(var(--base-font-size) + 4px);
}

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

#toggle {
width: auto;
height: 60px;
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: #FFF;
}

#toggleHeader,
#toggleTaskbar,
#toggleSidebar {
width: calc(100% / 3);
height: 60px;
line-height: 60px;
margin: 0;
float: right;
display: inline-block;
color: transparent;
font-weight: bold;
border-color: #FFF;
border-width: 0px;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
}

#toggleTaskbar, #toggleTaskbar:hover, #toggleTaskbar:active {
text-shadow: 0 0 0 #000;
font-size: calc(var(--base-font-size) - 1px);
}

#toggleSidebar, #toggleSidebar:hover, #toggleSidebar:active {
line-height: 10px;
text-shadow: 0 0 0 #000;
font-size: calc(var(--base-font-size) + 4px);
}

#toggleHeader, #toggleHeader:hover, #toggleHeader:active {
text-shadow: 0 0 0 #000;
font-size: calc(var(--base-font-size) + 4px);
}

}
/* ===== einde ../shared/toggle.css ===== */

/* ===== gebundeld uit visitor.css ===== */
#visitor {
  height: 60px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#visitor a {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
  display: inline-block;
  position: relative;
	text-decoration: none;
  color: #000;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

#visitor a.active {
	color: #FFF;
}

#visitor a:hover {
  top: -2px;
  transform: translateY(-2px);
}
/* ===== einde visitor.css ===== */

#container {
width: calc(100% - 40px);
max-width: none;
margin: 20px 20px 0;
display: grid;
gap: 20px;
grid-template-areas:
"taskbar header"
"taskbar main"
"taskbar footer";
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr auto;
}

/* Mobile */
@media (max-width: 768px) {
	
body { padding: 80px 20px 0 20px; }
	
#container {
width: 100%;
margin: 0 auto;
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0; 
}

#container.fullscreen {
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}

#container.fullscreen .profiles {
--numcolumns: 2;
}	

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

body { padding: 80px 20px 0 20px; }
	
#container {
width: 100%;
margin: 0 auto;
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0; 
}

}
/* r502: de taakbalk blijft op desktop altijd op de normale breedte staan. */
@media (min-width: 1025px) {
    #container.taskbar-collapsible-page {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

/* 2026-10-05 — woordmerk breder en iets meer naar links. */
#logo.site-logo-rebuilt > .site-logo-wordmark-image {
  left: -8px;
  width: 194px;
  height: 66px;
  max-width: 194px;
  max-height: 66px;
}


/* 2026-10-05 — losse herfstblaadjes als aparte afbeeldingen, verspreid rond het logo. */
#logo.site-logo-rebuilt > .site-logo-leaves-image {
  display: none;
}

#logo.site-logo-rebuilt > .site-logo-leaf-image {
  position: absolute;
  display: block;
  pointer-events: none;
  object-fit: contain;
  object-position: center center;
  z-index: 0;
}

#logo.site-logo-rebuilt > .site-logo-leaf-image--1 { left: -2px; top: 34px; width: 56px; height: auto; }
#logo.site-logo-rebuilt > .site-logo-leaf-image--2 { left: 34px; top: 90px; width: 39px; height: auto; z-index: 6; }
#logo.site-logo-rebuilt > .site-logo-leaf-image--3 { left: 84px; top: 100px; width: 31px; height: auto; z-index: 6; }
#logo.site-logo-rebuilt > .site-logo-leaf-image--4 { right: -6px; top: 36px; width: 58px; height: auto; }
#logo.site-logo-rebuilt > .site-logo-leaf-image--5 { right: 12px; top: 88px; width: 36px; height: auto; z-index: 6; }




/* 2026-10-05 — blaadjes vallen van boven naar hun plek in het logo. */
#logo.site-logo-rebuilt > .site-logo-leaf-image {
  opacity: 0;
  will-change: transform, opacity;
  animation: site-logo-leaf-fall var(--leaf-duration, 1.45s) cubic-bezier(.22,.85,.24,1) var(--leaf-delay, 0s) forwards;
}

@keyframes site-logo-leaf-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--leaf-start-y, -48px), 0) rotate(var(--leaf-rotate-start, -18deg));
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate3d(0, 7px, 0) rotate(calc(var(--leaf-rotate-end, 0deg) + 8deg));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--leaf-rotate-end, 0deg));
  }
}

/* 2026-10-05 — vallende blaadjes worden eenmaal door site-logo-leaves.js geanimeerd en blijven daarna liggen. */
#logo.site-logo-rebuilt > .site-logo-leaf-image {
  animation: none !important;
  opacity: 1 !important;
}


/* 2026-10-05 — vloeiende eenmalige bladval; eerst onzichtbaar, daarna blijven liggen. */
#logo.site-logo-rebuilt > .site-logo-leaf-image {
  animation: none !important;
  opacity: 0 !important;
}
#logo.site-logo-rebuilt > .site-logo-leaf-image.is-falling,
#logo.site-logo-rebuilt > .site-logo-leaf-image.is-landed {
  opacity: 1 !important;
}


/* 2026-10-05 — logo finetune: poppetjes iets hoger, woordmerk middenlaag, blaadjes voor én achter tekst. */
#logo.site-logo-rebuilt > #logo-smileys,
#logo.site-logo-rebuilt > .site-logo-mascots,
#logo.site-logo-rebuilt > .site-logo-custom {
  transform: translate3d(0, -56px, 0) rotate(0deg) !important;
  z-index: 3 !important;
}

#logo.site-logo-rebuilt > .site-logo-wordmark-image {
  z-index: 4 !important;
}

#logo.site-logo-rebuilt > .site-logo-leaf-image {
  z-index: 2 !important;
}

#logo.site-logo-rebuilt > .site-logo-leaf-image.is-front,
#logo.site-logo-rebuilt > .site-logo-leaf-image[data-leaf-layer="front"] {
  z-index: 6 !important;
}