@import url(https://fonts.googleapis.com/css?family=Roboto:500);

:root {
	--color-green: rgb(162,155,70);
	--color-green-light: #a2fbeb;
	--color-green-trans-8: rgba(162,155,70,.8);
	--color-green-trans-5: rgba(162,155,70,.5);
	--color-green-trans-1: rgba(162,155,70,.1);
	--color-yellow: rgb(212,205,120);
	--color-yellow-trans-5: rgba(212,205,120, .5);
	--color-yellow-trans-1: rgba(212,205,120, .1);
	--color-dark: rgba(50,50,50,0.7);
	--google-blue: #4285f4;
	--google-button-active-blue: #1669F2;
	--color-input-failure: #ed1c24;
	--color-error: #ed1c24;
	--color-soft-error: #5d1c24;
	/*--color-error-light: #fd8ca4;*/
	--color-error-light: #e2fbeb;
	--color-error-trans-1: rgba(237, 28, 36, .1);
	--color-error-trans-5: rgba(237, 28, 36, .5);
	font-family: 'Work Sans';
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(worksans.ttf);
}

td {

}

@keyframes input-failure {
  0%, 100% {
    margin-left: 0px;
    margin-right: 0px;
  }
  20% , 60% {
    margin-left: 15px;
    margin-right: 0px;
  }
  40% , 80% {
    margin-right: 15px;
    margin-left: 0px;
  }
}

body {
	margin: 0;
	font-size: 0.9em;
}

.hidden {
	display: none !important;
}

.header {
	height: 65;
	background-color: rgba(255,255,255,0.8);
	margin: 0;
	padding: 0;
}

.row {
	min-width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.header .row .logo {
	float: left;
}
.header .row .hamburger {
	display: none;
}

.header .row nav {
	float: right;
	padding-top: 5px;
}

.header .row nav ul li {
	list-style: none;
	display: inline-block;
}

ul {
	padding-inline-start: 0;
	text-align: center;
	margin-left: 0;
	margin-right: 0;
	padding-left: 20px;
	padding-right: 20px;
}

li.button a {
	font-family: "Work Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	padding-left: 22px;
	padding-right: 22px;
}

li.button a span {
	background-color: var(--color-green);
	padding: 13px 29px;
	color: white;
	border-radius: 4px;
}

li.button a:hover span {
	background-color: var(--color-yellow);
	color: var(--color-green);
	border-radius: 4px;
	transition-duration: 500ms;
	transition-property: background-color, color;
}

.header img.logo {
	margin-top: 5px;
	margin-left: 10px;
	height: 55px;
}

.bodywrap {
	background-image: url("../img/windmolens-landschap-bg-home.jpg");
	background-repeat: repeat-y;
	background-size: cover;
	min-height: 100%;
	height: auto;
}

div.center {
	position: relative;
	margin: 0 auto;
	width: min-content;
}

div.center form {
	margin: 0;
}

.page {
	display: flex;
	flex-wrap: nowrap;
  	font-family: 'Work Sans', sans-serif;
	min-height: calc(100% - 65px);
	font-size: 13px;
}

.page>.tabs {
	min-height: calc(100% - 65px);
	width: 250px;
	float: left;
	background-color: rgba(255,255,255,0.8);
}

.page>.tabs a {
	text-decoration: none;
	font-weight: bold;
}

.page>.tabs_content {
	width: calc(100% - 250px);
	float: right;
	background-color: rgba(255,255,255,0.6);
	min-height: calc(100% - 65px);
	padding-left: 10px;
	padding-top: 5px;
	padding-right: 5px;
}

.page>.tabs>.tab {
	padding: 10px;
}

.page>.tabs>.tab.complete {
	background-image: url('../img/check.gif');
	background-position: 95% center;
	background-repeat: no-repeat;
	
}

.page>.tabs>.tab:hover {
	background-color: rgba(0,0,0,0.1);
}

.page>.tabs>.tab.active, .page>.tabs>.tab.active:hover {
	background-color: rgba(0,0,0,0.1);
	background-color: var(--color-green-trans-8);
	color: white;
}

.page>.tabs_content>.tab {
	padding: 10px;
}

.page>.tabs_content>.tab input {
	padding: 10px;
	border: 0px;
  	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	border: 1px solid var(--color-green);
	border-radius: 4px;
}

.page>.tabs_content>.tab input.dt-string {
	width: 600px;
}

.page>.tabs_content>.tab input.dt-number {
	width: 100px;
}



form li {
	position: relative;
	list-style: none;
	display: block;
	margin-top: 30px;
	margin-bottom: 10px;
}

form li.button {
	margin-top: 50px;
	white-space: nowrap;
}

form li > div {
	margin: auto;
	display: block;
	width: fit-content;
	white-space: nowrap;
}

form li > div > div {
	position: relative;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}

form li div.input {
	border: 1px solid var(--color-green);
	border-radius: 4px;
}

form li label {
	position: absolute;
	color: var(--color-green);
  	font-family: 'Work Sans', sans-serif;
	font-size: 10px;
	display: block;
	left: 5px;
	top: 5px;
}

form li input {
	padding: 10px;
	padding-top: 20px;
	border: 0px;
	width: 300px;
	border-radius: 4px;
  	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
}

form li input.zipcode {
	width: 100px;
}

form li input.number {
	width: 80px;
}

form li input.code {
	width: 140px;
}


form li input[type=password] {
	width: 200px;
}

form li.errors  {
	padding-top: 0px;
	padding-bottom: 0px;

}

form li.errors p {
  	font-family: 'Work Sans', sans-serif;
  	color: var(--color-input-failure);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

form li .failure {
	border: 2px solid var(--color-input-failure) !important;
	animation-name: input-failure;
	animation-duration: 0.3s;
}

form li .failure label {
	color: var(--color-input-failure);
}

form li > p {
  	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: var(--color-green);
}

form li > p.small {
	margin-top: 5px;
	font-size: 12px;
}

form li > p.hr {
	border-top: 1px solid var(--color-green);
	padding-top: 20px;
	margin-top: 40px;
}

form li > p.hr::before {
}

div#p_dashboard .card_container {
	width: 90%;
}

div#p_dashboard .card {
	padding-top: 20px;
	min-height: 80%;
}


div#p_dashboard .card .tabs {
	width: 100%;
	height: auto;
	display: flex;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}

