/* Definition of Lines (Rows) of the website (this is the main design)*/
#line1 {height: 50px; margin: 0px auto 0px auto;}
#line2 {height: 26px; margin: 0px auto 12px auto;}
#line4 {height: 505px;}
#line5 {height: 35px;}
#line6 {height: 35px;}
/*[id^='line'] { border: 1px solid blue; } !* For visualizing line's frames (for testing)*!*/

.wrapper2 {
	margin: 0px auto 0px auto;
	width: 99%;
	height: inherit;
	display: block;
	/*clear:both;*/
}

.step_line {/*This works for SETEP 1, 2, 3 line*/
	width: 100%;
	display: inline-flex;
	/*height: 26px;*/
}
.step_box {display: block; width:100px; text-align:center; border:1px solid #285971; border-radius: 5px;
	background-color:#2e6884; font-size: 16px; color: #fff; cursor: help;
}

.step_title_text {
	padding: 0px 5px 0px 5px;
	color: #000;
	font-size: 18px;
}

@charset "utf-8";
.padInput {
	padding: 4px;
	border: 1px solid #999;
}

/*table*/
table.table-style {margin:1em 0;}
/*table.table-style tr:nth-child(2n+1) {background-color:#f6f6f6;}*/
table.table-style td {
	text-align:left;
	min-height:40px;
	color:#333333;
	padding:4px !important;
}
table.table-style tr {
 	padding-bottom: 3em;
}
/* CSS Document */
/****** FONTS ********/

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2012 Fontspring
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Typedepot
 * License URL: http://www.fontspring.com/fflicense/typedepot
 *
 */

