body, html {
    height: 99%;
	font-family:'Oswald', sans-serif; /* oxygen */
	font-size:14pt;
	cursor:default;
	
} 
td {
	vertical-align:middle;
}
::placeholder {
  color: var(--placeholder);
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--placeholder);
}
input[type=file] {
  overflow:hidden;cursor:default;background:var(--background-tertiary);border:3px solid var(--border-tertiary);border-radius:10px;padding-right:10px;color:var(--color-tertiary);
  max-width: 100%;
}
input[type=file]::file-selector-button {
	overflow:hidden;cursor:pointer;margin:10px 5px 10px 5px;background:var(--background);border:3px solid var(--border);border-radius:16px;height:36px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color);text-align:center;
}

input[type=file]::file-selector-button:hover {
  background: var(--background-secundary);
}



.title { font-weight:700; font-size:16pt; }

.testPrimary {
	position:relative;overflow:hidden;cursor:pointer;max-width:80%;margin:10px 5px 10px 5px;background:var(--background);border:3px solid var(--border);border-radius:16px;height:24px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color);width:100px;line-height:28px;text-align:center;
}
.testSecundary {
	position:relative;overflow:hidden;cursor:pointer;max-width:80%;margin:10px 5px 10px 5px;background:var(--background-secundary);border:3px solid var(--border-secundary);border-radius:16px;height:24px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color-secundary);width:100px;line-height:28px;text-align:center;
}
.testTertiary {
	position:relative;overflow:hidden;cursor:pointer;max-width:80%;margin:10px 5px 10px 5px;background:var(--background-tertiary);border:3px solid var(--border-tertiary);border-radius:16px;height:24px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color-tertiary);width:100px;line-height:28px;text-align:center;
}
.testInactive {
	position:relative;overflow:hidden;cursor:pointer;max-width:80%;margin:10px 5px 10px 5px;background:var(--background-inactive);border:3px solid var(--border-inactive);border-radius:16px;height:24px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color-inactive);width:100px;line-height:28px;text-align:center;
}
/* GRID */
.totalContainer { width:100%; height:100%; margin:0px; box-sizing:border-box; display:flex; flex-direction:row; overflow:hidden; }
.menuContainer { width:150px; height:100%; background:var(--background);border-right:3px solid var(--border);color:var(--color); }
.submenuContainer { width:210px; background:var(--background);border-right:3px solid var(--border);color:var(--color); }
.mainContainer { flex:1; width:100%; height:100%;overflow:hidden; }
.contentmain { width:100%; height:100%; margin:0; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; 
background:white;color:var(--color-tertiary);}
.headerContainer {padding:5px;background:var(--background-secundary);color:var(--color-secundary);width:99%; height:140px;}
.fixedcontent { width:99%;  }
.scrollcontent { flex:1; width:calc(100vw - 184px); height:calc(100vh - 301px); overflow-y:scroll; }

/* LINKS */
.menuIconLocation { float:left;width:24px;} 
.menuTitleLocation { padding:25px 0px;text-align:center; }
.menuitem { padding:10px 15px;line-height:16px;border-bottom:1px dotted var(--border);cursor:pointer }
.menuitem:hover { background:var(--background-secundary);color:var(--color-secundary); }
.menuitem:last-child { border-bottom:0px }
.submenuitem { padding:10px 15px;white-space:nowrap;line-height:16px;border-bottom:1px dotted var(--border);cursor:pointer }
.submenuitem:hover { background:var(--background-secundary);color:var(--color-secundary); }
.submenuitem:last-child { border-bottom:0px }
.helpitem { padding:10px 15px;line-height:16px;border-bottom:1px dotted var(--border);cursor:pointer }
.helpitem:hover { background:var(--background-secundary);color:var(--color-secundary); }
.helpitem:last-child { border-bottom:0px }


/* MAIN */
.rowclick { cursor:pointer; }
.box1 { padding:0px 10px }
.butbox { position:relative;overflow:hidden;margin:0px 0px;padding:5px 5px; }
.icon { color:var(--color-secundary);cursor:pointer;padding:0px 5px;font-size:17pt}
.iconAlt { color:var(--color-inactive);cursor:pointer;padding:0px 5px;font-size:17pt}
.iconLarge { color:var(--color-secundary);font-weight:700; font-size:22pt;cursor:pointer; }
.iconLargeAlt { color:var(--color-inactive);font-weight:700; font-size:22pt;cursor:pointer; }
.select-style { position:relative;overflow:hidden;cursor:pointer;background:var(--background-input);border:3px solid var(--border-input);border-radius:16px;height:40px;padding:5px 10px;color:var(--color-input);cursor:pointer; }
.select-style-inactive { position:relative;overflow:hidden;cursor:default;background:var(--background-inactive);border:3px solid var(--border-inactive);border-radius:16px;height:40px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color-input);cursor;default; }


