#loader {
			  position: relative;
			  //margin: auto;
			  left: 49%;
			  //top: 40%;
			  z-index: 1;
			  width: 80px;
			  height: 80px;
			  margin: -25px 0 0 -25px;
			  border: 5px solid #f3f3f3;
			  border-radius: 50%;
			  border-top: 5px solid #3498db;
			  
			  -webkit-animation: spin 2s linear infinite;
			  animation: spin 2s linear infinite;
			}

			@-webkit-keyframes spin {
			  0% { -webkit-transform: rotate(0deg); }
			  100% { -webkit-transform: rotate(360deg); }
			}

			@keyframes spin {
			  0% { transform: rotate(0deg); }
			  100% { transform: rotate(360deg); }
			}

			/* Add animation to "page content" */
			.animate-bottom {
			  position: relative;
			  -webkit-animation-name: animatebottom;
			  -webkit-animation-duration: 1s;
			  animation-name: animatebottom;
			  animation-duration: 1s
			}

			@-webkit-keyframes animatebottom {
			  from { bottom:-100px; opacity:0 } 
			  to { bottom:0px; opacity:1 }
			}

			@keyframes animatebottom { 
			  from{ bottom:-100px; opacity:0 } 
			  to{ bottom:0; opacity:1 }
			}
			
			#info {
				position: absolute;
				width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family: Monospace;
				font-size: 13px;
				font-weight: bold;
				text-align: center;
				z-index: 1;
			}

			#menu {
				position: absolute;
				bottom: 20px;
				width: 100%;
				text-align: center;
			}

			.element {
				width: 213px;
				height: 165px;
				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
				border: 1px solid rgba(127,255,255,0.25);
				text-align: center;
				//cursor: default;
				background-color: rgba(0,27,127,0.35);
			}
			.chosen {
				//background-color: rgba(153, 51, 51,1.0);//rgba(0,27,127,1.0); //rgba(255, 102, 0,0.95);
				border: 3px solid rgba(0,255,255,1.0);
				box-shadow: 0px 0px 32px rgba(0,255,255,1.0);
			}
			.element:hover {
				box-shadow: 0px 0px 22px rgba(0,255,255,1.0);
				border: 3px solid rgba(0,255,255,0.75);
			}

				.element .number {
					position: absolute;
					top: 20px;
					right: 20px;
					font-size: 12px;
					color: rgba(127,255,255,0.75);
				}

				.element .symbol {
					position: absolute;
					top: 5px;
					left: 0px;
					right: 0px;
					font-size: 22px;
					font-weight: bold;
					color: rgba(255,255,255,0.75);
					text-shadow: 0 0 10px rgba(0,255,255,0.95);
				}
				.element .symbol2 {
					position: absolute;
					top: 5px;
					left: 0px;
					right: 0px;
					font-size: 22px;
					font-weight: bold;
					color: rgba(255,255,255,0.75);
					text-shadow: 0 0 10px rgba(0,0,0,0.95);
				}

				.element .details {
					position: relative;
					//top: 30px;
					bottom: 15px;
					left: 0px;
					right: 0px;
					font-size: 18px;
					color: rgba(127,255,255,0.75);
				}

			//button {
				//color: rgba(127,255,255,0.75);
				//background: transparent;
				//outline: 1px solid rgba(127,255,255,0.75);
				//border: 0px;
				//padding: 5px 10px;
				//cursor: pointer;
			//}
			//button:hover {
			//	background-color: rgba(0,255,255,0.5);
			//}
			//button:active {
			//	color: #000000;
			//	background-color: rgba(0,255,255,0.75);
			//}
			
			.population {
			  color: rgba(255, 0, 0,0.95);//#fff;
			  stroke: #ff0000;
			  fill: rgba(255, 0, 0,0.95);//white;
			}
			.energy {
			  color: rgba(255, 193, 7,0.95);//#fff;
			  stroke: #ffc107;
			  fill: rgba(255, 193, 7,0.95);//white;
			}
			.area {
			  color: rgba(0, 153, 0,0.95);//#fff;
			  stroke: #009900;
			  fill: rgba(0, 153, 0,0.95);//white;
			}
			.land {
			  color: rgba(0, 153, 0,0.95);//#fff;
			  stroke: #009900;
			  fill: rgba(0, 153, 0,0.95);//white;
			}
			.food {
			  color: rgba(204, 102, 0,0.95);//#fff;
			  stroke: #cc6600;
			  fill: rgba(204, 102, 0,0.95);//white;
			}
			
			.climate-stress {
			  color: rgba(255, 102, 204,0.95);//#fff;
			  stroke: #ff66cc;
			  fill: rgba(255, 102, 204,0.95);//white;
			}
			
			.water-use {
			  color: rgba(51, 153, 255,0.95);//#fff;
			  stroke: #3399ff;
			  fill: rgba(51, 153, 255,0.95);//white;
			}
			
			#container{
			background-position: center center;
				  background-repeat: no-repeat;
				  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#007474), to(#000));
				  background: -webkit-radial-gradient(circle, #007474, #000 );
				  background: -moz-radial-gradient(circle, #007474, #000);
				  background: -ms-radial-gradient(circle, #007474, #000);
			}
			
			#time-line-canvas{
				background-color: rgba(255,255,255,0.5);
				z-index=1;
				//stroke: #000000;
			}
			.timeline{
				//background-color: rgba(155,255,255,1.0);
				//fill : black;
				//color: rgba(0, 153, 0,0.75);//#fff;
			  //stroke: #000000;
			}
			
			.uielement {
				width: 300px;
				height: 600px;
				background-color: rgba(255,255,255,1.0);
				//box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
				//border: 1px solid rgba(127,255,255,0.25);
				//text-align: center;
				//cursor: default;
			}
			
			.card_element {
				width: 240px;
				height: 320px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				background-color: rgba(255,255,255,1.0);
				text-align: center;
				border-radius: 10px;
				//cursor: pointer;
			}
			
			
			.card_element .details {
					position: relative;
					top: 0px;				
					left: 0px;
					right: 0px;
					
				}
			.transparent_card {
				background-color: rgba(255,255,255,0.1);
			}
			.card_element:hover {
				box-shadow: 7px 7px 7px rgba(0,255,255,0.75);
				//border: 1px solid rgba(255,0,0,0.75);
			}
			
			
			.card_element .card_title {
					position: absolute;
					height: 220px;
					top: 0px;
					left: 0px;
					right: 0px;
					font-size: 18px;
					font-weight: bold;
					color: rgba(0,0,0,0.75);
					text-shadow: 0 0 10px rgba(60,60,60,0.95);
				}
			.card_info {
					position: absolute;
					bottom: 5px;
					z-index:1;
					right: 5px;
					font-size: 20px;
					font-weight: bold;
					color: rgba(0,0,0,0.5);
					text-shadow: 0 0 0px rgba(60,60,60,0.95);
					cursor: pointer;
				}
				
				.class_Water{
					background-color: #fff;
					font-size: 26px;
					line-height: 90%;
					font-weight: bold;
					display: flex;align-items: center;
				}
				.class_Land{
					background-color: #fff;
					font-size: 26px;
					line-height: 90%;
					font-weight: bold;
					display: flex;align-items: center;
				}
				.class_Energy{
					background-color: #fff;
					font-size: 26px;
					line-height: 90%;
					font-weight: bold;
					display: flex;align-items: center;
				}
				.class_Food{
					background-color: #fff;
					font-size: 26px;
					line-height: 90%;
					font-weight: bold;
					display: flex;align-items: center;
				}
				.class_Agriculture_and_food{
					background-color: #fff;
					font-size: 26px;
					line-height: 90%;
					font-weight: bold;
					display: flex;align-items: center;
				}
				
				.class_Other{
					background-color: #fff;
					font-size: 26px;
					line-height: 90%;
					font-weight: bold;
					display: flex;align-items: center;
				}
				.class_Climate{
					background-color: #fff;
					font-size: 26px;
					line-height: 90%;
					font-weight: bold;
					display: flex;align-items: center;
				}
				
				.c_Water{
					background-color: #00bcd4;
					border-radius: 10px;
					
				}
				.c_Land{
					background-color: #4caf50;
					border-radius: 10px;
				}
				.c_Food{
					background-color: #cc6600;
					border-radius: 10px;
				}
				.c_Energy{
					background-color: #ffc107;
					border-radius: 10px;
				}
				.c_Agriculture_and_food{
					background-color: #44af50;
					border-radius: 10px;
				}
				.c_Other{
					background-color: #ffadf1;
					border-radius: 10px;
				}
				.c_Climate{
					background-color: #c883f7;
					border-radius: 10px;
				}
				.cl_Water{
					background-color: #00bcd4;
					border-bottom-radius: 10px;
				}
				
				.cl_Land{
					background-color: #4caf50;
					border-radius: 10px;
				}
				.cl_Food{
					background-color: #cc6600;
					border-radius: 10px;
				}
				.cl_Energy{
					background-color: #ffc107;
					border-bottom-radius: 10px;
				}
				.cl_Agriculture_and_food{
					background-color: #44af50;
					border-bottom-radius: 10px;
				}
				.cl_Other{
					background-color: #ffadf1;
					border-bottom-radius: 10px;
				}
				.cl_Climate{
					background-color: #c883f7;
					border-bottom-radius: 10px;
				}
				.card_val {
				  color: rgba(0, 0, 0,1.0);//#fff;
				  stroke: #000000;
				  fill: rgba(1, 1, 1,1.0);//white;
				}
				.card_val_empty {
				  color: rgba(100, 100, 100,0.5);//rgba(209, 209, 209,1.0);//#fff;
				  stroke: rgba(100, 100, 100,0.5);//#d1d1d1;
				  fill: rgba(100, 100, 100,0.5);//rgba(209, 209, 209,1.0);//white;
				}
				
			.background_map_element {
				width: 1560px;
				height: 1250px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				background-color: rgba(127,255,255,0.10);
				//background-image: url("images/bg.gif");
				//background-repeat: repeat;
				text-align: center;
				border-radius: 10px;
				//cursor: default;
				font-size: 28px;
					font-weight: bold;
					color: rgba(255,255,255,0.75);
					text-shadow: 0 0 10px rgba(255,255,255,0.75);
			}
			.background_map_element .background_cards_element_title {
				position: absolute;
				height: 220px;
				top: 0px;
				left: 0px;
				right: 0px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.75);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}
			.background_detail_element {
				width: 1560px;
				height: 1250px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				background-color: rgba(127,255,255,0.10);
				//background-image: url("images/bg.gif");
				//background-repeat: repeat;
				text-align: center;
				border-radius: 10px;
				//cursor: default;
				font-size: 28px;
					font-weight: bold;
					color: rgba(255,255,255,0.75);
					text-shadow: 0 0 10px rgba(255,255,255,0.75);
			}
			.background_detail_element .background_cards_element_title {
				position: absolute;
				height: 220px;
				top: 0px;
				left: 0px;
				right: 0px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.75);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}
			.indicators_view_element {
				width: 1560px;
				height: 650px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				//background-color: rgba(127,255,255,0.10);
				background-color: rgba(255,255,255,1.0);
				//background-image: url("images/bg.gif");
				//background-repeat: repeat;
				text-align: center;
				border-radius: 10px;
				//cursor: default;
				font-size: 28px;
					font-weight: bold;
					color: rgba(0,0,0,0.75);
					//text-shadow: 0 0 10px rgba(0,0,0,0.75);
			}
			.indicators_view_element .background_cards_element_title {
				position: absolute;
				height: 220px;
				top: 0px;
				left: 0px;
				right: 0px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.75);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}
			.policy_cards_element {
				width: 1490px;
				height: 1450px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				background-color: rgba(127,255,255,0.10);
				//background-image: url("images/bg.gif");
				//background-repeat: repeat;
				text-align: center;
				border-radius: 10px;
				//cursor: default;
				font-size: 28px;
					font-weight: bold;
					color: rgba(255,255,255,0.75);
					text-shadow: 0 0 10px rgba(255,255,255,0.75);
			}
			.policy_cards_element .background_cards_element_title2 {
				position: absolute;
				height: 220px;
				top: 0px;
				left: 0px;
				right: 0px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.75);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}	
			.tree_model_element {
				width: 1860px;
				height: 2550px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				//background-color: rgba(127,255,255,0.10);
				background-color: rgba(255,255,255,1.0);
				//background-image: url("images/bg.gif");
				//background-repeat: repeat;
				text-align: center;
				border-radius: 10px;
				//cursor: default;
				font-size: 28px;
					font-weight: bold;
					color: rgba(0,0,0,0.75);
					//text-shadow: 0 0 10px rgba(0,0,0,0.75);
			}
			.tree_model_element .background_cards_element_title {
				position: absolute;
				height: 220px;
				top: 0px;
				left: 0px;
				right: 0px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.75);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}
			
			.values_view_element {
				width: 630px;
				height: 2150px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				//background-color: rgba(127,255,255,0.10);
				background-color: rgba(255,255,255,1.0);
				//background-image: url("images/bg.gif");
				//background-repeat: repeat;
				text-align: center;
				border-radius: 10px;
				//cursor: default;
				font-size: 28px;
					font-weight: bold;
					color: rgba(0,0,0,0.75);
					//text-shadow: 0 0 10px rgba(0,0,0,0.75);
			}
			.values_view_element .background_cards_element_title {
				position: absolute;
				height: 220px;
				top: 0px;
				left: 0px;
				right: 0px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.75);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}
			.state_play_element {
				width: 1490px;
				height: 650px;
				box-shadow: 0px 0px 12px rgba(60,60,60,0.75);
				//border: 1px solid rgba(60,60,60,0.25);
				background-color: rgba(127,255,255,0.10);
				//background-color: rgba(255,255,255,1.0);
				//background-image: url("images/bg.gif");
				//background-repeat: repeat;
				text-align: center;
				border-radius: 10px;
				//cursor: default;
				font-size: 28px;
					font-weight: bold;
					color: rgba(255,255,255,0.75);
					text-shadow: 0 0 10px rgba(255,255,255,0.75);
			}
			.on-it {
				
				box-shadow: 12px 12px 12px rgba(0,255,255,0.75);
				
			}
			
			
			.state_play_element .background_cards_element_title {
				position: absolute;
				height: 220px;
				top: 0px;
				left: 0px;
				right: 0px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.75);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}
			
			
			.shadow-text{	
				text-shadow: 0 0 10px rgba(255,255,255,0.75);
			}	
				
				
			.treenode {
				cursor: pointer;
			  }
			 
			  .treenode circle {
				fill: #fff;
				stroke: steelblue;
				stroke-width: 1.5px;
			  }
			 
			  // .link {
				// fill: none;				
				// stroke: #555;
				// stroke-opacity: 0.4;
				// stroke-width: 1.5px;
			  // }	
			  
			  // .link-invisible {
				// fill: none;
				// stroke: none;
				// stroke-opacity: 0.0;
				// stroke-width: 1.5px;
			  // }
				
			.treelink {
				fill: none;
				stroke: #555;
				stroke-opacity: 0.4;
				stroke-width: 1.5px;
			  }
			
			.treelink-invisible {
				fill: none;
				stroke: none;
				stroke-opacity: 0.0;
				stroke-width: 1.5px;
			  }
			  
			//.horizon-unity  {
			//	fill: #ff0000;background-color: rgba(255,0,0,1.0);
			//}
			 .tbar {
			  //color: rgba(51, 153, 255,0.75);//#fff;
			  //stroke: #3399ff;
			  //fill: rgba(125, 125, 125,0.45);//white;
			}
			
			.tooltip {
				
				position:absolute;
			}
			
			.gt-bar{
			  //color: rgba(51, 153, 255,0.75);//#fff;
			  //stroke: #3399ff;
			  //fill: rgba(0, 255, 255,0.4);//white;
			}
			
			.gt_Water{
				fill: rgba(0, 188, 212,1.0);//#00bcd4;
				border-radius: 5px;
			}
			.gt_Land{
				fill: rgba(76, 175, 80,1.0);//#4caf50;
				border-radius: 5px;
			}
			.gt_Energy{
				fill: rgba(255, 193, 7,1.0);//#ff9800;
				border-radius: 5px;
			}
			.gt_Food{
				fill: rgba(204, 102, 0,1.0);//#44af50;
				border-radius: 5px;
			}
			.gt_Other{
				fill: rgba(255, 173, 241,1.0);//#ffadf1;
				border-radius: 5px;
			}
			.gt_Climate{
				fill: rgba(200, 131, 247,1.0);//#c883f7;
				border-radius: 5px;
			}
			.gt0_Water{
				fill: rgba(0, 188, 212,0.35);//#00bcd4;
				border-radius: 5px;
			}
			.gt0_Land{
				fill: rgba(76, 175, 80,0.35);//#4caf50;
				border-radius: 5px;
			}
			.gt0_Energy{
				fill: rgba(255, 193, 7,0.35);//#ff9800;
				border-radius: 5px;
			}
			.gt0_Food{
				fill: rgba(204, 102, 0,0.35);//#44af50;
				border-radius: 5px;
			}
			.gt0_Other{
				fill: rgba(255, 173, 241,0.35);//#ffadf1;
				border-radius: 5px;
			}
			.gt0_Climate{
				fill: rgba(200, 131, 247,0.35);//#c883f7;
				border-radius: 5px;
			}
			
			#policy-submit:disabled{
				background-color: rgba(125, 125, 125,0.35);
			}
			
			.res-text{
				font-size: 40px;
				font-weight: bold;
				color: rgba(0,0,255,1.0);
				text-shadow: 0 0 10px rgba(60,60,60,0.95);
			}
			.gy{
			stroke-width: 3.5px;
			}
			.gx{
			stroke-width: 3px;
			}
			
			#tooltip-info{
				background-color: rgba(255, 255, 255,0.75);
				color: rgba(0,0,0,1.0);
			}