@font-face {
	font-family: 'BandaRegularRegular';
	src: url('fonts/Banda_regular-webfont.eot');
	src: local("☺"),
	url('fonts/Banda_regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('fonts/Banda_regular-webfont.woff') format('woff'),
	url('fonts/Banda_regular-webfont.ttf') format('truetype'),
	url('fonts/Banda_regular-webfont.svg#BandaRegularRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/****** RESET ********/
/* http://meyerweb.com/eric/tools/css/reset/ */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,hgroup,menu,nav,section,summary,time,mark,audio,video{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 12px;
	font: inherit;
	vertical-align: baseline;
}

.header {
	width: 120px;
	display: inline-block;
	text-align: center;
	/*margin: 2px 0px 0px 2px;*/
	border: 1px solid #285971;/*#248f8f;/*#999999*/
	border-radius: 3px;
	background-color: #2e6884;/* #3c85aa; /*#2d637f;/*#2eb8b8;*/
	/*font-family: 'Oswald', Arial, Helvetica, sans-serif;*/
	/*line-height:1.2;*/
	font-weight:normal;
	color: #fff;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,hgroup,menu,nav,section{
  display:block;
}
nav ul{
  list-style:none;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}

/****** DEFAULT STYLES *******/
html{
	margin-bottom: 1px;
	min-height: 100%;
	height:100%;
}
body {
	background: #ffffff;
	/*color:#4f5050;*/
	color:#323434;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	line-height: 1.5;
	height:100%;
	text-align:left;
}
html>body {
	font-size: 14px;
}
p, blockquote, footer , em{
	font-size: 1em;
	line-height: 1.5;
}
.skip { /* observed at L:231 */
	font-size: 12px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: #D85A1A;
}
.resizedTextArea {
    width: 682px;
    height: 50px;
}

blockquote{padding:0px 10px 20px 20px; margin:0; font-size:18px; font-family:Arial, Helvetica, sans-serif; color:#999; }

p{margin:0 0 0px 0;}

a{color:#d85a1a; text-decoration:none;}
a:hover{color:#7d110c; text-decoration:none;}

h1, h2, h3, h4, h5, h6{font-family: 'Oswald', Arial, Helvetica, sans-serif; line-height:1.2; font-weight:normal; color:#7d110c;}
h1{font-size:30px; font-weight:300; text-transform:uppercase; color:#2d637f;}
h2{
	font-size:20px;
	font-weight:300;
	text-transform:uppercase;
	/*margin-bottom:5px;*/
}
h3{font-size:20px;
	margin-bottom:5px;
	font-weight:300;
}
h4{
	font-size:16px;
	font-weight: 200;
	display: inline;
}
h5{font-size:14px;}
h6{font-size:12px;}

/* Lists */
ol, ul{ margin:0 0 20px 25px;}
li{line-height:1.5; margin:0 0 7px 0; padding:0;}

/***** Common Addative Classes *****/
.left, .float_left  { float:left;}
.right, .float_right { float:right;}
/*.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}*/
.clear-left, .clear_left { clear:left; } .clear-right, .clear_right { clear:right; }
.hide  { display:none	} .block {display:block !important;} .inline {display:inline !important;}

.align_right    { text-align:right;	  }
.align_left     { text-align:left;	  }
.align_center   { text-align:center;  }
.align_justify  { text-align:justify; }

strong, b, .bold {font-weight: bold;}
em, i, .italic {font-style:italic; font-family: Arial, Helvetica, sans-serif;}

sup, sub 		{   line-height:0;}


/**** Page Header ****/
#siteHeader hgroup h1{ float:left; display:inline; width:360px; font-family:'BandaRegularRegular', Arial, Helvetica, sans-serif; line-height:1; font-size: 50px; font-weight:normal; color:#2f2f2f;}
#siteHeader hgroup h2{ float:right; display:inline; width:640px; font-family:'BandaRegularRegular', Arial, Helvetica, sans-serif; line-height:16px; text-align:right; font-size:16px; color:#2f2f2f; margin:0; padding:0; text-transform:none;}
#siteHeader hgroup h3{ float:right; display:inline; width:640px; font-family: 'Oswald', sans-serif; font-size:27px; text-align:right; text-transform:uppercase; font-weight: 300; line-height:30px; margin:0; padding:0; color:#2d637f;}

/***** Navigation ******/
#navRow{ display:block; height:30px; width:1200px; background:#d85a1a; }

/** Main Navigation **/
#mainNav{ width:847px; float:left; display:inline;}
#mainNav ul{width:845px; margin:0 0 0 2px; padding:0; float:left; }
#mainNav ul li{float:left; display:block; height:30px; line-height:30px; padding:0; margin:0;}
#mainNav ul li a{display:block; height:30px; padding:0 12px 0 12px; font-weight:bold; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; text-decoration:none; background:#d85a1a;
		-webkit-transition: all .4s ease;
		-moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
		transition: all .4s ease;}
#mainNav ul li a:hover{color:#ffffff; text-decoration: none; background:#2d637f;}

#loginNav{float:left; display:inline; height:33px; background:#7d110c; width:153px; text-align:center; font-size:12px; font-weight:bold; color:#fff; line-height:33px;}
#loginNav a{color:#ffffff; text-decoration:none; text-transform:uppercase;}
#loginNav a:hover{text-decoration:underline;}

/**** Content Frame ****/
#mainFrame{
	border:1px solid #bfbfbf; /*#b3b3b3; #a6a6a6;*/
	border-radius: 5px;
	background-color: #d9d9d9;/*#cccccc;*/
}


.mainFrameRightBck{background:url(images/contentAreaBckgrd.gif) repeat-y;}
#userSubmission{font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:40px;}
#userSubTextArea{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	margin: 30px 100px 30px 100px;
}

/**** Main Content Area ****/

section#content h1{color:#2d637f; margin-bottom:18px;}
/*section#content article{}*/

/****Suggestion Main Content Area ****/
#suggMainCol{
	margin:3px 20px 0 0;
	padding: 5px 0px 5px 0px;
	width:575px; 
	float:left; 
	display:inline;
}


/*.step1{margin: 0px auto 0px auto; width: 1000px}*/

/**** Right Side Suggestion Column****/
#suggSideCol{
	float: left;
	display: inline;
	margin: 0;
	width: 400px;
	font-size: 12px;
	padding: 15px 0px 15px 0px;
}

/**** Right Side Suggestion Column****/
#suggScrollCol{
	float: left;
	display: inline;
	margin: 0;
	width: 400px;
	height: 400px;
	font-size: 12px;
	padding: 15px 0px 15px 0px;
	overflow-y: scroll;
}
#suggScrollCol .suggBox{
	font-family: 'BandaRegularRegular', Arial, Helvetica, sans-serif;
	height: 60px;
	width: 280px;
	display: block;
	margin-bottom: 3px;
	font-size: 18px;
	text-wrap: unrestricted;
}

/**** Right Side user edited Suggestion Column****/
#suggUserScrollCol{
	float: left;
	display: inline;
	margin: 0;
	width: 400px;
	height: 220px;
	font-size: 12px;
	padding: 15px 0px 15px 0px;
	overflow-y: scroll;
}
#suggUserScrollCol .suggUserBox{
	font-family: 'BandaRegularRegular', Arial, Helvetica, sans-serif;
	height: 60px;
	width: 400px;
	display: block;
	margin-bottom: 3px;
	font-size: 18px;
	text-wrap: unrestricted;
}

