/*@charset "utf-8";
*//* CSS Document */

.row {
  /* margin-left: 0px; */
}

#cat_details > div {
	display: none;
}

.cat {
	width:12px;
	height: 12px;
	text-align: center;
	padding: 5px; 
	float: left;
	margin-right: 10px;
	border-radius: 3px;
	font-weight: bold;
	line-height: 20px;
	border: 1px solid #666;
	text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;
	color: #e5e5e5;
	font-size: 18px;
}

/* Removed #cat_details by inserting "display:none" per John Donovan's request 6-14-16 (xjf5)  */

#cat_details {
	margin-top: 20px;
        display:none;
}

#scaleContainer label {
	color: rgba(79,79,79,1.00);
	font-weight: bold;
	/*padding: 20px 0px;
	margin: 20px;*/
	vertical-align: middle;
}

#scaleContainer .container {
	padding-top: 20px;
	padding-right: auto;
	padding-bottom: 20px;
	padding-left: auto;
}

#scaleContainer .btn-default {
	background-color: rgba(225,225,225,1);
	background-image: none;
	border: 2px solid rgba(8,81,0,1);
}

#scaleContainer .btn-default:hover {
	background-color: rgba(193,213,176,1);
	background-image: none;
	border: 2px solid rgba(8,81,0,1);
}

#scaleContainer .btn:focus {
		/*outline: none;*/
}

#cd-slider {
	/*padding: 31px 10px 0px 10px;*/
	/*position: relative;*/
	/*top: 24px;*/
}

#value, #sliderposition {
	height: 24px;
	margin: 0;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	vertical-align: middle;
}

#scaleContainer-parent {
	/*background-color: rgba(58,255,0,0.25);*/
	height: auto;
	margin: 10px; /* May need to adjust this for vert or again once it's actually in the real CDC template */
	padding: 0px;
	position: relative;
}

#scaleContainer-parent.vertical {
	height: 500px;
	width: 280px;
	float: left;
	margin-left: -10px;
}

#scaleContainer {
	/*background-color: rgba(255,0,4,0.25);*/
	display: table;
}

#scaleContainer > div {
	display: table-row;
}

#scaleContainer > div > div {
	display: table-cell;
	vertical-align: middle;
}

#scaleContainer > div:first-child > div:first-child,
#scaleContainer > div:first-child > div:last-child {
	/*background-color: rgba(255,0,4,1.00);*/
	height: 50px;
	width: 50px;
}

#scaleContainer > div:nth-child(2) > div:first-child {
	padding-right: 10px;
}

#scaleContainer > div:nth-child(2) > div:last-child {
	padding-left: 10px;
}

#scaleContainer > div:first-child > div:nth-child(2) {
	width: 100%;
}


/*div.range-container.vertical,*/
#scaleContainer.vertical {
	/* for vertical - move out into its own class */
	-ms-transform: rotate(-90deg); /* IE 9 */
	-webkit-transform: rotate(-90deg); /* Safari */
	transform: rotate(-90deg);
	transform-origin: center center;
	position: relative;
	top: 174px;
	left: -114px; /* if mobile make this -120px */
	height: 100px;
	width: 500px;
	
 }
 
#scaleContainer div.output{
	background-color: rgba(228,228,228,1.00);
	background-color: rgba(193,213,176,1); /* CDC Greens light */
	border: 1px solid rgba(200,200,200,1.00);
	border: 2px solid rgba(8,81,0,1); /* CDC Template Green */
	border-radius: 8px;
	color: #000;
	color: rgba(8,81,0,1);
	margin-top: 20px;
	padding: 0px;
	z-index: 2;
	width: 100%;
}

#scaleContainer-parent:not(.vertical) div.output{
	/* if orientation is horizontal */
	width: calc(100% - 140px);
	position: relative;
	left: 70px;
}

#scaleContainer-parent.vertical div.output {
	/*width: 280px;*/
	height: 496px;
	position: absolute;
	top: 0px;
	left: 280px;
	margin: 0px;
	/*opacity: 0.5;*/
}

#scaleContainer .range-container {
	border: 0px;
	margin: 0px;
	padding: 0px;
	height: 50px;
}
 
