* {
  /* So 100% means 100% */
  box-sizing: border-box;
}
html { 
    width: 100vw;
    height: 100vh;
	/*overflow: hidden!important;*/
	
}
body {
	font-family: 'Lato', sans-serif;
	margin: 0;
    height: 768px;
	width: 100%;
	overflow-y: auto;
	overflow-x: auto;
	margin-right: -100px;
}
.center {
	position:absolute;
    margin: auto;
	right: 0;
	/*bottom: 0; to avoid scrollbars */
	left: 0;
	top: 0;
    width: 1347px;
	min-height: 768px;
	/*height: 100%;*/
	overflow-x: visible;
	overflow-y: visible;
	/*overflow-y: hidden !important;*/
	background-color: white;
}
.top_menu {
    position:relative;
	margin: 0;
	top: 0;
	left: 0;
	width: 317px;
	z-index: 4;
}
.side_menu, .info {
    position:relative;
	margin: 0;
	padding: 1px 1px;
	left: 0;
	z-index: 3;
	background-color: rgba(51,51,51, 0.1);
	max-width: calc(100% - 1024px);
	min-width: 315px;
	width: 315px;
	max-height: calc(100% - 132px);
	overflow-x: hidden;
}
.info {
	padding: 2px 1px 2px 2px;
	margin-top: 2px;
}
.range {
    position:absolute;
    max-width: 1024px;
	top: 768px;
    margin: 0;
	left: 317px;
	z-index: 1;
	padding: 0px 2px;
}
.range_container {
	position:relative;
	margin: 0;
	margin-bottom: 0px;
	padding: 0px 5px;
}
.floatright {
	float: right;
}
.floatleft {
	float: left;
}
.range_container * {
	font-size: 12.5px;
}
.range_container .label, .range_container select  {
	display: inline-block;
	padding: 4px;
}
.range_container .label  {
	min-width: 75px;
    max-width: 75px;
}
#range_input_values.range_container .label  {
	min-width: unset;
    max-width: unset;
}
.range_container select  {
	min-width: 200px;
    max-width: 200px;
}
.range_container  input[type=number] {
	min-width: 50px;
    max-width: 50px;
}
.range_container .label, .range_container label {
	font-weight: bold;
}

.info_profile {
	vertical-align: middle;
}
/*consistente look ff en chrome voor profielnaampje*/
#profile_name{
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: black;
	border: 1px solid rgba(0,79,38, 0.5);
	width: 311px;
	padding-left: 2px;
}
#profile_name:read-only{
	background-color: transparent;
}
#profile_name:-moz-read-only { /* For Firefox */
    background-color: transparent;
}
/*added width for profile info box; col width not equal for all browsers*/
#info{
	width: 311px;
	font-family: 'Lato', sans-serif;
	height: 7em;
	border: 1px solid rgba(0,79,38, 0.50);
	color: rgba(50,50,50, 1);
}
#info:read-only{
	background-color: transparent;
	border: 0px solid rgba(0,79,38, 0.20);
}
#info:-moz-read-only { /* For Firefox */
    background-color: transparent;
	
}
.side_menu {
	max-height: unset;
    /*height: calc(100% - 132px);*/
}
.info label {
    display: block;
	color: rgba(0,79,38, 0.7);
	font-weight: bold;
}
.container {
    position:relative;
	margin: 0;
	margin-bottom: 0px;
	padding: 2px;
}
.groupcontainer {
	display: none;
	padding: 1px 1px 1px 1px;
	border: 1px solid rgba(0,79,38, 0.5);
	margin: 1px;
}
.container *, .info *, .canvasitem *, .canvasitem * * {
	font-size: 12.5px;
}
.container .label, .container label {
	display: inline-block;
	width: 175px;
	text-overflow: ellipsis;
}
.container *, .container * *{
    color: rgba(51,51,51,0.8);
}
.container .datetime.label, .container label {
	width: 100px;
}
.container input, .container select {
    min-width: 125px;
    max-width: 125px;
}
input.date {
    max-width: 128px;
}
input.time {
    min-width: 72px;
    max-width: 72px;
}