#suggScrollCol .suggBox a{
	color: #000000;
	text-decoration: none;
}
#suggScrollCol .suggBox a:hover{
	color:#7d110c; 
	text-decoration:none;
}


/**** Footer ****/

.footer{height: 106px; clear:both; background:#dfe0e1; padding:31px 28px 23px 32px; width:940px;}
/*** Sponsors Area ***/
#sponsorsCon{float:left; display:inline; width:650px;}
#sponsorsCon h1, #sponsorsCon h2{font-size: 18px; color:#2f2f2f; text-transform:uppercase;}
.sponsorsLogos{float:left; display: inline; margin-right:25px;}

/*** Utility Area ***/
#utilityCon{float:left; display:inline; width:290px; text-align:right;}
.contactLinks{font-size:18px; color:#b0b2b4; font-family: 'Oswald', Arial, Helvetica, sans-serif; font-weight:300; text-transform:uppercase; line-height:18px; margin-bottom:12px;}
.contactLinks a{color:#2d637f; text-decoration:none;}
.contactLinks a:hover{text-decoration:underline; color:#7d110c;}
.connectCon{height:30px; width:290px; text-align:right; font-family: 'Oswald', Arial, Helvetica, sans-serif; font-weight:300; text-transform:uppercase; font-size:18px; line-height:30px; color:#b0b2b4;}

/*** Copyright ***/
.copyright{color:#b0b2b4; font-size:10px; clear:both; margin-top:20px;}

#rss{
float:right;
height:30px;
width:31px;
display: block;
text-indent: -9999px;
text-align:left;
margin-left:5px;
}

/*#rss a{*/
/*height: 30px;*/
/*width: 31px;*/
/*display: block;*/
/*text-indent: -9999px;*/
/*!*overflow:hidden;*!*/
/*background-position:bottom;*/
/*background-repeat:no-repeat;*/
/*opacity:0;*/
/*-webkit-transition: all .4s ease;*/
		/*-moz-transition: all .4s ease;*/
        /*-ms-transition: all .4s ease;*/
        /*-o-transition: all .4s ease;*/
		/*transition: all .4s ease;*/
/*}*/

#rss a:hover{ background-position:bottom; opacity:1;}
#rss a, #rss{background-image: url(images/rss.gif);}

/***** PAGE LAYOUTS ******/
/**** Home ****/
#banner{
	margin-top:3px;
	font-size: 10px;
	background-color: #f0e4b0;
	padding-top: 2px;
	padding-bottom: 2px;
}
#banner img{display:block;}

/**** Blog ****/
#content article h1{font-size:24px; font-weight:300; text-transform:uppercase; margin-bottom:5px; color:#7d110c;}

/* ------------- BLOG STYLES ------------- */

img.alignleft {margin: 0 20px 10px 0}
img.size-full{width:97.7%; height:auto;}
.alignright {float: right; margin: 0 0 5px 20px; display:inline;}
.alignleft {float: left; margin: 0 20px 5px 0; display:inline;}
.avatar { display:none;}

#postinfo {
	float:left;
	display:inline;
	background:#eeeeee;
	color:#6e6e6e;
	font-size:11px;
	padding:1px 6px 1px 6px;
	border-top:1px solid #d2d1d1;
	border-bottom:1px solid #d2d1d1;
	margin:5px 0 30px 0;
	width: 100%;
	clear: both;
}

#postinfo a {color:#70afc9;}

#postinfo a:hover {
	color:#377b95;
	background:#eeeeee;
}
div.error span {
	color: #D85A1A;
	font-size: 12px;
}
label.error {
	font-size: 10px;
	color: #D85A1A;
	margin-left: 15px;
}
.mapHolder {
	width: 46%;
	float: left;
	margin-top: 8px;
	margin-right: 15px;
	margin-bottom: 8px;
	border: 1px solid #CCC;
	padding: 15px;
}
.mapHolder1 {
	width: 100%;/*1055px;*/ /*100%;*/
	height: 495px; /*505px;*/
	float: left;
	background-color: #faa96b; /*#FA9A50*/
	/*margin: 4px 0px 4px 0px;*/
	border: 2px solid #bfbfbf;/*#CCC*/
	border-radius: 5px;
	padding: 0px 0px 0px 0px;
}

.mapHolder2 {
	width: 46%;
	float: left;
	background-color: #DFFFA5;
	margin-top: 8px;
	margin-right: 15px;
	margin-bottom: 8px;
	border: 1px solid #CCC;
	padding: 15px;
}
.commentbox1{
	width: 95%;
	float: left;
	background-color: #FA9A50;
	margin-top: 8px;
	margin-right: 15px;
	margin-bottom: 8px;
	border: 1px solid #CCC;
	padding: 15px;
}
.commentbox2{
	width: 95%;
	float: left;
	background-color:#DFFFA5;
	margin-top: 8px;
	margin-right: 15px;
	margin-bottom: 8px;
	border: 1px solid #CCC;
	padding: 15px;
}
.innerMapLines {
	padding: 0px 0px 0px 10px;
	/*display: block;*/
	/*font-weight: normal;*/
	height: 25px;
}
.commentBoxQ {
	padding-top: 2px;
	display: block;
	font-weight: normal;
	padding-bottom: 2px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AD4D37;
	margin-bottom: 5px;
}

.commentBox {
	padding-top: 2px;
	padding-bottom: 15px;
	display: block;
	font-weight: normal;
	height: 25px;
}
.innerMapLines1 {
	padding: 1px 0px 0px 0px;
	/*display: block;*/
	display: none;
	font-weight: normal;
	height: 25px;
}

.innerMapLines label {
	font-size: 14px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.mapImageHolder {
	padding: 3px;
	border: 1px solid #CCC;
	margin-bottom: 10px;
}

.buttonHolder {
	float: left;
	width: 178px;
}
.mainButtonHolder {
	float: left;
	width: 800px;
	padding-left: 200px;
	margin-top: 15px;
}
#mapHolderOne, #mapHolderTwo {
	/*height: 470px;*/
	height: calc(100% - 26px);/* 26px must be changed according to the height of the above div */
	margin: 0px 0px 3px 0px;
	padding: 2px;
}
#map_canvas1, #map_canvas2 {
	border: 1px solid #999;
	height: 100%;
	/*height: 464px;!*475px;*!*/
}

.submitButtonHolder {
	padding-left: 315px;
	margin-top: 35px;
	float: left;
	padding-top: 25px;
}
.lines {
	float: left;
	width: 140px;
}

.buttonStyle {
	background-color: #FFF;
	border: 1px solid #666;
}

.keyHolder {
	padding: 15px;
	border: 1px solid #CCC;
}
#slider ,#slider1{
	width: 250px;
}
.innerMapLinesHead {
	padding: 0px 5px 0px 5px;
	display: block;
	font-weight: normal;
	margin: 0px 5px 0px 5px;
}

