/** BASIC */

body {
	margin: 0%;
	padding: 0%;
	background: #FFFFFF;
	/* url(images/homepage01.gif) repeat-x left top;*/
}

/** FORMS */

form {
	margin: 0%;
	padding: 0%;
}

/** HEADINGS */

h1, h2, h3, h4, h5, h6 {
	margin: 0%;
}

h3 { 
    display: block;
    font-size: 1.17em;
    font-weight: bold;
}

h4 { 
    display: block;
	font-size: 1.08em;
    font-weight: bold;
}

/** TEXTS */

body, th, td, input, textarea, select, button {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #4C4C4C;
}

p, blockquote, ul, ol, dl {
	margin-top: 0%;
	margin-bottom: 1em;
	text-align: justify;
}

.text1 {
	letter-spacing: -1px;
	font-size: 1.8em;
	font-weight: normal;
	color: #004382;
}

.text2 {
	font-size: 0.8em;
	font-weight: normal;
	color: #3A9BDF;
}

.text3 {
	font-size: 0.7em;
	color: #F7941D;
}

.text4 {
	letter-spacing: -1px;
	font-size: 1.5em;
	font-weight: normal;
	color: #004382;
}

.text5 {
	margin-bottom: 1em;
	font-size: 0.75em;
	font-weight: normal;
	color: #3A9BDF;
}

.text6 {
	font-size: 1.5em;
	font-weight: normal;
	color: #3A9BDF;
}

.text7 {
	color: #004382;
}

.text8 {
	text-align: right;
}

.text9 {
	text-align: center;
	font-size: 0.6em;
	color: #7D7D7D;
}


.text10 {
	letter-spacing: -1px;
	font-size: 3em;
	font-weight: normal;
	color: #004382;
}

.text11 {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #4C4C4C;
}

.text12 {
	text-align: justify;
	font-size: 9px;
	color: #7D7D7D;
}

.text20 {
	color: #D1282E; /* rood */
}

.text21 {
	color: #7A7A7A; /* grijs */
}

.text22 {
	color: #F5C201; /* orange */
}

.text23 {
	color: #00B050; /* groen */
}

.text24 {
	color: #3A9BDF; /* light blue */
}

.text25 {
	font-size: 1.5em;
	font-weight: normal;
	color: #3A9BDF;
  vertical-align: middle;
  display: inline-block;
}


/* start - table */

table, th, tr, td {
  border: 0px solid;
  border-collapse: collapse;
}

tr {
 /* height: 70px;
  max-height: 70px;
  overflow: hidden;
  */
}

/** LISTS */

.list1 {
	margin-left: 0%;
	padding-left: 0%;
	list-style: none;
	line-height: 1.2em;
}

.list1 li {
	padding-left: 0.7em;

	background: url(images/homepage14.gif) no-repeat 0px 7px;
}

/** LINKS */

a {
	color: #0074D6;
}

a:hover {
	text-decoration: none;
}

.link1 {
	text-align: center;
	text-decoration: none;
	color: #5F5F5F;
}

.link1:hover {
	text-decoration: underline;
}

.link2 {
	text-decoration: none;
	font-size: 0.8em;
	font-weight: bold;
	color: #494949;
}

.link3 {
	padding-left: 0.6em;
	background: url(images/homepage13.gif) no-repeat left center;
}

.link4 {
	text-decoration: none;
	color: #FFFFFF;
}

.link4:hover {
	text-decoration: underline;
}

.link5 {
	text-align: left;
	text-decoration: none;
	color: #5F5F5F;
}


/** STYLES */

.actionbuttonimg{
	border: 0px;
	margin: 0% 2%;
}

.style1 {
}

.style1 a {
}

.style1 a:hover {
}

/** BACKGROUNDS */

.bg1 { background: url(images/homepage08.gif) no-repeat left top; }
.bg2 { background: url(images/homepage10.gif) repeat-x left bottom; }
.bg3 { background: url(images/homepage03.gif) repeat-y left top; }
.bg4 { background: url(images/homepage17.gif) repeat-y left top; }
.bg5 { background: url(images/homepage18.gif) no-repeat left top; }
.bg6 { background: url(images/homepage19.gif) no-repeat left top; }