#loader {display:none;position:absolute;z-index:9999;top:50%;left:50%;margin-top:-24px;margin-left:-24px;overflow:hidden;width:32px;height:32px;
border: 12px solid #C1E0F4; /* Light grey */
border-top: 12px solid #fa0; /* Blue */
border-radius: 50%;animation: spin 2s linear infinite;-webkit-animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

/* POPUPS */
.logonLocation { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
.logonContainer { position:relative;overflow:hidden;height:100%;color:var(--color-secundary);text-align:center;background:var(--background-secundary);border-style:solid; border:3px solid var(--border-secundary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow); }
.errorLocation { position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }
.errorContainer { position:relative;overflow:hidden;height:100%;color:var(--color-tertiary);text-align:center;border-style:solid; background: var(--background-tertiary); border:3px solid var(--border-error); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow); max-width: calc(100vw - 20px);  }
.infoLocation { position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }
.infoContainer { position:relative;overflow:hidden;color:var(--color-tertiary);text-align:left;background:var(--background-tertiary);border-style:solid; border:3px solid var(--border-tertiary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow);  max-width: calc(100vw - 20px); }
.masterContainer { position:relative;overflow:hidden;color:var(--color-tertiary);text-align:left;background:var(--background-tertiary);border-style:solid; border:3px solid var(--border-tertiary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow);  max-width: calc(100vw - 20px); }
.keuzeContainer { position:relative;overflow:hidden;color:var(--color-tertiary);text-align:left;background:var(--background-tertiary);border-style:solid; border:3px solid var(--border-tertiary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow);  max-width: calc(100vw - 20px); }
.conceptLocation { position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }
.conceptContainer { position:relative;overflow:hidden;height:100%;color:var(--color-tertiary); text-align:left;background:var(--background-tertiary);border-style:solid; border:3px solid var(--border-tertiary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow); width:670px; }
.codeLocation { position: absolute; top: 1%; left: 1%; bottom: 1%; right: 1%; }
.codeContainer { position:absolute;top:20px;left:20px;bottom:20px;right:20px;text-align:left;color:var(--color-tertiary);background:var(--background-tertiary);border-style:solid; border:3px solid var(--border-tertiary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow); }
.debugLocation { position: absolute; top: 1%; left: 1%; bottom: 1%; right: 1%; }
.debugContainer { position:absolute;top:20px;left:20px;bottom:20px;right:20px;text-align:left;color:var(--color-tertiary);background:var(--background-tertiary);border-style:solid; border:3px solid var(--border-tertiary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow);overflow:scroll;}
.emailLocation { position:absolute;top:10%;left:10%;bottom:10%;right:10%; }
.emailContainer { position:absolute;text-align:left;color:var(--color-tertiary);background:var(--background-tertiary);border-style:solid; border:3px solid var(--border-tertiary); border-radius:16px; padding:5px 5px; box-shadow:0px 0px 15px var(--shadow); }

.oInfoText 	{ max-height: calc(100vh - 275px); overflow-y:auto; }
.oErrorText { max-height: calc(100vh - 275px); overflow-y:auto; }


/* BUTTONS */
.oButton {position:relative;overflow:hidden;cursor:pointer;margin:10px 5px 10px 5px;background:var(--background);border:3px solid var(--border);border-radius:16px;height:24px;padding:5px 10px;box-shadow:5px 5px 10px var(--shadow);color:var(--color);width:150px;line-height:28px;text-align:center;
}
.oButton:hover {
  background: var(--background-secundary);
  border-color: white;
}
.oGreyButton {position:relative;overflow:hidden;cursor:default;margin:10px 5px 10px 5px;background:var(--background-inactive);border:3px solid var(--border-inactive);border-radius:16px;height:24px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color-inactive);width:150px;line-height:28px;text-align:center;
}
.oAdminButton {position:relative;overflow:hidden;cursor:pointer;margin:10px 5px 10px 5px;background:var(--background);border:3px solid var(--border-admin);border-radius:16px;height:24px;padding:5px 10px;box-shadow:0px 0px 15px var(--shadow);color:var(--color);width:150px;line-height:28px;text-align:center;
} 
.oDark {position:relative;overflow:hidden;cursor:pointer;margin:10px 5px 10px 5px;background:var(--background);border:3px solid var(--border);border-radius:10px;height:24px;padding:5px 10px;color:var(--color);}
.oText { position:relative;overflow:hidden;cursor:default;margin:10px 0px 10px 0px;background:var(--background-tertiary);border:3px solid var(--border-tertiary);border-radius:10px;height:24px;padding:5px 10px;color:var(--color-tertiary);}
.oInput { position:relative;overflow:hidden;cursor:text;background:var(--background-input);border:3px solid var(--border-input);border-radius:10px;height:24px;padding:5px 10px;color:var(--color-input);} 