/*
.canvasitem.selected {
	background-image: linear-gradient(to left, rgba(52,152,219,0.4), rgba(255,255,255,0.4), rgba(255,255,255,0.01));
}
.container.selected {
	background-color: rgba(52,152,219,0.25);
	background-image: linear-gradient(to right, rgba(52,152,219,0.4), rgba(255,255,255,0.4), rgba(255,255,255,0.01));
}
*/
.groupcontainer .selected {
	background-color: rgba(51,51,51,0.1);
}
.main {
    position:absolute;
    width: 1024px;
	height: 768px;
    top: 0;
	margin: 0;
	left: 317px;
	z-index: 1;
}
.content {
    position:relative;
    height: 100%;
    width: 100%;
    height: calc(100% - 10px);
    /*width: calc(100% - 10px);*/
    padding: 5px 0;
}
.layer {
    position:relative;
    height: 100%;
    width: 100%;
    padding: 5px 0;
}
#appvalues, #apparrows {
	position:absolute;
    width: 100%;
	height: 100%;
}
svg {
  position: absolute;
}
.canvasitem {
    position:absolute;
    margin: 0;
    border: none;
	height: auto;
    /*max-height: 72px;*/
    min-width: 130px;
    min-height: 19px;
    text-align: center;
    /*overflow: hidden;*/
    overflow: visible;
    vertical-align: middle;
}
.canvasitem *, .canvasitem * *{
    min-width: 20px;
	max-width: 90px;
	max-height: 224px;
	display: inline-block;
	text-overflow: ellipsis;
	color: rgba(51,51,51,0.8);
	overflow: hidden;
	/*overflow-wrap: break-word;*/
	vertical-align: middle;
}
.canvasitem input {
    width: 46px;
    margin: 1px;
    vertical-align: top;
    text-align: right;
    padding-right: 3px;
    height: 18px;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.canvasitem input,
.container input, .container select {
    background-color: rgba(255,255,255,0.3);
	background-image: none;
    border: 1px solid rgba(51,51,51,0.3);
}
.canvasitem input,
.container input {
	padding-left: 4px;
}

.canvasitem input:-moz-read-only { /* For Firefox */
	background-color: rgba(255,255,255,0.3);
	color: rgba(51,51,51,0.8);
}
.canvasitem input:read-only { 
	background-color: rgba(255,255,255,0.3);
	color: rgba(51,51,51,0.8);
}
input.changed {
	background-color: rgba(220,220,220,0.7);
}
input:required:invalid, textarea:required:invalid  {
  outline: none;
}
.canvasitem label {
    line-height: 16px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.canvasitem label.unit {
    min-width: 5px;
    /*width: 36px; what width here? what is the widest unit?*/
    padding-right: 3px;
    /*max-width: 36px;*/
    /*height: 17px;*/
    white-space: nowrap;
    text-align: left;
    text-shadow: 0px 0px 30px #ffffff, 0px 0px 30px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
    background-color: rgba(255, 255,255, 0.3);
}
.canvasitem label.icon {
	width: 90px;
	height: 18px;
}
.canvasitem div.button {
	position: absolute;
	min-width: 18px;
	left: 90px;
	/*to have additional space
	margin-right: 82px;
	margin-bottom: 54px;*/
	height: 18px;
    border: 1px solid rgba(51,51,51,0.5);
	border-radius: 50%;
	padding: 0px auto;
    cursor: pointer;
	text-shadow: 0px 0px 30px #ffffff, 0px 0px 30px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
}
.canvasitem label.single {
	width: 90px;
	white-space: nowrap;
	text-align: right;
	text-shadow: 0px 0px 30px #ffffff, 0px 0px 30px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
}
.canvasitem label.multiline {
	width: 90px;
	max-height: unset;
	text-align: right;
	text-shadow: 0px 0px 30px #ffffff, 0px 0px 30px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
}
.canvasitem.selected *, .canvasitem.studentselected *,
.container.selected *, .container.studentselected * {
	color: rgba(0,0,0,1);
}
.canvasitem.selected input, .canvasitem.studentselected input,
.canvasitem.selected div.button, .canvasitem.studentselected div.button,
.container.selected input, .container.studentselected input,
.container.selected select, .container.studentselected select  {
	background-color: rgba(255,255,230, 1);
	border: 1px solid rgba(51,51,51,0.5);
	font-weight: bold;
	font-size: 13px;
}
.canvasitem.selected input,
.container.selected input, .container.selected select {
	border: 1px solid rgba(51,51,51,1);
}
.canvasitem.selected input:-moz-read-only , .canvasitem.studentselected input:-moz-read-only { 
    background-color: rgba(225,225,225,0.7);
	color: rgba(0,0,0,1);
}
.canvasitem.selected input:read-only , .canvasitem.studentselected input:read-only  { 
    background-color: rgba(245,245,245,0.8);
	color: rgba(0,0,0,1);
}
.canvasbutton-content {
    display: none;
    position: absolute;
	top: 17px;
	left: 105px;
	text-align: left;
    white-space: nowrap;
	max-width: unset;
    max-height: unset;
	padding: 2px;
    overflow-y: visible;
	overflow-x: hidden;
	border: 1px solid rgba(51,51,51,1);
    background-color: rgba(234,234,234,0.9);
}

/*.arrow {
	stroke-width: 3;
	stroke: #f00;
}
#arrow {
	stroke-width:1;	
	stroke: #f00;
	fill: #f00;
}*/

.layer {
    position:absolute;
	top: 0;
	background-repeat: no-repeat;
	opacity: 1;
}

.hidden {
    opacity: 0;
	transition: opacity 1s ease-in;
}
.visible {
    opacity: 1;
	transition: opacity 1s ease-out 0.25s;
}

/* appbacks(s) */
.appbacks  {
	height: 100%;
	overflow-y: visible;
}
#achtergrond_dag_helder{
	background-image: url("images/Achtergronden/achtergrond_dag_helder_0000_000.png");
}
#achtergrond_dag_lichtbewolkt{
	background-image: url("images/Achtergronden/achtergrond_dag_lichtbewolkt_0000_000.png");
}
#achtergrond_dag_zwaarbewolkt{
	background-image: url("images/Achtergronden/achtergrond_dag_zwaarbewolkt_0000_000.png");
}
#achtergrond_nacht_helder{
	background-image: url("images/Achtergronden/achtergrond_nacht_helder_0000_000.png");
}
#achtergrond_nacht_lichtbewolkt{
	background-image: url("images/Achtergronden/achtergrond_nacht_lichtbewolkt_0000_000.png");
}
#achtergrond_nacht_zwaarbewolkt{
	background-image: url("images/Achtergronden/achtergrond_nacht_zwaarbewolkt_0000_000.png");
}
/* appscreen(s) */
.appscreen, .screen1, .screen2, .screen3 {
	left: 55px;
	width: calc(100% - 55px);
}
#scherm1_ondoorzichtig {
	top: 290px;
	background-image: url("images/Schermen/scherm1_ondoorzichtig_0055_290.png");
	height: calc(100% - 290px);
}
#scherm1_poreus  {
	top: 290px;
	background-image: url("images/Schermen/scherm1_poreus_0055_290.png");
    height: calc(100% - 290px);
}
#scherm1_transparant  {
	top: 290px;
	background-image: url("images/Schermen/scherm1_transparant_0055_290.png");
    height: calc(100% - 290px);
}
#scherm2_ondoorzichtig  {
	top: 304px;
	background-image: url("images/Schermen/scherm2_ondoorzichtig_0055_304.png");
    height: calc(100% - 304px);
}
#scherm2_poreus  {
	top: 304px;
	background-image: url("images/Schermen/scherm2_poreus_0055_304.png");
    height: calc(100% - 304px);
}
#scherm2_transparant  {
	top: 304px;
	background-image: url("images/Schermen/scherm2_transparant_0055_304.png");
    height: calc(100% - 304px);
}
#scherm3_ondoorzichtig  {
	top: 318px;
	background-image: url("images/Schermen/scherm3_ondoorzichtig_0055_318.png");
    height: calc(100% - 318px);
}
#scherm3_poreus  {
	top: 318px;
	background-image: url("images/Schermen/scherm3_poreus_0055_318.png");
    height: calc(100% - 318px);
}
#scherm3_transparant {
	top: 318px;
	background-image: url("images/Schermen/scherm3_transparant_0055_318.png");
    height: calc(100% - 318px);
}
/* applight(s) */
#led_boven  {
	top: 305px;
	left: 5px;
	background-image: url("images/Belichting/LED_boven_0004_305.png");
	width: calc(100% - 5px);
    height: calc(100% - 305px);
}
#hps  {
	top: 333px;
	left: 0px;
	background-image: url("images/Belichting/HPS_0000_333.png");
	height: calc(100% - 333px);
}
#led_tussen  {
	top: 484px;
	left: 43px;
	background-image: url("images/Belichting/LED_tussen_0043_484.png");
	width: calc(100% - 43px);
    height: calc(100% - 484px);
}
/* apptool(s) */
#vernevelaar  {
	top: 337px;
	left: 0px;
	background-image: url("images/Kasuitrusting/vernevelaar_0000_337.png");
	height: calc(100% - 337px);
}
#luchtslurven  {
	top: 674px;
	left: 108px;
	background-image: url("images/Kasuitrusting/luchtslurven_0108_674.png");
	width: calc(100% - 108px);
    height: calc(100% - 674px);
	z-index: 0;
}
#buisrailverwarming  {
	top: 716px;
	left: 175px;
	background-image: url("images/Kasuitrusting/buisrailverwarming_0175_716.png");
	width: calc(100% - 175px);
    height: calc(100% - 716px);
	z-index: 0;
}
/* appcrop(s) */
#tomaat  {
	top: 437px;
	left: 62px;
	background-image: url("images/Gewas/tomaat_0062_437.png");
	width: calc(100% - 62px);
    height: calc(100% - 427px);
}
#roos  {
	top: 589px;
	left: 44px;
	background-image: url("images/Gewas/roos_0044_589.png");
	width: calc(100% - 44px);
    height: calc(100% - 589px);
}
#gerbera  {
	top: 532px;
	left: 51px;
	background-image: url("images/Gewas/gerbera_0051_532.png");
	width: calc(100% - 51px);
    height: calc(100% - 532px);
}
#komkommer {
	top: 438px;
	left: 64px;
	background-image: url("images/Gewas/komkommer_0064_438.png");
	width: calc(100% - 64px);
	height: calc(100% - 438px);
}
#paprika {
	top: 438px;
	left: 64px;
	background-image: url("images/Gewas/paprika_0043_433.png");
	width: calc(100% - 64px);
	height: calc(100% - 438px);
}
#phalaenopsis {
	top: 525px;
	left: 69px;
	background-image: url("images/Gewas/phalaenopsis_0069_525.png");
	width: calc(100% - 69px);
	height: calc(100% - 525px);
}
#alstroemeria {
	top: 592px;
	left: 58px;
	background-image: url("images/Gewas/alstroemeria_0058_592.png");
	width: calc(100% - 58px);
	height: calc(100% - 592px);
}
#anthurium {
	top: 569px;
	left: 77px;
	background-image: url("images/Gewas/anthurium_0077_569.png");
	width: calc(100% - 77px);
	height: calc(100% - 569px);
}
#freesia {
	top: 626px;
	left: 71px;
	background-image: url("images/Gewas/freesia_0071_626.png");
	width: calc(100% - 71px);
	height: calc(100% - 626px);
}
#sla {
	top: 604px;
	left: 71px;
	background-image: url("images/Gewas/sla_0071_604.png");
	width: calc(100% - 71px);
	height: calc(100% - 604px);
}
#ficus {
	top: 607px;
	left: 55px;
	background-image: url("images/Gewas/ficus_0055_607.png");
	width: calc(100% - 55px);
	height: calc(100% - 607px);
}
#petunia {
	top: 595px;
	left: 78px;
	background-image: url("images/Gewas/petunia_0078_595.png");
	width: calc(100% - 78px);
	height: calc(100% - 595px);
}
#appfront  {
	top: 284px;
	left: 53px;
	background-image: url("images/Voorgrond/kaspoten_0053_284.png");
	width: calc(100% - 53px);
    height: calc(100% - 284px);
}
/* appicon(s) */
.co2 {
	min-width: 28px;
	background-image: url("images/Klimaat iconen/CO2.png");
	background-repeat: no-repeat;
	background-position: 69px 2px;
	background-size: 20px;
}
.temperatuur {
	min-width: 16px;
	background-image: url("images/Klimaat iconen/temperatuur.png");
	background-repeat: no-repeat;
	background-position: 81px 1px;
	background-size: 7px;
}
.vochtigheid {
	min-width: 13px;
	background-image: url("images/Klimaat iconen/vochtigheid.png");
	background-repeat: no-repeat;
	background-position: 79px 0px;
	background-size: 10px;
}
.windsnelheid {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/windsnelheid.png");
	background-repeat: no-repeat;
	background-position: 72px 0px;
	background-size: 17px;
}
.condens {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/condens.png");
	background-repeat: no-repeat;
	background-position: 74px 0px;
	background-size: 18px;
}
.convectie {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/convectie.png");
	background-repeat: no-repeat;
	background-position: 74px 0px;
	background-size: 17px;
}
.instraling {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/instraling.png");
	background-repeat: no-repeat;
	background-position: 75px 1px;
	background-size: 15px;
}
.straling {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/straling.png");
	background-repeat: no-repeat;
	background-position: 75px 1px;
	background-size: 15px;
}
.warmteoverdracht {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/warmteoverdracht.png");
	background-repeat: no-repeat;
	background-position: 75px 1px;
	background-size: 15px;
}
.verdamping {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/verdamping.png");
	background-repeat: no-repeat;
	background-position: 70px 2px;
	background-size: 18px;
}
.som {
	min-width: 30px;
	background-image: url("images/Klimaat iconen/som.png");
	background-repeat: no-repeat;
	background-position: 70px 1px;
	background-size: 20px;
}
#gh-window-left {
	top: 25px;
	left: 162.5px;
	width: calc(100% - 162.5px);
    height: calc(100% - 25px);
}
#gh-window-right {
	top: 25px;
	left: 280px;
	width: calc(100% - 280px);
    height: calc(100% - 25px);
}
.gh-window g.window {
	fill: gray;
	stroke: black;
}

