.gldp-default {
	position: absolute; 
}

/* Core style for every cell */
.gldp-default .core {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	color: #222;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #dadada 98%, #ffffff 99%, #dadada 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(98%,#dadada), color-stop(99%,#ffffff), color-stop(100%,#dadada));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dadada',GradientType=0 );
}

/* Cell border */
.gldp-default .border {
	border-style: solid;
	border-width: 0;
	border-color: #888;
}

/* Month/Year text and select SJOUKE: uit select css gehaald  font-size: 16px !important; */ 
.gldp-default .monyear,
.gldp-default .monyear select {
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
}

/* Month/Year text */
.gldp-default .monyear span {
	margin: 0 5px 0 5px;
}

/* Prev/Next arrows */
.gldp-default .prev-arrow,
.gldp-default .next-arrow {
	color: #222;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
}

.gldp-default .prev-arrow:active,
.gldp-default .next-arrow:active {
	color: #f00;
}

.gldp-default .prev-arrow-off,
.gldp-default .next-arrow-off {
	color: #222;
	opacity: 0.15;
}

/* Days of the week */
.gldp-default .dow {
	color: #fff;
	font-weight: bold;
	cursor: wait !important;
	background: #ff0000;
	background: -moz-linear-gradient(top,  #ff0000 0%, #ffcccc 1%, #ff0000 2%, #aa0000 98%, #dd4444 99%, #880000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(1%,#dd4444), color-stop(2%,#ff0000), color-stop(98%,#aa0000), color-stop(99%,#ffcccc), color-stop(100%,#880000));
	background: -webkit-linear-gradient(top,  #ff0000 0%,#ffcccc 1%,#ff0000 2%,#aa0000 98%,#dd4444 99%,#880000 100%);
	background: -o-linear-gradient(top,  #ff0000 0%,#ffcccc 1%,#ff0000 2%,#aa0000 98%,#dd4444 99%,#880000 100%);
	background: -ms-linear-gradient(top,  #ff0000 0%,#ffcccc 1%,#ff0000 2%,#aa0000 98%,#dd4444 99%,#880000 100%);
	background: linear-gradient(to bottom,  #ff0000 0%,#ffcccc 1%,#ff0000 2%,#aa0000 98%,#dd4444 99%,#880000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#880000',GradientType=0 );
}

/* Weekdays */
.gldp-default .mon,
.gldp-default .tue,
.gldp-default .wed,
.gldp-default .thu,
.gldp-default .fri {
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
}

/* Weekend days */
.gldp-default .sat,
.gldp-default .sun {
	color: #3858a8;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
}

/* Selectable days that are outside of current month being shown */
.gldp-default .outday {
	color: #666 !important;
}

/* Hover */
.gldp-default .mon:hover,
.gldp-default .tue:hover,
.gldp-default .wed:hover,
.gldp-default .thu:hover,
.gldp-default .fri:hover,
.gldp-default .sat:hover,
.gldp-default .sun:hover {
	background: #fcfff4;
	background: -moz-linear-gradient(top,  #fcfff4 0%, #e9e9ce 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce));
	background: -webkit-linear-gradient(top,  #fcfff4 0%,#e9e9ce 100%);
	background: -o-linear-gradient(top,  #fcfff4 0%,#e9e9ce 100%);
	background: -ms-linear-gradient(top,  #fcfff4 0%,#e9e9ce 100%);
	background: linear-gradient(to bottom,  #fcfff4 0%,#e9e9ce 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 );
}

/* Non-Selectable days */
.gldp-default .noday {
	color: #444;
	font-weight: normal;
	cursor: wait !important;
	background: #aaaaaa;
	background: -moz-linear-gradient(top,  #aaaaaa 0%, #8a8a8a 98%, #aaaaaa 99%, #8a8a8a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(98%,#8a8a8a), color-stop(99%,#aaaaaa), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%);
	background: -o-linear-gradient(top,  #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%);
	background: -ms-linear-gradient(top,  #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%);
	background: linear-gradient(to bottom,  #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#8a8a8a',GradientType=0 );
}

/* Currently selected day */
.gldp-default .selected {
	color: #fff;
	font-weight: bold;
	border-color: #c00;
	background: #e8bf88;
	background: -moz-linear-gradient(top,  #e8bf88 0%, #ffc19d 1%, #fd8642 2%, #ab2412 98%, #ef753f 99%, #ef753f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8bf88), color-stop(1%,#ffc19d), color-stop(2%,#fd8642), color-stop(98%,#ab2412), color-stop(99%,#ef753f), color-stop(100%,#ef753f));
	background: -webkit-linear-gradient(top,  #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%);
	background: -o-linear-gradient(top,  #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%);
	background: -ms-linear-gradient(top,  #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%);
	background: linear-gradient(to bottom,  #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8bf88', endColorstr='#ef753f',GradientType=0 );
}

/* Today */
.gldp-default .today {
	color: #fff;
	font-weight: bold;
	border-color: #00c;
	background: #88bfe8;
	background: -moz-linear-gradient(top,  #88bfe8 0%, #9dc1ff 1%, #4286fd 2%, #0124ab 98%, #3775ef 99%, #3775ef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bfe8), color-stop(1%,#9dc1ff), color-stop(2%,#4286fd), color-stop(98%,#0124ab), color-stop(99%,#3775ef), color-stop(100%,#3775ef));
	background: -webkit-linear-gradient(top,  #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%);
	background: -o-linear-gradient(top,  #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%);
	background: -ms-linear-gradient(top,  #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%);
	background: linear-gradient(to bottom,  #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#3775ef',GradientType=0 );
}

/* Special */
.gldp-default .special {
	color: #fff;
	font-weight: bold;
	border-color: #0c0;
	background: #88e888;
	background: -moz-linear-gradient(top,  #88e888 0%, #9dff9d 1%, #42fd42 2%, #01ab01 98%, #37ef37 99%, #37ef37 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88e888), color-stop(1%,#9dff9d), color-stop(2%,#42fd42), color-stop(98%,#01ab01), color-stop(99%,#37ef37), color-stop(100%,#37ef37));
	background: -webkit-linear-gradient(top,  #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%);
	background: -o-linear-gradient(top,  #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%);
	background: -ms-linear-gradient(top,  #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%);
	background: linear-gradient(to bottom,  #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88e888', endColorstr='#37ef37',GradientType=0 );
}

/* ================= GENERAL SETTINGS ======================== */
@font-face {
  font-family: PT Sans;
  font-display: swap;
  src: url(/external/fonts/ptsans/PTS55F.ttf); 
}
@font-face {
  font-family: PT Sans-bold;
  font-display: swap;
  src: url(/external/fonts/ptsans/PTS75F.ttf); 
}
@font-face {
  font-family: PT Sans-italic;
  font-display: swap;
  src: url(/external/fonts/ptsans/PTS56F.ttf); 
}
@font-face {
  font-family: Roboto;
  font-display: swap;
  src: url(/external/fonts/roboto/Roboto-Black.ttf); 
}
body {
  background-color: white; 
  font-family: PT Sans, Arial, Helvetica, Verdana, Tahoma, 'Trebuchet MS', sans-serif;
  color: #575757; 
  text-shadow: 0 0 0 #000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
}
a {
  font-size: 14px;
  color: #0075bb;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.bold {
  font-weight: bold; 
}
.button {
  float: left;
  width: 240px;                                                                                                                                         
  height: 24px;
  display: block;
  text-align: center;
  font-weight: bold; 
  font-size: 14px;
  line-height: 23px;
  border-radius: 5px;
  background-color: #0075bb;
  color: #FFFFFF;
}
.cf { 
  display: block; 
}
.cf:after {
  clear: both;
  content: '';
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.delete-bin {
  width: 100px;
  float: left;
}
.delete-txt {
  width: 900px;
  float: left;
}
.even {
  background-color: #F7F7F7;
}
.even-blue {
  background-color: #E0E8FE;
}  
.italic {
  font-style: italic;
}
.search-box {
  margin-left: 20px;
  float: left;
  height: 20px;
}
.search-box .text {
  width: 76px;
  margin-right: 4px;
  text-align: right;
  color: #575757;
  font-weight: bold; 
  font-size: 12px;
  line-height: 36px;
  padding: 0;
  cursor: pointer;
}
.search-box .input {
  width: 240px;
  height: 20px;
  margin: 0 8px 12px 0;
  float: left;
}
.search-box img {
  margin-top: 0px;
  padding: 2px 8px;
  height: 18px;
}
input[type=text], input[type=number], input[type=password], textarea, select, .rb {
  border: 1px solid #0075bb;
  background-color: #F7F7F7;    
  border-radius: 5px;
  padding: 2px;
  box-shadow: 1px 1px 2px #858585;
  transition: border linear 0.5s, box-shadow linear 0.5s;
  outline: none;
  font-family: Courier, Arial, Roboto;
  font-size: 14px;
}
.rit-gc {
  background-color: #dae9f2;
  color: #0075bb;
}
.rit-klim {
  background-color:#f5daf2;
  color: #cc04b8;
}
#route-container {
  display: none;
  position: fixed; 
  z-index: 1;
  left: 5%;
  top: 100px;
  width: 90%;
  height: 90%;
  max-width: 900px;
  max-height: 900px;
  overflow: auto; /* Enable scroll if needed */
}
#route-image {
  margin: 0 auto;
  display: block;
  top: 0;
  max-width: calc(100% - 2px);
  max-height: calc(100% - 2px);
  object-fit: cover;
  border: 1px solid #334aff;
}
#route-image img {
  margin-top: 0;
}
/* Add Animation - Zoom in the Modal */
#route-image, #img-titel {
  animation-name: zoom;
  animation-duration: 1.0s;
}
#pauze-container {
  display: none;
  position: fixed; 
  z-index: 1;
  left: 5%;
  top: 100px;
  width: 90%;
  height: 90%;
  max-width: 900px;
  max-height: 900px;
  overflow: auto; /* Enable scroll if needed */
}
#pauze-image {
  margin: 0 auto;
  display: block;
  top: 0;
  max-width: calc(100% - 2px);
  max-height: calc(100% - 2px);
  object-fit: cover;
  border: 1px solid #334aff;
}
#pauze-image img {
  margin-top: 0;
}


@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}
ul, ol, dl, dt, dd {
  list-style: none;
  margin: 0;
  padding: 0;
}
.w100 {
  width: 100px;
}
.w120 {
  width: 120px;
}
.w150 {
  width: 150px;
}
.w180 {
  width: 180px;
}
.w300 {
  width: 300px;
}

/* =================  CONTAINER SETTINGS ======================== */
#container {
  width: 100%;
  min-height: calc(100vh - 30px);
  text-align: left;
  margin: 0 auto;
  position: relative;
}
header-bkgd {
  position: relative;
  margin: 0 auto;
  width: 100%
}

/* ============ GENERAL SETTINGS FOR HEADER, MENU, CONTENT & FOOTER ============ */
#header-fwidth, #menu-fwidth, #content-fwidth {
  width: 100%;
  position: relative;
  min-width: 500px; 
}
#header-fwidth {
  background-color: white; 
} 
#content-fwidth {
  clear: both;
  background-color: white;
}
#header-wrap, #nav-wrap, #subnav-wrap, #content-wrap, #footer-wrap {
  width: 100%; 
  max-width: 1570px;
  min-width: 600px;
  margin: 0 auto;
}
#id-admin #header-wrap, #id-admin #nav-wrap, #id-admin #subnav-wrap, #id-admin #content-wrap, #id-admin #footer-wrap {
  min-width: 990px;
}
#header-wrap #hdr-right #left-col .login-img {
  background: url(/images/loggedin-icon_12.gif) 0 4px no-repeat;
  padding-left: 2px;
  width: 15px;
  height: 20px;
  float: right;
}


/*   ============  MENU   ============  */
#nav-bkgd, #subnav-bkgd {
  position: relative;
}
#nav-bkgd{
  background-color: #e8e8e8;
}
#nav-wrap, #subnav-wrap {                              
  font-family: Roboto, Arial, Helvetica;
  position: relative;
  display: block;
  overflow: visible;                
  width: 100%; 
}
#nav-wrap a { 
  float: left;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 20px;
  white-space: nowrap;
  font-size: 12px;
}
#nav-wrap .pointer-down, #nav-wrap .pointer-left {
  margin: 3px 2px 0 0; 
}  
#nav-wrap .pointer-left {
  border-left-color: #000000;
}
#nav-wrap #nav-more, #subnav-wrap #subnav-more { 
  padding: 0 24px;
  border-right: none;
  display: none;
  font-size: 20px;
  letter-spacing: 2px;
}  
#subnav-wrap a {
  display: block;
  float: left;
  line-height: 12px;
  text-decoration: none;
  padding: 6px 18px;
  white-space: nowrap;
  font-size: 12px;
}
#nav-wrap a.active, #subnav-wrap a.active {                                                                          
  cursor: default;
  color: white;
  background-color: #0075bb;
}
#menu-fwidth {
  z-index: 50;
}
.fixed-top {
  position: fixed;
  top: 0;
}
#menu-fwidth .link {
  position: relative;
}  
#menu-fwidth .beheer {
  font-weight: bold;
}  
#menu-fwidth .logout {
  float: Right;
}  
#menu-fwidth .dropdown-sub {
  display: none;
  position: absolute;
  top: 30px;
  min-width: 80px;
  float: none;
  z-index: 1;
}
#menu-fwidth .dropdown-sub a {
  color: black;
  padding: 6px 12px;
  text-decoration: none;
  display: block;
  min-width: calc(100% - 24px);
}


