body
{
	background-color: #e6e7e8;
  padding-right: 0px !important
}

canvas.overbody:hover
{
	cursor: pointer;
}

.clear-left
{
	clear: left;
}

.clear-right
{
	clear: right;
}

/* -------------------- */
/* SPACING ------------ */
/* -------------------- */
.no-space-bottom
{
	margin-bottom: 0!important;
}

.space-bottom
{
	margin-bottom: 30px;
}

.space-bottom-small
{
	margin-bottom: 15px!important;
}

.space-top
{
	margin-top: 40px;
}

/* -------------------- */
/* HEADER ------------- */
/* -------------------- */
.container-fluid
{
	padding: 0!important;
}

header
{
	padding: 10px 20px !important;
	background-color: #333;
}

/* -------------------- */
/* TYPOGRAPHY --------- */
/* -------------------- */
h1
{
	font-weight: 700;
	float: left;
	color: rgba(255,255,255,.6);
	font-size: 1.5em;
	text-align: left;
	margin-left: 0px;
	width: 100%;
}

h1 em
{
	font-weight: normal;
	font-style: normal;
	color: white;
	font-weight: 100;
	font-size: 15px;
	display: block;
	clear: left;
	wdith: 100%;
}

 h2
{
	font-family: "Khula", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000;
	font-weight: bold;
	font-size: 1.3em;
}

h3
{
	font-family: 'Khula', Verdana, sans-serif;
	font-size: 1.5em;
	font-weight: 800;
	color: #999;
}

.option,
h4
{
	font-family: "Khula", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 700;
	color: #fff;
}

h5
{
	font-family: 'Khula', Verdana, sans-serif;
	font-size: 1.3em;
	font-weight: 700;
	color: #000;
	background-color: rgba(255,255,255,.8);
	flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	padding: 10px 5px;
}

#simHolder p.note,
#graphBlock p.note
{
	font-size: 11px;
	margin: 0 auto;
	/* text-align: left; */
	color: rgba(255,255,255,.8);
	font-family: 'Open Sans', Verdana, sans-serif;
}

p.note strong
{
	color: #225b6b;
}

a.info,
a.info:link,
a.info:visited
{
	color: #4B9408;
	text-decoration: none;
}

a.info:hover,
a.info:active
{
	cursor: pointer;
	color: #97CC39;
	text-decoration: none;
}

.orange
{
	color: #e05f10;
	font-size: 1.2em;
}

ul.tight li,
ol.tight li
{
	padding-bottom: 3px!important;
	font-size: .8em;
}

button:hover
{
	cursor: pointer;
}

.btn-success
{
	background-color: #4b9408;
}

.btn-success:hover
{
	background-color: green;
}

.btn-danger
{
	background-color: #740c02;
}

.btn-danger:hover
{
	background-color: #a1100a;
}

#play,
#pause
{
	border-radius: 50%;
	-webkit-box-shadow: 0px 0px 12px 2px rgba(255,255,255,0.75)!important;
-moz-box-shadow: 0px 0px 12px 2px rgba(255,255,255,0.75)!important;
box-shadow: 0px 0px 12px 2px rgba(255,255,255,0.75)!important;
}

#play
{
	border: 25px solid green!important;
}

#pause
{
	border: 25px solid #a1100a!important;
}

#playHolder
{

}

/* #play i,
#pause i
{
		text-shadow: : 1px solid blue;
} */

/* -------------------- */
/* NAVIGATION --------- */
/* -------------------- */
#navigation
{
	padding: 10px 10px 0 10px !important;
	background-color: #225b6b;
	z-index: 1000!important;
	text-align: right;
	margin-bottom: 5px;
	min-height: 50px;
}

#navigation .btn
{
	margin: 0 0 10px 10px;
	border: none;
	padding: 5px 7px;
}

#navigation .btn:last-of-type
{
	margin-right: 0;
}

#navigation .btn-info
{
  background-color: #60abbf;
  background-color: rgba(198,213,220, .2);
}

#navigation .btn-info:hover
{
  background-color: rgba(61,138,166, .7);
  cursor: pointer;
}

#navigation .btn-info:hover
{
	background-color: #3d8aa6;
}

#navigation .btn.active
{
	outline: 0;
	box-shadow: none;
}

/* -------------------- */
/* BUTTONS ------------ */
/* -------------------- */
.btn-info.toggle-on
{
  background-color: #F98341;
  color: white;
  font-weight: bold;
}