.innerMapLinesHead1 {
	padding: 0px 5px 0px 5px;
	/*display: block;*/
	display: none;
	font-weight: normal;
	margin: 0px 5px 0px 5px;
}
.barBlue  {
	width: 160px;
	display:block;
	font-size:14px;
	padding: 7px;
	font-family:'BandaRegularRegular', Arial, Helvetica, sans-serif;

	border:2px solid #f77008;/* #fa9a50; #999;*/
	border-radius:5px;
	background-image:linear-gradient(to bottom,#fff,#ddd);
	box-shadow:inset 0 0 10px #999;
	word-wrap:break-word;
	color: #000000;/*#666;*/
	cursor: pointer;
}

.barBlue:hover {
	background:#f77008; /*#1d4052;*/
	/*background-image:linear-gradient(to bottom,#fa9a50,#ff3300);*/
	border:2px solid #ff3300;/* #fa9a50; #999;*/
}

#tools {
	/*float: center;*/
	/*width: 900px;*/
  width: 99%;
	padding: 0px 0px 0px 0px;
	border: 1px solid #CCC;
  margin: 0px auto 0px auto;
}
.containerhover {
	display: flex;
	/*display: inline-block;*/
	/*width: 1200px;*/
	padding: 0px;
	margin: 2px auto 0px auto;
}
.containerhover div {
	float: center;
	width: 980px;
	padding: 5px;
	margin-top: 5px;
	margin-right: 15px;
	margin-bottom: 5px;
	margin-left: 5px;
}
.containerhover .tools {
    background-color:#f0e4b0;
    float: center;
	width: 980px;
	padding: 5px;
	margin: 5px 15px 5px 5px;
	cursor: pointer;
}
.containerhover .toolpic {
    display: none;
    float: center;
	width: 980px;
	padding: 5px;
	margin: 5px 15px 5px 5px;
}


