/**
 * Honeypot and Submit Slider CSS
 *
 * (NOTE: For more information on making this look right cross-platform, see
 * http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html.)
 * (NOTE: This solution was originally implemented at
 * https://jsfiddle.net/Treebasher/2xugqso3/.)
 * History
 * Tag         Developer    Change Description
 * ERE202103  Ed Einfeld   Modifications to make Shimmer reverse directions depending on text flow LTR or RTL  
 */

@import url('https://fonts.googleapis.com/css?family=Roboto');

/**
 * Basic Honeypot Stuff
 */

.honeypot {
  display: none;
}


/**
 * Basic Slider Stuff
 */

.submitSliderWrapper {
  position: relative;
  width: 300px;
  height: 24px;
  background: #dddddd;
  border: none;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
  color: #858585;
}

.submitSlider {
  -webkit-appearance: none;
  position: absolute;
  /*top: -2px;*/
  left: -2px;
  width: 100%;
  height: 24px;
  background: transparent;
  outline: none;
}

_:-moz-tree-row(hover),
.submitSlider {
  /* (NOTE: This is a browser hack so that the below only applies
  to Mozilla Firefox!) */
  top: -1px;
  left: -9px;
}

_:-ms-input-placeholder,
:root .submitSlider {
  /* (NOTE: This is a browser hack so that the below only applies to Internet
  Explorer/Edge!) */
  top: 0px;
  left: 0px;
}

_:-ms-input-placeholder,
:root .shimmer-rtl, :root .shimmer-ltr { /* Add RTL shimmer - ERE20210310 */
  color: #858585;
}

.submitSlider:focus,
.submitSlider::-moz-focus-outer {
  outline: none;
  border: 0;
}


/**
 * Track Styles
 */

.submitSlider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
}

.submitSlider::-moz-range-track {
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
}

.submitSlider::-ms-track {
  height: 24px;
  background: transparent;
  color: transparent;
  border: none;
  border-radius: 4px;
}


/**
 * Thumb Styles
 */

.submitSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 48px;
  background: #3498db;
  border: none;
  border-radius: 4px;
}

.submitSlider::-moz-range-thumb {
  height: 24px;
  width: 48px;
  background: #3498db;
  border: none;
  border-radius: 4px;
}

.submitSlider::-ms-thumb {
  height: 24px;
  width: 48px;
  background: #3498db;
  border: none;
  border-radius: 4px;
}

.submitSlider::-ms-fill-lower,
.submitSlider::-ms-fill-upper,
.submitSlider::-ms-tooltip {
  display: none;
}


/**
 * Shimmer Effect
 * (NOTE: This was taken from https://codepen.io/liuzenan/pen/nCJpo.)
 * (NOTE: This probably only works on WebKit browsers.)
 * (NOTE: This helps with UX as it helps users know what to do.)
 * I created 2 tags for the shimmer affect, one for left to right and one for right to left. ERE20210310
 */

.shimmer-rtl { /* Changed tag from .shimmer to .shimmer-rtl - ERE20210310 */
  display: inline-block;
  color: white;
  background: #858585 -webkit-gradient(linear, 100% 0, 0 0, from(#858585), color-stop(0.5, #ffffff), to(#858585));
  background-position: -4rem top;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation-name: shimmer-rtl;
  animation-name: shimmer-rtl;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-background-size: 4rem 100%;
  background-size: 4rem 100%;

}
.shimmer-ltr {
  display: inline-block;
  color: white;
  background: #858585 -webkit-gradient(linear, 100% 0, 0 0, from(#858585), color-stop(0.5, #ffffff), to(#858585));
  background-position: -4rem top;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation-name: shimmer-ltr;
  animation-name: shimmer-ltr;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-background-size: 4rem 100%;
  background-size: 4rem 100%;
}

@-webkit-keyframes shimmer-rtl {
  0% {
    background-position: 12.5rem top;
  }
  70% {
    background-position: -4rem top;
  }
  100% {
    background-position: -4rem top;
  }
}

@keyframes shimmer-rtl {
  0% {
    background-position: 12.5rem top;
  }
  70% {
    background-position: -4rem top;
  }
  100% {
    background-position: -4rem top;
  }
}

@-webkit-keyframes shimmer-ltr {
  0% {
    background-position: -4rem top;
  }
  70% {
    background-position: 12.5rem top;
  }
  100% {
    background-position: 12.5rem top;
  }
}

@keyframes shimmer-ltr {
  0% {
    background-position: -4rem top;
  }
  70% {
    background-position: 12.5rem top;
  }
  100% {
    background-position: 12.5rem top;
  }
}