/* ============ HEADER ============ */
#header-wrap {
  font-family: 'Roboto';
}
#header-wrap #hdr-left {
  float: left;
  max-width: 150px;
  max-height: 76px;
  padding: 2px 0;
}
#header-wrap #hdr-left img {
  border-style: none;
  width: auto;
  height: auto;
  height: 76px;
}
#header-wrap #hdr-right {
  float: right;
  color: #858585; 
  text-align: right;
  max-height: 76px;
  padding: 2px;
}
#main #header-wrap #hdr-right, #leftcol-menu #header-wrap #hdr-right {
  position: relative;
  width: 300px;
}  
#header-wrap #hdr-right #left-col {
  width: 80px;
  font-size: 10px;
  float: left;
  padding: 0;
}
#header-wrap #hdr-right #right-col {
  width: 180px;
  font-size: 12px;
  float: left;
  font-family: Roboto-bold;
  margin-left: 4px;
  padding: 0;
}
#header-wrap #hdr-right #left-col .text, #header-wrap #hdr-right #right-col .text {
  float: right;
  margin-bottom: 0px; 
  height: 20px;
  line-height: 20px;
}
#header-wrap #hdr-right #left-col .f-width {
  width: 60px;
}
#header-wrap #hdr-right #right-col .text {
  float: left;
  text-align: left;
  width: 100%;
}

/* ============ SPECIFIC SETTINGS FOR CONTENT ============ */
#content-wrap {
  background-color: white;
}



/* ================= VANDAAG PAGE ======================== */
#vandaag-page {
  float: left;
  width: 100%; 
  font-family: Arial;
}
#vandaag-page .vandaag-container {
  width: calc(100% - 2px);
  max-width: 800px;
  min-width: 400px;
  display: block;
  margin: 0 auto;
}
#vandaag-hdr {
  float: left;
  width: calc(100% - 2px);
  border: 1px solid #0075bb;
  margin-bottom: 10px;
  background-color: #C5E9FA;
  padding: 6px 0;
}
#vandaag-page .titel-line {
  float: left;
  width: calc(100% - 16px);
  padding: 8px;
  font-size: 18px;
  background-color: #334aff;
  color: white;
}
#vandaag-hdr .vandaag-hdr-line {
  float: left;
  width: 100%;
  padding: 6px 0;
}
#vandaag-hdr .vandaag-titel {
  float: left;
  width: calc(100% - 40px);
  font-size: 20px;
  color: #0075bb;
  margin-left: 40px;
  margin-bottom: 12px;
}
#vandaag-hdr .ritten-type, #vandaag-hdr .ritten-groep, #vandaag-hdr .ritten-wanneer {
  width: 100%;
  float: left;
}
#vandaag-hdr .weg, vandaag-hdr .mtb, #vandaag-hdr .gravel, #vandaag-hdr .mtb,
#vandaag-page .grp-25, #vandaag-page .grp-28, #vandaag-page .grp-30,
#vandaag-page .dag-0, #vandaag-page .dag-1, #vandaag-page .dag-2 {
  float: left;
  width: 150px;
  color: black;
}
#vandaag-hdr input {
  float: left;
  margin-right: 4px;
}
#vandaag-hdr input[type='radio']:checked + label {
  color: #0075bb;
  font-weight: bold;
} 
#vandaag-hdr .text {
  width: 80px;
  float: left;
  text-align: right;
  padding-right: 6px;
  line-height: 18px;
}
#vandaag-page .grp-text {
  float: left;
  width: 80px;
  text-align: right;
  padding-right: 6px;
} 
#vandaag-page .grp-options {
  float: left;
  width: calc(100% - 90px);
} 
#vandaag-page .grp-25, #vandaag-page .grp-28, #vandaag-page .grp-30 {
  float: left;
  width: 150px;
} 
#vandaag-hdr .vandaag, vandaag-hdr .morgen, #vandaag-hdr .overmorgen {
  float: left;
  width: 150px;
  color: black;
}
#vandaag-page .geen-rit {
  float: left;
  width: calc(100% - 82px);
  font-size: 18px;
  background-color: #334aff;
  color: white;
  border: 1px solid #0075bb;
  padding: 40px;
  margin-top: 20px;
}
#vandaag-page .geen-rit-tekst {
  width: 100%;
}
#vandaag-page .rit-nu {
  float: left;
  width: 100%;
}
#vandaag-page .ritnaam {
  width: calc(100% - 14px);
  float: left;
  padding-left: 12px;
  font-size: 16px;
}