/** MISC */

.align-justify { text-align: justify; }
.align-right { text-align: right; }
.align-right-form { text-align: right; padding-right: 1.25em; font-weight: bold; }


img { border: none; }

.img1 {
	float: left;
	margin: 3px 15px 0px 0px;
}

.img2 {
	float: right;
	margin: 3px 0px 0px 15px;
}

/*
hr { display: none; }
*/
.hr1 {
	height: 1px;
}

.button {
	display: inline-block;
	font-size: 0.83em;
  text-transform: uppercase;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
/*	font: 14px/100% Arial, Helvetica, sans-serif;*/
	padding: 1%;
  width:30%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1%;
  margin-top:1%;
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}


.calbutton {
  width: 100%;
  height: 100%;
  vertical-align: top;
  text-align: left;
  background: white;
  border: 0px;
  
}

.normalbutton {
	background-color: #FFFFFF;
	color: #0282CF;
	border: 1px solid #0282CF;
	border-radius: 0;
	-webkit-appearance: none;
	width: 33%;
 /* margin: 1%;*/
  	display:block;
}

.menubutton {
  width: auto;
  background: none;
  display: block;
  font-size: 16px;
  border: none;
  
}

.cfabutton {
	background-color: #0282CF;
	color: #FFFFFF;
	border: 1px solid #0282CF;
	border-radius: 0;
	-webkit-appearance: none;
	width: 45%;
  margin: 1%;
}

.normalbutton:hover {
	background: #0282CF;	/*#f47c20; */
	color: #ffffff; /*#3A9BDF;*/
}

.normalbutton:active {
	background: #00B050;	/*#f47c20; */
	color: #ffffff; /*#3A9BDF;*/
}

.longbutton {
	background-color: #FFFFFF;
	color: #0282CF;
	border: 1px solid #0282CF;
	border-radius: 0;
	-webkit-appearance: none;
	width: 95%
}

.longbutton:hover {
	background: #0282CF;	/*#f47c20; */
	color: #ffffff; /*#3A9BDF;*/
}

.longbutton:active {
	background: #00B050;	/*#f47c20; */
	color: #ffffff; /*#3A9BDF;*/
}




textarea#styled {
	width: 95%;
	height: 5em;
	border: 1px solid #000;
	padding: 5px;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

input#styled {
	width: 80%;
	border: 1px solid #000;
	padding: 5px;
}

/* divs */
.container {
/*	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;*/
	position: relative;
	z-index: 1;
}

.block1, .item2{
	width: 100%; 
	margin: 2% 5%;
	/*padding: 2% 5%;*/
	padding: 0%;
	border: 0px solid #3A9BDF;
	overflow: auto;
	vertical-align: top;
}
.l_form{
  position: relative;
  z-index: -1;
	width: 86%; 
	margin-left: auto;
	margin-right: auto;
	/*padding: 2% 5%;*/
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 2%;
	padding-right: 2%;
	/* 2%;*/
	border: 1px solid #c2c2d6;
	overflow: hidden;
	vertical-align: top;
}

.commblock{
	position: relative;
  z-index: -1;
  width: 90%; 
	margin: 2%;
/*	margin-top: 5%;*/
	margin-left: auto;
	margin-right: auto;
	/*padding: 2% 5%;*/
	padding: 0%;
	border: 0px solid #3A9BDF;
	overflow: hidden;
	vertical-align: top;
}

.container3{
	width: 90%; 
	margin: 2%;
	margin-top: 3%;
	margin-left: auto;
	margin-right: auto;
	/*padding: 2% 5%;*/
	padding: 0%;
	border: 0px solid #3A9BDF;
	overflow: auto;
	vertical-align: top;
}


.icon1 {
	width: 2%;
	height: 2%;
	margin: 1%;
	padding: 1%;
	border: 1px solid black;
	/*float: right;*/
	display: block;
}

.l_prime, .item2{
	visibility: visible;
	background: #FFFFFF;
	display: table;
	width: 90%;
	opacity: 1;
	transition: opacity 1s ease-in-out 0s;
}


.l_alternative {
	background-color: green;
}

.l_highlight {
	background-color: blue;
}

