/*http://luxiyalu.com/playground/overlay/*/

.graph-overlay{
  /*       position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.8);

  .graph-overlay-option{
  top: 100px;
  height: 95%;
  overflow-y: scroll;
  }*/
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 950; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .8);
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  background-color: rgba(0, 0, 0, .8);
  -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
  transition: all .4s cubic-bezier(.25, .8, .25, 1);
  display: inline-block;
}

.graph-overlay .graph-overlay-content {
  box-sizing: border-box;
  padding: 0 20px 20px;
  color: #fff;
}


.graph-title{
	text-align: center;
	font-size: 1.875em; /* 30px/16=1.875em */
	font-weight: bold;
}

/*These classes allow the option titles and fields to be re-arranged if the screen is resized*/
.graph_options_tbl_wrapper{
  /*width: 80%;*/
  /*height: 80%;*/ 
  z-index: 951;
  margin: 10px auto;
 
  /*overflow-y: scroll;*/
}

.graph_options_row {
  display: table-row;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 1em;
  border: 1px solid grey;
}

.graph_options_row_header {
  display: table-row;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 1em;
  border: 1px solid grey;
}

.graph_options_cell_vert {
  display: none;
  padding: .5em;
}

.graph_options_cell,.graph_options_cell_hort {
  display: table-cell;
  float: left;
  padding: .5em;
}

.graph_options_wrapper {
  float: left;
  padding: .5em;
}

.graph_options_center {
  margin: auto;
  padding: .5em;
}
/*for use if just want a table centered*/
.graph_options_tbl_center {
  margin: auto;
  padding: .5em;
 /* width: 92%;*/
  /*float: left;*/
  /*text-align: left;*/
}

@media screen and (max-width: 600px) {
	.graph_options_row,
  .graph_options_cell,
  .graph_options_cell_vert,
  {
    display: block;
    float: none;
  }

  .graph_options_cell_hort{
    display: none;
  }
  
  .graph_options_row_header{
 	display: none;
 }
}

.hide-overlay .graph-overlay {
  /*left: -100%;*/
  display: none;
}
.fa-toggle-off {
  display: none;
}

/*.hide-overlay .fa-toggle-on {
  display: none;
}*/

/*.hide-overlay .fa-toggle-off {
  display: inline-block;
}
*/
.background-content{
  height: 100%;
  overflow: hidden;
}

/* Spreadsheet Settings */
#spreadsheet-interface-transparentblock{
  display: none;
  position: fixed;
  z-index: 952;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f89b01;
  filter: alpha(opacity=60);
  opacity: 0.6;

}

#spreadsheet_interface-block{
  display: none;
  position: absolute;
  z-index: 960;
  width: 90%;
  top: 10%;
  left: 21%;

}

#spreadsheet_interface_box{
  display: none;
  position: absolute;
  top: 5%;
  min-width: 60%;
  width: 75%;
  left: 10%;
  z-index: 961;
  border: 2px solid #6fa5fd;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  background-color: white;
}

#spreadsheet_interface_innerbox{
  padding: 0;
  margin: 1% 2.5%;
  width: 95%;
  background-color: white;
  /*color: red;*/
}


.thumbnail
{
  float: left;
  width: 60px;
  border: 1px solid #999;
}

.scrollArea {
  width: 100%;
  height: 40em;
  padding-left: 1em;
  padding-right: 1em;
  border-color: #6699CC;
  border-width: 0em;
  border-style: solid;
  float: left;
  overflow: scroll;
}

/* end Spreadsheet Settings */

#tblOptionButton{
  float: right;
  width: 5%;
  border: 0;
  background-color: grey;
}
#tblOptionButton th
{
  text-align: right;
}

/*option button area
NOTE: used em instead of px for more rounded look
*/
#divOptionButtons{
  position: fixed;
  top: 10%;
  right: 3%;
  padding: 0.2%;
  /*
  border-radius: 15em;
  -moz-border-radius: 15em;
  -webkit-border-radius: 15em;
  -khtml-border-radius: 15em;
  */
  z-index: 977;
  vertical-align: middle;
  /*background-color: grey;*/
  border: 0.2em solid orange;
  /*border-color:orange;*/
}


.graph-img-container{
	/*overflow: auto;*/
}

.goi-wrap-clr{
  background: #D7E6FD; /*lightblue*/
  margin: 15px auto;
  /*color: #000000;*/
}