/* TABLES */
.tableHeader {
	background:var(--background);
	color:var(--color);
	border-bottom:1px solid var(--border);
	font-weight:700;
	padding:10px;
}
.tableRowAlt {
	color:var(--color-secundary);
	background:white;
	border-bottom:1px solid white;
}
.tableRowAlt:hover {
	background:var(--background-secundary);
}
.tableRow {
	color:var(--color-tertiary);
	background:var(--background-tertiary);
	border-bottom:1px solid var(--border-tertiary);
}
.tableRow:hover {
	background:var(--background-secundary);
}
.mButton {
	font-size:40px;
	display:block;
	cursor:pointer;
	color:var(--background);
}
.mButton:hover {
	color:var(--background-secundary);
}

.mIcon {
	font-size:40px;
	display:block;
	cursor:pointer;
	color:var(--background);
}
.mIcon:hover {
	color:white;
}
.mButtonActive {
	font-size:40px;
	display:block;
	cursor:pointer;
	color:white;
}
.mButtonActive:hover {
	color:white;
}
.mButtonContainer {position:relative;overflow:hidden;cursor:pointer;margin:10px 5px 10px 5px;background:white;border:3px solid var(--border);border-radius:16px;height:24px;padding:5px 10px;box-shadow:5px 5px 10px var(--shadow);color:var(--color);width:150px;line-height:28px;text-align:center;font-size:40px;cursor:pointer;color:var(--background);
}
.mButtonContainer:hover {
  background: var(--background-secundary);
  color:white;
  border-color: white;
}
.mButtonContainerActive {position:relative;overflow:hidden;cursor:pointer;margin:10px 5px 10px 5px;background:var(--background);border:3px solid var(--border);border-radius:16px;height:24px;padding:5px 10px;box-shadow:5px 5px 10px var(--shadow);color:var(--color);width:150px;line-height:28px;text-align:center;font-size:40px;cursor:pointer;color:white;border-color:white;
}



#logonOverlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: var(--logon-overlay);z-index: 2;}
#errorOverlay {position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--container-overlay);z-index: 5;}
#infoOverlay {position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--container-overlay);z-index: 4;}
#codeOverlay {position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--container-overlay);z-index: 4;}
#conceptOverlay {position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--container-overlay);z-index: 3;}
#debugOverlay {z-index: 4;}
.codeText {position:absolute;top:10px;left:10px;bottom:10px;right:10px;padding:0px;spacing:0px;overflow:hidden;}
.codeLeft {float:left;height:100%;width:33%;overflow:scroll;}
.codeCenter {display:inline-block;height:100%;width:100%;overflow:scroll;}
.codeRight {float:right;height:100%;width:33%;overflow:scroll;}
.debugScreen {float:left;height:100%;width:100%;overflow:scroll;}


.tdspace { text-align:left;padding:10px; }
.inputspace { width:300px; }
.selectspace { width:326px; }

/*
    .lijst-container {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
    }
	*/
    .keuze-lijst {
      min-height: 30px;
      //border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      //background-color: var(--background-secundary);
    }
    .keuze-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      //background-color: var(--background-tertiary);
      //cursor: move;
      border-radius: 4px;
    }
    .invoer-lijst {
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .invoer-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .subgroup-lijst {
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .subgroup-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px;
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .group-lijst {
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .group-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px;
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
	.invoer-container {
      margin-top: 20px;
    }


    .invoer-loglijst {
	  margin-left: 8px;
      padding: 0px;
      list-style-type: none;
	  font-style: normal;
      border-bottom: 1px dashed var(--border);
    }
    .subgroup-loglijst {
      padding: 0px;
      list-style-type: none;
	  font-style: italic;
      /* border-bottom: 1px dashed var(--border); */
    }
    .group-loglijst {
      padding: 0px;
      list-style-type: none;
      background-color: var(--background-tertiary);

      border-bottom: 1px solid var(--border);
	  font-weight: 700;
    }


    .maandag-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .maandag-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }

    .dinsdag-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .dinsdag-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .woensdag-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .woensdag-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .donderdag-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .donderdag-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .vrijdag-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .vrijdag-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .zaterdag-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .zaterdag-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .zondag-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .zondag-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }
    .objecten-lijst {
	  margin: 0px;
      min-height: 30px;
      border: 1px solid var(--border-tertiary);
      padding: 2px;
      list-style-type: none;
      background-color: var(--background-secundary);
    }
    .objecten-lijst li {
      margin: 2px;
      padding: 2px;
	  min-height: 35px; 
      background-color: var(--background-tertiary);
      cursor: move;
      border-radius: 4px;
    }