HTML,BODY {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

HTML,
BODY,
BODY * {
	font-family: var(--stdfont);
	font-size: 15px;
	font-weight: 400;
	color: var(--grey90);
}

BODY {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 0px;
	grid-template-columns: calc(var(--sidebarwidth) + var(--sidebar-right-margin)) auto;
}

/********************************************************************
*
* main HTML tags
*
*********************************************************************/
H1 {
	font-size: 24px;
	font-weight: 600;
	line-height: var(--lineheighth1);
	color: var(--htmlheadercolor);
}

H2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 32px;
	color: var(--htmlheadercolor);
}

H2:first-child {
	margin-top: 20px;
}

H3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 25px;
	color: var(--htmlheadercolor);
}

STRONG {
	font-weight: 600;
}


A {
	color: var(--linkcolor);
	font-weight: 600;
	text-decoration: none;
	transition: color .5s ease;
  transition-property: color;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

A:hover {
	color: var(--linkhovercolor);
}

LI {
	margin-bottom: 5px;
}

UL.headerlist {
	list-style: none;
	margin: 0 0 0 25px;
	padding: 0;
}
UL.headerlist STRONG {
	font-size: 14px;
	font-weight: 600;
}
UL.headerlist STRONG::after {
	content: "\a";
	white-space: pre;
}


/********************************************************************
*
* sidebar and menu
*
*********************************************************************/
#sidebarwrapper {
	width: var(--sidebarwidth);
	background-color: var(--menubg);
}

#sidebarwrapper .header {
	vertical-align: center;
	overflow: auto;
	margin-top: 10px;
	margin-left: 10px;
}

#sidebarwrapper .header SPAN {
	display: table-cell;
	font-size: 25px;
	height: var(--sidebar-header-height);
	font-weight: 600;
	color: var(--sidebar-headercolor);
	vertical-align: middle;
}

#sidebarwrapper IMG {
	max-height: 100%;
}

#sidebarwrapper .header .tekst {
	line-height: var(--sidebar-header-height);
}


#sidebarwrapper UL,
#sidebarwrapper LI {
	list-style: none;
}	

#sidebarwrapper UL {
	padding: 0;
	margin: 0;
}

#sidebarwrapper A,
#sidebarwrapper UL.menusub1 A {
	display: block;
	margin: 2px 0 0 0;
	padding: 4px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	color: var(--menulinkcolor);
	background-color: transparent;
	
	transition: color .5s ease;
  transition-property: color;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

#sidebarwrapper A:hover,
#sidebarwrapper UL.menusub1 A:hover {
	color: var(--menuhovercolor);
}

#sidebarwrapper .currentitem A,
#sidebarwrapper UL.menusub1 .currentitem A
{
	color: var(--menuactivelinkcolor);
}

#sidebarwrapper UL.menusub1 {
	margin-left: 20px;
}

/********************************************************************
*
* content top
*
*********************************************************************/
#content-top {
	margin-left: calc(-1 * var(--sidebar-right-margin));
	width: calc( 100% + var(--sidebar-right-margin));
	height: 40px;
	border-bottom: 1px var(--contenttoplinecolor) solid;
}

/********************************************************************
*
* tables
*
*********************************************************************/

TABLE {
	margin-top: 20px;
	margin-bottom: 15px;
	border-spacing: 0;
  border-collapse: collapse;
}



TH {
	background-color: var(--tableheaderbg);
  font-weight: bold;
  font-size: inherit;
  text-align: left;
  vertical-align: middle;
  height: 50px;
  border: 0;
}

TR:nth-child(even) {
	background-color: var(--tableevenbg);
}
TR:nth-child(odd) {
	background-color: var(--tableoddbg);
}

TD {
	text-align: left;
	vertical-align: top;
}


	
.listingtable,
.listingtable TR:nth-child(even),
.listingtable TR:nth-child(odd)
{
	border: 0;
	background-color: inherit;
}

.listingtable { 
	margin: 0;
}

.listingtable,
.listingtable TR:nth-child(even),
{
	background-color: inherit;
}


.endpointtable {
	width: 100%;
}