/* ================= KALENDER PAGE ======================== */
#kalender-page {
  width: 100%; 
  float: left;
  font-family: Arial;
}
#kalender-page .titel-line {
  float: left;
  width: calc(100% - 16px);
  padding: 8px;
  font-size: 18px;
  background-color: #334aff;
  color: white;
}
#kalender-hdr {
  border: 1px solid #0075bb;
  margin-bottom: 10px;
  float: left;
  width: calc(100% - 2px);
  background-color: #C5E9FA;
  padding: 6px 0;
}
#kalender-hdr .alle, #kalender-hdr .weg, kalender-hdr .mtb, #kalender-hdr .gravel {
  float: left;
  width: 120px;
  color: black;
}
#kalender-hdr .alle {
  width: 140px;
}
#kalender-hdr input {
  float: left;
  margin-right: 4px;
}
#kalender-hdr .weg input[type='radio']:checked + label {
  color: #0075bb;
  font-weight: bold;
} 
#kalender-hdr .gravel input[type='radio']:checked + label {
  color: #2e7d32;
  font-weight: bold;
} 
#kalender-hdr .mtb input[type='radio']:checked + label {
  color: #ff6f00;
  font-weight: bold;
} 
#kalender-page #kalender-hdr .alle label {
  float: left;
  width: 100px;
}
#kalender-page #kalender-hdr .divers-gc, #kalender-page #kalender-hdr .divers-kr {
  float: left;
  width: 150px;
}
#kalender-hdr .kalender-hdr-line {
  float: left;
  width: 100%;
}
#kalender-hdr .ritten-type {
  float: left;
  margin-top: 4px;
  margin-bottom: 6px;
  margin-left: 0;
  width: 100%;
}
#kalender-hdr #jaar, #kalender-hdr #maand, #kalender-hdr #week {
  float: left;
  padding: 6px 0;
}
#kalender-hdr #jaar {
  float: left;
  padding: 6px 0;
  width: 220px;
}
#kalender-hdr .text {
  width: 80px;
  float: left;
  text-align: right;
  padding-right: 6px;
  line-height: 18px;
}
#kalender-hdr select {
  float: left;
  width: 120px;
}
#kalender-hdr #maand {
  width: 200px;
}
#kalender-hdr #maand .text {
  width: 60px;
}
#kalender-hdr #week select {
  width: 160px;
}
#kalender-page .week-blok {
  width: calc(100% - 2px);
  float: left;
  border: 1px solid #0075bb;
  background-color: white;
  margin-bottom: 10px;
}
#kalender-page .grp-text {
  float: left;
  width: 80px;
  text-align: right;
  padding-right: 6px;
} 
#kalender-page .grp-25, #kalender-page .grp-28, #kalender-page .grp-30 {
  float: left;
  width: 150px;
} 
#kalender-page .maand-hdr {
  float: left;
  margin-top: 8px;
  width: calc(100% - 6px);
  padding: 6px 0 4px 6px;
  background-color: #0075bb;
  color: white;
  font-size: 18px;
  font-style: italic;
}
#kalender-page .week-blok .week-hdr {
  float: left;
  width: calc(100% - 6px);
  padding: 6px 0 4px 6px;
  background-color: #C5E9FA;
  color: #0075bb;
  font-size: 16px;
  font-style: italic;
  border-bottom: 1px solid #0075bb;
}
#kalender-page .week-hdr .week {
  padding-bottom: 4px;
  float: left;
  width: calc(100% - 40px);
}
#kalender-page .week-blok .dag-blok, #kalender-page .week-blok .dag-blok-disabled {
  float: left;
  width: 100%;
  border-bottom: 1px solid #e3e9fb; 
  font-size: 12px;
  padding: 2px 0;
}
#kalender-page .week-blok .dag-blok-disabled {
  color: #9C9C9C;
  background-color: #F0F0F0;
 } 
 #kalender-page .rit-container {
  float: left;
  width: 100%;
  padding: 2px 0;
  border-bottom: 1px solid #F0F0F0;
} 
##kalender-page .rit-regel {
  float: left;
  width: 100%;
} 
#kalender-page .datum-blok {
  float: left;
  width: 100px;
  padding-left: 0px;
}