.btn-default.toggle-off
{
  background-color: white;
  color: black;
  font-weight: bold;
  color: #999;
}

.btn img.icon
{
	height: 18px;
	display: inline-block;
}

.btn-sm
{
	padding: .25rem .5rem;
	line-height: 1;
	border-radius: .2rem;
}

.btn-sm img.icon
{
	height: 15px;
}

.btn.inactive
{
	background-color: #444;
}

.btn.inactive:hover,
.btn.inactive:active
{
	background-color: #555;
}

.btn em
{
	font-style: normal;
	font-size: 12px;
	display: block;
}

.btn
{
	box-shadow: none!important;
	outline: 0!important;
	border: none !important;
}

/* -------------------- */
/* INSTRUCTIONS ------- */
/* -------------------- */
.row.instructions-holder
{
	padding: 10px;
}

.instructions
{
	padding: 15px !important;
	border-radius: 10px 0 0 10px;
	background-color: #fff;
}

.col-sm-12.instructions
{
	border-radius: 10px 10px 0 0!important;
}

.instructions h2
{
	color: #e05f10;
	font-size: 1.3em;
	text-transform: capitalize;
	/* border-bottom: 1px dashed #efefef;
	padding-bottom: 10px;
	margin-bottom: 20px; */
}

.instructions p,
.instructions li
{
	line-height: 1.3em;
	font-size: .9em;
	font-family: 'Open Sans', Verdana, sans-serif;
	color: #777;
	margin: 0;
	text-align: left;
	padding-bottom: 10px;
}

#instructions-end
{
	-webkit-align-self: flex-end;
	align-self: flex-end;
	background-color: white;
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	width: 100%;
	border-radius: 0 0 10px 10px;
	height: 10px;
}

.instructions p.note
{
	font-size: 1em;
	color: #999;
	padding-top: 0;
}

.instructions ul,
.instructions ol
{
	margin: 0 0 0 40px;
	padding-bottom: 10px;
	text-align: left;
	padding-left: 0;
}

.instructions strong
{
	color: black;
}

/* -------------------- */
/* INTERACTIVE -------- */
/* -------------------- */
.col-sm-12.interactive-body
{
	border-radius: 0 0 10px 10px!important;
}

.interactive-body,
.interactive-body-dark
{
	font-family: 'Open Sans', Verdana, sans-serif;
	background-color: #b6c6d1;
	color: white;
	text-align: center;
	padding: 15px 15px!important;
	border-radius: 0 10px 10px 0!important;
}

.interactive-body-dark
{
  background-color: #3d8aa6;
	border-radius: 0 0 10px 10px !important;
}

.interactive p.note
{
	color: #999;
	padding-top: 10px;
}