.endpointtable TD:first-child {
	width: 75px;
	text-align: right;
	font-weight: 600;
	padding-right: 10px;
}

.endpointtable .GET 		{	color: var(--endpointgetcolor); }
.endpointtable .POST 		{	color: var(--endpointpostcolor); }
.endpointtable .PUT 		{	color: var(--endpointputcolor); }
.endpointtable .PATCH 	{	color: var(--endpointpatchcolor); }
.endpointtable .DELETE 	{	color: var(--endpointdeletecolor); }

.endpointtable TR {
	cursor: pointer;
}

.endpointtable TR {
	transition: background-color 1s ease;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.endpointtable TR TD {
	transition: color .5s ease;
  transition-property: color;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.endpointtable TR:hover {
	background-color: var(--endpointhoverbgcolor);
}

.endpointtable TR:hover TD:nth-child(2) {
	color: var(--endpointhovercolor);	
}


/********************************************************************
*
* main content layout
*
*********************************************************************/
#content-body {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 0px;
	grid-template-columns: calc(var(--cleftcalcwidth) + var(--cleftmargins)) auto;
}

#content-left {
	width: var(--cleftcalcwidth);
}

#content-right {
	margin-top: var(--lineheighth1);
	margin-right: var(--sidebar-right-margin);
}


/********************************************************************
*
* several content classes
*
*********************************************************************/
#content-left > DIV,
#content-right > DIV {
	margin-bottom: 20px;
}

.firstpara {
	font-size: 15px;
	font-weight: 500;
}

.firstpara * {
	font-size: inherit;
}

.dashedline {
	border: 1px dashed black;	
}


.dottedline {
	border-top: 1px dotted black;	
	border-bottom: 0;
}

.fullwidth {
	width: 100%;
}

/********************************************************************
*
* object overviews
*
*********************************************************************/
.attributes {
	margin-bottom: 50px;
}

.attribsub {
	margin-top: 10px;
}

.attributes,
.attribsub,
.attributes LI {
	list-style: none;
}	

.attributes,
.attributes  {
	padding: 0;
	margin: 0;
}

.attributes LI {
	padding: 10px 0px 10px 15px;
	border-top: 1px dotted var(--attributebordercolor);
	font-size: 14px;
}

.attributes > LI {
	padding-right: 5px;
}

/*.attribsub LI {
	border-left: 1px dotted var(--objectbordercolor);
	border-radius: 10px;
}*/

.attributes .name {
	font-weight: 600;
	font-size: inherit;
}

.attributes .atype {
	margin-left: 20px;
	font-size: inherit;
}

.attributes .description {
	display: block;
	margin-top: 3px;
	font-size: inherit;
}

.requireattr {
	display: inline-block;
	float: right;
	font-size: inherit;
	color: var(--requiredcolor);
}

.definedattr {
	display: inline-block;
	float: right;
	font-size: inherit;
	color: var(--definedcolor);
}

.minmax {
	display: inline-block;
	font-size: inherit;
	margin-left: 10px;
}
	


/********************************************************************
*
* informational blocks
*
*********************************************************************/
information-block {
	display: none;
}

.informationblock {
	border: 1px dotted var(--infoblockheaderbgcolor);
	border-radius: 10px;
	max-width: var(--crightwidth);
}

.informationblock > div,
.informationblock pre 
{
	padding: 5px;
	margin-top: 0;
}

.informationblock PRE {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.informationblock .header {
	font-size: 15px;
	font-weight: 600;
	line-height: 30px;
	border-radius: 10px 10px 0 0;
	color: var(--infoblockheadercolor);
	background-color: var(--infoblockheaderbgcolor);
}

.informationblock TABLE {
	margin-top: 5px;
}

.informationblock TABLE TR {
	transition: background-color 1s ease;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.informationblock TABLE TR:hover {
	background-color: var(--infoblockhoverbgcolor);
}

.informationblock .active TD {
	background-color: var(--infoblockhoverbgcolor);
}
.informationblock .active TD:nth-child(2) {
	color: var(--menuactivelinkcolor);
}

.informationblock.fullwidth {
	width: 100%;
	max-width: 100%;
}