#kalender-page .week-blok .weekdag {
  width: 20px;
  text-align: right;
  padding-right: 8px;
  float: left;
}  
#kalender-page .week-blok .weekdatum {
  width: 40px;
  text-align: left;
  float: left;
}
#kalender-page .week-blok .weer-img {
  width: 25px;
  max-height: 24px;
  float: left;
  margin-top: -4px;
}
#kalender-page .week-blok img {
  width: 25px;
  max-height: 24px;
  float: left;
}
#kalender-page .datum, #kalender-page .tijd, #kalender-page .rit-type, #kalender-page .groep, #kalender-page .afstand, #kalender-page .pauze, 
#kalender-page .rit-naam {
  text-align: left;
  float: left;
}
#kalender-page .afstand .marge {
  font-style: italic;
  font-size: 10px;
  color: gray;
}
#kalender-page .datum {
  width: 100%;
}
#kalender-page .tijd {
  width: 50px;
}
#kalender-page .rit-type {
  width: 56px;
  font-size: 14px;
}
#kalender-page .rit-info, #kalender-page .geen-rit {
  width: 200px;
  text-align: left;
  float: left;
}
#kalender-page .rit-info .info-img {
  width: 24px;
  float: left;
}
#kalender-page .rit-info img {
  width: 18px;
  max-height: 18px;
  float: left;
}
#kalender-page .rit-info .info-text {
  width: 174px;
  float: left;
}
#kalender-page .rit-regel .rit-type {
  font-size: 14px;
  font-weight: bold; 
  line-height: 14px;
}
#kalender-page .clr-weg {
  color: #0075bb;
}
#kalender-page .clr-xtr-weg {
  color: white;
  background-color: #4e54fc;
}
#kalender-page .clr-weg-gc {
  color: #BA3D2D;
  background-color: #F1E6FC;
}
#kalender-page .clr-weg-gc-uitwijk {
  color: #858585;
  background-color: #F1E6FC;
}
#kalender-page .clr-weg-kr {
  color: #9C27F5;
  background-color: #FFDBD6;
}
#kalender-page .clr-gravel, #kalender-page .clr-xtr-gravel {
  color: #ff6f00;
  background-color: #fff2e8;
}
#kalender-page .clr-mtb, #kalender-page .clr-xtr-mtb {
  color: #2e7d32;
  background-color: #e8ffe9;
}
#kalender-page .clr-derden {
  color: #F79516;
  background-color: #FFE5BF;
  font-style: italic;
}
#kalender-page .clr-weg-bw {
  color: #F527F5;
  background-color: #FFE0FF;
}
#kalender-page .clr-weg-av {
  color: #8c55fa;
  background-color: #f0f5ff;
}
#kalender-page .clr-bijzonder {
  color: #e33241;
  background-color: #ffd6da;
}
#kalender-page .clr-nazit {
  background-color: #E1FCE5;
}
#kalender-page .clr-extern {
  color: #00cc00;
  background-color: #ccffcc;
}
#kalender-page .groep {
  width: 60px;
}
#kalender-page .afstand {
  width: 110px;
}
#kalender-page .pauze {
  width: 180px;
  word-wrap: break-word;
}
#kalender-page .rit-naam {
  width: 220px;
  word-wrap: break-word;
  margin-right: 6px;
}
#kalender-page .reden-geen-rit {
  float: left;
  color: gray;
  width: 400px;
}
#kalender-page .rit-info {
  float:left;
  width: 200px;
  word-wrap: break-word;
}
#kalender-page .derden-rit-info {
  float:left;
  width: 168px;
  word-wrap: break-word;
}
#kalender-page a {
  font-size: 12px;
}
#kalender-page .default {
  color: #A0A0A0;
}
.ajax-active {
  float: left;
  display: none;
  color: red;
  height: 24px;
  font-size: 12px;
  margin-top: 12px;
  margin-left: 120px;
}
.ajax-active img {
  float: left;
  margin-right: 8px;
}
#kalender-page .rit-blok .kies-btn {
  float: right;
  width: 70px;
}
#kalender-page .rit-blok {
  width: calc(100% - 110px);
  text-align: left;
  float: left;
}
#kalender-page .rit-blok .kies-btn .button {
  width: 60px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
}
#kalender-page .geen-rit {
  width: calc(100% - 30px);
  float: left;
  padding-bottom: 4px;
  font-style: italic;
  margin-bottom: 8px;
}
#kalender-page #sel-geen-rit {
  float: left;
  margin-left: 120px;
  width: 100%;
}
#kalender-page .geen-rit .reden-geen-rit {
  float: left;
  margin-top: 8px;
  margin-left: 4px;
  display: none;
}
#kalender-page .geen-rit .reden-geen-rit .sel-reden-geen-rit-txt {
  float: left;
  width: 120px;
}
#kalender-page .geen-rit-btn {
  display: none;
  float: left;
  height: 32px;
  margin-top: 12px;
  margin-left: 80px;
}
#kalender-page .wel-rit {
  float: left;
  border-top: 1px solid #2A27F5;
}
#kalender-page #sel-afstand, #kalender-page #sel-zelfdepauze, #kalender-page #sel-klimrit, #kalender-page #sel-snelrit, #kalender-page .combi-pauze {
  float: left;
  width: calc(100% - 124px);
  height: 24px;
  padding-top: 8px;
  font-size: 14px;
  margin-left: 120px;
}
#kalender-page .combi-pauze {
  width: calc(100% - 4px);
  margin-left: 0px;
  height: 20px;
}
#kalender-page .pauze-groups {
  float: left;
  width: calc(100% - 124px);
  padding-left: 120px;
  margin-bottom: 6px;
}
#kalender-page #sel-afstand input, #kalender-page #sel-klimrit input, #kalender-page #sel-snelrit input {
  float: left;
}
#kalender-page #sel-afstand label, #kalender-page #sel-klimrit label, #kalender-page #sel-snelrit label {
  float: left;
  width: calc(100% - 24px);
}
#kalender-page #sel-richting, #kalender-page .sel-start, #kalender-page .sel-nazit, #kalender-page .sel-pauze {
  width: calc(100% - 4px);
  height: 24px;
  padding-top: 8px;
  float: left;
  font-size: 14px;
}
#kalender-page .fltr-txt, #kalender-page .sel-text {
  width: 80px;
  float: left;
}
#kalender-page #sel-richting .checkbox {
  margin-right: 8px;
  float: left;
}
#kalender-page #sel-richting label {
  width: 44px;
  float: left;
}
#kalender-page .sel-richting-txt, #kalender-page .sel-start-txt, #kalender-page .sel-nazit-txt, #kalender-page .sel-pauze-txt, .rit-select-txt, 
#kalender-page .new-rit-marge-txt, #kalender-page .new-rit-info-txt {
  float: left;
  width: 120px;
  font-size: 14px;
}
#kalender-page .richting-items {
  float: left;
  width: calc(100% - 130px);
}
#kalender-page .richting-all {
  float: left;
  width: 80px;
}
#kalender-page .richting-n, #kalender-page .richting-no, #kalender-page .richting-o, #kalender-page .richting-zo,
#kalender-page .richting-z, #kalender-page .richting-zw, #kalender-page .richting-w, #kalender-page .richting-nw {
  float: left;
  width: 50px;
}
#kalender-page .rit-select, #kalender-page .new-rit-info, #kalender-page .new-rit-marge {
  float: left;
  width: 100%;
  height: 32px;
}
#kalender-page .rit-select {
  padding-top: 12px;
}
#kalender-page .rit-select select {
  float: left;
  width: 300px;
  margin-top: 8px;
}
#kalender-page .rit-kies, #kalender-page .rit-del {
  float: left;
  display: none;
  width: calc(100% - 120px);
  max-width: 800px;
  border: 1px solid #2A27F5;
  margin: 4px 0 0 100px;
  color: #36454F;
  background-color: #D5D4FA;
  padding: 8px;
}
#kalender-page .rit-kies select {
  width: 300px;
}
#kalender-page .rit-kies .new-rit-info {
  margin-top: 12px;
  float: left;
}
#kalender-page .new-rit-marge {
  margin-top: 16px;
  float: left;
}
#kalender-page .new-rit-marge .input {
  width: 40px;
  text-align: right;
  margin-right: 8px;
}  
#kalender-page .rit-kies .new-rit-info .input {
  width: 450px;
  float: left;
}
#kalender-page .weer-nieuwe-rit {
  width: 100%;
  float: left;
  margin-bottom: 10px;
}
#kalender-page .weer-blok {
  margin: 0 auto;
  font-size: 14px;
  border: 1px solid #2A27F5;
  width: calc(100% - 20px);
  padding: 8px;
  background-color: #e2e1f5;
}
#kalender-page .info-nieuwe-rit {
  width: calc(100% - 30px);
  float: left;
  padding-bottom: 10px;
  font-style: italic;
  border-bottom: 1px solid #2A27F5;
  margin-bottom: 8px;
}
#kalender-page .close {
  width: 28px;
  float: right;
}
#kalender-page .wind {
  float: right;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
} 
#kalender-page .del-btn, #kalender-page .edit-btn {
  float: left;
  width: 100px;
  margin-top: 20px;
}
#kalender-page .koppel-btn {
  display: none;
  float: left;
  height: 32px;
  margin-top: 12px;
  margin-left: 80px;
}
#kalender-page .del-btn {
  margin: 10px 0 10px 40px;
}
#kalender-page .del-btn .button {
  width: 300px;
}
#kalender-page .route-detail, #vandaag-page .route-detail {
  float: left;
  display: none;
  width: calc(100% - 120px);
  border: 1px solid #0075bb;
  margin: 4px 0 0 100px;
  color: #36454F;
}
#kalender-page .route-detail {
  max-width: 800px;
}
.route-detail .detail {
  float: left;
}
#vandaag-page .route-detail {
  display: block;
  width: calc(100% - 2px);
  margin: 0;
}
.route-detail .route-titel {
  float: left;
  padding: 6px 0;
  width: calc(100% - 30px);
  text-align: center;
  font-size: 20px;
  font-weight: bold; 
  color: #03AB1E;
}
.route-detail .route-info {
  width: calc(100% - 16px);
  background-color: #e3e9fb;
  float: left;
  padding: 8px;
}
.route-detail .regel1, .route-detail .regel2, .route-detail .regel3 {
  font-size: 14px;
  width: 100%;
  float: left;
  padding-bottom: 4px;
}
.route-detail .regel1 .close {
  float: right;
  width: 28px;
}  
.route-detail h1 {
  text-align: center;
  font-size: 18px;
}
.route-detail .garmin, .route-detail .komoot {
  width: 160px; 
  float: left;
}
#kalender-page .route-detail.afstand {
  width: 120px;
}
.route-detail .afstand, #kalender-page .route-detail .richting {
  width: 150px; 
  float: left;
}
#kalender-page .route-detail a {
  font-size: 14px;
}
#kalender-page .route-detail .regel1 a {
  font-size: 16px;
}
.route-detail .nazit {
  padding: 6px 0;
  color: #0033cc; 
}
.route-detail .knmi-weer {
  float: left;
  border-top: 1px solid #334aff;
  background-color: #d9dbde;
  font-size: 12px;
  font-style: italic;
  width: calc(100% - 8px);
  padding: 4px;
}
.route-detail .knmi-uur {
  float: left;
  border-top: 1px solid #334aff;
  background-color: #f3fcdc;
  font-size: 12px;
  font-style: italic;
  width: calc(100% - 8px);
  padding: 4px;
}
.route-detail .knmi-uur .uur-titel {
  float: left;
  font-size: 18px;
  color: #3c5207; 
  width: 100%;
  padding: 8px 0;
  font-weight: bold; 
}
.route-detail .knmi-uur .uur-header {
  float: left;
  width: 100%;
  font-size: 14px;
  font-weight: bold; 
  padding-bottom: 4px;
}
.route-detail .knmi-uur .uur-regel {
  float: left;
  width: 100%;
  padding: 4px 0
}
.knmi-uur .uur-tijd, .knmi-uur .uur-weer, .knmi-uur .uur-temp, .knmi-uur .uur-wind, .knmi-uur .uur-richting, .knmi-uur .uur-regen {
  float: left;
  width: 80px;
}
.knmi-uur .uur-weer {
  width: 120px;
}
.knmi-uur .uur-wind {
  width: 120px;
}
.knmi-uur .info {
  float: left;
  width: 100%;
  font-style: italic;
  font-size: 10px;
  padding-bottom: 6px;
  color: #757575;
}  
 
