:root {
	--menu-width: 200px;

	--nav-background: #ffffff;				/* white */
	--nav-bottom-border: #ff7700;			/* orange */

	--nav-item-background: #F0F0F0;			/* light gray */
	--nav-item-color: #000000;				/* white */
	--nav-item-border: #ff7700;				/* orange */
	--nav-smallitem-color:  #ff7700;		/* orange */

	--nav-item-hover-background: #ff7700;	/* orange */
	--nav-item-hover-color: #ffffff;		/* white */

     --content-bottom-border: #666666;        /* darkgray */;

	--menu-cat-text: #eeeeee;   			/* lightgray */
	--menu-cat-back: #666666;				/* darkgray */;

	--menu-cat-cur-text: #ffffee;   		/* lightorange */
	--menu-cat-cur-back: #baaaaa;			/* darkgray */;

	--menu-page-text: #443737;   			/* darkerdarkgray */
	--menu-page-back: #fff5eb;				/* lightorange */
	--menu-page-border: #ff7700;			/* orange */

	--menu-page-cur-text: #ffffff;   		/* white */
	--menu-page-cur-back: #ff7700;			/* orange */

	--explanatation-label: #2288c1;        	/* medium blue */
	--explanatation-term: #443737;   		/* darkerdarkgray */

	--header-text: #ff7700;					/* orange */
	--subheader-text: #2288c1;        		/* medium blue */
	--inlinecode-text: #ff7700;				/* orange */

	--content-left-border: #cccccc;			/* gray */

	--paragraph-text: #353551; 	 	      	/* medium grijzig */
	--small-paragraph-text: #000000; 	 	/* black */
	--list-text: #353551;        			/* medium grijzig */

	--term-text: #366da8;					/* deep blauw */
	--explanatation-text: #353551;        	/* medium grijzig */

	--source-code-text: #7a6a6a;			/* darkgray */;
	--source-code-back: #f4fafe;			/* pale blue */
	--source-code-border: #c5e5fa;			/* pale medium blue */

	--crumpath-active: #f16314;				/* dark orange */
	--crumpath-inactive: #555555;   		/* lightgray */
	--crumpath-bottom-border: #cccccc;		/* gray */

	--link-text: #f16314;					/* dark orange */;
	--link-background: #f9f9fc;				/* bleek grijs */
	--link-border: #f16314;					/* dark orange */				

	--attention-text: #ffffff;				/* white */
	--attention-background: #2288c1;        /* medium blue */

	--rowitem-text: #2288c1;        		/* medium blue */

	--small-pages-header-back: white;	
	--small-pages-header-text: #353551;		/* medium grijzig */

	--deepred: #FF4040;						/* Chinese deep red */
	--attentionmarker: #e7c27d;				/* Latte */

}

@font-face {
    font-family: 'Roboto'; /* Name your font */
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'RobotoThick'; /* Name your font */
    src: url('../fonts/Roboto-Thick.ttf') format('truetype');
}

/* General settings */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
body {
	font-family: "Roboto", sans-serif;
	font-weight: 100;
	font-size: 16px;
     overflow-x: hidden;
}
a {
	text-decoration: none;
}

/* Responsive */
.wide-screen {
     display: block;
}
.phone-screen {
     display: none;
}


/* Navigation bar */

.nav-bar {
     background-color: orange;
     color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 20px;
     border:2px green solid;
}

/* Menu-items */

.nav-links {
     list-style: none;
     display: flex;
     gap: 20px;
     margin: 0;
     padding: 0;
}

.nav-links a {
     color: white;
     text-decoration: none;
     padding: 8px 12px;
     transition: background 0.3s;
}

.nav-links a:hover {
     background-color: #555;
     border-radius: 4px;
}

/* Content */

.site-name {
     font-size: 20px;
     font-weight: bold;
}

/* Checkbox for hamburger, initially hidden */

#menu-toggle {
     display: none;
}

/* Hamburger icon */

.menu-icon {
     display: none;
     font-size: 26px;
     cursor: pointer;
}

/* TOP NAME */

.top-name {
     font-size: 24px;
     font-weight: 800;
     position: fixed;
     color: var(--nav-smallitem-color);
     top: 19px;
     left: 40px;
     z-index: 1000;
}

/* CRUMPATH ROW */