.barOrange  {
	font-family:'BandaRegularRegular', Arial, Helvetica, sans-serif;
	display:block;
	font-size:14px;
	background:#d85a1a;
	color:#fff;
	text-decoration:none;
	padding: 8px;
 }
.orangeWords {
	color: #d85a1a;
	font-size: 12px;
}
.yellowWords {
	color: #d8c41a;
	font-size: 12px;
}

.barOrange:hover {
	background:#7d110c;
}
.displayStuff {
	font-size: 12px;
	color: #000;
	display: block;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 12px;
	border: 1px solid #CCC;
}
.displayStuffa {
	font-size: 17px;
	/*color: #000;*/
	display: inline-block;
}

.dropDownArea {
	height: 40px;
	margin-bottom: 5px;
	text-align: left;
}

.graph {
	height: calc(100% - 26px);/* 26px must be changed according to the height of the above div */
	border: 1px solid #b3b3b3;
	border-radius: 4px;
	background-color: #ffffff;
}

.graphTable {
	display: none;
}
.graph1 ,.graph2{
	float: left;
	width: auto;
	margin-right: 70px;
}
.dataL {
	font-size: 14px;
	text-align: center;
	font-weight: bold;
}


/*  *********** VOTE SECTION *********** */
.vote_section {
	display: block;
	/*width: 684px;!*725px;!*800px;*!*/
	height: inherit;/*height: 60px;*/
	position: relative;
	z-index: 100;
	margin: 0px auto 0px auto;
	border: 2px solid #bfbfbf;/*#ad4d37*/
	border-radius: 5px;
	background-color: #FA9A50; /*#f0e4b0;*/
}

/*#step3_row2 {*/
	/*width: 100%;*/
	/*float: left;*/
	/*display: inline-flex;*/
	/*!*background-color: #FA9A50;*!*/
	/*margin: 0px 0px 0px 0px;*/
	/*!*border: 1px solid #CCC; !*For testing*!*!*/
	/*!*padding: 2px 2px 2px 2px;*!*/
/*}*/

/*  -------------------   CSS for full screen button 'section'  -------------------- */
.gm-fullscreen-control {
	display: none;
}

/* -------------------  CSS for main-map legend button in the main map 'google map' -------- */
/* Grand-Father - LEVEL 0 */
.mainMapLegend_frame {
	/* WIDTH = 790px for left-side; OFF for right side; 420px for right side when map is in wide screen*/
	/*width: 790px; !*420px;*! !* CHANGE this for X-position. If you off the "Legend" button sticks at the right *!*/
	background-color: transparent;
	/*border: 1px solid #8c8c8c; !*#666666;*! !*  Turn off for last presentation*!*/
}

/* Father - LEVEL 1 */
.mainMapLegend_container{
	width: 140px;
	margin: 27px 0px 0px 0px; /* CHANGE the margin-top to control the Y-position. Margin-top=0px sticks at the top*/
	background-color: white;
	border: 1px solid #8c8c8c; /*#666666;*/
	border-radius: 1px;
}

/* Child - LEVEL 1a */
.mainMapLegend_button {
	display: inline-flex;
	width: 100%;
	font-size: 14px;
	text-align: center;
	color: black;
	cursor: pointer;
	background-color: #ff944d; /*#4CAF50;*/
	border-radius: 1px;
}