#kalender-page .default-rit-gc {
  background-color: #FFD9D4;
  color: #941900;
}
#kalender-page .rit-kr {
  background-color: #FFD9D4;
  color: #941900;
}
#kalender-page .extra-rit {
  background-color: #DCFCE0;
  color: #0E5C14;
}
#kalender-page .rit-submit {
  float: right;
  width: 100px;
}
#kalender-page .button, #kalender-page .button-gray {
  float: left;
  width: 90px;                                                                                                                                         
  height: 20px;
  display: block;
  text-align: center;
  font-weight: bold; 
  font-size: 12px;
  line-height: 20px;
  border-radius: 5px;
  background-color: #0075bb;
  color: #FFFFFF;
}
#kalender-page .button-gray {
  background-color: #BEBEBE;
  color: white;
}

#kalender-page .action {
  float: right;
  width: 70px;
  padding-top: 2px;
}
#kalender-page .action img {
  width: 16px;
  height: 16px;
  float: left; 
  padding-left: 4px;
} 

/* ================= RITTEN PAGE ======================== */
#ritten-page {
  width: 100%; 
  float: left;
  font-family: Arial;
}
#ritten-page .titel-line {
  float: left;
  width: calc(100% - 16px);
  padding: 8px;
  font-size: 18px;
  background-color: #0075bb;
  color: white;
}
#ritten-page .titel {
  float: left;
  width: 240px;
  padding-top: 4px;
}
#ritten-page .ritten-type {
  float: left;
  width: 440px;
  margin-top: 4px;
  margin-left: 40px;
  margin-bottom: 6px;
}
#ritten-page input[type='radio']:checked, #kalender-hdr input[type='radio']:checked  {
  accent-color: red; 
}  
#ritten-page input[type='radio']:checked + label, #kalender-hdr input[type='radio']:checked + label {
  color: #0075bb;
} 
#ritten-page .titel-line input[type='radio']:checked + label, #kalender-hdr .titel-line input[type='radio']:checked + label {
  color: white;
} 
#ritten-page .weg, #ritten-page .mtb, #ritten-page .gravel {
  float: left;
  width: 120px;
  color: black;
}
#ritten-page #filter-toggle {
  float: right;
  padding-top: 4px;
  padding-right: 20px;
  width: 130px;
  cursor: pointer;
}
#ritten-page .fltr-off, #ritten-page .fltr-on {
  float: left;
  width: 26px;
}
#ritten-page .fltr-off {
  display: none;
}
#ritten-page #filter-toggle img {
  margin-top: 2px;
  float: left;
}
#ritten-page #filter-blok {
  display: block; /* none */
  width: calc(100% - 2px);
  float: left;
  min-height: 40px;
  background-color: #C5E9FA;
  border: 1px solid #0075bb;
}
#ritten-page .fltr-txt, #ritten-page .sel-text {
  width: 120px;
  float: left;
}
#ritten-page .sel-text {
  padding-top: 4px;
}
#ritten-page #sel-richting, #ritten-page #sel-afstand, #ritten-page #sel-pauze, #ritten-page #sel-land, #ritten-page #sel-start {
  width: calc(100% - 24px);
  height: 24px;
  padding: 12px;
  float: left;
}
#ritten-page #sel-klimrit, #ritten-page #sel-snel {
  width: 200px;
  height: 24px;
  padding: 12px;
  float: left;
}
#ritten-page #sel-snel .fltr-txt {
  width: 80px;
}
#ritten-page #sel-richting .checkbox {
  margin-right: 8px;
  float: left;
}
#ritten-page #sel-richting label {
  width: 44px;
  float: left;
}
#ritten-page #sel-pauze select, #ritten-page #sel-land select, #ritten-page #sel-start select {
  width: 240px;
  margin-left: 4px;
}
#ritten-page #slider-range { 
  float: left;
  margin-right: 20px; 
  width: 400px; 
}
#slider-range .ui-slider-range {
  background: #74c6f7;
  border: 1px solid white;         /* Optioneel: rand weghalen */
}
#slider-range .ui-state-hover {
  background: #0075bb;
  border: none;
}
#ritten-page #slider-range .km-keuze {
  float: left;
  width: 80px;
  font-weight: bold; 
}
#ritten-page #ritten {
  width: calc(100% - 2px); 
  float: left;
  border: 1px solid #0075bb;
  margin-top: 2px;
}
#ritten-page .rit-titel {
  width: 100%; 
  min-height: 30px;
  font-size: 14px;
  padding: 0;
  background-color: #C5E9FA;
  color: #0075bb;
}
#ritten-page .rit-titel .label {
  float: left;
  padding-top: 6px;
}  
#ritten-page .rit-titel .garmin .label, #ritten-page .rit-titel .komoot .label {
  color: black;
}  
#ritten-page .rit-titel a {
  font-size: 14px;
}  
#ritten-page .rit-titel img {
  float: left;
  height: 18px;
  padding-top: 4px;
}  
#ritten-page .rit {
  width: calc(100% - 2px); 
  min-height: 24px;
  float: left;
  padding: 4px 0 2px 2px;
  font-size: 12px;
  line-height: 20px;
}
#ritten-page .rit a {
  font-size: 12px;
}
#ritten-page .naam {
  float: left;
  padding-left: 2px;
  width: 15%; 
  min-width: 200px;
}
#ritten-page .garmin {
  width: 6%; 
  float: left;
  min-width: 100px;
}
#ritten-page .komoot {
  width: 6%; 
  float: left;
  min-width: 100px;
}
#ritten-page .afstand {
  width: 5%; 
  min-width: 70px;
  float: left;
}
#ritten-page .richting {
  width: 5%; 
  min-width: 80px;
  float: left;
}
#ritten-page .frequentie {
  width: 5%; 
  float: left;
  min-width: 80px;
}
#ritten-page .frequentie .freq-box {
  width: 10px; 
  height: 10px; 
  margin-top: 4px;
  margin-right: 2px;
  float: left;
  background: green; 
}
#ritten-page .start_locatie {
  width: 8%; 
  min-width: 120px;
  float: left;
}
#ritten-page .pauze {
  width: 15%; 
  min-width: 250px;
  float: left;
}
#ritten-page .filter-submit {
  float: left;
  margin: 10px 0 20px 140px;
}
#ritten-page .button {
  float: left;
  width: 180px;
}
#ritten-page .close {
  z-index: 2; /* Sit on top */
}