.crumbpath {
	font-size: 14px;
	font-weight: 800;
	color: var(--crumpath-inactive);
    pointer-events: none;
    user-select: none;
    margin-top: 0px;
    padding: 0px;
    padding-bottom: 8px;
	border-bottom: 1px var(--crumpath-bottom-border) solid;
}
.crumbpath a {
	color: var(--crumpath-active);
    pointer-events: auto;
    user-select: auto;
}
.crumpath-wide {
	display: inline-block;
	width:100px;
}

/* PHONE MENU */

.small-navmenu {
	display: none;
}
.small-navheader {
	font-size: 14px;
	font-weight: 100;
	color: var(--nav-smallitem-color);
	margin-top: 4px;
	margin-bottom: 4px;
	margin-left: 4px;
	padding-top: 0px;
}
.small-navmenu .small-navitem {
	display: none;
	background-color: var(--nav-item-background);
	color: var(--nav-smallitem-color);
	font-size: 16px;
	font-weight: 200;
	width: 300px;
	margin: 2px;
	margin-left: 20px;
	padding-left: 20px;
}
.small-pages-header {
	background-color: var(--small-pages-header-back);
	color: var(--small-pages-header-text);
	font-size: 13px;
	font-weight: bold;
}
.small-pages-page {
	display: none;
	background-color: var(--nav-item-background);
	color: var(--nav-smallitem-color);
	font-size: 13px;
	font-weight: 100;
	width: 300px;
	margin-bottom: 1px;
	margin-left: 20px;
	padding-left: 20px;
}
.small-category-name {
	color: black;
	border-bottom: 1px orange solid;
	font-size: 15px;
	font-weight: bold;
}

/* PHONE LARGE MENU */

.phonemenu {
	display: none;
}

/* CONTAINER WITH MAIN-MENU AND CONTENT */

.container {
	display: flex;
	height: calc(100% - 10px);
	margin-top: 10px;
	overflow: hidden;
}

.main-menu {
	width: var(--menu-width);
	position: sticky;
	top: 10px; /* Adjust based on your navbar height */
/*	height: calc(100% - 10px);*/
	padding-left: 3px;
	overflow-y: auto; /* Allows scrolling if the menu content is large */
}
.content {
	width: calc(100% - var(--menu-width));
	padding: 20px;
	padding-left: 50px;
	padding-right: 20px;
	overflow-y: auto;
	background: #fff;
	height: 100%;
	padding-bottom: 50px;
	border-left: 1px var(--content-left-border) solid;
     overflow-x: hidden;
}

.content-footer {
     margin-top: 60px;
     margin-left: -50px;
     margin-right: -20px;
     padding-top: 30px;
     padding-left: 50px;
	border-top: 5px var(--content-bottom-border) solid;
     background-color: #F0F0F0;
}
.right {
	text-align: right;
}
.quick-footer-inactive {
	font-size: 14px;
	font-weight: 800;
	color: var(--crumpath-inactive);
    pointer-events: none;
    user-select: none;
}
.quick-footer-active {
	font-size: 14px;
	font-weight: 800;
	color: var(--crumpath-active);
    pointer-events: auto;
    user-select: auto;
}
.caroussel-container {
}
.caroussel-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Keeps aspect ratio, shrinks if needed */
    border: 1px #EEEEEE solid;
}
.disclaimer {
	font-size: 8px;
	font-weight: 100;
	color: var(--paragraph-text);
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}
.bold {
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-weight: 400;
	color: black;
}
.marked {
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-weight: 400;
	color: var(--deepred);
}
.mark-warning {
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-weight: 400;
	color: #ff7700; /* orange */
}
.mark-error {
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-weight: 400;
	text-decoration: line-through;
	color: deepskyblue;
}
.mark-bright {
     display: inline-block;
     font-size: 15px;
     font-style: italic;
     color: #202050;
}
.formattedlist {
	border-left: 4px var(--attentionmarker) double;
	padding: 13px;
	margin-left: 10px;
}
.chinchar {
	display: inline-block;
	padding-left: 20px;
	width: 140px;
	font-size: 28;
	font-weight: 800;
	color: var(--deepred);
}
.chinpinyin {
	display: inline-block;
	width: 140px;
	font-family: Verdana, sans-serif;
	color: var(--deepred);
}
.chinenglish{
	display: inline-block;
	width: 400px;
	color: black;
}
.chincharlong {
	display: inline-block;
	padding-left: 20px;
	width: 33%;
	font-family: Chinese, sans-serif;
	font-size: 28;
	font-weight: 800;
	color: var(--deepred);
}
.chinpinyinlong {
	display: inline-block;
	width: 33%;
	font-family: Verdana, sans-serif;
	color: var(--deepred);
}
.chinenglishlong {
	display: inline-block;
	width: 33%;
	color: black;
}

