.esriVisibleScaleRangeSlider {
  font-family: "Avenir LT W01 65 Medium", Arial, Helvetica, sans-serif;
  position: relative;
}

.esriVisibleScaleRangeSlider .esriScaleIndicatorContainer {
  position: absolute;
  height: 4px;
  top: 0;
  left: 0;
  right: 0;
}

.esriVisibleScaleRangeSlider .esriCurrentScaleIndicator {
  position: absolute;
  bottom: 4px;
  margin: 0 -4px ;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 8px solid black;
}

.esriVisibleScaleRangeSlider .esriScaleIndicator {
  transition-property: left, right, width;
  transition-duration: 0.2s;
}

.esriScalePreviewPopup.dijitPopup {
  border: none;
  box-shadow: none;
  -webkit-box-shadow: none;

  padding: 6px 0;
}

.esriScalePreviewPopup.dijitPopup .esriScalePreview {
  background-color: #fff;
  padding: 6px;

  box-shadow: #4d4d4d 0 0 6px;
}

.esriScalePreviewPopup.dijitPopup .esriScalePreview .esriHeader {
  color: #5cace1;
  margin: 0 0 4px 0;
  max-width: 128px;
  word-wrap: break-word;
}

.esriScalePreviewPopup.dijitPopup .esriScalePreview .esriThumbnail {
  display: block;
  box-sizing: border-box;

  /*
    workaround to prevent webkit from adding a border

    padding: 64px;

    instead of

    height: 128px;
    width: 128px;

    see: http://stackoverflow.com/questions/4743127/chrome-safari-display-border-around-image
  */
  padding: 64px;
}

.esriVisibleScaleRangeSlider .esriScaleMenuButton {
  margin-top: 6px;
  width: 50%;
}

.esriVisibleScaleRangeSlider .esriScaleMenuButton .dijitButtonNode,
.esriVisibleScaleRangeSlider .esriScaleMenuButton .dijitButtonContents {
  width: 100%;
}

.esriVisibleScaleRangeSlider .esriScaleMenuButton .dijitButtonText {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 80%;
}

.esriVisibleScaleRangeSlider .esriMinScaleMenuButton .dijitButtonNode {
  text-align: left;
}

.esriVisibleScaleRangeSlider .esriMaxScaleMenuButton .dijitButtonNode {
  text-align: right;
}

.dijitRtl .esriVisibleScaleRangeSlider .esriMinScaleMenuButton .dijitButtonNode {
  text-align: right;
}

.dijitRtl .esriVisibleScaleRangeSlider .esriMaxScaleMenuButton .dijitButtonNode {
  text-align: left;
}

.esriVisibleScaleRangeSlider .esriScaleMenuButton .dijitButtonNode {
  border: none;
  background: transparent none;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.esriScaleMenuPopup .esriScaleMenu .esriSection .esriHeader {
  display: block;
  background-color: #a6a8ab;
  padding: 4px 8px;
  color: #f6f6f8;
  text-transform: uppercase;
}

.esriScaleMenuPopup .esriScaleMenu .esriSection:last-child .esriHeader .esriInline {
  vertical-align: middle;
}

.esriScaleMenuPopup .esriScaleMenu .esriSection:last-child .esriHeader .esriInline:last-child {
  font-size: 0.8em;
  padding: 0 4px;
}

.esriScaleMenuPopup .esriScaleMenu .esriSection .esriContent {
  padding: 15px 4px;
}

.esriScaleMenuPopup .esriScaleMenu {
  padding: 0;
  background-color: #f6f6f8;
  color: #4d4d4d;
}

.esriScaleMenuPopup .esriScaleMenu .esriList {
  padding: 0;
  margin: 0;
}

.esriScaleMenuPopup .esriScaleMenu .esriItem {
  padding: 4px 0;
  margin: 0;
  list-style-type: none;
}

.esriScaleMenuPopup .esriScaleMenu .esriItem.esriSelectable:hover {
  cursor: pointer;
  color: #21759B;
  text-decoration: underline;
}

.esriScaleMenuPopup .esriHidden {
  display: none;
}

.esriScaleMenuPopup .esriScaleMenu .esriSection .esriContent .esriCurrent.esriItem:first-child {
  white-space: nowrap;
  display: inline-block;
  padding: 0 4px 0 0;
  font-size: 1.2em;
  font-weight: bolder;
  vertical-align: middle;
}

.dijitRtl .esriScaleMenuPopup .esriScaleMenu .esriHeader .esriItem {
  padding: 0 0 0 4px;
}

.esriScaleMenuPopup .esriScaleMenu .esriContent .esriInput {
  width: 10em;
}

.esriScaleMenuPopup .esriScaleMenu {
  padding: 0;
  background-color: #f6f6f8;
  border: 1px solid #999;
}

.esriScaleMenuPopup .esriScaleMenu .dijitTooltipContainer {
  padding: 0;
  box-shadow: none;
  border: none;
}

.esriScaleMenuPopup .esriScaleMenu .dijitTooltipContainer .dijitTooltipFocusNode {
  padding: 0;
}

.esriScaleMenuPopup .esriScaleMenu .dijitTooltipContainer + .dijitTooltipConnector {
  background-image: none;
}

.esriVisibleScaleRangeSlider .esriScaleMenuButton .dijitDownArrowButton .dijitArrowButtonInner {
  background: url("../../../css/calcite/images/ago_sprite.png") -66px -50px;
}

.esriVisibleScaleRangeSlider .esriHorizontalSlider.dijitDisabled {
  pointer-events: none;
}