/* ================= DEELNAME PAGE ======================== */
#bd-aanmelden {
  width: 100%; 
  float: left;
  background-color: #C5E9FA; 
  font-family: Arial;
  padding: 5px;
}
#cnt-deelname {
  width: calc(100% - 32px); 
  max-width: 600px;
  margin: 0 auto;
}
#div-deelnemers {
  width: 100%; 
  margin-top: 10px;
  background-color: white; 
  font-family: Arial;
  border-radius: 10px;
  border: 1px solid #0075bb;
  padding: 10px;
  color: #0075bb;
  float: left;
}
#div-deelnemers .titel, #div-aanmelden .titel {
  text-align: left;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold; 
  float: left;
  width: calc(100% - 20px);
}
.deelnemer {
  width: 100%;
  padding-bottom: 10px;
  float: left;
}
#div-deelnemers .deelnemer-naam {
  float: left;
  width: 30%;
}
#div-deelnemers .deelnemer-info {
  float: left;
  width: 65%;
  font-family: 'PT Sans-italic';
  font-size: 14px;
  color: #808080;
  text-align: left;
}
#div-aanmelden {
  width: 100%; 
  margin-top: 10px;
  background-color: #E0FFEB; 
  font-family: Arial;
  border-radius: 10px;
  border: 1px solid #039630;             
  padding: 10px;
  color: #039630;
  float: left;
}
#div-aanmelden #div-naam, #div-aanmelden #div-deelname, #div-aanmelden #div-opmerking {
  width: 100%;
  height: 24px;
  float: left;
}
#div-aanmelden #div-deelname, #div-aanmelden #div-opmerking {
  margin-top: 12px;
}
#div-aanmelden .sel-naam, #div-aanmelden .item {
  width: 100px;
  float: left;
}
#div-aanmelden #slct_user {
  width: 240px;
  margin-left: 4px;
  float: left;
}
#div-aanmelden .rit-wel, #div-aanmelden .rit-niet {
  width: 120px;
  float: left;
}
#div-aanmelden .rit-niet {
  color: red;
}
#div-aanmelden #div-opmerking input {
  width: 240px;
  float: left;
}
#div-aanmelden #div-opmerking #save-btn {
  width: 60px;
  float: left;
  margin-left: 20px;
  display: none;
}
 #div-opmerking #save-btn .button {
  width: 60px;
  float: left;
  height: 22px;
  line-height: 20px;
} 
.groep-overig {
  width: 100%; 
  margin-top: 40px;
  background-color: #e8f4fa; 
  font-family: Arial;
  border-radius: 10px;
  border: 1px solid #0075bb;
  padding: 10px;
  color: #0075bb;
  float: left;
}
 .show-dlnmrs, .groep-overig .hide-dlnmrs {
  font-weight: bold; 
  font-size: 18px;
  line-height: 36px;
  padding: 0;
  cursor: pointer;
}
.groep-overig .hide-dlnmrs {
  display: none;
}
.groep-overig .dlnmrs {
  width: 100%; 
  margin-top: 10px;
  font-family: Arial;
  float: left;
}
.groep-overig .dlnmrs .titel {
  text-align: left;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold; 
  float: left;
  width: calc(100% - 20px);
}
.groep-overig .dlnmr {
  width: 100%;
  padding-bottom: 10px;
  float: left;
}
.groep-overig .dlnmrs .dlnmr-naam {
  float: left;
  width: 30%;
}
.groep-overig .dlnmrs .dlnmr-info {
  float: left;
  width: 65%;
  font-family: 'PT Sans-italic';
  font-size: 14px;
  color: #808080;
  text-align: left;
}




/*   ======  Tooltip class (as used for Tag-listing in Documents Listing, etc. ========= */
#tt {
  position: absolute;
  display: block; 
  font-size: 12px;
  border: 1px solid blue;
  z-index: 120;
  font-family: Arial;
}
#tt h3 {
  padding: 4px 0;
}
#tt-content {
  display: block; 
  padding: 10px;
  background: white; 
  color: #575757;
  text-align: left;
  overflow: visible;
  z-index: 120;
}
#tt-content ul {
  list-style-type:square;
  padding-left: 15px;
}
#tt-content li {
  color: #D7D7D7;
  font-size: 10px;
  padding-left: 0px;
}
#tt-content li span {
  font-size: 10px;
  padding-left: 0px;
}
#id-admin #header-wrap, #id-admin #nav-wrap, #id-admin #subnav-wrap, #id-admin #content-wrap, #id-admin #footer-wrap {
  min-width: 990px;
}  

/*   ============   ERROR PAGES   ============   */ 
.title-wrap {
  background-color: #858585;   
  width: 100%;
  padding: 10px 0; 
}
.title-wrap h1 {
  margin: 0;
  line-height: 30px;
  font-size: 30px;
  letter-spacing: 3px;
}
 #error-page #container{
  min-height: 300px;
  width: 100%; 
  text-align: left;
  margin: 0 auto;
  position: relative;
}
#content-wrap p {
  margin: 0;
  padding: 0 20px 0 20px;
  line-height: 1.5;
  font-size: 12px;
}
#error-page #content-fwidth {
  background: url(/images/error_996x490.jpg) 0 0 repeat; 
  background-size: cover;
}
#error-page #content-wrap {
  width: 100%;
  min-width: 320px;
  max-width: 1570px;
  background-color: transparent;
  padding: 0;
}
#error-page #box-container {
  margin: 0 auto;
  padding: 50px 0;
  float: none;
  width: calc(100% - 140px);
  max-width: 700px;
}
#error-page .error-msg {
  width: 100%;
  background: #FFF6F5;
  border: 1px solid #FF0000;
  font-size: 14px;
  padding: 12px 0 20px 20px;
  border-radius:  15px;
}
#error-page .error-msg h3 {
  color: #FF0000;
  padding: 0 25px;
  background: url(/images/error-icon_14.gif) 6px 5px no-repeat;
  font-size: 16.8px;
  margin: 8px 0 6px 0;
  text-align: center;
}
#error-page .error-msg .source {
  color: #000000;
  font-weight: normal; font-family: 'PT Sans-bold';
  font-size: 14px;
}
#error-page .subtitle {
  font-size: 14px;
  color: #FF0000;
  text-align: left;
  padding: 0 30px;
}
#error-page .message {
  font-weight: normal; font-family: 'PT Sans-italic';
  font-size: 12px;
  color: #FF0000;
  text-align: left;
  margin-bottom: 20px;
  padding: 0 30px;
}
#error-page .resolution {
  font-weight: normal; font-family: 'PT Sans-bold';
  font-size: 14px;
  color: #FF0000;
  text-align: left;
  margin-bottom: 20px;
  padding: 0 30px;
}
#error-page .resolution a {
  color: #336CFF;
  font-size: 16px;
  font-weight: normal; font-family: 'PT Sans-bold';
  text-decoration: none;
}
#error-page .admin {
  width: calc(100% - 40px);
  background-color: white;    
  text-align: left;
  margin-bottom: 20px;
  padding: 10px;
}
#error-page .location, #error-page .pdo {
  margin-top: 12px;
  font-size: 12px;
  font-weight: normal; font-family: 'PT Sans-bold';
  color: #FF0000;
}
#error-page .location {
  margin-bottom: 12px;
}
#error-page .query {
  font-size: 12px;
  color: #FF0000;
}
#error-page .params {
  font-size: 10px;
  margin: 10px 0 0 10px;
}

/*   ============   FOOTER SECTION   ============   */
#footer-fwidth {
  background-color: #858585;
  position: relative;
  width: 100%; 
  min-height: 30px;
} 
#footer-wrap {
  width: 100%; 
  color: #FFFFFF;          
  text-align: center;
  line-height: 28px;
}
#footer-wrap .version {
  width: 120px;
  margin-right: 12px;
  display: inline;
  float: right;
  margin: 0 10px 0 0;
  font-size: 13px;
  color: white;
}

/*============== ADMIN MENU ================== */
.draw-line {
  border-bottom: 1px solid #0075bb;
  width: 100%;
}  
#leftcol-menu {
  background-color: #F7F7F7;
  float: left;
  margin: 0;
  width: 200px;
}  
#leftcol-menu .leftcol-section {
  width: 100%;
  margin-bottom: 10px;
}
#leftcol-menu .header {
  background-color: #D7D7D7;
  padding: 0 0 0 4px;
  min-height: 24px;
  display: block;
}
#leftcol-menu .header a {
  font-family: Roboto-bold;
  font-size: 14px;
  line-height: 22px;
  color: white;
}
#leftcol-menu .link a {
  font-size: 14px;
  display: block;
  padding: 6px 0 0 12px;
}
#leftcol-menu .link-disabled {
  font-size: 14px;
  display: block;
  color: #C8C8C8;
  padding: 6px 0 0 12px;
}
#leftcol-menu .selected {
}
#leftcol-menu .pointer-left {
  float: left;
  width: 0px;
  height: 0px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #FFFFFF;
}