.table {
	display: table;
	width: 100%;
}
.row {
	display: table-row;
	border-bottom: 1px solid;
	padding: 5% 0%;
}
.cell {
	display: table-cell;
	padding: 0% 0%;
}
.cell2{
	column-span: 2;
}
.min5h{
	padding-left: 5%;
	padding-right: 5%;
}
.buttoncontainer1{
	margin: 3% 0%;
	padding: 0%;
	width: 100%;
	display: block;
}

.buttonplacer1{
	bottom: 10px;
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
	padding: 0%;
	width: 100%;
	display: block;

}

.item2f{
	background-color: #3A9BDF;
	margin: 0%;
	padding: 2% 5%;
	border: 0px;
	width: 30%;
	height: 100%;
	display: table-cell;
	color: #e3f1fa;
	text-align: center;
	vertical-align: baseline;
}
.currentvalue{
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 5em;
	color: #e3f1fa;


}
.container2 {
	margin: 0%;
	padding: 0%;
	border: 0px;
	width: 100%;
	display: table-row;
	table-layout: fixed;
}



.spacer {
	margin-top: 10%; 
}

.logox {
  background-color: white;
  display:inline;
  width: 10%;
}

.mainnavbar {
    position: fixed;
	top: 0;
  height: 40px;
	width: 100%;
	/*height: 10%;*/
	background-color: white; /*#0282CF*/
	color: #0282CF;
  display: block;
  padding: 5px 5px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px #3A9BDF;
}

.mainnavbar ul.nav1 {
  display:inline-block;
    
  align-items: center;
  width: 80%;
  vertical-align: middle;
/*  padding: auto;*/
}
li.nav1 {
  list-style: none;
  LETTER-SPACING: 1px; 
	COLOR: #555; 
	TEXT-DECORATION: none; 
/*  padding: auto;*/
  margin-left: 10px;
  margin-right: 10px;
  display:inline-block;
}
a.nav1 {
  text-decoration: none;
  font-size: 1.2em;
	font-weight: normal;
	color: #3A9BDF;
}

.systembar {
  position: relative;
  display: block;
  width: 100%;
  background-color: #ffffe0;
  border-color: black;
  border: 1px 0px 1px 0px;
  margin: 70px 0px 10px 0px;
  padding: 5px 0px 5px 30px;
  
} 
  
.altnavbar {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	/*height: 10%;*/
	background-color: #FFFFFF;
	color: #0282CF;
	border: 1px solid #0282CF;
}

.headerbar {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	width: 96%;
	background-color: #FFFFFF;
	color: #0282CF;
	border: 1px solid #0282CF;
	display: none;
}


.menux {
	display: none;
    position: fixed;
	top: 3em;
	width: 100%;
	height: 100%;
	background-color: white;
	color: darkgray;
	/*-webkit-filter: blur(5px);
	filter: blur(5px);
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);*/
	opacity:0.9;
}


.menub {
	/*top: 10%;*/
	display: none;
    position: fixed;
	top: 2.8125em;
	width: 100%;
	height: 100%;
	/*background-color: white;*/
	color: darkgray;
/*	-webkit-filter: blur(0px);
	opacity:1.0;*/
}



.footer {
	margin-top: 6em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;
	padding-bottom: 1em;
	width: 75%;
	height: 3em;
	background-color: white;
}


LI.actionl{
list-style-type: none;
	 PADDING-LEFT: 11px; PADDING-RIGHT: 11px; vertical-align: middle;   BORDER-BOTTOM: #C6C6C6 1px solid;
/*BACKGROUND: #e7e6e6;
BORDER-BOTTOM: #fff 1px solid; BORDER-LEFT: #fff 1px solid;

*/

}
UL.actionl {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING: 0px;
}


