/*
 * selector.css
 *
 */
#t24ShowFeatures,
#t24HideFeatures {
	background-color:#555;
	color: #fff;
	font-size: 1rem;
	padding: 4px 8px;
	margin-top: 1rem;
	border-radius: 8px;
	border: 1px solid #123;
	box-shadow: -1px 2px 4px #aaa;
	cursor:pointer;
}
.t24hide {
	display: none !important;
}
.t24show {
	display: inline;
}

#features{
	background-color: #eee;
	padding: 2rem;
		}

#t24ShowFeatures:hover,
#t24HideFEatures:hover {
	background-color:#111;
	box-shadow: -1px 2px 10px #555;
	
}
.t52_selector_page {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(48px - 100vh);
	background-color: rgba(255,255,255,0.8);
	padding: 0 1rem;
	box-sizing: border-box;
	box-shadow: 0px 20px 20px #62839c;
}
.t52_selector_imageholder {
	width: 100%;
	height: calc(100vh - 48px);
	position: sticky;
	background-position: center;
	top: 48px;
	z-index: -3;
}
#powerInfo, #runtimeInfo {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #ccc;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 8px;
}
#powerSliderContainer, #runtimeSliderContainer {
	min-width: 70%;
}

#powerSliderContainer label, #runtimeSliderContainer label
 {
	 font-weight: bold;
	display: block;
}
#powerSliderContainer input {
	font-size: 1.5rem;
}
.upsSelectorSelection {
	display: inline-block;
}
.upsSelectorSelection input {
	margin-top: 1.5rem;
	font-size: 1.5rem;
}
.upsSelectorMultiplier {
	font-weight: lighter;
	font-style: italic;
}
#powerSlider, #runtimeSlider {
	width: 90%;
  -webkit-appearance: none;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.9;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
#powerSlider:hover, #runtimeSlider:hover {
	opacity: 1;
}
#powerSlider::-webkit-slider-thumb, #runtimeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #62839c;
  cursor: pointer;
}

#powerSlider::-moz-range-thumb, #runtimeSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #62839c;
  cursor: pointer;
}

#gobutton {
	background-color:#555;
	color: #fff;
	font-size: 1.5rem;
	padding: 4px 8px;
	margin-top: 1rem;
	border-radius: 8px;
	border: 1px solid #123;
	box-shadow: -1px 2px 4px #aaa;
	cursor:pointer;
}
#gobutton:hover {
	background-color:#111;
	box-shadow: -1px 2px 10px #555;
}

#features {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

.featureContainer {
	width: 320px;
}

.featureimg {
	vertical-align: middle;
	width: 48px;
	height: 48px;
}

#resultList {
	overflow-x: auto;
}

.response_success{
	border-left: 4px solid #494;
	padding-left: 1rem;
	margin-bottom: 1rem;
}
.response_warning {
	border-left: 4px solid #999;
	padding-left: 1rem;
}
.response_error {
	border-left: 4px solid #944;
	padding-left: 1rem;
}
.table {
	border-collapse:collapse;
}
.usrTableHead th {
	background-color:#555 !important;
	color:#fff;
}
.usrEntry, .table th{
	padding: 0.5rem;
	text-align: center;
	border: 1px solid #000;
	vertical-align: middle;
}
.usrImg img, .usrAction a button {
	margin-left:auto;
	margin-right: auto;
}
.usrRuntime {
	font-weight: bold;
	font-size: 1.2rem;
}

.usrEntry button {
	display: block;
	cursor:pointer;
	width:6rem;
	height: 1.5rem;
	font-size: 0.8rem;
	padding: 2px;
	margin: 4px;
	background-color:#555;
	color: #ccc;
	border-radius: 4px;
	border: 1px solid #123;
	box-shadow: -1px 2px 4px #aaa;
}
.usrEntry a {
	text-decoration: none;
}
.usrEntry button:hover {
	background-color:#111;
	box-shadow: -1px 2px 10px #555;
	
}

/* Overrides for small screens */
@media screen and (max-width: 670px) {

  .t52_selector_imageholder {
	  height: 100vh;
	  top: 0px;
  }
  .t52_selector_page {
	  margin-top: -100vh;
  }
	#powerSliderContainer, #runtimeSliderContainer {
		min-width: 100%;
	}

}