.survey-character{
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-size: 25;
	font-weight: 800;
	color: var(--deepred);
}
.survey-pinyin{
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-size: 20;
	font-weight: 400;
	color: var(--deepred);
}
.survey-option {
	padding: 8px;
	width: 400px;
	border: 1px var(--deepred) solid;
	background-color: #FFFAFA;
	border-radius: 10px;
	color: var(--deepred);
	margin-bottom: 5px;
	font-family: Verdana, sans-serif;
	font-size: 25;
	font-weight: 800;
	text-align: center;
}
.horizontalline {
     display: inline-block;
     margin-top: 20px;
     border-top: 1px darkgray solid;
     margin-bottom: 10px;
     width:50%;
     height: 1px;
}
/* POPUP FOR CHINESE LEARNING */

.popup-overlay {
	display: inline-block; /* hidden by default */
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0; /* everything gray */
	background: rgba(0,0,0,0.5);
	z-index: 1000;
	visibility: hidden;
	text-align: center;
}
.popup-window {
    background: white;
    padding: 80px;
    padding-top: 50px;
    width: 550px;
    margin: 100px auto;
    border: 1px orange solid;
    border-radius: 10px;
}
.popup-header {
	font-size: 25;
	font-weight: 800;
	text-align: center;
}
.popup-content {
	margin-top: 40px;
    margin-left: 50px auto;
    margin-right: 50px auto;
	margin-bottom: 20px;
	font-size: 25;
	text-align: center;
	width: 100%;
	font-weight: 100;
	color: black;
}
.popup-explanation {
    margin-left: 100px auto;
    margin-right: 100px auto;
   	margin-bottom: 30px;
	font-family: Verdana, sans-serif;
	font-size: 25;
	text-align: center;
	width: 100%;
	font-weight: 800;
}
.popup-button {
	display: inline-block;
	width: 200;
	text-align: center;
	border: 1px var(--deepred) solid;
	border-radius: 10px;
	cursor: pointer;
}

/* CAT IN MAIN MENU ON SIDE */ 

.main-menu-subcat, .main-menu-subcat a {
	font-size: 15px;
	font-weight: 100;
	color: var(--menu-cat-text);
	background-color: var(--menu-cat-back);
	padding-left: 1px;
	line-height: 25px;
	border-bottom: 1px white solid;
}
.main-menu-subcat.current-subcat {
	border-left: 1px var(--menu-page-border) solid;
}

/* PAGE IN MAIN MENU ON SIDE */

.main-menu-page, .main-menu-page a {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 100;
	color: var(--menu-page-text);
	background-color: var(--menu-page-back);
	padding-left:5px;
	line-height: 28px;
	border-bottom: 1px white solid;
	border-left: 1px var(--menu-page-border) solid;
}
.main-menu-page.current {
	color: var(--menu-page-cur-text);
	background-color: var(--menu-page-cur-back);
}

/* SEARCH FORM */

.search-container {
	border: 1px orange solid;
    border-radius: 5px;
	margin-top:50px;
	margin-left: 3px;
	width: calc(100% - 10px);
}
.search-header {
	background-color: orange;
	color: white;
	text-align: center;
	height: 25px;
	padding-top: 3px;
}
.search-field {
	margin:20px;
	width: calc(100% - 40px);
	background-color: #EEEEEE;
	height: 25px;
    font-size: 14px;
    border: 1px solid #f16314;
    border-radius: 5px;
    outline: none;
    color: #353551;
    transition: border 0.3s ease;
}
.search-field:focus {
	border-color: orange;
}
.search-button {
	width: calc(100% - 40px);
	margin:20px;
	text-decoration: none;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #F0F0F0;
	color: #f16314;
	border: 1px #f16314 solid;
	border-radius: 10px;
}

