body
{
	background-color: #000;
}

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}

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

.zeroed
{
	height: 0!important;
	padding-top: 0!important;
}

/* -------------------- */
/* HEADER ------------- */
/* -------------------- */
.container-fluid
{
	/*background-color: #333;*/
	padding: 0!important;
}

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

h1
{
	font-weight: 700;
	float: left;
	color: #fff;;
	font-size: 1.5em;
	text-align: center;
	margin-left: 0px;
}

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

header hr
{
	border-color: rgba(255, 255, 255, .2);
	border-width: 1px;
	margin: 10px 0;
}

.iconify
{
	font-family: "Khula", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #e05f10;
	font-weight: 800;
	font-size: 2em;
	vertical-align: middle;
	display: inline-block;
	border-radius: 50%;
	height: 16px;
}

/*#graphHeader
{
	-webkit-display: flex;
	display: flex;

	-webkit-justify-content: center;
	justify-content: center;

	-webkit-align-items: center;
	align-items: center;

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

#graphWrap
{
	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: 30px;*/
	right: 32px;
	position: absolute;
	margin-top: 18px;
	border-radius: 5px;
	/*margin-top: 15px;*/
	/*margin-top: -120px;*/
}

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

#graphKey p
{
	font-size: 12px;
	margin: 0 10px;
	padding: 0;
	color: black;
	/*text-align: right;*/
}

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

.orange
{
	color: #e05f10;
	font-size: 1.2em;
	/*vertical-align: middle;*/
}

/* -------------------- */
/* NAVIGATION --------- */
/* -------------------- */

#navigation
{
	padding: 10px 10px 0 10px !important;
	background-color: #222;
	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;
}

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

.btn-sm
{
	padding: .25rem .5rem;
	/*font-size: .8rem;*/
	line-height: 1;
	border-radius: .2rem;
}

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

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

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

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

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

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

/* -------------------- */
/* INSTRUCTIONS ------- */
/* -------------------- */
.row.instructions-holder
{
	/*background-color: #32332f;*/
	padding: 10px;
}

/*.instructions-border
{
	background-color: #222;
	padding: 10px!important;
	border-radius: 10px;

	-webkit-display: flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}*/

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

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

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

.instructions h2
{
	color: #000;
	/*color: #000;*/
	font-size: 1.3em;
}

.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;
}

.modal-content
{
	box-shadow: 0 0px 5px 6px rgba(0,0,0,.2);
	border: none;
}

.modalFooter
{
	border: none;
/*background-color: #7f370f;*/
background-color: #455460;
height: 63px;
margin-left: -15px;
margin-right: -15px;
margin-bottom: -15px;
padding: 12px 20px 5px;
border-radius: 0 0 4px 4px;
}

.btn-modal
{
	color: #999;
}

.btn-modal:hover
{
	background-color: #ccc;
	color: #333;
	cursor: pointer;
}

.modal p
{
	font-size: .9em;
	padding: 0;
	font-family: 'Open Sans', Verdana, sans-serif;
	font-weight: 500;
	line-height: 1.3em;
	color: #666;
	text-align: left;
}

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

.modal h2
{
	color: #666;
	font-weight: 400;
	font-size: 20px;
}

.modal h2 strong
{
	color: black;
	/*font-size: 19px;*/
}

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

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

/*.instructions li,*/
.modal li
{
	font-size: 1.4em;
	font-family: 'Lora', Georgia, serif;
	padding: 0 0 10px 0;
	color: #666;
}

.instructions strong,
.modal strong
{
	color: black;
}

/* -------------------- */
/* INTERACTIVE -------- */
/* -------------------- */
.interactive-body,
.interactive-body-dark
{
	/*background-color: #384552;*/
	background-color: #333;
	color: white;
	/*padding: 10px;*/
	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 table
{
	color: black;
	border-top-color: #3d8aa6;
}

.interactive table thead tr td
{
	background-color: #3d8aa6;
	color: white;
	border-color: #3d8aa6;
	border-bottom: none;
}

.interactive table thead tr td:nth-child(1),
.interactive table thead tr td:nth-child(2),
.interactive table thead tr td:nth-child(3)
{
	border-right-color: white;
}

.interactive table tbody tr td:first-of-type
{
	text-align: left;
}

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

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

/* -------------------- */
/* TEXT --------------- */
/* -------------------- */
.btn-lg .glyphicon
{
	font-size: 25px;
}

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

.btn.flex-btn
{
	display: flex;
	-webkit-display: flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	text-align: left;
	font-weight: normal;
	line-height: 15px;
	padding: 8px 10px 3px 10px;
	align-items: center;
	-webkit-align-items: center;
	margin: 0 auto 20px auto;
	width: 130px;
}

.btn.flex-btn.btn-grey
{
	background-color: #ccc;
}

.btn.flex-btn.btn-success
{
	background-color: rgb(75, 148, 8);
}

.btn.flex-btn strong
{
	display: block;
	font-size: 15px;
}

.btn.flex-btn div
{
	flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
}

.btn.flex-btn .glyphicon
{
	padding-right: 10px;
	flex: 0 0 auto;
	-webkit-flex: 0 0 auto;
	width: 30px;
}

.btn-success .glyphicon
{
	color: #CDE88B;
}

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: 1.5em;
	margin-top: 0;
	font-weight: 700;
	color: #000;
}