.active {
    stroke: #ffff00;
}
.tooltip {
  position: absolute;
  text-align: center;
  z-index: 10;
}
.tooltip p {
  background-color: rgba(255,255,255,1);
  padding: .5em 1em;
  font: 12px sans-serif;		
  line-height: 17px;
  color: rgb(1,74,108);
}

hr { 
	border-top:0;
}
a {
    cursor: pointer;
	text-decoration: underline;
}
.wiki, .wiki label, .wiki .label {
    cursor: help;
}
/* top menu */
.menudropbtn {
    background-color: #3498DB;
    color: white;
    padding: 4.5px 4.5px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    width: 79px;
}
.menudropbtn:hover, .menudropbtn:focus {
    background-color: #2980B9;
}

.menudropdown {
    position: relative;
    display: inline-block;
}

.menudropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    max-width: 300px;
    overflow-y: auto;
	overflow-x: hidden;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9;
    max-height: 660px;
	padding-bottom: 4px;
}
.menudropdown-content a {
    color: black;
    padding: 2px 4px;
    text-decoration: none;
    min-width: 500px;
    display: inline-block;
	text-align: left;
}
.menudropdown a:hover {background-color: #ddd;}

.submenudropdown {
    color: black;
    font-size: 12.5px;
	padding: 2px 5px;
    border: none;
    min-width: 120px;
    cursor: pointer;
	z-index: 9;
}

.groupmenucheckbox {
	display: none;
	min-width: 500px;
	/*padding-left: 12px; jp*/
}
.groupmenucheckbox hr { 
    display: inline-block;
    width: 300px;
    border-style: solid;
    border-bottom-width: 0.7px;
	border-left:0;
	border-right:0;
}
.menucheckbox {
	display: inherit;
	min-width: 500px;
	padding: 0 0 0 5px;
}
.menucheckbox label { /*, .accordeon label, .accordeon span { jp*/
	font-size: 12.5px;
	line-height: 16px;
    vertical-align: text-top;
}

/* NB! none gaat voor show indien beide classes voorkomen */
.show {
	display: block;    
	z-index: 9;
}
.none, label.none {
    display: none;
}

div.accordeon {
    cursor: pointer;
	width: 300px;
	padding: 0 4px;
    height: 18px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
	transition: 0.4s;
}
.fullwidth {
	width: 100% !important;
}
div.accordeon.active, div.accordeon:hover {
    background-color: rgba(51,51,51,0.1);
	font-weight: bold;
}
div.accordeon:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    color: rgba(51,51,51,0.8);
    font-size: 13px;
    float: right;
    margin-left: 5px;
    /*margin-right: 18px;*/
}
div.accordeon.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.wikibutton {
	background-color: #34B233;
    color: white;
	font-weight: bold;
    border: 1px solid #34B233;	/* logo green: rgb(0,79,38), grey: rgb(51,51,51)*/
	border-radius: 5px;
	margin: 1px 1px 1px 1px;
    padding: 2px 4px 0px 4px;
    cursor: pointer;
	height: 32px;
	float: right;
}
.runbutton {
	background-color: #34B233;
	color: white;
	font-weight: bold;
	font-size: 15px;
	border: 1px solid #34B233; /* logo green: rgb(0,79,38), grey: rgb(51,51,51)*/
	border-radius: 5px;
	float: left;
	margin: 1px 1px 1px 1px;
	padding: 2px 28px 0px 28px;
	cursor: pointer;
	width: 310px;
	height: 32px;
}
.running {
	background-color: #EAEAEA;
	border-color: #EAEAEA;
}