/*.mainMapLegend_button:hover {background-color: #3e8e41}*/
.mainMapLegend_button:hover {background-color: #ffd1b3}

.mainMapLegend_button:active {
	background-color: #ff6600;
}

.mainMapLegend_title {
	width: 70%;
	padding: 0px 0px 0px 30px;
}

/* Child - LEVEL 1b */
.feat_content {
	display: none;
	padding: 3px 2px 2px 10px;
}

/* Grand child LEVEL 1a.2 */
.dropdown_img {
	position: relative;
	width: 30%;
	text-align: right;
	right: 10px;
	/*color: blue;*/
}
/* Grand-Grand Child LEVEL 1a.2-1*/
.fa {
	font-size:20px;
	/*color:red;*/
	color:black;
}
.separatorDiv{
	margin: 1px 0px 1px 0px;
	border-top-width: 1px;
	padding: 2px; /* it controls the gap space */
	border-top-style: solid;
	border-top-color: #d9d9d9;/* rgb(235, 235, 235);*/
}

.name_width {
	width: 105px;
	display: inline-block;
}

.square_box {width: 15px;height: 15px;}
.rectangle_box {width: 60px;height: 3px; margin: 5px 0px 5px 0px}
.circle {border-radius: 50%; margin: 3px auto 0px auto;}
.caja_c {width: 50px;}
.sq_label {width: 105px;}
.filter_label {width: 56px; text-align: center;}
.circle_label {width: 60px; text-align: center;}
.labelAndBox {display: inline-flex}
.labelAndLine {display: inline-flex}
.labelAndCircle {display: inline-flex}
/* ------------------- End CSS for main-map legend button in 'google map' -------- */


/*  ----------------  CSS for main-map-title -------------------  */
.sugg_title {
	padding-left: 100px;
}

/* ------------------  CSS for heat-maps by Enoa  ------------------- */
#tabs-PF, #tabs-RV, #tabs-SR, #tabs-NR {
	/*height: 410px;!*370px; !*355px;*!*/
	height: 100%;
	padding: 1px 0px 1px 1px;
}

/* ---------------- Start:  CSS for legend button in the HEAT MAP -------- */
/* Grand-Father - LEVEL 0 */
.hml_extraFrame {
	width: inherit; /*258px;*/  /* Set the width the parent, so it makes the legend stick in the left side */
	background-color: transparent;
	/*border: 1px solid #999;*/
	/*border: 1px solid #8c8c8c; !*#666666;*! !* For debugging *!*/
}

/* Father - LEVEL 1 */
/*.heatMapLegend_container{*/
.heatMapLegend_frame {
	width: 120px; /* important to set width of the legend */
	background-color: white;
	border: 1px solid #8c8c8c; /*#666666;*/
	border-radius: 1px;
}

/* Child - LEVEL 1a */
.heatMapLegend_button {
	display: inline-flex;
	width: 100%;
	font-size: 14px;
	text-align: center;
	color: black;
	cursor: pointer;
	background-color: #ff944d; /*#4CAF50;*/
	border-radius: 1px;
}

.heatMapLegend_button:hover {background-color: #ffd1b3}

.heatMapLegend_button:active {
	background-color: #ff6600;
}
/* Level 1.a.1 */
.heatMapLegend_title {
	width: 70%;
	padding: 0px 0px 0px 22px;
}

/* LEVEL 1.a.2 */
.dropdown_img {
	position: relative;
	width: 30%;
	text-align: right;
	right: 10px;
	/*color: blue;*/
}

#heatMapHolderOne {
	/*height: 384px;!*342px; !*393px;*!*/
	height: calc(100% - 25px);
}
.heatMapLegend_container { /* Same as 'feat_content. See above*/
	display: none;
	padding: 1px 1px 1px 1px;
}

/* Grand-Grand Child LEVEL 1a.2-1*/
.fa {
	font-size:20px;
	/*color:red;*/
	color:black;
}
/* ---------------- End:  CSS for legend button in the HEAT MAP -------- */

/* ---------------- Start:  CSS for BMP bar buttons in the MAIN MAP -------- */
.BMP_checkboxes_frame {
	/* Use WIDTH for positioning the first (main) "FRAME"*/
	/*width: 0px; !* When 'Legend' is positioning at left side*!*/
	width: 580px; /*648px; /* When 'Legend' is at right side (Use this for placing the box menu)*/
	background-color: transparent;
}
.BMP_checkboxes_container1{
	width: 720px;/*788px; /* Use this for placing the second frame or container (Box Menu)*/
	background-color: #ffffff;/*#afff1a;*/
	border: 1px solid #8c8c8c;
}
.BMP_checkboxes_container2{
	margin: 0px auto 0px auto;
}

/* ---------------- Start:  CSS for BMP bar buttons in the MAIN MAP -------- */

/* heatmap */
/*#heatmaps_frame {*/
.panel_2 {
	width: 100%;/*275px;*/
	height: 100%;/*495px;*/
	/*position: relative;*/
	float: right;
	/*right: 5px; !* it is controled at element-style *!*/
	/*top: 0px; !* it is controled at element-style *!*/
	z-index: 100;
	border: 2px solid #b3b3b3;/*bfbfbf*/
	border-radius: 5px;
	background-color: #faa96b;/*#ff9933;/*#fbb783; #ff9933;*/
}



#move_frame2{
	display: flex;
}

.l6_box {
	width: 33.33%;
}