#leftcol-menu .selected .pointer-left {
  margin: 10px 0 0 2px;
  border-left: 8px solid #0075bb;
}
#leftcol-menu .selected a {
  float: left;
  padding-left: 2px;
  font-weight: bold; 
  width: calc(100% - 14px);
}
#leftcol-menu .tracking {
  font-family: Roboto;
  padding-left: 0px;
  font-style: italic;
}
#leftcol-menu .tracking a {
  color: #b5caff;
}
#leftcol-menu .inactive {
  color: #D7D7D7;
  font-size: 12px;
  display: block;
  padding: 6px 0 0 10px;
}

/* ====== ADMIN-LISTING HEADER =========== */
#admin-header {
  background-color: #F7F7F7;
  position: relative;
  padding: 4px;
  width: calc(100% - 8px);
}
#admin-header #header-box-left {
  float:left;
  font-size: 12px;
  text-align: left;
  width: calc(100% - 310px); 
}
#admin-header #header-box-left img {
  padding: 2px;
  width: 18px;
  height: 18px;
  float: left;
}
#admin-header #header-box-left .search-label {
  margin-left: 2px;
  font-size: 12px;
}
#admin-header #header-box-left label {
  padding-right: 18px;
}
#admin-header #header-box-left .legenda {
  float:left;
  font-size: 12px;
  text-align: left;
  width: 23%; 
}
#admin-header #header-box-right {
  float: right;
  font-size: 12px;
  text-align: right;
  width: 300px; 
}
#admin-header #header-box-right .sorted {
  margin-right: 2px;
  font-size: 12px;
}
#admin-header #header-box-right .fltr-label {
  line-height: 24px;
  padding-right: 12px;
  padding-bottom: 4px;
}
#admin-header #header-box-right .fltr-selected {
  color: #C71585;
  font-weight: bold; 
}
#admin-header #admin-header-special {
  float: right;
  width: calc(100% - 4px);
  margin-top: 8px;
  border: 1px solid #C8C8C8;
  background-color: #eaedf7;    
  padding: 4px 0;
  font-style: italic;
}
#admin-header #header-box-right select {
  float: right;
  width: 200px;
  font-size: 12px; 
}
#hdr-right select {
  float: left;
  width: 200px;
}
.fltr-wide-300 {
  padding: 4px 0;
}
.fltr-wide-300 select {
  margin-top: 4px;
  width: 300px !important;
}
.fltr-wide-300 span {
  color: #858585;
  font-style: italic;
}


/* ====== ADMIN-CONTENT SECTION =========== */
#admin-content { /* placeholder for all admin-content, except Admin-menu */
  float: right; 
  width: calc(100% - 203px); 
  border: 1px solid #D7D7D7;
  padding: 0;
  margin: 0;
}
#admin-content table th {
  font-weight: bold; 
}
#admin-content #listing table td {
  font-size: 12px;
} 
#admin-content #listing .img-link {
  overflow: hidden; 
  padding: 0;
}
#admin-content #listing .info {
  float: left;
  background-color: #F7F7F7; 
  border-top: 1px solid #D7D7D7; 
  border-bottom: 1px solid #D7D7D7; 
  margin: 12px;
  padding: 6px;
  font-size: 12px;
  font-style: italic;
} 
/*   ============  LISTING TABLE SETTINGS   ============   */
#listing table {
  width: 100%; 
  border-collapse: collapse;
  border-width: 0;
  border-spacing: 0;
  clear: both;
  table-layout: fixed; 
}
/*  table-layout: fixed; */
#listing table .align-right { 
  text-align: right;
}
#listing table .align-center { 
  text-align: center;
}
#listing table th {
  background-color: #D7D7D7;
  font-size: 12px;
  text-align:left;
  word-wrap: break-word;
  border-bottom: 1px solid #C8C8C8;
  padding: 6px 0 6px 10px;
}
#listing table th a {
  font-size: 14px;
}
#listing table th.cat {  /* CSS for (optional) Category Columns */
  padding-left: 10px;
  width:100px;
  word-wrap: break-word;
}

/* Styles for intermediate Columns is built into PHP as it requires dynamic width setting */
#listing table th.tags {  /* CSS for Tags Columns */
  padding: 0 5px 0 5px;
  width: 40px;
  text-align: left;
  font-style: italic;
}
#listing table .action {
  width: 50px;
  text-align: right;
  padding-top: 2px;
}
#listing table .action-4x {
  width: 75px;
}  
#listing table .action-4x img {
  float: right; 
  padding-left: 8px;
}  
#listing table th.action {
  padding-right: 8px;
}
#listing table th.action {
  padding-right: 8px;
}
#listing table .action-text {
  width: 60px;
  text-align: right;
  font-size: 10px;
  color: #D7D7D7;
}
#listing table td {
  vertical-align: top;
  font-size: 12px;
  padding: 3px 0 3px 10px;
  text-align:left;
  word-wrap: break-word;
}
#listing table .freq-box {
  width: 10px; 
  height: 10px; 
  margin-top: 4px;
  margin-right: 2px;
  float: left;
  background: green; 
  padding: 0;
}
#listing table .action img {
  padding-right: 6px;
}
#listing table .boolean-true {
  background: url(/images/truefalse_true_16.png) 10px 0 no-repeat;
  background-position: center top;
}
#listing table .boolean-false {
  background: url(/images/truefalse_false_16.png) 10px 0 no-repeat;
  background-position: center top;
}
#listing table .boolean-na {
  background: url(/images/truefalse_na_16.png) 10px 0 no-repeat;
  background-position: center top;
}
#listing table .boolean-true-rb {
  background: url('/images/checkboxes/rb-green-1_12.png') 10px 0 no-repeat;
  background-position: center;
}
#listing table .boolean-false-rb {
  background: url('/images/checkboxes/rb-red-0_12.png') 10px 0 no-repeat;
  background-position: center;
}
#listing table .box-checked {
  background: url(/images/checkbox-gray-1_16.png) 20px 2px no-repeat;
  background-position: center top;
}
#listing table .box-unchecked {
  background: url(/images/checkbox-gray-0_16.png) 20px 2px no-repeat;
  background-position: center top;
}
#listing table img {
  border:0;
  padding-left: 2px
}
#edit-wrap hr {
  margin-left: 10px;
  width: 225px;
}
#admin-content #edit-form #file label {
  padding-top: 4px;
}
#admin-content #edit-form .right_lbl {
  width: 450px;
  padding: 12px 15px 12px 0;
  font-size: 12px;
  text-align: left;
  margin-right: 12px;
  float: left;
  display: block;
  clear: right;
}
#admin-content #edit-form #admin-pw-msg {
  float: left;
  margin-left: 270px;
  font-size: 12px;
  color: #0075bb;
}
#admin-content #edit-form .color .input {
  width: 70px;
  border-right: 30px solid #D7D7D7;
}
#admin-content #edit-form .color .input:focus {
  border-color: #D7D7D7 !important; 
}
#admin-content #edit-form .chkbox {
  float: left;
  padding-top: 12px;
}
#admin-content #edit-form .chkbox label {
  text-align: left;
  width: auto;
  padding-top: 0px;
  padding-bottom: 4px;
}
#admin-content #edit-form .checkbox {
  float: left;
  width: auto; 
  height: 30px;
  padding: 0px 2px 2px 2px; 
  margin-top: 2px;
}
#admin-content #edit-form select.multiple {
  width: 456px;
  height: 50px;
}
#admin-content #edit-form select .choose {
  color: #0075bb;
}
#admin-content #edit-form select .blank {
  color: #D7D7D7;
}
#admin-content #edit-form .default-val a {
  float: left;
  font-size: 14px;
  margin: 10px 0 0 280px;
  font-weight: bold; 
}
#edit-wrap #messg-box {
  background: url(/images/backgrounds/form-text-bg_450x1.png) -200px 0 repeat-y; 
  min-height: 30px;
  padding:  20px 12px 10px 265px;
  text-align: left;
  font-size: 12px;
  font-weight: bold; 
  color: #0075bb; 
  clear: left;
}
#admin-content #error-msg {
  display: block;
  min-height: 30px;
  padding:  20px 12px 10px 25px;
  text-align: left;
  font-size: 12px;
  font-weight: bold; 
  color: #FF0000; 
}
#admin-content .delete-box {
  background: #FFF6F5;
  min-height: 100px;
  padding:  20px;
  text-align: left;
  font-size: 12px;
  font-weight: bold; 
  color: #FF0000; 
}
#admin-content .delete-box .delete-info {
  color: #858585;
  margin: 40px 0 20px 120px; 
}
#admin-content .delete-box .delete-info .del-confirm {
  color: #0075bb;
  font-size: 14px;
}
#admin-content #check {
  font-size: 12px;
}
.program-message {
  font-size: 12px;
}
.info-box{
  border-top: 1px solid #0075bb; 
  border-bottom: 1px solid #0075bb; 
  background: #C5E9FA;
  width: 100%;
  padding: 45px 0; 
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #0075bb; 
}
#admin-content .pauze-img {
  width: 24px;
  height: 24px;
}