#exposure-value {
	font-size: 150%;
	line-height: 150%;
	margin-bottom: 20px;
	padding: 5px;
	margin: 0px;
	text-align: left;
}

#output-footer {
	padding: 5px;
	text-align: center;
	position: relative;
	bottom: 0px;
	height: 70px;
}

#scaleContainer-parent.vertical #description {
	height: 320px;
}

#description * {
	font-weight: 700;
}

#prev-button,
#next-button {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	text-shadow: -1px -1px 0px #666, 1px -1px 0px #666, -1px 1px 0px #666, 1px 1px 0px #666;
	color: #e5e5e5;
	font-size: 22px;
	line-height: 50px;
	text-align: center;
	padding: 0px;
}
#prev-button > i ,
#next-button > i {
	width: 46px;
	height: 46px;
	line-height: 46px;
	font-size: 22px;
	text-align: center;
	border: 2px solid transparent;
	position: relative;
	top: -2px;
	left: -2px;
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari */
	transform: rotate(90deg);
}

#scaleContainer #prev-button {
	background-color: #267899;
	background-color: #00b0f0;
}
#prev-button img {
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari */
	transform: rotate(90deg);
	border: 0px;
	margin: 0px;
	padding: 0px;
	position: relative;
	top: -3px;
}
#scaleContainer #next-button {
	background-color: #ff3f42;
	background-color: #ff0000;
}
#next-button img {
	-ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Safari */
	transform: rotate(90deg);
	border: 0px;
	margin: 0px;
	padding: 0px;
	position: relative;
	top: -3px;
}

.tick-mark-top-outter-container,
.tick-mark-outter-container {
	position: relative;
	padding-left: 25px; /* half the width of the thumb slider */
	padding-right: 25px; /* half the width of the thumb slider */
}

.tick-mark-top-inner-container,
.tick-mark-inner-container {
	/*background-color: pink;*/
	position: relative;
	width: 100%;
	height: 50px;
	cursor: default;
	z-index: -1;
}

div.tick-mark {
	display: inline;
	background-color: rgba(200,200,200,1.00);
	padding: 0;
	margin: 0;
	border: 0;
	height: 35px;
	width: 1px;
	position: absolute;
	top: -10px;
}

.tick-mark-top-inner-container > div.tick-mark{
	top: auto;
	bottom: -10px;
}

div.tick-mark.data-point {
	background-color: #ff0000;
	background-color: rgba(255, 255, 0, 1); /* Yellow */
	background-color: rgba(255, 0, 0, 1); /* Red */
	background-color: rgba(0, 0, 255, 1); /* Blue */
	background-color: rgba(255, 0, 255, .5); /* Magenta */
	background-color: rgba(8,81,0,1); /* CDC Template Green */
	
	height: 25px;
	position: absolute;
	top: -10px;
}

.tick-mark-top-inner-container > div.tick-mark.data-point{
	top: auto;
	bottom: -10px;
}

div.tick-label {
	color: rgba(150,150,150,1.00);
	display: inline-block;
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	white-space: nowrap;
	top: 30px;
}

.tick-mark-top-inner-container > div.tick-label{
	top: 0px;;
}

div.tick-mark + div.tick-label,
div.tick-label + div.tick-label {
	-webkit-transform-origin: center;
	-webkit-transform: translateX(-50%);
	transform-origin: center;
	transform: translateX(-50%);
}

div.tick-label.top {
	color: red;
	top: -85px;
}

#scaleContainer.vertical > div:nth-child(1) > div:nth-child(2) > div > div > div.tick-label,
#scaleContainer.vertical > div:nth-child(3) > div:nth-child(2) > div > div > div.tick-label {
	-ms-transform: rotate(90deg); /*IE 9*/ 
	-webkit-transform: translateX(-50%) translateY(100%) rotate(90deg); /*Safari*/ 
	transform: translateX(-50%) translateY(100%) rotate(90deg);
	width: 70px;
}