div#p_dashboard .card .tab {
	width: auto; 
	height: auto;
	display: inline-block;
	list-style: none;
	padding: 2px 8px 5px 7px;
	border: 0;
	margin: 0;
	cursor: pointer;
	color: var(--color-green);
	font-weight: 800;
	background: var(--color-yellow-trans-1);
  	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	border-top: 1px solid var(--color-green-trans-1);
	border-left: 1px solid var(--color-green-trans-1);
	border-right: 1px solid var(--color-green-trans-1);
	border-bottom: 1px solid var(--color-yellow-trans-1);
	border-radius: 8px 8px 0px 0px;
}

div#p_dashboard .card .tab:hover {
	background-color: var(--color-yellow-trans-5);
}

div#p_dashboard .card .tab.active, div#p_dashboard .card .tab.active:hover {
	/*background-color: var(--color-yellow-trans-5);*/
	background-color: var(--color-green-trans-1);
	color: white;
}

div#p_dashboard .center {
	width: 90%;
}

div#p_dashboard .quickstatus {
	position: relative;
	width: 100%;
	min-height: 160px;
	background: var(--color-yellow-trans-1);
	border-radius: 0 8px 8px 8px;
	border: 1px solid var(--color-green-trans-1);
	display: flex;
	flex-direction: row;

}

div#p_dashboard .quickstatus > div {
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	margin-top: 20px;
	margin-left: 0;
}

div#p_dashboard .quickstatus .labeleddata {
	position: relative;
	margin: 0px;
	padding: 0px;
	min-width: 100px;
}

div#p_dashboard .quickstatus > div > div {
	margin-left: 10px;
	display: inline-block;
}
div#p_dashboard .quickstatus .icon {
	height: 100px;
	width: 90px;
	background-size: contain;
	background-repeat: no-repeat;
}