.nav3 {
	width: 100%;
		padding: 0%;
		margin: 0%;
	display: block;
	border: 0px solid red;
}
UL.nav3 {
	PADDING: 0%; 
	TEXT-TRANSFORM: uppercase; 
	LIST-STYLE-TYPE: none; 
	MARGIN: 0%; 
	WIDTH: 100%; 
	DISPLAY: block;  
	/*FLOAT: left;*/ 
	LIST-STYLE-IMAGE: none;
	border: 0px;
}
.actionl  {
	PADDING: 5% 0%; 
	MARGIN: 0%; 
	border: 0px;
	border-bottom: 1px solid;
}
.action2  {
	PADDING: 5% 0%; 
	MARGIN: 0%; 
	border: 0px;
	border-bottom: 1px solid;
	width: 15%;
}
UL LI.nav3  {
	width: 100%;
	PADDING: 5% 0%; 
	MARGIN: 0%; 
	DISPLAY: block;
	border: 0px;
	border-bottom: 1px solid;
}
UL LI A.nav3 {
	border: 0px;
	/*BORDER-BOTTOM: medium 1px; */
	/*BORDER-LEFT: #fafafa 1px solid;*/ 
	PADDING: 0%; 
	TEXT-TRANSFORM: uppercase; 
	MARGIN: 0%; 
	WIDTH: 100%; 
	DISPLAY: block; 
	LETTER-SPACING: 1px; 
	COLOR: #555; 
	/*BORDER-RIGHT: #dadada 1px solid;*/ 
	TEXT-DECORATION: none; 
}
.nav3 UL LI A:hover {
	COLOR: #326ea1
}
.nav3 UL LI A:active {
	COLOR: #326ea1
}

/*
.nav1 {
	PADDING:0px; 
	CLEAR: both; 
}
UL.nav1 {
	PADDING: 0px; 
	TEXT-TRANSFORM: uppercase; 
	LIST-STYLE-TYPE: none; 
	MARGIN: 0%; 
	WIDTH: 100%; 
	DISPLAY: inline-block;
	LIST-STYLE-IMAGE: none;
}
UL LI.nav1 {
	PADDING: 0%; 
	MARGIN: 0px;
	DISPLAY: inline-block; 
	width: 80%; 
	display:none;
}

UL LI.nav1b {
	MARGIN: 0px; 
	PADDING: 0px; 
	DISPLAY: inline-block;
	width: 10%;
}

UL LI A.nav1 {
	BORDER-BOTTOM: medium none; 
  */
	/*BORDER-LEFT: #fafafa 1px solid;*/ 
/*	PADDING-BOTTOM: 0%; 
	PADDING-TOP: 0%;
	TEXT-TRANSFORM: uppercase; 
	MARGIN: 0%; 
	WIDTH: 100%; 
	DISPLAY: block; 
	FONT: bold 0.8em/3em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif; 
	FLOAT: left; 
	LETTER-SPACING: 1px; 
	COLOR: #3A9BDF; 
	BORDER-left: white 2px solid; 
	TEXT-DECORATION: none;  
	text-align: center;
}
UL LI A:hover.nav1 {
	COLOR: #326ea1
}
UL LI A:active.nav1 {
	COLOR: #326ea1
}
UL LI#current A.nav1 {
	BACKGROUND: url(nav-current.jpg) #dbdbdb repeat-x
}
*/
/*UL LI.mainmenuselected {
	background: white;  /*#3A9BDF*/
/*	color: #3A9BDF;
	display: inline-block;
}
*/



/*

form {
	display: block;
	background-color: #e3f1fa; */
	/*width: 100%;*/
  /*
	margin: 0%;
}
*/
label {
    display: inline-block;
    margin: 0%;
    margin-top: 4%;
    /*width: 70%;*/

}
label>span {
    float: left;
    width: 96%;
    text-align: left;
	padding-left: 2%;
	padding-right: 2%;
    margin-top: 0px;
	display: block;
	/*border: 1px solid black;*/
/*	font-weight: normal;
	color: #3A9BDF;*/
	margin-left: auto;
	margin-right: auto;
	
	font-size: 1em;
	color: #F7941D;
	 font-size: 1.17em;
    font-weight: bold;
}


input[type='text'], input[type='email'], input[type='date'], input[type='time'], input[type='number'], textarea, select{
    color: #555;
    width: 100%;
    padding: 3px 0px 3px 5px;
 /*   margin: 1% 2% 2% 2%;*/
	border: 1px solid #e5e5e5;
    background: #fbfbfb;
    height: 25px;
    line-height:15px;
    outline: 0;
     margin-left: auto;
    margin-right: auto;
    font-size: 1em;
    -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;

}