/* -------------------- */
/* BOOTSTRAP OVERRIDES  */
/* -------------------- */
#i3 .btn
{
	border: none;
	border-radius: 10px!important;
}

.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;
	/*padding: 9px 12px 0 12px;
	height: 45px;*/
}

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

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

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

.panel
{
	margin: 0 auto;
}

.panel-dark
{
	border-color: #666;
	background-color: transparent;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-width: 3px;
}

.panel-footer p
{
	color: black;
}

.panel-dark.svg-hold
{
	width: 420px;
	overflow: hidden;
}

.panel-dark.svg-hold .panel-body
{
	background-color: #3d8aa6;
	padding-bottom: 0;
	padding-right: 0;
}

.panel-dark .panel-body
{
	background-color: #222;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

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

#slide-toggles h4
{
	/*display: inline-block;*/
	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 10px 0 0;
	background-color: #222;
	padding: 10px 10px 0 10px;
	margin: 10px 10px 0 10px;
	text-transform: capitalize;

}

.modal .slide,
.modal .slide-bottom
{
	background-color: #ccc;
	border: none;
}

.modal .slide-bottom h4
{
	text-align: center;
}

.modal .slide img
{
	border-radius: 10px;
}

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

.slide:hover
{
	cursor: pointer;
}

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

.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;
	/*margin-bottom: 20px;*/

}

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

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

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

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;
}

.modal-header {
	background-color: #666;
	border-radius: 3px 3px 0 0;
	padding-top: 0;
}

.modal h5
{
	/*display: inline-block;*/
	/*padding: 0;*/
	color: white;
	background-color: transparent;
}

.modal button.close
{
	color: white!important;
}

.modal-header
{
	border: none;
	padding-bottom: 0;
}

.modal-body .container
{
	max-width: none;
	padding: 0;
}

.modal-dialog
{
	max-width: 90%;
}

.modal-body
{
	/*padding-top: 0;*/
}

.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;
}

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;
}


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

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

/* -------------------- */
/* SLIDE LABEL          */
/* -------------------- */

.slide-label
{
	background-color: white;
	border-radius: 10px;
	margin-top: 10px;
	padding-top: 10px;
}

#slide-category
{
	color: #676863;
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: 0;
	/*margin-top: 10px;*/
	padding-bottom: 0;
	background-color: transparent;
	font-weight: normal;
}

#slide-title
{
	color: black;
	margin-top: 3px;
	margin-bottom: 1px;
	font-size: 24px;
}

#slide-description
{
	margin: 0 auto;
	font-family: 'Open Sans', Verdana, sans-serif;
	font-weight: 300;
	font-size: 16px;
	text-align: left;
	color: #333;
}

/* -------------------- */
/* SVG                  */
/* -------------------- */
#diagram-wrap
{
	border-radius: 10px;
	background-color: #384552;

	border: 1px solid #555;
}

#diagram
{
	margin: 0 auto;
}

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

.inline
{
	display: inline-block !important;
	clear: none;
	float: none;
	vertical-align: text-top;
}

.inline:hover
{
	cursor: default;
}

/* -------------------- */
/* LABELS               */
/* -------------------- */


/* -------------------- */
/* GRAPH                */
/* -------------------- */
#graph svg,
.graph svg
{
	overflow: visible;
}

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

#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;
	/*font: normal normal normal 12px/1 FontAwesome;*/
}

#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;
	/*stroke-width: 1px;
	stroke: rgba(255,255,255,.1);*/
}

#graph.graph-light .graph-background,
.graph.graph-light .graph-background
{
	/*stroke: rgba(0,0,0,.2);*/
	fill: #efefef;
}

.play-btn
{
	background-color: #4b9408;
	box-shadow: none;
	border: none;
	margin: 0;
}

.play-btn:hover
{
	background-color: #3b7606;
	box-shadow: none;
	cursor: pointer;
}

.play-btn.disabled,
.play-btn.disabled:hover
{
	background-color: #4b9408;
	box-shadow: none;
	border: none;
	margin: 0;
	opacity: .3;
	cursor: default;
}

.btn-info
{
	background-color: #87a96b;
}

.btn-info:hover
{
	background-color: #fff!important;
	color: #87a96b!important;
}

.pause-btn
{
	background-color: #a1100a;
	box-shadow: none;
	border: none;
	margin: 0;
}

.pause-btn:hover
{
	background-color: #af2c42;
	box-shadow: none;
	cursor: pointer;
}


/* food holder */
#foodHolder:hover *
{
	cursor: pointer;
}

#foodHolder circle
{
	-webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.5));
  filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.5));

	stroke-width: 2px;
	stroke: #fff;
}

#foodHolder:hover circle
{
	stroke: #e05f10;
}

/* -------------------- */
/* DONUT GRAPH          */
/* -------------------- */
.donut-slice
{
	stroke: #fff;
	stroke-width: 2px;
}