div#p_dashboard .quickstatus .label {
	position: absolute;
	color: var(--color-green);
  	font-family: 'Work Sans', sans-serif;
	font-size: 10px;
	display: block;
	top: -12px;
}

div#p_dashboard .quickstatus .data {
	padding-top: 12px;
	padding-bottom: 10px;
	margin: 0px;
	border: 0px;
  	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
}

div#p_dashboard .chartnav {
	width: 100%;
	padding-top: 20px;
}

div#p_dashboard #chartcanvas {
	margin-top: 40px;
	width: 100%;
	min-height: 200px;
	height: calc(100% - 232px);
}

div#p_dashboard .chartnav p {
	margin: 0;
}

div#p_dashboard .chartnav p.title {
	margin-top: 3px;
}

div#p_dashboard .chartnav ul {
	float: right;
	margin: 0;
	display: flex;
	width: min-content;
	white-space: nowrap;
}

div#p_dashboard .chartnav li {
	display: inline-block;
	list-style: none;
	padding: 2px 8px 5px 7px;
	border: 0;
	margin: 0;
	cursor: pointer;
}

div#p_dashboard .chartnav li.nav {
	color: var(--color-green);
	font-weight: 800;
}

div#p_dashboard .chartnav li.nav:hover {
	background-color: var(--color-yellow-trans-5);
}

div#p_dashboard .chartnav li.nav.active {
	font-weight: 2000;
	background-color: var(--color-green-trans-1);
	color: white;
	border-radius: 4px;
}

div#p_dashboard .chartnav {
  	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	font-weight: 1000;
}

div#p_dashboard .chart {
	width: 100%;
	min-height: 300px;
}

div#p_dashboard .left, div#p_dashboard .right {
	min-width: calc(50% - 81px);
	width: calc(50% - 81px);
	margin: 0;
	padding: 0;
	overflow: hide;
}

div#p_dashboard .right {
	padding-right: 20px;
}

div#p_dashboard .right > div {
	float: right;
}

div#p_dashboard .circle {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 2px solid var(--color-green);
	margin: 0;
	margin-top: 10px !important;
	background: radial-gradient(white, var(--color-green-light) 20%, var(--color-green-trans-5) 80%, var(--color-green) 100%);
}

div#p_dashboard .circle.error {
	background: radial-gradient(var(--color-error), var(--color-error-trans-1));
	border: 2px solid var(--color-error);
}

div#p_dashboard .circle.dormant {
	background: radial-gradient(white, var(--color-green-light));
	border: 2px solid var(--color-green-trans-1);
}

div#p_dashboard .circle.animate {
	animation-name: heartbeat-bg;
	animation-iteration-count: infinite;
	animation-duration: 1.5s;
}

div#p_dashboard .circle.olddata {
	background: radial-gradient(var(--color-error), var(--color-error-trans-1));
	border: 2px solid var(--color-error);
}

div#p_dashboard .circle.olddata p.label {
	color: var(--color-soft-error);
}

div#p_dashboard .circle.olddata p.data {
	color: var(--color-soft-error);
}

div#p_dashboard .circle.olddata.animate {
	animation-name: heartbeat-olddata-bg;
	animation-iteration-count: infinite;
	animation-duration: 1.5s;
}

div.relative {
	position: relative;
}

div.absolute {
	position: absolute;
}

div#p_dashboard .circle div p {
	width: 110px;
	text-align: center;
}

div#p_dashboard .circle div.now {
	top: 32px;
}

div#p_dashboard .circle div p.label {
}
div#p_dashboard .circle div p.data {
}

div#p_dashboard .circle div.now p.data {
	font-size: 30px;
	font-weight: 1000;
}
div#p_dashboard .circle div.today {
	top: 105px;
}
div#p_dashboard .circle div.today p.label {
	position: relative;
	padding: 0;
}
div#p_dashboard .circle div.today p.data {
	position: absolute;
	top: -20px;
	padding: 0;
}


.floatleft {
	float: left
}

.floatright {
	float: right
}


TH {
     font-size: 10.0pt;
     background-color: var(--color-green);
 }