.row.flexy
{
	-webkit-display: flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

/* -------------------- */
/* BOOTSTRAP OVERRIDES  */
/* -------------------- */
.btn-default, .btn-default
{
	background-color: #32332f;
}

.btn-default.active
{
	background-color: #222;
}

.btn-default:hover
{
	background-color: #000;
}

.btn-lg
{
	font-weight: 700;
	font-size: 1.5em;
}

.btn-info
{
	background-color: #3d8aa6;
}

.btn-info:hover
{
	background-color: #316b80;
}



/* -------------------- */
/* SLIDE                */
/* -------------------- */
#slide-toggles
{
	margin-bottom: 20px;
}

#slide-toggles h4
{
	display: block;
	margin-right: 5px;
}

.slide-toggle
{
	display: inline-block;
	padding: 10px;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 0 5px 10px 5px;
}

.slide-toggle.off
{
	background-color: transparent;
}

#slide-category-select
{
	width: auto!important;
	display: inline-block;
}

#slide-category-select option,
#slide-category-select
{
	color: black;
}

.slide
{
	border-radius: 10px;
	background-color: rgba(255,255,255,.5);
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 0 10px;
	text-transform: capitalize;
}

.slide h4,
.ylabel,
h4.xaxis
{
	color: #ed844a!important;
	fill: #ed844a!important;
	font-size: 14px;
	text-transform: uppercase;
}

.axis-label
{
	text-transform: capitalize;
	color: black;
	font-size: 14px;
}

.btn-selector
{
  padding: 0 5px!important;
}

.slide:hover
{
	cursor: pointer;
}

.slide-hover-state .slide
{
  border-bottom-width: 0;
}

.slide-hover-state:hover .slide,
.slide-hover-state:hover .slide-bottom
{
	background-color: #111;
	cursor: pointer
}

.slide-hover-state:hover .slide,
.slide-hover-state:hover .slide-bottom,
.slide-hover-state.active .slide-bottom,
.slide-hover-state.active .slide
{
  background-color: #fff;
  border-color: #e05f10;
}

.slide img
{
	max-width: 100%;
	width: 100%;
	height: auto;
}


.slide-bottom
{
	border-radius: 0 0 10px 10px;
	background-color: #222;
	padding: 10px;
	text-transform: capitalize;
	border-top-width: 0;

}

.slide.slide-full
{
	border-radius: 10px;
	padding: 20px 30px 40px 25px;
}

.slide-bottom h4
{
	color: #000;
	font-size: 17px;
	margin: 0;
}

.btn-group
{
	display: inline-blockblock;
}


.slide-bottom h6
{
	color: #676863;
	text-transform: uppercase;
	font-size: 12px;
	margin:0;
	padding-bottom: 0;
	background-color: transparent;
	font-weight: normal;
}

.slide-bottom h6
{
	margin-top: 0;
}

.slide-col
{
	text-align: center;
	display: none;
}

.slide
{
	margin: 0 auto 40px auto;
}

/* -------------------- */
/* SVG                  */
/* -------------------- */
#diagram-wrap
{
	border: none;
  background-color: #3d8aa6;
}

#diagram
{
	margin: 0 auto;
}

#diagram svg
{
	max-width: 100%;
	display: block;
}

/* -------------------- */
/* GRAPH                */
/* -------------------- */
#graphHeader h2
{
	margin-bottom: 0;
}

#graphWrap,
.graph-wrap
{
	text-align: center;
	border-radius: 10px;
	padding-top: 10px;
}

.graph-wrap
{
	background-color: white;
}

#graphKey
{
	padding: 5px;
	background-color: rgba(255, 255, 255, .7);
	float: right;
	right: 32px;
	position: absolute;
	margin-top: 18px;
	border-radius: 5px;
}

#graphKey p:first-of-type
{
	text-align: center;
}

#graphKey p
{
	font-size: 12px;
	margin: 0 10px;
	padding: 0;
	color: black;
}

#graphKey i
{
	font-size: 1.2em;
}

#graph svg,
.graph svg
{
	overflow: visible;
}

#graph path,
.graph path {
    fill: none;
}

.graph .line,
#graph .line
{
	stroke: #225b6b!important;
}

#graph .axis path,
.graph .axis path,
#graph .axis line,
.graph .axis line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
}

#graph #xAxis .tick:last-of-type text,
.graph .xAxis .tick:last-of-type text
{
	display: none;
}

