//vendor imports first
/* import bootstrap SASS first, since some variables are reused in _component-variables.scss */
//

/* import React add-ons */

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  width:20rem;
  height:21rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 10000;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
  width: 20rem;
height:20rem;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 6px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
  width:20rem;
  font-size:13px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;

}

.react-datepicker__navigation {
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  border: 0.55rem solid transparent;
  z-index: 1;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b2b2;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__month-container {
  display: inline;
  float: left;
  width:20rem;
  height:20rem;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-name,
.react-datepicker__day {
  color: #000;
  display: inline-block;
  width: 2.2rem;
  height:2rem;
  line-height: 1.9rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day {
  cursor: pointer;
}

.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  .fas {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: -1;
  }
  input {
    background: none;
    font-size:12px;
    &:disabled {
      opacity: .6;
    }
  }
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.55rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: 0;
  outline: 0;
  padding: 0;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\00d7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 7px;
  text-align: center;
  top: 50%;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.date-picker-container {
  position: relative;
  .fas {
    position: absolute;
    top: 9px;
    right: 6px;
    z-index: -1;
  }
}
.react-autosuggest__suggestions-container {
  display: none;
}

.react-autosuggest__suggestions-container--open {
  display: block;
  border: 1px solid #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #fff;
  font-weight: 300;
  font-size: 16px;
  max-height: 31rem;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 2;

  ul.react-autosuggest__suggestions-list {
    li.react-autosuggest__suggestion {
      cursor: pointer;
      padding: 8px 20px;
    }
  }
}

.react-autosuggest__suggestion--highlighted {
  background-color: #f8f8f8;
}

.react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.react-autosuggest__container {
  position: relative;
}

.react-autosuggest__input {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.react-autosuggest__input--focused {
  outline: none;
}

.react-autosuggest__input--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

//then import the component variables that are exposed for clients importing the scss version of this library
/*
	Main variables of the component library.

	Client applications are invited to override these by using SASS.

	These clients should not use the prepackaged labo-components.css, but should generate their own CSS based on:
	- bootstrap-sass/assets/stylesheets/bootstrap (after npm install bootstrap-sass)
	- _bootstrap-overrides.scss
	- _components-scss
*/

/* ---- Spacing variables ---- */

$default-margin: 10px !default;
$box-shadow-base: 5px 5px 5px !default;
$border-radius: 2px;//$border-radius-base; /* applying bootstrap variable */

/* ---- Global colors (hopefully with useful semantic designations) ---- */

$hover-color: #3173ad !default;
$highlight-color: #f26c50 !default;
$highlight-color-snippets: #f26c50;
$subdued-color: #888 !default;
$subdued-hover-color: #efefef !default;
$subdued-bg: #f8f8f8 !default;
$fill-color: #468dcb !default;
$border-color: #e3e3e3 !default;
$dark-text: #333 !default;
$list-item-color: #333 !default;
$visited-item: #6e7476;

/* ---- Box shadow colors ---- */

$shadow-subdued: $subdued-color !default;
$shadow-active: $fill-color !default;

/* ---- Annotation ---- */

$annotation-label-color: $dark-text !default;
$annotation-frag-info-color: $fill-color !default;
$annotation-prov-info-color: $dark-text !default;

$image-overlay-bg: rgba(255, 250, 205, 0.2) !default;
$image-overlay-bg-active: rgba(178, 34, 34, 0.2) !default;

$image-overlay-border: 1px solid $subdued-color !default;
$image-overlay-border-active: 1px solid $highlight-color !default;

$image-overlay-border-radius: $border-radius !default;
$image-overlay-border-radius-active: $border-radius !default;

/* ---- Item details ---- */

$metadata-table-label-color: $dark-text;
$metadata-table-first-column-width: 125px !default;

/* ---- Timeline ---- */

$timeline-bg: black !default;

/* ---- Modal ---- */

$modal-backdrop-bg: transparant; /* overriding bootstrap variable */

/* Media Suite specific */

$clOrange: #f26c50;
$clBlue: #468dcb;
$clLightBlue: #9fbdd7;
$clDark: #2d343a;
$clDarkGrey: #9e9290;
$clMediumGrey: #e3d1ce;
$clGreyTint: #eee3e1;
$clGrey: #faf6f6;
$clWhite: #ffffff;
$clRed: desaturate(#f25050, 30%);

$randomColor: rgb(random(255), random(255), random(255));

$clError: $clRed;
$clWarning: #f29650;
$clConfirm: #50f27a;

$clPrimary: $clBlue;
$clPrimaryAlt: $clLightBlue;
$clSecondary: $clOrange;

/* Font */

$fontHeading: 'Maven Pro', sans-serif;
$fontBody: 'Open Sans', sans-serif;

/* Animation */

$transition: 0.2s ease-out;

/* Media Queries */
$break-large: 1340px;
$break-medium: 1290px;
$break-medium-result-list: 991px;
$break-small: 940px;

/* Page */

$maxPageWidth: 1200px;
$maxTextBodyWidth: 800px;
$contentPadding: 40px;

$resourceViewerTabHeight: 50px;
$resourceViewerPopupHeaderHeight: 50px;
$annotationColumnFilterHeight: 30px;


// import image urls
/* Logo */
$logoUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUwIiB3aWR0aD0iMjA3IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMDcgNTAiPgogPHRpdGxlPkxvZ288L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1MTMgLTY3NjIuMikiPgogIDxnIGlkPSJMb2dvIj4KICAgPGcgaWQ9Ik1FRElBIFNVSVRFIiBmaWxsPSIjZmZmIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Im0tNTM4OC4yIDY3NzUuNWMtMi4wMDIgMC0zLjY5NiAwLjMzOTQtNS4wODIgMS4wMjE0LTEuMzg2IDAuNjYtMi40MzI3IDEuNTYzMS0zLjEzNjcgMi43MDcxLTAuNjgyIDEuMTQ0LTEuMDIxNSAyLjQzMTMtMS4wMjE1IDMuODYxMyAwIDEuNzE2IDAuNDE3OSAzLjAzNSAxLjI1MzkgMy45NTkgMC44NTggMC45MjQgMi4wMDE3IDEuNjI5MyAzLjQzMTcgMi4xMTMzIDAuNzcgMC4yNjQgMS40MTkyIDAuNDYxNyAxLjk0NzIgMC41OTM3IDEuMjk4IDAuNDE4IDIuMjIxNSAwLjc2ODcgMi43NzE1IDEuMDU0NyAwLjU1IDAuMjY0IDAuODI0MiAwLjYyNzggMC44MjQyIDEuMDg5OCAwIDAuNjM4LTAuMjA4OSAxLjA4OTYtMC42MjY5IDEuMzUzNi0wLjQxOCAwLjI0Mi0xLjAxMTMgMC4zNjMyLTEuNzgxMyAwLjM2MzItMS4wNzggMC0yLjI2NjQtMC4yMTA5LTMuNTY0NC0wLjYyODktMS4yOTgtMC40NC0yLjQ4NDUtMS4wNzYxLTMuNTYyNS0xLjkxMjF2Ni4xMzY3YzEuMDM0IDAuNTA2IDIuMjA5MyAwLjg1ODcgMy41MjkzIDEuMDU2N3MyLjg3MjMgMC4yOTY5IDQuNjU0MyAwLjI5NjljMS41ODQgMCAyLjk5MDYtMC4zMDc5IDQuMjIyNi0wLjkyMzkgMS4yNTQtMC42MzggMi4yMjIzLTEuNTE4NiAyLjkwNDMtMi42NDA2IDAuNjgyLTEuMTQ0IDEuMDIzNS0yLjQ1MTggMS4wMjM1LTMuOTI1OCAwLTEuODI2LTAuNTA1Ni0zLjE5MTctMS41MTc2LTQuMDkzNy0xLjAxMi0wLjkyNC0yLjU2NDMtMS42ODE0LTQuNjU0My0yLjI3NTQtMC4zMy0wLjA4OC0wLjU0ODItMC4xNDQtMC42NTgyLTAuMTY2LTEuMjMyLTAuMzUyLTIuMTEyNi0wLjY3MTEtMi42NDA2LTAuOTU3MXMtMC43OTMtMC43MjYzLTAuNzkzLTEuMzIwM2MwLTAuNjM4IDAuMjQyNS0xLjA5ODcgMC43MjY1LTEuMzg0NyAwLjUwNi0wLjMwOCAxLjE0NDEtMC40NjI5IDEuOTE0MS0wLjQ2MjkgMC45NjggMCAyLjA2ODggMC4yNzYxIDMuMzAwOCAwLjgyNjEgMS4yNTQgMC41NSAyLjI5ODcgMS4xOTc0IDMuMTM0OCAxLjk0NTR2LTYuMjY5NmMtMS4wMTItMC41MDYtMi4wMzY0LTAuODY3OS0zLjA3MDQtMS4wODc5LTEuMDEyLTAuMjItMi4xODczLTAuMzMtMy41MjkzLTAuMzN6bS0xMjQuMTcgMC41NjA1djIyLjAxaDYuMjY5NnYtMTMuNTYybDUuODA4NSA3LjU1NjYgNS44MDg2LTcuNTIzNHYxMy41MjloNi41OTk3di0yMi4wMWgtNi40Njg4bC01Ljc0MjIgNy40MjM4LTUuNjA5NC03LjQyMzh6bTI4Ljc3OSAwdjIyLjAxaDE1LjYwN3YtNC45NDkyaC05LjAwNzh2LTMuNTk3N2g3LjcyMDd2LTQuOTQ5MmgtNy42ODc1di0zLjU2NDVoOC45NzQ2di00Ljk0OTJ6bTE5LjcyMyAwdjIyLjAxaDkuNjY3OWMzLjgwNiAwIDYuNjEyMS0wLjkxMjMgOC40MTYxLTIuNzM4MyAxLjgwNC0xLjg0OCAyLjcwNS00LjU5OCAyLjcwNS04LjI1IDAtMy42NzQtMC45MDEtNi40MjQtMi43MDUtOC4yNS0xLjc4Mi0xLjg0OC00LjU4ODEtMi43NzE1LTguNDE2MS0yLjc3MTV6bTI0LjEwNSAwdjIyLjAxaDYuNjMyOXYtMjIuMDF6bTE3LjIyNyAwLTguMTE3MiAyMi4wMWg2LjEwNTVsMS4xODc1LTMuODU5NGg3LjU1NjZsMS4yMjA3IDMuODU5NGg2Ljc2NTdsLTcuMzkyNi0yMi4wMXptNDUuNDIyIDB2MTQuMTIzYzAgMy4wNTggMC44Njc1IDUuMjggMi42MDU1IDYuNjY2IDEuNzM4IDEuMzY0IDQuNDU2MyAyLjA0NjggOC4xNTIzIDIuMDQ2OCAyLjg2IDAgNS4xMzYxLTAuNzE0NSA2LjgzMDEtMi4xNDQ1czIuNTQxLTMuNjIwMyAyLjU0MS02LjU2ODN2LTE0LjEyM2gtNi4yNjk1djEzLjcyOGMwIDEuMzY0LTAuMzA3OSAyLjM5NzYtMC45MjM5IDMuMTAxNi0wLjU5NCAwLjcwNC0xLjQ0MSAxLjA1NDctMi41NDEgMS4wNTQ3LTEuMjMyIDAtMi4xMjM4LTAuMzI4My0yLjY3MzgtMC45ODgzLTAuNTI4LTAuNjgyLTAuNzkxLTEuNzM4LTAuNzkxLTMuMTY4di0xMy43Mjh6bTI0LjQyOCAwdjIyLjAxaDYuNjMyOHYtMjIuMDF6bTkuNjAzNSAwdjQuOTQ5Mmg1LjUxMTh2MTcuMDYxaDYuNTk5NnYtMTcuMDYxaDUuNjQyNXYtNC45NDkyem0yMC43MjEgMHYyMi4wMWgxNS42MDl2LTQuOTQ5MmgtOS4wMDk4di0zLjU5NzdoNy45di00Ljk0OTJoLTcuNjg5NHYtMy41NjQ1aDguOTc2NXYtNC45NDkyem0tMTM0LjkxIDQuOTQ5MmgyLjI0NDFjMy40NTQgMCA1LjE3OTcgMi4wMjQzIDUuMTc5NyA2LjA3MjMgMCAyLjA0Ni0wLjQ0OTUgMy41NjQ3LTEuMzUxNSA0LjU1NDctMC44OCAwLjk5LTIuMTU2MiAxLjQ4NDQtMy44MjgyIDEuNDg0NGgtMi4yNDQxem0zNy42MzcgMS4yODcxIDIuMzQzOCA3LjI5M2gtNC42MjExeiIvPgogICA8L2c+CiAgIDxnIGlkPSJDTEFSSUFIIj4KICAgIDxwYXRoIGZpbGw9IiNmMjZjNTAiIGQ9Im0tNTUwOC44IDY3NjIuOWMtMS4xMzM0IDAtMS45ODY0IDAuMzE2My0yLjU2MDUgMC45NDkyLTAuNTY2NyAwLjYzMjktMC44NDk2IDEuNTc0OS0wLjg0OTYgMi44MjYxIDAgMS4yNTExIDAuMjgyOSAyLjE5MzIgMC44NDk2IDIuODI2MiAwLjU3NDEgMC42MzI5IDEuNDI3MSAwLjk0OTIgMi41NjA1IDAuOTQ5MiAwLjc0MzMgMCAxLjQ5MTUtMC4xNzYxIDIuMjQyMi0wLjUyOTN2LTAuNzYxN2MtMC42NTUgMC4zNjA3LTEuMzcyMiAwLjU0MS0yLjE1MjMgMC41NDEtMC45MzQ3IDAtMS42MTYxLTAuMjQwMy0yLjA0My0wLjcxODctMC40MTk1LTAuNDg1Ny0wLjYyODktMS4yNTQzLTAuNjI4OS0yLjMwNjcgMC0xLjA0NTEgMC4yMTM4LTEuODExMSAwLjY0MDYtMi4yOTY4IDAuNDI2OS0wLjQ4NTggMS4xMDQtMC43Mjg1IDIuMDMxMy0wLjcyODUgMC43NDMzIDAgMS40NjA1IDAuMTg0OCAyLjE1MjMgMC41NTI3di0wLjc2MTdjLTAuNzQzMy0wLjM2MDYtMS40OTE1LTAuNTQxLTIuMjQyMi0wLjU0MXptMTIuNTg0IDAuMXY3LjM2MzJoNC41NjA2di0wLjc3MzRoLTMuNzY1N3YtNi41ODk4em0xNi43OTUgMC0yLjkzNzUgNy4zNjMyaDAuODYxNGwwLjg4MjgtMi4yOTY4aDMuMTc5N2wwLjg4MjggMi4yOTY4aDAuODQ5NmwtMi45MjM4LTcuMzYzMnptMTMuNjcgMHY3LjM2MzJoMC43OTQ5di0yLjk3MDdoMS44NzY5bDEuOTIgMi45NzA3aDAuOTM5NGwtMS45OTgtMy4wNTg1YzAuNTA3OC0wLjA5NiAwLjkxMy0wLjMzODUgMS4yMTQ4LTAuNzI4NiAwLjMwMTctMC4zOSAwLjQ1MTItMC44Njg4IDAuNDUxMi0xLjQzNTUgMC0wLjcwNjUtMC4xODI4LTEuMjM5LTAuNTUwOC0xLjU5OTYtMC4zNjc5LTAuMzYwNi0wLjkwOTEtMC41NDEtMS42MjMtMC41NDF6bTE1Ljc2IDB2Ny4zNjMyaDAuNzk1di03LjM2MzJ6bTEzLjY5IDAtMi45MzU2IDcuMzYzMmgwLjg2MTRsMC44ODI4LTIuMjk2OGgzLjE3OTdsMC44ODI4IDIuMjk2OGgwLjg0OTZsLTIuOTI1OC03LjM2MzJ6bTEzLjY3MiAwdjcuMzYzMmgwLjc5NDl2LTMuMzAwN2gzLjkxNzl2My4zMDA3aDAuNzk1di03LjM2MzJoLTAuNzk1djMuMzEwNWgtMy45MTc5di0zLjMxMDV6bS00Mi4zMjYgMC43NWgyLjE0MjZjMC41MzczIDAgMC45MTU5IDAuMTI0NyAxLjEzNjcgMC4zNzUgMC4yMjA4IDAuMjQyOCAwLjMzMDEgMC42MDEyIDAuMzMwMSAxLjA3MjIgMCAwLjQ3ODQtMC4xMzg0IDAuODM3Mi0wLjQxOCAxLjA4MDEtMC4yNzk3IDAuMjQyOC0wLjcyMjcgMC4zNjUyLTEuMzI2MiAwLjM2NTJoLTEuODY1MnptLTE0LjA2OCAwLjE4NzUgMS4yOTEgMy4zNjcyaC0yLjU4MnptNDMuMTIxIDAgMS4yOTEgMy4zNjcyaC0yLjU4Mzl6Ii8+CiAgIDwvZz4KICA8L2c+CiA8L2c+Cjwvc3ZnPgo=');
$logoDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjM3IiB3aWR0aD0iMjA3IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMDcgMzciPgogPHRpdGxlPkxvZ288L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1MTMgLTY3NjIpIj4KICA8ZyBpZD0iTG9nbyI+CiAgIDxnIGlkPSJNRURJQSBTVUlURSI+CiAgICA8cGF0aCBkPSJtMTI0Ljg0IDEzLjMwMWMtMiAwLTMuNyAwLjMzOS01LjA4IDEuMDIxLTEuMzkgMC42Ni0yLjQzIDEuNTYzLTMuMTQgMi43MDctMC42OCAxLjE0NC0xLjAyIDIuNDMyLTEuMDIgMy44NjIgMCAxLjcxNiAwLjQyIDMuMDM1IDEuMjUgMy45NTkgMC44NiAwLjkyNCAyLjAxIDEuNjI5IDMuNDQgMi4xMTMgMC43NyAwLjI2NCAxLjQxIDAuNDYyIDEuOTQgMC41OTQgMS4zIDAuNDE4IDIuMjIgMC43NjggMi43NyAxLjA1NCAwLjU1IDAuMjY0IDAuODMgMC42MjggMC44MyAxLjA5IDAgMC42MzgtMC4yMSAxLjA5LTAuNjMgMS4zNTQtMC40MiAwLjI0Mi0xLjAxIDAuMzYzLTEuNzggMC4zNjMtMS4wOCAwLTIuMjctMC4yMTEtMy41Ni0wLjYyOS0xLjMtMC40NC0yLjQ5LTEuMDc2LTMuNTctMS45MTJ2Ni4xMzdjMS4wNCAwLjUwNiAyLjIxIDAuODU4IDMuNTMgMS4wNTZzMi44NyAwLjI5NyA0LjY2IDAuMjk3YzEuNTggMCAyLjk5LTAuMzA4IDQuMjItMC45MjQgMS4yNS0wLjYzOCAyLjIyLTEuNTE4IDIuOS0yLjY0IDAuNjktMS4xNDQgMS4wMy0yLjQ1MiAxLjAzLTMuOTI2IDAtMS44MjYtMC41MS0zLjE5Mi0xLjUyLTQuMDk0LTEuMDEtMC45MjQtMi41Ni0xLjY4MS00LjY1LTIuMjc1LTAuMzMtMC4wODgtMC41NS0wLjE0NC0wLjY2LTAuMTY2LTEuMjQtMC4zNTItMi4xMi0wLjY3MS0yLjY0LTAuOTU3LTAuNTMtMC4yODYtMC44LTAuNzI3LTAuOC0xLjMyMSAwLTAuNjM4IDAuMjUtMS4wOTggMC43My0xLjM4NCAwLjUxLTAuMzA4IDEuMTQtMC40NjMgMS45MS0wLjQ2MyAwLjk3IDAgMi4wNyAwLjI3NiAzLjMgMC44MjYgMS4yNiAwLjU1IDIuMyAxLjE5NyAzLjE0IDEuOTQ1di02LjI2OWMtMS4wMS0wLjUwNi0yLjA0LTAuODY4LTMuMDctMS4wODgtMS4wMS0wLjIyLTIuMTktMC4zMy0zLjUzLTAuMzN6bS0xMjQuMTcgMC41NnYyMi4wMWg2LjI2OTZ2LTEzLjU2Mmw1LjgwODUgNy41NTYgNS44MDktNy41MjN2MTMuNTI5aDYuNTk5di0yMi4wMWgtNi40NjhsLTUuNzQzIDcuNDI0LTUuNjA5MS03LjQyNGgtNi42NjZ6bTI4Ljc3OSAwdjIyLjAxaDE1LjYwOHYtNC45NDloLTkuMDA4di0zLjU5OGg3LjcyMXYtNC45NDloLTcuNjg4di0zLjU2NGg4Ljk3NXYtNC45NWgtMTUuNjA4em0xOS43MjMgMHYyMi4wMWg5LjY2OGMzLjgwNiAwIDYuNjEyLTAuOTEyIDguNDE2LTIuNzM4IDEuODA0LTEuODQ4IDIuNzA1LTQuNTk4IDIuNzA1LTguMjUgMC0zLjY3NC0wLjkwMS02LjQyNC0yLjcwNS04LjI1LTEuNzgyLTEuODQ4LTQuNTg4LTIuNzcyLTguNDE2LTIuNzcyaC05LjY2OHptMjQuMTA1IDB2MjIuMDFoNi42MzN2LTIyLjAxaC02LjYzM3ptMTcuMjI3IDBsLTguMTE3IDIyLjAxaDYuMTA1bDEuMTg4LTMuODU5aDcuNTU2bDEuMjIxIDMuODU5aDYuNzYzbC03LjM5LTIyLjAxaC03LjMyNnptNDUuNDI2IDB2MTQuMTIzYzAgMy4wNTggMC44NiA1LjI4IDIuNiA2LjY2NiAxLjc0IDEuMzY0IDQuNDYgMi4wNDcgOC4xNSAyLjA0NyAyLjg2IDAgNS4xNC0wLjcxNCA2LjgzLTIuMTQ0IDEuNy0xLjQzIDIuNTQtMy42MjEgMi41NC02LjU2OXYtMTQuMTIzaC02LjI2djEzLjcyOWMwIDEuMzY0LTAuMzEgMi4zOTctMC45MyAzLjEwMS0wLjU5IDAuNzA0LTEuNDQgMS4wNTUtMi41NCAxLjA1NS0xLjIzIDAtMi4xMi0wLjMyOC0yLjY3LTAuOTg4LTAuNTMtMC42ODItMC43OS0xLjczOC0wLjc5LTMuMTY4di0xMy43MjloLTYuOTN6bTI0LjQyIDB2MjIuMDFoNi42NHYtMjIuMDFoLTYuNjR6bTkuNjEgMHY0Ljk1aDUuNTF2MTcuMDZoNi42di0xNy4wNmg1LjY0di00Ljk1aC0xNy43NXptMjAuNzIgMHYyMi4wMWgxNS42MXYtNC45NDloLTkuMDF2LTMuNTk4aDcuNzJ2LTQuOTQ5aC03LjY5di0zLjU2NGg4Ljk4di00Ljk1aC0xNS42MXptLTEzNC45MSA0Ljk1aDIuMjQ1YzMuNDU0IDAgNS4xNzkgMi4wMjQgNS4xNzkgNi4wNzIgMCAyLjA0Ni0wLjQ0OSAzLjU2NS0xLjM1MSA0LjU1NS0wLjg4IDAuOTktMi4xNTYgMS40ODQtMy44MjggMS40ODRoLTIuMjQ1di0xMi4xMTF6bTM3LjYzNyAxLjI4N2wyLjM0NCA3LjI5M2gtNC42MjFsMi4yNzctNy4yOTN6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTUxMyw2NzYyKSIgZmlsbD0iIzJkMzQzYSIvPgogICA8L2c+CiAgIDxnIGlkPSJDTEFSSUFIIj4KICAgIDxwYXRoIGZpbGw9IiNmMjZjNTAiIGQ9Im00LjI0MDIgMC40OTAyM2MtMS4xMzM0IDAtMS45ODY0IDAuMzE2MzItMi41NjA1IDAuOTQ5MjctMC41NjY3IDAuNjMyOS0wLjg0OTYyIDEuNTc0OS0wLjg0OTYyIDIuODI2MSAwIDEuMjUxMSAwLjI4MjkyIDIuMTkzMiAwLjg0OTYyIDIuODI2MiAwLjU3NDEgMC42MzI5IDEuNDI3MSAwLjk0OTIgMi41NjA1IDAuOTQ5MiAwLjc0MzMgMCAxLjQ5MTUtMC4xNzYxIDIuMjQyMi0wLjUyOTN2LTAuNzYxN2MtMC42NTUgMC4zNjA3LTEuMzcyMiAwLjU0MS0yLjE1MjMgMC41NDEtMC45MzQ3IDAtMS42MTYxLTAuMjQwMy0yLjA0My0wLjcxODctMC40MTk1LTAuNDg1Ny0wLjYyODktMS4yNTQzLTAuNjI4OS0yLjMwNjcgMC0xLjA0NTEgMC4yMTM4LTEuODExMiAwLjY0MDYtMi4yOTY4IDAuNDI2OS0wLjQ4NTggMS4xMDQtMC43Mjg2IDIuMDMxMy0wLjcyODYgMC43NDMzIDAgMS40NjA1IDAuMTg0OSAyLjE1MjMgMC41NTI4di0wLjc2MThjLTAuNzQzMy0wLjM2MDU1LTEuNDkxNS0wLjU0MDk3LTIuMjQyMi0wLjU0MDk3em0xMi41ODQgMC4wOTk2MXY3LjM2MzNoNC41NjF2LTAuNzczNGgtMy43NjZ2LTYuNTg5OWwtMC43OTUgMC4wMDAwNHptMTYuNzk1IDBsLTIuOTM3IDcuMzYzM2gwLjg2MWwwLjg4My0yLjI5NjloMy4xNzlsMC44ODMgMi4yOTY5aDAuODVsLTIuOTI0LTcuMzYzMy0wLjc5NSAwLjAwMDA0em0xMy42NyAwdjcuMzYzM2gwLjc5NXYtMi45NzA3aDEuODc3bDEuOTIgMi45NzA3aDAuOTM5bC0xLjk5OC0zLjA1ODZjMC41MDgtMC4wOTU3IDAuOTEzLTAuMzM4NCAxLjIxNS0wLjcyODUgMC4zMDItMC4zOSAwLjQ1MS0wLjg2ODggMC40NTEtMS40MzU1IDAtMC43MDY1LTAuMTgyLTEuMjM5LTAuNTUtMS41OTk2LTAuMzY4LTAuMzYwNjQtMC45MS0wLjU0MTA2LTEuNjI0LTAuNTQxMDZoLTMuMDI1em0xNS43NiAwdjcuMzYzM2gwLjc5NXYtNy4zNjMzbC0wLjc5NSAwLjAwMDA0em0xMy42ODkgMGwtMi45MzUgNy4zNjMzaDAuODYxbDAuODgzLTIuMjk2OWgzLjE4bDAuODgyIDIuMjk2OWgwLjg1bC0yLjkyNi03LjM2MzMtMC43OTUgMC4wMDAwNHptMTMuNjcyIDB2Ny4zNjMzaDAuNzk1di0zLjMwMDhoMy45MTh2My4zMDA4aDAuNzk1di03LjM2MzNsLTAuNzk1IDAuMDAwMDR2My4zMTA2aC0zLjkxOHYtMy4zMTA2bC0wLjc5NSAwLjAwMDA0em0tNDIuMzI2IDAuNzQ5OTZoMi4xNDNjMC41MzcgMCAwLjkxNSAwLjEyNDcgMS4xMzYgMC4zNzUgMC4yMjEgMC4yNDI4IDAuMzMgMC42MDEzIDAuMzMgMS4wNzIzIDAgMC40Nzg0LTAuMTM4IDAuODM3Mi0wLjQxOCAxLjA4MDEtMC4yNzkgMC4yNDI4LTAuNzIyIDAuMzY1Mi0xLjMyNiAwLjM2NTJoLTEuODY1di0yLjg5MjZ6bS0xNC4wNjggMC4xODc1bDEuMjkxIDMuMzY3MmgtMi41ODJsMS4yOTEtMy4zNjcyem00My4xMjEgMGwxLjI5MSAzLjM2NzJoLTIuNTg0bDEuMjkzLTMuMzY3MnoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01NTEzLDY3NjIpIi8+CiAgIDwvZz4KICA8L2c+CiA8L2c+Cjwvc3ZnPgo=');

/* Arrows */
$arrowLeftDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEyLjcyOCIgd2lkdGg9IjYuNzAyNyIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDYuNzAyNjkwMSAxMi43Mjc3Ij4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgODg4Ljc2IC01NzAzLjMpIj4KICA8ZyBpZD0iYXJyb3ciPgogICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoMF9maWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4ODIuMDYsNTcwMy4zKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIgZmlsbD0iIzg4N2M3YSIvPgogIDwvZz4KIDwvZz4KIDxkZWZzPgogIDxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJtMCAxMC4xODcgNC4wMjY2LTMuODIzMi00LjAyNjYtMy44MjMydi0yLjU0MDZsNi43MDI3IDYuMzYzOC02LjcwMjcgNi4zNjQyeiIvPgogPC9kZWZzPgo8L3N2Zz4K');
$arrowRightUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTIuNzI4IiB3aWR0aD0iNi43MDI3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNi43MDI2OTAxIDEyLjcyNzciIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8bWV0YWRhdGE+CiAgPHJkZjpSREY+CiAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4KICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPgogICAgPGRjOnRpdGxlPmFycm93PC9kYzp0aXRsZT4KICAgPC9jYzpXb3JrPgogIDwvcmRmOlJERj4KIDwvbWV0YWRhdGE+CiA8dGl0bGU+YXJyb3c8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04ODIuMDYgLTU3MDMuMykiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4Mi4wNiA1NzAzLjMpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTNkMWNlIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Im0wIDEwLjE4NyA0LjAyNjYtMy44MjMyLTQuMDI2Ni0zLjgyMzJ2LTIuNTQwNmw2LjcwMjcgNi4zNjM4LTYuNzAyNyA2LjM2NDJ6Ii8+CiA8L2RlZnM+Cjwvc3ZnPgo=');
$arrowRightDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEyLjcyOCIgd2lkdGg9IjYuNzAyNyIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDYuNzAyNjkwMSAxMi43Mjc3Ij4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg4Mi4wNiAtNTcwMy4zKSI+CiAgPGcgaWQ9ImFycm93Ij4KICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDBfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODgyLjA2IDU3MDMuMykiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiM4ODdjN2EiLz4KICA8L2c+CiA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZD0ibTAgMTAuMTg3IDQuMDI2Ni0zLjgyMzItNC4wMjY2LTMuODIzMnYtMi41NDA2bDYuNzAyNyA2LjM2MzgtNi43MDI3IDYuMzY0MnoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$arrowRightWhite40Url: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEyLjcyOCIgd2lkdGg9IjYuNzAyNyIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDYuNzAyNjkwMSAxMi43Mjc3Ij4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg4Mi4wNiAtNTcwMy4zKSI+CiAgPGcgaWQ9ImFycm93Ij4KICAgPHVzZSBvcGFjaXR5PSIuNCIgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4Mi4wNiA1NzAzLjMpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZmZmZmZmIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Im0wIDEwLjE4NyA0LjAyNjYtMy44MjMyLTQuMDI2Ni0zLjgyMzJ2LTIuNTQwNmw2LjcwMjcgNi4zNjM4LTYuNzAyNyA2LjM2NDJ6Ii8+CiA8L2RlZnM+Cjwvc3ZnPgo=');
$arrowDownUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNi43MDI3IiB3aWR0aD0iMTIuNzI4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUyMyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KIDxtZXRhZGF0YT4KICA8cmRmOlJERj4KICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPgogICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+CiAgICA8ZGM6dGl0bGU+YXJyb3c8L2RjOnRpdGxlPgogICA8L2NjOldvcms+CiAgPC9yZGY6UkRGPgogPC9tZXRhZGF0YT4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMzI5OSAyNDE3KSI+CiAgPGcgaWQ9ImFycm93Ij4KICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDBfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODgyLjA2LDU3MDMuMykiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiNlM2QxY2UiLz4KICA8L2c+CiA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZD0ibTAgMTAuMTg3IDQuMDI2Ni0zLjgyMzItNC4wMjY2LTMuODIzMnYtMi41NDA2bDYuNzAyNyA2LjM2MzgtNi43MDI3IDYuMzY0MnoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$arrowDownDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYuNzAyNyIgd2lkdGg9IjEyLjcyOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUxOCI+CiA8dGl0bGU+YXJyb3c8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uMTE5MjQgLS4xNzc1NCkiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDxwYXRoIGQ9Im0yLjY2MDIgMC4xNzc0NyAzLjgyMzIgNC4wMjY2IDMuODIzMi00LjAyNjZoMi41NDA2bC02LjM2MzggNi43MDI3LTYuMzY0Mi02LjcwMjd6IiBmaWxsPSIjODg3YzdhIi8+CiAgPC9nPgogPC9nPgo8L3N2Zz4K');
$arrowUpUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNi43MDI3IiB3aWR0aD0iMTIuNzI4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUyMyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KIDxtZXRhZGF0YT4KICA8cmRmOlJERj4KICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPgogICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+CiAgICA8ZGM6dGl0bGU+YXJyb3c8L2RjOnRpdGxlPgogICA8L2NjOldvcms+CiAgPC9yZGY6UkRGPgogPC9tZXRhZGF0YT4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIC0yNDA3LjMgMzI5NikiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4Mi4wNiw1NzAzLjMpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTNkMWNlIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Im0wIDEwLjE4NyA0LjAyNjYtMy44MjMyLTQuMDI2Ni0zLjgyMzJ2LTIuNTQwNmw2LjcwMjcgNi4zNjM4LTYuNzAyNyA2LjM2NDJ6Ii8+CiA8L2RlZnM+Cjwvc3ZnPgo=');
$arrowUpDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYuNzAyNyIgd2lkdGg9IjEyLjcyOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUxOCI+CiA8dGl0bGU+YXJyb3c8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uMTE5MjQgLS4xNzc1NCkiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDxwYXRoIGQ9Im0xMC4zMDYgNi44ODAyLTMuODIzMi00LjAyNjYtMy44MjMyIDQuMDI2NmgtMi41NDA2bDYuMzYzOC02LjcwMjcgNi4zNjQyIDYuNzAyN3oiIGZpbGw9IiM4ODdjN2EiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPgo=');

/* Icons */
$iconPersonUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjMuMTU0IiB3aWR0aD0iMTcuOTAzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTcuOTAzNCAyMy4xNTM5OTkiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8bWV0YWRhdGE+CiAgPHJkZjpSREY+CiAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4KICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPgogICAgPGRjOnRpdGxlPlBlcnNvbjwvZGM6dGl0bGU+CiAgIDwvY2M6V29yaz4KICA8L3JkZjpSREY+CiA8L21ldGFkYXRhPgogPHRpdGxlPlBlcnNvbjwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgyNy45NyAtNTY5OC4xKSI+CiAgPGcgaWQ9IlBlcnNvbiI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgyNy45NyA1Njk4LjEpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTNkMWNlIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0ibTguOTUxNiA3LjkzN2MxLjg5NTUgMCAzLjQ0MjItMS41NDczIDMuNDQyMi0zLjQ2ODVzLTEuNTQ3LTMuNDY4NS0zLjQ0MjQtMy40Njg1Yy0xLjg5NTUgMC0zLjQ0MjIgMS41NDczLTMuNDQyMiAzLjQ2ODVzMS41NDY3IDMuNDY4NSAzLjQ0MjIgMy40Njg1em0tNC42Nzg5IDQuMDkxYy0xLjk4NTEgMS40NDgtMy4yNzI3IDMuNzkyLTMuMjcyNyA2LjQzNS0wLjAwNDQyMyAwLjkzODcgMC4xMzkzNCAxLjc3MzYgMC40Mjg3OSAyLjU5NDcgMi4zOTg2IDAuNzIyOSA0Ljg4MjEgMS4wOTkyIDcuNTIyOCAxLjA5NjIgMi42NDA4IDAuMDAzIDUuMTI0My0wLjM3MzMgNy41MjMxLTEuMDk2MiAwLjI4OTQtMC44MjExIDAuNDMzMi0xLjY1NiAwLjQyODctMi41OTQ3IDAtMi42NDMxLTEuMjg3Ny00Ljk4NzMtMy4yNzMtNi40MzU1LTEuMzg5MiAwLjcwNjctMy4wMzU5IDEuMTM0OS00LjY3OSAxLjE0NC0xLjY0MzEtMC4wMDkxLTMuMjg5OC0wLjQzNzMtNC42Nzg3LTEuMTQ0em0tMC4wNTMtMS4xNzAyYy0yLjUzMzggMS41ODEtNC4yMTk3IDQuMzk3LTQuMjE5NyA3LjYwNSAwIDEuMjA1MSAwLjIzODA0IDIuMzU1NyAwLjY2OTQyIDMuNDA1NyAyLjYxMTMgMC44MzUyIDUuMzk0MSAxLjI4NTIgOC4yODIyIDEuMjg1MnM1LjY3MDktMC40NSA4LjI4MjQtMS4yODUyYzAuNDMxNC0xLjA1IDAuNjY5NC0yLjIwMDYgMC42Njk0LTMuNDA1NyAwLTMuMjA4LTEuNjg2MS02LjAyMzktNC4yMi03LjYwNTctMS4zODM0IDAuODMzNS0zLjAwMiAxLjMxNDItNC43MzIgMS4zMTQycy0zLjM0ODYtMC40ODA3LTQuNzMxNy0xLjMxNDJ6bTQuNzMxOS0xLjkyMWMyLjQ1MzQgMCA0LjQ0MjItMi4wMDA2IDQuNDQyMi00LjQ2ODVzLTEuOTg5LTQuNDY4NS00LjQ0MjQtNC40Njg1Yy0yLjQ1MzMgMC00LjQ0MjIgMi4wMDA2LTQuNDQyMiA0LjQ2ODVzMS45ODg4IDQuNDY4NSA0LjQ0MjIgNC40Njg1eiIvPgogPC9kZWZzPgo8L3N2Zz4K');
$iconWorkspaceUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYuNTA0IiB3aWR0aD0iMjAuMjM2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjAuMjM2MyAxNi41MDM5MDEiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+IAogIDxnIGlkPSJpY29uLXdvcmtzcGFjZSI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiNlM2QxY2UiLz4KICA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMS4wMDc1IDMuOTIzMS0wLjAwNTggMC4wNzU5Yy0wLjAwMTgzIDAuMDIwMy0wLjAwMTg2IDAuMDIyOC0wLjAwMTcgMC4wNDU5djEwLjg0OWMwIDAuMzM2MiAwLjI3Mjc5IDAuNjA5NCAwLjYwOTg2IDAuNjA5NGgxNy4wMTZjMC4zMzcgMCAwLjYwOTgtMC4yNzMyIDAuNjA5OC0wLjYwOTR2LTEwLjg0OWMwLTAuMzM2MTktMC4yNzI4LTAuNjA5MzctMC42MDk4LTAuNjA5MzdoLTExLjMyNHYtMS44MjYyYy0wLjAwMDUtMC4zMzYzLTAuMjczNC0wLjYwOTQtMC42MTAxLTAuNjA5NGgtNS4wODE4Yy0wLjMzNzEgMC0wLjYwOTkgMC4yNzMyLTAuNjA5OSAwLjYwOTR2Mi4xOTM0Yy0wLjAwMDE3IDAuMDIyMjgtMC4wMDAxMSAwLjAyMzk0IDAuMDAxNiAwLjA0NDM1em0tMS4wMDI5LTAuMDAxMmMtMC4wMDMxNzM5IDAuMDQxLTAuMDA0NjM4NyAwLjA4Mi0wLjAwNDYzODcgMC4xMjN2MTAuODQ5YzAgMC44ODg3IDAuNzIwNyAxLjYwOTQgMS42MDk5IDEuNjA5NGgxNy4wMTZjMC44ODkxIDAgMS42MDk4LTAuNzIwNyAxLjYwOTgtMS42MDk0di0xMC44NDljMC0wLjg4ODY3LTAuNzIwNy0xLjYwOTQtMS42MDk4LTEuNjA5NGgtMTAuMzI0di0wLjgyNjJjLTAuMDAwNS0wLjg4ODctMC43MjEyLTEuNjA5NC0xLjYxMDEtMS42MDk0aC01LjA4MThjLTAuODg5MTUgMC0xLjYwOTkgMC43MjA3LTEuNjA5OSAxLjYwOTR2Mi4xOTM0YzAgMC4wNDEwMiAwLjAwMTQ2NDggMC4wODAwOCAwLjAwNDM5NDUgMC4xMTkxNXoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$iconSearchUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEzLjY4OSIgd2lkdGg9IjEzLjkxOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMuOTE4Mzg3IDEzLjY4OTg0Ij4KIDx0aXRsZT5WZWN0b3I8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJWZWN0b3IiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNzAwMzggLS4yMDExNykiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzg4N2M3YSIgZD0ibTUuODY3MiAwLjIwMTE3Yy0xLjMyMjIgMC0yLjY0NTMgMC41MDMyMi0zLjY1NDMgMS41MTE3LTIuMDE3IDIuMDE4LTIuMDE3IDUuMjg4NiAwIDcuMzA2NiAxLjc4MzggMS43ODI5IDQuNTQ1NiAxLjk4ODMgNi41NTY2IDAuNjE5MTRsNC4yNTE1IDQuMjUyNCAxLjU5OC0xLjYwMi00LjMwNS00LjMwNDZjMS4xNjctMS45ODA4IDAuOTA2LTQuNTcwMi0wLjc5NDUtNi4yNzE1LTEuMDA5LTEuMDA4NS0yLjMzMDEtMS41MTE3LTMuNjUyMy0xLjUxMTd6bTAgMS4xMDE2YzEuMDQgMCAyLjA3OTUgMC4zOTU5NSAyLjg3MyAxLjE4OTUgMS41ODcgMS41ODcgMS41ODcgNC4xNjEgMCA1Ljc0OHMtNC4xNjEgMS41ODctNS43NDggMC0xLjU4Ny00LjE2MSAwLTUuNzQ4YzAuNzkzNS0wLjc5MzUgMS44MzUtMS4xODk1IDIuODc1LTEuMTg5NXoiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconSearchWhiteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjE5LjY2MSIgd2lkdGg9IjE5LjcwNiIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNS4yMTM4OTYzIDUuMjAxOTAwNSI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzkuMDkgLTM2LjAwOCkiPgogIDxwYXRoIGQ9Im0zOS42OCAzNi41OThhMi4wMTQxIDIuMDE0MSAwIDAgMCAtMC4wMDAwMDEgMi44NDg0IDIuMDE0MSAyLjAxNDEgMCAwIDAgMi41Nzc5IDAuMjI2MjhjMC4wMDg5IDAuMDkxNjUgMC4wNDg5MiAwLjE4MDkyIDAuMTIwMjIgMC4yNTE0bDEuMTc5IDEuMTY1M2MwLjE2Mjg5IDAuMTYwOTggMC40MjUxNSAwLjE2MDg5IDAuNTg4MDMtMC4wMDAwOTFsMC4wMzY3My0wLjAzNjE3YzAuMTYyODktMC4xNjA5OCAwLjE2Mjg4LTAuNDIwMiAwLjAwMDAwMS0wLjU4MTE4bC0xLjE3OS0xLjE2NmMtMC4wNzIzNi0wLjA3MTUxLTAuMTY0MzctMC4xMTExNS0wLjI1ODUyLTAuMTE5MTJhMi4wMTQxIDIuMDE0MSAwIDAgMCAtMC4yMTU5NiAtMi41ODk1IDIuMDE0MSAyLjAxNDEgMCAwIDAgLTIuODQ4NCAwem0wLjMwMDczIDAuMzAwNzNhMS41ODg5IDEuNTg4OSAwIDAgMSAyLjI0NyAtMC4wMDAwOTEgMS41ODg5IDEuNTg4OSAwIDAgMSAtMC4wMDAwMDEgMi4yNDcxIDEuNTg4OSAxLjU4ODkgMCAwIDEgLTIuMjQ3MSAwIDEuNTg4OSAxLjU4ODkgMCAwIDEgMC4wMDAwOTEgLTIuMjQ3eiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconHomeUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjMuMjY2bW0iIHdpZHRoPSIzLjU4MDFtbSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMy41ODAxMzAxIDMuMjY1OTYzMSI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYuMzUzIC0yNC43MzYpIj4KICA8cGF0aCBkPSJtMTguMTQzIDI0LjczNi0xLjc5MDEgMS44MjczaDAuMzYwNzF2MS40Mzg3aDIuODU4MnYtMS40Mzg3aDAuMzYxMjF6bTAgMC4zNzk4MSAxLjE2NjMgMS4xODI5djEuNDM4MWgtMi4zMjdsLTAuMDAzMi0xLjQzODF6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM0NjhkY2IiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconHelpUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQuNDY0OG1tIiB3aWR0aD0iMi41MDY5bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIuNTA2OTI3IDQuNDY0ODM5OSI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODIuNjU3IC04NC42MTMpIj4KICA8cGF0aCBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIgZmlsbD0iI2ZmZiIgZD0ibTgzLjI3OSA4Ny43MjJjMC0wLjIyMDQ4IDAuMDI4NjYtMC40MTAxIDAuMDg1OTktMC41Njg4NSAwLjA2MTczLTAuMTU4NzUgMC4xMzQ1LTAuMjg2NjMgMC4yMTgyOC0wLjM4MzY1IDAuMDgzNzktMC4xMDE0MiAwLjE4OTYyLTAuMjA5NDYgMC4zMTc1LTAuMzI0MTEgMC4xMjM0Ny0wLjExNDY1IDAuMjExNjctMC4yMDk0NiAwLjI2NDU4LTAuMjg0NDMgMC4wNTczMy0wLjA3OTM3IDAuMDg1OTktMC4xNjk3OCAwLjA4NTk5LTAuMjcxMiAwLTAuMTg1MjEtMC4wNTUxMi0wLjMwNjQ4LTAuMTY1MzYtMC4zNjM4LTAuMTEwMjQtMC4wNTczMy0wLjI1NTc2LTAuMDg1OTktMC40MzY1Ni0wLjA4NTk5LTAuMTY3NTcgMC0wLjM0MTc2IDAuMDI4NjYtMC41MjI1NSAwLjA4NTk5LTAuMTgwOCAwLjA1NzMzLTAuMzM3MzQgMC4xMzg5MS0wLjQ2OTY0IDAuMjQ0NzR2LTAuODQ2NjdjMC4xMjc4OC0wLjA4ODE5IDAuMjk1NDUtMC4xNjA5NiAwLjUwMjcxLTAuMjE4MjggMC4yMDcyNi0wLjA2MTc0IDAuNDE4OTItMC4wOTI2IDAuNjM1LTAuMDkyNiAwLjQ3NjI1IDAgMC44MjI0MSAwLjEyMzQ3IDEuMDM4NSAwLjM3MDQyIDAuMjIwNDggMC4yNDY5NCAwLjMzMDczIDAuNTUxMjEgMC4zMzA3MyAwLjkxMjgxIDAgMC4yMTYwOC0wLjA0MTg5IDAuMzkwMjYtMC4xMjU2OCAwLjUyMjU1cy0wLjIwOTQ2IDAuMjc1NjEtMC4zNzcwMyAwLjQyOTk1Yy0wLjE1ODc1IDAuMTQ5OTMtMC4yNzc4MSAwLjI4NjYzLTAuMzU3MTkgMC40MTAxLTAuMDc5MzcgMC4xMjM0OC0wLjExOTA2IDAuMjg0NDMtMC4xMTkwNiAwLjQ4Mjg2djAuMDY2MTVoLTAuOTA2MnptLTAuMDU5NTMgMC41MDkzMmgxLjAyNTN2MC44NDdoLTEuMDI1eiIvPgogPC9nPgo8L3N2Zz4K');
$iconCrossUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9Ii42MTg2M21tIiB3aWR0aD0iLjYxODk5bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDAuNjE4OTkwMDkgMC42MTg2MzM1NyI+CiA8ZyB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxODQuNzQgLTcuNTA1MSkiPgogIDxwYXRoIGQ9Im01OS43OSAxMjguMDZ2MC4zMDk1NGgtMC4zMDk1NHYwLjEyODE1aDAuMzF2MC4zMDkwM2gwLjEyODE2di0wLjMwOTAzaDAuMzA5MDJ2LTAuMTI4MTVoLTAuMzA5di0wLjMxeiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconPlusUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9Ii43NDY3Mm1tIiB3aWR0aD0iLjc0NjczbW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDAuNzQ2NzI1MDMgMC43NDY3MjAwMiI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTkuNDggLTEyOC4wNikiPgogIDxwYXRoIG9wYWNpdHk9Ii40IiBkPSJtNTkuNzkgMTI4LjA2djAuMzA5NTRoLTAuMzA5NTR2MC4xMjgxNWgwLjMwOTU0djAuMzA5MDNoMC4xMjgxNnYtMC4zMDkwM2gwLjMwOTAydi0wLjEyODE1aC0wLjMwOTAydi0wLjMwOTU0eiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconLinkWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC44MzY1OSAxLjQ5NjA5SDE0LjQ5MzRWNy4xNTI5NUwxMi4zNDQ2IDUuMDA0MTNMNi42ODc3NyAxMC42NjFDNi4zMTI0MyAxMS4wMzYzIDUuNzAzODkgMTEuMDM2MyA1LjMyODU1IDEwLjY2MUM0Ljk1MzIyIDEwLjI4NTYgNC45NTMyMiA5LjY3NzExIDUuMzI4NTUgOS4zMDE3N0wxMC45ODU0IDMuNjQ0OTJMOC44MzY1OSAxLjQ5NjA5WiIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMS45NjI4OSAzLjg0NjJINy43ODUyQzguMDYxMzUgMy44NDYyIDguMjg1MiAzLjYyMjM0IDguMjg1MiAzLjM0NjJDOC4yODUyIDMuMDcwMDYgOC4wNjEzNSAyLjg0NjIgNy43ODUyIDIuODQ2MkgxLjk1NzIyQzEuNDA4MDcgMi44NDYyIDAuOTYyODkxIDMuMjkxMzggMC45NjI4OTEgMy44NDA1M1YxMi45OTM5QzAuOTYyODkxIDEzLjU0MzEgMS40MDgwNyAxMy45ODgyIDEuOTU3MjIgMTMuOTg4MkgxMi4wMzI2QzEyLjU4MTggMTMuOTg4MiAxMy4wMjY5IDEzLjU0MzEgMTMuMDI2OSAxMi45OTM5VjguMDI3MTVDMTMuMDI2OSA3Ljc1MSAxMi44MDMxIDcuNTI3MTUgMTIuNTI2OSA3LjUyNzE1QzEyLjI1MDggNy41MjcxNSAxMi4wMjY5IDcuNzUxIDEyLjAyNjkgOC4wMjcxNVYxMi45ODgySDEuOTYyODlWMy44NDYyWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=);
$iconLinkUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC44MzY1OSAxLjQ5NjA5SDE0LjQ5MzRWNy4xNTI5NUwxMi4zNDQ2IDUuMDA0MTNMNi42ODc3NyAxMC42NjFDNi4zMTI0MyAxMS4wMzYzIDUuNzAzODkgMTEuMDM2MyA1LjMyODU1IDEwLjY2MUM0Ljk1MzIyIDEwLjI4NTYgNC45NTMyMiA5LjY3NzExIDUuMzI4NTUgOS4zMDE3N0wxMC45ODU0IDMuNjQ0OTJMOC44MzY1OSAxLjQ5NjA5WiIgZmlsbD0iIzJEMzQzQSIvPjxwYXRoIGQ9Ik0xLjk2Mjg5IDMuODQ2Mkg3Ljc4NTJDOC4wNjEzNSAzLjg0NjIgOC4yODUyIDMuNjIyMzQgOC4yODUyIDMuMzQ2MkM4LjI4NTIgMy4wNzAwNiA4LjA2MTM1IDIuODQ2MiA3Ljc4NTIgMi44NDYySDEuOTU3MjJDMS40MDgwNyAyLjg0NjIgMC45NjI4OTEgMy4yOTEzOCAwLjk2Mjg5MSAzLjg0MDUzVjEyLjk5MzlDMC45NjI4OTEgMTMuNTQzMSAxLjQwODA3IDEzLjk4ODIgMS45NTcyMiAxMy45ODgySDEyLjAzMjZDMTIuNTgxOCAxMy45ODgyIDEzLjAyNjkgMTMuNTQzMSAxMy4wMjY5IDEyLjk5MzlWOC4wMjcxNUMxMy4wMjY5IDcuNzUxIDEyLjgwMzEgNy41MjcxNSAxMi41MjY5IDcuNTI3MTVDMTIuMjUwOCA3LjUyNzE1IDEyLjAyNjkgNy43NTEgMTIuMDI2OSA4LjAyNzE1VjEyLjk4ODJIMS45NjI4OVYzLjg0NjJaIiBmaWxsPSIjMkQzNDNBIi8+PC9zdmc+);

$iconProjectUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjkiIHdpZHRoPSIyMS43IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1Ljc0MTI1MzkgNy42NzI5MTY5Ij4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTk5LjIgLTM5LjkpIj4gIDxwYXRoIGQ9Im0yIDBjLTEuMSAwLTIgMC44OTUtMiAydjI1YzAgMS4xIDAuODk1IDIgMiAyaDE3LjdjMS4xIDAgMi0wLjkgMi0ydi0xOC45bC04LjEtOC4xaC0xMS42em0wIDFoMTEuMXY0LjA2aC0xMC41bDAuMDEgMi4wOWgxMC43YzAuNCAwLjg3IDEuMyAxLjQ3IDIuMyAxLjQ3aDUuMXYxOC40YzAgMC42LTAuNSAxLTEgMWgtMTcuN2MtMC41NSAwLTEtMC40LTEtMXYtMjVjMC0wLjU1IDAuNDUtMSAxLTF6bTEyLjEgMC45MWw1LjcgNS43MWgtNC4yYy0wLjkgMC0xLjUtMC42Ny0xLjUtMS41di00LjIxem0tMTEuMiA4LjI5djFoMTUuOXYtMWgtMTUuOXptMCAyLjd2MWgxNS45di0xaC0xNS45em0wIDIuN3YxaDE1Ljl2LTFoLTE1Ljl6bTAgMi43djFoMTUuOXYtMWgtMTUuOXptMCAyLjZ2MWgxNS45di0xaC0xNS45em0tMC4wMyAyLjd2MWgxMXYtMWgtMTF6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KC4yNjUgMCAwIC4yNjUgOTkuMiAzOS45KSIgZmlsbD0iIzllOTI5MCIvPiA8L2c+PC9zdmc+');
$iconBookmarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzc1cHgiIGhlaWdodD0iOTgwcHgiIHZpZXdCb3g9IjAgMCA3NzUgOTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi41ICg2NzQ2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iY2IzZmRlZjlkMDhlMmJlZTc0NjVkYmFjZWNiZjljMTMiIGZpbGw9IiM5QjlCOUIiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik03NDEuNSw5ODAgQzczNCw5ODAgNzI2LjYsOTc3LjUgNzIwLjUsOTcyLjYgTDM5MCw3MDcuNCBMNTUuMyw5NzIuNyBDNDUuMiw5ODAuNyAzMS40LDk4Mi4yIDE5LjgsOTc2LjYgQzguMiw5NzEgMC44LDk1OS4zIDAuOCw5NDYuNCBMMC44LDMzLjYgQzAuOCwxNS4xIDE1LjgsMCAzNC40LDAgTDc0MS40LDAgQzc1OS45LDAgNzc1LDE1IDc3NSwzMy42IEw3NzUsOTQ2LjUgQzc3NSw5NTkuNCA3NjcuNiw5NzEuMiA3NTYsOTc2LjggQzc1MS40LDk3OC45IDc0Ni41LDk4MCA3NDEuNSw5ODAgWiBNNjgsNjcuMSBMNjgsODc3IEwzNjkuMiw2MzguMiBDMzgxLjUsNjI4LjUgMzk4LjgsNjI4LjUgNDExLjEsNjM4LjMgTDcwOCw4NzYuNSBMNzA4LDY3LjEgTDY4LDY3LjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
$iconBookmarkWhiteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzc1cHgiIGhlaWdodD0iOTgwcHgiIHZpZXdCb3g9IjAgMCA3NzUgOTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi41ICg2NzQ2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iY2IzZmRlZjlkMDhlMmJlZTc0NjVkYmFjZWNiZjljMTMiIGZpbGw9IiM5QjlCOUIiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik03NDEuNSw5ODAgQzczNCw5ODAgNzI2LjYsOTc3LjUgNzIwLjUsOTcyLjYgTDM5MCw3MDcuNCBMNTUuMyw5NzIuNyBDNDUuMiw5ODAuNyAzMS40LDk4Mi4yIDE5LjgsOTc2LjYgQzguMiw5NzEgMC44LDk1OS4zIDAuOCw5NDYuNCBMMC44LDMzLjYgQzAuOCwxNS4xIDE1LjgsMCAzNC40LDAgTDc0MS40LDAgQzc1OS45LDAgNzc1LDE1IDc3NSwzMy42IEw3NzUsOTQ2LjUgQzc3NSw5NTkuNCA3NjcuNiw5NzEuMiA3NTYsOTc2LjggQzc1MS40LDk3OC45IDc0Ni41LDk4MCA3NDEuNSw5ODAgWiBNNjgsNjcuMSBMNjgsODc3IEwzNjkuMiw2MzguMiBDMzgxLjUsNjI4LjUgMzk4LjgsNjI4LjUgNDExLjEsNjM4LjMgTDcwOCw4NzYuNSBMNzA4LDY3LjEgTDY4LDY3LjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
$iconBookmarkSolidWhiteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQuMjg0MW1tIiB3aWR0aD0iNC40ODQ4bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuNDg0ODQ5OSA0LjI4NDEwMDEiPgogPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxMi40NSAtMTU4LjAzKSI+CiAgPHBhdGggZD0ibTIxNS4zNCAxNTkuNS0wLjY1MTM2LTEuNDY3Ny0wLjY1MTM3IDEuNDY3Ny0xLjU5MSAwLjE2ODY3IDEuMTg4NSAxLjA3NTgtMC4zMzE5NSAxLjU3MiAxLjM4NTktMC44MDI4NSAxLjM4NTkgMC44MDI4NS0wLjMzMTk0LTEuNTcyIDEuMTg4NS0xLjA3NTh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iLjI2NDU4IiBmaWxsPSIjZmZmIi8+CiA8L2c+Cjwvc3ZnPgo=');
$iconMenuUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUuMjkxN21tIiB3aWR0aD0iNS4zNzg1bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUuMzc4NDggNS4yOTE2Njk4Ij4KIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNzcuNzcgLTEyMy41MSkiPgogIDxwYXRoIGQ9Im0yNzguMjUgMTIzLjUxYy0wLjI2ODM3IDAtMC40ODQyMSAwLjIxNTg0LTAuNDg0MjEgMC40ODQyMXMwLjIxNTg0IDAuNDg0MjEgMC40ODQyMSAwLjQ4NDIxaDQuNDEwMWMwLjI2ODM3IDAgMC40ODQyLTAuMjE1ODQgMC40ODQyLTAuNDg0MjFzLTAuMjE1ODMtMC40ODQyMS0wLjQ4NDItMC40ODQyMXptMCAyLjE2MTFjLTAuMjY4MzcgMC0wLjQ4NDIxIDAuMjE2MzUtMC40ODQyMSAwLjQ4NDcyczAuMjE1ODQgMC40ODQyMSAwLjQ4NDIxIDAuNDg0MjFoNC40MTAxYzAuMjY4MzcgMCAwLjQ4NDItMC4yMTU4NCAwLjQ4NDItMC40ODQyMXMtMC4yMTU4My0wLjQ4NDcyLTAuNDg0Mi0wLjQ4NDcyem0wIDIuMTYxNmMtMC4yNjgzNyAwLTAuNDg0MjEgMC4yMTYzNS0wLjQ4NDIxIDAuNDg0NzMgMCAwLjI2ODM3IDAuMjE1ODQgMC40ODQyMSAwLjQ4NDIxIDAuNDg0MjFoNC40MTAxYzAuMjY4MzcgMCAwLjQ4NDItMC4yMTU4NCAwLjQ4NDItMC40ODQyMSAwLTAuMjY4MzgtMC4yMTU4My0wLjQ4NDczLTAuNDg0Mi0wLjQ4NDczeiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconCollaboratorUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQwLjQ2MiIgd2lkdGg9IjQwLjQ2MiIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDQwLjQ2MjM5OSA0MC40NjIzOTkiPgogPHRpdGxlPmljb24tY29sbGFib3JhdG9yPC90aXRsZT4KIDxkZXNjPkNyZWF0ZWQgdXNpbmcgRmlnbWE8L2Rlc2M+CiA8ZyBpZD0iQ2FudmFzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTkzNi42IC0xMzY0MCkiPgogIDxnIGlkPSJpY29uLWNvbGxhYm9yYXRvciI+CiAgIDxnIGlkPSJFbGxpcHNlIj4KICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU5MzYuNiAxMzY0MCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiNmYWY2ZjYiLz4KICAgPC9nPgogICA8ZyBpZD0iaWNvbi1QZXJzb24iIGZpbGw9IiNmZmZmZmYiPgogICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDFfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTk0Ny45IDEzNjQ5KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIvPgogICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDJfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTk0Ny45IDEzNjQ5KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIvPgogICA8L2c+CiAgIDxnIGlkPSJpY29uLVBlcnNvbiAoU3Ryb2tlKSI+CiAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoM19maWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1OTQ3LjkgMTM2NDkpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjOWU5MjkwIi8+CiAgIDwvZz4KICA8L2c+CiA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZD0ibTQwLjQ2MiAyMC4yMzFjMCAxMS4xNzMtOS4wNTc4IDIwLjIzMS0yMC4yMzEgMjAuMjMxcy0yMC4yMzEtOS4wNTctMjAuMjMxLTIwLjIzMWMwLTExLjE3MyA5LjA1NzgtMjAuMjMxIDIwLjIzMS0yMC4yMzEgMTEuMTc0IDAgMjAuMjMxIDkuMDU3OCAyMC4yMzEgMjAuMjMxeiIvPgogIDxwYXRoIGlkPSJwYXRoMV9maWxsIiBkPSJtMTMuMzk0IDQuNDY4NWMwIDIuNDY3OS0xLjk4ODggNC40Njg1LTQuNDQyMiA0LjQ2ODUtMi40NTMzIDAtNC40NDIyLTIuMDAwNi00LjQ0MjItNC40Njg1LTAuMDAwMi0yLjQ2NzkgMS45ODg3LTQuNDY4NSA0LjQ0Mi00LjQ2ODUgMi40NTM0IDAgNC40NDI0IDIuMDAwNiA0LjQ0MjQgNC40Njg1eiIvPgogIDxwYXRoIGlkPSJwYXRoMl9maWxsIiBkPSJtNC4yMTk3IDEwLjg1N2MtMi41MzM4IDEuNTgyLTQuMjE5NyA0LjM5OC00LjIxOTcgNy42MDYgMCAxLjIwNTEgMC4yMzgwNCAyLjM1NTcgMC42Njk0MiAzLjQwNTcgMi42MTEzIDAuODM1MiA1LjM5NDEgMS4yODUyIDguMjgyMiAxLjI4NTJzNS42NzA5LTAuNDUgOC4yODI0LTEuMjg1MmMwLjQzMTQtMS4wNSAwLjY2OTQtMi4yMDA2IDAuNjY5NC0zLjQwNTcgMC0zLjIwOC0xLjY4NjEtNi4wMjM5LTQuMjItNy42MDU3LTEuMzgzNCAwLjgzMzUtMy4wMDIgMS4zMTQyLTQuNzMyIDEuMzE0MnMtMy4zNDg2LTAuNDgwNy00LjczMTctMS4zMTQyeiIvPgogIDxwYXRoIGlkPSJwYXRoM19maWxsIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im04Ljk1MTYgNy45MzdjMS44OTU1IDAgMy40NDIyLTEuNTQ3MyAzLjQ0MjItMy40Njg1cy0xLjU0Ny0zLjQ2ODUtMy40NDI0LTMuNDY4NWMtMS44OTU1IDAtMy40NDIyIDEuNTQ3My0zLjQ0MjIgMy40Njg1czEuNTQ2NyAzLjQ2ODUgMy40NDIyIDMuNDY4NXptLTQuNjc4OSA0LjA5MWMtMS45ODUxIDEuNDQ4LTMuMjcyNyAzLjc5Mi0zLjI3MjcgNi40MzUtMC4wMDQ0MjMgMC45Mzg3IDAuMTM5MzQgMS43NzM2IDAuNDI4NzkgMi41OTQ3IDIuMzk4NiAwLjcyMjkgNC44ODIxIDEuMDk5MiA3LjUyMjggMS4wOTYyIDIuNjQwOCAwLjAwMyA1LjEyNDMtMC4zNzMzIDcuNTIzMS0xLjA5NjIgMC4yODk0LTAuODIxMSAwLjQzMzItMS42NTYgMC40Mjg3LTIuNTk0NyAwLTIuNjQzMS0xLjI4NzctNC45ODczLTMuMjczLTYuNDM1NS0xLjM4OTIgMC43MDY3LTMuMDM1OSAxLjEzNDktNC42NzkgMS4xNDQtMS42NDMxLTAuMDA5MS0zLjI4OTgtMC40MzczLTQuNjc4Ny0xLjE0NHptLTAuMDUzLTEuMTcwMmMtMi41MzM4IDEuNTgxLTQuMjE5NyA0LjM5Ny00LjIxOTcgNy42MDUgMCAxLjIwNTEgMC4yMzgwNCAyLjM1NTcgMC42Njk0MiAzLjQwNTcgMi42MTEzIDAuODM1MiA1LjM5NDEgMS4yODUyIDguMjgyMiAxLjI4NTJzNS42NzA5LTAuNDUgOC4yODI0LTEuMjg1MmMwLjQzMTQtMS4wNSAwLjY2OTQtMi4yMDA2IDAuNjY5NC0zLjQwNTcgMC0zLjIwOC0xLjY4NjEtNi4wMjM5LTQuMjItNy42MDU3LTEuMzgzNCAwLjgzMzUtMy4wMDIgMS4zMTQyLTQuNzMyIDEuMzE0MnMtMy4zNDg2LTAuNDgwNy00LjczMTctMS4zMTQyem00LjczMTktMS45MjFjMi40NTM0IDAgNC40NDIyLTIuMDAwNiA0LjQ0MjItNC40Njg1cy0xLjk4OS00LjQ2ODUtNC40NDI0LTQuNDY4NWMtMi40NTMzIDAtNC40NDIyIDIuMDAwNi00LjQ0MjIgNC40Njg1czEuOTg4OCA0LjQ2ODUgNC40NDIyIDQuNDY4NXoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$iconPlusGreyUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9Ii43NDY3Mm1tIiB3aWR0aD0iLjc0NjczbW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDAuNzQ2NzI1MDMgMC43NDY3MjAwMiI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTkuNDggLTEyOC4wNikiPgogIDxwYXRoIGQ9Im01OS43OSAxMjguMDZ2MC4zMDk1NGgtMC4zMDk1NHYwLjEyODE1aDAuMzA5NTR2MC4zMDkwM2gwLjEyODE2di0wLjMwOTAzaDAuMzA5MDJ2LTAuMTI4MTVoLTAuMzA5MDJ2LTAuMzA5NTR6IiBmaWxsPSIjOWU5MjkwIi8+CiA8L2c+Cjwvc3ZnPgo=');
$iconAppUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzMCAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxIiB5PSIwLjcwMTE3MiIgd2lkdGg9IjI3Ljc5NjIiIGhlaWdodD0iMjAuOTMzOCIgcng9IjAuNDk0MzI3IiBzdHJva2U9IiMyRDM0M0EiLz48cGF0aCBkPSJNMjguNDk2NiA1LjQ2Mjg5TDEgNS40NjI4OSIgc3Ryb2tlPSIjMkQzNDNBIi8+PC9zdmc+);
$iconRecipeUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC45MDAzNCAxMS41OTI3QzMuNjE0MjMgMTAuMzA2NiAzLjIxOTEzIDguNDY2OSAzLjcxNTAyIDYuODQwNjVMNi42MTc1NyA5Ljc0MzIxQzYuNjE3NTcgOS43NDMyMSA3LjYzNjggOS45ODg3OCA4Ljg1MzU5IDguNzg2NzRDMTAuMDcwNCA3LjU4NDcxIDkuNzk3NDkgNi41NjMyOSA5Ljc5NzQ5IDYuNTYzMjlMNi45MDc4IDMuNjczNkM4LjUyNDk0IDMuMTk0NzggMTAuMzQ2NyAzLjU5MzU2IDExLjYyMzEgNC44Njk5OEMxMi44OTk1IDYuMTQ2MzkgMTMuMjk4MyA3Ljk2ODA5IDEyLjgxOTUgOS41ODUyM0wyMS4wMjU1IDE3Ljc5MTNDMjEuOTAzNiAxOC42Njk0IDIxLjkwMzYgMjAuMDkzMSAyMS4wMjU1IDIwLjk3MTJDMjAuMTQ3NCAyMS44NDkzIDE4LjcyMzcgMjEuODQ5MyAxNy44NDU2IDIwLjk3MTJMOS42NTI0MSAxMi43NzhDOC4wMjYxNiAxMy4yNzM5IDYuMTg2NDUgMTIuODc4OCA0LjkwMDM0IDExLjU5MjdaIiBzdHJva2U9IiMyRDM0M0EiLz48L3N2Zz4=);
$iconAnnotationUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSI+CiA8ZyBmaWxsPSIjOUU5MjkwIiBjbGlwLXBhdGg9InVybCgjY2xpcDApIj4KICA8cGF0aCBkPSJtMTguNCA4Ljc2YzEuNCAwIDIuNi0xLjE0IDIuNi0yLjU0IDAtMS40MS0xLjItMi41NC0yLjYtMi41NHMtMi41IDEuMTMtMi41IDIuNTRjMCAxLjQgMS4xIDIuNTQgMi41IDIuNTR6bTAtMWMwLjkgMCAxLjYtMC42OSAxLjYtMS41NHMtMC43LTEuNTQtMS42LTEuNTRjLTAuOCAwLTEuNSAwLjY5LTEuNSAxLjU0czAuNyAxLjU0IDEuNSAxLjU0eiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuMjgpIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KICA8cGF0aCBkPSJtMy4xOCAzLjAzYy0wLjI3IDAtMC41IDAuMjItMC41IDAuNSAwIDAuMjcgMC4yMyAwLjUgMC41IDAuNWgxMC41YzAuMyAwIDAuNS0wLjIzIDAuNS0wLjUgMC0wLjI4LTAuMi0wLjUtMC41LTAuNWgtMTAuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNi4yOCkiLz4KICA8cGF0aCBkPSJtMi42OCA2LjA3YzAtMC4yNyAwLjIzLTAuNSAwLjUtMC41aDEwLjVjMC4zIDAgMC41IDAuMjMgMC41IDAuNSAwIDAuMjgtMC4yIDAuNS0wLjUgMC41aC0xMC41Yy0wLjI5IDAtMC41Mi0wLjIyLTAuNTItMC41eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA2LjI4KSIvPgogIDxwYXRoIGQ9Im0zLjE4IDguMTJjLTAuMjcgMC0wLjUgMC4yMi0wLjUgMC41czAuMjMgMC41IDAuNSAwLjVoOC4yMmMwLjMgMCAwLjUtMC4yMiAwLjUtMC41cy0wLjItMC41LTAuNS0wLjVoLTguMjJ6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuMjgpIi8+CiAgPHBhdGggZD0ibTI0LjUgNy42YzAuNy0wLjc3IDAuNy0xLjk5IDAtMi43N2wtNC4xLTQuMjJjLTAuNC0wLjM4OC0wLjktMC42MS0xLjQtMC42MWgtMTdjLTEuMSAwLTIgMC44OTYtMiAydjguNGMwIDEuMSAwLjg5NiAyIDIgMmgxN2MwLjUgMCAxLTAuMiAxLjQtMC42bDQuMS00LjJ6bS0wLjgtMC42OWwtNCA0LjE5Yy0wLjIgMC4yLTAuNSAwLjMtMC43IDAuM2gtMTdjLTAuNTUgMC0xLTAuNC0xLTF2LTguNGMwLTAuNTUgMC40NS0xIDEtMWgxN2MwLjIgMCAwLjUgMC4xMSAwLjcgMC4zMWw0IDQuMjFjMC40IDAuMzkgMC40IDEgMCAxLjM5eiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuMjgpIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KIDwvZz4KIDxkZWZzPgogIDxjbGlwUGF0aCBpZD0iY2xpcDAiPgogICA8cmVjdCB3aWR0aD0iMjUiIGZpbGw9IiNmZmYiIGhlaWdodD0iMjUiLz4KICA8L2NsaXBQYXRoPgogPC9kZWZzPgo8L3N2Zz4K');
$iconAnnotateAltUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNiI+CiA8ZyBmaWxsPSIjOUU5MjkwIj4KICA8cGF0aCBkPSJtMjQuOSAxLjkxbC0xLjktMS45MS05LjYgOS41NS0wLjcgMi41NSAyLjYtMC42IDkuNi05LjU5eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjA2NTkgMy41NikiLz4KICA8cGF0aCBkPSJtMTUuNyAzLjI5YzAuNyAwIDEuMyAwLjIyIDEuOCAwLjU4bC0wLjggMC43MmMtMC4zLTAuMTktMC42LTAuMy0xLTAuM2gtMTIuN2MtMS4xIDAtMiAwLjktMiAydjcuMDFjMCAxLjEgMC45IDIgMiAyaDYuNzNjMS4zNyAwIDIuNjcgMC43IDMuMzcgMS44bDAuMSAwLjJjMC0xLjEgMC45LTIgMi0yaDAuNWMxLjEgMCAyLTAuOSAyLTJ2LTMuMWwxLTEuMDF2NC4xMWMwIDEuNy0xLjMgMy0zIDNoLTAuNWMtMC41IDAtMSAwLjQtMSAxdjEuN2MwIDAuNS0wLjYgMC43LTAuOSAwLjNsLTEtMS42Yy0wLjYtMC45LTEuNS0xLjQtMi41Ny0xLjRoLTYuNzNjLTEuNjYgMC0zLTEuMy0zLTN2LTcuMDFjMC0xLjY2IDEuMzQtMyAzLTNoMTIuN3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC4wNjU5IDMuNTYpIi8+CiAgPHBhdGggZD0ibTMuMjUgNi44NmgxMS4ybC0wLjkgMWgtMTAuMmMtMC4zMyAwLTAuNTUtMC4yMy0wLjU1LTAuNSAwLTAuMjggMC4yMi0wLjUgMC41LTAuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC4wNjU5IDMuNTYpIi8+CiAgPHBhdGggZD0ibTEyLjIgOS4yOWgtOC45NWMtMC4yOCAwLTAuNSAwLjIzLTAuNSAwLjUgMCAwLjMxIDAuMjIgMC41MSAwLjUgMC41MWg4Ljc1YzAuMS0wLjQzIDAuMi0wLjc5IDAuMi0xLjAxeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjA2NTkgMy41NikiLz4KICA8cGF0aCBkPSJtMy4yNSAxMS43Yy0wLjI4IDAtMC41IDAuMy0wLjUgMC41IDAgMC4zIDAuMjIgMC41IDAuNSAwLjVoNy42NWMwLjIgMCAwLjUtMC4yIDAuNS0wLjUgMC0wLjItMC4zLTAuNS0wLjUtMC41aC03LjY1eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjA2NTkgMy41NikiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconSegmentUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNiAxNSI+CiA8cGF0aCBmaWxsPSIjOTU5NDk1IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Im00LjIgMTRoNy42di0xM2gtNy42djEzem0tMSAxdi0xLjFoLTEuODd2MS4xaC0xLjMzdi0xNWgxLjMzdjEuMDdoMS44N3YtMS4wN2g5LjZ2MS4wN2gxLjl2LTEuMDdoMS4zdjE1aC0xLjN2LTEuMWgtMS45djEuMWgtOS42em0wLTEyLjl2MS44OGgtMS44N3YtMS44OGgxLjg3em0wIDIuOTV2MS44N2gtMS44N3YtMS44N2gxLjg3em0tMS44NyAyLjk1djEuODdoMS44N3YtMS44N2gtMS44N3ptMS44NyAyLjk2djEuOWgtMS44N3YtMS45aDEuODd6bTkuNi04Ljg2djEuODhoMS45di0xLjg4aC0xLjl6bTAgMi45NXYxLjg3aDEuOXYtMS44N2gtMS45em0xLjkgMi45NXYxLjg3aC0xLjl2LTEuODdoMS45em0tMS45IDIuOTZ2MS45aDEuOXYtMS45aC0xLjl6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==');
$iconDeleteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiA8ZyBmaWxsPSIjOWU5MjkwIj4KICA8cGF0aCBkPSJtNC40NiAwYy0wLjI3IDAtMC41IDAuMjI0LTAuNSAwLjUgMCAwLjEyOSAwLjA1IDAuMjQ3IDAuMTMgMC4zMzVoLTMuNTljLTAuMjc2IDAtMC41IDAuMjI1LTAuNSAwLjUwNSAwIDAuMjcgMC4yMjQgMC41IDAuNSAwLjVoMTIuNmMwLjMgMCAwLjUtMC4yMyAwLjUtMC41IDAtMC4yOC0wLjItMC41MDUtMC41LTAuNTA1aC0zLjU2YzAuMDgtMC4wODggMC4xMy0wLjIwNiAwLjEzLTAuMzM1IDAtMC4yNzYtMC4yMi0wLjUtMC41LTAuNWgtNC43MXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuNjggMS41KSIvPgogIDxwYXRoIGQ9Im0zLjc3IDUuMDNjMC4yOCAwIDAuNSAwLjIzIDAuNSAwLjV2OS43N2MwIDAuMy0wLjIyIDAuNS0wLjUgMC41cy0wLjUtMC4yLTAuNS0wLjV2LTkuNzdjMC0wLjI3IDAuMjItMC41IDAuNS0wLjV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjY4IDEuNSkiLz4KICA8cGF0aCBkPSJtNi42OCA1LjAzYzAuMjggMCAwLjUgMC4yMyAwLjUgMC41djkuNzdjMCAwLjMtMC4yMiAwLjUtMC41IDAuNS0wLjI3IDAtMC41LTAuMi0wLjUtMC41di05Ljc3YzAtMC4yNyAwLjIzLTAuNSAwLjUtMC41eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy42OCAxLjUpIi8+CiAgPHBhdGggZD0ibTkuNTkgNS4wM2MwLjI4IDAgMC41MSAwLjIzIDAuNTEgMC41djkuNzdjMCAwLjMtMC4yMyAwLjUtMC41MSAwLjUtMC4yNyAwLTAuNS0wLjItMC41LTAuNXYtOS43N2MwLTAuMjcgMC4yMy0wLjUgMC41LTAuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuNjggMS41KSIvPgogIDxwYXRoIGQ9Im0wLjUxMSAyLjg1djEyLjRjMCAxLjYgMS4zNCAzIDMgM2g2LjU5YzEuNyAwIDMtMS40IDMtM3YtMTIuNGgtMTIuNnptMTEuNiAxaC0xMC42djExLjRjMC4wMSAxLjEgMC45MSAyIDIuMDEgMmg2LjU5YzEuMSAwIDItMC45IDItMnYtMTEuNHoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy42OCAxLjUpIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconDataSetUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAyMiAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuNjUyNyAzLjIwMTczQzIwLjY1MjcgMy4yMDkgMjAuNjUxNyAzLjI1NTczIDIwLjU3IDMuMzQ3OThDMjAuNDg1NiAzLjQ0MzM2IDIwLjMzODMgMy41NTkyNyAyMC4xMDc2IDMuNjg1NDFDMTkuNjQ2NyAzLjkzNzQzIDE4Ljk0NjcgNC4xODAyNiAxOC4wMzkgNC4zOTAyQzE2LjIzMTYgNC44MDgyMSAxMy43MDk3IDUuMDcxNCAxMC45MDY3IDUuMDcxNFY2LjA3MTRDMTMuNzYyNCA2LjA3MTQgMTYuMzYzNCA1LjgwNDExIDE4LjI2NDQgNS4zNjQ0OEMxOS4yMTA4IDUuMTQ1NTkgMjAuMDExMyA0Ljg3NzggMjAuNTg3NCA0LjU2MjgxQzIwLjg3NTIgNC40MDU0NCAyMS4xMzA0IDQuMjIzNzYgMjEuMzE5IDQuMDEwNjJDMjEuNTEwMyAzLjc5NDM1IDIxLjY1MjcgMy41MjE2NCAyMS42NTI3IDMuMjAxNzNIMjAuNjUyN1pNMTAuOTA2NyA1LjA3MTRDOC4xMDM2NCA1LjA3MTQgNS41ODE3MiA0LjgwODIxIDMuNzc0MyA0LjM5MDJDMi44NjY1OSA0LjE4MDI2IDIuMTY2NiAzLjkzNzQzIDEuNzA1NzEgMy42ODU0MUMxLjQ3NTAzIDMuNTU5MjcgMS4zMjc2NyAzLjQ0MzM2IDEuMjQzMjggMy4zNDc5OEMxLjE2MTY1IDMuMjU1NzMgMS4xNjA2NCAzLjIwOSAxLjE2MDY0IDMuMjAxNzNIMC4xNjA2NDVDMC4xNjA2NDUgMy41MjE2NCAwLjMwMjk4OSAzLjc5NDM1IDAuNDk0MzQgNC4wMTA2MkMwLjY4MjkxOCA0LjIyMzc2IDAuOTM4MTUxIDQuNDA1NDQgMS4yMjU5NSA0LjU2MjgxQzEuODAyMDEgNC44Nzc4IDIuNjAyNTIgNS4xNDU1OSAzLjU0ODk3IDUuMzY0NDhDNS40NDk4OCA1LjgwNDExIDguMDUwOTcgNi4wNzE0IDEwLjkwNjcgNi4wNzE0VjUuMDcxNFpNMS4xNjA2NCAzLjIwMTczQzEuMTYwNjQgMy4xOTQ0NSAxLjE2MTY1IDMuMTQ3NzIgMS4yNDMyOCAzLjA1NTQ3QzEuMzI3NjcgMi45NjAwOSAxLjQ3NTAzIDIuODQ0MTcgMS43MDU3MSAyLjcxODA0QzIuMTY2NiAyLjQ2NjAyIDIuODY2NTkgMi4yMjMxOCAzLjc3NDMgMi4wMTMyNEM1LjU4MTcyIDEuNTk1MjIgOC4xMDM2NCAxLjMzMjAzIDEwLjkwNjcgMS4zMzIwM1YwLjMzMjAzMUM4LjA1MDk3IDAuMzMyMDMxIDUuNDQ5ODggMC41OTkzMTkgMy41NDg5NyAxLjAzODk2QzIuNjAyNTIgMS4yNTc4NiAxLjgwMjAxIDEuNTI1NjQgMS4yMjU5NSAxLjg0MDY0QzAuOTM4MTUgMS45OTgwMSAwLjY4MjkxNiAyLjE3OTcgMC40OTQzMzkgMi4zOTI4M0MwLjMwMjk4OCAyLjYwOTEgMC4xNjA2NDUgMi44ODE4MiAwLjE2MDY0NSAzLjIwMTczSDEuMTYwNjRaTTEwLjkwNjcgMS4zMzIwM0MxMy43MDk3IDEuMzMyMDMgMTYuMjMxNiAxLjU5NTIyIDE4LjAzOSAyLjAxMzI0QzE4Ljk0NjcgMi4yMjMxOCAxOS42NDY3IDIuNDY2MDIgMjAuMTA3NiAyLjcxODA0QzIwLjMzODMgMi44NDQxNyAyMC40ODU2IDIuOTYwMDkgMjAuNTcgMy4wNTU0N0MyMC42NTE3IDMuMTQ3NzIgMjAuNjUyNyAzLjE5NDQ1IDIwLjY1MjcgMy4yMDE3M0gyMS42NTI3QzIxLjY1MjcgMi44ODE4MiAyMS41MTAzIDIuNjA5MSAyMS4zMTkgMi4zOTI4M0MyMS4xMzA0IDIuMTc5NyAyMC44NzUyIDEuOTk4MDEgMjAuNTg3NCAxLjg0MDY0QzIwLjAxMTMgMS41MjU2NCAxOS4yMTA4IDEuMjU3ODYgMTguMjY0NCAxLjAzODk2QzE2LjM2MzQgMC41OTkzMTkgMTMuNzYyNCAwLjMzMjAzMSAxMC45MDY3IDAuMzMyMDMxVjEuMzMyMDNaIiBmaWxsPSIjMkQzNDNBIi8+PHBhdGggZD0iTTIwLjY2NzcgMy45MzIxNVYyMi4zNzg1TDIwLjY2ODcgMjIuNDEwMkwyMC42Njg0IDIyLjkwMDhDMjAuNjYyMyAyMi45OTM2IDIwLjU3MTcgMjMuMjA2NCAyMC4xMzA4IDIzLjQ5MjdDMTkuNjY5NCAyMy43NzIxIDE4Ljk2ODkgMjQuMDQxMyAxOC4wNTk1IDI0LjI3NDNDMTYuMjQ4MyAyNC43MzgyIDEzLjcxOTQgMjUuMDMwNyAxMC45MDcyIDI1LjAzMDdDOC4wOTQ4OSAyNS4wMzA4IDUuNTY1NjkgMjQuNzM4MyAzLjc1NDI2IDI0LjI3NDRDMi44NDQ3OSAyNC4wNDE0IDIuMTQ0MTUgMjMuNzcyMiAxLjY4Mjc1IDIzLjQ5MjhDMS4yMTAwOSAyMy4yMDY1IDEuMTUxMDMgMjMuMDA5OCAxLjE0NDg1IDIyLjkxN0wxLjE0NDg2IDIyLjQxMDRMMS4xNDU4OCAyMi40MTA0VjMuOTE2NjVDMC44Mzc3MTIgMy42OTExIDAuNjcxNTAzIDMuNDUwOTYgMC42NzE1MDMgMy4yMDE4NUMwLjY3MTUwMyAzLjA3MTI4IDAuNzE3MTU5IDIuOTQzMTggMC44MDQ5OCAyLjgxODM2QzAuNjk2MTk1IDIuODQ5MzIgMC41OTI2OTEgMi44OTcyNCAwLjUwMDQgMi45NjI1M0MwLjMyMzY0MyAzLjA4NzU4IDAuMTU1Njc5IDMuMzA1NjMgMC4xNTU2NzkgMy41OTlWMjIuMzYyNUwwLjE1NTMxOSAyMi44NzQ2TDAuMTU0MjkyIDIyLjkwNjVDMC4xNTQyMjIgMjMuNTQ3NiAwLjYxOTcyNyAyNC4wMDY2IDEuMTY5ODIgMjQuMzM5OEMxLjc0OTc1IDI0LjY5MDkgMi41NTU5OCAyNC45ODk2IDMuNTA4NTcgMjUuMjMzNkM1LjQyMTIzIDI1LjcyMzUgOC4wMzY4NyAyNi4wMjEgMTAuOTA3MyAyNi4wMjA5QzEzLjc3NzQgMjYuMDIwOSAxNi4zOTI4IDI1LjcyMzQgMTguMzA1MiAyNS4yMzM1QzE5LjI1NzcgMjQuOTg5NSAyMC4wNjM5IDI0LjY5MDkgMjAuNjQzNyAyNC4zMzk3QzIxLjE5MzcgMjQuMDA2NiAyMS42NTkgMjMuNTMxNCAyMS42NTg5IDIyLjg5MDNMMjEuNjU3OSAyMi44NTg3VjIyLjM2MjZWMy41OTlDMjEuNjU3OSAzLjMwNTUxIDIxLjQ4OTggMy4wODc0NSAyMS4zMTMxIDIuOTYyNDVDMjEuMjI4NSAyLjkwMjY0IDIxLjEzNDUgMi44NTc0MSAyMS4wMzU3IDIuODI2NDVDMjEuMTE5OCAyLjk0ODcyIDIxLjE2MzUgMy4wNzQxIDIxLjE2MzUgMy4yMDE4NUMyMS4xNjM1IDMuNDU2NjggMjAuOTg5NiAzLjcwMjExIDIwLjY2NzcgMy45MzIxNVoiIGZpbGw9IiMyRDM0M0EiLz48L3N2Zz4=);
$iconInfoUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy42MDQyOSAzLjkzMjRIOS44NTEyNlY1LjYxMDMzSDcuNjA0MjlWMy45MzI0Wk03LjY0ODA2IDYuNzE5MjNIOS44MjIwOEw5LjgzNjY3IDE0SDcuNjQ4MDZWNi43MTkyM1oiIGZpbGw9IndoaXRlIi8+PC9zdmc+);
$iconTimeUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iOS41IiBzdHJva2U9IiMyRDM0M0EiLz48cGF0aCBkPSJNMTAuNSAyLjVWMTAuNUwxNSAxNSIgc3Ryb2tlPSJibGFjayIvPjwvc3ZnPg==);
$iconTrashUrl: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0iIzJkMzQzYSIgZD0iTTYgMTljMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjdINnYxMnpNMTkgNGgtMy41bC0xLTFoLTVsLTEgMUg1djJoMTRWNHoiLz48L3N2Zz4=);
$iconMetadataWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYuOTMyOSAxOC41MjQ1QzE3LjM3OCAxOC4wNjMyIDE3LjM3OCAxNy4zMzIyIDE2LjkzMjkgMTYuODcwOVYxNi44NzA5QzE2LjQ2NDYgMTYuMzg1NiAxNS42ODczIDE2LjM4NTYgMTUuMjE5IDE2Ljg3MDlMNy44MDIyNSAyNC41NTc0TDE1LjIxOSAzMi4yNDM5QzE1LjY4NzMgMzIuNzI5MSAxNi40NjQ2IDMyLjcyOTEgMTYuOTMyOSAzMi4yNDM5VjMyLjI0MzlDMTcuMzc4IDMxLjc4MjUgMTcuMzc4IDMxLjA1MTUgMTYuOTMyOSAzMC41OTAyTDExLjExMTcgMjQuNTU3NEwxNi45MzI5IDE4LjUyNDVaIiBmaWxsPSJ3aGl0ZSIvPjxwYXRoIGQ9Ik0zMi4wNjcxIDE4LjUyNDVDMzEuNjIyIDE4LjA2MzIgMzEuNjIyIDE3LjMzMjIgMzIuMDY3MSAxNi44NzA5VjE2Ljg3MDlDMzIuNTM1NCAxNi4zODU2IDMzLjMxMjcgMTYuMzg1NiAzMy43ODEgMTYuODcwOUw0MS4xOTc4IDI0LjU1NzRMMzMuNzgxIDMyLjI0MzlDMzMuMzEyNyAzMi43MjkxIDMyLjUzNTQgMzIuNzI5MSAzMi4wNjcxIDMyLjI0MzlWMzIuMjQzOUMzMS42MjIgMzEuNzgyNSAzMS42MjIgMzEuMDUxNSAzMi4wNjcxIDMwLjU5MDJMMzcuODg4MyAyNC41NTc0TDMyLjA2NzEgMTguNTI0NVoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTI1LjU0OTUgMTUuMzE0QzI1LjcxNzcgMTQuNjg2NCAyNi4zNjI4IDE0LjMxMzkgMjYuOTkwNCAxNC40ODIxVjE0LjQ4MjFDMjcuNjE4MSAxNC42NTAzIDI3Ljk5MDUgMTUuMjk1NCAyNy44MjI0IDE1LjkyMzFMMjIuNzQ3MyAzNC44NjM2QzIyLjU3OTEgMzUuNDkxMiAyMS45MzQgMzUuODYzNyAyMS4zMDYzIDM1LjY5NTVWMzUuNjk1NUMyMC42Nzg3IDM1LjUyNzMgMjAuMzA2MiAzNC44ODIyIDIwLjQ3NDQgMzQuMjU0NkwyNS41NDk1IDE1LjMxNFoiIGZpbGw9IndoaXRlIi8+PC9zdmc+);
$iconAnnotationWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIj48bWFzayBpZD0icGF0aC0xLWluc2lkZS0xIiBmaWxsPSJ3aGl0ZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC43MiAxNi41NDQzQzkuMjE3NzkgMTYuNTQ0MyA4IDE3Ljc2MjEgOCAxOS4yNjQzVjMwLjczNkM4IDMyLjIzODIgOS4yMTc3OSAzMy40NTYgMTAuNzIgMzMuNDU2SDMzLjc4OTZDMzQuNTI5NCAzMy40NTYgMzUuMjM3MyAzMy4xNTQ2IDM1Ljc1MDEgMzIuNjIxNEw0MS4yNjYyIDI2Ljg4NTVDNDIuMjc4OCAyNS44MzI2IDQyLjI3ODggMjQuMTY3NyA0MS4yNjYyIDIzLjExNDdMMzUuNzUwMSAxNy4zNzg5QzM1LjIzNzMgMTYuODQ1NyAzNC41Mjk0IDE2LjU0NDMgMzMuNzg5NiAxNi41NDQzSDEwLjcyWk0zMy4wNjAxIDI3LjA5MzlDMzQuMjE2NiAyNy4wOTM5IDM1LjE1NDIgMjYuMTU2MyAzNS4xNTQyIDI0Ljk5OThDMzUuMTU0MiAyMy44NDMyIDM0LjIxNjYgMjIuOTA1NiAzMy4wNjAxIDIyLjkwNTZDMzEuOTAzNSAyMi45MDU2IDMwLjk2NTkgMjMuODQzMiAzMC45NjU5IDI0Ljk5OThDMzAuOTY1OSAyNi4xNTYzIDMxLjkwMzUgMjcuMDkzOSAzMy4wNjAxIDI3LjA5MzlaIi8+PC9tYXNrPjxwYXRoIGQ9Ik0zNS43NTAxIDMyLjYyMTRMMzYuNzMwMyAzMy41NjQxTDM2LjczMDMgMzMuNTY0MUwzNS43NTAxIDMyLjYyMTRaTTQxLjI2NjIgMjYuODg1NUw0MC4yODU5IDI1Ljk0MjhMNDAuMjg1OSAyNS45NDI4TDQxLjI2NjIgMjYuODg1NVpNNDEuMjY2MiAyMy4xMTQ3TDQwLjI4NTkgMjQuMDU3NEw0MC4yODU5IDI0LjA1NzRMNDEuMjY2MiAyMy4xMTQ3Wk0zNS43NTAxIDE3LjM3ODlMMzQuNzY5OCAxOC4zMjE2TDM0Ljc2OTggMTguMzIxNkwzNS43NTAxIDE3LjM3ODlaTTkuMzYgMTkuMjY0M0M5LjM2IDE4LjUxMzIgOS45Njg4OSAxNy45MDQzIDEwLjcyIDE3LjkwNDNWMTUuMTg0M0M4LjQ2NjY4IDE1LjE4NDMgNi42NCAxNy4wMTEgNi42NCAxOS4yNjQzSDkuMzZaTTkuMzYgMzAuNzM2VjE5LjI2NDNINi42NFYzMC43MzZIOS4zNlpNMTAuNzIgMzIuMDk2QzkuOTY4ODkgMzIuMDk2IDkuMzYgMzEuNDg3MSA5LjM2IDMwLjczNkg2LjY0QzYuNjQgMzIuOTg5MyA4LjQ2NjY4IDM0LjgxNiAxMC43MiAzNC44MTZWMzIuMDk2Wk0zMy43ODk2IDMyLjA5NkgxMC43MlYzNC44MTZIMzMuNzg5NlYzMi4wOTZaTTM0Ljc2OTggMzEuNjc4N0MzNC41MTM0IDMxLjk0NTMgMzQuMTU5NSAzMi4wOTYgMzMuNzg5NiAzMi4wOTZWMzQuODE2QzM0Ljg5OTMgMzQuODE2IDM1Ljk2MTEgMzQuMzYzOSAzNi43MzAzIDMzLjU2NDFMMzQuNzY5OCAzMS42Nzg3Wk00MC4yODU5IDI1Ljk0MjhMMzQuNzY5OCAzMS42Nzg3TDM2LjczMDMgMzMuNTY0MUw0Mi4yNDY0IDI3LjgyODNMNDAuMjg1OSAyNS45NDI4Wk00MC4yODU5IDI0LjA1NzRDNDAuNzkyMiAyNC41ODM5IDQwLjc5MjIgMjUuNDE2MyA0MC4yODU5IDI1Ljk0MjhMNDIuMjQ2NCAyNy44MjgzQzQzLjc2NTQgMjYuMjQ4OCA0My43NjU0IDIzLjc1MTUgNDIuMjQ2NCAyMi4xNzJMNDAuMjg1OSAyNC4wNTc0Wk0zNC43Njk4IDE4LjMyMTZMNDAuMjg1OSAyNC4wNTc0TDQyLjI0NjQgMjIuMTcyTDM2LjczMDMgMTYuNDM2MkwzNC43Njk4IDE4LjMyMTZaTTMzLjc4OTYgMTcuOTA0M0MzNC4xNTk1IDE3LjkwNDMgMzQuNTEzNCAxOC4wNTUgMzQuNzY5OCAxOC4zMjE2TDM2LjczMDMgMTYuNDM2MkMzNS45NjExIDE1LjYzNjMgMzQuODk5MyAxNS4xODQzIDMzLjc4OTYgMTUuMTg0M1YxNy45MDQzWk0xMC43MiAxNy45MDQzSDMzLjc4OTZWMTUuMTg0M0gxMC43MlYxNy45MDQzWk0zMy43OTQyIDI0Ljk5OThDMzMuNzk0MiAyNS40MDUyIDMzLjQ2NTUgMjUuNzMzOSAzMy4wNjAxIDI1LjczMzlWMjguNDUzOUMzNC45Njc3IDI4LjQ1MzkgMzYuNTE0MiAyNi45MDc0IDM2LjUxNDIgMjQuOTk5OEgzMy43OTQyWk0zMy4wNjAxIDI0LjI2NTZDMzMuNDY1NSAyNC4yNjU2IDMzLjc5NDIgMjQuNTk0MyAzMy43OTQyIDI0Ljk5OThIMzYuNTE0MkMzNi41MTQyIDIzLjA5MjEgMzQuOTY3NyAyMS41NDU2IDMzLjA2MDEgMjEuNTQ1NlYyNC4yNjU2Wk0zMi4zMjU5IDI0Ljk5OThDMzIuMzI1OSAyNC41OTQzIDMyLjY1NDYgMjQuMjY1NiAzMy4wNjAxIDI0LjI2NTZWMjEuNTQ1NkMzMS4xNTI0IDIxLjU0NTYgMjkuNjA1OSAyMy4wOTIxIDI5LjYwNTkgMjQuOTk5OEgzMi4zMjU5Wk0zMy4wNjAxIDI1LjczMzlDMzIuNjU0NiAyNS43MzM5IDMyLjMyNTkgMjUuNDA1MiAzMi4zMjU5IDI0Ljk5OThIMjkuNjA1OUMyOS42MDU5IDI2LjkwNzQgMzEuMTUyNCAyOC40NTM5IDMzLjA2MDEgMjguNDUzOVYyNS43MzM5WiIgZmlsbD0id2hpdGUiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xKSIvPjxwYXRoIGQ9Ik0xMi4zMjgxIDIxLjM0MjhIMjYuNjAwMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjM2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMTIuMzI4MSAyNC44MDU1SDI2LjYwMDMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4zNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTEyLjMyODEgMjguMjY4MUgyMy41NjEyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4IDgpIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+);
$iconLockWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI4IiB5PSIxMS4xODE2IiB3aWR0aD0iMTUiIGhlaWdodD0iMTIuODE4IiByeD0iMS4wOTk1OCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4yIiBzdHJva2U9IndoaXRlIi8+PHBhdGggZD0iTTE5LjQ2NzUgMTEuMTgzNkwxOS40Njc1IDguMzEyNUMxOS40Njc1IDYuMTIxNTggMTcuNjkxMiA0LjM0NTIxIDE1LjUwMDIgNC4zNDUyMUMxMy4zMDkzIDQuMzQ1MjEgMTEuNTMzMiA2LjEyMTU4IDExLjUzMzIgOC4zMTI1TDExLjUzMzIgMTEuMTgzNkgxMC41MzMyVjguMzEyNUMxMC41MzMyIDUuNTY4ODUgMTIuNzU3MSAzLjM0NTIxIDE1LjUwMDIgMy4zNDUyMUMxOC4yNDM3IDMuMzQ1MjEgMjAuNDY3NSA1LjU2ODg1IDIwLjQ2NzUgOC4zMTI1TDIwLjQ2NzUgMTEuMTgzNkgxOS40Njc1WiIgZmlsbD0id2hpdGUiLz48bWFzayBpZD0icGF0aC0zLWluc2lkZS0xIiBmaWxsPSJ3aGl0ZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41MDEgMTcuNDA1NUMxNy4wMDIxIDE3LjA4NjUgMTcuMzMzMyAxNi41MzQ5IDE3LjMzMzMgMTUuOTA3OUMxNy4zMzMzIDE0LjkyMDggMTYuNTEyNSAxNC4xMjA2IDE1LjQ5OTkgMTQuMTIwNkMxNC40ODczIDE0LjEyMDYgMTMuNjY2NSAxNC45MjA4IDEzLjY2NjUgMTUuOTA3OUMxMy42NjY1IDE2LjUzNSAxMy45OTc4IDE3LjA4NjcgMTQuNDk5IDE3LjQwNTZWMjAuMTIyNkMxNC40OTkgMjAuNjc1NCAxNC45NDcyIDIxLjEyMzYgMTUuNSAyMS4xMjM2QzE2LjA1MjggMjEuMTIzNiAxNi41MDEgMjAuNjc1NCAxNi41MDEgMjAuMTIyNlYxNy40MDU1WiIvPjwvbWFzaz48cGF0aCBkPSJNMTYuNTAxIDE3LjQwNTVMMTUuOTY0IDE2LjU2MTlMMTUuNTAxIDE2Ljg1NjdWMTcuNDA1NUgxNi41MDFaTTE0LjQ5OSAxNy40MDU2SDE1LjQ5OVYxNi44NTY3TDE1LjAzNTkgMTYuNTYyTDE0LjQ5OSAxNy40MDU2Wk0xNi4zMzMzIDE1LjkwNzlDMTYuMzMzMyAxNi4xNzE0IDE2LjE5NTUgMTYuNDE0NiAxNS45NjQgMTYuNTYxOUwxNy4wMzggMTguMjQ5MUMxNy44MDg3IDE3Ljc1ODUgMTguMzMzMyAxNi44OTg0IDE4LjMzMzMgMTUuOTA3OUgxNi4zMzMzWk0xNS40OTk5IDE1LjEyMDZDMTUuOTg0NCAxNS4xMjA2IDE2LjMzMzMgMTUuNDk3IDE2LjMzMzMgMTUuOTA3OUgxOC4zMzMzQzE4LjMzMzMgMTQuMzQ0NyAxNy4wNDA2IDEzLjEyMDYgMTUuNDk5OSAxMy4xMjA2VjE1LjEyMDZaTTE0LjY2NjUgMTUuOTA3OUMxNC42NjY1IDE1LjQ5NyAxNS4wMTU1IDE1LjEyMDYgMTUuNDk5OSAxNS4xMjA2VjEzLjEyMDZDMTMuOTU5MiAxMy4xMjA2IDEyLjY2NjUgMTQuMzQ0NyAxMi42NjY1IDE1LjkwNzlIMTQuNjY2NVpNMTUuMDM1OSAxNi41NjJDMTQuODA0MyAxNi40MTQ2IDE0LjY2NjUgMTYuMTcxNCAxNC42NjY1IDE1LjkwNzlIMTIuNjY2NUMxMi42NjY1IDE2Ljg5ODYgMTMuMTkxMiAxNy43NTg3IDEzLjk2MjEgMTguMjQ5M0wxNS4wMzU5IDE2LjU2MlpNMTUuNDk5IDIwLjEyMjZWMTcuNDA1NkgxMy40OTlWMjAuMTIyNkgxNS40OTlaTTE1LjUgMjAuMTIzNkMxNS40OTg2IDIwLjEyMzYgMTUuNDk4MyAyMC4xMjM1IDE1LjQ5ODcgMjAuMTIzNUMxNS40OTkxIDIwLjEyMzYgMTUuNDk5NiAyMC4xMjM4IDE1LjQ5OTkgMjAuMTIzOUMxNS41MDA1IDIwLjEyNDIgMTUuNTAwMSAyMC4xMjQxIDE1LjQ5OTMgMjAuMTIzM0MxNS40OTg1IDIwLjEyMjUgMTUuNDk4NCAyMC4xMjIxIDE1LjQ5ODcgMjAuMTIyN0MxNS40OTg4IDIwLjEyMyAxNS40OTkgMjAuMTIzNSAxNS40OTkxIDIwLjEyMzlDMTUuNDk5MSAyMC4xMjQzIDE1LjQ5OSAyMC4xMjQgMTUuNDk5IDIwLjEyMjZIMTMuNDk5QzEzLjQ5OSAyMS4yMjc3IDE0LjM5NDkgMjIuMTIzNiAxNS41IDIyLjEyMzZWMjAuMTIzNlpNMTUuNTAxIDIwLjEyMjZDMTUuNTAxIDIwLjEyNCAxNS41MDA5IDIwLjEyNDMgMTUuNTAxIDIwLjEyMzlDMTUuNTAxIDIwLjEyMzUgMTUuNTAxMiAyMC4xMjMgMTUuNTAxMyAyMC4xMjI3QzE1LjUwMTYgMjAuMTIyMSAxNS41MDE1IDIwLjEyMjUgMTUuNTAwNyAyMC4xMjMzQzE1LjQ5OTkgMjAuMTI0MSAxNS40OTk1IDIwLjEyNDIgMTUuNTAwMSAyMC4xMjM5QzE1LjUwMDQgMjAuMTIzOCAxNS41MDA5IDIwLjEyMzYgMTUuNTAxMyAyMC4xMjM1QzE1LjUwMTcgMjAuMTIzNSAxNS41MDE0IDIwLjEyMzYgMTUuNSAyMC4xMjM2VjIyLjEyMzZDMTYuNjA1MSAyMi4xMjM2IDE3LjUwMSAyMS4yMjc3IDE3LjUwMSAyMC4xMjI2SDE1LjUwMVpNMTUuNTAxIDE3LjQwNTVWMjAuMTIyNkgxNy41MDFWMTcuNDA1NUgxNS41MDFaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTMtaW5zaWRlLTEpIi8+PC9zdmc+);
$iconZoomToSelectedUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuMDcyODUgNC44MDIyOEg4LjA2NDEzVjYuNTAyMjhINi43NzI4NVY5Ljc0NjY5SDguMDY0MTNWMTEuNDQ2N0g1LjA3Mjg1VjQuODAyMjhaIiBmaWxsPSIjOUU5MjkwIi8+CjxwYXRoIGQ9Ik0xMS45NTQ1IDQuODAyMjhIOC45NjMyMVY2LjUwMjI4SDEwLjI1NDVWOS43NDY2OUg4Ljk2MzIxVjExLjQ0NjdIMTEuOTU0NVY0LjgwMjI4WiIgZmlsbD0iIzlFOTI5MCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjcxNzUgMi44OTg2N0MxNi4xODQyIDUuMzgxNDkgMTYuNTMxNSA5LjE4OTc2IDE0Ljc1OTMgMTIuMDQ1OEMxNC45OTYgMTIuMTIyNCAxNS4yMTg2IDEyLjI1NTEgMTUuNDA2MSAxMi40NDM5TDE5Ljg0NDMgMTYuOTExMUMyMC40Njk5IDE3LjU0MDggMjAuNDY5OSAxOC41NTc0IDE5Ljg0NDMgMTkuMTg3QzE5LjIxMyAxOS44MjI1IDE4LjE4NDkgMTkuODIyNSAxNy41NTM2IDE5LjE4N0wxMy4xMTUzIDE0LjcxOThDMTIuOTU2MiAxNC41NTk2IDEyLjgzNzUgMTQuMzc0NCAxMi43NTkzIDE0LjE3NjlDOS44ODk3NyAxNi4yMjA4IDUuODkwODcgMTUuOTQ5NSAzLjMyMTEzIDEzLjM2M0MwLjQ1MDI0OCAxMC40NzMzIDAuNDUwMjQ4IDUuNzg4MyAzLjMyMTEzIDIuODk4NjdDNi4xOTIwMSAwLjAwOTAzNzQ5IDEwLjg0NjYgMC4wMDkwMzc0OSAxMy43MTc1IDIuODk4NjdaTTEyLjYwODIgMTIuMjQ2NEMxNC44NjY1IDkuOTczNDMgMTQuODY2NSA2LjI4ODE5IDEyLjYwODIgNC4wMTUyMUMxMC4zNSAxLjc0MjIyIDYuNjg4NjYgMS43NDIyMiA0LjQzMDQyIDQuMDE1MjFDMi4xNzIxOCA2LjI4ODE5IDIuMTcyMTggOS45NzM0MyA0LjQzMDQyIDEyLjI0NjRDNi42ODg2NiAxNC41MTk0IDEwLjM1IDE0LjUxOTQgMTIuNjA4MiAxMi4yNDY0WiIgZmlsbD0iIzlFOTI5MCIvPgo8L3N2Zz4K);
$iconHistoryUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDBDNi4wMyAwIDIgNC4wMyAyIDlIMEwyLjk2IDEzLjAzTDYgOUg0QzQgNS4xMyA3LjEzIDIgMTEgMkMxNC44NyAyIDE4IDUuMTMgMTggOUMxOCAxMi44NyAxNC44NyAxNiAxMSAxNkM5LjQzMTQzIDE2IDcuOTgxNzUgMTUuNDc4MiA2LjgxNzM5IDE0LjYwMUM2LjM3NDExIDE0LjI2NyA1Ljc0MTA0IDE0LjI1OSA1LjM0ODYgMTQuNjUxNEM0Ljk1NzI1IDE1LjA0MjggNC45NTQxMyAxNS42ODIzIDUuMzg1OTggMTYuMDI4NEM2LjkyNDQ4IDE3LjI2MTUgOC44NzA4NCAxOCAxMSAxOEMxNS45NyAxOCAyMCAxMy45NyAyMCA5QzIwIDQuMDMgMTUuOTcgMCAxMSAwWk0xMC43NSA0QzEwLjMzNTggNCAxMCA0LjMzNTc5IDEwIDQuNzVWMTBMMTMuNjc1MSAxMi4xODFDMTQuMDA5MyAxMi4zNzkzIDE0LjQ0MSAxMi4yNjk1IDE0LjYzOTcgMTEuOTM1NUMxNC44Mzg3IDExLjYwMTIgMTQuNzI4OCAxMS4xNjg4IDE0LjM5NDMgMTAuOTdMMTEuNSA5LjI1VjQuNzVDMTEuNSA0LjMzNTc5IDExLjE2NDIgNCAxMC43NSA0WiIgZmlsbD0iIzlFOTI5MCIvPgo8L3N2Zz4K);
$iconTagUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNCAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi43MiA4LjU0NDMxQzEuMjE3NzkgOC41NDQzMSAwIDkuNzYyMSAwIDExLjI2NDNWMjIuNzM2QzAgMjQuMjM4MiAxLjIxNzc5IDI1LjQ1NiAyLjcyIDI1LjQ1NkgyNS43ODk2QzI2LjUyOTQgMjUuNDU2IDI3LjIzNzMgMjUuMTU0NiAyNy43NTAxIDI0LjYyMTRMMzMuMjY2MiAxOC44ODU1QzM0LjI3ODggMTcuODMyNiAzNC4yNzg4IDE2LjE2NzcgMzMuMjY2MiAxNS4xMTQ3TDI3Ljc1MDEgOS4zNzg5QzI3LjIzNzMgOC44NDU2NiAyNi41Mjk0IDguNTQ0MzEgMjUuNzg5NiA4LjU0NDMxSDIuNzJaTTI1LjA1OTkgMjAuMTI5MkMyNi43ODgyIDIwLjEyOTIgMjguMTg5MyAxOC43MjgyIDI4LjE4OTMgMTYuOTk5OUMyOC4xODkzIDE1LjI3MTYgMjYuNzg4MiAxMy44NzA2IDI1LjA1OTkgMTMuODcwNkMyMy4zMzE3IDEzLjg3MDYgMjEuOTMwNiAxNS4yNzE2IDIxLjkzMDYgMTYuOTk5OUMyMS45MzA2IDE4LjcyODIgMjMuMzMxNyAyMC4xMjkyIDI1LjA1OTkgMjAuMTI5MloiIGZpbGw9IiMyRDM0M0EiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMCI+CjxyZWN0IHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
$iconLayersUrl: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExLjk5IDE4LjU0bC03LjM3LTUuNzNMMyAxNC4wN2w5IDcgOS03LTEuNjMtMS4yNy03LjM4IDUuNzR6TTEyIDE2bDcuMzYtNS43M0wyMSA5bC05LTctOSA3IDEuNjMgMS4yN0wxMiAxNnoiLz48L3N2Zz4=);