/* inloggen: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_login_form_modal */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button.submit {
    background-color: #19A43C;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button.submit:hover {
    opacity: 0.8;
}
/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}
button.cancel {
    width: auto;
    padding: 10px 16px;
    color: #19A43C;
    background-color: white;
	float: left;
}

.logo {
    position:absolute;
	top: 5px;
	left: 960px;
	cursor: pointer;
    /*background-image: url("images/logo.png");
	background-repeat: no-repeat;
	background-size: auto 70px;*/
}
.canvaslogo {
	width: 55px;
	height: 70px;
	/*filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#fffff')";
	filter: url(#drop-shadow);*/
	-webkit-filter: drop-shadow(0px 0px 10px #fff);
	filter: drop-shadow(0px 0px 10px #fff);
}

.wurlogo {
	width: 55px;
	height: 40px;
	/*filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5, OffY=5, Color='#fffff')";
	filter: url(#drop-shadow);*/
	-webkit-filter: drop-shadow(0px 0px 10px #fff);
	filter: drop-shadow(0px 0px 10px #fff);

}

/* Center the image */
.modalimgcontainer {
    text-align: center;
    margin: 20px 0 10px 0;
    position: relative;
}
img.avatar {
    width: 80px;
    /*border-radius: 50%;*/
}
.modalcontainer {
    text-align: center;
    padding: 5px 20px 20px 20px;
	min-height: 50px;
	max-height: 300px;
	overflow: auto;
}
.modalcontainer label {
	font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
	float: left;
}
.heading {
	font-family: Verdana,sans-serif;
    font-size: 15px;
	font-weight: bold;
    line-height: 2;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 11; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 20px;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto 5% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 65%; /* Could be more or less, depending on screen size */
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}   
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/*--- d3 ---*/
g {
	background-color: white;
}
.tick line{
    fill: none;
    stroke: black;
    opacity: 0.2;
    stroke-dasharray: 5,5;
}
.tick text{
    font-family: sans-serif;
    font-size: 12px;
    color: #333;
}
.area {
    fill-opacity: 0.5;
}
.domain {
    fill: none;
    stroke: #666666;
    shape-rendering: optimizeQuality;
}
path.line {
    fill: none;
    stroke-width: 2;
	stroke: #34B233;
}
.x.label, .y.label{
    font-family: sans-serif;
    font-size: 9px;
    color: #333;
}
.caption {
padding: 0px!important;
	background-color: rgba(140,140,140, 1) !important;
    text-align: left !important;
	color: white !important;
	font-size: 12px !important;
	font-weight: bold !important;
	font-style: italic !important;
}

.captionlarge {
	width: 64px !important;
}