.rangeslider {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}


/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.degreesLabel{
  position: absolute;
  top:5px;
  left:15px;
  border-radius: 5px;
  background:rgba(255,255,255,0.7);
}

.modal .degreesLabel{
  top:15px;
  left:25px;
}

#sliderImages{
  /*position: relative;*/
}
.sliderImage{
  
  position:absolute;
  top:0;
  left: 0;
}

.highlight {
  outline: 6px solid rgba(255,0,0,.5);
}
.highlight:hover, .highlight:focus {
  outline-color: rgba(255,0,0,1);
}

.highlightblue{
  outline: 6px solid rgba(0,0,255,.5);        
}

.highlightblue:hover, .highlightblue:focus {
  outline-color: rgba(0,0,255,1);
}
.highlightText{
  background-color: rgba(255,255,255,.6);
  display: inline-block;
}
.highlightTextCenter{
  background-color: rgba(255,255,255,.6);
  text-align: center;
}
.rotationOverlay {
  border-radius: 25px;
  padding: 10px;
}
.rotationOverlay img {
  background: radial-gradient(circle at center, rgba(255,255,255,1),rgba(255,255,255,.9)20%, rgba(255,255,255,0)40%);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform .4s ease-in-out;
  transition: transform .4s ease-in-out;
  padding: 40px;
}
.rotationOverlay img:hover, .rotationOverlay img:focus {
  -webkit-transform:  translate(-50%, -50%)rotate(180deg) ;
  transform: translate(-50%, -50%) rotate(180deg) ;
}

.circleEdges {
  margin: 10px;
  border-radius: 50%;
  overflow: hidden;
}