.tablesaw-cell-label .COLH {
	color: var(--color-green)!important;
}

@media (max-width: 39.9375em) {
.tablesaw-stack tbody td:first-child {
      background-color: var(--color-green);
      margin-top: 20px;
}

.tablesaw-stack tbody td:first-child a {
      color: white!important;
      font-weight: bold;
}

.tablesaw-stack tbody td:first-child div {
      color: white!important;
      font-weight: bold;
}
}

.COLH {
     color: white;
     font-style: regular;
     font-family: Helvetica,Arial;
}

 .TEXT {
     font-size: 10.0pt;
     color: black;
     font-style: regular;
     font-family: Helvetica,Arial;
 }
 .SMALLBUTTON {
     font-size: 8.0pt;
     font-family: Helvetica,Arial;
     font-style: regular;
     padding-top: 0em;
     padding-bottom: 0em;
     padding-left: 0em;
     padding-right: 0em;
 }
 TD {
     font-size: 10.0pt;
     color: black;
     font-style: regular;
     font-family: Helvetica,Arial;
 }
 TD.SL  { font-family: Verdana,Helvetica,Arial; text-decoration:none; font-size :0.8em;
 	        	border: solid; border-width: 0 1 1 0;  }
 TH.SL  { font-family: Verdana,Helvetica,Arial; text-decoration:none; font-size :0.8em;
	        	border: solid; border-width: 0 2 2 0;  }
 TD.CS {font-size: 7.0pt; border:solid; border-width:0 1 1 0;} 
 TH.CS {font-size: 8.0pt; border:solid; border-width:0 1 1 0;}
 TABLE.CS {border:solid; border-width:1 0 0 1;}
 /*UL {margin-top: 0px; margin-bottom: 0px;}*/
 /*LI {margin-top: 0px; margin-bottom: 0px;}*/
 A.togglelink { color: #149b46; text-decoration: underline; }

TABLE.editTable TR:hover {
        background-color: #dbdbdb;
}
TABLE.righttable {
	float: right;
}

.editTable tr.odd {
	background-color: #ededed;
}
.editTable tr.even {
	background-color: #fafafa;
}

.editTable tr.error:hover,
.editTable tr.error {
	background-color: #fd8ca4;
}


div.fileinput input[type="file"] {
	display: none;
}

div.form:not(.has_duration) .has_duration {
	display: none;
}

div.form,
div.fileinput {
	width: 98%;
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
}

div.fileinput div.title {
	position: relative;
	border-top: 2px solid var(--color-green);
	border-bottom: 2px solid var(--color-green);
	border: 2px solid var(--color-green);
	width: 100%;
	padding-top: 5px;
	padding-bottom: 3px;
	margin-bottom: 10px;
	cursor: pointer;
	user-select: none;
	background: var(--color-green-trans-1);
}

div.fileinput div.title div:first-child {
	float: left;
}

div.fileinput div.title div{
	float: right;
}

div.fileinput div.info {
	user-select: text;
}

div.fileinput.collapsed div.title {
	background: rgba(1,1,1,0.1);
	border: 2px solid rgba(100,100,100,0.5);
}

div.fileinput div.title h2::before {
	position: absolute;
	right: 5px;
	top: 5px;
	text-align: right;
	font-size: 0.8em;
	font-weight: 100;
}

div.fileinput.collapsed div.title h2::before {
	content: " [ klik op deze balk om de bestanden weer te geven ]";
}

div.fileinput:not(.collapsed) div.title h2::before {
	content: " [ verbergen ]";
}

div.fileinput div.title h2 {
	padding: 0px;
	margin: 0px;
	font-size: 1.2em;
	text-align: center;
}


div.fileinput.collapsed div.preview {
	display: none;
}

div.form>.title {
	font-size: 1em;
	display: block;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 10px;
	width: 100%;
}

div.form select,
div.form input,
div.form input[type="text"],
div.fileinput input[type="text"] {
	margin-top: 5px;
	height: 40px;
	margin-right: 10px;
	padding-left: 10px;
	max-width: 100%;
}

div.form input[type="text"] {
	width: 400px;
}

div.form input[type="text"].narrow {
	height: 30px;
	width: 150px;
}

div.form input[type="text"].wide {
	height: 30px;
	width: 100%;
}

div.form input[type="text"].number {
	height: 30px;
	width: 100px;
}

div.form input[type="text"].currency {
	height: 30px;
	width: 100px;
	text-align: right;
	padding-right: 10px;
}

div.form ul {
	margin-top: 4px;
	margin-right: 10px;
}


div.fileinput div.input {
	border: 2px solid green;
	background: #eee;
	width: 80px;
	height: 80px;
	display: flex;
	margin-right: 20px;
	margin-left: 20px;
	align-items: left;
	justify-content: center;
	cursor: pointer;
	margin-bottom: 20px;
}

.cssbutton.plus {
	width:50px;
	height:50px;
	align-self: center;
	background:
		linear-gradient(#fff,#fff),
		linear-gradient(#fff,#fff),
		var(--color-green);
	background-position:center;
	background-size: 50% 5px,5px 50%;
	background-repeat:no-repeat;
	cursor: pointer;
}

.cssbutton.plus.small {
	width:34px;
	height:34px;
	margin-top: 7px;
	background-size: 50% 4px,4px 50%;
}

.cssbutton.button {
	min-width:120px;
	max-width:200px;
	padding-left: 10px;
	padding-right: 10px;
	height:30px;
	margin-right: 20px;
	align-self: center;
	border: 3px solid var(--color-green-light);
	cursor: pointer;
	border-radius: 30px;
	text-align: center;
	padding-top: 8px;
	font-weight: bold;
	font-size: 1.1em;
	background-color: #eee;
	color: #ccc;
	transition: all .3s;
}

.cssbutton.button.small {
	min-width:60px;
	max-width:120px;
	padding-left: 5px;
	padding-right: 5px;
	height:20px;
	margin-right: 10px;
	border: 3px solid var(--color-green-light);
	cursor: pointer;
	border-radius: 20px;
	text-align: center;
	padding-top: 3px;
	font-weight: bold;
	font-size: 0.9em;

}

.floatleft {
	float: left;
	padding-top: 6px;
	clear: none;
}

.floatright {
	float: right;
	clear: none;
}

.cansubmit .cssbutton.button {
	background-color: var(--color-green-trans-1);
	color: var(--color-dark);
	border: 3px solid var(--color-green);
}

.cssbutton.alt {
	background:
		linear-gradient(#000,#000),
		linear-gradient(#000,#000);
	background-position:center;
	background-size: 50% 2px,2px 50%; /*thickness = 2px, length = 50% (25px)*/
	background-repeat:no-repeat;
}

.cssbutton.radius {
	border-radius:50%;
}

div.fileinput div.preview {
	width: 100%;
	display: flex;
	min-height: 100px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: left;
}

div.fileinput div.preview div.file {
	position: relative;
	margin-bottom: 50px;
	margin-right: 20px;
	align-self: flex-start;
	border: 2px solid green;
	background: #eee;
	width: 150px;
	height: 150px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}


div.fileinput div.preview div.file div.ul_done {
	display: none;
}

div.fileinput div.preview div.file div.ul_edit,
div.fileinput div.preview div.file div.ul_info {
	position: absolute;
	display: block;
	border-radius:50%;
	top: 5px;
	left: 5px;
	width: 25px;
	height: 25px;
	background-color: rgba(50,50,50,0.5);
	font-size: 19px;
	font-weight: 999;
	color: white;
	text-align: center;
	cursor: pointer;
	user-select: none;
}

div.fileinput div.preview div.file div.ul_info {
	font-style: italic;
	font-weight: 1000;
	font-family: "serif";
}

div.fileinput div.preview div.file div.ul_remove {
	position: absolute;
	display: block;
	border-radius:50%;
	top: 5px;
	right: 5px;
	width: 25px;
	height: 25px;
	background-color: rgba(50,50,50,0.5);
	font-size: 19px;
	font-weight: 999;
	color: white;
	text-align: center;
	cursor: pointer;
	user-select: none;
}

div.fileinput div.preview div.file.ok div.ul_done {
	display: block;
	position: absolute;
	top: 55px;
	left: 65px;
	width: 20px;
	height: 40px;
	display: inline-block;
	transform: rotate(45deg);
	border-bottom: 10px solid var(--color-green);
	border-right: 10px solid var(--color-green);
}

div.fileinput div.preview div.file.ok progress {
	display: none !important;
}

div.fileinput div.preview div.file progress {
	position: absolute;
	bottom: 10px;
	left: 15%;
	min-width: 70%;
	height: 18px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
  background-image:
    -webkit-linear-gradient(-45deg, 
                            transparent 33%, rgba(0, 0, 0, .1) 33%, 
                            rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top, 
                            rgba(255, 255, 255, .25), 
                            rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]::-webkit-progress-value::after {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  border-radius: 100%;
  right: 7px;
  top: 7px;
  background-color: white;
}

div.fileinput div.preview div.file.err {
	border: 2px solid var(--color-error);
	color: var(--color-error);
}

div.fileinput div.preview div.file.err progress {
	color: var(--color-error);
}

div.fileinput div.preview div.file.err progress:before {
	position: absolute;
	content: "Fout bij uploaden";
	width: 128px;
	height: 65px;
	top: -90px;
	text-align:center;
	left: -12px;
	font-weight: 800;
	font-size: 1.4em;
	display: block;
	border: 1px solid red;
	color: white;
	padding-top: 20px;
	background: var(--color-error-trans-1);
}

div.fileinput div.preview div.file div.info {
	position: absolute;
	top: 160px;
	left: 0px;
	width: 100%;
	text-align: center;
}

div#DA_ImageViewer {
	display: block;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	user-select: none;
	z-index: 200;
}

div#DA_ImageViewer>div {
	position: absolute;
	left: 5%;
	top: 5%;
	width: 90%;
	height: 90%;
	background-color: #ccc;
	border: 2px solid var(--color-green);
}

div#DA_ImageViewer div.img {
	position: relative;
	display: flex;
	width: 98%;
	height: 90%;
	left: 1%;
	top: 1%;
	background-color: #eee;
	border: 2px solid #ddd;
	align-items: center;
	justify-content: center;
}

div#DA_ImageViewer div.img img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
}

div#DA_ImageViewer div.name {
	position: absolute;
	top: 92%;
	height: 30px;
	width: 100%;
	text-align: center;
}

div#DA_ImageViewer div.close {
	display: block;
	border-radius:50%;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 25px;
	height: 25px;
	background-color: red;
	font-size: 19px;
	font-weight: 999;
	color: white;
	text-align: center;
	cursor: pointer;
	user-select: none;
}