#scaleContainer.vertical > div:nth-child(1) > div:nth-child(2) > div > div > div.tick-label {
	-webkit-transform: translateX(-50%) translateY(-100%) rotate(90deg);
	transform: translateX(-50%) translateY(-100%) rotate(90deg);
}


/* Custom styles for the range input */
/* for webkit */
#scaleContainer input[type="range"] {
	-webkit-appearance: none;
	background-color: transparent;
	/*outline: none;*/
	width: 100%;
	height: 50px;
	margin: 0px;
	padding: 0px;
}

#scaleContainer input[type=range]:focus {
    /*outline: none;*/
}

#scaleContainer input[type=range]:focus::-webkit-slider-runnable-track {
    /*background: #ccc;*/
}

#scaleContainer input[type=range]::-webkit-slider-runnable-track {
	height: 18px;
	width: 100%;
	background: transparent;
	background: linear-gradient(to right,  rgba(193,213,176,1) 0%,rgba(8,81,0,1) 100%); /* W3C */
	border-radius: 10px;
	border: 1px solid rgba(255, 0, 255, .75);
	border: 2px solid #085100;
	border: 2px solid rgba(150,150,150,1.00);
	border: 2px solid #bdc3c7;
	/* Use a negitive margin equal to the border to compensate for undesired thumb offset */
	margin: -2px;
	cursor: pointer;
}

#scaleContainer input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 50px;
	height: 50px;
	background-color: transparent;
	/* note: over rides in additional css files will not load a new image here */
	background-image: url(../img/thumb3.png);
	background-image: url(../img/thumb-dark.png);
	background-image: url(../img/thumb-green2.png);
	background-image: url(../img/thumb4.png);
	background-image: url(../img/thumb5.png);
	background-repeat: no-repeat;
	background-position: center;
	border: 0px;
	/* use margin to fix alignment of slider thumb - due to IE 10/11 not rendering the same styles as every other modern browser */
	margin-top: -18px;
	/*
	cursor: hand;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
	background-image: url(../img/thumb_big.png);
	height: 250px;
	position: relative;
	top: -100px;
	*/
	/*background-color: rgba(0,0,0,0.50);*/
}

/*
#scaleContainer input[type="range"]::-webkit-slider-thumb::grab {
	cursor: -webkit-grab;
}
#scaleContainer input[type="range"]::-webkit-slider-thumb.grabbing {
	cursor: -webkit-grabbing;
}
*/

/* for firefox */
#scaleContainer input[type="range"]::-moz-range-track {
	height: 18px;
	background: -moz-linear-gradient(left,  rgba(193,213,176,1) 0%, rgba(8,81,0,1) 100%); /* FF3.6+ */
	border-radius: 10px;
	border: 2px solid #085100;
	border: 2px solid rgba(150,150,150,1.00);
	border: 2px solid #bdc3c7;
	cursor: pointer;
}

#scaleContainer input[type="range"]::-moz-range-thumb {
	width: 50px;
	height: 50px;
	background-color: transparent;
	background-image: url(../img/thumb3.png);
	background-image: url(../img/thumb-dark.png);
	background-image: url(../img/thumb-green2.png);
	background-image: url(../img/thumb4.png);
	background-image: url(../img/thumb5.png);
	background-repeat: no-repeat;
	background-position: center;
	border: 0px;
	/*cursor: move;*/
}

/* for IE */
#scaleContainer input[type="range"]::-ms-fill-lower{
	background: transparent; /* fill color for track below thumb */
	/*background: linear-gradient(to right,  rgba(193,213,176,1) 0%,rgba(8,81,0,1) 100%);  W3C */
	border-radius: 8px;
}

#scaleContainer input[type="range"]::-ms-fill-upper {
	background: transparent; /* fill color for track above thumb */
	/*background: white;  fill color for track above thumb */
	border-radius: 8px;
}

#scaleContainer input[type="range"]::-ms-track {
	height: 18px;
	color: transparent;
	background: linear-gradient(to right,  rgba(193,213,176,1) 0%,rgba(8,81,0,1) 100%); /* W3C */
	border-radius: 10px;
	border: 2px solid #085100;
	border: 2px solid rgba(150,150,150,1.00);
	border: 2px solid #bdc3c7;
	cursor: pointer;
}