/* For 'heatmaps_frame1' */
/*.heatmaps_frame1{*/
.panel_1{
	/*width: 250px;*/
	width: 320px;/*280px;*/
	/*height: 443px;*/
	position: relative;
	/*left: -370px; top: 30px; z-index: 100;*/
	left: -390px; top: 30px; z-index: 100;
	background-color: #ffffff;
	border: 1px solid #999999;
	border-radius: 4px;
}

/* Bar plot */
.tab_container1 {
	/*height: 377px;!*429px;*!*/
	/*overflow: hidden;*/
}

.tab_container2 {
	height: calc(100% - 36px);
}


.tab-header2 {
	height: 25px;
}


/* Line2*/
#line2-col1{
	/*width:65%;!*width:800px;*!*/
	height: inherit;/*height: 100%;*/
	float:left;
	display:inline;
	margin:0px 0px 0 0;
	padding:0px 0 0px 0;
}
#line2-col2{
	/*width: 35%;!*width: 400px;*!*/
	height: inherit;
	display: inline-block;
	text-align: right;
	/*height: 30px;*/
}

.topnav {
	/*overflow: hidden;*/
}

.topnav a {
	float: right;
	text-align: center;
	padding: 1px 10px;
	text-decoration: none;
	font-size: 14px;
	background-color: #b3b3b3;
	color: #333333;
	border: 1px solid #999999;/*#d85a1a;*/
}

.topnav a:hover {
	color:#7d110c;
	background-color: #ffffff;
}

.mainbuttons {/* This is for instructions button (NO ICON)*/
	width: 85px;
	height: 22px;
	cursor: pointer;
	color: #d85a1a;
}
.mainbuttons2 {/* This is for instructions ICON */
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	display: inline-flex;
	border-radius: 4px;
	border: 1px solid #999999; /*blue;*/
	font-size: 23px;
	width: 40px;
	height: 26px;
	cursor: pointer;
	background-color: #b3b3b3 /*#8ebfd7; #68a9ca; red;*/
}

.fa-info-circle{color: #000000;/*blue;*/position: relative;left: 9px;}
.fa-pause{color: #000000;/*blue;*/position: relative;left: 9px;}
.fa-save {color: #000000;/*blue;*/position: relative;left: 9px;}
.fa-power-off {color: #000000;/*blue;*/position: relative;left: 9px;}
.fa-sign-out {color: #000000;/*blue;*/position: relative;left: 9px;}

.mainbuttons2:hover {
	/*color:#7d110c;*/
	background-color: #ffffff;
	/*-ms-transform: scale(1.1); !* IE 9 *!*/
	/*-webkit-transform: scale(1.1); !* Safari 3-8 *!*/
	/*transform: scale(1.1);*/
}



/* -------  SWEET ALERT ------*/
.swal-overlay {
	background-color: rgba(51, 51, 51, 0.5);
}
/*.swal-modal {*/
	/*background-color: rgba(63,255,106,0.69);*/
	/*border: 2px solid #060606;*/
/*}*/
.swal-title {
	margin: 0px;
	font-size: 26px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
	margin-bottom: 28px;
}
.swal-button {
	padding: 7px 19px;
	border-radius: 2px;
	background-color: #2eb8b8; /*#4962B3;*/
	font-size: 12px;
	border: 1px solid #3e549a;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}

/* Intructions box */
#shade_frame {
	display: none;
	position: absolute;
	top: 0px;
	/*height: 500px;*/
	height: 100vh;
	width: 100%;
	border: 1px solid black;
	background-color: black;
	opacity: 0.7;
	z-index: 500;
}

/*#inst_box1 { !* For instructions box *!*/
#instruction_box1 { /* For instructions box */
	display: none;
	position: absolute;
	top: 120px;
	left: 400px;
	z-index: 501;
	height: 380px;
	width: 600px;
	margin: 0px auto 0px auto;
	/*border: 1px solid #dd1254;*/
	/*background-color: #afff1a;*/
	background-color: transparent;
}

/*#inst_box1_tr { !* For box of 'take rest' option*!*/
#pause_box { /* For box of 'take rest' option*/
	display: none;
	position: absolute;
	top: 140px;
	left: 400px;
	z-index: 501;
	height: 380px;
	width: 500px;
	margin: 0px auto 0px auto;
	/*border: 1px solid #dd1254;*/
	/*background-color: #afff1a;*/
	background-color: transparent;
}
#save_box1_tr { /* For box of  option*/
	display: none;
	position: absolute;
	top: 140px;
	left: 400px;
	z-index: 501;
	height: 380px;
	width: 500px;
	margin: 0px auto 0px auto;
	/*border: 1px solid #dd1254;*/
	/*background-color: #afff1a;*/
	background-color: transparent;
}

#inactive_box {
	display: none;
	position: absolute;
	top: 140px;
	left: 400px;
	z-index: 501;
	height: 380px;
	width: 500px;
	margin: 0px auto 0px auto;
	/*border: 1px solid #dd1254;*/
	/*background-color: #afff1a;*/
	background-color: transparent;
}

#end_experiment_box {
	display: none;
	position: absolute;
	top: 140px;
	left: 400px;
	z-index: 501;
	height: 380px;
	width: 500px;
	margin: 0px auto 0px auto;
	/*border: 1px solid #dd1254;*/
	/*background-color: #afff1a;*/
	background-color: transparent;
}