div#DA_ImageViewer div.next,
div#DA_ImageViewer div.prev {
	display: block;
	border-radius:50%;
	position: absolute;
	top: calc(50% - 12px);
	width: 50px;
	height: 50px;
	//background-color: rgba(50,50,50,0.7);
	background-color: var(--color-green-trans-5);
	font-size: 38px;
	font-weight: 999;
	text-align: center;
	cursor: pointer;
	user-select: none;
	z-index: 299;
}

div#DA_ImageViewer div.next {
	right: 20px;
}

div#DA_ImageViewer div.next::after {
  position: absolute;
  content: "";
  top: 8px;
  right: -2px;
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid white;
  border-right: 16px solid transparent;
}

div#DA_ImageViewer div.prev::after {
  position: absolute;
  content: "";
  top: 8px;
  left: -2px;
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid transparent;
  border-right: 16px solid white;
}

div#DA_ImageViewer div.prev {
	left: 20px;
	right: 20px;
}


div#DA_Modal {
	display: block;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	user-select: none;
	z-index: 100;
}

div#DA_Modal>div {
	position: absolute;
	left: 5%;
	top: 5%;
	width: 90%;
	height: 90%;
	background-color: #ccc;
	border: 2px solid var(--color-green);
	background: var(--color-green);
}

