body
  {
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  --color-range-output: #666;
  --color-input-placeholder: #888;
  --height-range-bounds: 22px;
  --background-color-range-thumb: #333940;
  --radius-range-thumb: 100px;
  --height-range-thumb: 24px;
  --width-range-thumb: 24px;
  --size-range-thumb-shadow: 25px;
  --color-range-thumb-shadow: rgba(#000, .5);
  --shadow-offset-y-range-thumb: 4px;
  --shadow-offset-x-range-thumb: 0px;
  --border-width-range-thumb: 6px;
  --border-color-range-thumb: #fff;
  --width-range-track: 100%;
  --height-range-track: 24px;
  --radius-range-track: 100px;
  --fill-range-track: rgba(40, 40, 40, 1);
  --fill-range-track-active: rgba(90, 127, 147, 1);
    
  --height-range-output: 40px;
  --min-width-range-output: 60px;
  --padding-x-range-output: 10px;
  --size-range-output-arrow: 10px;
  --offset-y-range-output: 4px;
  }

.range 
  {
  position: relative;
  }

.range input[type=range] 
  {
  appearance: none;
  padding: 0;
  width: var(--width-range-track);
  height: var(--height-range-bounds);
  cursor: pointer;
  display: block;
  }
    
.range input[type=range]::focus 
  {
  outline: none;
  }
    
.course-rangeslider 
  {
  position: relative;
  height: var(--height-range-bounds);
  cursor: pointer;
  user-select: none;
  }

.course-rangeslider::before 
  {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: var(--width-range-track);
  height: var(--height-range-track);
  background: var(--fill-range-track);
  border-radius: var(--radius-range-track);
  transition: background-color 1s ease-in;
  border: 1px dotted #888;
  }

.course-rangeslider.left::before
  {
  background: var(--fill-range-track);
  }

.course-rangeslider.right::before
  {
  background: var(--fill-range-track-active);
  border: none;
  }

.course-rangeslider-fill-lower 
  {
  border-radius: var(--radius-range-track);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: var(--height-range-track);
  will-change: width;
  transition: background-color 1s ease-in;
  }

.course-rangeslider.left .course-rangeslider-fill-lower 
  {
  background-color: var(--fill-range-track-active);
  border: 1px solid var(--fill-range-track-active);
  }

.course-rangeslider.right .course-rangeslider-fill-lower 
  {
  background-color: var(--fill-range-track);
  border: 1px dotted #888;
  }

.inverted .course-rangeslider.left .course-rangeslider-fill-lower, .inverted .course-rangeslider.right::before 
  {
  filter: invert(1);
  }

.course-rangeslider-thumb 
  {
  position: absolute;
  touch-action: pan-x;
  top: 50%;
  transform: translateY(-50%);
  will-change: left;
  box-sizing: border-box;
  box-shadow: 0px 4px 25px var(--color-range-thumb-shadow);
  /* border: 6px solid var(--border-color-range-thumb); */
  height: var(--height-range-thumb);
  width: var(--width-range-thumb);
  border-radius: var(--radius-range-thumb);
  background: var(--background-color-range-thumb);
  cursor: pointer;
  height: 0px;
  width: 0px;
  }

.course-rangeslider-thumb::before 
  {
  position: absolute;
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: 4em;
  top: -1.08em;
  left: -0.32em;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.75);
  }

.course-rangeslider .course-range-output 
  {
  position: absolute;
  left: 9px;
  top: 9px;
  transform-origin: 0 0;
  transition: transform .4s var(--easeOutBack);
  user-select: none;
  }

.course-rangeslider .course-range-output .output 
  {
  display: block;
  position: absolute;
  height: var(--height-range-output);
  line-height: var(--height-range-output);
  min-width: var(--min-width-range-output);
  padding: 0px 10px;
  top: -3.5em;
  left: 0px;
  transform: translate(-50%, -100%);
  background-color: var(--color-range-output);
  color: #fff;
  border-radius: 100px;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  transition: color 0.5s ease-out;
  }

.course-rangeslider .course-range-output .output.opinion-done
  {
  /* background: rgba(0,0,0,0.75); */
  color: rgba(80,200,120,1);  
  }

.inverted .course-rangeslider .course-range-output .output.opinion-done 
  {
  filter: invert(1);
  }
  
.course-rangeslider .course-range-output .output i
  {
  }

.course-rangeslider .course-range-output .output i.opinion-done
  {
  }
    
.course-rangeslider .course-range-output .output::before 
  {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  border: 10px solid #666;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  transform: translateX(-50%);
  }
  
.course-opinion-container .op-answer
  {
  /* transition: font-size 1s ease-in-out; */
  padding: 20px;
  /* font-size: 1.5em; */
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0px 6px 4px rgba(0,0,0,0.85);
  /* background-color: #222; */
  /* border-radius: 10px; */
  }
  
.course-opinion-container h4
  {
  /* color: rgba(90, 127, 147, 1); */
  font-weight: bold;  
  line-height: 1.4;
  }
  
.course-opinion-container p.course-opinion-type
  {
  font-size: 0.8em;
  opacity: 0.8;
  margin-bottom: 120px;  
  }