/*  ====================== Recs Found & Page Numbering ========================================= */
.recpage-box {
  float: left;
  margin-top: 2px; 
  padding-left: 4px;
  width: 100%;
  max-width: 250px;
  color: #C8C8C8;
}
.recpage-box label {
  float: left;
  width: 60px;
  padding-right: 12px;
}  
.recpage-box .slct-box {
  float: left;
}
#listing-hdr .recpage-box select {
  text-align: right;
  width: 60px;
  margin-left: 4px;
}
.recs-found {
  width: 90px;
  float: left;
  clear: right;
  margin-bottom: 4px;
  font-style: italic;
}
.title {
  float: left;
  margin-left: 120px;
}
#paging {
  float: left;
  background-color: #F7F7F7;
  padding: 4px;
  border-top: 1px solid #858585;
  border-bottom: 1px solid #858585;
  width: calc(100% - 8px);
  margin: 12px 0;
  text-align: center;
  font-weight: bold
} 
#paging li {
  display: inline;
  margin: 0 3px;
}
#paging li a {
  border: 1px solid white;
  color: #858585;
  padding: 1px 6px;
}
#paging li a:hover {
  background: #0075bb;  
  border: 1px solid #0075bb;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 1px 1px 2px #858585;
}
#paging .active {
  border: 1px solid #0075bb;
  border-radius: 5px;
  box-shadow: 0px 1px 1px #858585;
  padding: 0 4px;
}

/*   ============  EDIT_FORM ============  */
#edit-wrap {/* placeholder for Add-Edit section */
  float: left;
  position: relative;
  margin-top: 40px;
  width: 100%;
}
#edit-header h2 {
  background: #D7D7D7;
  color: #0075bb;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding-left: 260px;
  text-align: left;
}
#edit-header img {
  padding: 65px 5px 0 0;
  float: right;
} 
#edit-form {
  background: url(/images/form-text-bg_450x1.png) -200px 0 repeat-y;
  padding: 12px 0;
}
#edit-form .part-1 {
  width: 240px;
  padding: 8px 15px 8px 0;
  font-size: 13px;
  text-align: right;
  margin-right: 12px;
  float: left;
  display: block;
  clear: left;
} 
#edit-header .part-1 img {
  padding: 0;
  float: none;
} 
#edit-form .part-2 {
  width: calc(100% - 280px);
  float: left;
} 
#edit-form .part-2a {
  float: left;
} 
#edit-form .part-2b {
  float: left;
  width: 40px;
} 
#edit-form .part-2c {
  float: left;
  width: 120px;
  padding-top: 12px;
  font-size: 13px;
  font-style: italic;
} 
#edit-form .part-2 a {
  float: left;
}
#edit-form .part-2 .cp-item {
  padding-top: 4px;
  float: left;
} 
#edit-form .part-2 .del-doc {
  width: 200px;
  float: left;
  margin-left: 40px;
} 
#edit-form select, #edit-form textarea, #edit-form .rb {
  margin: 4px 0 4px;
  float: left;
  width: 450px;
}
#edit-form select {
  width: 456px;
}
#edit-form textarea {
  width: 450px;
  max-width: 450px;
}
#edit-form .rb label {
  float: left;
  width: 400px;
  text-align: left;
  margin: 0 0 0 4px;
  padding: 0;
  height: 18px;
  line-height: 18px;
  display: inline;
  clear: none;
} 
#edit-form .item-help {
  margin: 0;
  width: 445px;
  text-align: left;
  line-height: 12px;
  padding: 4px;
  font-size: 13px;
  font-style: italic;
  clear: both; 
  color: #C8C8C8;
  background-color: #F7F7F7;
  border: 1px solid #0075bb;
}
#edit-form .item-js {
  margin: 0 0 6px 270px;
  width: 440px;
  text-align: left;
  line-height: 12px;
  padding: 4px;
  font-size: 13px;
  font-style: italic;
  clear: both; 
  color: #0075bb;
  background-color: #F7F7F7;
  border: 1px solid #0075bb;
}
#edit-form .help {
  float: left;
  padding-top: 8px;
  margin-left: 20px;
  font-style: italic;
  font-size: 13px;
  width: 30%;
}
#edit-form .date-container {
  padding-top: 8px;
  width: 150px;
  font-size: 13px;
}  
#edit-form .input {
  width: 450px;
  margin: 8px 0 2px 0;
  float: left;
}
#edit-form .time {
  width: 75px;
  padding-top: 0;
  border: 1px solid #0075bb;
  background-color: #F7F7F7;    
  border-radius: 5px;
  padding: 2px;
  box-shadow: 1px 1px 2px #858585;
  transition: border linear 0.5s, box-shadow linear 0.5s;
  outline: none;
  font-family: Roboto;
  font-size: 14px;
}
#edit-form #div-upz_begin_tm img, #edit-form #div-upz_eind_tm img {
  padding-top: 8px;
}
#edit-form .textarea {
  width: 450px;
  max-width: 450px;
}
#edit-form .DATE {
  float: left;
  color: #0075bb;
  font-size: 13px;
  margin: 0;
  font-weight: bold;
}
#edit-form .DATE input {
  width: 85px; 
}
#edit-form .date-disabled input {
  width: 78px; 
}
#edit-form .DATE a img {
  margin: 12px 0 0 8px;
}
#edit-form .disabled {
  color: #858585;
  font-style: italic;
}
input[type='text']:disabled, input[type='number']:disabled, .inp-disabled {
  background: #e9e9e9;
  color: #858585;
}     
#edit-wrap .error-box, #edit-wrap .info-box, #edit-wrap .warning-box {
  background: url(/images/form-text-bg_450x1.png) -200px 0 repeat-y; 
  float: left;
  width: calc(100% - 267px); 
  min-height: 25px;
  margin-top: 20px;
  padding:  12px 0 8px 265px;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  color: #FF0000; 
  background-color: #FFF6F5; 
}
#edit-wrap .info-box {
  color: #B1B3B4; 
  background-color: #e6ece6; 
  border-top: none;
  border-bottom: none;
}
#edit-wrap .warning-box {
  color: #ff5c33; 
  background-color: #e6ece6; 
}
#edit-wrap .group-hdr {
  color: #0075bb; 
  border-top: 1px dashed #0075bb; 
  margin-top: 20px;
  margin-bottom: 10px;
  padding-left: 270px;
}

/* ============= Button Wrap section ================= */
.button-wrap {
  float: left;
  width: 100%;
  background: #D7D7D7;
  text-align: center;
  padding: 4px 0;
  min-height: 24px;
}
.button-wrap .box {
  text-align: center;
  margin: 0 auto;
  padding-left: 270px;
  margin-right: 24px;
}
#listing .button-wrap .box {
  float: left;
  margin-right: 0;
}
.button-wrap .box h3 {
  padding-top: 10px;
  text-align: center;
}
.button-wrap .box .save {
  float:left;
}
.cancel {
  float: left;
}
.cancel a {
  margin-left: 40px;
  line-height: 24px;
  display: inline;
}
@media only screen and (min-width: 6000px) and (max-width: 900px) { 
}
@media only screen and (min-width: 300px) and (max-width: 599px) { 
  #vandaag-hdr .weg, vandaag-hdr .mtb, #vandaag-hdr .gravel, #vandaag-hdr .mtb,
  #vandaag-page .grp-25, #vandaag-page .grp-28, #vandaag-page .grp-30,
  #vandaag-page .dag-0, #vandaag-page .dag-1 {width: 100px; color: black; }
  #vandaag-page .dag-2 {width: 120px;}
  .knmi-uur .uur-tijd, .knmi-uur .uur-temp { width: 50px; } 
  .knmi-uur .uur-weer, .knmi-uur .uur-richting { width: 60px; } 
  .knmi-uur .uur-wind { width: 100px; } 
  .knmi-uur .uur-regen { width: 80px; } 
  .route-detail .knmi-uur .uur-regel { border-bottom: 1px solid #0075bb; }

}
@media only screen and (min-width: 0px) and (max-width: 299px) {
}