div#DA_Modal div.content {
	position: relative;
	display: block;
	width: calc(100% - 30px);
	height: calc(100% - 40px);
	left: 3px;
	top: 35px;
	background-color: #eee;
	border: 2px solid #ddd;
	align-items: center;
	justify-content: center;
	padding-left: 10px;
	padding-right: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
}

div#DA_Modal div.title {
	position: absolute;
	top: 5px;
	color: #000;
	font-size: 1.2em;
	height: 30px;
	width: 100%;
	text-align: center;
}

div#DA_Modal div.close {
	display: block;
	border-radius:50%;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 25px;
	height: 25px;
	background-color: red;
	font-size: 19px;
	font-weight: 999;
	color: white;
	text-align: center;
	cursor: pointer;
	user-select: none;
}


div#calendar {
}

div#calendar .multiple_emp {
	background-color: var(--color-green-light)!important;
}

div#calendar .multiple_emp:hover {
	background-color: var(--color-green-light)!important;
}

div#calendar .multiple_emp .fc-event-main {
	color: black!important;
}

div#calendar .fc-event {
	overflow: hidden;
	min-height: 20px;
}

div#calendar .fc-event:hover .fc-event-main {
	height: auto;
	//background-color: #000!important;
}

div#calendar .fc-event:hover {
	overflow: visible;
}