/* Textures */
$texturePlaceholderUrl: repeating-linear-gradient(
    -45deg,
    $clGreyTint,
    $clGreyTint 10px,
    darken($clGreyTint, 3) 10px,
    darken($clGreyTint, 3) 20px
);


//import mixins, containing generic all purpose small elements
@mixin checkbox() {
	font-family: "Verdana", sans-serif;
	padding: 0px 15px;
	font-size: 22px;
	float:left;
	line-height:1;
	div {
		margin-bottom: 1em;
	}
	input[type="checkbox"], input[type="radio"] {
		display: none;
	}
	label {
		cursor:pointer;
		color: #555;
	}
	input[type="checkbox"]:checked + label {
		color: $highlight-color;
	}
	input[type="checkbox"] + label span {
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
		border: 1px solid $clGreyTint;
		border-radius: 2px;
	}
	input[type="checkbox"] + label span::before {
		content: "";
		display: block;
	}

	input[type="checkbox"]:checked + label span::before {
		content: "✓";
		color: $highlight-color;
		text-align: center;
		font-size: 18px;
	}
}

@mixin switchButton($transition-time : 1s, $backColorBtnActive : #468dcb, $backColorBtnInactive :#7aabd6, $widthBtn:100px, $marginLeftBtn: 67px) {
	input.checkbox-toggle {
		position: absolute;
		left: -9999px;
		opacity: 0;
	}

	.checkbox-toggle + label {
		display: block;
		position: relative;
		cursor: pointer;
		outline: none;
		user-select: none;
		font-family: 'helvetica';
		font-size: 13px;
		margin: 0;
	}

	input.checkbox-toggle:checked + label:before {
		text-align: center;
		content: attr(data-on);
		padding: 3px 30px 0px 0;
	}

	input.checkbox-toggle:not(:checked) + label:before {
		text-align: center;
		content: attr(data-off);
		padding: 3px 0 0px 30px;
	}

	input.checkbox-toggle-round + label {
		padding: 2px;
		width: $widthBtn;
		height: 25px;
		background-color: #dddddd;
		border-radius: 5px;
	}

	input.checkbox-toggle-round + label:before,
	input.checkbox-toggle-round + label:after {
		display: block;
		position: absolute;
		top: 1px;
		left: 1px;
		bottom: 1px;
		content: '';
	}

	input.checkbox-toggle-round + label:before {
		right: 1px;
		border-radius: 5px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round + label:after {
		width: 30px;
		background-color: #fff;
		border-radius: 10%;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		transition: margin $transition-time;
	}

	input.checkbox-toggle-round:checked + label:after {
		margin-left: $marginLeftBtn;
	}

	input.checkbox-toggle-round:checked + label:before {
		background-color: #7aabd6;
		color: white;
	}

	input.checkbox-toggle-round:not(:checked) + label:before {
		background-color: #468dcb;
		color: white;
	}

	input.checkbox-toggle-round-flat + label {
		padding: 2px;
		width: 100px;
		height: 25px;
		background-color: #dddddd;
		border-radius: 35px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round-flat + label:before,
	input.checkbox-toggle-round-flat + label:after {
		display: block;
		position: absolute;
		content: "";
	}

	input.checkbox-toggle-round-flat + label:before {
		top: 2px;
		left: 2px;
		bottom: 2px;
		right: 2px;
		background-color: #fff;
		border-radius: 25px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round-flat + label:after {
		top: 4px;
		left: 4px;
		bottom: 4px;
		width: 27px;
		background-color: #bbb;
		border-radius: 35px;
		transition: margin $transition-time, background $transition-time;
	}

	input.checkbox-toggle-round-flat:checked + label {
		background-color: #7aabd6;
	}

	input.checkbox-toggle-round-flat:checked + label:after {
		margin-left: 42px;
		background-color: #7aabd6;
	}
}

@mixin chartBase() {
	.ms_toggle_btn {
		@include switchButton();
	}

	.ms__custom-tooltip {
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 8px;
		box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, .8);
		color: #f3f3f3;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		min-width: 280px;
		padding: 1rem 3rem;
		text-transform: capitalize;

		p {
			.rightAlign {
				float: right;
			}
		}
	}
}

@mixin lineChartBase() {
	.axis path,	.axis line { /* overridden d3 class */
		fill: none;
		stroke: #e3e3e3;
		shape-rendering: crispEdges;
	}

	.x.axis path { /* overridden d3 class */
		display: none;
	}

	h4 {
		text-align: center;
	}

	@include chartBase();
}

@mixin ellipses($widthSubst : '50px') {
	display: inline-block;
	max-width: calc(100% - #{$widthSubst});
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

//imports from our very own component library (clients can override the exposed variables)
.bg__bookmark-selector {

    > .user-input {
        display:flex;
        justify-content: space-between;

        .bg__bms__bgroup-form {

            /* bootstrap class override */
            .list-group-item {
                background-color: white;
                font-weight: bold;

                &:hover {
                    background-color: $clGrey;
                }
                &:focus,
                &:active {
                    background-color: white;
                }

                > .member-count {
                    float: right;
                    vertical-align: middle;
                    font-size: 14px;
                    line-height: 14px;
                    color: white;
                    background-color: $clSecondary;
                    border-radius: 15px;
                    padding: 2px 8px;
                    min-width: 20px;
                    text-align: center;
                }
                > .fas {
                    margin-right: 10px;
                }

                &.selected {
                    background-color: mix(white, $clSecondary, 75%);
                    border-left: 5px solid $clSecondary;
                    > .fas {
                        color: $clSecondary;
                    }
                }
            }

            .bg__bms__new-bgroup {
                display: flex;
                input {
                    margin: 0px;
                }
            }

        }
    }

    > .save-btn {
        button {
            float: right;
        }
        margin-top: 10px;
        height: 40px;
    }

    > .validation-error {
        background-color: #f26c50;
        color: #fff;
        height: 3.3rem;
        margin-bottom: 6px;
        padding: 6px 10px;
    }

}

.bg__collection-analyser {
	cursor: default;
	.current_field{
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #aaa;
		table{
			font-size: 0.9em;
			background-color: white;
			width: 100%;
			td, th{
				border-bottom: 1px solid #eee;
				padding: 5px;
				vertical-align: top;
			}

			.title{
				font-weight: bold;
			}

			.total{
				float: right;
				color: #aaa;
				font-size: 0.8em;
			}
		}
	}
}
.bg__collection-selector {
	.bg__collection-block {
		.card-body {
			&:hover {
				color: $highlight-color;
				cursor: pointer;
			}
		}
	}
}
.bg__collection-stats {}

.bg__field-analysis-stats {
	table {
		font-size :95%;
	}

	.align-right {
		text-align : right;
	}
}
.bg__field-selector{
	position: fixed;
	cursor: default;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
	z-index:9999;

	.container{
		background-color: #fff;
		padding: 30px;
		max-height: calc(100% - 150px);
		position: relative;
		margin-top:148px;

		.close{
			position: absolute;
			top: -40px;
			height: 40px;
			line-height: 40px;
			font-size: 1.2em;
			display: block;
			color: white;
			right: 0px;
			opacity: 1;
			padding: 0 10px;
			text-shadow: none;
		}

		.row{
			max-height: calc(100% - 150px);
			table{
				width: 100%;

				thead, tbody tr {
				    width:100%;
				    display: table;
				}

				tbody{
					display: block;
					width: 100%;
					height: calc(100vh - 280px);
					overflow-y: auto;
				}

				tr:nth-child(odd) {
		   			background-color: $clGrey;
				}

				tr{
					border-left: 3px solid transparent;

					&.current{
						border-left: 3px solid $clPrimary;
					}

					&:hover{
						background-color: $clGreyTint;
						border-left: 3px solid $clSecondary;
						&.current{
							border-left: 3px solid $clPrimary;
						}
					}
				}

				th{
					cursor: pointer;
					border-bottom: 1px solid #ddd;
					font-size: 0.9em;

					padding: 5px 10px;

					&:hover{
						background-color: $clGreyTint;
						border-bottom: 3px solid $clSecondary;
					}

					i{
						float:right;
						&.fa-sort-up{
							margin-top: 5px;
						}
					}
					&.title{
						width: 34%;
					}
					&.level{
						width: 80px;
					}

					&.completeness{
						width: 140px;
					}

					&.active{
						border-bottom: 3px solid $clSecondary;
					}

					&.select{
						width: 110px; // +30px scrollbar
					}

					&.type{
						width: 80px;
					}
				}

				td{
					font-size: 0.8em;
					padding: 5px 10px;
					vertical-align: top;

					&.title{
						font-weight: bold;
						width: 35%;
					}

					&.level{
						width: 80px;
					}

					&.completeness{
						text-align: right;
						span{
							font-weight: bold;
							font-size: 0.8em;
							display: inline-block;
							padding: 5px;
							border-radius: 10px;
							&.total{
								font-size: 0.8em;
								color: #aaa;
								font-weight: normal;
								padding: 0 5px;
							}
						}
						width: 140px;
					}

					&.description{
						// auto width
					}

					&.select{
						width: 80px;
					}

					&.type{
						width: 80px;
					}
				}
			}
		}
	}
}
.bg__flex-box {

	.box-toggle {
		width:100%;
		height:40px;
		cursor: pointer;
		padding: $default-margin $default-margin 0px 0px;

		label {
			cursor: pointer;
			float:right;
		}

		&:hover {
			background-color: $fill-color;
		}

		&.closed {
			label {
				&:after {
					content: "\25BC";
				}
			}
		}
		&.open {
			label {
				&:after {
					content: "\25B2";
				}
			}
		}
	}

}
.bg__flex-component-info {}
.bg__flex-modal {

	.bg__fm__custom {
		width: 55%;
	}

	& > .modal-dialog > .modal-content {

		& > .modal-header {
			cursor: grab;
		}
	}
}

.bg__read-more-link {
    font-size: 14px;

    img {
        margin-left: 8px;
    }
    a {
        color: #000;
        text-decoration: underline;
    }
}

//this mixin is "local", since it's never re-used in any other component. Load it first, so the FlexPlayerControls component knows it's there (see below)
/*
    TODO style the sliders better, SEE TIPS:
        http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
        https://www.cssportal.com/style-input-range/
    FIXME
        webkit & moz don't support separate colors for lower/upper (https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
*/
@mixin playerSlider(
    $sliderHeight: 7px,
    $sliderColor: #888,
    $sliderProgressColor: white,
    $sliderBorderColor: #888,
    $thumbWidth: 14px,
    $thumbHeight: 14px,
    $thumbColor: white,
    $thumbBorderColor: #888
) {
    input[type='range'] {
        -webkit-appearance: none;
        border: 1px solid $sliderBorderColor;
        height: $sliderHeight;
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: $sliderHeight;
        background: $sliderColor;
        border: none;
        border-radius: 3px;
    }
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 1px solid $thumbBorderColor;
        height: $thumbHeight;
        width: $thumbWidth;
        border-radius: 50%;
        background: $thumbColor;
        margin-top: -5px;
    }
    input[type='range']:focus {
        outline: none;
    }
    input[type='range']:focus::-webkit-slider-runnable-track {
        background: $sliderColor;
    }

    input[type='range']::-moz-range-track {
        height: $sliderHeight;
        background: $sliderColor;
        border: 1px solid $sliderBorderColor;
        border-radius: 3px;
    }
    input[type='range']::-moz-range-thumb {
        border: 1px solid $thumbBorderColor;
        height: $thumbHeight;
        width: $thumbWidth;
        border-radius: 50%;
        background: $thumbColor;
    }

    /*hide the outline behind the border*/
    input[type='range']:-moz-focusring {
        outline: 1px solid $sliderBorderColor;
        outline-offset: -1px;
    }

    input[type='range']::-ms-track {
        height: $sliderHeight;

        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;

        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;

        /*remove default tick marks*/
        color: transparent;
    }
    input[type='range']::-ms-fill-lower {
        background: $sliderProgressColor;
        border-radius: 10px;
    }
    input[type='range']::-ms-fill-upper {
        background: $sliderColor;
        border-radius: 10px;
    }
    input[type='range']::-ms-thumb {
        border: 1px solid $thumbBorderColor;
        height: $thumbHeight;
        width: $thumbWidth;
        border-radius: 50%;
        background: $thumbColor;
    }
    input[type='range']:focus::-ms-fill-lower {
        background: $sliderProgressColor;
    }
    input[type='range']:focus::-ms-fill-upper {
        background: $sliderColor;
    }
}

.bg__flex-controls {
    @include playerSlider();

    position: absolute;
    z-index: 800; /* below the nav, but on top of anything else*/
    top: 0%;
    width: 100%;
    height: 100%;

    .toggle-play-overlay {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;

        &:hover {
            button {
                display: block;
            }
        }

        button {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
            color: white;
            background-color: $clPrimary;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            border: none;
            height: 100px;
            width: 100px;
            border-radius: 100%;
            font-size: 2em;
            outline: none;
            transition: background-color $transition;
            &:hover {
                background-color: mix(white, $clPrimary, 15%);
            }
        }
    }

    .buttons {
        position: absolute;
        bottom: 22px;
        right: 1%;
        display: flex;

        .volume {
            background-color: transparent;
            border: 0;
            height: 25px;
            width: 100px;
            margin: 0 10px 0;
            cursor: pointer;
        }

        button {
            background-color: transparent;
            border: none;
            color: white;
            cursor: pointer;
            height: 25px;
            font-size: 1.4em;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
        }
    }

    input[type='range'].seekbar {
        position: absolute;
        bottom: 0px;
        width: 98%;
        left: 1%;
        background-color: transparent;
        border: 0;
        height: 20px;
        cursor: pointer;
    }
}

.bg__playlist {
    .bg__playlist-item-num-matches {
        color: crimson;
    }

    .bg__playlist-items {
        .bg__playlist-item {
            background-color: white;
            border-bottom: 1px solid #ccc;

            transition: background-color $transition;

            .bg__segment {
                padding: 7px 10px 7px 5px;
                cursor: pointer;
                color: black;
                border-left: 5px solid transparent;

                &:hover {
                    background-color: mix(white, $clPrimary, 90%);
                }

                &.main {
                    color: $clDark;
                }

                &.active {
                    border-left: 5px solid $clPrimary;
                    background-color: mix(white, $clPrimary, 80%);
                    &:hover {
                        background-color: mix(white, $clPrimary, 80%);
                    }
                }

                .bg__segment-title {
                    cursor: pointer;
                }

                .bg__segment-duration {
                    background-color: $clPrimary;
                    border-radius: 4px;
                    color: #fff;
                    display: inline-block;
                    font-size: 1rem;
                    padding: 1px 6px;
                }
            }
        }
    }

    .bg__playlist-items-raw {
        margin-top: 2px;
        padding: 10px;
        label {
            font-weight: bold;
        }
        .bg__playlist-item-raw {
            color: #888;
            padding: 5px;
        }
    }
}


.bg__html5-audio-player {
    width: 100%;
}


//https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
.bg__html5-video-player {
    position: relative;
    overflow-y: hidden;

    .default {
        /* no default stuff yet */
    }

    video {
        object-fit: contain;
        min-height: 300px;
        max-height: 50vh;
    }

    .full-screen {
        height: 100%;
        max-height: 100%;
        width: 100%;
        position: fixed;
        display: flex;
        left: 0;
        top: 0;
        background-color: rgb(0, 0, 0); /* Black fallback color */
        background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */
        overflow-x: hidden; /* Disable horizontal scroll */
        overflow-y: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
        z-index: 2000; /*crank up that z-index so this video conquers all! :) */

        video {
            max-height: 100%;
        }
    }
}

.bg__jw-player {}
.bg__vimeo-player {}
.bg__youtube-player {}



.bg__project-selector {

	.bg__select-project {
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 15px;
	}

	.bg__project-form  {
	margin-top: 4rem;
	padding-bottom: 3rem;
	&::before {
		content: 'Create a new project';
		font-size: 16px;
		font-weight: 600;
		margin-top: 3rem;
	}

	.new-project-container {
		padding-top: 3rem;
		.bg__new-project-wrapper{
			display: flex;
			flex-wrap: wrap;
			margin: 0;
			padding: 0;
			.project-modal-right {
				margin-left: 15px;
				width: 80%;
			}
			.project-modal-left {
				font-weight: 600;
				width: 16.3332%;
			}
			label {
				color: #000;
				text-align: left;
				text-transform: none;
			}
		}
	}
	.actions {
		margin-top: 3rem;
	}
}
}
$columnWidth: 350px;

.bg__annotation-column {
    position: relative;

    /* General */
    > .column-content {
        height: 100%;
        max-height: 100%;
        > .warning {
            padding: 10px;
            margin: 10px;
            border: 1px solid $clPrimary;
            border-radius: 10px;
            background-color: mix($clPrimary, white, 15%);
            font-size: 13px;
            padding-left: 30px;

            i {
                color: $clPrimary;
                margin-left: -20px;
                display: inline-block;
                margin-right: 10px;
            }

            .action {
                text-decoration: underline;
                cursor: pointer;
                font-weight: bold;
                &:hover {
                    opacity: 0.8;
                }
            }
        }
    }
}

.bg__base-column {
    border: 1px solid $clMediumGrey;
    border-right: 0;
    width: 100%;
    transition: width $transition;
    overflow: hidden;
    position: relative;

    &:first-child {
        border-left: 0;
    }

    &.active {
        & > * {
            width: $columnWidth;
        }
    }

    &.inactive {
        width: 50px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        cursor: pointer;
        transition: background-color $transition, width $transition;

        &:hover {
            background-color: mix(white, $clGrey, 50);
        }

        & > div {
            width: 100%;
            height: 100%;

            > .icon {
                width: 50px;
                height: 50px;
                background-color: $clDark;

                animation-name: fadeIn;
                animation-duration: 0.2s;
                animation-delay: 0s;
                animation-fill-mode: both;

                background-position: center center;
                background-size: contain;

                transition: opacity $transition;

                &:hover {
                    opacity: 0.8;
                }
            }

            > .title {
                position: absolute;
                top: 70px;
                left: 13px;
                font-family: $fontHeading;
                font-size: 15px;

                white-space: nowrap;
                transform-origin: top left;
                transform: rotate(-90deg) translateX(-100%);

                animation-name: fadeIn;
                animation-duration: 0.2s;
                animation-delay: 0.3s;
                animation-fill-mode: both;
            }
        }
    }

    // Column specific
    &.bg__static-column.inactive {
        > div > .icon {
            background-color: $clPrimary;
            background-image: $iconMetadataWhiteUrl;
        }
    }

    &.bg__annotation-column.inactive {
        > div > .icon {
            background-color: $clSecondary;
            background-image: $iconAnnotationWhiteUrl;
        }
    }

    // make the column-content scroll when content doesn't fit in screen
    > div > .column-content {
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100% - 50px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bg__column-header {
    height: $resourceViewerTabHeight;
    border-bottom: 1px solid $clMediumGrey;
    background-color: $clGrey;
    box-sizing: border-box;

    > .close-button {
        width: $resourceViewerTabHeight;
        height: $resourceViewerTabHeight;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;

        transition: background-color $transition;
        &:hover {
            background-color: rgba(white, 0.25);
            &::after,
            &::before {
                border-color: $clDarkGrey;
            }
        }

        // close cross
        $crossSize: 15px;
        &::after,
        &::before {
            content: '';
            display: block;
            position: absolute;
            width: $crossSize;
            left: 50%;
            top: 50%;
            margin-left: $crossSize / -2;
            border-bottom: 2px solid $clMediumGrey;
            transform: rotate(-45deg);
            transition: border-color $transition;
        }

        &::before {
            transform: rotate(45deg);
        }
    }
}

.bg__content-annotations-column {
    position: relative;
    height: 100%;
    max-height: 100%;

    > .type-selector,
    > .filter {
        position: relative;
        padding: 10px 10px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > strong {
            width: 50px;
        }

        > select {
            width: 100%;
            margin: 0 10px;
            border-color: $clGreyTint;
            border-radius: 2px;
            background-color: white;
            padding: 3px 5px;
            font-size: 14px;
        }

        > input {
            padding: 3px;
            border: 1px solid $clGreyTint;
            border-radius: 2px;
            padding: 3px 5px;
            font-size: 14px;
        }

        > .clear {
            position: absolute;
            right: 9px;
            top: 4px;
            width: 30px;
            height: 30px;
            opacity: 0.6;
            cursor: pointer;

            &:hover {
                opacity: 1;
            }
            // clear cross
            $crossSize: 15px;
            &::after,
            &::before {
                content: '';
                display: block;
                position: absolute;
                width: $crossSize;
                left: 50%;
                top: 50%;
                margin-left: $crossSize / -2;
                border-bottom: 2px solid $clDarkGrey;
                transform: rotate(-45deg);
                transition: border-color $transition;
            }

            &::before {
                transform: rotate(45deg);
            }
        }
    }

    > .filter {
        padding-top: 5px;
    }

    > .error-message {
        padding: 10px;
    }
}

.bg__viewer-column {
    overflow-y: auto;

    > .bg__column-header {
        z-index: 2;
        display: flex;
        justify-content: space-between;

        > .playlist {
            padding-left: 10px;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 80px);

            > strong {
                margin-right: 10px;
                padding-top: 13px;
                display: inline-block;
            }

            > .active {
                cursor: pointer;
                margin: 4px 0;
                border-radius: 2px;
                padding: 9px 30px 9px 10px;
                background-color: rgba(white, 0.3);
                border: 1px solid $clGreyTint;
                background-image: $arrowDownDarkUrl;
                background-repeat: no-repeat;
                background-position: center right 10px;

                &:hover {
                    background-color: white;
                }

                &.down {
                    background-image: $arrowUpDarkUrl;
                }
            }
        }

        > .actions {
            > .btn {
                margin-left: 0;
                background-image: none;                
                padding-left: 15px;
                padding-right: 15px;
                margin-top: 0;
                height: 100%;

                &.prev,
                &.next {
                    padding: 10px 15px;
                    font-size: 0;
                    background-position: center;
                    background-repeat: no-repeat;
                }

                &.prev {
                    background-image: $arrowLeftDarkUrl;
                }

                &.next {
                    background-image: $arrowRightDarkUrl;
                }
            }
        }
    }

    // Main column content
    > .column-content {
        // Media player
        > .player {
            position: relative;
            background-color: $clDark;
            color: white;
            text-align: center;

            > .error {
                padding: 15px 20px;
                border: 1px solid $clRed;
                background-color: mix($clRed, white, 60%);
                color: $clDark;
                text-align: center;
            }

            &.locked > .bg__audio-playout > .bg__flex-player,
            &.locked > .bg__video-playout > .bg__flex-player {
                position: relative;
                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    z-index: 1;
                }

                &::before {
                    // striped pattern
                    background: repeating-linear-gradient(
                        45deg,
                        rgba(white, 0.2),
                        rgba(white, 0.2) 20px,
                        rgba(white, 0.4) 20px,
                        rgba(white, 0.4) 40px
                    );
                }

                &::after {
                    // lock icon
                    background-image: $iconLockWhiteUrl;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 10%;
                }
            }
        }
    }
}

.bg__metadata-column {
    padding: 10px;
    height: 100%;
    overflow-y: auto;

    > .fields {
        padding-bottom: 10px;
        border-bottom: 1px solid $clGreyTint;
        margin-bottom: 10px;
        .btn {
            padding-left: 20px;
            margin: 0 10px 0 0;

            &.link {
                background-image: $iconLinkUrl;
                background-repeat: no-repeat;
                background-position: left;
                text-align: left;
                overflow: hidden;
            }
        }
        > div {
            > .title {
                font-size: 15px;
                font-weight: bold;
                text-transform: capitalize;
            }

            > p {
                margin: 4px 0 8px;
                font-size: 14px;
            }
        }
    }

    > .actions {
        padding-top: 10px;
        .btn {
            padding-left: 20px;
            margin: 0 10px 0 0;

            &.link {
                background-image: $iconLinkUrl;
                background-repeat: no-repeat;
                background-position: left;
            }
        }
    }
}

.actions .bg__viewer-paging,
.bg__viewer-paging {
    white-space: nowrap;
    > .btn {
        margin-left: 0;
        background-image: none;
        padding-left: 15px;
        padding-right: 15px;

        &:disabled {
            opacity: 0.2 !important;
            cursor: default;
        }

        &.prev,
        &.next {
            padding: 10px 15px;
            font-size: 0;
            background-position: center;
            background-repeat: no-repeat;
        }

        &.prev {
            background-image: $arrowLeftDarkUrl;
        }

        &.next {
            background-image: $arrowRightDarkUrl;
        }
    }
}

.bg__popup-header {
    height: $resourceViewerPopupHeaderHeight;
    background-color: $clDark;
    box-sizing: border-box;
    cursor: move;
    user-select: none;

    &:active {
        cursor: grabbing;
    }

    .title {
        color: white;
        font-weight: 600;
        line-height: $resourceViewerPopupHeaderHeight;
        padding-left: 15px;
        font-family: $fontHeading;
        font-size: 15px;
        max-width: calc(100% - #{$resourceViewerPopupHeaderHeight});
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    > .close-button {
        width: $resourceViewerPopupHeaderHeight;
        height: $resourceViewerPopupHeaderHeight;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;

        transition: background-color $transition;
        &:hover {
            background-color: rgba(white, 0.25);
            &::after,
            &::before {
                border-color: white;
            }
        }

        // close cross
        $crossSize: 15px;
        &::after,
        &::before {
            content: '';
            display: block;
            position: absolute;
            width: $crossSize;
            left: 50%;
            top: 50%;
            margin-left: $crossSize / -2;
            border-bottom: 2px solid $clMediumGrey;
            transform: rotate(-45deg);
            transition: border-color $transition;
        }

        &::before {
            transform: rotate(45deg);
        }
    }
}

body.resource-viewer {
    min-height: calc(100vh - 95px);
    padding-top: 55px;

    // make the container full width, always
    > .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    &.noHeader {
        height: 100%;
        .bg__tool-header {
            margin-top: 10px;
        }

        > .container {
            height: 100%;
        }

        .bg__viewer-base > .columns {
            height: calc(100vh - 130px);
        }
    }

    input,
    select,
    textarea {
        border: 1px solid $clMediumGrey;
        border-radius: 4px;
        background-color: white;

        &:focus {
            outline: none;
            box-shadow: 0 0 5px rgba($clSecondary, 0.8);
        }
    }

    .btn {
        font-size: 14px;
    }
}

.bg__resource-viewer {
    .bg__RV__not-found {
        padding: 10px 20px;
        margin: 100px auto;
        border-radius: 5px;
        max-width: 800px;
        border: 1px solid $clRed;
        background-color: mix($clRed, white, 60%);
        text-align: center;
    }
}

// Tabs
.bg__viewer-tabs {
    display: flex;

    > .tab {
        cursor: pointer;
        font-size: 15px;
        font-family: $fontHeading;
        border-bottom: 5px solid transparent;
        padding: 13px 8px 10px 15px;
        transition: background-color $transition, border-color $transition;

        &:hover {
            background-color: rgba($clGreyTint, 0.25);
            border-bottom: 5px solid rgba($clPrimary, 0.5);
        }

        &.active {
            border-bottom: 5px solid $clPrimary;
            &:hover {
                background-color: transparent;
            }
        }

        &.secondary {
            &:hover {
                border-bottom: 5px solid $clSecondary;
            }

            &.active {
                border-bottom: 5px solid $clSecondary;
            }
        }
    }
}

.bg__viewer-base {
    max-height: 100vh;
    overflow: hidden;

    > .columns {
        display: flex;
        justify-content: stretch;

        // TODO: update height after full resource header is implemented
        height: calc(100vh - 215px);
        overflow-y: hidden;

        // Here we define column layout
        > .bg__viewer-column {
            width: 100%;
        }

        > .bg__static-column,
        > .bg__annotation-column {
            width: $columnWidth;
            flex-shrink: 0;
        }

        > .bg__static-column {
            > .column-content {
                height: calc(100% - #{$resourceViewerTabHeight});
                max-height: calc(100% - #{$resourceViewerTabHeight});
            }
        }
    }
}

.bg__viewer-header {
    padding: 0 10px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1390px;

    display: flex;
    flex-direction: column;

    > .resource-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        > .title {
            margin: 0;
            padding: 10px 0 10px;
            font-size: 17px;
            max-width: calc(100% - 350px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            > span {
                margin-right: 10px;
            }
        }

        > .actions {
            display: flex;
            > .btn.bookmark {
                /*what is the btn class now? Now it is bootstrap-4*/
                margin-left: 0px;
                background-color: $clSecondary;
                background-image: none;
                color: white;
                padding-right: 15px;
                padding-left: 13px;
                height: 40px;
                > i {
                    margin-right: 7px;
                }
            }
        }
    }
}


// Media Column
.bg__image-viewer {
    height: calc(100vh - 217px);

    &.multiple{
        height: calc(100vh - 267px);
    }

    .bg__imv__overlay {
        background-color: $image-overlay-bg;
        border-radius: $image-overlay-border-radius;
        box-shadow: $box-shadow-base $shadow-subdued;
        cursor: pointer;
        outline: $image-overlay-border;
        padding: 10px;
        &.active {
            /* possibly change this into .bg__flex-image-viewer--active (BEM style) */
            background-color: $image-overlay-bg-active;
            border-radius: $image-overlay-border-radius-active;
            box-shadow: $box-shadow-base $shadow-active;
            outline: $image-overlay-border-active;
        }
        button {
            color: black;
            border-radius: 2px;
        }
    }

    /*.bg__imv__overlay_static {
		background-color: $image-overlay-bg;
		border-radius: $image-overlay-border-radius;
		box-shadow: $box-shadow-base $shadow-subdued;
        color: fff;
		outline: $image-overlay-border;
		padding:10px;
	}*/

    .bg__imv__highlight {
        background-color: $highlight-color;
        opacity: 0.4;
    }
}

.bg__playlist-dropdown {
    z-index: 1000;
    position: absolute;
    width: auto;
    max-width: 60vw;
    top: 46px;
    max-height: 50vh;
    overflow-y: auto;
    box-shadow: 2px 5px 10px rgba($clDark, 0.2);
    user-select: none;

    // may change if playlist label changes
    left: 90px;
}

.bg__playlist-dropdown-row {
    background-color: white;
    border-bottom: 1px solid #ccc;

    transition: background-color $transition;

    padding: 7px 10px 7px 5px;
    cursor: pointer;
    color: $clDark;
    border-left: 5px solid transparent;

    &:hover {
        background-color: mix(white, $clPrimary, 90%);
    }

    &.active {
        border-left: 5px solid $clPrimary;
        background-color: mix(white, $clPrimary, 80%);
        &:hover {
            background-color: mix(white, $clPrimary, 80%);
        }
    }

    > .count {
        background: $clPrimary;
        color: white;
        margin-left: 5px;
        padding: 2px 3px;
        min-width: 20px;
        text-align: center;
        border-radius: 50%;
        font-size: 11px;
        font-weight: bold;
        float: right;
    }
}

/* Timeline specific variables */

$tlLayerHeight: 40px;
$tlHeaderHeight: 40px;
$tlLeftWidth: 210px;

.bg__tl-actions {
    padding: 10px 10px 0 10px;
    background-color: $clGrey;
    border-bottom: 1px solid $clGreyTint;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    > input {
        padding: 5px 25px 5px 5px;
        border-radius: 2px;
        border: 1px solid $clGreyTint;
        width: $tlLeftWidth - 20px;
        box-sizing: border-box;

        background-image: $iconSearchUrl;
        background-position: center right 5px;
        background-size: 18px;
        background-repeat: no-repeat;
        margin-bottom: 10px;
        font-size: 13.5px;
    }

    > .right {
        user-select: none;
        padding-bottom: 10px;
        > div {
            padding: 5px 10px;
            display: inline-block;
            margin-right: 5px;
            background-color: mix($clGrey, $clGreyTint, 50%);
            border-radius: 2px;
            text-transform: uppercase;
            height: 30px;
            min-width: 30px;
            vertical-align: top;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            &:hover {
                background-color: mix($clGrey, $clGreyTint, 80%);
            }

            // Zoom to selected
            &.zoom-selected {
                font-family: $fontHeading;
                background-image: $iconZoomToSelectedUrl;
                background-repeat: no-repeat;
                background-position: center;
                font-size: 0;
                width: 30px;
                height: 30px;
            }

            // Zoom in/out
            $tlZoomIconSize: 12px;
            &.zoom-out,
            &.zoom-in {
                position: relative;
                font-size: 0;
                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -$tlZoomIconSize/2;
                    width: $tlZoomIconSize;
                    margin-top: -1px;
                    height: 2px;
                    background-color: $clDarkGrey;
                }
            }
            &.zoom-in {
                &:before {
                    transform: rotate(90deg);
                }
            }

            // Previous/Next
            &.next,
            &.prev {
                background-image: $arrowRightDarkUrl;
                background-position: center center;
                background-repeat: no-repeat;
                font-size: 0;
            }

            &.prev {
                transform: rotate(180deg);
            }
        }
    }
}

.bg__tl-time {
    position: relative;
    height: $tlHeaderHeight;
    background-color: $clDark;
    overflow: hidden;
}

.bg__tl-cursor {
    user-select: none;
    position: absolute;
    z-index: 2;
    width: 1px;
    background-color: $clPrimary;
    height: 100%;
    top: 0;
    pointer-events: none;

    span {
        position: absolute;
        font-size: 12px;
        padding: 1.5px 4px 0;
        background-color: $clPrimary;
        color: white;
        min-width: 62px;
    }

    &.end {
        span {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}

.bg__tl-layer-headers {
    > .tl-layer-header {
        cursor: pointer;
        box-sizing: border-box;
        border-bottom: 1px solid $clGreyTint;
        min-height: $tlLayerHeight - 1;
        user-select: none;
        font-size: 13px;
        font-weight: bold;
        line-height: 39px;
        padding: 0 10px 0 7px;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-left: 3px solid transparent;
        transition: background-color 0.2s ease-out, border-color 0.2s ease-out;

        &:hover {
            border-left: 3px solid mix(white, $clPrimary, 50%);
            background-color: mix(white, $clPrimary, 95%);
        }

        &.active {
            border-left: 3px solid $clPrimary;
            background-color: mix(white, $clPrimary, 85%);
        }

        &.user-segment {
            border-bottom: 1px solid $clDark;
            padding-right: 0;

            // Title
            span.bg__editable-text {
                height: 30px;
                vertical-align: top;
            }

            .bg__editable-text {
                width: calc(100% - 30px);
                max-width: calc(100% - 30px);
                height: 30px;
            }

            &.active {
                .bg__editable-text {
                    &:hover {
                        border-bottom: 1px dotted $clSecondary;
                    }
                }
            }

            &.tools {
                .bg__editable-text {
                    max-width: calc(100% - 85px);
                }
            }

            &.active {
                border-left: 3px solid $clSecondary;
                background-color: mix(white, $clSecondary, 85%);
            }

            .add-segment-button,
            .delete-segment-button,
            .annotate-segment-button {
                float: right;
                width: 28px;
                height: 40px;

                transition: background-color 0.3s ease-out;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 18px;

                &:hover {
                    background-color: rgba($clSecondary, 0.2);
                }
            }
            .add-segment-button {
                text-align: center;
                color: $clSecondary;
                font-size: 19px;
            }

            .delete-segment-button {
                background-image: $iconTrashUrl;
            }

            .annotate-segment-button {
                background-image: $iconTagUrl;
            }
        }
    }
}

.bg__tl-layer {
    min-height: $tlLayerHeight;
    box-sizing: border-box;
    border-bottom: 1px solid $clGreyTint;
    position: relative;
    width: 100%;
    user-select: none;
    padding: 2px 0;
    &:hover {
        z-index: 1;
    }

    &.user-segment {
        border-bottom: 1px solid $clDark;
    }
}

.bg__tl-layers {
}

// include a tl-layer rootclass - as that holds the layer specific class
.bg__tl-layer {
    // default section
    > .bg__tl-section {
        overflow: hidden;
        position: absolute;
        top: 0px;
        height: 39px;
        box-sizing: border-box;
        font-size: 12px;
        cursor: pointer;
        transition: outline 0.2s ease-out, opacity 0.2 ease-out;
        outline: 1px solid transparent;

        &:hover {
            outline: 1px solid white;
            z-index: 2;
            opacity: 0.8;
        }

        &.match {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        &.no-match {
            opacity: 0.3;
        }

        &.active {
            outline: 3px solid white;
            z-index: 3;
        }

        &.highlight {
            outline: 3px solid $clSecondary;
            box-shadow: 0 0 10px $clSecondary;
            z-index: 4;
        }
    }

    &.user-segment {
        > .bg__tl-section {
            background-color: mix(white, $clSecondary, 75%);
            box-shadow: 0 0 5px rgba($clSecondary, 0.8);
            &:hover {
                opacity: 1;
            }

            .annotation-title {
                white-space: nowrap;
                line-height: 39px;
                text-overflow: ellipsis;
                padding: 0 5px;
                overflow: hidden;
                font-size: 11px;
            }

            &.small {
                .content {
                    display: none;
                }
            }
        }
    }

    &.content-segment {
        > .bg__tl-section {
            background-color: mix(white, $clPrimary, 75%);
            border-left: 2px solid mix(white, $clPrimary, 50%);
            border-right: 2px solid mix(white, $clPrimary, 50%);
            div {
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0 5px;
                line-height: 39px;
                overflow: hidden;
            }
            &.small {
                p {
                    display: none;
                }
            }
        }
    }

    &.asr-sentence {
        > .bg__tl-section {
            > div {
                width: 100%;
                height: 100%;
                background: $clDark;
            }
        }
    }

    &.asr-words {
        > .bg__tl-section {
            background-color: mix(white, $clPrimary, 90%);
            border-left: 1px solid mix(white, $clPrimary, 50%);
            border-right: 1px solid mix(white, $clPrimary, 50%);
            padding: 0px;
            height: 100%;
            &.small {
                div {
                    display: none;
                }
            }
        }
    }

    &.images {
        > .bg__tl-section {
            height: 80px;
            > div {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }
        }
    }
}

// include a tl-layer rootclass - as that holds the layer specific class
.bg__tl-layer {
    > .bg__tl-section {
        &.cropped {
            .bg__tl-section-edit {
                .left {
                    display: none;
                }
            }
        }

        .bg__tl-section-edit {
            width: 100%;
            height: 100%;

            &.active {
                outline: 3px solid $clSecondary;
            }

            &:hover {
                .left,
                .right {
                    opacity: 0.4;
                }
            }

            &.dragging {
                background-color: rgba($clSecondary, 0.3);
            }
            &.dragging-both,
            &.dragging-left {
                .left {
                    opacity: 1;
                }
            }

            &.dragging-both,
            &.dragging-right {
                .right {
                    opacity: 1;
                }
            }

            .left,
            .right {
                position: absolute;
                height: 100%;
                width: 12px;
                top: 0;
                max-width: 30%;
                background-color: $clSecondary;
                opacity: 0.1;
                transition: opacity 0.3s ease-out;

                &:hover {
                    opacity: 1;
                }

                &::before {
                    content: '';
                    background-image: $arrowRightWhite40Url;
                    background-size: 50%;
                    background-repeat: no-repeat;
                    background-position: center center;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }
            }

            .left {
                left: 0;
                &::before {
                    transform: scaleX(-1);
                }
            }
            .right {
                right: 0;
            }
        }
    }
}

.bg__timeline {
    margin-bottom: 20px;
    > .tl-row {
        display: flex;
        justify-content: stretch;
        width: 100%;

        > .tl-left {
            flex-grow: 0;
            flex-shrink: 0;
            width: $tlLeftWidth;

            > .tl-annotation-actions {
                height: $tlHeaderHeight;
                border-bottom: 1px solid $clDarkGrey;
                box-sizing: border-box;
                padding: 5px 0 5px 5px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                > .button-new-layer {
                    padding: 3px 5px;
                    font-size: 13px;
                    font-family: $fontHeading;
                    font-weight: 600;
                    text-transform: uppercase;
                    line-height: 22px;
                    cursor: pointer;
                    transition: opacity 0.3s ease-out;
                    &:hover {
                        opacity: 0.8;
                    }
                    &::before {
                        content: '+ ';
                        color: white;
                        font-weight: bold;
                        font-size: 20px;
                        vertical-align: bottom;
                    }
                }

                > .delete-layer-button {
                    background-image: $iconTrashUrl;
                    background-size: 22px;
                    width: 30px;
                    height: 40px;
                    background-position: center;
                    background-repeat: no-repeat;
                    opacity: 0.8;
                    transition: opacity 0.3s ease-out;
                    cursor: pointer;

                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }

        > .tl-right {
            border-left: 1px solid $clDark;
            flex-grow: 1;
            position: relative;
            overflow: hidden;
        }
    }
}

 // timeline
.bg__simple-word-cloud {
    font-size: 13px;
    padding: 5px;
    text-align: center;

    > div {
        display: inline-block;
        padding: 2px 5px;
        user-select: none;
    }
}


// Content Annotations Column
.bg__timed-list {
    position: relative;
    max-height: calc(100% - 83px);
    overflow-y: auto;
    border-top: 1px solid $clGreyTint;

    > .timed-list-items {
        max-height: 100%;
        display: flex;
        flex-direction: column;

        > .filter-results {
            background: $clGrey;
            padding: 5px 10px;
            font-size: 12px;
        }

        > .list-container {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow-y: auto;
            max-height: 100%;

            > li {
                cursor: pointer;
                padding: 5px 10px;
                border-bottom: 1px solid $clGreyTint;
                display: flex;
                font-size: 13px;
                line-height: 16px;
                transition: background-color $transition;

                &:hover {
                    background-color: $clGrey;
                    border-right: 3px solid $clGreyTint;
                    padding-right: 7px;
                }

                &.current {
                    background-color: mix($clPrimary, white, 25%);
                    border-right: 3px solid $clPrimary;
                    padding-right: 7px;
                }

                > .start-time {
                    font-size: 11.5px;
                    line-height: 16px;
                    font-weight: bold;
                    padding-right: 10px;
                    white-space: nowrap;
                }

                > span > .highLight-text {
                    background-color: mix($clPrimary, white, 25%);
                    border-bottom: 1px dotted $clPrimary;
                }

                &.current {
                    > span > .highLight-text {
                        background-color: mix($clPrimary, white, 50%);
                    }
                }
            }
        }
    }
}

.bg__word-cloud {
    position: relative;
    max-height: calc(100% - 83px);
    border-top: 1px solid $clGreyTint;
    font-size: 13px;
    padding: 5px;
    text-align: center;
    overflow-y: auto;

    > div {
        display: inline-block;
        padding: 2px 5px;
        margin-right: 5px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color $transition;
        user-select: none;

        &:hover {
            background-color: mix($clPrimary, white, 25%);
        }
    }
}


// Annotation Column
.bg__classification-form {
    > form > .filter {
        padding: 0 0 5px;
        display: flex;
        justify-content: start;
        align-items: center;
        select {
            margin-left: 10px;
            padding: 3px 5px;
        }
        .spacer {
            flex-grow: 2;
        }
        .current-classifications-button {
            padding: 5px 10px;
            background-color: mix($clGrey, $clGreyTint, 50%);
            border-radius: 2px;
            height: 30px;
            min-width: 30px;
            cursor: pointer;
            background-image: $iconHistoryUrl;
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 10px;

            &:hover {
                background-color: mix($clGrey, $clGreyTint, 80%);
            }
        }
    }

    .react-autosuggest__input {
        font-size: 13px;
    }

    .react-autosuggest__suggestion {
        font-size: 12px;
        padding: 2px 10px !important;
        border-bottom: 1px solid #eee;
        position: relative;

        > * .label {
            color: #fff;
            position: absolute;
            right: 5px;
            top: 2px;
            margin-bottom: 0;
            padding: 2px 5px 3px;
            font-size: 11px;
            margin-top: 2px;
            &.label-info {
                background-color: #5bc0de;
            }
            &.label-warning {
                background-color: #f0ad4e;
            }
            &.label-success {
                background-color: #5cb85c;
            }
            &.label-danger {
                background-color: #d9534f;
            }
        }
    }
}

.bg__classification-selector {
    position: absolute;
    left: 5px;
    width: calc(100% - 10px);
    top: 5px;
    box-shadow: 0 3px 10px rgba($clDark, 0.8);
    z-index: 900;
    background: white;
    padding: 5px;
    max-height: calc(100% - 10px);
    overflow-x: hidden;
    overflow-y: auto;
    user-select: none;

    .bg__classification-type {
        font-size: 11px;
        padding: 2px 5px;
        cursor: pointer;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        opacity: 1;
        margin-top: 2px;
        margin-bottom: 2px;

        &:hover {
            opacity: 0.8;
            transform: scale(0.95);
        }

        &.active {
            opacity: 0.75;
            transform: scale(0.88);
        }
    }
}

.bg__comment-form {
    > form {
        display: flex;
        align-items: flex-end;
        flex-direction: column;

        textarea {
            width: 100%;
            min-height: 30px;
            min-width: auto;
            max-width: 100%;
            padding: 10px;
            // overflow is hidden because we use the autosize textarea component
            overflow: hidden;
            font-size: 12px;
        }

        button {
            background-color: $clSecondary;
            color: white;
            font-family: $fontHeading;
            border: 0;
            padding: 6px 15px;
            font-size: 1.2em;
            text-transform: uppercase;
            border-radius: 2px;
            transition: opacity 0.3s ease-out;
            &:hover {
                opacity: 0.8;
            }
        }
    }
}

.bg__link-form {
    > .btn-primary {
        background-color: #468dcb;
        color: #fff;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        cursor: pointer;
        text-transform: uppercase;
        padding: 3px 7px;
        line-height: 20px;
        margin-top: 5px;
        float: right;
    }

    > .filter {
        padding: 0 0 5px;
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 5px;
        border-bottom: 1px solid $clGreyTint;
        select {
            margin-left: 10px;
            border: 1px solid $clMediumGrey;
            border-radius: 4px;
            background: white;
        }
    }

    > .link-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        .link-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 5px;

            &.input-row {
                position: relative;
            }

            strong {
                white-space: nowrap;
            }

            input {
                flex-grow: 1;
                min-width: 40px;
                width: 100%;
                margin: 0 0 0 15px;
                border: 1px solid $clGreyTint;
                border-radius: 2px;
                padding: 0 5px;
                line-height: 30px;
            }

            .clear {
                display: block;
                width: 30px;
                height: 30px;
                position: absolute;
                right: 0px;
                top: 0px;
                &:after {
                    content: '+';
                    color: $clDark;
                    font-weight: bold;
                    transform: rotate(45deg);
                    display: block;
                    font-size: 24px;
                    position: absolute;
                    right: 6px;
                    top: -1px;
                    opacity: 0.6;
                    transition: opacity 0.3s ease-out;
                    cursor: pointer;
                }
                &:hover {
                    &:after {
                        opacity: 1;
                    }
                }
            }
        }
    }

    > .link-search-results {
        width: 100%;
        display: flex;
        flex-direction: column;

        .clear {
            margin-top: 5px;
            cursor: pointer;
            display: block;
            padding: 5px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;

            opacity: 0.7;
            transition: opacity 0.3s ease-out, color 0.3s ease-out;
            &:hover {
                color: $clPrimary;
                opacity: 1;
            }
        }

        .link-result-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            max-height: 35vh;
            min-height: 200px;
            overflow-y: auto;

            .link-result {
                user-select: none;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-evenly;
                border-bottom: 1px solid $clGreyTint;
                padding: 5px 5px 5px 10px;
                border-left: 3px solid $clGreyTint;
                transition: background-color 0.3s ease-out,
                    border-color 0.3s ease-out;
                &:hover {
                    background-color: white;
                    border-left: 3px solid $clPrimary;
                }
            }
        }
    }
}

.bg__metadata-form {
    .card-form {
        width: 100%;
        display: flex;
        flex-direction: column;

        > .filter {
            padding: 0px 0px 5px;
            display: flex;
            justify-content: start;
            align-items: center;
            margin-bottom: 10px;
            border-bottom: 1px solid $clGreyTint;
            select {
                width: 100%;
                margin: 0 10px;
                border-color: $clGreyTint;
                border-radius: 2px;
                background-color: white;
                padding: 3px 5px;
            }
        }

        .card-fields {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            .card-row {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;
                .card-key,
                .card-value {
                    input {
                        min-width: 40px;
                        width: 98%;
                        margin: 2px 0px;
                        padding: 3px;
                        border: 1px solid $clGreyTint;
                        border-radius: 2px;
                        padding: 3px 5px;
                    }
                }
                .card-key {
                    font-weight: bold;
                }
            }
        }

        > .actions {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            .add-property {
                cursor: pointer;
                padding: 3px 7px;
                line-height: 20px;
                font-weight: bold;
                text-transform: uppercase;
                opacity: 0.7;
                transition: opacity 0.3s ease-out, color 0.3s ease-out;
                flex-grow: 2;
                &:hover {
                    color: $clPrimary;
                    opacity: 1;
                }
            }

            .save-button,
            .cancel-button {
                border-radius: 2px;
                border: 0;
                padding: 8px 20px;
                font-size: 14px;
                line-height: 17px;
                text-transform: uppercase;
                cursor: pointer;
                transition: background-color 0.3s ease-out;
                font-family: $fontHeading;
            }

            .save-button {
                background-color: $clPrimary;
                color: white;

                &:hover {
                    background-color: lighten($clPrimary, 10%);
                }
            }

            .cancel-button {
                margin-right: 10px;
                background-color: $clGreyTint;
                color: $clDark;

                &:hover {
                    background-color: lighten($clGreyTint, 50%);
                }
            }
        }
    }
}


.bg__annotation-list {
    position: relative;
    height: calc(100% - #{$resourceViewerTabHeight});

    > .targets {
        position: relative;
        min-height: calc(100% - #{$annotationColumnFilterHeight});
        max-height: calc(100% - #{$annotationColumnFilterHeight});
        overflow-y: auto;
        overflow-x: hidden;

        > .segment-actions {
            padding: 5px 10px;
            display: flex;
            justify-content: space-between;

            > input {
                width: calc(100% - 110px);
                margin-right: 10px;
                font-size: 0.9em;
                padding-left: 5px;
            }

            > .button-new-layer {
                padding: 3px 5px;
                font-size: 13px;
                font-family: $fontHeading;
                font-weight: 600;
                text-transform: uppercase;
                line-height: 22px;
                cursor: pointer;
                transition: opacity 0.3s ease-out;
                &:hover {
                    opacity: 0.8;
                }
                &::before {
                    content: '+ ';
                    color: white;
                    font-weight: bold;
                    font-size: 20px;
                    vertical-align: bottom;
                }
            }
        }
    }
}

/* Filter */
.bg__annotation-filter {
    background: $clGrey;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $annotationColumnFilterHeight;
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
    user-select: none;

    input {
        margin: 0;
        vertical-align: middle;
    }

    label {
        padding-left: 5px;
        line-height: $annotationColumnFilterHeight;
        font-size: 12px;
        font-weight: 600;
    }
}

.bg__target-header {
    border-left: 3px solid $clGreyTint;
    padding: 10px 30px 10px 7px;
    font-size: 14px;
    font-weight: bold;
    font-family: $fontHeading;
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out;

    background-image: $arrowDownDarkUrl;
    background-position: right 9px center;
    background-repeat: no-repeat;
    background-size: 12px;

    &:hover {
        background-color: $clGrey;
    }

    &.active {
        background-color: $clGrey;
        background-image: $arrowUpDarkUrl;
        border-left: 3px solid $clPrimary;
        &:hover {
            background-color: white;
        }
    }

    > .left {
        > .title {
            text-transform: uppercase;
        }
        .fas {
            width: 20px;
            margin-right: 0px;
            padding-right: 10px;
            padding-left: 0;
            box-sizing: border-box;
        }

        .bg__info {
            padding-right: 0;
        }
    }

    > .count {
        float: right;
        vertical-align: middle;
        font-size: 12px;
        line-height: 12px;
        color: white;
        background-color: $clPrimary;
        border-radius: 15px;
        padding: 3px;
        min-width: 18px;
        text-align: center;
    }
}

.bg__single-annotation-target {
    margin-top: 1px;

    .annotations {
        padding-left: 10px;
    }
}

.bg__type-header {
    display: block;
    height: 30px;
    padding-left: 4px;
    font-weight: 600;
    font-size: 13px;
    line-height: 33px;
    cursor: pointer;

    > .title {
        text-transform: capitalize;
        cursor: pointer;
    }

    .fa {
        width: 20px;
        margin-right: 0px;
        padding-right: 0px;
        padding-left: 0;
        box-sizing: border-box;
    }

    .bg__info {
        padding-right: 0;
        &.left {
            padding-right: 0;
        }
    }

    .edit {
        color: $clSecondary;
        position: absolute;
        right: 0;
        padding: 0px 10px;
        width: 30px;
        text-align: center;
        transition: background-color 0.3s ease-out;
        cursor: pointer;
        font-size: 19px;
        &:hover {
            background-color: $clGrey;
        }

        &.active:after {
            transform: rotate(45deg);
        }

        &:after {
            display: inline-block;
            transition: transform 0.3s ease-out;
            content: '+';
        }
    }

    &:hover {
        .edit {
            background-color: $clGrey;
        }
    }
}

.bg__annotation-type {
    border-bottom: 1px solid $clGreyTint;
    min-height: 35px;

    &.has-content {
        padding-bottom: 5px;
        margin-bottom: 5px;
        > .type-header {
            margin-bottom: 5px;
        }
    }

    > .annotation-form {
        background-color: $clGrey;
        padding: 10px;
        font-size: 0.8em;
        margin-bottom: 10px;

        input,
        form {
            margin: 0;
            margin-block-end: 0;
        }
        textarea {
            margin-bottom: 5px;
        }
    }

    > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-left: 15px;

        > li {
            padding: 0;
            margin: 0;
        }

        &.type-view-classification {
            li {
                display: inline-block;
            }
        }
    }
}


.bg__segment-annotations {
    margin-top: 1px;

    > .segments {
        padding-left: 10px;
    }
}

.bg__segment-layer-header {
    border-left: 3px solid $clGreyTint;
    padding: 5px 30px 5px 7px;
    font-size: 14px;
    font-weight: bold;
    font-family: $fontHeading;
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out;

    background-image: $arrowDownDarkUrl;
    background-position: right 9px center;
    background-repeat: no-repeat;
    background-size: 12px;

    &:hover {
        background-color: $clGrey;

        > .delete-layer-button {
            opacity: 0.7;
        }
    }

    &.active {
        background-color: $clGrey;
        background-image: $arrowUpDarkUrl;
        border-left: 3px solid $clSecondary;
        &:hover {
            background-color: white;
        }

        > .left {
            > .bg__editable-text {
                border-bottom-color: $clSecondary;
            }
        }
    }

    > .left {
        > span.bg__editable-text {
            font-weight: 600;
            line-height: 25px;
            max-width: calc(100% - 80px);
        }

        > input.bg__editable-text {
            margin-top: 2px;
            margin-bottom: 1px;
            max-width: calc(100% - 80px);
            width: calc(100% - 80px);
        }

        > .layer-icon {
            width: 20px;
            margin-right: 0;
            padding-right: 10px;
            padding-left: 0;
            box-sizing: border-box;
            display: inline-block;
            height: 30px;
            width: 25px;
            background-image: $iconLayersUrl;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 15px;
            margin-left: -5px;
            vertical-align: top;
        }
    }

    > .delete-layer-button {
        float: right;
        background-image: $iconTrashUrl;
        background-size: 20px;
        width: 30px;
        height: 40px;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.1;
        transition: opacity 0.3s ease-out;
        cursor: pointer;
        margin-top: -5px;

        &:hover {
            opacity: 1;
        }
    }

    > .count {
        margin-top: 5px;
        float: right;
        vertical-align: middle;
        font-size: 12px;
        line-height: 12px;
        color: white;
        background-color: $clSecondary;
        border-radius: 15px;
        padding: 3px;
        min-width: 18px;
        text-align: center;
    }
}

.bg__segment-header {
    border-left: 3px solid transparent;
    padding: 0 30px 0 0;
    font-size: 12px;
    font-family: $fontHeading;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    background-image: $arrowDownDarkUrl;
    background-position: right 9px center;
    background-repeat: no-repeat;
    background-size: 12px;

    transition: background-color 0.3s ease-out, border-color 0.3s ease-out;

    &:hover {
        background-color: $clGrey;

        .delete {
            display: block;
        }
        .title {
            max-width: calc(100% - 90px);
        }
    }

    &.active {
        background-color: $clGrey;
        background-image: $arrowUpDarkUrl;
        &:hover {
            background-color: mix($clGrey, white, 50%);
        }
    }

    &.highlight {
        border-left: 3px solid $clSecondary;
        background-color: mix($clSecondary, white, 15%) !important;
    }

    .title {
        display: inline-block;
        user-select: none;
        cursor: pointer;
        transition: opacity 0.3s ease-out;
        white-space: nowrap;
        max-width: calc(100% - 60px);
        text-overflow: ellipsis;
        overflow: hidden;

        &:hover {
            opacity: 0.8;
        }
    }

    .delete {
        display: none;
        color: $clPrimary;
        font-size: 0;
        float: right;
        width: 30px;
        height: 35px;
        transition: background-color 0.3s ease-out;
        background-image: $iconTrashUrl;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 18px;
        &:hover {
            background-color: rgba($clSecondary, 0.2);
        }
    }

    .form {
        display: inline-block;
        // negative margins keep the segment line height intact
        margin-top: -5px;
        margin-left: -5px;
        margin-bottom: -5px;
        line-height: 20px;
        padding: 5px 0;

        &.spatial {
            input {
                display: inline-block;
                margin-left: 5px;
                margin-right: 5px;
                max-width: 40px;
                border: 1px solid $clGreyTint;
                border-radius: 3px;
                padding: 4px;
                font-size: 13px;

                &:focus {
                    border-bottom: 1px dotted $clPrimary;
                    border-left: 0;
                }

                // hide arrow buttons
                /* Chrome, Safari, Edge, Opera */
                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
                // FireFox
                -moz-appearance: textfield;
            }
        }
    }

    > .count {
        float: right;
        margin-top: 7px;
        font-size: 12px;
        line-height: 12px;
        color: $clDark;
        background-color: $clGrey;
        border-radius: 15px;
        padding: 3px;
        min-width: 18px;
        text-align: center;
    }

    .play-segment {
        margin-right: 2px;
        vertical-align: top;
        padding: 8px;
        font-size: 9px;
        &:hover {
            .fa-play {
                color: $clDarkGrey;
            }
        }
    }
}

.bg__segment {
    position: relative;
    margin-top: 1px;
    padding-left: 4px;

    .annotations {
        padding-left: 6px;
        margin-bottom: 10px;
    }
}

.bg__time-input {
    display: inline-block;
    border: 1px solid $clGreyTint;
    border-radius: 5px;
    background: white;

    input[type='text'] {
        font-size: 0.8rem;
        width: 27px;
        display: inline-block;
        border: 0;
        border-bottom: 1px dotted $clGreyTint;
        text-align: center;
        padding: 5px;
        outline: none;
        min-width: 0;
        margin: 0;
        &:focus {
            border-left: 0;
            border-bottom: 1px dotted $clPrimary;
        }
    }
}

.bg__selection-temporal-form {
    background: $clGrey;
    padding: 5px 10px;
    label {
        font-size: 12px;
    }

    // local changes to time-input
    .bg__time-input {
        margin-left: 5px;
        margin-right: 5px;
    }

    .btn {
        margin: 0;
        vertical-align: top;
        padding: 4px 12px;
        margin-left: 5px;
        text-transform: uppercase;
        font-family: $fontHeading;
    }
}

.bg__selection-spatial-form {
    background: $clGrey;
    padding: 5px 10px;
    label {
        font-size: 12px;
    }

    input {
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
        max-width: 40px;
        border: 1px solid $clGreyTint;
        border-radius: 3px;
        padding: 4px;
        font-size: 13px;

        &:focus {
            border-bottom: 1px dotted $clPrimary;
            border-left: 0;
        }

        // hide arrow buttons
        /* Chrome, Safari, Edge, Opera */
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        // FireFox
        -moz-appearance: textfield;
    }

    .btn {
        margin: 0;
        vertical-align: top;
        padding: 4px 12px;
        margin-left: 5px;
        text-transform: uppercase;
        font-family: $fontHeading;
    }
}


// Annotation Column types
@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


.bg__classification-type {
    display: inline-block;
    background-color: $clGreyTint;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
    min-width: 40px;

    &:hover {
        > .delete {
            display: block;
        }
    }

    &.vocabulary-gtaa {
        background-color: #ccdae7;
    }

    &.vocabulary-dbpedia {
        background-color: #e7ccda;
    }

    &.vocabulary-unesco {
        background-color: #dae7cc;
    }

    > .delete {
        @include deleteButton();
    }
}

@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


.bg__comment-type {
    position: relative;
    padding-right: 10px;
    font-size: 0.9em;
    text-align: right;
    padding-bottom: 5px;

    &:hover {
        > .delete {
            display: block;
        }
    }

    > pre {
        background: white;
        font-family: $fontBody;
        display: block;
        border: 0;
        border-bottom: 1px solid $clGreyTint;
        padding: 5px;
        text-align: left;
        margin-bottom: 3px;
        word-break: break-word;
        white-space: pre-wrap;
    }

    > textarea {
        min-width: 100%;
        min-height: 30px;
        // text-overflow is hidden because we use the autogrow textarea component
        text-overflow: hidden;
    }

    > .user,
    .created {
        text-align: right;
        font-size: 0.8em;
        text-transform: uppercase;
        margin-left: 10px;
    }

    > .delete {
        @include deleteButton();
        right: 9px;
        border-radius: 2px;
    }
}

@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


$linkColor: $clGreyTint;

.bg__link-type {
    position: relative;
    display: inline-block;
    background-color: $linkColor;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
    text-decoration: none;
    color: $clDark;
    margin-right: 5px;
    margin-bottom: 5px;
    min-width: 40px;

    &:hover {
        > .delete {
            display: block;
        }
    }

    transition: background-color 0.3s ease-out;

    &:hover,
    &:focus,
    &:active {
        background-color: mix($linkColor, white, 50%);
        color: $clDark;
        text-decoration: none;
    }

    > .delete {
        @include deleteButton();
    }
}

@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


.bg__metadata-type {
    position: relative;
    padding-right: 10px;
    font-size: 0.9em;
    padding-bottom: 5px;
    text-align: right;

    &:hover {
        > .delete {
            display: block;
        }
    }

    &.edit {
        text-align: left;
        background-color: $clGrey;
        padding: 10px;
        font-size: 0.8em;
        margin-bottom: 10px;

        input,
        form {
            margin: 0;
            margin-block-end: 0;
        }
        textarea {
            margin-bottom: 5px;
        }
    }

    > ul {
        background: white;
        font-family: $fontBody;
        display: block;
        border: 0;
        border-bottom: 1px solid $clGreyTint;
        padding: 5px;
        text-align: left;
        margin-bottom: 3px;
        list-style: none;
        > li {
            display: flex;
            justify-content: stretch;

            > strong {
                min-width: 100px;
                flex-grow: 0;
            }
        }
    }

    > .template,
    > .created {
        text-align: right;
        font-size: 0.8em;
        text-transform: uppercase;
        margin-left: 10px;
    }

    > .delete {
        @include deleteButton();
        right: 9px;
        border-radius: 2px;
    }
}


// Annotation Popup
.bg__annotation-popup {
    z-index: 1000;
    position: fixed;
    background: white;
    box-shadow: 0 4px 20px rgba(black, 0.35);
    transition: height 0.3s ease-out;

    .bg__annotation-type {
        padding-left: 10px;

        & > .annotation-form {
            margin-left: -10px;
        }
    }

    .column-content {
        height: calc(100% - #{$resourceViewerPopupHeaderHeight});

        .annotations {
            position: relative;
            overflow-y: auto;
            overflow-x: hidden;

            max-height: calc(100% - #{$annotationColumnFilterHeight});
            height: calc(100% - #{$annotationColumnFilterHeight});
        }
    }
}


.bg__aggregation-box { /* AggregationBox.jsx */

	margin-bottom: 30px;

	/* hamburger menu containing extra options */
	.bg__agb__facet-header {
		border-bottom: 1px solid $clGreyTint;
		background-color: $clGrey;
		border-radius: 2px 2px 0 0;
		position: relative;
		color: black;
		&:hover {
			background-color: mix($clGrey, $clGreyTint, 50%);
		}

		.bg__agb__facet-title-bar {
			padding: 8px 10px 9px 10px;
			cursor: pointer;

			.bg__agb__menu-icon {
				position: absolute;
				right: 0;
				top: 2px;
				padding: 7px 6px;
				margin: 0;
				font-weight: bold;
				font-size: 16px;
			}

			.bg__agb__facet-title {
				color: black;
				font-size: 16px;
				font-family: $fontHeading;
				overflow: hidden;
				font-weight: normal;
				display: inline-block;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: calc(100% - 5px);

				.fa-info-circle {
					font-size: 13px;
					padding-top: 6px;
					margin-left: 0px;
					margin-right: 6px;
				}
			}
		}

		ul {
			display: none;
		}

		input:checked ~ ul {
			border-top: 1px solid #d3d3d3;
			display: flex;
			width: 100%;
		}

		.bg__agb__extra-options {
			display: flex;
			color: black;
			padding: 10px 5px;
			background-color: $clGreyTint;

			.bg__agb__exclude-btn {
				cursor: pointer;
				font-size: 13px;
				font-weight: 400px;
				margin-top: 7px;
				margin-right: 7px;

				& > input {
					vertical-align: middle;
				}
				& > label {
					font-weight: normal;
					margin:0px;
					text-transform: uppercase;
					font-family: $fontHeading;
					&:hover {
						color: $clPrimary;
					}
				}
			}
			.bg__agb__sort-btn-wrapper {
				flex-grow: 2;
				display: flex;
				margin-top: 3px;
				flex-direction: row-reverse;
				.bg__agb__sort-btn {
					cursor: pointer;
					color: $clDarkGrey;
					padding: 3px 5px;
					.bg__agb__sort-active {
						color: black;
						&:hover {
							opacity: 0.7;
						}
					}
					&:hover {
						color: black;
					}
				}
			}
		}
		label {
			display: inline;
		}
		.bg__agb__remove-button {
			border-left: 1px solid $clDarkGrey;
			padding: 2px 7px;
			background-color: transparent;
			text-transform: uppercase;

			&:hover {
				color: $clPrimary;
			}
		}
	}

	/* search box on top of the list of facets*/
	.bg__agb__search-box {
	  border: 1px solid #f3f3f3;
	  display: flex;
	  justify-content: space-between;

	  .bg__agb__search-input {
	    background-color: #fdfdfd;
	    border: 0;
	    border-left-width: 2px;
	    border-radius: 2px;
	    margin-bottom: 0;
        min-width: 100px;
	    outline: 0;
	    padding: 6px 10px;
		width: 60%;

	    &::placeholder {
	      font-size: 12px;
	    }
	  }
	  .bg__agb__search-count {
	    color: #666;
	    font-size: 80%;
	    padding-top: 10px;
		margin-right: 5px;
		text-align: right;
	  }
	}

	/* ul containing all sorted facets */
	.bg__agb__facet-list {
		margin: 0;
		max-height: 560px;
		overflow: auto;
		padding-left: 0;

		.bg__agb__facet-list-item {
			transition: background-color $transition;
			background-color: $clGrey;
			word-wrap: break-word;
			list-style-type: none;
			padding: 4px 6px 4px 8px;
			cursor: pointer;
			color: $list-item-color;
			position: relative;
			margin: 0;

			&.disabled {
				padding-left: 26px;
				cursor: default;
			}
			.elem-label {
				@include ellipses($widthSubst : '70px');
			}

			&.selected {
				background-color: mix($clPrimary, $clGrey, 25%);
				border-left: 3px solid $clPrimary;
				font-weight: 600;
				&:hover {
					background-color: mix(
						mix($clPrimary, $clGrey, 25%),
						$clGrey,
						50%
					);
					.bg__agb__checkbox {
						background-color: rgba($clPrimary, 0.4);
					}
				}
				span {
					font-weight: normal;
				}
				.bg__agb__checkbox {
					background-color: $clPrimary;
					border-color: darken($clPrimary, 10%);
				}
			}

			&:hover:not(.disabled) {
				background-color: mix($clGrey, $clGreyTint, 50%);
				.bg__agb__checkbox {
					background-color: $clPrimary;
					border-color: darken($clPrimary, 10%);
				}
			}

			// Make color red, to indicate elements will be excluded
			&.exclude {
				&.selected {
					border-color: $clRed;
					background-color: mix($clRed, $clGrey, 25%);
					&:hover {
						background-color: mix(
							mix($clRed, $clGrey, 25%),
							$clGrey,
							50%
						);
						.bg__agb__checkbox {
							background-color: rgba($clRed, 0.4);
						}
					}
					.bg__agb__checkbox {
						background-color: $clRed;
						border-color: darken($clRed, 10%);
					}
				}
				&:hover {
					.bg__agb__checkbox {
						background-color: $clRed;
						border-color: darken($clRed, 10%);
					}
				}
			}

			&.exclude {
			}

			.bg__agb__checkbox {
				transition: background-color $transition;
				display: inline-block;
				width: 12px;
				height: 12px;
				border: 1px solid $clGreyTint;
				margin-right: 6px;
				margin-top: 3px;
				vertical-align: top;
			}
		}
	}

	/* Show more/less button */
	.bg__agb__switch-view {
		background-color: $clGrey;
		border-radius: 0 0 2px 2px;
		color: $clPrimary;
		display: block;
		border-top: 1px solid mix($clGrey, $clGreyTint, 50%);
		padding: 5px 8px 5px 5px;
		text-align: right;
		cursor: pointer;
		text-decoration: none;
		&:hover {
			color: darken($clPrimary, 8%);
		}

		& > .switchViewText {
			font-family: $fontHeading;
			font-size: 12px;
			padding-left: 1rem;
			text-transform: uppercase;
		}
		& > .switchIcon {
			font-size: 1rem;
			margin-left: 0.5rem;
		}
	}

	/* count per facet */
	.bg__agb__count {
		background-color: white;
		font-size: 0.9em;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 4px;
		min-width: 15px;
		vertical-align: middle;
		font-family: $fontHeading;
		float: right;
	}


}
.bg__aggregation-creator {} /* AggregationCreator.jsx */
.bg__aggregation-list {
	font-size: 14px;
	.bg__agl__tab-new {
		margin-bottom: 5px;
		& > button {
			color: $clPrimary;
			background-color: white;
			transition: background-color $transition;
			&:hover {
				color: darken($clPrimary, 8%);
			}
		}
	}

	/* for the selected facets above the AggregationBoxes */

	.bg__agl__selected-facets {
		margin-bottom: 10px;

		.bg__agl__selected-item {
			border: 1px solid $clGreyTint;
			border-radius: 2px;
			border-left: 3px solid $clPrimary;
			margin-bottom: 3px;
			padding: 6px 2px 6px 1rem;
			word-wrap: break-word;
			text-overflow: ellipsis;

			.elem-label {
				@include ellipses($widthSubst : '70px');
			}

			.fa-times {
				cursor: pointer;
				float: right;
				padding: 4px 5px;
				&:hover {
					opacity: 0.8;
				}
			}
			.bg__agl__count {
				margin-right: 2px;
				background-color: $clGrey;
				font-size: 0.9em;
				border-radius: 25px;
				display: inline-block;
				padding: 2px 4px;
				min-width: 15px;
				vertical-align: middle;
				font-family: $fontHeading;
				float: right;
			}

			&.exclude {
				border-left: 3px solid $clRed;
			}
		}
	}

	/* for empty facets blocks */
	.bg__agl__empty-facet-block {
		margin-bottom: 15px;
		background-color: $clGrey;
		color: black;
		border: 1px solid $clGreyTint;
		border-radius: 0;

		.bg__agl__title-wrapper {
			display: flex;
			padding: 8px 10px 9px;
			.fa-info-circle {
				padding-top:6px;
				font-size: 13px;
			}

			.bg__agl__facet-title {
				padding:0px 5px;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 16px;
				font-family: $fontHeading;
				overflow: hidden;
				font-weight: normal;
			}

			.fa-times {
				padding-top:6px;
				cursor: pointer;
			}
		}
	}
}


.bg__single-search-collection-bar {
	background-image: $iconDataSetUrl;
	background-repeat: no-repeat;
	background-position: 5px center;
	background-size: 18px;
	padding-left: 35px;
	min-height: 40px;
	margin-bottom: 20px;
	display: flex;

	// .btn-default {
	// 	border: 0;
	// 	background-color: $clGrey;
	// 	color: black;
	// 	&:hover {
	// 		background-color: darken($clGrey, 4%);
	// 	}
	// }

	// .btn-primary {
	// 	margin-top: 2px;
	// }

	.bg__scb__active {
		display: flex;
		justify-content: stretch;
		width: 100%;
		@media screen and (max-width: $break-small) {
			flex-wrap: wrap;
		}

		.bg__scb__collection-info {
			flex-grow: 1;
			h2 {
				font-size: 1.2em;
				line-height: 30px;
				display: inline-block;
				margin: 0;
				cursor: pointer;
				background-image: $arrowDownDarkUrl;
				background-position: right 10px center;
				background-repeat: no-repeat;
				padding: 3px 30px 3px 5px;

				&:hover {
					background-color: $clGrey;
				}
			}
		}
		.bg__scb__buttons {
			flex-grow: 1;
			button {
				margin-top: 2px;
				float: right;
				margin-left: 15px;
				border:0;
			}
		}
	}

	// .bg__scb__link {
	// 	display: inline-block;
	// 	font-size: 0;
	// 	color: white;
	// 	border-radius: 2px;
	// 	min-width: 30px;
	// 	height: 28px;
	// 	vertical-align: top;
	// 	background-image: $iconLinkUrl;
	// 	background-position: center;
	// 	background-repeat: no-repeat;
	// 	margin-left: 10px;
	// 	margin-top: 3px;
	// 	transition: opacity $transition;
	// 	background-size: 18px;
	// 	opacity: 0.7;
	// 	&:hover {
	// 		opacity: 1.0;
	// 	}
	// }

	.bg__scb__count {
		margin-top: 5px;
		margin-left: 5px;
		background-color: $clGrey;
		font-size: 1em;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		vertical-align: top;
		font-family: $fontHeading;
	}
}


.bg__dps__date-picker-selector {
	display: flex;
	input[type=text]{
		max-width: 100px;
		min-width: auto;
		border-radius: 5px;
	}

	i{
		pointer-events: none;
		display: inline-block;
		width: 30px;
		background-color: yellow;
		line-height: 34px;
	}

	&>div{
		margin-left: 10px;
		margin-right: 5px;
	}

	.react-datepicker{
		font-size: 13px;
		min-height: 21.5rem;
	    height: auto;
		.react-datepicker__navigation{
			// somehow the prev/next buttons don't render correctly
			// apply some quick fixes
			font-size: 0;
			height: 10px;
			margin-top: 6px;
			background-color: transparent;
		}

		.react-datepicker__month-container{
			height: auto;
		}

		.react-datepicker__day--outside-month{
			color: $clDarkGrey;
		}
	}
	.remove-date-filter {
		cursor: pointer;
		width: 20px;

		i {
			background-color: transparent;
		}
	}
} /* DateRangeSelector.jsx */
.bg__drs__date-range-select {
	display: flex;
} /* DateRangeSelector.jsx */

.bg__field-category-creator {
	* {
		border: 0;
		margin: 0;
		padding: 0;
	}

	input {
		box-sizing: border-box;
		height: 3.3rem;
		margin: 6px 0;
		padding: 2px 10px;
	}

	.bg__fcc__search-box {
		width: 100%;
	}

	.bg__fcc__selection-wrapper {
		border: 1px solid #fefefe;
		margin-bottom: 10px;

		select {
			width: 50%;

			&#source-opts {
				border: 1px solid #dedede;
				position: relative;
			}

			&#selected-opts {
				border: 1px solid #dedede;
				position: relative;
			}

			option {
				cursor: pointer;
				align-items: center;
				border-bottom: 1px solid $clGreyTint;
				font-size: 12px;
				padding: 10px;
				&:hover {
					background-color: rgba(153, 153, 153, 0.26);
				}

				&.bg__fcc__left {
					&:after {
						color: #333;
						content: " ▶ ";
						float:right;
					}
				}

				&.bg__fcc__right {
					padding-left: 10px;

					&:before {
						color: #333;
						content: " ◀ ";
						margin-right: 10px;
						display: inline-block;
					}
				}
			}

		}
	}

	.bg__fcc__name {
		width: 80%;
	}

	button {
		background-color: $clPrimary;
		color: #fff;
		height: 3.3rem;
		margin: 6px 0;
		padding: 2px 10px;
		width: calc(20% - 10px);
		margin-left: 10px;
		font-family: $fontHeading;
		text-transform: uppercase;
		border-radius: 2px;
		&:hover {
			background-color: darken($clPrimary, 8%);
		}
	}

	.bg__fcc__validation-error {
		background-color: #f26c50;
		color: #fff;
		font-size: 12px;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

}
.bg__field-category-selector {
	width: 100%;
}

.bg__fcs__option-create {
	margin-top: 8px;
	padding: 0 5px 5px 10px;
	button{
		text-transform: uppercase;
		font-family: $fontHeading;
		font-size: 0.9em;
	}
}

.bg__field-category-creator {
  select {
    height: 200px;
  }
  label {
    margin: 15px 0px 5px 0px;
    &:first-child {
      margin: 0px 0px 5px 0px;
    }
  }
}

.bg__highlight-overview {
	table > tbody > tr > td {
		padding-left:10px;
	}

	.highLightText {
		color: $highlight-color-snippets;
		font-weight: bold;
		font-size: 97%;
	}
}

.bg__metadata-table {
	.table {
		table-layout:fixed;
		word-wrap: break-word;
		tr {
			td {
				white-space:pre-wrap;
				&:first-child {
					width: $metadata-table-first-column-width;
				}
			}
		}
		label {
			color: $metadata-table-label-color;
		}
		.bg__mdt__id {}
		.bg__mdt__index {}
		.bg__mdt__title {}
		.bg__mdt__date {}
		.bg__mdt__description {}
		.bg__mdt__source {}
		.bg__mdt__poster {}
		.bg__mdt__special-props {}
		.bg__mdt__search-refs {}
		.bg__mdt__raw-data {
			height: 400px;
			overflow:auto;
		}
	}
}

.bg__paging {}

//media queries to handle paging issues when too many page numbers are displayed.
@media screen and (max-width: 662px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 5):not(.next-last-page) {
			display:none;
		}
	}
}
@media screen and (max-width: 710px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 6):not(.next-last-page) {
			display:none;
		}
	}
}
@media screen and (max-width: 1201px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 7):not(.next-last-page) {
			display:none;
		}
	}
}
@media screen and (min-width: 1202px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 10):not(.next-last-page) {
			display:none;
		}
	}
}

.bg__query-factory {
	padding: 0px 20px;
	.bg__qf__scrollwindow {
		margin-top:10px;
		overflow-x: auto;
		.bg__qf__grid {
			width: max-content;
			.bg__qf__cell {
				background-color: $subdued-bg;
				border-radius: $border-radius;
				display:inline-block;
				float:left;
				overflow-y: auto;
				overflow-x: hidden;
				margin-right: 20px;
				padding: 3px 8px;
				width:600px;

				.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
					background-color: $subdued-bg;
				}
			}
		}
	}
}
.bg__query-builder {
	clear:both;

	.separator {
		height: 1em;
	}

	.bg__tooltip {
		width: 400px;
	}

	.bg__qb__breadcrumbs {
		padding: 0px 10px 10px 10px;
		text-align: center;

		.bg__qb__crumb {
			display: inline-block;
			margin: 0px 5px 5px 0px;
			i {
				cursor: pointer;
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	.bg__qb__graph > button {
		float: right;
		position: relative;
		right: 12px;
		z-index: 10;
	}
	.bg__clear-query-btn {
		margin-left: 12px;
	}

	.bg__qb__count {
		margin-top: 5px;
		background-color: $clGrey;
		font-size: 14px;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		vertical-align: top;
		font-family: $fontHeading;
	}

	.bg__qb__total-count {
		font-family: $fontHeading;
		font-size: 16px;
		line-height: 20px;
		margin-top: 5px;
		display: inline-block;
		.bg__qb__count {
			background-color: $clPrimary;
			color: white;
			margin-top: 0;
			vertical-align: middle;
			margin-left: 10px;
		}
	}

	.bg__qb__lock-facets {
			font-size: 14px;

			> label {
			    margin-right: 5px;
			}

			> input {
			    vertical-align: middle;
                margin: 3px 3px 4px 4px;
			}
	}

	.bg__qb__query-row {
		display: flex;
		justify-content: stretch;
		margin-bottom: 10px;

		.bg__qb__selector-holder {
		    flex-grow: 1;
			display: flex;

			.bg__qb__tt {
				margin: 0 10px;
				line-height: 35px;
			}

			.bg__qb__in-label {
				margin: 0 10px;
				line-height: 35px;
			}
		}
	}

	.bg__qb__date-count {
		margin: 7px 10px 0 5px;
		background-color: $clGreyTint;
		font-size: 11px;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		line-height: 17px;
		vertical-align: top;
		font-family: $fontHeading;
	}

	.bg__qb__result-dates {
		border-radius: 5px;
		border: 1px solid $clGreyTint;
		background-color: $clGrey;
		margin-bottom: 20px;

		.bg__qb__result-dates-header {
			font-size: 14px;
			display: flex;
			flex-wrap: wrap;
			line-height: 34px;
			border-bottom: 1px solid $clGreyTint;

			.__react_component_tooltip {
				line-height: 16px;
			}

			.bg__qb__date-field {
				display: flex;
				padding: 8px 0px 8px 7px;
				& > div {
					margin-right: 10px;
				}

				i {
					display: inline-block;
					width: 20px;
					line-height: 34px;
				}
				& > i {
					text-align: center;
					margin-right: 10px;
				}

				.bg__dfs__date-field-selector {
					position: relative;

					&:after {
						color:#aaa;
						content:"\f073";
						font-family: "Font Awesome 5 Free";
						font-size: 16px;
						padding:0 0 2px;
						position:absolute;
						pointer-events:none;
						right:8px;
						top:0;
					}
					&:before {
						background:#fff;
						content:'';
						display:block;
						height:25px;
						position:absolute;
						pointer-events:none;
						right:4px;
						top:6px;
						width:23px;
					}

					select{
						font-size: 14px;
					}
				}
			}

			.bg__qb__keyword-field {
				display: flex;
				flex-wrap: nowrap;
				padding: 8px 0px 8px 7px;
				& > div {
					margin-right: 10px;
				}

				i {
					display: inline-block;
					width: 20px;
					line-height: 34px;
				}
				& > i {
					text-align: center;
					margin-right: 10px;
				}

				.bg__kfs__keyword-field-selector {
					position: relative;
					flex-grow: 3;

					select{
					background-color: white;
						font-size: 14px;
					}
				}

                .bg__kfs__keyword-limit{
				    display: flex;
				    width: 100%;
				    flex-wrap: nowrap;
                    margin-right: 10px;
                    overflow: hidden;
                    border-left: 1px solid $clGreyTint;

                    .bg__kfs__ms_input {
					  flex-grow: 1;
                      margin-left: 10px;
                      width: 70px;
                      font-size: 14px;
                    }

                    .bg__kfs__ms_label {
                      margin-left: 10px;
                    }
                }
			}
			.bg__qb__date-range {
				flex-grow: 1;
				border-left: 1px solid $clGreyTint;
				line-height: 34px;
				padding: 5px 10px 5px 10px;
				display: flex;
				margin: 3px 0;

				input {
					background-color: white;
					padding: 0.375rem 0.4rem;
					width: 79px;
				}

				.bg__qb__date-range-stats {
					margin-left: 5px;
				}
			}

			& > button {
				height: 28px;
				line-height: 16px;
				padding: 5px 10px;
				box-sizing: border-box;
				margin: 10px;
				background-color: $clGreyTint;
				transition: background-color $transition;
				&:hover {
					background-color: darken($clGreyTint, 5%);
				}
			}
		}

		.bg__qb__result-dates-content {
			background-color: mix($clGreyTint, $clGrey, 50%);
			.bg__qb__date-graph {
				padding: 20px 10px 0 10px;
				position: relative;
    			border-bottom: 1px solid $clGreyTint;
    			margin-bottom: 10px;
				.page-loader {
					padding-top: 10%;
					position: absolute;
				}
			}
		}

		input[type="text"] {
			margin-bottom: 0;
		}
	}
}

$font-size: 20px;
$padding-bottom: 12px;
$font-weight: bold;

.bg__query-editor {

	form {
		input {
			padding: 4px 8px 8px;
			width:300px;
		}
		.btn {
			font-size:1rem;
		}
	}

	.bg__qed__table {
		padding: 15px;
	}

	.bg__qed__query-params {
		padding: 20px;
		background-color: mix($clGreyTint, $clGrey, 50%);
		border: 1px solid $clGreyTint;
		margin-bottom:10px;
		margin-top:10px;
	}

	.bg__qed__validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

}
.bg__quick-viewer { /* QuickViewer.jsx */

    > .actions {
        padding-top: 10px;
        .btn {
            padding-left: 20px;
            margin: 0 10px 0 0;

            &.link {
                background-image: $iconLinkUrl;
                background-repeat: no-repeat;
                background-position: left;
            }
        }
    }
	> .prop-name {
		font-weight: bold;
	}

}
.bg__quick-entity-viewer { /* QuickEntityViewer.jsx */

     > .actions {
        padding-top: 10px;
    }

	> .prop-name {
		font-weight: bold;
	}

}

.bg__search-hit {
	border-bottom: 1px solid $clGreyTint;
	margin: 0 0 0 5px;
	padding: 0px;
	padding-right: 10px;
	position: relative;
	display:block;
	min-height: 50px;

	.bg__sh__quickview {
		position: absolute;
		bottom: 10px;
		right: 10px;
		button {
			transition: background-color;
			height: 35px;
			width: 35px;
			border: 1px solid $clGreyTint;
			background-color: $clGrey;
			background-color: darken($clGrey, 4%);
		}
	}

	.bg__sh__select {
		@include checkbox();
		margin-top: 25px;
		input[type="checkbox"] + label span {
			border-color: darken($clGreyTint, 8%);
		}
	}

	.bg__sh__bookmarked {
		background-color: $clSecondary;
		border: 0;
		color: white;
		text-align: center;
		width: 35px;
		height: 35px;
		position: absolute;
		right: 0;
		top: 0;
		i {
			line-height: 35px;
		}
	}

	&.fragment {
		border-right: 1px solid $highlight-color;
		margin: 5px;
		padding: $default-margin;
	}

	&.visitedItem {
		opacity: 0.9;
	}

	.bg__sh__visited-icon{
		background-image: $iconTimeUrl;
		position: absolute;
		right: 50px;
		bottom: 10px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 15px;
		width: 35px;
		height: 35px;
	}

	&.bookmarked {
		border-left: 3px solid $clSecondary;
		background-color: mix(white, $clSecondary, 90%);
		margin-left: 2px;
		.bg__sh__select input[type="checkbox"] + label span {
			border-color: mix(white, $clSecondary, 60%);
			background-color: mix(white, $clSecondary, 95%);
		}
		.bg__sh__quickview {
			button {
				background-color: $clGreyTint;
				&:hover {
					background-color: darken($clGreyTint, 4%);
				}
			}
		}
	}

	.__react_component_tooltip {
		text-align: left;
		ul {
			padding-left: 20px;
		}
	}
}

.bg__search-snippet {
	display: flex;
	padding: 20px 10px 20px 10px;
	cursor: pointer;
	&:hover {
		.bg__ss__title {
			text-decoration: underline;
		}
	}

	.bg__ss__poster {
		padding-right: 20px;
		img {
			width: 200px;
			max-width: 200px;
			max-height: 200px;
		}
	}

	.bg__ss__media-body {

		.bg__ss__title {
			margin-top: 0;
			padding-top: 0;
			font-size: 20px;
			line-height: 1.35em;

			.bg__ss__icon-access{
				span{
					color: black;
					border: 0;
					margin-left: 5px;
					padding-left: 10px;
					border-left: 1px solid black;
					border-radius: 0;
				}
			}
		}

		.highLightText {
			color: $highlight-color-snippets;
			font-weight: bold;
			font-size: 97%;
		}

		.fieldNameText {
		    color: black;
			font-weight: bold;
			font-size: 97%;
		}

		.bg__ss__snippet-description {
			cursor: pointer;
			font-style: italic;
			font-size: 14px;
		}

		.bg__ss__info {
			display: flex;
			margin: 10px 0;
			font-size: 12px;
			line-height: 26px;
			color: lighten(black, 50%);


			& > div {
				margin-right: 10px;
				i {
					font-size: 13px;
					display: inline-block;
					margin-right: 10px;
					font-style: normal;
					color: black;
				}
			}
		}

		.bg__ss__icon-type {
			span {
				font-size: 18px;
				padding: 0.2em 0.25em 0.15em 0.25em;
			}
		}

		.label-success {
			background-color: $clDarkGrey;
			color: white;
		}

		.bg__ss__fragment {
			color: dimgray;
			font-style: italic;
			margin-top: 5px;
		}
	}
}

.bg__search-term-input {
  display: flex;
  flex-grow: 1;

  	.link-more-info {
		display: inline-block;
		font-size: 0;
		color: white;
		border-radius: 2px;
		min-width: 30px;
		height: 28px;
		background-image: $iconLinkUrl;
		background-position: center;
		background-repeat: no-repeat;
		margin-left: 10px;
		transition: opacity $transition;
		opacity: 0.7;
		&:hover {
			opacity: 1.0;
		}
	}

	.entity-input {
	    display: block;
	    width: 100%;
	}

	.entity-autosuggest {
	    display: block;
	    width: 100%;
	}

	.entity-display {
	    display: block;
	    width: 100%;
	}

  & > span {
    cursor: pointer;
    background-color: $clPrimary;
    color: white;
    border-radius: 0 5px 5px 0;
    display: inline-block;
    width: 50px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    & > i,
    & > span {
      line-height: 38px;
    }
  }

  .react-autosuggest__input {
    height: calc(1.5em + 0.75rem + 2px);
    border-radius: 5px 0 0 5px;
    color: black;
    width: 100%;
  }

  .react-autosuggest__container {
    flex-grow: 1;
    width: 100%;
  }

  .react-autosuggest__suggestions-container--open {
      display:block;
      border: 1px solid #ccc;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      font-weight: 300;
      font-size: 16px;
      max-height: 31rem;
      position: relative;
      width: 100%;
      z-index: 2;

      ul.react-autosuggest__suggestions-list {
        li.react-autosuggest__suggestion {
            height: 38px;
          cursor: pointer;
        }
      }
  }

}




.bg__simple-paging {
	float:left;
	margin: 0px 10px 20px 0px;
	&> .checkbox, button {
		margin-right:10px;
	}
	.checkbox {
		display: inline-block;
	}
}
.bg__sorting {} /* Sorting.jsx */

.bg__md-completeness-chart {
	margin-top: 30px;
	@include lineChartBase();

	.bg__mdc__no-data {
		margin-top: 12px;
	}

	.bg__mdc__percentage {
		font-size: 90%;
		font-weight: bold;
		margin-right: 12px;

	}
}
.bg__query-comparison-histogram {
    @include chartBase();
    position: relative;
    .recharts-responsive-container {
        margin-top: 20px
    }
    .page-loader {
        padding-top: 10%;
        position: absolute;
        text-align: center;
    }

.date_unit_selector {
    margin: auto;
    width: 100px;
}
.ms_toggle_btns
{
      display: flex;
      .ms_toggle_btn_1
      {
      display: flex;

        > label {
          font-size: 13px;
          font-weight: normal;
        }

          .checkbox-toggle-round {
        &:checked+label:after {
          margin-left:68px;
          font-size: 13px;
        }
        }
      }


      .ms_toggle_btn_2
      {
      display: flex;
      width: 150px;

          .checkbox-toggle-round {
        width: 150px;

        &+label {
          font-size: 13px;
          font-weight: normal;
           width: 150px;
        }
        &:checked+label:after {
          margin-left:117px;
          font-size: 13px;
        }
        }
      }
      }
}
.bg__custom-tooltip {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, .8);
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 280px;
    padding: 1rem 3rem;
    text-transform: capitalize;

    p {
        .rightAlign {
            float: right;
            min-width: 120px;
            text-align: right;

            .bg__tooltip-spaceBetween {
                justify-content: space-between;
            }
        }
    }
}
.bg__histogram {
	@include chartBase();

	.recharts-responsive-container {
		margin-top: 20px
	}
}
.bg__query-comparison-line-chart {
	@include lineChartBase();
	position: relative;

	.recharts-responsive-container {
		margin-top: 20px;
	}
	.page-loader {
		padding-top: 10%;
		position: absolute;
	}

.date_unit_selector {
    margin: auto;
    width: 100px;
}

.ms_toggle_btns
{
      display: flex;
      .ms_toggle_btn_1
      {
      display: flex;

        > label {
          font-size: 13px;
          font-weight: normal;
        }

          .checkbox-toggle-round {
        &:checked+label:after {
          margin-left:68px;
          font-size: 13px;
        }
        }
      }


      .ms_toggle_btn_2
      {
      display: flex;
      width: 150px;

          .checkbox-toggle-round {
        width: 150px;

        &+label {
          font-size: 13px;
          font-weight: normal;
           width: 150px;
        }
        &:checked+label:after {
          margin-left:117px;
          font-size: 13px;
        }
        }
      }
      }

}
.bg__query-info-block {
	display: flex;
	flex-wrap: wrap;
	font-family: Maven Pro,sans-serif;
	margin: 4rem 0;
	padding: 1rem 0;
	text-transform: capitalize;

	label {
		font-weight: normal;
		text-transform: uppercase;
	}

	.bg__qib__block {
		background-color: #faf6f6;
		border-radius: 5px;
		border: 1px solid #eee3e1;
		display: flex;
		flex: 2 2 30em;
		flex-wrap: wrap;
		margin: 10px 0 0 10px;

		.bg__qib__query {
			background-color: #faf6f6;
			color: black;
			overflow-y: auto;
			padding:10px;
			vertical-align: top;

			h4 {
				margin-bottom: 20px;
				padding:0;
				text-align: center;
			}
			ul {
				padding-left: 20px;

				li {
					color: #2D343A;
					list-style-type: none;
				}
			}

		}

		.bg__qib__error {
			align-self: flex-end;
			background-color: #f26c50;
			color: white;
			padding: 6px 10px;
			width: 100%;
		}
		@media screen and (min-width: $break-medium-result-list) {
			max-width: 48%;
		}
		@media screen and (min-width: $break-large) {
			max-width: 32%;
		}
	}

	.bg__qib__value {
	    display: inline-block;
	    width:100%;

	    label {
	    	width:40%;
	    }
	    span {
			border-left: 1px solid grey;
	    	float:right;
    		padding-left: 5px;
			width:60%;
	    }
	}

	.bg__qib__count {
		background-color: #fff;
		border-radius: 25px;
		display: inline-block;
		font-family: Maven Pro,sans-serif;
	    font-size: .9em;
		float: right;
		min-width: 15px;
	    padding: 2px 4px;
	    vertical-align: middle;
	}

	.bg__qib__color {
		border: 1px solid #eee3e1;
		display: inline-block;
		height: 12px;
		margin-left:5px;
		width: 12px;
	}
}
.bg__query-line-chart {
	@include lineChartBase();
}
.bg__query-timeline-plotter {

  margin-bottom: 8rem;
  position: relative;

  .ms_toggle_btn .checkbox-toggle-round {
    &:checked+label:after {
      margin-left:68px;
    }
    &+ label {
      font-size: 13px;
      font-weight: normal;
      width: 100px;
    }
  }

  > .switch-view-btn {
    position: absolute;
    right: 0;
    z-index: 999;
    color: #fff;
    background-color: #468dcb;
    border-color: #3680c1;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .bg__project-queries-table {
    margin-bottom: 3rem;
  }

}
.bg__info {
    display: inline-block;
    color: mix($clMediumGrey, $clDark, 80%);
    padding-left: 7px;
    font-weight: normal !important;
    transition: color $transition;

    &:hover {
        color: mix($clMediumGrey, $clDark, 50%);
    }

    > .fas {
        font-size: 13px;
    }

    &.primary {
        color: $clPrimary;
        &:hover {
            color: rgba($clPrimary, 0.8);
        }
    }
    &.secondary {
        color: $clSecondary;
        &:hover {
            color: rgba($clSecondary, 0.8);
        }
    }
    &.black {
        color: $clDark;
        &:hover {
            color: rgba($clDark, 0.8);
        }
    }
    &.grey {
        color: $clDarkGrey;
    }
    &.white {
        color: white;
    }

    // if placed left of an title, change padding
    &.left {
        padding-left: 0;
        padding-right: 7px;
    }
}

.bg__loading {
    font-size: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(white, 0.4);
    z-index: 9999;
    pointer-events: none;
}

.bg__spinner, .bg__spinner:after {
    border-radius: 50%;
    width: 80px;
    height: 80px;
}
.bg__spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    margin-left: -40px;
    border: 5px solid rgba($clDark, 0.5);
    border-left: 5px solid rgba($clDark, 0.1);
    transform: translateZ(0);
    animation: loadingSpin 0.7s infinite linear,
        loadingColors 5.1s infinite linear;
}

@keyframes loadingSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loadingColors {
    0% {
        border-color: rgba($clDark, 0.5);
        border-left-color: rgba($clDark, 0.1);
    }
    33% {
        border-color: rgba($clPrimary, 0.5);
        border-left-color: rgba($clPrimary, 0.1);
    }
    66% {
        border-color: rgba($clSecondary, 0.5);
        border-left-color: rgba($clSecondary, 0.1);
    }
}

/* OTHER NICE SPINNER FROM FRONT-WISE (removed from _mixins)
@keyframes spinner {
    to {transform: rotate(360deg);}
}

.spinner {
    position: fixed; // Sit on top of the page content
    width: 100%; // Full width (cover the whole page)
    height: 100%; // Full height (cover the whole page)
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 22334; //Specify a stack order in case you're using a different order for other elements
    cursor: pointer; // Add a pointer on hover
    opacity: .6;

    &::after {
        content: '';
        box-sizing: border-box;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 45px;
        height: 45px;
        margin-top: -10px;
        margin-left: -10px;
        border-radius: 50%;
        border: 8px solid #ccc;
        border-top-color: #333;
        animation: spinner .6s linear infinite;
    }
}*/

.bg__project-list {
    display: inline-block;
    position: relative;
    margin-bottom: 0;

    > .select {
        margin-right: 20px;
        background: $clSecondary;
        font-size: $fontHeading;
        color: white;
        border-radius: 2px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        font-size: 0.96em;
        height: 35px;
        line-height: 35px;
        padding: 0 15px 0 15px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .active-project {
        margin-right: 55px;
        
        > .title {
            position: relative;
            font-family: $fontHeading;
            font-weight: normal;
            display: inline-block;
            padding: 0px 30px 0 4px;
            line-height: 41px;
            background-color: white;
            cursor: pointer;
            white-space: nowrap;
            border-bottom: 2px solid $clSecondary;
            &.with-icon { /* only added when projectIcon === true */
                padding: 0px 30px 0 35px;
                background-image: $iconProjectUrl;
                background-repeat: no-repeat;
                background-position: 7px center;
                background-size: 17px;
            }

            &:after {
                content: '';
                position: absolute;
                top: 50%;
                margin-top: -5px;
                right: 10px;
                transform: rotate(45deg);
                width: 8px;
                height: 8px;
                border-bottom: 2px solid $clDarkGrey;
                border-right: 2px solid $clDarkGrey;
            }

            &:hover {
                background-color: $clGrey;
            }
        }

        & > a {
            cursor: pointer;
            float: right;
            font-size: 0;
            color: white;
            border-radius: 2px;
            min-width: 30px;
            height: 28px;
            vertical-align: top;
            background-image: $iconLinkUrl;
            background-position: center;
            background-repeat: no-repeat;
            margin-left: 0;
            margin-top: 6px;
            transition: opacity $transition;
            background-size: 18px;
            opacity: 0.7;
            &:hover {
                opacity: 1;
            }
        }
    }

    .bg__prl__checkbox {
        display: none;
    }

    .bg__prl__checkbox + .bg__prl__menu {
        display: none;
    }

    .bg__prl__checkbox:hover + .bg__prl__menu {
        display: block;
        z-index: 9999;
    }

    .bg__prl__menu {
        position: absolute;
        top: 100%;
        border: 1px solid $clGreyTint;
        border-radius: 4px;
        padding: 0;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        list-style-type: none;
        right: 0;
        min-width: 360px;
        max-height: 360px;
        overflow: hidden;
        overflow-y: auto;

        > li:hover {
            background-color: mix(white, $clSecondary, 75%);
        }

        > input {
            font-weight: normal;
            background-color: $clGrey;
            margin-bottom: 0;
            padding: 10px 20px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        > li {
            padding: 10px 20px;
            cursor: pointer;
            white-space: nowrap;
            border-top: 1px solid $clGreyTint;

            &.divider {
                padding: 0;
                border-bottom: 1px solid #ccc;
            }

            a {
                display: block;
                margin: -10px -20px;
                padding: 10px 20px;
            }
        }
    }

    .bg__prl__new {
        position: sticky;
        width: 100%;
        padding: 10px;
        background-color: $clSecondary;
        color: white;
        border: 0;
        border-radius: 2px;
    }

    .bg__prl__filter-list {
        position: sticky;
        top: 0;
        width: 100%;
    }

    /*import & override the projectForm */
    .bg__project-form  {
	margin-top: 4rem;
	padding-bottom: 3rem;
	&::before {
		content: 'Create a new project';
		font-size: 16px;
		font-weight: 600;
		margin-top: 3rem;
	}

	.new-project-container {
		padding-top: 3rem;
		.bg__new-project-wrapper{
			display: flex;
			flex-wrap: wrap;
			margin: 0;
			padding: 0;
			.project-modal-right {
				margin-left: 15px;
				width: 80%;
			}
			.project-modal-left {
				font-weight: 600;
				width: 16.3332%;
			}
			label {
				color: #000;
				text-align: left;
				text-transform: none;
			}
		}
	}
	.actions {
		margin-top: 3rem;
	}
}
    .bg__project-form {
        z-index:9999;
        width: 600px;
        padding: 10px;
        background-color: white;
        position:absolute;
        right:0;
        border: 1px solid $clGreyTint;
        border-radius: 4px;
        box-shadow: 0 0 6px 0 rgba(0,0,0,.1);
        .actions {
            margin: 0;
            /**
* Buttons (problematic now, since bootstrap 4 overrides the .btn class)
*/

.btn {
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-family: $fontHeading;
  font-size: 0.96em;
  text-transform: uppercase;
  text-decoration: none;
  height: 35px;
  padding: 0 45px 0 30px;
  box-sizing: border-box;
  line-height: 35px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background-image: $arrowRightDarkUrl;
  background-position: center right 10px;
  background-repeat: no-repeat;
  margin: 10px;
  background-color: $clGrey;
  color: $clDark;
  border-width: 0;

  &:hover{
    background-color: lighten($clGrey, 5);
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
  }

  &.primary{
    background-color: $clPrimary;
    color: $clWhite;
    background-image: $arrowRightWhite40Url;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);

    &:hover{
      background-color: lighten($clPrimary, 5);
    }

    &.plus{
      background-image: $iconPlusUrl;
      background-size: 12px;
    }

  }

  &.plus{
    background-image: $iconPlusGreyUrl;
    background-size: 12px;
  }

  &.white{
    background-color: $clWhite;
    &:hover{
      background-color: $clWhite;
      opacity: 0.9;
    }
  }

  &.blank{
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    padding: 0 30px;

    &:hover{
      background-color: transparent;
      opacity: 0.9;
    }

    &.warning:hover{
      color: $clSecondary;
      opacity: 1;
    }
  }
}
        }
        .new-project-container {
            display: flex;
            padding-top: 15px;
            flex-direction: column;
            .bg__new-project-wrapper {
                background-image: none;
                display: flex;
                flex-direction: row;
                textarea {
                    min-height: 60px;
                    font-weight: normal;
                }
                input {
                    font-weight: normal;
                }
                .label.project-modal-left {
                    flex-basis: 100px;
                    text-align: left;
                }
            }
        }
    }

}

.bg__tool-header {
    width: 100%;
    margin: 45px 0 10px;
    border-bottom: 1px solid $clGreyTint;

    .bg__th__title {
        display: inline-block;
        margin: 0;
        padding: 10px 0 10px 38px;
        font-size: 1.5em;
        background-image: $iconRecipeUrl;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 27px;
    }

    // project info/selector
    & > .bg__th__project {
        float: right;
        margin-top: 5px;
    }
}

span.bg__editable-text {
    border-bottom: 1px dotted transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;

    &:hover {
        border-bottom: 1px dotted $clPrimary;
    }
}

input.bg__editable-text {
    display: inline-block;
    padding: 0;
    border: 0;
    background-color: transparent;
    border-radius: 0;
    margin: 0;
    border: none;
    padding-left: 5px;
    border-bottom: 1px dotted $clPrimary;
    width: auto;
}



//import the "recipes": apps (top level components) that use the component library
.bg__collection-recipe {
	.bg__rcp__cl__input-area {
		background-color: $subdued-bg;
		border-radius: 6px;
		box-shadow: 1px 2px 2px 2px #999;
		margin-top:5px;
		padding: 3rem;
		.btn-primary {
			border-radius: 6px;
		}
		.list-group-item{
			border-radius: 6px;
		}
	}
	.list-group-item {
		.bg__read-more-link {
			float: right;
		}

		&.active {
			.bg__link-tag {
				color: #fff;
			}
		}
	}
	.fieldAnalysisStats {
		background-color: $subdued-bg;
		border-radius: 6px;
		box-shadow: 1px 2px 2px 2px #999;
		margin: 3rem 0;
		padding: 4rem;
	}
	.ms_toggle_btn {
		display: none;
	}

	.box{
		background-color: $subdued-bg;
	    border-radius: 6px;
	    box-shadow: 1px 2px 2px 2px #999;
	    margin-top: 5px;
	    padding: 2rem;
	    margin-right: 5px;
	}
}
.bg__item-details-recipe {

	button {
		text-transform: uppercase;
		font-family: Maven Pro,sans-serif;
	}

	.bg__rcp__id__project-buttons {
		float:right;
		margin-right:35px;
		button {
			margin-top: 2px;
    		float: right;
			margin-left: 15px;
			border: 0;
			background-color: #f26c50;
			color: #fff;
		}

		.bg__rcp__id__bookmarked {
		    background-color: #f26c50;
		    border: 0;
		    color: #fff;
		    text-align: center;
		    width: 35px;
		    height: 35px;
		    position: absolute;
		    right: 0;
		    top: 0;
		    i {
		    	line-height: 35px;
		    }
		}

	}

	.bg__rcp__id__media-player {}

	.bg__rcp__id__keyword-browser {
		margin: 10px;
		padding: 5px;
		.property-list {
	    	overflow-y: auto;
			.keyword {
				margin :0 0 5px 0;
				padding :5px;
				border-radius:3px;
				background-color: $clBlue;
				color: white;
				cursor:pointer;
				&:hover {
					background-color: #666;
				}
			}
		}
		h4 {
			border-bottom: 1px solid #eee;
			padding-bottom: 5px;
		}
	}

	.cl_table {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
	}

	.cl_table-cell {
		box-sizing: border-box;
		flex-grow: 1;
		width: 100%;
		padding: 8px 0;
		overflow: hidden;
		list-style: none;
		border: solid 3px white;

		p {
			margin: 0;
		}
		ul {
			padding-left: 15px;
		}

		&.left-cell {
			font-size: 16px;
			font-weight: 700;
		}

		b {
			color: #666;
		}
	}

	.cl_table--2cols > .cl_table-cell  {
		border-bottom: 1px solid #eee;
		width: 50%;

	}

	.cl_table--2cols > .left-cell  {
		width: 60%;
	}

	.cl_table--2cols > .right-cell  {
		width: 40%;
	}
	// overwrites background visibility for annotation modal only.
	#annotation__modal {
		&.bg__flex-modal {
			background: none;
		}
	}
}
.bg__comparative-search-recipe {
	padding-top:20px;

	/* required for properly rendering the Frontwise components */
	> .workspace-components {
		// General styling
$colors: "primary" $clPrimary, "primary-alt" $clPrimaryAlt, "secondary" $clSecondary, "dark" $clDark, "dark-grey" $clDarkGrey, "grey" $clGrey, "grey-tint" $clGreyTint, "white" $clWhite;


@each $color in $colors {
  .background-color-#{nth($color, 1)}{
      background-color: nth($color, 2);
  }
}


div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  //font: inherit;
  vertical-align: inherit; //middle
  text-align: inherit;
  border-radius: 0;
}

// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote {
  &:before, &:after {
    content: "";
    content: none;
  }
}

q {
  &:before, &:after {
    content: "";
    content: none;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, input[type=checkbox], input[type=radio]{
  vertical-align: middle;
}


body{
  padding:0;
  margin:0;
  font-family: $fontBody;
  font-size: 13.5px;
}

/**
* Content
*/

h1,h2,h3,h4,h5{
 font-family: $fontHeading;
 font-weight: 500;
 line-height: 1.1em;
}

h1{
  font-size: 25px;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 15px;
}

h4{
  font-size: 13px;
}

p{
  line-height: 1.5em;
}

/**
* Links
*/

.link, .link:visited{
   color: $clPrimary;
}

.link:hover{
  color: lighten($clPrimary, 10);
}

.link:active{
   color: $clPrimaryAlt;
}


/**
* Buttons
*/

.btn{
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-family: $fontHeading;
  font-size: 0.96em;
  text-transform: uppercase;
  text-decoration: none;
  height: 35px;
  padding: 0 45px 0 30px;
  box-sizing: border-box;
  line-height: 35px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background-image: $arrowRightDarkUrl;
  background-position: center right 10px;
  background-repeat: no-repeat;
  margin: 10px;
  background-color: $clGrey;
  color: $clDark;
  border-width: 0;

  &:hover{
    background-color: lighten($clGrey, 5);
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
  }

  &.primary{
    background-color: $clPrimary;
    color: $clWhite;
    background-image: $arrowRightWhite40Url;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);

    &:hover{
      background-color: lighten($clPrimary, 5);
    }

    &.plus{
      background-image: $iconPlusUrl;
      background-size: 12px;
    }

  }

  &.plus{
    background-image: $iconPlusGreyUrl;
    background-size: 12px;
  }

  &.white{
    background-color: $clWhite;
    &:hover{
      background-color: $clWhite;
      opacity: 0.9;
    }
  }

  &.blank{
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    padding: 0 30px;

    &:hover{
      background-color: transparent;
      opacity: 0.9;
    }

    &.warning:hover{
      color: $clSecondary;
      opacity: 1;
    }
  }
}

/**
* Forms
*/

.label{
  color: $clPrimary;
  text-transform: uppercase;
  display: block;
  font-size: 0.96em;
  font-family: $fontHeading;
  font-weight: 500;
  margin-bottom: 10px;
}

input[type=text], textarea{
  border: 1px solid $clGreyTint;
  border-left-width: 2px;
  padding: 6px 10px;
  border-radius: 2px;
  font-family: $fontBody;
  min-width: 200px;
  margin-bottom: 15px;
  transition: border $transition;

  &:focus{
    border-left: 2px solid $clPrimary;
  }
}


input, textarea, select{
  outline-color: $clPrimary;
}


textarea{
  min-width: 400px;
  min-height: 200px;
}

/* Page layout */

.content{
  position: relative;
  max-width: $maxPageWidth;
  margin: auto;
  padding: $contentPadding;
  box-sizing: border-box;

  .text-body{
    max-width: $maxTextBodyWidth;
    margin: auto;

    p{
      max-width: 500px;
    }
  }

}

&.bg__workspace{
  padding-top: 30px;
}
@mixin infoBanner() {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: $maxTextBodyWidth;
  padding: 0;
  
  // Hide animation
  overflow: hidden;
  &.hidden {
    animation: infobanner-content-hide 0.4s forwards ease-out;
  }
  
  > img {
    width: 176px;
    margin: 30px;
  }
  
  .info {
    margin: 30px;
    flex: 1;
    min-width: 250px;
    max-width: 100vw;
  }
  
  .actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@keyframes infobanner-content-hide {
    0% {
      max-height: 400px;
    }
    100% {
      max-height: 0px;
      opacity: 0;
      display: none;
    }
}

@mixin image-wrap-shadow() {
  position: relative;
  
  // Shadow
  &::before {
    content: '';
    position: absolute;
    width: 70%;
    left: 15%;
    height: 20%;
    bottom: 5px;
    border-radius: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0, 0.15);
  }
  
  img {
    position: relative;
    width: 100%;
  }
}

// Workspace -- General
.bg__sort-table{

  table{
    margin: 0;
    padding:0;
    border: 0;
    border-collapse: collapse;
    min-width: 100%;

    input[type=checkbox]{
      margin-left: 10px;
    }

    thead{
      th{
        text-align: left;
        background-color: $clDark;
         border-bottom: 2px solid $clDark;
        padding: 10px 5px;
        padding-right: 15px;
        color: $clWhite;
        font-family: $fontHeading;
        font-size: 15px;
        font-weight: 400;

        &.sortable{
          cursor: pointer;
          &:hover{
            border-bottom: 2px solid $clDarkGrey;
          }

        }

        &.active{
          position: relative;
          padding-right: 15px;
          border-bottom: 2px solid $clSecondary;

          &:hover{
            border-bottom: 2px solid $clSecondary;
          }

          &:after{
            content: "";
            position: absolute;
            right: 5px;
            border-bottom: 7px solid $clWhite;
            border-left: 7px solid transparent;
            transform: rotate(45deg);
            margin-top: 5px;
          }

          &.desc:after{
            margin-top: 8px;
            transform: rotate(-135deg);
          }
        }
      }
    }


    tbody{
      &.loading{
        opacity: 0.3;
      }

      tr:nth-child(even) {
        background-color: $clGrey;
      }

      td{
        padding: 10px 5px;
        border-bottom: 1px solid $clGreyTint;
        max-width: 20%;
        max-width: 600px;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-overflow: ellipsis;

        &.primary{
          a{
            font-weight: 600;
            text-decoration: none;
            color: $clDark;
            &:hover{
              text-decoration: underline;
            }
          }
        }

        &.number{
          text-align: right;
          padding-right: 8px;
        }

        &.smaller{
          font-size: 0.8em;
          color: $clDarkGrey;
        }

        .btn{
          margin: 0;
          &.blank{
            padding-left: 15px;
            padding-right: 15px;
          }
        }
      }

      .bg__copy-to-clipboard {
        background-image: none;
        border-radius: 6px;
        box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
        padding: 0 0 0 14px;
      }

      .bg__copyToClipboardMSN {
        bottom: 0;
        color: $clOrange;
        font-weight: bold;
        margin-top: 30px;
        position: relative;
        text-align: center;
      }

      .bg__searchTerm {
        margin-left: 10px;
      }
    }
  }
}

// Workspace -- Projects
.bg__project-list-view {
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__project-edit, .bg__project-create{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   
  form{
    margin-left: 40px;

    input[type=text], textarea{
      display:block;
      min-width: 400px;
      max-width: 100%;
    }

    .actions{
      margin-top: 20px;
      margin-left: 160px;
    }

    input[type=checkbox]{
      margin-right: 10px;
    }
  }
}
.bg__project-view-wrapper{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}

  .info-bar{
    h2, p{
      max-width: 800px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .submenu{
    border-bottom: 1px solid $clGreyTint;
    margin-bottom: 20px;
    padding-left: 20px;

    a{
      font-size: 15px;
      font-family: $fontHeading;
      color: $clDark;
      padding: 10px 20px;
      display: inline-block;
      border-bottom: 3px solid white;
      margin-right: 1px;
      &:hover{
        background-color: $clGrey;
        border-bottom-color: $clDarkGrey;
        text-decoration: none;
      }

      &.active, &.active:hover{
        border-bottom-color: $clSecondary;
        background-color: $clGrey;
      }

      .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    }
  }


}
.bg__project-details-view{

  h2{
    margin: 40px 0;
  }

  .btn{
    float: right;
    margin-top: -60px;
  }

  ul.details{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    li{
      padding-right: 10px;
      padding-bottom: 10px;
      min-width: 150px;
      max-width: 600px;
    }
  }
}
.bg__project-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}
  .bg__modal{
  background-color: rgba($clDark,0.8);
  display: block;
  z-index: 9999;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 95px; /* height of the header*/
  width: 100%;

  > .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    &.medium {
      width:60%;
    }

    &.small {
      width:40%;
    }

    iframe{
      width: 100%;
      height: 100%;
    }

    > .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;

      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  .error{
    padding:10px;
  }

  table{
    .description{
      a{
        text-decoration: none;
        color: black;
      }
      max-width: 270px;
      white-space: normal;
    }

    .bookmark-icon{
      background-image: $iconBookmarkWhiteUrl;
      background-repeat: no-repeat;
      background-position: center left;
      background-size: 15px;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }

    .collaborators{
      display: block;
      color: $clPrimaryAlt;
      text-transform: uppercase;
      font-size: 12px;
      font-family: $fontHeading;
    }

    .access{
      text-transform: uppercase;
    }

    .actions{
      width: 130px;
      .btn{
        padding-left: 15px;
        padding-right: 35px;
      }
    }
  }
}
.bg__project-migration-form {

	padding:20px;

	> .project-actions {
		margin: 10px 0px;
		> *:last-child {
			margin: 0px 10px;
		}
		select {
			width: 120px;
		    margin: 0 10px;
		    border-color: #eee3e1;
		    border-radius: 2px;
		    background-color: #fff;
		    padding: 3px 5px;
		}
	}


	> .multi-select {
		border: 1px solid #fefefe;
		margin-top: 10px;
		width:50%;

		> select {
			width: 50%;
			height: 154px;

			option {
				cursor: pointer;
				align-items: center;
				border-bottom: 1px solid $clGreyTint;
				font-size: 12px;
				padding: 10px;
				&:hover {
					background-color: rgba(153, 153, 153, 0.26);
				}

				&.left {
					&:after {
						color: #333;
						content: " ▶ ";
						float:right;
					}
				}

				&.right {
					padding-left: 10px;

					&:before {
						color: #333;
						content: " ◀ ";
						margin-right: 10px;
						display: inline-block;
					}
				}
			}

		}
	}

	> .validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}
}

.bg__project-session-view{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}
.bg__project-session-create{
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .btn{
    margin-left: 0;
  }

}

.bg__project-queries-view {

}
.bg__project-queries-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}

.bg__project-data-view{
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .tools{
    background-color: $clWhite;

    .radiogroup{
      display: inline-block;
      label,input{
        cursor: pointer;
      }
    }

    .view{
      margin-bottom: 5px;
    }

    .export-button{
      float:right;
      margin-top: -45px;
      margin-right: 0;
      margin-bottom: 0;
    }

    .type-label{
      padding-left: 10px;
    }

    .type-select{
      margin-left: 0px;
    }
  }
}
.bg__nested-table{

  h2{
    padding-bottom: 30px;
    padding-top: 15px;

    .fold{
      margin-left: 20px;
      display: inline-block;
      font-size: 13px;
      vertical-align: middle;

      .filter{
        float: right;
        padding: 10px;

        span{
          text-decoration: underline;
          &:hover{
            cursor: pointer;
            opacity: 0.8;
          }
        }
      }

      select{
        font-family: $fontBody;
        float:right;
        margin-top: 3px;
        font-weight: normal;
        font-size: 14px;
        padding: 6px 10px;

        // webkit only
        @media screen and (-webkit-min-device-pixel-ratio:0) {
          border-color: $clGreyTint;
          box-shadow: 0 2px 2px rgba(0,0,0,0.1);
          border-radius: 2px;
          background-color: #fff;
          &:disabled{
            background-color: $clGrey;
          }
        }
      }

    }
  }

  .item-row{
    margin: 10px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border-radius: 2px;
    border: 1px solid $clGreyTint;

    &:first-child{
      .item{
        .info{
          &>li{
            .label{
              margin-top: -26px;
              display: block;
              @media screen and (max-width: $break-small) {
                margin-top: 0px;
              }

            }
          }
        }
      }
    }

    .item{
      width: 100%;
      list-style: none;
      position: relative;

      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      align-content: stretch;


      .selector{
        flex-shrink: 0;
        flex-basis: 30px;
        input{
          margin-left: 10px;
        }

        .delete{
          background-image: $iconDeleteUrl;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 18px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 30px;
          height: 30px;
          cursor: pointer;
          &:hover{
            opacity: 0.8;
          }
        }
      }



      .info{
        max-width: calc(100% - 130px);
        display: flex;
        flex-grow:2;
        box-sizing: border-box;
        vertical-align: top;
        padding-left: 10px;
        @media screen and (max-width: $break-small) {
          flex-wrap: wrap;
        }

        li{
          padding: 5px 10px 10px 10px;
          min-height: 50px;
          min-width: 120px;
          flex: 1 1 0;

          .label{
            display: none;
            @media screen and (max-width: $break-small) {
              display: block;
            }
          }
          p{
            overflow-wrap: break-word;
            word-wrap: break-word;
          }

          &.primary{
            p{
              font-weight: bold;
            }
          }
        }

      }

      .actions{
        min-width:100px;
        min-height: 65px;
        flex-shrink: 0;

        .btn.primary{
          margin: 7px;
          padding-left: 17px;
          padding-right: 30px;
          margin-right: 0px;
        }

        .row-menu{
          margin-top: 7px;
        }
        .sublevel-button-container{
          position: absolute;
          right: 0;
          bottom: 0;
          line-height: 13px;

          .sublevel-button{
            display: inline-block;
            float:right;
            background-color: $clGreyTint;
            color: $clDark;
            text-transform: uppercase;
            font-family: $fontHeading;
            padding: 0px 30px 0px 0px;
            background-position: center right 10px;
            background-repeat: no-repeat;
            background-image: $arrowDownDarkUrl;
            cursor: pointer;
            box-sizing: border-box;
            transition: background-color 0.2s ease-out;

            &.lowered{
              background-color: darken($clGreyTint, 10);
              &.facet:before{
                border-right-color: darken($clGreyTint, 10);
                border-bottom-color: darken($clGreyTint, 10);
              }
            }

            &:hover{
              background-color: darken($clGreyTint, 5);
              &.facet:before{
                border-right-color: darken($clGreyTint, 5);
                border-bottom-color: darken($clGreyTint, 5);
              }
            }

             &.active{
              background-color: $clGreyTint;
              &.facet:before{
                border-right-color: $clGreyTint;
                border-bottom-color: $clGreyTint;
              }
            }

            &.facet:before{
              content: " ";
              position:absolute;
              left: -32px;
              top: 0px;
              border-top: 16px solid transparent;
              border-left: 16px solid transparent;
              border-right: 16px solid $clGreyTint;
              border-bottom: 15px solid $clGreyTint;
              /*
              border-top: 19px solid transparent;
              border-left: 15px solid transparent;
              border-right: 15px solid $clGreyTint;
              border-bottom: 15px solid $clGreyTint;
              */
              transition: border-color 0.2s ease-out;
            }

            &.active{
              background-image: $arrowUpDarkUrl;
              &:hover{
                background-color: darken($clGreyTint, 3);
                &.facet:before{
                  border-right-color: darken($clGreyTint, 3);
                  border-bottom-color: darken($clGreyTint, 3);
                }
              }
            }

            .icon{
              display: inline-block;
              background-repeat: no-repeat;
              background-position: center center;

              height: 30px;
            }
            .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}

            .count{
              margin-left: 8px;
              margin-top: 6px;
            }

            &.zero {
              &.lowered{
                background-color: $clGreyTint;
              }
              opacity:0.3;

              &.active{
                opacity: 1;
              }

              .count{
                background-color: $clDarkGrey;
              }
            }
          }
        }
      }
    }

    .sublevel{
      background-color: $clGreyTint;
      padding: 10px 20px;
      table{
        width: 100%;
        max-width: 100%;
        th{
          text-transform: uppercase;
          font-family: $fontHeading;
          padding: 5px 5px 10px 0;
        }

        td{
          padding: 5px 5px 5px 0;
          border-top: 1px solid darken($clGreyTint,3);
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &.bold{
            font-weight: bold;
          }
        }

      }
    }
  }

  .groups{
    span{
      display: inline-block;
      background-color: $clGrey;
      text-transform: uppercase;
      font-size: 11px;
      margin: 3px;
      border-radius: 2px;
      padding: 1px 4px;
    }
  }
}
.bg__bookmark-table {
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .bg__modal{
  background-color: rgba($clDark,0.8);
  display: block;
  z-index: 9999;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 95px; /* height of the header*/
  width: 100%;

  > .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    &.medium {
      width:60%;
    }

    &.small {
      width:40%;
    }

    iframe{
      width: 100%;
      height: 100%;
    }

    > .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;

      &:hover{
        opacity: 1.0;
      }
    }

  }

}

}
.bg__bookmark-row.item-row{
  .item{
    .image{
      flex-basis: 132px;
      height: 88px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      flex-shrink: 0;
      cursor: pointer;
    }

    .info {
      flex-wrap: wrap;
      li{
        &.primary p{
          cursor: pointer;
          &:hover{
            text-decoration: underline;
          }
        }

        &.content-date{
          min-width: 120px;
          max-width: 120px;
        }

        &.content-media{
          min-width: 120px;
          max-width: 120px;
        }
      }
    }

    .actions {
      .sublevel-button-container .sublevel-button{
        padding-left: 15px;
        border-left: 1px solid rgba(0,0,0,0.3);
        &.facet{
          padding-left: 0;
          border-left: 0;
        }

        .icon.annotation{
          width: 28px;
          background-size: 28px;
          background-image: $iconAnnotationUrl;
        }

        .icon.segment{
          margin-right: 3px;
          width: 20px;
          background-size: 20px;
          background-image: $iconSegmentUrl;
        }
      }
    }
  }

  .sublevel{
    table{
      width: 100%;
      tr{
          .time{
            width: 20%;
          }
          .type{
            width: 20%;
            a{
              color: black;
            }
          }
          .details{
            width: 30%;
          }

          td{
            vertical-align: top;
            &.time{
              font-weight: bold;
              .go-to-segment-link {
                cursor: pointer;
                &:hover {
                  text-decoration: underline;
                }

              }
            }
            table{
              tr{
                &:first-child{
                  td{
                  border: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.bg__annotation-table{
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .type-list{
    margin-top: 10px;
    border-top: 2px solid $clGreyTint;
  }

  .bg__modal{
  background-color: rgba($clDark,0.8);
  display: block;
  z-index: 9999;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 95px; /* height of the header*/
  width: 100%;

  > .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    &.medium {
      width:60%;
    }

    &.small {
      width:40%;
    }

    iframe{
      width: 100%;
      height: 100%;
    }

    > .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;

      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  &.loading{
    .bg__nested-table{
      opacity: 0.5;
    }
  }

  .type{
    font-weight: bold;
  }
}
.bg__annotation-row.item-row{
  .item{
    .classification{
      .vocabulary{
        width: 150px;
      }
    }

    .metadata{
      .template{
        width: 100px;
      }
    }

    .created{
      width: 100px;
    }  

    .actions{
      .row-menu{
        margin-top: 0px;          
      }
    }
    
    .icon.bookmark{
      width: 20px;
      background-size: 14px;
      background-image: $iconBookmarkUrl;
    }
  }

  .sublevel{
    td.actions{
      text-align: right;
      .btn{
        margin: 0;
      }
    }
  }
}

.row-menu{
  float:right;
  display: inline-block;
  width: 25px;
  height: 35px;
  cursor: pointer;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  
  span{
    line-height: 35px;
    font-size: 1.1em;          
    font-weight: bold;    
  }

  ul{
    z-index: 10;
    display: none;
    margin-left: -40px;
    position: absolute;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    li{
      cursor: pointer;
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #aaa;

      &:hover{
        background-color: $clPrimary;
        color: white;
      }

      &::last-child{
        border-bottom: 0;
      }
    }
  }

  &:hover{
    ul{
      display: block;
    }
  }
}

// Helpers
.bg__bulk-actions{
  position: fixed;
  bottom: -45px;
  left: 0;
  width: 100%;
  height: 45px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  background-color: white;
  padding: 5px 10px;
  box-sizing: border-box;
  z-index: 10;

  .btn{
    margin: 0 0 0 10px;
  }

  animation: slide 0.5s forwards;
}

@keyframes slide {
    0% { bottom: -45px; }
}

@keyframes slide {
    100% { bottom: 0; }
}
.bg__pagination{
  text-align: center;
  list-style: none;
  user-select: none;
  padding: 0;
  margin-top: 20px;
  li{
    display: inline-block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 2px;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
    text-align: center;
    background-color: $clGrey;
    border-radius: 2px;
    vertical-align: top;

    &.active,&.active:hover{
      background-color: $clGreyTint;
    }

    &:hover{
      background-color: $clGreyTint;
    }

    &.prev, &.next{
      font-size: 0;
      background-position: center;
      background-repeat: no-repeat;
    }

    &.prev{
      background-image: $arrowLeftDarkUrl;
    }

    &.next{
      background-image: $arrowRightDarkUrl;
    }
  }
}
// Nasty use of !important but necessary to customize the tooltip
// https://www.npmjs.com/package/react-tooltip
.bg__custom-queryTooltip {
  z-index: 9999 !important;

  h3 {
    font-size: 20px !important;
    padding-bottom: 10px !important;
  }
  padding: 30px !important;
  background-color: rgba(0,0,0, .9) !important;

  ul {
    li {
      padding-left: 20px !important;
    }
  }
  .bg__selectedFacet-list {
    padding-left: 10px;
  }
  .bg_queryDetails-wrapper {
    padding: 10px 0;
  }
}

	}

}
@keyframes slideInFromLeft {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}

.bg__single-search-recipe {
	/* Restyle buttons to new format */
	.btn {
		text-transform: uppercase;
		font-weight: 400;
		font-size: 13px;
		font-family: $fontHeading;
		transition: background-color $transition;

		&.btn-secondary {
			background-color: $clSecondary;
			color: white;

			&:hover {
				background-color: darken($clSecondary, 8%);
			}
		}
	}

	.select-all {
		@include checkbox();
		margin-top: 6px;
		margin-left: 3px;
	}

	.table-actions-header {
		background-color: white;
		border-top: 1px solid $clGreyTint;
		border-bottom: 1px solid $clGreyTint;
		margin: 5px 0 0 2px;
		min-height: 53px;
		padding: 10px 5px 10px 0;

		.table-actions {
			float: left;
			.btn {
				margin-right: 2px;
				.fa-bookmark {
					font-weight: bold;
					&:before {
						margin-right: 6px;
					}
				}
			}
		}

		&.bookmarked-results {
			background-color: transparent;
			margin: 0 0 0 6px;
			padding: 0;
			animation: 0.6s ease-in 0s 1 slideInFromLeft;
			.header-selected-items {
				background-color: $clPrimary;
				color: white;
				margin: 0;
				padding: 7px 7px 7px 20px;
				.fa-times {
					float: right;
					padding: 0 10px;
				}
				.fa-times:hover {
					cursor: pointer;
				}
			}
		}

		.btn-default:hover {
			background-color: $clGreyTint;
		}

		.btn-default.active {
			background-color: $clGrey;
		}
	}

	.bg__paging {
		.btn-default.active {
			background-color: $clPrimary;
			color: white;
		}
	}

	.alert {
		margin-top: 10px;
	}

	.table-actions-footer {
		padding: 10px;
		text-align: center;
	}
	.bg__ssr__result-list {
		@media screen and (max-width: $break-medium-result-list) {
			width: 100%;
			margin-left: 0;
		}
	}
	.table-actions > .bookmark-dropdown-menu {
		display: inline-block;
		margin-right: 5px;

		.dropdown-toggle {
			color: white;
			font-family: $fontHeading;
			font-weight: bold;
			background-color: $clPrimary;
			span {
				margin-left: 4px;
				margin-right: 4px;
			}
		}

		.dropdown-menu {
			min-width: 200px;
			padding:0;
			border: 1px solid $clGreyTint;
			button {
				background-color: white;
				text-align: left;
				width: 100%;
				border: 0;
				color: black;
				padding: 10px;
				border-bottom: 1px solid $clGreyTint;
				&:hover {
					background-color: $clGrey;
				}
			}
		}
	}
	.selected-items {
		background-color: $clGrey;
		border-radius: 5px;
		margin-bottom: 12px;
		max-height: 1000px;
		position: relative;
		overflow-y: auto;

		h4 {
			font-size: 14px;
		}
		.snippet_description {
			display: none;
		}
	}

	#query-saved__modal {
		.bg__workspace-queries-link {
			border-radius: 2px;
			min-width: 30px;
			height: 28px;
			vertical-align: top;
			background-image: $iconLinkUrl;
			background-repeat: no-repeat;
			margin-top: 6px;
			padding-left: 30px;
			transition: opacity $transition;
			background-size: 18px;
			opacity: 0.7;
			&:hover {
				opacity: 1.0;
			}
		}
	}
}


.interactive {
	cursor:pointer;
}

//import the workspace, which overrides the bootstrap styling
.bg__no-bootstrap-custom-styling {
    // General styling
$colors: "primary" $clPrimary, "primary-alt" $clPrimaryAlt, "secondary" $clSecondary, "dark" $clDark, "dark-grey" $clDarkGrey, "grey" $clGrey, "grey-tint" $clGreyTint, "white" $clWhite;


@each $color in $colors {
  .background-color-#{nth($color, 1)}{
      background-color: nth($color, 2);
  }
}


div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  //font: inherit;
  vertical-align: inherit; //middle
  text-align: inherit;
  border-radius: 0;
}

// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote {
  &:before, &:after {
    content: "";
    content: none;
  }
}

q {
  &:before, &:after {
    content: "";
    content: none;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, input[type=checkbox], input[type=radio]{
  vertical-align: middle;
}


body{
  padding:0;
  margin:0;
  font-family: $fontBody;
  font-size: 13.5px;
}

/**
* Content
*/

h1,h2,h3,h4,h5{
 font-family: $fontHeading;
 font-weight: 500;
 line-height: 1.1em;
}

h1{
  font-size: 25px;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 15px;
}

h4{
  font-size: 13px;
}

p{
  line-height: 1.5em;
}

/**
* Links
*/

.link, .link:visited{
   color: $clPrimary;
}

.link:hover{
  color: lighten($clPrimary, 10);
}

.link:active{
   color: $clPrimaryAlt;
}


/**
* Buttons
*/

.btn{
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-family: $fontHeading;
  font-size: 0.96em;
  text-transform: uppercase;
  text-decoration: none;
  height: 35px;
  padding: 0 45px 0 30px;
  box-sizing: border-box;
  line-height: 35px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background-image: $arrowRightDarkUrl;
  background-position: center right 10px;
  background-repeat: no-repeat;
  margin: 10px;
  background-color: $clGrey;
  color: $clDark;
  border-width: 0;

  &:hover{
    background-color: lighten($clGrey, 5);
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
  }

  &.primary{
    background-color: $clPrimary;
    color: $clWhite;
    background-image: $arrowRightWhite40Url;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);

    &:hover{
      background-color: lighten($clPrimary, 5);
    }

    &.plus{
      background-image: $iconPlusUrl;
      background-size: 12px;
    }

  }

  &.plus{
    background-image: $iconPlusGreyUrl;
    background-size: 12px;
  }

  &.white{
    background-color: $clWhite;
    &:hover{
      background-color: $clWhite;
      opacity: 0.9;
    }
  }

  &.blank{
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    padding: 0 30px;

    &:hover{
      background-color: transparent;
      opacity: 0.9;
    }

    &.warning:hover{
      color: $clSecondary;
      opacity: 1;
    }
  }
}

/**
* Forms
*/

.label{
  color: $clPrimary;
  text-transform: uppercase;
  display: block;
  font-size: 0.96em;
  font-family: $fontHeading;
  font-weight: 500;
  margin-bottom: 10px;
}

input[type=text], textarea{
  border: 1px solid $clGreyTint;
  border-left-width: 2px;
  padding: 6px 10px;
  border-radius: 2px;
  font-family: $fontBody;
  min-width: 200px;
  margin-bottom: 15px;
  transition: border $transition;

  &:focus{
    border-left: 2px solid $clPrimary;
  }
}


input, textarea, select{
  outline-color: $clPrimary;
}


textarea{
  min-width: 400px;
  min-height: 200px;
}

/* Page layout */

.content{
  position: relative;
  max-width: $maxPageWidth;
  margin: auto;
  padding: $contentPadding;
  box-sizing: border-box;

  .text-body{
    max-width: $maxTextBodyWidth;
    margin: auto;

    p{
      max-width: 500px;
    }
  }

}

&.bg__workspace{
  padding-top: 30px;
}
@mixin infoBanner() {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: $maxTextBodyWidth;
  padding: 0;
  
  // Hide animation
  overflow: hidden;
  &.hidden {
    animation: infobanner-content-hide 0.4s forwards ease-out;
  }
  
  > img {
    width: 176px;
    margin: 30px;
  }
  
  .info {
    margin: 30px;
    flex: 1;
    min-width: 250px;
    max-width: 100vw;
  }
  
  .actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@keyframes infobanner-content-hide {
    0% {
      max-height: 400px;
    }
    100% {
      max-height: 0px;
      opacity: 0;
      display: none;
    }
}

@mixin image-wrap-shadow() {
  position: relative;
  
  // Shadow
  &::before {
    content: '';
    position: absolute;
    width: 70%;
    left: 15%;
    height: 20%;
    bottom: 5px;
    border-radius: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0, 0.15);
  }
  
  img {
    position: relative;
    width: 100%;
  }
}

// Workspace -- General
.bg__sort-table{

  table{
    margin: 0;
    padding:0;
    border: 0;
    border-collapse: collapse;
    min-width: 100%;

    input[type=checkbox]{
      margin-left: 10px;
    }

    thead{
      th{
        text-align: left;
        background-color: $clDark;
         border-bottom: 2px solid $clDark;
        padding: 10px 5px;
        padding-right: 15px;
        color: $clWhite;
        font-family: $fontHeading;
        font-size: 15px;
        font-weight: 400;

        &.sortable{
          cursor: pointer;
          &:hover{
            border-bottom: 2px solid $clDarkGrey;
          }

        }

        &.active{
          position: relative;
          padding-right: 15px;
          border-bottom: 2px solid $clSecondary;

          &:hover{
            border-bottom: 2px solid $clSecondary;
          }

          &:after{
            content: "";
            position: absolute;
            right: 5px;
            border-bottom: 7px solid $clWhite;
            border-left: 7px solid transparent;
            transform: rotate(45deg);
            margin-top: 5px;
          }

          &.desc:after{
            margin-top: 8px;
            transform: rotate(-135deg);
          }
        }
      }
    }


    tbody{
      &.loading{
        opacity: 0.3;
      }

      tr:nth-child(even) {
        background-color: $clGrey;
      }

      td{
        padding: 10px 5px;
        border-bottom: 1px solid $clGreyTint;
        max-width: 20%;
        max-width: 600px;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-overflow: ellipsis;

        &.primary{
          a{
            font-weight: 600;
            text-decoration: none;
            color: $clDark;
            &:hover{
              text-decoration: underline;
            }
          }
        }

        &.number{
          text-align: right;
          padding-right: 8px;
        }

        &.smaller{
          font-size: 0.8em;
          color: $clDarkGrey;
        }

        .btn{
          margin: 0;
          &.blank{
            padding-left: 15px;
            padding-right: 15px;
          }
        }
      }

      .bg__copy-to-clipboard {
        background-image: none;
        border-radius: 6px;
        box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
        padding: 0 0 0 14px;
      }

      .bg__copyToClipboardMSN {
        bottom: 0;
        color: $clOrange;
        font-weight: bold;
        margin-top: 30px;
        position: relative;
        text-align: center;
      }

      .bg__searchTerm {
        margin-left: 10px;
      }
    }
  }
}

// Workspace -- Projects
.bg__project-list-view {
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__project-edit, .bg__project-create{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   
  form{
    margin-left: 40px;

    input[type=text], textarea{
      display:block;
      min-width: 400px;
      max-width: 100%;
    }

    .actions{
      margin-top: 20px;
      margin-left: 160px;
    }

    input[type=checkbox]{
      margin-right: 10px;
    }
  }
}
.bg__project-view-wrapper{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}

  .info-bar{
    h2, p{
      max-width: 800px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .submenu{
    border-bottom: 1px solid $clGreyTint;
    margin-bottom: 20px;
    padding-left: 20px;

    a{
      font-size: 15px;
      font-family: $fontHeading;
      color: $clDark;
      padding: 10px 20px;
      display: inline-block;
      border-bottom: 3px solid white;
      margin-right: 1px;
      &:hover{
        background-color: $clGrey;
        border-bottom-color: $clDarkGrey;
        text-decoration: none;
      }

      &.active, &.active:hover{
        border-bottom-color: $clSecondary;
        background-color: $clGrey;
      }

      .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    }
  }


}
.bg__project-details-view{

  h2{
    margin: 40px 0;
  }

  .btn{
    float: right;
    margin-top: -60px;
  }

  ul.details{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    li{
      padding-right: 10px;
      padding-bottom: 10px;
      min-width: 150px;
      max-width: 600px;
    }
  }
}
.bg__project-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}
  .bg__modal{
  background-color: rgba($clDark,0.8);
  display: block;
  z-index: 9999;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 95px; /* height of the header*/
  width: 100%;

  > .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    &.medium {
      width:60%;
    }

    &.small {
      width:40%;
    }

    iframe{
      width: 100%;
      height: 100%;
    }

    > .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;

      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  .error{
    padding:10px;
  }

  table{
    .description{
      a{
        text-decoration: none;
        color: black;
      }
      max-width: 270px;
      white-space: normal;
    }

    .bookmark-icon{
      background-image: $iconBookmarkWhiteUrl;
      background-repeat: no-repeat;
      background-position: center left;
      background-size: 15px;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }

    .collaborators{
      display: block;
      color: $clPrimaryAlt;
      text-transform: uppercase;
      font-size: 12px;
      font-family: $fontHeading;
    }

    .access{
      text-transform: uppercase;
    }

    .actions{
      width: 130px;
      .btn{
        padding-left: 15px;
        padding-right: 35px;
      }
    }
  }
}
.bg__project-migration-form {

	padding:20px;

	> .project-actions {
		margin: 10px 0px;
		> *:last-child {
			margin: 0px 10px;
		}
		select {
			width: 120px;
		    margin: 0 10px;
		    border-color: #eee3e1;
		    border-radius: 2px;
		    background-color: #fff;
		    padding: 3px 5px;
		}
	}


	> .multi-select {
		border: 1px solid #fefefe;
		margin-top: 10px;
		width:50%;

		> select {
			width: 50%;
			height: 154px;

			option {
				cursor: pointer;
				align-items: center;
				border-bottom: 1px solid $clGreyTint;
				font-size: 12px;
				padding: 10px;
				&:hover {
					background-color: rgba(153, 153, 153, 0.26);
				}

				&.left {
					&:after {
						color: #333;
						content: " ▶ ";
						float:right;
					}
				}

				&.right {
					padding-left: 10px;

					&:before {
						color: #333;
						content: " ◀ ";
						margin-right: 10px;
						display: inline-block;
					}
				}
			}

		}
	}

	> .validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}
}

.bg__project-session-view{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}
.bg__project-session-create{
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .btn{
    margin-left: 0;
  }

}

.bg__project-queries-view {

}
.bg__project-queries-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}

.bg__project-data-view{
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .tools{
    background-color: $clWhite;

    .radiogroup{
      display: inline-block;
      label,input{
        cursor: pointer;
      }
    }

    .view{
      margin-bottom: 5px;
    }

    .export-button{
      float:right;
      margin-top: -45px;
      margin-right: 0;
      margin-bottom: 0;
    }

    .type-label{
      padding-left: 10px;
    }

    .type-select{
      margin-left: 0px;
    }
  }
}
.bg__nested-table{

  h2{
    padding-bottom: 30px;
    padding-top: 15px;

    .fold{
      margin-left: 20px;
      display: inline-block;
      font-size: 13px;
      vertical-align: middle;

      .filter{
        float: right;
        padding: 10px;

        span{
          text-decoration: underline;
          &:hover{
            cursor: pointer;
            opacity: 0.8;
          }
        }
      }

      select{
        font-family: $fontBody;
        float:right;
        margin-top: 3px;
        font-weight: normal;
        font-size: 14px;
        padding: 6px 10px;

        // webkit only
        @media screen and (-webkit-min-device-pixel-ratio:0) {
          border-color: $clGreyTint;
          box-shadow: 0 2px 2px rgba(0,0,0,0.1);
          border-radius: 2px;
          background-color: #fff;
          &:disabled{
            background-color: $clGrey;
          }
        }
      }

    }
  }

  .item-row{
    margin: 10px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border-radius: 2px;
    border: 1px solid $clGreyTint;

    &:first-child{
      .item{
        .info{
          &>li{
            .label{
              margin-top: -26px;
              display: block;
              @media screen and (max-width: $break-small) {
                margin-top: 0px;
              }

            }
          }
        }
      }
    }

    .item{
      width: 100%;
      list-style: none;
      position: relative;

      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      align-content: stretch;


      .selector{
        flex-shrink: 0;
        flex-basis: 30px;
        input{
          margin-left: 10px;
        }

        .delete{
          background-image: $iconDeleteUrl;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 18px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 30px;
          height: 30px;
          cursor: pointer;
          &:hover{
            opacity: 0.8;
          }
        }
      }



      .info{
        max-width: calc(100% - 130px);
        display: flex;
        flex-grow:2;
        box-sizing: border-box;
        vertical-align: top;
        padding-left: 10px;
        @media screen and (max-width: $break-small) {
          flex-wrap: wrap;
        }

        li{
          padding: 5px 10px 10px 10px;
          min-height: 50px;
          min-width: 120px;
          flex: 1 1 0;

          .label{
            display: none;
            @media screen and (max-width: $break-small) {
              display: block;
            }
          }
          p{
            overflow-wrap: break-word;
            word-wrap: break-word;
          }

          &.primary{
            p{
              font-weight: bold;
            }
          }
        }

      }

      .actions{
        min-width:100px;
        min-height: 65px;
        flex-shrink: 0;

        .btn.primary{
          margin: 7px;
          padding-left: 17px;
          padding-right: 30px;
          margin-right: 0px;
        }

        .row-menu{
          margin-top: 7px;
        }
        .sublevel-button-container{
          position: absolute;
          right: 0;
          bottom: 0;
          line-height: 13px;

          .sublevel-button{
            display: inline-block;
            float:right;
            background-color: $clGreyTint;
            color: $clDark;
            text-transform: uppercase;
            font-family: $fontHeading;
            padding: 0px 30px 0px 0px;
            background-position: center right 10px;
            background-repeat: no-repeat;
            background-image: $arrowDownDarkUrl;
            cursor: pointer;
            box-sizing: border-box;
            transition: background-color 0.2s ease-out;

            &.lowered{
              background-color: darken($clGreyTint, 10);
              &.facet:before{
                border-right-color: darken($clGreyTint, 10);
                border-bottom-color: darken($clGreyTint, 10);
              }
            }

            &:hover{
              background-color: darken($clGreyTint, 5);
              &.facet:before{
                border-right-color: darken($clGreyTint, 5);
                border-bottom-color: darken($clGreyTint, 5);
              }
            }

             &.active{
              background-color: $clGreyTint;
              &.facet:before{
                border-right-color: $clGreyTint;
                border-bottom-color: $clGreyTint;
              }
            }

            &.facet:before{
              content: " ";
              position:absolute;
              left: -32px;
              top: 0px;
              border-top: 16px solid transparent;
              border-left: 16px solid transparent;
              border-right: 16px solid $clGreyTint;
              border-bottom: 15px solid $clGreyTint;
              /*
              border-top: 19px solid transparent;
              border-left: 15px solid transparent;
              border-right: 15px solid $clGreyTint;
              border-bottom: 15px solid $clGreyTint;
              */
              transition: border-color 0.2s ease-out;
            }

            &.active{
              background-image: $arrowUpDarkUrl;
              &:hover{
                background-color: darken($clGreyTint, 3);
                &.facet:before{
                  border-right-color: darken($clGreyTint, 3);
                  border-bottom-color: darken($clGreyTint, 3);
                }
              }
            }

            .icon{
              display: inline-block;
              background-repeat: no-repeat;
              background-position: center center;

              height: 30px;
            }
            .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}

            .count{
              margin-left: 8px;
              margin-top: 6px;
            }

            &.zero {
              &.lowered{
                background-color: $clGreyTint;
              }
              opacity:0.3;

              &.active{
                opacity: 1;
              }

              .count{
                background-color: $clDarkGrey;
              }
            }
          }
        }
      }
    }

    .sublevel{
      background-color: $clGreyTint;
      padding: 10px 20px;
      table{
        width: 100%;
        max-width: 100%;
        th{
          text-transform: uppercase;
          font-family: $fontHeading;
          padding: 5px 5px 10px 0;
        }

        td{
          padding: 5px 5px 5px 0;
          border-top: 1px solid darken($clGreyTint,3);
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &.bold{
            font-weight: bold;
          }
        }

      }
    }
  }

  .groups{
    span{
      display: inline-block;
      background-color: $clGrey;
      text-transform: uppercase;
      font-size: 11px;
      margin: 3px;
      border-radius: 2px;
      padding: 1px 4px;
    }
  }
}
.bg__bookmark-table {
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .bg__modal{
  background-color: rgba($clDark,0.8);
  display: block;
  z-index: 9999;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 95px; /* height of the header*/
  width: 100%;

  > .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    &.medium {
      width:60%;
    }

    &.small {
      width:40%;
    }

    iframe{
      width: 100%;
      height: 100%;
    }

    > .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;

      &:hover{
        opacity: 1.0;
      }
    }

  }

}

}
.bg__bookmark-row.item-row{
  .item{
    .image{
      flex-basis: 132px;
      height: 88px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      flex-shrink: 0;
      cursor: pointer;
    }

    .info {
      flex-wrap: wrap;
      li{
        &.primary p{
          cursor: pointer;
          &:hover{
            text-decoration: underline;
          }
        }

        &.content-date{
          min-width: 120px;
          max-width: 120px;
        }

        &.content-media{
          min-width: 120px;
          max-width: 120px;
        }
      }
    }

    .actions {
      .sublevel-button-container .sublevel-button{
        padding-left: 15px;
        border-left: 1px solid rgba(0,0,0,0.3);
        &.facet{
          padding-left: 0;
          border-left: 0;
        }

        .icon.annotation{
          width: 28px;
          background-size: 28px;
          background-image: $iconAnnotationUrl;
        }

        .icon.segment{
          margin-right: 3px;
          width: 20px;
          background-size: 20px;
          background-image: $iconSegmentUrl;
        }
      }
    }
  }

  .sublevel{
    table{
      width: 100%;
      tr{
          .time{
            width: 20%;
          }
          .type{
            width: 20%;
            a{
              color: black;
            }
          }
          .details{
            width: 30%;
          }

          td{
            vertical-align: top;
            &.time{
              font-weight: bold;
              .go-to-segment-link {
                cursor: pointer;
                &:hover {
                  text-decoration: underline;
                }

              }
            }
            table{
              tr{
                &:first-child{
                  td{
                  border: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.bg__annotation-table{
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .type-list{
    margin-top: 10px;
    border-top: 2px solid $clGreyTint;
  }

  .bg__modal{
  background-color: rgba($clDark,0.8);
  display: block;
  z-index: 9999;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 95px; /* height of the header*/
  width: 100%;

  > .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    &.medium {
      width:60%;
    }

    &.small {
      width:40%;
    }

    iframe{
      width: 100%;
      height: 100%;
    }

    > .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;

      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  &.loading{
    .bg__nested-table{
      opacity: 0.5;
    }
  }

  .type{
    font-weight: bold;
  }
}
.bg__annotation-row.item-row{
  .item{
    .classification{
      .vocabulary{
        width: 150px;
      }
    }

    .metadata{
      .template{
        width: 100px;
      }
    }

    .created{
      width: 100px;
    }  

    .actions{
      .row-menu{
        margin-top: 0px;          
      }
    }
    
    .icon.bookmark{
      width: 20px;
      background-size: 14px;
      background-image: $iconBookmarkUrl;
    }
  }

  .sublevel{
    td.actions{
      text-align: right;
      .btn{
        margin: 0;
      }
    }
  }
}

.row-menu{
  float:right;
  display: inline-block;
  width: 25px;
  height: 35px;
  cursor: pointer;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  
  span{
    line-height: 35px;
    font-size: 1.1em;          
    font-weight: bold;    
  }

  ul{
    z-index: 10;
    display: none;
    margin-left: -40px;
    position: absolute;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    li{
      cursor: pointer;
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #aaa;

      &:hover{
        background-color: $clPrimary;
        color: white;
      }

      &::last-child{
        border-bottom: 0;
      }
    }
  }

  &:hover{
    ul{
      display: block;
    }
  }
}

// Helpers
.bg__bulk-actions{
  position: fixed;
  bottom: -45px;
  left: 0;
  width: 100%;
  height: 45px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  background-color: white;
  padding: 5px 10px;
  box-sizing: border-box;
  z-index: 10;

  .btn{
    margin: 0 0 0 10px;
  }

  animation: slide 0.5s forwards;
}

@keyframes slide {
    0% { bottom: -45px; }
}

@keyframes slide {
    100% { bottom: 0; }
}
.bg__pagination{
  text-align: center;
  list-style: none;
  user-select: none;
  padding: 0;
  margin-top: 20px;
  li{
    display: inline-block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 2px;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
    text-align: center;
    background-color: $clGrey;
    border-radius: 2px;
    vertical-align: top;

    &.active,&.active:hover{
      background-color: $clGreyTint;
    }

    &:hover{
      background-color: $clGreyTint;
    }

    &.prev, &.next{
      font-size: 0;
      background-position: center;
      background-repeat: no-repeat;
    }

    &.prev{
      background-image: $arrowLeftDarkUrl;
    }

    &.next{
      background-image: $arrowRightDarkUrl;
    }
  }
}
// Nasty use of !important but necessary to customize the tooltip
// https://www.npmjs.com/package/react-tooltip
.bg__custom-queryTooltip {
  z-index: 9999 !important;

  h3 {
    font-size: 20px !important;
    padding-bottom: 10px !important;
  }
  padding: 30px !important;
  background-color: rgba(0,0,0, .9) !important;

  ul {
    li {
      padding-left: 20px !important;
    }
  }
  .bg__selectedFacet-list {
    padding-left: 10px;
  }
  .bg_queryDetails-wrapper {
    padding: 10px 0;
  }
}

}