.search-result-label {
	margin-top: 3px;
	display: inline-block;
	color: #888888;
}

/* PAGE ITEMS */

.header {
	font-family: Verdana, sans-serif;
	font-size: 18px;
	font-weight: 800;
	margin: 0px;
	margin-top: 30px;
	color: var(--header-text);
}
.paragraph {
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	color: var(--paragraph-text);
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 17px;
	line-height: 24px;
}
.paragraph-chinese {
	margin: 0px;
	margin-top: 10px;
	padding-bottom: 0px;
	padding-right: 10px;
	font-family: Verdana, sans-serif;
	font-weight: 800;
	border-left: 1px darkgray solid;
	padding: 13px;
	margin-left: 10px;
	color: var(--deepred);
}
.paragraph-pinyin {
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	font-family: Verdana, sans-serif;
	border-left: 1px darkgray solid;
	padding: 13px;
	margin-left: 10px;
	color: var(--deepred);
}
.rad-chinese{
	display: inline-block;
	width: 25px;
	font-family: Verdana, sans-serif;
	color: var(--deepred);
	font-weight: 800;
	wdith: 30px;
}
.rad-chinese.wide {
	width: 100px;
}
.rad-dutch {
	display: inline-block;
	width: 400px;
	color: black;
	font-weight: 100;

}
.rad-dutch.small {
	width: 170px;
}
.response-normal {
	display: inline-block;
	color: black;
	font-weight: 100;
}
.response-chinese {
	display: inline-block;
	font-family: Verdana, sans-serif;
	font-weight: 100;
	color: var(--deepred);
	margin-left: 5px;
	margin-right: 5px;
}
.image-container {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.page-image {
	margin: 5px;
}
.scale10 { 	width: 10%; }
.scale20 { 	width: 20%; }
.scale30 { 	width: 30%; }
.scale40 { 	width: 40%; }
.scale50 { 	width: 50%; }
.scale60 { 	width: 60%; }
.scale70 { 	width: 70%; }
.scale80 { 	width: 80%; }
.scale90 { 	width: 90%; }
.scale100 { 	width: 100%; }

ul {
	list-style-type: square;
	margin-left: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
}
li {
	color: var(--list-text);
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 17px;
	line-height: 24px;
}
.subheader {
	font-family: Verdana, sans-serif;
	font-size: 16px;
	font-weight: 800;

	margin: 0px;
	margin-top: 20px;
	margin-bottom: 10px;
	color: var(--subheader-text);
}
.inlinecode {
	width: 100%;
	margin: 0px;
	padding: 10px;
	color: var(--inlinecode-text);
}
.train-image {
     margin-top: 20px;
     margin-bottom: 10px;
}
 
.pagebutton, .pagebutton a {
	text-decoration: none;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: orange;
	color: white;
	border-radius: 10px;
}
.inlinelinkcontainer {
	margin: 1px;
	padding: 1px;
}
.inlinelink {
	color: var(--link-text);
	background-color: var(--link-background);
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 10px;
	text-decoration: none;
     font-size: 14px;
	border: 1px var(--link-border) solid;
	margin-top: 1px;
	margin-bottom: 1px;
}
.inlinelink:hover {
	background-color: var(--link-text);
	color: var(--link-background);
}
.inline-table-link {
	color: var(--link-text);
}
.monospaced {
	margin: 0px;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #f5ffea;
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
	font-weight: 100;
}
.source-code {
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-weight: 100;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--source-code-back);
	color: var(--source-code-text);
	border-left: 1px var(--source-code-border) solid;
	border-right: 1px var(--source-code-border) solid;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 3px;
  white-space: pre-wrap;
  word-wrap: break-word; /* optional fallback */
  overflow-wrap: break-word; /* modern version */
}
.command-line {
	margin: 0px;
	margin-left: 20px;
	margin-right: 200px;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #000000;
	color: white;
	font-family: "Courier New", Courier, monospace;
	font-size: 11px;
	font-weight: 100;
}
.mark-attention {
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--attention-text);
	background-color: var(--attention-background);
	border: 1px black solid;
	border-radius: 10px;
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 24px;

}
.row-header {
	margin-top: 10px;
}
.table-header {
	background-color: orange;
	color: white;
	padding: 5px;
}
.term-container {
	margin-top: 5px;
	margin-bottom: 10px;
}
.term-label {
	display: inline-block;
	color: var(--explanatation-label);
	width: 180px;
	vertical-align: top;
	font-family: 'Roboto', sans-serif;
	font-weight: 800;
	font-size: 17px;
	line-height: 24px;

}
.term-explanation {
	display: inline-block;
	color: var(--explanatation-term);
	width: calc(100% - 180px);
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	font-size: 17px;
	line-height: 24px;

}
.color-container {
	display: inline-block;
	height: 20px;
	width: 20px;
}
.color-container.bordered {
	border: 1px gray solid;
}