div#calendar div.fc-timegrid-event-harness:hover {
	z-index: 9!important;
}
	
div.event div.title {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--color-green);
}

div.event div>span:first-child {
	padding-top: 5px;
	padding-right: 10px;
	font-weight: bold;
	vertical-align: top;
	transform: translateY(5px);
}

div.event div span {
	vertical-align: top;
	padding-top: 5px;
	display: inline-block;
}
	
div.event .tokenlist,
div#calendar .tokenlist {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	vertical-align: middle;
	padding-top: 5px;
	margin-top: 0px;
}

div.event .tokenlist .token,
div#calendar .tokenlist .token {
	display: inline-block;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 5px;
	margin-right: 3px;
	color: white;
	border: 1px solid black;
	border-radius: 2px;
	background: var(--color-green)
}

div#calendar .traveltime {
}

div#calendar .traveltime.warn {
	background-color: var(--color-error-trans-1)!important;
}

.form.deleted div.label,
.form.deleted input,
.form.deleted textarea,
.form.deleted select,
.form.deleted a
{
	color: #aaa;
	pointer-events: none;
}

.form:not(.modified) .ifmodified {
	display: none;
}

.form.modified .ifmodified {
	display: block;
}

.form.modified .ifmodified.inline {
	display: inline-block;
}

div.form.full {
	min-height: 95%
}

div.formblock {
	flex-basis: calc(100%);
	display: inline-block;
}

div.form.sidebyside .formblock {
	flex-basis: calc(50%);
}

div.formblock.gallery {
	width: 180px;
}

div.formline {
	flex-basis: 100%;
}

div.formline>div,
div.formline input,
div.formline ul,
div.formline div.label {
	display: inline-block;
}

div.formline div.wide {
	min-width: 350px;
}

div.formline div.label.right {
	display: inline-block;
	text-align: right;
	padding-right: 10px;
	width: auto;
}

div.formline>div {
	min-width: 200px;
	flex-basis: 20%;
	vertical-align: top;
	margin-top: 15px;
	margin-bottom: 10px;
}

div.formline textarea {
	min-width: 300px;
	width: 100%;
	min-height: 200px;
}

div.text_pre {
	display: block;
	unicode-bidi: embed;
	font-family: monospace;
	white-space: pre;
	font-size: 0.8em;
}

.margin-left-20 {
	margin-left: 20px;
}

.scTableStandard {
	display: flex;
	flex-flow: row wrap;
	border-left: 1px solid var(--color-dark);
	transition: 0.5s;
	width: 100%;
}

.scTableStandard div {
	box-sizing: border-box;
}

.scTableStandard>.thead {
}

.scTableStandard>.thead>.tr {
	display: table-row;
	background-color: var(--color-green);
}

.scTableStandard>.thead>.tr>.td {
	display: table-cell;
	background-color: var(--color-green);
	border: 1px solid #999;
	padding: 3px 10px;
	font-weight: bold;
}