#graph text,
.graph text
{
	fill: rgba(255,255,255,.6);
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

#graph text.bar-zero,
.graph text.bar-zero
{
	font-size: 11px;
	font-weight: 600;
}

#graph .xlabel,
#graph .ylabel,
.graph .ylabel,
.graph .xlabel
{
	font-size: 12px;
}

#graph.graph-light text,
.graph.graph-light text
{
	fill: rgba(0,0,0,.7);
}

#graph .tick,
.graph .tick
{
	width: 100%;
	translate: none;
}

#graph .tick line,
.graph .tick line
{
	stroke: rgba(255,255,255,.1);
	stroke-width: 1px;
}

#graph.graph-light .tick line,
.graph.graph-light .tick line
{
	stroke: rgba(0,0,0,.2);
}

#graph .tick text,
.graph .tick text
{
	fill: white;
	font-family: 'Open Sans', Verdana, sans-serif;
	font-size: 12px;
	font-weight: normal
}

#graph.graph-light .tick text,
.graph.graph-light .tick text
{
	fill: black;
}

#graph .graph-background,
.graph .graph-background
{
	fill: white;
}

#graph.graph-light .graph-background,
.graph.graph-light .graph-background
{
	fill: #efefef;
	background-color: #d7dfe3;
}

.slide strong
{
	color: black;
	text-transform: lowercase;
	display: block;
	font-size: 12px;
	margin: 7px 0;
}

.slider-handle
{
	background: #e05f10!important;
}

.slider-vertical .slider-track-high
{
	background: #d17d4e!important;
}

.slider-horizontal .slider-selection
{
	background: #d17d4e!important;
}

.slider.slider-vertical
{
	height: 120px;
}

.slider.slider-horizontal
{
	width: 55%;
}

#playHolder
{
	margin-bottom: 20px;
}

.tooltip {
 position:absolute;
 z-index:1070;
 display:block;
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size:12px;
 font-style:normal;
 font-weight:400;
 line-height:1.42857143;
 text-align:left;
 text-align:start;
 text-decoration:none;
 text-shadow:none;
 text-transform:none;
 letter-spacing:normal;
 word-break:normal;
 word-spacing:normal;
 word-wrap:normal;
 white-space:normal;
 filter:alpha(opacity=0);
 opacity:0;
 line-break:auto
}
.tooltip.in {
 filter:alpha(opacity=90);
 opacity:.9
}
.tooltip.top {
 padding:5px 0;
 margin-top:-3px
}
.tooltip.right {
 padding:0 5px;
 margin-left:3px
}
.tooltip.bottom {
 padding:5px 0;
 margin-top:3px
}
.tooltip.left {
 padding:0 5px;
 margin-left:-3px
}
.tooltip-inner {
 max-width:200px;
 padding:3px 8px;
 color:#fff;
 text-align:center;
 background-color:#000;
 border-radius:4px;
 user-select: none;
}
.tooltip-arrow {
 position:absolute;
 width:0;
 height:0;
 border-color:transparent;
 border-style:solid
}
.tooltip.top .tooltip-arrow {
 bottom:0;
 left:50%;
 margin-left:-5px;
 border-width:5px 5px 0;
 border-top-color:#000
}
.tooltip.top-left .tooltip-arrow {
 right:5px;
 bottom:0;
 margin-bottom:-5px;
 border-width:5px 5px 0;
 border-top-color:#000
}
.tooltip.top-right .tooltip-arrow {
 bottom:0;
 left:5px;
 margin-bottom:-5px;
 border-width:5px 5px 0;
 border-top-color:#000
}
.tooltip.right .tooltip-arrow {
 top:50%;
 left:0;
 margin-top:-5px;
 border-width:5px 5px 5px 0;
 border-right-color:#000
}
.tooltip.left .tooltip-arrow {
 top:50%;
 right:0;
 margin-top:-5px;
 border-width:5px 0 5px 5px;
 border-left-color:#000
}
.tooltip.bottom .tooltip-arrow {
 top:0;
 left:50%;
 margin-left:-5px;
 border-width:0 5px 5px;
 border-bottom-color:#000
}
.tooltip.bottom-left .tooltip-arrow {
 top:0;
 right:5px;
 margin-top:-5px;
 border-width:0 5px 5px;
 border-bottom-color:#000
}
.tooltip.bottom-right .tooltip-arrow {
 top:0;
 left:5px;
 margin-top:-5px;
 border-width:0 5px 5px;
 border-bottom-color:#000
}

#back,
#forward
{
	color: #e05f10;
	font-size: 30px
}

#back:hover,
#forward:hover
{
	cursor: pointer;
}

#forward
{
	float: right;
}

.v2 .col-lg-6.instructions,
.v3 .col-lg-6.instructions,
.v4 .col-sm-4.instructions
{
	border-radius: 10px 0 0 0;
}

.v2 .col-sm-6.interactive-body,
.v3 .col-sm-6.interactive-body,
.v4 .col-sm-8.interactive-body
{
	border-radius: 0 10px 0 0!important;
}

.v4 #timelabel
{
	margin: 0!important;
}

.v4 #graphWrap {
	padding-top: 0;
	margin: 0 auto;
}

.v4 #graphWrap .slide
{
	padding: 0 0 5px 0;
}

path.domain
{
	stroke: none;
}

canvas
{
	border-radius:15px;
}

 #graph.graph-light .yaxis .tick text
 {
	 display: none;
 }

 .v4 .yaxis
 {
	 display: none;
 }

 #graphBlock
 {
	 text-align: center;
 }

.up,
.down
 {
	 display: inline-block;
	 font-size: 1.5em;
	 margin-top: 2px;
	 margin-left: 10px;
	 margin-right: 10px;
 }

 .up:hover,
 .down:hover
 {
	 color: #e05f10;
	 cursor: pointer;
 }

 .up
 {
	 float: right;
	 margin-left: 5px!important;
 }

 .down
 {
	float: left;
	margin-right: 5px!important;
 }

 .controls
 {
	 display: inline-block;
	 width: 70px;
 }

 #simgraphwrap{
	 padding-right: 0;
 }

 #simgraph
 {
	 margin-bottom: 10px!important;
 }