input[type="submit"]{
	PADDING-BOTTOM: 0px; 
	TEXT-TRANSFORM: uppercase; 
	MARGIN: 0px; 
	margin-left: auto;
	margin-right: auto;
	DISPLAY: block; 
	FONT: bold 0.8em/3em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	 LETTER-SPACING: 1px; 
	 PADDING-TOP: 0px; 
	 text-align: center; 
}
/*
button{
  	PADDING-BOTTOM: 0px; 
	TEXT-TRANSFORM: uppercase; 
	MARGIN: 0px; 
	margin-left: auto;
	margin-right: auto;
	DISPLAY: block; 
	FONT: bold 0.8em/3em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	 LETTER-SPACING: 1px; 
	 PADDING-TOP: 0px; 
	 text-align: center; 
}
*/

textarea{
    height:80px;
    padding: 5px 0px 0px 5px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
      -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;

}

/*select {
    appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 90%;
    line-height: 15px;
    height: 30px;
}
*/
.sprintjump{
	background: transparent;
	border: none;
	width: auto;
    font-weight: normal;
    font-size: 1.5em;
    color: #3A9BDF;
    border-radius: 0;
	-webkit-appearance: none;
	      -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

.widthchart {
width: 100%;
margin-left: auto;
margin-right: auto;

}

.smallchart {
width: 50%;
margin-left: auto;
margin-right: auto;
display: inline-block;


}

.button2 {
	font-size: 0.83em;
	width: 80%;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	padding: 1%;
	-webkit-appearance: none;
}
.button2:hover {
	text-decoration: none;
}
.button2:active {
	font-size: 0.83em;
	width: 80%;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	padding: 1%;
	-webkit-appearance: none;
}

.debug {
	display: none;
	}
	


/* Agenda spul */
.calendar {
  display: grid;
  grid-template-columns: 50px auto;
  grid-template-rows: auto;
  gap: 1px 1px;
  grid-template-areas:
    ". header"
    "timeslotcontainer main";
}

.weekdays,
.daynumbers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.weekdays {
  background: lightblue;
}

.header {
  background: gray;
  grid-area: header;
}

.header, .weekdays, .daynumbers, .timeslotscontainer li {
  list-style: none;
}

.header, .timeslotscontainer ul {
  margin: 0;
  padding: 0;
}


.timeslotscontainer {
  background: lightgray;
  grid-area: timeslotcontainer;
  justify-content: left;
}

.timeslots {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeslots li {
  min-height: 60px;
}

.timeslots li:after {
  content: "";
  position: absolute;
  left: 10px;
  width: 100%;
  height: 1px;
  background: lightgray;
  z-index: 2;
}

.eventcontainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(56, 1fr);
  grid-area: main;
  position: relative;
}


.slot {
  position: absolute;
  background: darkgray;
  border-radius: 5px;
  z-index: 5;
  color: white;
  font-size: 12px;
  
}

.slot1 {
  /*height: 90px;*/
  grid-row: 17 / span 6;
  grid-column: 3 / span 1;
  justify-self: stretch;
  background: pink;
  color: yellow;
  font-size: 12px;
  z-index: 7;
}

.slot2 {
  /*height: 90px;*/
  grid-row: 24 / span 4;
  grid-column: 4 / span 1;
  justify-self: stretch;
  background: pink;
  color: yellow;
  font-size: 12px;
  z-index: 7;
}


.eventstatus {
  float: left;
  border-left: 3px lightgreen;
  height: 100%
  }
  
.formcontainer {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  flex-flow: row wrap;
}

.formcontainercell {
  width: 50%;
  margin-bottom: 2px;
}

.cardProduct {
  height: 300px;
  overflow: hidden;
  width: 85%;
  background: white; /*honeydew;*/
  border: 1px solid darkgray;
  padding: 20px;
  position: relative; 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 20px;
  display: inline-block;
  z-index: 1;
}

.cardProductBottom {
/* background: wheat;*/
 width: 100%;
 position: absolute;
 bottom: 0;
 
}

.cardProductPrice {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
 /* background: gold;*/
}

.profile {
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  width: 75px;
  height: 75px;
  
}

.kpi {
width: 25%;
border: solid 1px black;
padding: 10px;
margin: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 14px;
background: cornflowerblue;
min-height: 130px;
vertical-align: middle;
display: inline-grid;
}

.KPIvalue {
	font-size: 56px;
	font-weight: 500;
}


 caption{font-size: 22pt; margin: 10px 0 20px 0; font-weight: 700;}
table.calendar{width:100%; border:1px solid #000;}
  td.day{width: 14%; border: 1px solid #000; vertical-align: top;}
  td.daypast{width: 14%;  border: 1px solid #000; vertical-align: top; background-color: gray;}
  td.day span.day-date{font-size: 14pt;}
  th.header{background-color: #003972; color: #fff; font-size: 14pt; padding: 5px;}
  .not-month{background-color: #FFFFFF;}
  td.today {background-color:#efefef;}
  td.day span.today-date{font-size: 16pt;}
  
 /* Header */
.navheader{
    background-color: white;
    box-shadow: 1px 1px 5px 0px black;
    position: sticky;
    top: 0;
    width: 100%;
   /* overflow: visible;*/
}

  
  /* Logo */
.logo{
    display: inline-block;
    font-size: 60px;
    margin-left: 10px;
	color: #26403C;
	text-decoration: none;
}

/* Nav menu */
.nav{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #3A9BDF;
    overflow: hidden;
    
}

.menu a,.menu p, .menu button{
    display: block;
    padding: 30px;
    color: black;
	text-decoration: none;

}

.menu a:hover{
    background-color: #3A9BDF;
	/*font-weight: 600;*/
	transform: scale(1.2);
}

.menu button:hover{background-color: #3A9BDF;}

ul.menu {
  list-style: none;
  margin: 0px;
  
}

.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}

/* Sub nav */
.subnav-content {
    background-color:  #3A9BDF;
    width: 100%;
	z-index: 20;
    padding: 0px 0 ;
    display: none;
/*	position: absolute;*/
  }
.subnav-content a {
    color: white;
    text-decoration: none;
    padding: 0;
    margin: 10px 0;
    text-align: center;
}
.subnav:hover .subnav-content {
    display: block;
}

/* Menu Icon */

label.hamb{
    cursor: pointer;
    float: right;
    padding: 40px 20px;
   /* display: block;
    margin: 0%;
    margin-top: 0%;*/
    /*width: 70%;*/
}


.hamb-line {
    background: black;
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
    
}

.hamb-line::before,
.hamb-line::after{
    background: black;
/*    content: '';*/
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.hamb-line::before{
    top: 7px;
}

.hamb-line::after{
    top: -7px;
}


.side-menu {
    display: none;
}

/* Toggle menu icon */

.side-menu:checked ~ nav{
    max-height: 100%;
}

.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;

}

.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}


/* Responsiveness */

@media (min-width: 768px) {
    .nav{
        max-height: none;
        top: 0;
		right: 0;
        position: absolute;
        float: right;
        width: fit-content;
        background-color: transparent;
		overflow: visible; 

    }

    .menu li{
        float: left;
    }

    .menu a:hover{
        background-color: transparent;
        color: #3A9BDF;
        
    }
    
    .menu button:hover{
            background-color: transparent;
            color: #3A9BDF;
    }
    
    label.hamb{
        display: none;
    }

        /* Sub nav */
    .subnav-content {
     /*   position: absolute;*/
        padding: 20px 0;
        display: none;
        background-color:  #3A9BDF;
    }
    .subnav-content a {
      /*  position: relative; 
        display: block;*/
        color: black;
    }

}



table.rept {
 border: 0px solid;
 border-collapse: collapse; 
 margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table.rept thead {
  border: none;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
  

table.rept tr {
  background-color: #f8f8f8;
  /*border: 0px solid #ddd;*/
  padding: .35em;
  
      border-bottom: 3px solid white;
    display: block;
    margin-bottom: .625em;
    max-height: none;
}

table.rept th,
table.rept td {
  padding: .625em;
  text-align: right;
}

table.rept td {
  border-bottom: 0px solid #ddd;
  display: block;
}

table.rept td::before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
  text-transform: uppercase;
}
  
table.rept th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

table td:last-child {
  border-bottom: 0;
}

/* rep table */


.calendar-base {
/*  width: 900px;
  height: 500px;*/
  border-radius: 20px;
  background-color: white;
  position: relative;
  z-index: -1;
 /* color: black;*/
  display: grid;
grid-template-columns: repeat(2,1fr);
grid-column-gap: 5px;
}

.year {
  color: #E8E8E8;
  font-size: 30px;
  float: right;
  position: relative;
  /*right: 75px;
  top: 20px;*/
  font-weight: bold;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 10px solid #E8E8E8;
  border-bottom: 5px solid transparent;
  float: right;
  position: relative;
  right: 90px;
  top: 36px;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #E8E8E8;
  border-bottom: 5px solid transparent;
  float: right;
  position: relative;
  left: 20px;
  top: 36px;
}
.triangle-left:hover{
  border-right: 10px solid#2ECC71;
}
.triangle-right:hover{
  border-left: 10px solid#2ECC71;
}

.prevnext-hover{
 color: #E8E8E8;
 text-decoration: none;	
}
.prevnext-hover:hover{
  color:#27e879 !important;
}


.month-color {
  color: #27AE60;
}

.month-hover{
 color: #AAAAAA;
 text-decoration: none;	
}
.month-hover:hover{
  color:#27e879 !important;
}

.months {
  color: #AAAAAA;
  position: relative;
 /* left: 350px;
  top: 90px;*/
  word-spacing: 10px;
}

.monthselected {
	font-weight: 600;
	color: #27e879;
}
.month-line {
  border-color: #E8E8E8;
  position: relative;
/*  top: 85px;
  width: 57%;
  left: 178px;*/
}

.days {
  color: #AAAAAA;
  position: relative;
  font-size: 18px;
  left: 355px;
  top: 80px;
  word-spacing: 35px;
  font-weight: 600;
}

.num-dates {
  float: right;
  position: relative;
  top: 110px;
  right: 50px;
  z-index: 1;
}

.active-day {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #2ECC71;
  position: relative;
  top: 295px;
  left: 661px;
}

.white {
  color: white;
}

.event-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #2980B9;
  position: relative;
  top: 304px;
  left: 695px;
}

.num-date {
  font-size: 150px;
  /*width: 50%;
  margin: 0 auto;*/
  line-height: 0.9;
  font-weight: 700;
  text-align: center;
}

.day {
/*  width: 50%;
  margin: 0px auto;*/
  font-size: 30px;
  position: relative;
/*  bottom: 60px;*/
text-align: center;
margin-bottom: 50px;
}

.caltable {
display: grid;
grid-template-columns: repeat(7,1fr);
grid-column-gap: 5px;
/* grid-row-gap: 25px; */
text-align: center;
/* border: 1px solid black; */
/*width: 70%;*/
/* padding-bottom: 25px; */
/* padding-left: 8px; */
}

.calheaderitem {
vertical-align: middle;
/* padding-top: 10px; */
/* padding-bottom: 0px; */
font-weight: 600;
/* grid-row-gap: 10px; */
margin-bottom: 10px;
}
.caldayitem {
	height: 75px;
padding-top: 10px;
padding-left: 10px;
background: ghostwhite;
}

.caldayitemnotmonth {
background: none;
}

.caldayitemcurrent {
/* border: 3px solid red; */
font-weight: 800;
font-size: x-large;
}

.calevent{
	width: 85%;
background-color: ghostwhite;
margin: 10px;
padding: 5px;
padding-left: 15px;
border-left: 8px solid powderblue;
}

.calnav {
display: grid;
grid-template-columns: 3fr 2fr;
}

.calnavmonths {
display: grid;
grid-template-columns: repeat(6,1fr);
}

.calnavyear {
}

.pasteventstatus {
	border-left: 8px solid #E8E8E8;
}

.eventname{
	font-weight: bold;
}
.eventtime, .eventtrainer{
	font-size: x-small;
}

.caldayitemhasevents{
	border-left: 2px solid blue;
}