.mini-instructions
{
    padding: 20px;
    border-radius: 10px;
}

.mini-instructions.slide-label
{
  border-radius: 5px;
}

p.note
{
  font-size: 12px;
  color: #333!important;
}

.btn-xs
{
  padding: 3px 5px;
  font-size: 12px;
}

#save-btn:hover
{
  cursor: pointer;
}

.btn-info
{
  color: white!important;
}

#btn-my-samples i {
  font-family:  "Ionicons";
}

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

.instructions .btn {
  pointer-events:none;
}

.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: 20px 20px 0 20px;
	margin: 10px 10px 0 10px;
	text-transform: capitalize;
} */

.slide:hover
{
	cursor: pointer;
}

.slide img
{
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
	max-width: 100%;
	width: 100%;
	border-width: 0;
}

p.slide-img-credit {
  color: #aaa;
  font-size: 8px;
  margin: 0;
  padding-bottom: 5px;
  line-height: 1em;
}

.slide img {
  margin-bottom: 3px;
}

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

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

.slide-label
{
	background-color: white;
	border-radius: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

#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: 14px;
	text-align: left;
	color: #333;
}

#diagram
{
  background-color: #87a96b;
  border-radius: 10px;
  padding: 20px;
  height: 100%;
}

.slide-bottom
{
  margin-bottom: 10px;
}


/* -------------------- */
/* POPOVERS             */
/* -------------------- */
.popover-title
{
	text-align: center;
	color: #000;
	padding-bottom: 4px;
}

.popover-title span
{
	color: #999;
	float: right;
	margin-top: -3px;
}

.popover-content
{
	color: #333;
}

/* -------------------- */
/* COMPARE HOLDER       */
/* -------------------- */
#compare-holder
{
	padding: 0;
}

#compare-holder div.img-hold
{
	border-radius: 10px;
	background-color: #fff;
  padding: 20px 0 10px 0;
  margin: 10px 0;
	text-transform: capitalize;
}

#compare-holder div.img-hold h4
{
	color: #000;
	margin-top: 5px;
	font-size: 16px;
}

#compare-holder div.img-hold img
{
	border-radius: 10px;
	display: block;
	margin-bottom: 10px;
	max-width: 100%;
	width: 100%;
}

.glyphicon-remove-sign
{
	color: #666;
}

.glyphicon-remove-sign:hover
{
	cursor: pointer;
	color: #a1100a;
}

#compare-holder h5
{
	background-color: white;
	color: #666;
	margin: 0;
	border-radius: 0 0 10px 10px;
}


/* -------------------- */
/* SVG                  */
/* -------------------- */
#diagram
{
	/*max-width: 630px;*/
	max-width: 680px;
	margin: 0 auto;
}

#save-alert
{
	z-index: 100;
	border-radius: 10px;
	 position: fixed;
	  top: 50%;
	  left: 50%;
	  /* bring your own prefixes */
	  transform: translate(-50%, -50%);
	/*border: 2px solid #92b783;*/
	font-size: 2em;
	-webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.9);
	-moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.9);
	box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.9);

}

.popover.top > .arrow::after
{
	border-top-color: #efefef;
}
.popover
{
	background-color: #efefef;
}

.mag-label
{
	fill: black;
	font-size: 19px;
	font-family: "Khula-Bold", Khula;
	font-weight: 700;
	text-anchor: middle;
}

.mag-label-x
{
	fill: #989995;
	font-size: 12px;
}

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

.inline:hover
{
	cursor: default;
}

#microscope_full
{
	opacity: 1;
	float: right;
	margin: 20px 20px 20px 10px;
	max-width: 150px;
	background-color: #ccc;
	padding: 20px;
	border-radius: 20px;
}

#microscope_full img
{
	max-width: 100%;
}

#microscope-girl
{
	max-width: 500px;
	width: 100%;
	border-radius: 20px;
	border: 5px solid #fff;
	background: #fff;
	margin: 0 auto;
}

#microscope-girl img
{
	border-radius: 20px;
	max-width: 100%;
}

.slide-hover-state
{
  padding: 0 5px !important;
}

.slide-bottom h4
{
  margin-top: 5px;
  font-size: 16px;
}

#slide-credit
{
  color: #333;
	font-size: 11px;
	margin-top: 10px;
}

#credit {
	color: #333;
	font-size: 11px;
	margin-top: 10px;
}

#btn-my-samples img {
  max-width: 15px;
  vertical-align: baseline
}


#slide-holder h4.categorytitle {
	margin-top: 30px;
    border-top: 4px dotted #CDCDB9;
    padding-top: 30px;
}