#message_box {
	background-color: #ffffff;
}


#ints_welcome-msg {
	/*margin: 10px;*/
	padding: 25px;
	border: 1px solid black;
}
.cross {
	text-align: right;
}

.cross_img {
	border: 1px solid black;
	border-radius: 50%;
	cursor: pointer;
}

/* ====================================== ============================= ================================ */
/* Style after bootstrap implementation */

.debug {
	/*background-color: #b1dfbb;*/
	/*border: 1px solid blue;*/
}

/* row 1 */
.row1-box1 {float:left; display:inline; font-family:'BandaRegularRegular', Arial, Helvetica, sans-serif; line-height:1; font-size: 50px; font-weight:normal; color:#2f2f2f;}
.row1-box2 {
    width: 200px;
    margin:auto; padding:0;
    border: 1px solid #80ff00;
    border-radius: 5px;
    background-color: #d9ffb3;
    font-family: auto; /*'BandaRegularRegular', Arial, Helvetica, sans-serif;*/
    line-height:22px; text-align:center; font-size:24px; color:#2f2f2f; text-transform:none;
}
.row1-box3a{float:right; display:inline; font-family:'BandaRegularRegular', Arial, Helvetica, sans-serif; line-height:16px; text-align:right; font-size:16px; color:#2f2f2f; margin:0; padding:0; text-transform:none;}
.row1-box3b{float:right; display:inline; font-family:'Oswald', sans-serif; font-size:27px; text-align:right; text-transform:uppercase; font-weight: 300; line-height:30px; margin:0; padding:0; color:#2d637f;}

@media only screen and (max-width: 1200px) {
    #row1-box2a {
        display: none !important;
    }
}

.fontStepTitle {
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight: 200;
}

/*  Responsive with media query  */
/* row4 */
.row4 {height: 482px; /*480px; 420px;*/}
.panel_1 {height: 443px;}


@media only screen and (min-height: 770px) {/* For screen-heights > 800: */
	.row4 {height: 514px;} /*[482 + (800-768) = 514] (height laptop = 768)*/
	.panel_1 {height: 475px;}
}
@media only screen and (min-height: 800px) {/* For screen-heights > 900: */
	.row4 {height: 614px;}
	.panel_1 {height: 575px;}
}
@media only screen and (min-height: 900px) {/* For screen-heights > 1024: */
	.row4 {height: 738px;}
	.panel_1 {height: 630px;}
}
@media only screen and (min-height: 1024px) {/* For screen-heights > 1080: */
	.row4 {height: 790px;}
}
@media only screen and (min-height: 1080px) {/* For screen-heights > 1200: */
	.row4 {height: 910px;}
}

/* media query for check boxes */
/* It does not work */
@media only screen and (max-width: 1200px) {/* For screen-heights > 800: */
	.BMP_checkboxes_container1 {width: 620px;}
}

.checkboxLabel {
	margin: 0px;
}


/* Tooltip google chart */
/*.google-visualization-tooltip {z-index:500 !important;}*/
.google-visualization-tooltip{
	z-index: 1000 !important;
}

/*!* Reducing the map-type icon in google-map *!*/
/*.gm-style .controls.zoom-control button {*/
    /*!*font: 1em Arial;*!*/
    /*font-family: Arial;*/
    /*font-size: 20px;*/
    /*margin: 0px;*/
    /*padding: 0;*/
/*}*/

/* maptype icons */
.maptype_container {
    margin: 5px 0px 0px 0px;
    background-color: #ffffff;
    border: 1px solid #8c8c8c;
    border-radius: 1px;
}