#scaleContainer input[type="range"]::-ms-thumb {
	width: 50px;
	height: 50px;
	background-color: transparent;
	background-image: url(../img/thumb3.png);
	background-image: url(../img/thumb-dark.png);
	background-image: url(../img/thumb-green2.png);
	background-image: url(../img/thumb4.png);
	background-image: url(../img/thumb5.png);
	border: 0px;
	/*cursor: move;*/
}

#scaleContainer input[type="range"]::-ms-tooltip {
	display: none;
}
/*
$('.output').css('width', 'calc(100% - 180px)'); // iPhone 4/5 - max-width 320px
$('.output').css('width', 'calc(100% - 130px)'); // iPhone 6 - max-width 380px
$('.output').css('width', 'calc(100% - 90px)'); // iPhone 6 Plus - max-width 420px
*/

/* for Edge (Windows 10 default browser) - fix issue with thumb button not aligning properly */
_:-ms-lang(x), #scaleContainer input[type="range"]::-webkit-slider-thumb {
	overflow: visible;
	background-position: 0px 19px;
	width: 50px;
	height: 70px;
	position: relative;
	top: 10px;
}


#select-container {
	padding-left: 15px;
}

.desc-table {
	border: 1px solid #085100;
	display:table;
	width: 100%;
}

.desc-row {
	display: table-row;
}

.desc-cell {
	display: table-cell;
	padding: 10px;
	width: 50%;
	vertical-align: top;
}


div#cd-container.row [class*="span"] {
	margin-left: 0px !important;
}

.slider-select {
	width: 100%;
}

/**********************************************************************************
This should fix bullets to align with other text in containers within the CDC 
template that pushes the bullets out to the left
**********************************************************************************/
ul li {
	margin-left: 20px;
}

@media screen and (max-width : 800px) {
	#scaleContainer-parent:not(.vertical) div.tick-label {
		font-size: 12px;
	}
}

@media screen and (max-width : 700px) {
	#scaleContainer-parent:not(.vertical) div.tick-label {
		font-size: 10px;
	}
}

@media screen and (max-width : 650px) {
	#scaleContainer-parent:not(.vertical) div.tick-label {
		display: none;
	}
}

@media screen and (max-width : 480px) {
		#scaleContainer-parent:not(.vertical) .tick-label {
		display: none;
	}
}

@media screen and (max-width : 420px) {
	#scaleContainer-parent.vertical > div.output {
		width: calc(100% - 90px);
	}
}

@media screen and (max-width : 380px) {
	#scaleContainer-parent.vertical > div.output {
		width: calc(100% - 130px);
	}
}

@media screen and (max-width : 320px) {
	#scaleContainer-parent.vertical > div.output {
		width: calc(100% - 180px);
	}
}

/* if orientation is portrait  and with is LT 500 */

@media screen and (max-width: 768px) and (orientation: portrait) {
	 
	 /* figure out how to do this only on mobile */
	 #scaleContainer.vertical > #scaleContainer-firstRow {
		 /*visibility: hidden;*/
	 }

 }

.thermoLabel{
    font-weight: 700;
    color:green;
}

@media screen and (min-width: 768px){
	#thermometer-info{
		padding-top: 65px;
	}

       .thermoLabel1{
              text-align:left !important;
              margin-left:96px;
              display:block;
       }
       .thermoLabel2{
               text-align:center !important;
               display:block;
       }
       .thermoLabel3{
               display:none;
       }
       .thermoLabel4{
               visibility: visible;
       }
}

@media screen and (max-width: 767px){
	.desc-row {
		display: block;
		padding: 10px;
	}
	
	.desc-cell {
		display: table-row;
		width: 100%;
	}
	#select-container {
		padding-left: 0px;
	}
        .thermoLabel1{
              text-align:left !important;
              margin-left:77px;
              display:block;
       }

       .thermoLabel2{
              display:none;
       }

       .thermoLabel3{
              display:block;
       }
       .thermoLabel4{
               visibility: hidden;
       }

}

.grab {
	cursor: hand;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.grabbing {
	cursor: hand;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}