:root {
  --visage-control-icon-filter: var(--visage-icon-filter-black);
  --visage-control-icon-filter-hover: var(--visage-icon-filter-black)
}
.control-icon {
  box-sizing: border-box;
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  vertical-align: middle;
  background: none;
  border: none
}
a.control-icon,
button.control-icon {
  cursor: pointer
}
.control-icon::before {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  background-size: auto auto;
  background-position: center;
  background-repeat: no-repeat;
  filter: var(--visage-icon-filter-dark-grey);
  position: relative;
  filter: var(--visage-control-icon-filter)
}
.control-icon:active,
.control-icon:hover {
  text-decoration: none
}
.control-icon:hover::before {
  filter: var(--visage-control-icon-filter-hover)
}
.control-icon.control-icon-brand-blue::before {
  filter: var(--visage-icon-filter-brand)
}
.control-icon.control-icon-brand-blue:hover::before {
  filter: var(--visage-icon-filter-dark-blue)
}
.control-icon.control-icon-dark-blue::before {
  filter: var(--visage-icon-filter-dark-blue)
}
.control-icon.control-icon-charcoal::before {
  filter: var(--visage-icon-filter-black)
}
.control-icon.control-icon-white::before {
  filter: var(--visage-icon-filter-white)
}
.control-icon-arrow-r::before {
  background-image: var(--visage-icon-url-chevron-r)
}
.control-icon-arrow-l::before {
  background-image: var(--visage-icon-url-chevron-l)
}
.control-icon-arrow-u::before {
  background-image: var(--visage-icon-url-chevron-u)
}
.control-icon-arrow-d::before {
  background-image: var(--visage-icon-url-chevron-d)
}
.control-icon-close::before {
  background-image: var(--visage-icon-url-close)
}
.control-icon-close-large::before {
  background-image: var(--visage-icon-url-close-large);
  width: 28px;
  height: 28px
}
.control-icon-close-small::before {
  background-image: var(--visage-icon-url-close-small);
  width: 10px;
  height: 10px
}
.control-icon-plus.control-icon-plus::before {
  background-image: var(--visage-icon-url-plus)
}
.control-icon-minus.control-icon-minus::before {
  background-image: var(--visage-icon-url-minus)
}
.control-icon-check::before {
  background-image: var(--visage-icon-url-check)
}
.control-icon-search::before {
  background-image: url(../images/search.svg)
}
.control-icon-search-large::before {
  background-image: url(../images/search-large.svg);
  width: 28px;
  height: 28px
}
.control-icon-info::before {
  background-image: url(../images/info.svg)
}
.control-icon-zoom-in::before {
  background-image: url(../images/zoom-in.svg);
  width: 28px;
  height: 28px
}
.control-icon-zoom-out::before {
  background-image: url(../images/zoom-out.svg);
  width: 28px;
  height: 28px
}
.control-icon-download::before {
  background-image: url(../images/download.svg);
  width: 28px;
  height: 28px
}
.control-icon-save::before {
  background-image: url(../images/save.svg);
  width: 28px;
  height: 28px
}
.control-icon-undo::before {
  background-image: url(../images/undo.svg);
  width: 28px;
  height: 28px
}
.control-icon-redo::before {
  background-image: url(../images/redo.svg);
  width: 28px;
  height: 28px
}
.control-icon-menu::before {
  background-image: url(../images/hamburger.svg);
  width: 28px;
  height: 28px
}
.control-icon-error::before {
  background-image: url(../images/error.svg);
  filter: none
}
.control-icon-upload::before {
  background-image: url(../images/upload.svg)
}
.control-icon-upload-large::before {
  background-image: url(../images/upload-large.svg);
  width: 28px;
  height: 28px
}
.control-icon-hover-container:hover .control-icon::before {
  filter: var(--visage-control-icon-filter-hover)
}
.control-icon-hover-container:hover .control-icon-brand-blue::before {
  filter: var(--visage-icon-filter-dark-blue)
}