.scTableStandard>.tbody {
	display: table-row-group;
}

.scTableStandard>.tbody>.tr {
	display: table-row;
}

.scTableStandard>.tbody>.tr>.td {
	display: table-cell;
}


/* Toggle switch */

label.toggleswitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
  margin-bottom: 0px;
}

/* Hide default HTML checkbox */
labbel.toggleswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
label.toggleswitch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

label.toggleswitch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

label.toggleswitch input:checked + .slider {
  background-color: var(--color-green);
}

label.toggleswitch input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

label.toggleswitch input:checked + .slider:before {
  -webkit-transform: translateX(36px);
  -ms-transform: translateX(36px);
  transform: translateX(36px);
}

/* Rounded sliders */
label.toggleswitch .slider.round {
  border-radius: 25px;
}

label.toggleswitch .slider.round:before {
  border-radius: 50%;
}

.icon.camera {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Ccircle  fill='rgb(20,155,70)' cx='255.811' cy='285.309' r='75.217'/%3E%3Cpath fill='rgb(20,155,70)' d='M477,137H352.718L349,108c0-16.568-13.432-30-30-30H191c-16.568,0-30,13.432-30,30l-3.718,29H34 c-11.046,0-20,8.454-20,19.5v258c0,11.046,8.954,20.5,20,20.5h443c11.046,0,20-9.454,20-20.5v-258C497,145.454,488.046,137,477,137 z M255.595,408.562c-67.928,0-122.994-55.066-122.994-122.993c0-67.928,55.066-122.994,122.994-122.994 c67.928,0,122.994,55.066,122.994,122.994C378.589,353.495,323.523,408.562,255.595,408.562z M474,190H369v-31h105V190z'/%3E%3C/g%3E%3C/svg%3E%0A");
	height: 30px;
	width: 30px;
	margin-right: 5px;
	margin-left: 5px;
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-4px);
	fill: var(--color-green);
}

div.FORM div.FILTER div.LABEL {
	height: 15px;
	font-weight: bold;

}

div.FORM div.FILTER {
	margin-right: 20px;
}
div.FORM div.REFRESH {
	margin-top: 14px;
}

div.tab_header {
	text-align: left;
	font-size: 1em;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 25px;
        background-color: rgb(240,240,240);
}

div.tab_header.ontop {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
        background-color: rgb(240,240,240);
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 5px;
	height: 25px;
	border-bottom: 1px solid var(--color-green);
	z-index: 99;
}

.tab_container {
	padding-bottom: 40px;
}

.tab_container .tab_tabs {
        background-color: rgb(240,240,240);

}

.tab_container .tab_tabs {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	min-height: 15px;
	border-bottom: 1px solid var(--color-green);
	margin-bottom: 10px;
	user-select: none;
}

.tab_container .tab_title {
	align-self: flex-start;
	border-left: 1px solid var(--color-green);
	border-right: 1px solid var(--color-green);
	border-top: 1px solid var(--color-green);
	border-bottom: 1px solid var(--color-green);
	border-radius: 3px 3px 0 0;
	padding: 2px 5px 3px 5px;
	margin: 0;
	cursor: pointer;
	transform: translateY(1px);
}

.tab_container .tab_title:hover {
	background-color: var(--color-green-trans-1);
}

.tab_container .tab_title.active:hover,
.tab_container .tab_title.active {
	background-color: var(--color-green-trans-5);
}

.tab_container .tab_page {
	display: none;
}


._magic_lookup_container {
	position: relative;
	width: 100%;
}

._magic_lookup_container ._magic_lookup_results {
	position: absolute;
	top: 100%;
	left: 0;
	width: auto;
	z-index: 99;
	border: 1px solid #d4d4d4;
	background-color: #fff;
	margin: 0;
	padding: 0;
}

._magic_lookup_container ._magic_lookup_results li {
	cursor: pointer;
	padding: 2px;
	margin: 0;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
	text-align: left;
}

._magic_lookup_container ._magic_lookup_results li:hover {
	background-color: #ccc;
}