/* CSS Document */

div.aria-widget-slider {
  margin-top: 0px;
  margin-bottom: 0px;
  height: 4em;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	align-content: space-between;
  flex-wrap: wrap;
}

div.aria-widget-slider .rail {
  margin: 0px;
  padding: 1px;
  background-image: linear-gradient(90deg, #FF0000 0%, #FFFF00 16.68%, #00FF00 33.67%, #00FFFF 50.01%, #0000FF 66.7%, #FF00FF 83.35%, #FF0000 100%);
  /*position: relative;
  top: 2em;*/
	height: 31px;
}

div.aria-widget-slider .thumb {
  border: 1px solid #888;
  border-top-color: #666;
  border-left-color: #666;
  background-color: #ddd;
  position: relative;
  top: -4px!important;
  height: 38px!important;
}

div.aria-widget-slider .rail .thumb.focus,
div.aria-widget-slider .rail .thumb:hover {
  outline: 1px solid #888;
  background-color: #fff;
}

div.aria-widget-slider .rail.focus {
  background-color: #aaa;
}

div.aria-widget-slider .value {
  width: calc(100%/3);
	margin-right: 1em;
  margin-top: auto;
  margin-bottom: auto;
}

label {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#idColorBox {
  width: 200px;
  height: 200px;
  border: black solid medium;
  text-align: center;
  padding: 0.25em;
}

#idColorInfo {
  padding-top: 5px;
}

/* Responsive breakpoints */
@media only screen and (max-width: 952px) {
  div.aria-widget-slider {
	  flex-direction: row;
    flex-wrap: wrap-reverse;
    margin-top: 20px;
  }

  div.aria-widget-slider .rail {
    margin: 10px 0px;
  }
}

@media only screen and (max-width: 700px) {
  div.aria-widget-slider {
	  flex-direction: row-reverse;
    flex-wrap: nowrap;
    margin-top: 20px;
  }

  div.aria-widget-slider .rail {
    margin: 15px 0px;
  }
}

@media only screen and (max-width: 657px) {
  div.aria-widget-slider {
	  flex-direction: row;
    flex-wrap: wrap-reverse;
    margin-top: 20px;
  }

  div.aria-widget-slider .rail {
    margin: 10px 0px;
  }
}