.reversed {
	background-color: orange;
	color: white;
}
.click-button {
	padding: 10px;
	border: 1px gray solid;
	border-radius: 10px;
	background-color: #F0F0F0;
}
.click-button.selected {
	background-color: #00ff00;
}
.ring-button {
	border: 1px gray solid;
	border-radius: 50%;
	width: 20px;
	height: 20px;
}
.ring-button.black {
	background-color: black;
}
.ring-button.brown {
	background-color: brown;
}
.ring-button.red {
	background-color: red;
}
.ring-button.orange {
	background-color: orange;
}
.ring-button.yellow {
	background-color: yellow;
}
.ring-button.green {
	background-color: green;
}
.ring-button.blue {
	background-color: blue;
}
.ring-button.violet {
	background-color: violet;
}
.ring-button.gray {
	background-color: gray;
}
.ring-button.white {
	background-color: white;
}
.ring-button.gold {
	background-color: gold;
}
.ring-button.silver {
	background-color: silver;
}
.ring-value {
	color: blue;
	text-align: center;
}
.dashed-bordered {
	border: 1px red dashed;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* ERRORS */

.systemerror {
	margin: 10px;
	padding: 10px;
	background-color: red;
	color: white;
}

.unseen {
	background-color: white;
	color: white;
}
.row {
	margin-left: 10px;
	width: 100%;
}
.rowstretch {
	overflow: auto;
}
.row.medium {
	height:30px;
}
.rowitem {
	display: inline-block;
	color: var(--rowitem-text);
	vertical-align: top;
	margin: 0px;
	padding-left: 3px;
}
.rowitem.c1 { width: 8%; }
.rowitem.c2 { width: 16%; }
.rowitem.c3 { width: 24%; }
.rowitem.c4 { width: 32%; }
.rowitem.c5 { width: 40%; }
.rowitem.c6 { width: 48%; }
.rowitem.c7 { width: 56%; }
.rowitem.c8 { width: 64%; }
.rowitem.c9 { width: 72%; }
.rowitem.c10 { width: 80%; }
.rowitem.c11 { width: 88%; }
.rowitem.c12 { width: 96%; }

@media (max-width: 768px) {

     .wide-screen {
          display: none;
     }
     .phone-screen {
          display: block;
          width: 500;
     }
     .nav-links {
          position: absolute;
          top: 60px;
          left: 0;
          width: 100%;
          background-color: #FFD580;
          flex-direction: column;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
     }

     /* Toon menu bij vinkje */
     #menu-toggle:checked + .menu-icon + .nav-links {
          max-height: 300px;
     }

     .menu-icon {
          display: block;
     }

     .main-menu {
          display: none;
     }
     nav {
          display: none;
     }
     .top-name {
          left: 0px;
     }
     .container {
          margin-top: 2px;
          border-top: 1px darkgray solid;
     }
     .content {
          width: 100%;
          overflow-x: hidden;
          padding-left: 2px;
          padding-right: 2px;
          margin-left: 10px;
          border-left: 0px;
     }
     .paragraph {
          color: var(--small-paragraph-text);
     }
     .top-name {
          display: none;
     }
     .crumbpath {
          display: none;
     }
     .small-navmenu  {
          display: block;
     }
     .small-navmenu .small-navitem {
          display: block;
     }
     .source-code {
          overflow-wrap: break-word;
     }
     .phonemenu {
          display: inline-block;
     }
     .small-pages-header {
          display: inline-block;
     }
     .small-pages-page {
          display: inline-block;
     }
     .caroussel-image {
          display: none;
     }
     .hide-column-on-small {
          display: none;
     }
     .show-column-wide {
          width: 30% !important;
     }
}