@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #ccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty,
.datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Datepicker cells
   ------------------------------------------------- */
.datepicker--cells {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.datepicker--cell {
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 32px;
  z-index: 1;
}

.datepicker--cell.-focus- {
  background: #f0f0f0;
}

.datepicker--cell.-current- {
  color: #4eb5e6;
}

.datepicker--cell.-current-.-focus- {
  color: #4a4a4a;
}

.datepicker--cell.-current-.-in-range- {
  color: #4eb5e6;
}

.datepicker--cell.-in-range- {
  background: rgba(92, 196, 239, 0.1);
  color: #4a4a4a;
  border-radius: 0;
}

.datepicker--cell.-in-range-.-focus- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell.-disabled- {
  cursor: default;
  color: #aeaeae;
}

.datepicker--cell.-disabled-.-focus- {
  color: #aeaeae;
}

.datepicker--cell.-disabled-.-in-range- {
  color: #a1a1a1;
}

.datepicker--cell.-disabled-.-current-.-focus- {
  color: #aeaeae;
}

.datepicker--cell.-range-from- {
  border: 1px solid rgba(92, 196, 239, 0.5);
  background-color: rgba(92, 196, 239, 0.1);
  border-radius: 4px 0 0 4px;
  color: #fff;
}

.datepicker--cell.-range-to- {
  border: 1px solid rgba(92, 196, 239, 0.5);
  background-color: rgba(92, 196, 239, 0.1);
  border-radius: 0 4px 4px 0;
}

.datepicker--cell.-range-from-.-range-to- {
  border-radius: 4px;
}

.datepicker--cell.-selected- {
  color: #fff;
  border: none;
  background: #5cc4ef;
}

.datepicker--cell.-selected-.-current- {
  color: #fff;
  background: #5cc4ef;
}

.datepicker--cell.-selected-.-focus- {
  background: #45bced;
}

.datepicker--cell:empty {
  cursor: default;
}

.datepicker--days-names {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 8px 0 3px;
}

.datepicker--day-name {
  color: #ff9a19;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.8em;
}

.datepicker--cell-day {
  width: 14.28571%;
}

.datepicker--cells-months {
  height: 170px;
}

.datepicker--cell-month {
  width: 33.33%;
  height: 25%;
}

.datepicker--years {
  height: 170px;
}

.datepicker--cells-years {
  height: 170px;
}

.datepicker--cell-year {
  width: 25%;
  height: 33.33%;
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #ccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty,
.datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Datepicker
   ------------------------------------------------- */
.datepickers-container {
  position: absolute;
  left: 0;
  top: 0;
}

@media print {
  .datepickers-container {
    display: none;
  }
}
.datepicker {
  background: #fff;
  border: 1px solid #dbdbdb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-sizing: content-box;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  color: #4a4a4a;
  width: 250px;
  position: absolute;
  left: -100000px;
  opacity: 0;
  transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
  z-index: 100;
}

.datepicker.-from-top- {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.datepicker.-from-right- {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

.datepicker.-from-bottom- {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

.datepicker.-from-left- {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}

.datepicker.active {
  opacity: 1;
  -webkit-transform: translate(0);
  transform: translate(0);
  transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
}

.datepicker-inline .datepicker {
  border-color: #d7d7d7;
  box-shadow: none;
  position: static;
  left: auto;
  right: auto;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.datepicker-inline .datepicker--pointer {
  display: none;
}

.datepicker--content {
  box-sizing: content-box;
  padding: 4px;
}

.-only-timepicker- .datepicker--content {
  display: none;
}

.datepicker--pointer {
  position: absolute;
  background: #fff;
  border-top: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
  width: 10px;
  height: 10px;
  z-index: -1;
}

.-top-left- .datepicker--pointer,
.-top-center- .datepicker--pointer,
.-top-right- .datepicker--pointer {
  top: calc(100% - 4px);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.-right-top- .datepicker--pointer,
.-right-center- .datepicker--pointer,
.-right-bottom- .datepicker--pointer {
  right: calc(100% - 4px);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.-bottom-left- .datepicker--pointer,
.-bottom-center- .datepicker--pointer,
.-bottom-right- .datepicker--pointer {
  bottom: calc(100% - 4px);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

.-left-top- .datepicker--pointer,
.-left-center- .datepicker--pointer,
.-left-bottom- .datepicker--pointer {
  left: calc(100% - 4px);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.-top-left- .datepicker--pointer,
.-bottom-left- .datepicker--pointer {
  left: 10px;
}

.-top-right- .datepicker--pointer,
.-bottom-right- .datepicker--pointer {
  right: 10px;
}

.-top-center- .datepicker--pointer,
.-bottom-center- .datepicker--pointer {
  left: calc(50% - 5px);
}

.-left-top- .datepicker--pointer,
.-right-top- .datepicker--pointer {
  top: 10px;
}

.-left-bottom- .datepicker--pointer,
.-right-bottom- .datepicker--pointer {
  bottom: 10px;
}

.-left-center- .datepicker--pointer,
.-right-center- .datepicker--pointer {
  top: calc(50% - 5px);
}

.datepicker--body {
  display: none;
}

.datepicker--body.active {
  display: block;
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #ccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty,
.datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Navigation
   ------------------------------------------------- */
.datepicker--nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  min-height: 32px;
  padding: 4px;
}

.-only-timepicker- .datepicker--nav {
  display: none;
}

.datepicker--nav-title,
.datepicker--nav-action {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.datepicker--nav-action {
  width: 32px;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker--nav-action:hover {
  background: #f0f0f0;
}

.datepicker--nav-action.-disabled- {
  visibility: hidden;
}

.datepicker--nav-action svg {
  width: 32px;
  height: 32px;
}

.datepicker--nav-action path {
  fill: none;
  stroke: #9c9c9c;
  stroke-width: 2px;
}

.datepicker--nav-title {
  border-radius: 4px;
  padding: 0 8px;
}

.datepicker--nav-title i {
  font-style: normal;
  color: #9c9c9c;
  margin-left: 5px;
}

.datepicker--nav-title:hover {
  background: #f0f0f0;
}

.datepicker--nav-title.-disabled- {
  cursor: default;
  background: none;
}

.datepicker--buttons {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px;
  border-top: 1px solid #efefef;
}

.datepicker--button {
  color: #4eb5e6;
  cursor: pointer;
  border-radius: 4px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 32px;
}

.datepicker--button:hover {
  color: #4a4a4a;
  background: #f0f0f0;
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #ccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty,
.datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Timepicker
   ------------------------------------------------- */
.datepicker--time {
  border-top: 1px solid #efefef;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 4px;
  position: relative;
}

.datepicker--time.-am-pm- .datepicker--time-sliders {
  -webkit-flex: 0 1 138px;
  -ms-flex: 0 1 138px;
  flex: 0 1 138px;
  max-width: 138px;
}

.-only-timepicker- .datepicker--time {
  border-top: none;
}

.datepicker--time-sliders {
  -webkit-flex: 0 1 153px;
  -ms-flex: 0 1 153px;
  flex: 0 1 153px;
  margin-right: 10px;
  max-width: 153px;
}

.datepicker--time-label {
  display: none;
  font-size: 12px;
}

.datepicker--time-current {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 14px;
  text-align: center;
  margin: 0 0 0 10px;
}

.datepicker--time-current-colon {
  margin: 0 2px 3px;
  line-height: 1;
}

.datepicker--time-current-hours,
.datepicker--time-current-minutes {
  line-height: 1;
  font-size: 19px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  position: relative;
  z-index: 1;
}

.datepicker--time-current-hours:after,
.datepicker--time-current-minutes:after {
  content: "";
  background: #f0f0f0;
  border-radius: 4px;
  position: absolute;
  left: -2px;
  top: -3px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  opacity: 0;
}

.datepicker--time-current-hours.-focus-:after,
.datepicker--time-current-minutes.-focus-:after {
  opacity: 1;
}

.datepicker--time-current-ampm {
  text-transform: uppercase;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  color: #9c9c9c;
  margin-left: 6px;
  font-size: 11px;
  margin-bottom: 1px;
}

.datepicker--time-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 11px;
  height: 17px;
  background: linear-gradient(to right, #dadee5, #dadee5) left 50%/100% 1px no-repeat;
}

.datepicker--time-row:first-child {
  margin-bottom: 4px;
}

.datepicker--time-row input[type=range] {
  background: none;
  cursor: pointer;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}

.datepicker--time-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.datepicker--time-row input[type=range]::-ms-tooltip {
  display: none;
}

.datepicker--time-row input[type=range]:hover::-webkit-slider-thumb {
  border-color: #b8b8b8;
}

.datepicker--time-row input[type=range]:hover::-moz-range-thumb {
  border-color: #b8b8b8;
}

.datepicker--time-row input[type=range]:hover::-ms-thumb {
  border-color: #b8b8b8;
}

.datepicker--time-row input[type=range]:focus {
  outline: none;
}

.datepicker--time-row input[type=range]:focus::-webkit-slider-thumb {
  background: #5cc4ef;
  border-color: #5cc4ef;
}

.datepicker--time-row input[type=range]:focus::-moz-range-thumb {
  background: #5cc4ef;
  border-color: #5cc4ef;
}

.datepicker--time-row input[type=range]:focus::-ms-thumb {
  background: #5cc4ef;
  border-color: #5cc4ef;
}

.datepicker--time-row input[type=range]::-webkit-slider-thumb {
  box-sizing: border-box;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  border: 1px solid #dadee5;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.datepicker--time-row input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  border: 1px solid #dadee5;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.datepicker--time-row input[type=range]::-ms-thumb {
  box-sizing: border-box;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  border: 1px solid #dadee5;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.datepicker--time-row input[type=range]::-webkit-slider-thumb {
  margin-top: -6px;
}

.datepicker--time-row input[type=range]::-webkit-slider-runnable-track {
  border: none;
  height: 1px;
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.datepicker--time-row input[type=range]::-moz-range-track {
  border: none;
  height: 1px;
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.datepicker--time-row input[type=range]::-ms-track {
  border: none;
  height: 1px;
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.datepicker--time-row input[type=range]::-ms-fill-lower {
  background: transparent;
}

.datepicker--time-row input[type=range]::-ms-fill-upper {
  background: transparent;
}

.datepicker--time-row span {
  padding: 0 12px;
}

.datepicker--time-icon {
  color: #9c9c9c;
  border: 1px solid;
  border-radius: 50%;
  font-size: 16px;
  position: relative;
  margin: 0 5px -1px 0;
  width: 1em;
  height: 1em;
}

.datepicker--time-icon:after,
.datepicker--time-icon:before {
  content: "";
  background: currentColor;
  position: absolute;
}

.datepicker--time-icon:after {
  height: 0.4em;
  width: 1px;
  left: calc(50% - 1px);
  top: calc(50% + 1px);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.datepicker--time-icon:before {
  width: 0.4em;
  height: 1px;
  top: calc(50% + 1px);
  left: calc(50% - 1px);
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dadee5;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #ccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty,
.datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

.datepicker--full-width {
  width: 100%;
}

/* ------------------- Default Style ------------------------- */
.gauge-container {
  width: 200px;
  height: 100px;
  display: block;
  float: left;
  padding: 10px;
  overflow: hidden;
}

.gauge-container.one > .gauge > .dial {
  stroke: #334455;
  stroke-width: 2;
}

.gauge-container.one > .gauge > .value {
  stroke: rgb(47, 227, 255);
  stroke-width: 2;
}

.gauge-container.one > .gauge > .value-text {
  fill: rgb(47, 227, 255);
  font-family: sans, "sans-serif";
  font-weight: bold;
  font-size: 0.6em;
}

/* ------------------- Alternate Style ------------------------- */
.gauge-container.two {
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gauge-container.two > .gauge > .dial {
  stroke: #334455;
  stroke-width: 10;
}

.gauge-container.two > .gauge > .value {
  /*stroke: orange;*/
  stroke-dasharray: none;
  stroke-width: 13;
}

.gauge-container.two > .gauge > .value {
  /*fill: orange;*/
}

/* ------------------- Alternate Style 2 ------------------------- */
.gauge-container.three > .gauge > .dial {
  stroke: #334455;
  stroke-width: 2;
  /*stroke-dasharray: 125, 20;*/
}

.gauge-container.three > .gauge > .value {
  stroke: #C9DE3C;
  stroke-width: 5;
  /*stroke-dasharray: 125, 20;*/
}

.gauge-container.three > .gauge > .value-text {
  fill: #C9DE3C;
}

/* ------------------- Alternate Style 2 ------------------------- */
.gauge-container.four > .gauge > .dial {
  stroke: #334455;
  fill: "#334455";
  stroke-width: 5;
}

.gauge-container.four > .gauge > .value {
  stroke: #BE80FF;
  stroke-dasharray: none;
  stroke-width: 5;
}

.gauge-container.four > .gauge > .value-text {
  fill: #BE80FF;
}

.gauge-container.five > .gauge > .dial {
  stroke: #334455;
  fill: "#334455";
  stroke-width: 5;
}

.gauge-container.five > .gauge > .value {
  stroke: #F8774B;
  stroke-dasharray: none;
  stroke-width: 5;
}

.gauge-container.five > .gauge > .value-text {
  fill: #F8774B;
  font-size: 0.7em;
}

.gauge-container.six > .gauge > .dial {
  stroke: #334455;
  fill: "#334455";
  stroke-dasharray: 110 10;
  stroke-width: 5;
}

.gauge-container.six > .gauge > .value {
  stroke: #FF6DAF;
  stroke-dasharray: 10 1;
  stroke-width: 5.2;
}

.gauge-container.six > .gauge > .value-text {
  fill: #FF6DAF;
  font-size: 0.7em;
}

.noty_layout_mixin,
#noty_layout__top,
#noty_layout__topLeft,
#noty_layout__topCenter,
#noty_layout__topRight,
#noty_layout__bottom,
#noty_layout__bottomLeft,
#noty_layout__bottomCenter,
#noty_layout__bottomRight,
#noty_layout__center,
#noty_layout__centerLeft,
#noty_layout__centerRight {
  position: fixed;
  margin: 0;
  padding: 0;
  z-index: 9999999;
  -webkit-transform: translateZ(0) scale(1, 1);
  transform: translateZ(0) scale(1, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  filter: blur(0);
  -webkit-filter: blur(0);
  max-width: 90%;
}

#noty_layout__top {
  top: 0;
  left: 5%;
  width: 90%;
}

#noty_layout__topLeft {
  top: 20px;
  left: 20px;
  width: 325px;
}

#noty_layout__topCenter {
  top: 5%;
  left: 50%;
  width: 325px;
  -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
  transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
}

#noty_layout__topRight {
  top: 120px;
  right: 10px;
  width: 325px;
}

#noty_layout__bottom {
  bottom: 0;
  left: 5%;
  width: 90%;
}

#noty_layout__bottomLeft {
  bottom: 20px;
  left: 20px;
  width: 325px;
}

#noty_layout__bottomCenter {
  bottom: 5%;
  left: 50%;
  width: 325px;
  -webkit-transform: translate(-webkit-calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
  transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
}

#noty_layout__bottomRight {
  bottom: 20px;
  right: 20px;
  width: 325px;
}

#noty_layout__center {
  top: 50%;
  left: 50%;
  width: 325px;
  -webkit-transform: translate(-webkit-calc(-50% - 0.5px), -webkit-calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
  transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
}

#noty_layout__centerLeft {
  top: 50%;
  left: 20px;
  width: 325px;
  -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
  transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
}

#noty_layout__centerRight {
  top: 50%;
  right: 20px;
  width: 325px;
  -webkit-transform: translate(0, -webkit-calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
  transform: translate(0, calc(-50% - 0.5px)) translateZ(0) scale(1, 1);
}

.noty_progressbar {
  display: none;
}

.noty_has_timeout.noty_has_progressbar .noty_progressbar {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: #646464;
  opacity: 0.2;
  filter: alpha(opacity=10);
}

.noty_bar {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
  -ms-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
  -webkit-font-smoothing: subpixel-antialiased;
  overflow: hidden;
}

.noty_effects_open {
  opacity: 0;
  -webkit-transform: translate(50%);
  -ms-transform: translate(50%);
  transform: translate(50%);
  -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.noty_effects_close {
  -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.noty_fix_effects_height {
  -webkit-animation: noty_anim_height 75ms ease-out;
  animation: noty_anim_height 75ms ease-out;
}

.noty_close_with_click {
  cursor: pointer;
}

.noty_close_button {
  position: absolute;
  top: 2px;
  right: 2px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.noty_close_button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.noty_modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 10000;
  opacity: 0.3;
  left: 0;
  top: 0;
}

.noty_modal.noty_modal_open {
  opacity: 0;
  -webkit-animation: noty_modal_in 0.3s ease-out;
  animation: noty_modal_in 0.3s ease-out;
}

.noty_modal.noty_modal_close {
  -webkit-animation: noty_modal_out 0.3s ease-out;
  animation: noty_modal_out 0.3s ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes noty_modal_in {
  100% {
    opacity: 0.3;
  }
}
@keyframes noty_modal_in {
  100% {
    opacity: 0.3;
  }
}
@-webkit-keyframes noty_modal_out {
  100% {
    opacity: 0;
  }
}
@keyframes noty_modal_out {
  100% {
    opacity: 0;
  }
}
@keyframes noty_modal_out {
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes noty_anim_in {
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
    opacity: 1;
  }
}
@keyframes noty_anim_in {
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
    opacity: 1;
  }
}
@-webkit-keyframes noty_anim_out {
  100% {
    -webkit-transform: translate(50%);
    transform: translate(50%);
    opacity: 0;
  }
}
@keyframes noty_anim_out {
  100% {
    -webkit-transform: translate(50%);
    transform: translate(50%);
    opacity: 0;
  }
}
@-webkit-keyframes noty_anim_height {
  100% {
    height: 0;
  }
}
@keyframes noty_anim_height {
  100% {
    height: 0;
  }
}
.noty_theme__relax.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}

.noty_theme__relax.noty_bar .noty_body {
  padding: 10px;
}

.noty_theme__relax.noty_bar .noty_buttons {
  border-top: 1px solid #e7e7e7;
  padding: 5px 10px;
}

.noty_theme__relax.noty_type__alert,
.noty_theme__relax.noty_type__notification {
  background-color: #ffffff;
  border: 1px solid #dadee5;
  color: #444;
}

.noty_theme__relax.noty_type__warning {
  background-color: #ffeaa8;
  border: 1px solid #ffc237;
  color: #826200;
}

.noty_theme__relax.noty_type__warning .noty_buttons {
  border-color: #dfaa30;
}

.noty_theme__relax.noty_type__error {
  background-color: #ff8181;
  border: 1px solid #e25353;
  color: #ffffff;
}

.noty_theme__relax.noty_type__error .noty_buttons {
  border-color: darkred;
}

.noty_theme__relax.noty_type__info,
.noty_theme__relax.noty_type__information {
  background-color: #78c5e7;
  border: 1px solid #3badd6;
  color: #ffffff;
}

.noty_theme__relax.noty_type__info .noty_buttons,
.noty_theme__relax.noty_type__information .noty_buttons {
  border-color: #0b90c4;
}

.noty_theme__relax.noty_type__success {
  background-color: #bcf5bc;
  border: 1px solid #7cdd77;
  color: darkgreen;
}

.noty_theme__relax.noty_type__success .noty_buttons {
  border-color: #50c24e;
}

.noty_theme__metroui.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.298039) 0 0 5px 0;
}

.noty_theme__metroui.noty_bar .noty_progressbar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: #000;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.noty_theme__metroui.noty_bar .noty_body {
  padding: 2rem;
  font-size: 14px;
}

.noty_theme__metroui.noty_bar .noty_buttons {
  padding: 0 10px 0.8rem 10px;
}

.noty_theme__metroui.noty_type__alert,
.noty_theme__metroui.noty_type__notification {
  background-color: #ffffff;
  color: #1d1d1d;
}

.noty_theme__metroui.noty_type__warning {
  background-color: #fa6800;
  color: #ffffff;
}

.noty_theme__metroui.noty_type__error {
  background-color: #ce352c;
  color: #ffffff;
}

.noty_theme__metroui.noty_type__info,
.noty_theme__metroui.noty_type__information {
  background-color: #1ba1e2;
  color: #ffffff;
}

.noty_theme__metroui.noty_type__success {
  background-color: #60a917;
  color: #ffffff;
}

.noty_theme__mint.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}

.noty_theme__mint.noty_bar .noty_body {
  padding: 10px;
  font-size: 14px;
}

.noty_theme__mint.noty_bar .noty_buttons {
  padding: 10px;
}

.noty_theme__mint.noty_type__alert,
.noty_theme__mint.noty_type__notification {
  background-color: #ffffff;
  border-bottom: 1px solid #d1d1d1;
  color: #2f2f2f;
}

.noty_theme__mint.noty_type__warning {
  background-color: #ffae42;
  border-bottom: 1px solid #e89f3c;
  color: #ffffff;
}

.noty_theme__mint.noty_type__error {
  background-color: #de636f;
  border-bottom: 1px solid #ca5a65;
  color: #ffffff;
}

.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
  background-color: #7f7eff;
  border-bottom: 1px solid #7473e8;
  color: #ffffff;
}

.noty_theme__mint.noty_type__success {
  background-color: #afc765;
  border-bottom: 1px solid #a0b55c;
  color: #ffffff;
}

.noty_theme__sunset.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
}

.noty_theme__sunset.noty_bar .noty_body {
  padding: 10px;
  font-size: 14px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.noty_theme__sunset.noty_bar .noty_buttons {
  padding: 10px;
}

.noty_theme__sunset.noty_type__alert,
.noty_theme__sunset.noty_type__notification {
  background-color: #073b4c;
  color: #ffffff;
}

.noty_theme__sunset.noty_type__alert .noty_progressbar,
.noty_theme__sunset.noty_type__notification .noty_progressbar {
  background-color: #ffffff;
}

.noty_theme__sunset.noty_type__warning {
  background-color: #ffd166;
  color: #ffffff;
}

.noty_theme__sunset.noty_type__error {
  background-color: #ef476f;
  color: #ffffff;
}

.noty_theme__sunset.noty_type__error .noty_progressbar {
  opacity: 0.4;
}

.noty_theme__sunset.noty_type__info,
.noty_theme__sunset.noty_type__information {
  background-color: #118ab2;
  color: #ffffff;
}

.noty_theme__sunset.noty_type__info .noty_progressbar,
.noty_theme__sunset.noty_type__information .noty_progressbar {
  opacity: 0.6;
}

.noty_theme__sunset.noty_type__success {
  background-color: #06d6a0;
  color: #ffffff;
}

.noty_theme__bootstrap-v3.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  border-radius: 4px;
}

.noty_theme__bootstrap-v3.noty_bar .noty_body {
  padding: 15px;
}

.noty_theme__bootstrap-v3.noty_bar .noty_buttons {
  padding: 10px;
}

.noty_theme__bootstrap-v3.noty_bar .noty_close_button {
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=20);
  opacity: 0.2;
  background: transparent;
}

.noty_theme__bootstrap-v3.noty_bar .noty_close_button:hover {
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.noty_theme__bootstrap-v3.noty_type__alert,
.noty_theme__bootstrap-v3.noty_type__notification {
  background-color: #ffffff;
  color: inherit;
}

.noty_theme__bootstrap-v3.noty_type__warning {
  background-color: #fcf8e3;
  color: #8a6d3b;
  border-color: #faebcc;
}

.noty_theme__bootstrap-v3.noty_type__error {
  background-color: #f2dede;
  color: #a94442;
  border-color: #ebccd1;
}

.noty_theme__bootstrap-v3.noty_type__info,
.noty_theme__bootstrap-v3.noty_type__information {
  background-color: #d9edf7;
  color: #31708f;
  border-color: #bce8f1;
}

.noty_theme__bootstrap-v3.noty_type__success {
  background-color: #dff0d8;
  color: #3c763d;
  border-color: #d6e9c6;
}

.noty_theme__bootstrap-v4.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.noty_theme__bootstrap-v4.noty_bar .noty_body {
  padding: 0.75rem 1.25rem;
}

.noty_theme__bootstrap-v4.noty_bar .noty_buttons {
  padding: 10px;
}

.noty_theme__bootstrap-v4.noty_bar .noty_close_button {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=20);
  opacity: 0.5;
  background: transparent;
}

.noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover {
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.75;
}

.noty_theme__bootstrap-v4.noty_type__alert,
.noty_theme__bootstrap-v4.noty_type__notification {
  background-color: #ffffff;
  color: inherit;
}

.noty_theme__bootstrap-v4.noty_type__warning {
  background-color: #fcf8e3;
  color: #8a6d3b;
  border-color: #faebcc;
}

.noty_theme__bootstrap-v4.noty_type__error {
  background-color: #f2dede;
  color: #a94442;
  border-color: #ebccd1;
}

.noty_theme__bootstrap-v4.noty_type__info,
.noty_theme__bootstrap-v4.noty_type__information {
  background-color: #d9edf7;
  color: #31708f;
  border-color: #bce8f1;
}

.noty_theme__bootstrap-v4.noty_type__success {
  background-color: #dff0d8;
  color: #3c763d;
  border-color: #d6e9c6;
}

.noty_theme__semanticui.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  font-size: 1.6rem;
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 transparent;
}

.noty_theme__semanticui.noty_bar .noty_body {
  padding: 1.6rem 2.4rem;
  line-height: 2.28rem;
}

.noty_theme__semanticui.noty_bar .noty_buttons {
  padding: 10px;
}

.noty_theme__semanticui.noty_type__alert,
.noty_theme__semanticui.noty_type__notification {
  background-color: #f8f8f9;
  color: rgba(0, 0, 0, 0.87);
}

.noty_theme__semanticui.noty_type__warning {
  background-color: #fffaf3;
  color: #573a08;
  box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 transparent;
}

.noty_theme__semanticui.noty_type__error {
  background-color: #fff6f6;
  color: #9f3a38;
  box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
}

.noty_theme__semanticui.noty_type__info,
.noty_theme__semanticui.noty_type__information {
  background-color: #f8ffff;
  color: #276f86;
  box-shadow: 0 0 0 1px #a9d5de inset, 0 0 0 0 transparent;
}

.noty_theme__semanticui.noty_type__success {
  background-color: #fcfff5;
  color: #2c662d;
  box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 transparent;
}

.noty_theme__nest.noty_bar {
  margin: 0 0 15px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.098039) 5px 4px 10px 0;
}

.noty_theme__nest.noty_bar .noty_body {
  padding: 10px;
  font-size: 14px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.noty_theme__nest.noty_bar .noty_buttons {
  padding: 10px;
}

.noty_layout .noty_theme__nest.noty_bar {
  z-index: 5;
}

.noty_layout .noty_theme__nest.noty_bar:nth-child(2) {
  position: absolute;
  top: 0;
  margin-top: 4px;
  margin-right: -4px;
  margin-left: 4px;
  z-index: 4;
  width: 100%;
}

.noty_layout .noty_theme__nest.noty_bar:nth-child(3) {
  position: absolute;
  top: 0;
  margin-top: 8px;
  margin-right: -8px;
  margin-left: 8px;
  z-index: 3;
  width: 100%;
}

.noty_layout .noty_theme__nest.noty_bar:nth-child(4) {
  position: absolute;
  top: 0;
  margin-top: 12px;
  margin-right: -12px;
  margin-left: 12px;
  z-index: 2;
  width: 100%;
}

.noty_layout .noty_theme__nest.noty_bar:nth-child(5) {
  position: absolute;
  top: 0;
  margin-top: 16px;
  margin-right: -16px;
  margin-left: 16px;
  z-index: 1;
  width: 100%;
}

.noty_layout .noty_theme__nest.noty_bar:nth-child(n+6) {
  position: absolute;
  top: 0;
  margin-top: 20px;
  margin-right: -20px;
  margin-left: 20px;
  z-index: -1;
  width: 100%;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(2),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(2) {
  margin-top: 4px;
  margin-left: -4px;
  margin-right: 4px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(3),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(3) {
  margin-top: 8px;
  margin-left: -8px;
  margin-right: 8px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(4),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(4) {
  margin-top: 12px;
  margin-left: -12px;
  margin-right: 12px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(5),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(5) {
  margin-top: 16px;
  margin-left: -16px;
  margin-right: 16px;
}

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(n+6),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(n+6) {
  margin-top: 20px;
  margin-left: -20px;
  margin-right: 20px;
}

.noty_theme__nest.noty_type__alert,
.noty_theme__nest.noty_type__notification {
  background-color: #073b4c;
  color: #ffffff;
}

.noty_theme__nest.noty_type__alert .noty_progressbar,
.noty_theme__nest.noty_type__notification .noty_progressbar {
  background-color: #ffffff;
}

.noty_theme__nest.noty_type__warning {
  background-color: #ffd166;
  color: #ffffff;
}

.noty_theme__nest.noty_type__error {
  background-color: #ef476f;
  color: #ffffff;
}

.noty_theme__nest.noty_type__error .noty_progressbar {
  opacity: 0.4;
}

.noty_theme__nest.noty_type__info,
.noty_theme__nest.noty_type__information {
  background-color: #118ab2;
  color: #ffffff;
}

.noty_theme__nest.noty_type__info .noty_progressbar,
.noty_theme__nest.noty_type__information .noty_progressbar {
  opacity: 0.6;
}

.noty_theme__nest.noty_type__success {
  background-color: #06d6a0;
  color: #ffffff;
}

/* sourceMappingURL=noty.css.map*/
/*--------- CUSTOM THEME ----------*/
.noty_theme__cts.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  border-radius: 2px;
}

.noty_theme__cts.noty_bar .noty_body {
  padding: 12px 15px;
}

.noty_theme__cts.noty_bar .noty_buttons {
  padding: 10px;
}

.noty_theme__cts.noty_bar .noty_close_button {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=20);
  opacity: 0.5;
  background: transparent;
}

.noty_theme__cts.noty_bar .noty_close_button:hover {
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.75;
}

.noty_theme__cts h4 {
  font-weight: 500;
}

.noty_theme__cts.noty_type__alert,
.noty_theme__cts.noty_type__notification {
  background-color: #ffffff;
  color: inherit;
}

.noty_theme__cts.noty_type__warning {
  background-color: #f0af7a;
  color: #000000;
  border-color: #c7a357;
}

.noty_theme__cts.noty_type__error {
  background-color: #f17270;
  color: #ffffff !important;
  border-color: #d86c6c;
}

.noty_theme__cts h5 {
  color: #ffffff !important;
}

.noty_theme__cts.noty_type__info,
.noty_theme__cts.noty_type__information {
  background-color: #e4e6ee;
  color: #4c5259;
  border-color: #98b8c7;
}

.noty_theme__cts.noty_type__success {
  background-color: #5ed990;
  color: #4c5259;
  border-color: #59cd89;
}

/* ------ Noty Extra ------ */
.noty_layout {
  z-index: 14 !important;
  text-align: right;
}

.noty_layout h1 {
  display: block;
  text-align: left;
  color: inherit;
  font-size: 1.4rem;
  font-weight: 500;
}

.noty_layout h2 {
  display: block;
  text-align: left;
  color: inherit;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: none;
  margin-top: 0.7rem;
}

.noty_layout button {
  margin-top: 1rem;
  margin-left: auto;
  margin-right: 0;
  padding: 1.1rem 1.3rem;
  border-radius: 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  padding-left: 3.4rem;
  background-repeat: no-repeat;
  background-size: 1.7rem;
  background-position: center left 1rem;
}

.noty_layout button.no-icon {
  background-image: none;
  padding-left: 1.1rem;
  border: 0.1rem solid rgba(0, 0, 0, 0.15);
}

.noty_layout button.cancel {
  background-image: url("/svg/icon/cancel.svg?c=a48669");
}

.noty_layout > div.noty_type__warning button {
  background-color: #f0af7a;
  border: 0.1rem solid #c79d74;
  background-image: url("/svg/icon/cancel.svg?c=8e745c");
}

.noty_layout > div.noty_type__warning button.no-icon {
  background-image: none;
  padding-left: 1.1rem;
}

.noty_layout > div.noty_type__warning button.preferences {
  background-color: #f0af7a;
  border: 0.1rem solid #c79d74;
  background-image: url("/svg/icon/preferences.svg?c=8e745c");
}

.noty_layout > div.noty_type__warning button.device {
  background-color: #f0af7a;
  border: 0.1rem solid #c79d74;
  background-image: url("/svg/icon/device.svg?c=8e745c");
}

.noty_layout > div.noty_type__warning button.add {
  background-color: #f0af7a;
  border: 0.1rem solid #c79d74;
  background-image: url("/svg/icon/add.svg?c=a48669");
}

.noty_layout > div.noty_type__warning button.settings {
  background-color: #f0af7a;
  border: 0.1rem solid #c79d74;
  background-image: url("/svg/icon/settings.svg?c=a48669");
}

.noty_layout > div.noty_type__warning button.fuel {
  background-color: #f0af7a;
  border: 0.1rem solid #c79d74;
  background-image: url("/svg/icon/fuel.svg?c=a48669");
}

.noty_layout > div.noty_type__warning button:hover {
  background-color: #daab7e;
}

.noty_layout > div.noty_type__error button {
  background-color: rgb(229, 114, 114);
  border: 0.1rem solid #b3605f;
  padding-left: 1.3rem;
}

.noty_layout > div.noty_type__error button:hover {
  background-color: #cf6a69;
}

.noty_layout ul {
  padding-left: 1rem;
  text-align: left;
}

.noty_layout ul > li {
  list-style: disc !important;
  color: inherit;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: none;
  margin-top: 0.7rem;
  text-align: left;
}

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}

.select2-container .select2-selection--single {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  padding-left: 8px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-container .select2-selection--single .select2-selection__clear {
  position: relative;
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
  padding-right: 8px;
  padding-left: 20px;
}

.select2-container .select2-selection--multiple {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  min-height: 32px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: inline-block;
  overflow: hidden;
  padding-left: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-container .select2-search--inline {
  float: left;
}

.select2-container .select2-search--inline .select2-search__field {
  box-sizing: border-box;
  border: none;
  font-size: 100%;
  margin-top: 5px;
  padding: 0;
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051;
}

.select2-results {
  display: block;
}

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-results__option[aria-selected] {
  cursor: pointer;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-search--dropdown {
  display: block;
  padding: 4px;
}

.select2-search--dropdown .select2-search__field {
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.select2-search--dropdown.select2-search--hide {
  display: none;
}

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #9e9fa0 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
  display: none;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #9e9fa0 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0 5px;
  width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
  list-style: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #999;
  margin-top: 5px;
  float: left;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  margin-top: 5px;
  margin-right: 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #999;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #333;
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline {
  float: right;
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
}

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--default .select2-results__option[role=group] {
  padding: 0;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999;
}

ul.select2-results__options#select2-filter_aggregate-results .select2-results__option[aria-disabled=true] {
  display: none;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd;
}

.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
  padding-left: 0;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -1em;
  padding-left: 2em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -2em;
  padding-left: 3em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -3em;
  padding-left: 4em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -4em;
  padding-left: 5em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -5em;
  padding-left: 6em;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #5897fb;
  color: white;
}

.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic .select2-selection--single {
  background-color: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: 0;
  background-image: -webkit-linear-gradient(top, white 50%, #e6eaf2 100%);
  background-image: -o-linear-gradient(top, white 50%, #e6eaf2 100%);
  background-image: linear-gradient(to bottom, white 50%, #e6eaf2 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0);
}

.select2-container--classic .select2-selection--single:focus {
  border: 1px solid #5897fb;
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 28px;
}

.select2-container--classic .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  margin-right: 10px;
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
  color: #999;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
  background-color: #ddd;
  border: none;
  border-left: 1px solid #aaa;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 26px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 20px;
  background-image: -webkit-linear-gradient(top, #e6eaf2 50%, #ccc 100%);
  background-image: -o-linear-gradient(top, #e6eaf2 50%, #ccc 100%);
  background-image: linear-gradient(to bottom, #e6eaf2 50%, #ccc 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFCCCCCC", GradientType=0);
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b {
  border-color: #9e9fa0 transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
  border: none;
  border-right: 1px solid #aaa;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
  right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--single {
  border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
  background: transparent;
  border: none;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #9e9fa0 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: -webkit-linear-gradient(top, white 0%, #e6eaf2 50%);
  background-image: -o-linear-gradient(top, white 0%, #e6eaf2 50%);
  background-image: linear-gradient(to bottom, white 0%, #e6eaf2 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0);
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #e6eaf2 50%, white 100%);
  background-image: -o-linear-gradient(top, #e6eaf2 50%, white 100%);
  background-image: linear-gradient(to bottom, #e6eaf2 50%, white 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFFFFFFF", GradientType=0);
}

.select2-container--classic .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0;
}

.select2-container--classic .select2-selection--multiple:focus {
  border: 1px solid #5897fb;
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
  list-style: none;
  margin: 0;
  padding: 0 5px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__clear {
  display: none;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
  color: #9e9fa0;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 2px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #555;
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
  float: right;
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
  border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: 0;
}

.select2-container--classic .select2-search--inline .select2-search__field {
  outline: 0;
  box-shadow: none;
}

.select2-container--classic .select2-dropdown {
  background-color: white;
  border: 1px solid transparent;
}

.select2-container--classic .select2-dropdown--above {
  border-bottom: none;
}

.select2-container--classic .select2-dropdown--below {
  border-top: none;
}

.select2-container--classic .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--classic .select2-results__option[role=group] {
  padding: 0;
}

.select2-container--classic .select2-results__option[aria-disabled=true] {
  color: grey;
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background-color: #3875d7;
  color: white;
}

.select2-container--classic .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb;
}

/* This is the core CSS of Tooltipster */
/* GENERAL STRUCTURE RULES (do not edit this section) */
.tooltipster-base {
  /* this ensures that a constrained height set by functionPosition,
  if greater that the natural height of the tooltip, will be enforced
  in browsers that support display:flex */
  display: flex;
  pointer-events: none;
  /* this may be overriden in JS for fixed position origins */
  position: absolute;
  overflow: hidden;
}

.tooltipster-box {
  /* see .tooltipster-base. flex-shrink 1 is only necessary for IE10-
  and flex-basis auto for IE11- (at least) */
  flex: 1 1 auto;
}

.tooltipster-content {
  /* prevents an overflow if the user adds padding to the div */
  box-sizing: border-box;
  /* these make sure we'll be able to detect any overflow */
  max-height: 100%;
  max-width: 250px;
  overflow: auto;
}

.tooltipster-ruler {
  /* these let us test the size of the tooltip without overflowing the window */
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
}

/* ANIMATIONS */
/* Open/close animations */
/* fade */
.tooltipster-fade {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -ms-transition-property: opacity;
  transition-property: opacity;
}

.tooltipster-fade.tooltipster-show {
  opacity: 1;
}

/* grow */
.tooltipster-grow {
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-backface-visibility: hidden;
}

.tooltipster-grow.tooltipster-show {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

/* swing */
.tooltipster-swing {
  opacity: 0;
  -webkit-transform: rotateZ(4deg);
  -moz-transform: rotateZ(4deg);
  -o-transform: rotateZ(4deg);
  -ms-transform: rotateZ(4deg);
  transform: rotateZ(4deg);
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
}

.tooltipster-swing.tooltipster-show {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  -o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
  transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
}

/* fall */
.tooltipster-fall {
  -webkit-transition-property: top;
  -moz-transition-property: top;
  -o-transition-property: top;
  -ms-transition-property: top;
  transition-property: top;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-fall.tooltipster-initial {
  top: 0 !important;
}

.tooltipster-fall.tooltipster-dying {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  top: 0 !important;
  opacity: 0;
}

/* slide */
.tooltipster-slide {
  -webkit-transition-property: left;
  -moz-transition-property: left;
  -o-transition-property: left;
  -ms-transition-property: left;
  transition-property: left;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-slide.tooltipster-initial {
  left: -40px !important;
}

.tooltipster-slide.tooltipster-dying {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  left: 0 !important;
  opacity: 0;
}

/* Update animations */
/* We use animations rather than transitions here because
 transition durations may be specified in the style tag due to
 animationDuration, and we try to avoid collisions and the use
 of !important */
/* fade */
@keyframes tooltipster-fading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tooltipster-update-fade {
  animation: tooltipster-fading 400ms;
}

/* rotate */
@keyframes tooltipster-rotating {
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0);
  }
}
.tooltipster-update-rotate {
  animation: tooltipster-rotating 600ms;
}

/* scale */
@keyframes tooltipster-scaling {
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.tooltipster-update-scale {
  animation: tooltipster-scaling 600ms;
}

/**
 * DEFAULT STYLE OF THE SIDETIP PLUGIN
 *
 * All styles are "namespaced" with .tooltipster-sidetip to prevent
 * conflicts between plugins.
 */
/* .tooltipster-box */
.tooltipster-sidetip .tooltipster-box {
  background: #666666;
  border: 1px solid #666666;
  border-radius: 2px;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
  margin-top: 6px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-box {
  margin-right: 6px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-box {
  margin-left: 6px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-box {
  margin-bottom: 6px;
}

/* .tooltipster-content */
.tooltipster-sidetip .tooltipster-content {
  color: white;
  line-height: 18px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 300;
}

/* .tooltipster-arrow : will keep only the zone of .tooltipster-arrow-uncropped that
corresponds to the arrow we want to display */
.tooltipster-sidetip .tooltipster-arrow {
  overflow: hidden;
  position: absolute;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
  height: 10px;
  /* half the width, for centering */
  margin-left: -10px;
  top: 0;
  width: 20px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
  height: 20px;
  margin-top: -10px;
  right: 0;
  /* top 0 to keep the arrow from overflowing .tooltipster-base when it has not
  been positioned yet */
  top: 0;
  width: 10px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
  height: 20px;
  margin-top: -10px;
  left: 0;
  /* same as .tooltipster-left .tooltipster-arrow */
  top: 0;
  width: 10px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
  bottom: 0;
  height: 10px;
  margin-left: -10px;
  width: 20px;
}

/* common rules between .tooltipster-arrow-background and .tooltipster-arrow-border */
.tooltipster-sidetip .tooltipster-arrow-background,
.tooltipster-sidetip .tooltipster-arrow-border {
  height: 0;
  position: absolute;
  width: 0;
}

/* .tooltipster-arrow-background */
.tooltipster-sidetip .tooltipster-arrow-background {
  border: 10px solid transparent;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #666666;
  left: 0px;
  top: 1px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
  border-left-color: #666666;
  left: -1px;
  top: 0px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
  border-right-color: #666666;
  left: 1px;
  top: 0px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #666666;
  left: 0px;
  top: -1px;
}

/* .tooltipster-arrow-border */
.tooltipster-sidetip .tooltipster-arrow-border {
  border: 10px solid transparent;
  left: 0;
  top: 0;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: #666666;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
  border-left-color: #666666;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
  border-right-color: #666666;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #666666;
}

/* tooltipster-arrow-uncropped */
.tooltipster-sidetip .tooltipster-arrow-uncropped {
  position: relative;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
  top: -10px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
  left: -10px;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {

}
========================================== */
.icon-alert {
  width: 0.8662109375em;
}

.icon-checked {
  width: 1.0146484375em;
}

.icon-cursor {
  width: 1.0986328125em;
}

.icon-disabled {
  width: 0.9990234375em;
}

.icon-flow_return {
  width: 1.279296875em;
}

.icon-flow {
  width: 0.9326171875em;
}

.icon-humidity {
  width: 0.96484375em;
}

.icon-inalarm {
  width: 1.1416015625em;
}

.icon-mapholder {
  width: 0.982421875em;
}

.icon-motion {
  width: 1.0009765625em;
}

.icon-ok {
  width: 1.1513671875em;
}

.icon-particulate {
  width: 1.048828125em;
}

.icon-pending-2 {
  width: 1.0146484375em;
}

.icon-read {
  width: 1.0009765625em;
}

.icon-reload {
  width: 0.8720703125em;
}

.icon-return {
  width: 0.9326171875em;
}

.icon-search {
  width: 1.0009765625em;
}

.icon-shield_warning {
  width: 0.873046875em;
}

.icon-volume {
  width: 0.7919921875em;
}

.icon-watchlist_add {
  width: 1.0517578125em;
}

.icon-watchlist_remove {
  width: 1.0517578125em;
}

.icon-watchlist {
  width: 1.119140625em;
}

/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;
  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;
  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;
  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;
  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;
  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}

.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;
  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;
  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;
  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;
  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}

.react-flow__background {
  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}

.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.react-flow__pane {
  z-index: 1;
}

.react-flow__pane.draggable {
  cursor: grab;
}

.react-flow__pane.dragging {
  cursor: grabbing;
}

.react-flow__pane.selection {
  cursor: pointer;
}

.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}

.react-flow__renderer {
  z-index: 4;
}

.react-flow__selection {
  z-index: 6;
}

.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}

.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}

.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}

.react-flow .react-flow__edges {
  position: absolute;
}

.react-flow .react-flow__edges svg {
  overflow: visible;
  position: absolute;
  pointer-events: none;
}

.react-flow__edge {
  pointer-events: visibleStroke;
}

.react-flow__edge.selectable {
  cursor: pointer;
}

.react-flow__edge.animated path {
  stroke-dasharray: 5;
  animation: dashdraw 0.5s linear infinite;
}

.react-flow__edge.animated path.react-flow__edge-interaction {
  stroke-dasharray: none;
  animation: none;
}

.react-flow__edge.inactive {
  pointer-events: none;
}

.react-flow__edge.selected,
.react-flow__edge:focus,
.react-flow__edge:focus-visible {
  outline: none;
}

.react-flow__edge.selected .react-flow__edge-path,
.react-flow__edge.selectable:focus .react-flow__edge-path,
.react-flow__edge.selectable:focus-visible .react-flow__edge-path {
  stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
}

.react-flow__edge-textwrapper {
  pointer-events: all;
}

.react-flow__edge .react-flow__edge-text {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.react-flow__connection {
  pointer-events: none;
}

.react-flow__connection .animated {
  stroke-dasharray: 5;
  animation: dashdraw 0.5s linear infinite;
}

svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}

.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}

.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}

.react-flow__node.selectable {
  cursor: pointer;
}

.react-flow__node.draggable {
  cursor: grab;
  pointer-events: all;
}

.react-flow__node.draggable.dragging {
  cursor: grabbing;
}

.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}

.react-flow__nodesselection-rect {
  position: absolute;
  pointer-events: all;
  cursor: grab;
}

.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}

.react-flow__handle.connectingfrom {
  pointer-events: all;
}

.react-flow__handle.connectionindicator {
  pointer-events: all;
  cursor: crosshair;
}

.react-flow__handle-bottom {
  top: auto;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}

.react-flow__handle-top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.react-flow__handle-left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.react-flow__handle-right {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}

.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}

.react-flow__panel.top {
  top: 0;
}

.react-flow__panel.bottom {
  bottom: 0;
}

.react-flow__panel.top.center, .react-flow__panel.bottom.center {
  left: 50%;
  transform: translateX(-50%);
}

.react-flow__panel.left {
  left: 0;
}

.react-flow__panel.right {
  right: 0;
}

.react-flow__panel.left.center, .react-flow__panel.right.center {
  top: 50%;
  transform: translateY(-50%);
}

.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}

.react-flow__attribution a {
  text-decoration: none;
  color: #999;
}

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  left: 0;
  top: 0;
}

.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.react-flow__minimap {
  background: var(--xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)));
}

.react-flow__minimap-svg {
  display: block;
}

.react-flow__minimap-mask {
  fill: var(--xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)));
  stroke: var(--xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)));
  stroke-width: var(--xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)));
}

.react-flow__minimap-node {
  fill: var(--xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)));
  stroke: var(--xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)));
  stroke-width: var(--xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)));
}

.react-flow__background-pattern.dots {
  fill: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)));
}

.react-flow__background-pattern.lines {
  stroke: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)));
}

.react-flow__background-pattern.cross {
  stroke: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)));
}

.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}

.react-flow__controls.horizontal {
  flex-direction: row;
}

.react-flow__controls-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  width: 26px;
  padding: 4px;
  border: none;
  background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
  border-bottom: 1px solid var(--xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)));
  color: var(--xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)));
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.react-flow__controls-button svg {
  width: 100%;
  max-width: 12px;
  max-height: 12px;
  fill: currentColor;
}

.react-flow__edge.updating .react-flow__edge-path {
  stroke: #777;
}

.react-flow__edge-text {
  font-size: 10px;
}

.react-flow__node.selectable:focus,
.react-flow__node.selectable:focus-visible {
  outline: none;
}

.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}

.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
  box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
}

.react-flow__node-input.selectable.selected,
.react-flow__node-input.selectable:focus,
.react-flow__node-input.selectable:focus-visible,
.react-flow__node-default.selectable.selected,
.react-flow__node-default.selectable:focus,
.react-flow__node-default.selectable:focus-visible,
.react-flow__node-output.selectable.selected,
.react-flow__node-output.selectable:focus,
.react-flow__node-output.selectable:focus-visible,
.react-flow__node-group.selectable.selected,
.react-flow__node-group.selectable:focus,
.react-flow__node-group.selectable:focus-visible {
  box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
}

.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}

.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}

.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible,
.react-flow__selection:focus,
.react-flow__selection:focus-visible {
  outline: none;
}

.react-flow__controls-button:hover {
  background: var(--xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)));
  color: var(--xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)));
}

.react-flow__controls-button:disabled {
  pointer-events: none;
}

.react-flow__controls-button:disabled svg {
  fill-opacity: 0.4;
}

.react-flow__controls-button:last-child {
  border-bottom: none;
}

.react-flow__controls.horizontal .react-flow__controls-button {
  border-bottom: none;
  border-right: 1px solid var(--xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)));
}

.react-flow__controls.horizontal .react-flow__controls-button:last-child {
  border-right: none;
}

.react-flow__resize-control {
  position: absolute;
}

.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}

.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}

.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}

.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}

/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  transform: translate(-50%, -50%);
}

.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}

.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}

.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}

.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}

.react-flow__resize-control.handle.top.left {
  left: 0;
}

.react-flow__resize-control.handle.bottom.left {
  left: 0;
}

.react-flow__resize-control.handle.top.right {
  left: 100%;
}

.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}

/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}

.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}

.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}

.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}

.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}

.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}

.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}

.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}

.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}

@keyframes rotate {
  0% {
    /*transform: scale(1);*/
    transform-origin: center center;
    transform: rotate(-360deg) scale(1);
  }
  40% {
    /*transform: scale(1.1);*/
    transform-origin: center center;
    transform: rotate(-180deg) scale(0.8);
  }
  80% {
    /*transform: scale(1.1);*/
    transform-origin: center center;
    transform: rotate(-30deg) scale(0.98);
  }
  100% {
    /*transform: scale(1);*/
    transform-origin: center center;
    transform: rotate(0) scale(1);
  }
}
@-webkit-keyframes rotate {
  0% {
    /*-webkit-transform: scale(1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-360deg) scale(1);
  }
  50% {
    /*-webkit-transform: scale(1.1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-180deg) scale(0.8);
  }
  100% {
    /*-webkit-transform: scale(1);*/
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0) scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0%;
  }
  50% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes fadeInEven {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
  100% {
    opacity: 0%;
  }
}
@keyframes fadeInandUp {
  0% {
    opacity: 0%;
    transform: translateY(1rem);
  }
  100% {
    opacity: 100%;
    transform: translateX(0);
  }
}
@keyframes fadeInDown {
  0% {
    visibility: hidden;
    opacity: 0%;
    transform: translateY(-0.5rem);
  }
  100% {
    opacity: 100%;
    transform: translateY(0rem);
  }
}
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 100%;
    transform: scale(1);
  }
}
@keyframes fadeInScaleLeft {
  0% {
    opacity: 0;
    transform: translatex(6px) scale(0.98);
  }
  100% {
    opacity: 100%;
    transform: translatex(0) scale(1);
  }
}
@keyframes fadeInAndOut {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 50%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes fadeInAndOut2 {
  0% {
    opacity: 50%;
  }
  50% {
    opacity: 25%;
  }
  100% {
    opacity: 50%;
  }
}
@keyframes move {
  0% {
    background-position: 5rem 5rem;
  }
  100% {
    background-position: 0 0;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
@keyframes slideOutLeft {
  0% {
    transform: translateX(0%);
    opacity: 100%;
  }
  100% {
    transform: translateX(-10%);
    opacity: 0%;
  }
}
@keyframes slideInLeft {
  0% {
    transform: translateX(-10%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 100%;
  }
}
@keyframes slideOutRight {
  0% {
    transform: translateX(0%);
    opacity: 100%;
  }
  100% {
    transform: translateX(10%);
    opacity: 0%;
  }
}
@keyframes slideInRight {
  0% {
    transform: translateX(10%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 100%;
  }
}
@keyframes slideOutLeft2 {
  0% {
    transform: translateX(0%);
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
  100% {
    transform: translateX(-10%);
    opacity: 0%;
  }
}
@keyframes slideInLeft2 {
  0% {
    transform: translateX(-10%);
    opacity: 0;
  }
  50% {
    opacity: 0%;
  }
  100% {
    transform: translateX(0%);
    opacity: 100%;
  }
}
@keyframes slideOutRight2 {
  0% {
    transform: translateX(0%);
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
  100% {
    transform: translateX(10%);
    opacity: 0%;
  }
}
@keyframes slideInRight2 {
  0% {
    transform: translateX(10%);
    opacity: 0;
  }
  50% {
    opacity: 0%;
  }
  100% {
    transform: translateX(0);
    opacity: 100%;
  }
}
@keyframes slideInTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(0);
    opacity: 100%;
  }
}
.slide-down {
  transition: height 0.5s ease;
  overflow: hidden;
}
.slide-down:not(.active) {
  display: none;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@keyframes placeholderShimmerLarge {
  0% {
    background-position: -868px 0;
    transform: scale(1);
  }
  50% {
    transform: scale(0.995);
  }
  100% {
    background-position: 868px 0;
    transform: scale(1);
  }
}
@keyframes grow {
  from {
    transform: scaleY(0);
    transform-origin: top;
  }
  to {
    transform: scaleY(1);
    transform-origin: top;
  }
}
@keyframes shrink {
  from {
    transform: scaleY(1);
    transform-origin: top;
  }
  to {
    transform: scaleY(0);
    transform-origin: top;
  }
}
* {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  list-style: none;
}

html,
body {
  height: 100vh;
  max-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  background-color: hsl(200, 33%, 93%);
  background-color: var(--colorBackground, hsl(200, 33%, 93%));
}

/* setting 1 REM = 1.0rem */
html {
  /* 1rem = 1.0rem */
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-areas: "navigation sidebar topbar tilemanager" "navigation sidebar body tilemanager";
  grid-template-columns: auto auto 1fr min-content;
  grid-template-rows: auto 1fr;
  font-size: 1.6rem;
}

svg:not(.tooltipster):not(.tags__icon),
i {
  pointer-events: none;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

button {
  background-color: transparent;
  cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
  background-color: transparent !important;
}

/* ------ FONTS + Typography------ */
.heading-primary {
  font-size: 2.6rem;
  line-height: 1;
  color: #4c5259;
  text-decoration: none;
  text-transform: none;
}
.heading-primary--light {
  color: #ffffff;
}

.heading-secondary {
  font-size: 1.6rem;
  font-weight: 400;
  color: #4c5259;
  text-transform: none;
}
.heading-secondary--light {
  color: #ffffff;
}
.heading-secondary--medium-large {
  font-size: 1.8rem;
}
.heading-secondary--large {
  font-size: 2rem;
}
.heading-secondary--bold {
  font-weight: 600;
}

.heading-tertiary {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: none;
}
.heading-tertiary--grey-dark {
  color: #9e9fa0;
}
.heading-tertiary--primary {
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
}

.heading-quarternary {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #4c5259;
  font-weight: 400;
}

.paragraph {
  font-size: 1.2rem;
  font-weight: 400;
}

.sub-paragraph {
  font-size: 1.1rem;
  font-weight: 400;
}

.sub-sub-paragraph {
  font-size: 1rem;
}

.text--light {
  color: #9e9fa0;
}
.text--color-navigation {
  color: hsl(201, 65%, 8%);
}

h1 {
  font-size: 2rem;
  font-weight: 500;
  color: hsl(201, 65%, 8%);
}

span.h1dull {
  font-size: 1.6rem;
  color: hsl(201, 65%, 8%);
}

h2,
a.h2 {
  font-size: 1.2rem;
  font-weight: 400;
  color: #9e9fa0;
  text-transform: uppercase;
}

h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: hsl(201, 65%, 8%);
}

h3 span.go {
  display: inline-block;
  height: 1.8rem;
  width: 1.2rem;
  margin-left: 0.5rem;
  vertical-align: top;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/svg/icon/go.svg?c=353535");
  box-sizing: border-box;
}

h4 {
  font-size: 3.8rem;
  font-weight: 300;
  color: #4c5259;
}

h5 {
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #4c5259;
}

h6 {
  font-size: 1.2rem;
  font-weight: 400;
  color: #4c5259;
}

p {
  font-size: 1.2rem;
  font-weight: 400;
  text-align: inherit;
}

h5.grey,
p.grey {
  color: #9e9fa0 !important;
}

h1.hidden,
h2.hidden,
h3.hidden,
h4.hidden,
h5.hidden,
h6.hidden {
  display: none !important;
}

a.h2 {
  text-decoration: none;
}

a.h2:hover {
  text-decoration: underline;
}

/* ------ ANIMATIONS ------ */
.slideOutLeft {
  animation: slideOutLeft 0.5s ease-in-out;
}

.slideInLeft {
  animation: slideInLeft 0.5s ease-in-out;
}

.slideOutRight {
  animation: slideOutRight 0.5s ease-in-out;
}

.slideInRight {
  animation: slideInRight 0.5s ease-in-out;
}

.slideOutLeft2 {
  animation: slideOutLeft2 0.5s ease-in-out;
}

.slideInLeft2 {
  animation: slideInLeft2 0.5s ease-in-out;
}

.slideOutRight2 {
  animation: slideOutRight2 0.5s ease-in-out;
}

.slideInRight2 {
  animation: slideInRight2 0.5s ease-in-out;
}

.slideInTop {
  animation: slideInTop 0.5s ease-in-out;
}

.fadeIn {
  animation: fadeIn 0.5s ease-in-out;
}

.fadeInEven {
  animation: fadeInEven 0.5s ease-in-out;
}

.fadeIn--fast {
  animation: fadeIn 0.25s ease-in-out;
}

.fadeOut {
  animation: fadeOut 0.5s ease-in-out;
}

.fadeable {
  pointer-events: inherit;
  opacity: 100%;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.fadeable--faded {
  opacity: 0%;
  visibility: hidden;
}

[role=button] {
  cursor: pointer;
}

span[role=button] {
  text-decoration: underline;
}

/* ------ TEXT ALIGN ------ */
.right {
  text-align: right !important;
}

.center {
  text-align: center !important;
}

.align-center,
.u-align-center {
  text-align: center;
}

.left {
  text-align: left !important;
}

.u-underline {
  text-decoration: underline;
}

.u-line-break--auto {
  line-break: auto !important;
}

/* ------ DISPLAY ------ */
.block {
  display: block;
}

.inline,
.u-inline {
  display: inline-block !important;
}

.u-opacity-0 {
  opacity: 0 !important;
}

.u-opacity-025 {
  opacity: 0.25 !important;
}

.u-opacity-050 {
  opacity: 0.5 !important;
}

.u-opacity-050-all-elements > * {
  opacity: 0.5 !important;
}

.u-relative {
  position: relative;
}

.u-absolute {
  position: absolute;
}
.u-absolute--fill {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.u-sticky {
  position: sticky;
}
.u-sticky--fill {
  top: 0;
  left: 0;
  right: 0;
}

.flex,
.u-flex {
  display: flex !important;
}
.flex--center,
.u-flex--center {
  align-items: center !important;
}
.flex--center-content,
.u-flex--center-content {
  justify-content: center;
}
.flex--justify-end,
.u-flex--justify-end {
  justify-content: end;
}
.flex--justify-right,
.u-flex--justify-right {
  justify-content: right;
}
.flex--stretch,
.u-flex--stretch {
  align-items: stretch;
}
.flex--vertical,
.u-flex--vertical {
  flex-direction: column;
}

.gap1 {
  gap: 1rem;
}

.gap-025 {
  gap: 2.5rem;
}

.grow-1 {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ------ WIDTH ------ */
.w-0 {
  width: 0 !important;
}

.w-10 {
  width: 10rem !important;
}

.min-w-45 {
  min-width: 45%;
}

.min-w-16 {
  min-width: 16rem;
}

.w-50 {
  width: 50%;
}

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

/* ------ HEIGHT ------ */
.u-h100 {
  height: 100% !important;
}

.u-no-min-height {
  min-height: 0 !important;
}

.height-32 {
  height: 32rem;
}

.height-35 {
  height: 35rem;
}

.min-h-4 {
  min-height: 4rem;
}

/* ------ SPACERS ------ */
div.h-spacer-5 {
  width: 100%;
  height: 0.5rem;
}

div.h-spacer-7 {
  width: 100%;
  height: 0.7rem;
}

div.h-spacer-10 {
  width: 100%;
  height: 1rem;
}

div.h-spacer-15 {
  width: 100%;
  height: 1.5rem;
}

div.h-spacer-20 {
  width: 100%;
  height: 2rem;
}

div.h-spacer-25 {
  width: 100%;
  height: 2.5rem;
}

/* ------ PADDING ------ */
.p-0 {
  padding: 0 !important;
}

.p-x-10 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-left-1 {
  padding-left: 0.1rem;
}

.p-left-2 {
  padding-left: 0.2rem;
}

.p-left-3 {
  padding-left: 0.3rem;
}

.p-left-4 {
  padding-left: 0.4rem !important;
}

.p-left-5 {
  padding-left: 0.5rem;
}

.p-left-26 {
  padding-left: 2.6rem !important;
}

.p-top-0 {
  padding-top: 0 !important;
}

.p-top-1 {
  padding-top: 0.1rem;
}

.p-top-2 {
  padding-top: 0.3rem;
}

.p-top-3 {
  padding-top: 0.3rem;
}

.p-top-4 {
  padding-top: 0.4rem;
}

.p-top-5 {
  padding-top: 0.5rem;
}

.p-top-12 {
  padding-top: 1.2rem !important;
}

.p-top-35 {
  padding-top: 3.5rem;
}

.p-right-1 {
  padding-right: 0.1rem;
}

.p-right-2 {
  padding-right: 0.3rem;
}

.p-right-3 {
  padding-right: 0.3rem;
}

.p-right-4 {
  padding-right: 0.4rem;
}

.p-right-5 {
  padding-right: 0.5rem;
}

.p-bottom-0 {
  padding-bottom: 0 !important;
}

.p-bottom-1 {
  padding-bottom: 0.1rem;
}

.p-bottom-2 {
  padding-bottom: 0.3rem;
}

.p-bottom-3 {
  padding-bottom: 0.3rem;
}

.p-bottom-4 {
  padding-bottom: 0.4rem;
}

.p-bottom-5 {
  padding-bottom: 0.5rem;
}

/* ----- MARGIN ----- */
.m-x-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt02 {
  margin-top: 0.2rem;
}

.mt075 {
  margin-top: 0.75rem;
}

.mt12 {
  margin-top: 1.2rem !important;
}

.mt16 {
  margin-top: 1.6rem !important;
}

.mt20 {
  margin-top: 2rem;
}

.mt40 {
  margin-top: 4rem;
}

.mr3 {
  margin-right: 0.3rem;
}

.mr06 {
  margin-right: 0.6rem;
}

.mr10 {
  margin-right: 1rem;
}

.mr40 {
  margin-right: 4rem;
}

.ml0 {
  margin-left: 0 !important;
}

.ml1 {
  margin-left: 1rem;
}

.ml15 {
  margin-left: 1.5rem;
}

.ml20 {
  margin-left: 2.7rem;
}

.mr-auto {
  margin-right: auto;
}

.ml-auto {
  margin-left: auto !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb05 {
  margin-bottom: 0.5rem;
}

.mb07 {
  margin-bottom: 0.7rem;
}

.mb12 {
  margin-bottom: 1.2rem;
}

.mb15 {
  margin-bottom: 1.5rem;
}

.mb20 {
  margin-bottom: 2rem;
}

.mb30 {
  margin-bottom: 3rem;
}

.translate-x-8 {
  transform: translateY(0.8rem);
}

.rotate-180 {
  transform: rotate(180deg);
}

.white-space-pre-wrap {
  white-space: pre-wrap !important;
}

/* ----- VARIOUS ----- */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexbox {
  display: flex;
}
.flexbox--space-between {
  justify-content: space-between !important;
}

.display-none,
.u-display-none {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.u-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.u-link:hover {
  text-decoration: underline;
}

.t-decoration-none {
  text-decoration: none;
}

.u-max-content {
  width: max-content !important;
}

.u-row-grid {
  display: grid;
  gap: 1rem;
  align-items: center;
}
.u-row-grid > * {
  grid-row: 1;
}
.u-row-grid--gap-l {
  gap: 1.8rem;
}
.u-row-grid--form {
  grid-template-columns: repeat(12, 1fr);
  gap: 1.8rem 4.8rem;
}
.u-row-grid--6-column {
  grid-template-columns: repeat(6, 1fr);
}

.font-size-0 {
  font-size: 0;
}

.display-grid {
  display: grid;
}
.display-grid--gap15 {
  gap: 1.5rem;
}

.visibility-hidden {
  visibility: hidden;
}

.align-self-baseline {
  align-self: baseline;
}

.pointer-events-none {
  pointer-events: none;
}

/* ----- RESPONSIVE ----- */
@media only screen and (max-width: 30em) {
  .u-hide--tiny {
    display: none !important;
  }
}
@media only screen and (max-width: 36.375em) {
  .u-hide--smallest {
    display: none !important;
  }
}
@media only screen and (max-width: 46.85em) {
  .u-hide--smaller {
    display: none !important;
  }
}
@media only screen and (max-width: 56.25em) {
  .u-hide--small {
    display: none !important;
  }
}
@media only screen and (max-width: 64em) {
  .u-hide--normal-small {
    display: none !important;
  }
}
@media only screen and (max-width: 75em) {
  .u-hide--normal {
    display: none !important;
  }
}
@media only screen and (max-width: 93.75em) {
  .u-hide--large {
    display: none !important;
  }
}
@media only screen and (min-width: 112.5em) {
  .u-hide--largest {
    display: none !important;
  }
}

.u-show--tiny {
  display: none !important;
}
@media only screen and (max-width: 30em) {
  .u-show--tiny {
    display: revert !important;
  }
}
.u-show--smallest {
  display: none !important;
}
@media only screen and (max-width: 36.375em) {
  .u-show--smallest {
    display: revert !important;
  }
}
.u-show--smaller {
  display: none !important;
}
@media only screen and (max-width: 46.85em) {
  .u-show--smaller {
    display: revert !important;
  }
}
.u-show--small {
  display: none !important;
}
@media only screen and (max-width: 56.25em) {
  .u-show--small {
    display: revert !important;
  }
}
.u-show--normal-small {
  display: none !important;
}
@media only screen and (max-width: 64em) {
  .u-show--normal-small {
    display: revert !important;
  }
}
.u-show--normal {
  display: none !important;
}
@media only screen and (max-width: 75em) {
  .u-show--normal {
    display: revert !important;
  }
}
.u-show--large {
  display: none !important;
}
@media only screen and (max-width: 93.75em) {
  .u-show--large {
    display: revert !important;
  }
}
.u-show--largest {
  display: none !important;
}
@media only screen and (min-width: 112.5em) {
  .u-show--largest {
    display: revert !important;
  }
}

/* ----- Background Color ----- */
.bg-col-primary {
  background-color: hsl(197, 100%, 47%);
}

.bg-col-primary-light {
  background-color: rgba(0, 172, 240, 0.15);
}

.bg-col-secondary {
  background-color: hsl(197, 99%, 33%);
}

.bg-col-secondary-light {
  background-color: #019dda;
}

.bg-col-tertiary {
  background-color: #f0f7fa;
}

.bg-col-highlight {
  background-color: hsl(19, 97%, 64%);
}

.bg-col-navigation {
  background-color: hsl(201, 65%, 8%);
}

.bg-col-navigation-light {
  background-color: #26414f;
}

.bg-col-navigation-extra-light {
  background-color: #26414f;
}

.bg-col-background {
  background-color: hsl(200, 33%, 93%);
}

.bg-col-text-highlight {
  background-color: hsl(197, 99%, 33%);
}

/* ------ TEXT COLOR ------ */
.u-text-color {
  color: #f17270;
}
.u-text-color--red-dark {
  color: #d26969;
}

.max-2-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
  flex: auto;
}

.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.hide-scrollbar::-webkit-scrollbar {
  /* WebKit */
  width: 0;
  height: 0;
}

.scrollbar-dark {
  /* Let's get this party started */
  /* Track */
  /* Handle */
}
.scrollbar-dark::-webkit-scrollbar {
  width: 10px;
}
.scrollbar-dark::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 8px;
  background: hsl(201, 65%, 8%);
  background: var(--colorNavigation, hsl(201, 65%, 8%));
  border-radius: 8px;
}
.scrollbar-dark::-webkit-scrollbar-thumb {
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background: #324e5d;
  background: var(--colorNavigationExtraLight, #324e5d);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.shape-shadow {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--loginButtonColor, hsl(197, 99%, 33%));
  color: white;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10000000;
}
.cookie-banner h2 {
  color: white;
  margin-bottom: 10px;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: none;
  letter-spacing: 0.05rem;
}
.cookie-banner p {
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.cookie-banner a {
  color: white;
  text-decoration: underline;
}
.cookie-banner .button-container {
  display: flex;
  gap: 20px;
}
@media only screen and (max-width: 46.85em) {
  .cookie-banner .button-container {
    flex-direction: column;
  }
}
.cookie-banner button {
  border: none;
  white-space: nowrap;
}
.cookie-banner button.accept-button {
  color: #444;
}
.cookie-banner button:hover {
  background-color: #ddd;
}

#cookie-toggle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
#cookie-toggle i {
  font-size: 1.4rem;
  margin-right: 0.5rem;
}
#cookie-toggle .cookie-toggle__link {
  margin-top: 1.5rem;
  display: block;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  flex: 0;
  white-space: nowrap;
}
.action-buttons__button {
  margin-left: 0.9rem;
}
.action-buttons__button:hover .action-buttons__cta--primary {
  background-color: #019dda;
  background-color: var(--colorSecondaryLight, #019dda);
}
.action-buttons__button--menu {
  position: relative;
}
.action-buttons__button--menu > button {
  padding-right: 3.4rem;
}
.action-buttons__button--menu > button::after {
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 0.5rem 0.4rem 0 0.4rem;
  content: "";
  height: 0;
  margin-top: -0.2rem;
  perspective: 1000px;
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-in-out;
  width: 0;
}
.action-buttons__button--menu:hover .submenu {
  opacity: 100%;
  transform: translateY(0rem);
  visibility: visible;
}
.action-buttons__button--menu:hover > button::after {
  transform: rotate(180deg);
}
.action-buttons__cta {
  color: #747e89;
  border-radius: 1rem;
  cursor: pointer;
  display: inline-block;
  opacity: 1;
  padding: 1.1rem 1.5rem;
  transition: 0.2s background-color ease-in-out, 0.2s width ease-in-out;
  vertical-align: top;
  width: auto;
  min-height: 4rem;
}
.action-buttons__cta:hover {
  color: #4c5259;
}
.action-buttons__cta--primary {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  text-decoration: none;
  position: relative;
}
.action-buttons__cta--primary:hover {
  color: #fff;
}
.action-buttons__cta--disabled {
  opacity: 50%;
  pointer-events: none;
}
.action-buttons__cta--disabled-not-last > .button:last-child {
  opacity: 100%;
  pointer-events: all;
}
.action-buttons .button--skeleton {
  width: 10rem;
  height: 3.9rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 46.85em) {
  .action-buttons .button--skeleton {
    width: 3.9rem !important;
  }
  .action-buttons .button--skeleton:first-child {
    display: none;
  }
}
.action-buttons .button--skeleton:last-child {
  width: 3.9rem;
}

.basic-card {
  border: 0.1rem solid #dadee5;
  border-radius: 1rem;
  box-shadow: 0 0.1rem 0.1rem 0 #dadee5;
  box-sizing: border-box;
  cursor: pointer;
  padding: 1.7rem;
  transition: background-color 0.2s ease-in-out;
}
.basic-card h6 {
  overflow-wrap: break-word;
}
.basic-card--centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
.basic-card--center-aligned {
  padding: 3.6rem 4rem;
}
.basic-card--center-aligned .basic-card__top {
  flex-direction: column;
}
.basic-card--center-aligned .basic-card__top:not(:last-child) {
  margin-bottom: 1rem;
}
.basic-card--center-aligned .basic-card__top:last-child {
  margin-bottom: 0;
}
.basic-card--center-aligned .basic-card__icon {
  font-size: 5rem;
  margin-bottom: 1.6rem;
  margin-right: 0;
}
.basic-card--center-aligned .basic-card__text {
  text-align: center;
}
.basic-card__text--small {
  font-size: 1.6rem;
}
.basic-card__text--medium {
  font-size: 1.8rem;
}
.basic-card--compact {
  padding: 2.8rem 3.6rem;
}
.basic-card--medium .basic-card__icon {
  font-size: 4rem;
}
.basic-card--small {
  padding: 1.8rem 2.4rem;
}
.basic-card--small .basic-card__top {
  margin-bottom: 0;
}
.basic-card--small .basic-card__top .basic-card__icon {
  font-size: 3rem;
}
.basic-card--no-icon {
  justify-content: center;
  min-height: 11rem;
}
.basic-card--no-icon h1 {
  font-size: 1.5rem;
}
.basic-card.selected {
  border-color: hsl(19, 97%, 64%);
  border-color: var(--colorHighlight, hsl(19, 97%, 64%));
}
.basic-card:not(.selected):hover {
  background-color: #f0f7fa;
  background-color: var(--colorTertiary, #f0f7fa);
}
.basic-card__top {
  align-items: center;
  display: flex;
  margin-bottom: 0.6rem;
}
.basic-card__icon {
  font-size: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  fill: #4c5259;
  color: #4c5259;
  margin-right: 1.2rem;
}

.breadcrumbs {
  box-sizing: border-box;
  font-size: 0;
  list-style: none;
  position: relative;
  min-height: 1.5rem;
  position: relative;
}
.breadcrumbs:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  border-radius: 1rem;
  width: 35rem;
  height: auto;
  margin: 0.3rem 0;
  background-color: #dadee5;
  visibility: hidden;
  opacity: 0;
  background: #dadee5;
  background-image: linear-gradient(to right, #dadee5 0%, #e9ebf0 20%, #dadee5 40%, #dadee5 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}
.breadcrumbs--loading {
  position: relative;
  height: auto;
}
.breadcrumbs--loading:after {
  opacity: 100%;
  visibility: visible;
}
.breadcrumbs.hide::before {
  content: "<";
}
.breadcrumbs li {
  color: #9e9fa0;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 400;
  padding-left: 0.5rem;
  padding-right: 1.5rem;
  position: relative;
  animation: fadeIn 0.2s ease-in-out;
}
.breadcrumbs li:first-child {
  padding-right: 0rem;
}
.breadcrumbs.collapse li {
  overflow: hidden;
  white-space: nowrap;
  width: 1.8rem;
}
.breadcrumbs.hide li:not(:last-child) {
  display: none;
}
.breadcrumbs.hide li:last-child {
  padding-left: 0;
}

.breadcrumbs.collapse li:last-child,
.breadcrumbs.hide li {
  width: auto;
}

.breadcrumbs.collapse li:not(:last-child)::before,
.breadcrumbs.collapse:hover li:last-child::before {
  background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0%, rgba(231, 239, 243, 0.8561625334) 50%, #e7eff3 100%);
  background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0%, rgba(var(--colorBackground, hsl(200, 33%, 93%)), 0.8561625334) 50%, rgba(var(--colorBackground, hsl(200, 33%, 93%)), 1) 100%);
  content: "";
  height: 100%;
  margin-top: -0.8rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.7rem;
}

.breadcrumbs.collapse:hover li:last-child::before {
  right: 0;
}

.breadcrumbs li:not(:last-child):not(:first-child)::after {
  background-color: hsl(200, 33%, 93%);
  background-color: var(--colorBackground, hsl(200, 33%, 93%));
  content: ">";
  height: 100%;
  margin-top: -0.8rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  width: 1rem;
}

.breadcrumbs li > a {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumbs li > a:hover {
  text-decoration: underline;
}

/* Buttons */
.classic-btn,
.jquery-modal > .modal .classic-btn {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border-radius: 1rem;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0;
  opacity: 1;
  padding: 0.9rem 1.3rem;
  position: relative;
  text-decoration: none;
  transition: 0.15s background-color;
  vertical-align: top;
  width: auto;
}
.classic-btn__icon,
.jquery-modal > .modal .classic-btn__icon {
  animation: fadeInScale 0.2s ease-out;
  fill: inherit;
  font-size: 2.1rem;
}
.classic-btn--inline,
.jquery-modal > .modal .classic-btn--inline {
  display: inline-block;
}

.button,
.btn {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border-radius: 0.5rem;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 400;
  opacity: 1;
  padding: 0.9rem 1.3rem;
  position: relative;
  text-decoration: none;
  transition: 0.2s background-color ease-in-out, 0.2s width ease-in-out;
  vertical-align: top;
  width: auto;
}
.button:not([disabled]):not(.disabled):hover,
.btn:not([disabled]):not(.disabled):hover {
  background-color: #019dda;
  background-color: var(--colorSecondaryLight, #019dda);
}
.button[disabled], .button.disabled,
.btn[disabled],
.btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}
.button__icon,
.btn__icon {
  min-width: 2.2rem;
  font-size: 1.8rem;
  margin: 0 -0.6rem;
}
.button__icon--back,
.btn__icon--back {
  margin: 0 -0.6rem;
}
.button--icon-container--absolute,
.btn--icon-container--absolute {
  position: absolute;
}
.button--appear,
.btn--appear {
  animation: 0.2s ease-out 0s 1 fadeIn;
}
.button--menu,
.btn--menu {
  padding-right: 3.4rem;
  position: relative;
}
.button--menu::after,
.btn--menu::after {
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 2.4rem;
}
.button--menu::before,
.btn--menu::before {
  border-color: #ffffff transparent transparent transparent;
  border-style: solid;
  border-width: 0.5rem 0.4rem 0 0.4rem;
  content: "";
  height: 0;
  margin-top: -0.2rem;
  perspective: 1000px;
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-in-out;
  width: 0;
}
.button--menu:hover,
.btn--menu:hover {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.button--menu:hover .submenu,
.btn--menu:hover .submenu {
  opacity: 100%;
  transform: translateY(0rem);
  visibility: visible;
}
.button--menu:hover::before,
.btn--menu:hover::before {
  transform: rotate(180deg);
}
.button--menu:hover::after,
.btn--menu:hover::after {
  background-color: transparent;
  border: none;
  height: 0.8rem;
  top: 100%;
  width: 100%;
}
.button--skeleton,
.btn--skeleton {
  height: 3.3rem;
  width: 3.3rem;
  box-sizing: border-box;
  margin-left: 0.9rem;
  opacity: 50%;
  background: hsl(197, 99%, 33%);
  background: var(--colorSecondary, hsl(197, 99%, 33%));
  background-image: linear-gradient(to right, hsl(197, 99%, 33%) 0%, #019dda 20%, hsl(197, 99%, 33%) 40%, hsl(197, 99%, 33%) 100%);
  background-image: linear-gradient(to right, var(--colorSecondary, hsl(197, 99%, 33%)) 0%, var(--colorSecondaryLight, #019dda) 20%, var(--colorSecondary, hsl(197, 99%, 33%)) 40%, var(--colorSecondary, hsl(197, 99%, 33%)) 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  visibility: visible;
}
.button--skeleton:nth-child(1),
.btn--skeleton:nth-child(1) {
  width: 9rem;
}
.button--skeleton:nth-child(2),
.btn--skeleton:nth-child(2) {
  width: 7.5rem;
}
.button--skeleton--hidden,
.btn--skeleton--hidden {
  opacity: 0;
  visibility: hidden;
}
.button__submenu,
.btn__submenu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.8rem);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: all 0.2s ease-in-out;
  visibility: hidden;
}
.button__map,
.btn__map {
  padding: 0.9rem 1.05rem;
}
.button__separator,
.btn__separator {
  height: 1.8rem;
}
.button__separator:first-child, .button__separator:last-child, .button__separator + .button__separator,
.btn__separator:first-child,
.btn__separator:last-child,
.btn__separator + .button__separator {
  display: none;
}
.button__separator span,
.btn__separator span {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  height: 50%;
}
.button__separator--dark span,
.btn__separator--dark span {
  border-color: rgba(255, 255, 255, 0.4);
}

.button-submenu {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border-radius: 1rem;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  direction: rtl;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-bottom: -4px;
  margin-top: 0.7rem;
  min-width: calc(100% + 2rem);
  opacity: 0;
  overflow: hidden;
  padding: 1rem 1rem 0.4rem 1rem;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(0.5rem);
  transition: all 0.2s ease-in-out;
  visibility: hidden;
}

a.button.grey {
  background-color: #dadee5 !important;
  border-radius: 0.5rem;
  color: #9e9fa0 !important;
  cursor: pointer;
  font-size: 1.8rem;
  height: 2.4rem !important;
  padding: 0 !important;
  text-align: center;
  transition: 0.15s background-color;
  width: 2.4rem !important;
}

a.button:not([disabled]):not(.disabled):not(.menu).grey:hover {
  background-color: #ced3dd !important;
  color: #949596 !important;
}

a.button:not(.menu):hover,
button.button:not([disabled]):not(.disabled):not(.menu):not(.button--secondary):hover {
  background-color: #019dda !important;
  background-color: var(--colorSecondaryLight, #019dda) !important;
}

a.button.icon,
button.button.icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2rem;
  box-sizing: border-box;
  font-size: 0 !important;
  height: 3.4rem !important;
  padding: 0 !important;
  width: 3.4rem !important;
}

a.button.icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

a.button.icon-left {
  background-position: left 0.9rem center;
  background-repeat: no-repeat;
  background-size: 1.4rem;
  padding-left: 3rem;
}

a.button.back {
  background-image: url("/svg/icon/back.svg?c=ffffff");
  background-position: left 0.9rem center;
  background-repeat: no-repeat;
  background-size: 1.4rem;
  padding-left: 3rem;
}

button.button.icon.unwatch {
  background-image: url("/svg/icon/unwatch.svg?c=ffffff");
  background-size: 2rem;
}

button.button.icon.watch {
  background-image: url("/svg/icon/watch.svg?c=ffffff");
  background-size: 2rem;
}

a.button.icon.refresh,
button.button.icon.refresh {
  background-image: url("/svg/icon/refresh.svg?c=ffffff");
  background-size: 1.5rem;
}

button.button.icon.reload {
  background-image: url("/svg/icon/reload.svg?c=ffffff");
  background-size: 1.6rem;
}

.btn-grey {
  position: relative;
  font-size: 1.2rem;
  padding: 0.5rem 0.9rem;
  margin-left: 0.7rem;
  height: auto;
  background-color: #dadee5;
  color: #9e9fa0;
  text-transform: uppercase;
}
.btn-grey__icon {
  font-size: 1.2rem;
  margin-right: 0.4rem;
}

.toggle-button,
.button.button--appear.toggle-button {
  height: 3.4rem;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 10rem !important;
}
.toggle-button__text,
.button.button--appear.toggle-button__text {
  bottom: 0;
  font-size: 1.3rem;
  left: 0;
  margin-bottom: 0;
  opacity: 100%;
  padding: 0.9rem 1.3rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transition: transform 0.25s ease-out, opacity 0.1s ease-out;
  white-space: nowrap;
  width: auto;
}
.toggle-button__text--hidden:first-child,
.button.button--appear.toggle-button__text--hidden:first-child {
  opacity: 0%;
  transform: translateY(-80%) scale(0.9);
}
.toggle-button__text--hidden:not(:first-child),
.button.button--appear.toggle-button__text--hidden:not(:first-child) {
  opacity: 0%;
  transform: translateY(80%) scale(0.9);
}

.btn-toggle {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border-radius: 0.6666666667rem;
  cursor: pointer;
  width: 10rem;
  height: 3.3rem;
  box-sizing: border-box;
  color: #ffffff;
}
.btn-toggle--mobile-menu {
  height: 1.7rem;
  width: 14.8rem;
  color: #000000;
  background-color: transparent;
}
.btn-toggle__input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-sizing: content-box;
}
.btn-toggle__input:checked ~ .btn-toggle__label:before {
  opacity: 0%;
  transform: translateY(-1.5rem) scale(0.9);
}
.btn-toggle__input:checked ~ .btn-toggle__label:after {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.btn-toggle__label {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 1.5rem;
}
.btn-toggle__label:before, .btn-toggle__label:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
  box-sizing: content-box;
  color: inherit;
}
.btn-toggle__label:before {
  content: attr(data-off);
  transform: translateY(0) scale(1);
  opacity: 100%;
}
.btn-toggle__label:after {
  content: attr(data-on);
  opacity: 0;
  transform: translateY(1.5rem) scale(0.9);
}
.btn-toggle__label--mobile-menu {
  width: 100%;
}
.btn-toggle__label--mobile-menu:before, .btn-toggle__label--mobile-menu:after {
  justify-content: flex-start;
}

.btn-toggle__label,
.btn-toggle__handle {
  transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
}

.btn-light {
  background-color: #eff3f5;
  border-radius: 1rem;
  color: #4c5259;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.8rem 2.2rem;
  transition: background-color 0.2s ease-in-out;
}
.btn-light:hover {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}

.btn-icon {
  cursor: pointer;
  border-radius: 0.5rem;
  background-color: transparent;
  transition: background-color 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-icon:hover .btn-icon__icon {
  color: #9e9fa0;
}
.btn-icon__icon {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1.6rem;
  color: #bbc7d7;
  transition: color 0.2s ease-in-out;
}
.btn-icon__icon--small {
  width: 1.3rem;
  height: 1.3rem;
  font-size: 1.3rem;
}

.btnv2 {
  cursor: pointer;
  position: relative;
  border: solid 2px #ccc;
  border-radius: 0.6666666667rem;
  color: #9e9fa0;
  background-color: #ffffff;
  padding: 1rem 2.4rem;
  font-size: 1.3rem;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, padding 0.3s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnv2:hover, .btnv2:focus {
  background-color: #eff3f5;
}
.btnv2:focus-visible {
  background-color: #eff3f5;
  outline: none;
}
.btnv2:disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.btnv2--full {
  width: 100%;
}
.btnv2--half {
  width: 50%;
}
.btnv2--color {
  border: solid 2px hsl(197, 100%, 47%);
  border: solid 2px var(--colorPrimary, hsl(197, 100%, 47%));
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.btnv2--color:hover, .btnv2--color:focus {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}
.btnv2--color-light {
  border: solid 2px rgba(0, 172, 240, 0.15);
  border: solid 2px var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.btnv2--color-light:hover, .btnv2--color-light:focus {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}
.btnv2--green {
  background-color: #59cd89;
  border: solid 2px #59cd89;
  color: #fff;
}
.btnv2--green:hover, .btnv2--green:focus {
  background-color: #4fb878;
  border: solid 2px #4fb878;
}
.btnv2--block {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border: solid 2px transparent;
  color: #ffffff;
}
.btnv2--block:hover {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
}
.btnv2--block:focus, .btnv2--block:focus-visible {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border: solid 2px hsl(197, 99%, 33%);
  border: solid 2px var(--colorSecondary, hsl(197, 99%, 33%));
  outline: none;
}
.btnv2--block .loading-circle-spinner__circle-stroke {
  stroke: #ffffff;
}
.btnv2--block-light {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  border: solid 2px transparent;
  color: hsl(197, 100%, 47%);
}
.btnv2--block-light:focus, .btnv2--block-light:focus-visible, .btnv2--block-light:hover {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border: solid 2px hsl(197, 100%, 47%);
  border: solid 2px var(--colorPrimary, hsl(197, 100%, 47%));
  outline: none;
}
.btnv2--block-light .loading-circle-spinner__circle-stroke {
  stroke: #ffffff;
}
.btnv2--text {
  border: none;
  padding: 0;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.btnv2--text:hover, .btnv2--text:focus, .btnv2--text:focus-visible {
  text-decoration: underline;
  background-color: transparent;
  outline: none;
  border: none;
}
.btnv2--icon {
  padding: 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnv2--text-and-icon {
  flex-direction: column-reverse;
  font-size: 1.5rem;
  transition: none;
}
.btnv2--text-and-icon[aria-disabled=true] {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.btnv2--text-and-icon__icon-container {
  margin-bottom: 0.8rem;
}
.btnv2--text-and-icon__icon-container .btnv2__icon {
  height: 2.4rem;
  width: 2.4rem;
}
.btnv2--text-and-icon--horizontal {
  align-items: center;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.btnv2--text-and-icon--horizontal__icon-container {
  margin-left: 0.8rem;
  display: flex;
}
.btnv2--text-and-icon--horizontal__icon-container .btnv2__icon {
  height: 1.8rem;
  width: 1.8rem;
}
.btnv2--no-outline {
  border: 2px solid transparent;
}
.btnv2--dark-outline {
  border: solid 2px #9e9fa0;
}
.btnv2--transparent {
  background-color: transparent;
}
.btnv2--loading {
  padding: 1rem 4rem 1rem 1.8rem;
}
.btnv2--compact {
  padding: 1rem 1.4rem;
  height: 3rem;
  font-size: 1.2rem;
}
.btnv2--compact .btnv2__icon {
  height: 1.2rem;
  width: 1.2rem;
}
.btnv2--input {
  padding: 1.2rem 2.4rem;
}
.btnv2__loader {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  animation: fadeIn 0.2s ease-in-out;
}
.btnv2__loader .loading-circle-spinner {
  width: 2rem;
}
.btnv2__icon {
  height: 1.4rem;
  width: 1.4rem;
}
.btnv2__inline-edit-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0.9rem;
}

.checkboxv2 {
  cursor: pointer;
  width: 2.4rem;
  height: 2.4rem;
  font: inherit;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background: rgba(0, 172, 240, 0.15);
  background: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  border-radius: 0.5rem;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 0 hsl(197, 100%, 47%);
  position: relative;
  outline: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1), outline 0.3s cubic-bezier(0.2, 0.3, 0, 1), border-color 0s linear 0.17s;
}
.checkboxv2:focus, .checkboxv2:active {
  box-shadow: inset 0 0 0 2px hsl(197, 100%, 47%);
}
.checkboxv2:checked {
  border-color: hsl(197, 100%, 47%);
  box-shadow: inset 0 0 0 1.2rem hsl(197, 100%, 47%);
  transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1), border-color 0s;
}
.checkboxv2:checked:focus {
  outline: 4px solid rgba(0, 172, 240, 0.15);
}
.checkboxv2:before, .checkboxv2:after {
  content: "";
  background: #ffffff;
  height: 2.4rem;
  width: 2.4rem;
  position: absolute;
  transform: translate(0.3rem, 1.05rem) rotate(44.91deg) scale(0.3411, 0.1);
  transform-origin: 0 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1), opacity 0.3s cubic-bezier(0.2, 0.3, 0, 1);
  top: 0rem;
  left: 0.3rem;
}
.checkboxv2:after {
  transform: translate(1.65rem, 0.85rem) rotate(135.22deg) scale(0.5612, 0.1);
}
.checkboxv2:not(:checked):before {
  transform: translate(0.505rem, 0.455rem) rotate(44.91deg) scale(0.1, 0.1);
  opacity: 0;
}
.checkboxv2:not(:checked):after {
  transform: translate(0.575rem, 0.525rem) rotate(135.22deg) scale(0.1, 0.1);
  opacity: 0;
}
.checkboxv2:disabled {
  pointer-events: none;
  background-color: #e6eaf2;
}

@keyframes checkbox {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
}
.input {
  opacity: 100%;
  pointer-events: visible;
  transition: opacity 0.2s ease-in-out;
  text-align: left;
}
.input__label {
  display: block;
  color: #4c5259;
  margin-bottom: 1rem;
  min-height: 1.5rem;
}
.input__label:last-child {
  margin-bottom: 0;
}
.input__label--inline {
  display: inline-block;
}
.input__label-text {
  display: block;
  font-weight: 600;
  font-size: 1.3rem;
}
.input__label-text--title {
  margin-bottom: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.input__label-text--inline {
  color: #4c5259;
}
@media screen and (min-width: 56.25em) {
  .input__label-text--inline {
    transform: translateX(-5rem);
  }
}
.input__label-text .wand {
  margin-left: 1rem;
}
.input__optional-tag {
  font-size: 1.1rem;
  margin-left: 0.4rem;
  font-weight: 400;
  font-style: italic;
  color: #9e9fa0;
  transition: opacity 0.2s ease-in-out;
}
.input__inline-label {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0;
  min-height: unset;
}
.input__inline-label span {
  font-weight: 400;
  color: #9e9fa0;
  margin-right: 1.5rem;
  text-transform: uppercase;
}
.input__wrapper {
  position: relative;
}
.input__wrapper--checkbox {
  padding-top: 0.8rem;
}
.input__wrapper--toggle-switch {
  padding-top: 0.4rem;
}
.input__wrapper--toggle-text {
  width: max-content;
}
.input__wrapper--checkbox, .input__wrapper--toggle-switch {
  height: 4.4rem;
}
.input__wrapper--checkbox--inline, .input__wrapper--toggle-switch--inline {
  display: inline-block;
  height: unset;
  padding-top: 0;
}
.input__wrapper--code {
  display: flex;
  position: relative;
}
.input__wrapper--code::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 0.3333333333rem;
  border-left: 2rem solid #eff3f5;
}
.input__wrapper--code textarea {
  font-family: "Roboto Mono", "Courier New", Courier, monospace;
  background: transparent;
  font-size: 1.3rem !important;
  padding-left: 2.9rem;
}
.input__input {
  border-radius: 0.6666666667rem;
  border: 2px solid #ccc;
  font-size: 1.3rem;
  padding: 1.2rem;
  width: 100%;
  outline: none;
  transition: border 0.2s ease-in-out;
}
.input__input::placeholder {
  color: #ccc;
}
.input__input:focus {
  outline: none;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.input__input:disabled {
  background-color: #eff3f5;
}
.input__input:disabled ~ .input__aligned--right {
  background-color: #eff3f5;
}
.input__input:invalid {
  border: 2px solid #f17270;
}
.input__input--compact {
  padding: 0.8rem 1.2rem;
}
.input__input--textarea {
  resize: none;
}
.input__input--number {
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}
.input__input--number::-webkit-outer-spin-button, .input__input--number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input__input--number[type=number] {
  -moz-appearance: textfield;
}
.input__input--phone .iti {
  display: block;
}
.input__input--phone .iti__country-list {
  font-size: 1.25rem;
}
.input__input--form {
  padding-right: 4rem;
}
.input__input--inline-edit-button {
  background-color: #eff3f5;
  pointer-events: none;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-overflow: ellipsis;
}
.input__aligned {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0.7rem;
  background-color: #ffffff;
  margin: 2px;
  border-radius: 0.5rem;
}
.input__aligned--right {
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.input__aligned--vertical-center {
  display: flex;
  align-items: center;
}
.input__aligned--center {
  padding-top: 15%;
  left: 0;
  right: 0;
}
.input__aligned--transparent {
  background-color: transparent;
}
.input__aligned--half-transparent {
  background-color: rgba(255, 255, 255, 0.5);
}
.input__loader {
  pointer-events: none;
  animation: fadeIn 0.2s ease-in-out;
  padding-top: 0;
  padding-bottom: 0;
  display: grid;
  align-content: center;
}
.input__helper-text {
  font-size: 1.2rem;
  margin-top: 0.4rem;
  font-weight: 400;
}
.input__helper-text:not(.flexbox) {
  display: inline-block;
}
.input__helper-text a {
  color: inherit;
}
.input__counter {
  color: #9e9fa0;
  white-space: nowrap;
}
.input__icon {
  fill: #ccc;
  height: 2rem;
  width: 2rem;
  font-size: 2rem;
  margin-right: 2px;
}
.input__unit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.input__unit__text {
  font-size: 1.25rem;
  color: #4c5259;
}
.input__unit__text--right {
  margin-right: 0.6rem;
}
.input__unit__text--left {
  margin: 0 0.5rem;
}
.input__unit span.colour {
  height: 1.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 0.6rem;
}
.input__reload {
  cursor: pointer;
}
.input__reload svg {
  pointer-events: auto;
  fill: #747e89;
  width: 0.7em;
  height: 0.7em;
}
.input--success .input__input {
  border: 2px solid #4fb878;
}
.input--success .input__helper-text {
  color: #4fb878;
}
.input--warning .input__input {
  border: 2px solid #e0b558;
}
.input--warning .input__helper-text {
  color: #e0b558;
}
.input--error .input__input {
  border: 2px solid #f17270;
}
.input--error .input__helper-text {
  color: #f17270;
}
.input--loading .input__loader {
  opacity: 100%;
}
.input--hidden {
  opacity: 0;
  pointer-events: none;
}
.input--disabled {
  opacity: 0.2 !important;
  pointer-events: none;
}
.input--absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.input--right-aligned .input__label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.input--readonly {
  border-color: transparent !important;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  text-overflow: ellipsis;
  cursor: default;
}
.input--result {
  position: relative;
  border-radius: 1rem;
  padding: 1rem;
  background-color: #f0f7fa;
  background-color: var(--colorTertiary, #f0f7fa);
  min-height: 11rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.input--result .result-icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
}
.input--result .result-icon i {
  font-size: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  width: auto;
  height: auto;
}
.input--result .result-info {
  display: block;
}
.input--result .result-text {
  display: block;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 300;
}
.input--result .result-text--smaller {
  font-size: 1.3rem;
  font-weight: 400;
}
.input--result .result-unit {
  display: inline-block;
  margin-left: 1rem;
  font-size: 0.7em;
  font-weight: 300;
}
.input--result__ok {
  background-color: rgba(89, 205, 137, 0.1254901961);
}
.input--result__error {
  background-color: rgba(241, 114, 112, 0.1254901961);
}
.input--result--left-aligned {
  justify-content: flex-start;
}

.key-value {
  display: flex;
  align-items: flex-start;
}
.key-value > *:not(:last-child) {
  margin-right: 1.2rem;
}

.number-plate {
  background: rgb(255, 215, 0);
  background: linear-gradient(145deg, rgb(255, 215, 0) 0%, rgb(255, 203, 3) 100%);
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff, inset 6px 5px 5px -4px rgba(255, 255, 255, 0.5), inset -6px -5px 5px -4px rgba(123, 115, 0, 0.5);
  margin-top: 1rem;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd700",endColorstr="#ffcb03",GradientType=1);
  width: 38rem;
  border-radius: 1.5rem;
  margin: 2.4rem auto;
}
.number-plate__input {
  background-color: transparent;
  font-family: "Staatliches", Arial;
  text-transform: uppercase;
  font-size: 6.5rem;
  letter-spacing: 1rem;
  line-height: 1;
  width: 100%;
  padding: 2rem 2.5rem;
  text-align: center;
}
.number-plate__input:focus {
  border: 0;
  outline: 0;
}
.number-plate__input::placeholder {
  color: rgba(76, 82, 89, 0.2);
}

.radio {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
}
.radio-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.radio__button {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  margin-right: 1rem;
  border-radius: 100%;
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 0 hsl(197, 100%, 47%);
  transition: box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1), background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.radio__input {
  display: block !important;
  opacity: 0;
  position: absolute;
}
.radio__input:checked ~ .radio__button {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 0.5rem hsl(197, 100%, 47%);
}
.radio__input:checked ~ .radio__label {
  color: #4c5259;
}
.radio__input:checked:focus ~ .radio__button {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 0.5rem hsl(197, 100%, 47%), 0 0 0 0.2rem rgba(0, 172, 240, 0.15);
}
.radio__input:checked:focus ~ .radio__label {
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
}
.radio__input:focus ~ .radio__button {
  box-shadow: inset 0 0 0 0.2rem hsl(197, 100%, 47%);
}
.radio__text {
  font-size: 1.3rem;
  font-weight: 400;
  padding: 1.2rem 0;
  color: #4c5259;
  transition: color 0.2s ease-in-out;
}

.tabs-input {
  background-color: #ffffff;
  display: flex;
  position: relative;
  transition: border 0.2s ease-in-out;
  width: 100%;
}
.tabs-input--compact {
  height: 3.6rem;
}
.tabs-input * {
  z-index: 2;
}
.tabs-input:disabled {
  background-color: #eff3f5;
}
.tabs-input:disabled *:not(input) {
  opacity: 60%;
}
.tabs-input__input {
  display: block !important;
  opacity: 0;
  position: absolute;
}
.tabs-input__input:checked + .tabs-input__tab {
  border-bottom: 2px solid hsl(197, 100%, 47%);
  border-bottom: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.tabs-input__input:checked + .tabs-input__tab .tabs-input__text {
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.tabs-input__tab {
  padding-bottom: 1.2rem;
  border-bottom: 2px solid #ccc;
  transition: border-bottom 0.2s ease-in-out;
}
.tabs-input__tab:first-of-type .tabs-input__text {
  border-left: 0px;
}
.tabs-input__tab--spacer {
  flex-grow: 2;
}
.tabs-input__text {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 1.4rem;
  font-weight: 600;
  justify-content: center;
  padding: 0.6rem 2.8rem;
  text-align: center;
  color: #4c5259;
  transition: color 0.15s ease-in;
  width: max-content;
  border-left: 2px solid #ccc;
}
.tabs-input__glider {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  border-radius: 0.3333333333rem;
  display: flex;
  position: absolute;
  transition: 0.25s ease-out;
  z-index: 1;
}
@media only screen and (max-width: 46.85em) {
  .tabs-input--4 .tabs-input__text {
    padding: 0.6rem 1.2rem;
  }
}
@media only screen and (max-width: 36.375em) {
  .tabs-input--4 .tabs-input__text {
    padding: 0.4rem 0.8rem;
  }
}
@media only screen and (max-width: 36.375em) {
  .tabs-input--3 .tabs-input__text {
    padding: 0.4rem 1.2rem;
  }
}

.toggle-buttonv2 {
  display: flex;
  align-items: center;
  position: relative;
}
.toggle-buttonv2__input {
  opacity: 0;
  position: absolute;
}
.toggle-buttonv2__input, .toggle-buttonv2__input:after, .toggle-buttonv2__input:before, .toggle-buttonv2__input *, .toggle-buttonv2__input *:after, .toggle-buttonv2__input *:before, .toggle-buttonv2__input + .toggle-buttonv2__button {
  box-sizing: border-box;
}
.toggle-buttonv2__input::selection, .toggle-buttonv2__input:after::selection, .toggle-buttonv2__input:before::selection, .toggle-buttonv2__input *::selection, .toggle-buttonv2__input *:after::selection, .toggle-buttonv2__input *:before::selection, .toggle-buttonv2__input + .toggle-buttonv2__button::selection {
  background: none;
}
.toggle-buttonv2__input + .toggle-buttonv2__button {
  outline: 0;
  display: block;
  width: 4.8rem;
  height: 2.9rem;
  position: relative;
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  border: 2px solid #ccc;
  border-radius: 2.4rem;
  padding: 3px;
  transition: all 0.4s ease;
}
.toggle-buttonv2__input + .toggle-buttonv2__button:after {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  left: 0;
  border-radius: 50%;
  background: #ccc;
  transition: all 0.2s ease;
}
.toggle-buttonv2__input:checked + .toggle-buttonv2__button {
  background: hsl(197, 100%, 47%);
  background: var(--colorPrimary, hsl(197, 100%, 47%));
  border: 2px solid transparent;
}
.toggle-buttonv2__input:checked + .toggle-buttonv2__button:after {
  left: 50%;
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.2s ease;
}
.toggle-buttonv2__input:focus + .toggle-buttonv2__button {
  outline: 4px solid rgba(0, 172, 240, 0.15);
}
.toggle-buttonv2__input:disabled:not(:checked) + .toggle-buttonv2__button {
  border: 2px solid #dadee5;
}
.toggle-buttonv2__input:disabled:not(:checked) + .toggle-buttonv2__button:after {
  background: #dadee5;
}
.toggle-buttonv2__input:disabled:checked + .toggle-buttonv2__button {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}
.toggle-buttonv2__input:disabled ~ .toggle-buttonv2__label {
  color: #9e9fa0;
}
.toggle-buttonv2__label {
  font-size: 1.3rem;
  margin-left: 1.4rem;
  font-weight: 400;
}

.toggle-text {
  background-color: #ffffff;
  border: 2px solid #ccc;
  border-radius: 0.6666666667rem;
  display: flex;
  height: 4.4rem;
  position: relative;
  transition: border 0.2s ease-in-out;
  width: min-content;
}
.toggle-text--compact {
  height: 3.6rem;
}
.toggle-text--extra-compact {
  height: 3rem;
}
table .toggle-text--extra-compact {
  margin: -0.8rem 0;
}
.toggle-text * {
  z-index: 2;
}
.toggle-text:focus-within, .toggle-text:active {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.toggle-text:disabled {
  background-color: #eff3f5;
  pointer-events: none;
}
.toggle-text:disabled *:not(input) {
  opacity: 60%;
}
.toggle-text--inline {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}
.toggle-text--inline .input__label-text {
  color: #9e9fa0;
  font-size: 1.1rem !important;
  font-weight: 400;
  text-transform: uppercase;
}
.toggle-text--inline:first-of-type {
  margin-right: 1rem;
}
.toggle-text__input {
  display: block !important;
  opacity: 0;
  position: absolute;
}
.toggle-text__input:checked + .toggle-text__tab {
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
}
.toggle-text__input[data-option="1"]:checked ~ .toggle-text__glider {
  transform: translateX(0);
}
.toggle-text__input[data-option="2"]:checked ~ .toggle-text__glider {
  transform: translateX(100%);
}
.toggle-text__input[data-option="3"]:checked ~ .toggle-text__glider {
  transform: translateX(200%);
}
.toggle-text__input[data-option="4"]:checked ~ .toggle-text__glider {
  transform: translateX(300%);
}
.toggle-text__input[data-option="5"]:checked ~ .toggle-text__glider {
  transform: translateX(400%);
}
.toggle-text__tab, .toggle-text__glider {
  height: 100%;
  width: 10rem;
}
.toggle-text__tab--narrow, .toggle-text__glider--narrow {
  width: 6rem;
}
.toggle-text__tab {
  align-items: center;
  border-radius: 0.6666666667rem;
  cursor: pointer;
  display: flex;
  font-size: 1.25rem;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  transition: color 0.15s ease-in;
}
.toggle-text__glider {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  border-radius: 0.3333333333rem;
  display: flex;
  position: absolute;
  transition: 0.25s ease-out;
  z-index: 1;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 4.2rem;
  height: 2.5rem;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch--left-align {
  margin-right: auto;
  order: -2;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border: 0.2rem solid #ccc;
}
.slider:before {
  position: absolute;
  content: "";
  height: 1.3rem;
  width: 1.3rem;
  left: 0.6rem;
  bottom: 0.4rem;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider.round {
  border-radius: 2.4rem;
}
.slider.round:before {
  border-radius: 50%;
}

input:focus + .slider {
  border: 0.2rem solid #e9ebf0;
}
input:focus + .slider:before {
  background-color: #e9ebf0;
}
input:checked + .slider {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0);
  border: 0.2rem solid rgba(255, 255, 255, 0);
}
input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(14px);
  background-color: #ffffff;
}
input:checked:disabled + .slider {
  pointer-events: none;
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}
input:checked:focus + .slider {
  outline: 0.2rem solid rgba(0, 172, 240, 0.15);
  outline: 0.2rem solid var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  border: 0.2rem solid rgba(0, 172, 240, 0.15) !important;
  border: 0.2rem solid var(--colorPrimaryLight, rgba(0, 172, 240, 0.15)) !important;
}
input:disabled:not(:checked) + .slider {
  pointer-events: none;
  background-color: #ffffff;
  border: 0.2rem solid #e9ebf0;
}
input:disabled:not(:checked) + .slider:before {
  background-color: #e9ebf0;
}

.input__input--picker-container.border-grey-med div.pickr > button::after {
  border: 2px solid #ccc;
}
.input__input--picker-container div.pickr {
  box-sizing: border-box;
  display: inline-block;
  height: 4.4rem;
  overflow: hidden;
  vertical-align: top;
  width: 4.4rem;
}
.input__input--picker-container div.pickr > button, .input__input--picker-container div.pickr > button::after, .input__input--picker-container div.pickr > button::before {
  border-radius: 0;
  border-bottom-right-radius: 0.6666666667rem;
  border-top-right-radius: 0.6666666667rem;
  height: 100%;
  width: 100%;
  position: fixed;
}
.input__input--picker-container div.pickr > button:focus {
  box-shadow: none;
}
.input__input--picker-container div.pickr > button:focus::after {
  border: 2px solid hsl(197, 100%, 47%);
}
.input__input--picker-container--picker-only div.pickr > button, .input__input--picker-container--picker-only div.pickr > button::after, .input__input--picker-container--picker-only div.pickr > button::before {
  border-bottom-left-radius: 0.6666666667rem;
  border-top-left-radius: 0.6666666667rem;
}
.input__input--picker-container .input__input--picker {
  width: calc(100% - 4.4rem);
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0;
  height: 4.4rem;
}
.input__input--picker-container .input__input--picker:disabled + div.pickr {
  opacity: 0.5 !important;
  pointer-events: none;
}
.input__input--picker-container .input__input--compact {
  width: calc(100% - 3.6rem);
  height: 3.6rem;
  padding-right: 0;
}
.input__input--picker-container .input__input--compact + div.pickr {
  height: 3.6rem;
  width: 3.6rem;
}

.datepicker__form.datepicker {
  width: 100%;
  margin-top: 0;
}
.datepicker__form.datepicker .datepicker--nav {
  padding: 1rem;
}
.datepicker__form.datepicker .datepicker--content {
  padding: 1rem;
}
.datepicker__form.datepicker .datepicker--content .datepicker--cell {
  height: 3.6rem !important;
}

.highcharts-container {
  width: 100% !important;
  height: 100% !important;
}

.donut-jam > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: inherit;
  container-type: size;
}
@container (max-height: 110px) {
  .donut-jam h1 {
    font-size: 1.5rem;
  }
  .donut-jam h5 {
    font-size: 0.9rem;
  }
}

#hidden_modal {
  visibility: hidden;
  position: absolute;
}

.modal.modalv2 {
  max-width: 80rem;
  overflow: hidden;
  border-radius: 1rem;
  padding: 0;
}
.modal.modalv2--large {
  width: 90rem;
  max-width: 100%;
}
.modal.modalv2--locked * {
  pointer-events: none !important;
}
.modal.modalv2--locked .modalv2__scroll-el {
  overflow: hidden;
}

.modalv2__wrapper {
  display: grid;
  grid-template-rows: min-content max-content 6.5rem;
  transition: grid-template-rows 0.2s ease-in-out;
  grid-template-columns: 1fr;
}
.modalv2__container {
  min-height: 50rem;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
}
.modalv2__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.4rem;
  transition: opacity 0.2s ease-in-out;
}
.modalv2__title {
  font-size: 2.6rem;
  color: #4c5259;
  transition: opacity 0.2s ease-in-out;
  text-align: center;
  margin-bottom: 0.4rem;
}
.modalv2__sub-title {
  color: #9e9fa0;
  text-transform: none;
  text-align: center;
  font-size: 1.4rem;
  color: #9e9fa0;
  transition: opacity 0.2s ease-in-out;
  opacity: 100%;
}
.modalv2__content {
  grid-column: 1/2;
  grid-row: 2/4;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7.2rem 1fr;
  transition: height 0.4s ease-in-out;
}
.modalv2__pages {
  overflow: hidden;
  min-height: 35rem;
  transition: height 0.5s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.modalv2__pages--lock-scroll {
  overflow-y: hidden;
}
.modalv2__pages--lock-scroll .modalv2__page {
  bottom: 0;
}
@media only screen and (max-width: 36.375em) {
  .modalv2__pages {
    min-height: 45rem;
  }
}
.modalv2__page {
  grid-column: 1/2;
  grid-row: 1/3;
  padding: 0 4.8rem 1.2rem 4.8rem;
  display: flex;
  flex-direction: column;
  overflow: auto;
  transition: height 0.5s ease-in-out;
  position: relative;
}
.modalv2__page--centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalv2__page--stepper {
  grid-column: 1/2;
  grid-row: 2/3;
}
.modalv2__page--scroll-lock {
  padding-bottom: 0;
}
.modalv2__page--wider {
  padding-left: 3rem;
  padding-right: 3rem;
}
.modalv2__page li[data-tile=hollow],
.modalv2__page ul.tile > li[data-tile=hollow] {
  min-height: 0;
  padding-left: 0;
  margin-top: 0;
}
.modalv2__page li[data-tile=hollow] li,
.modalv2__page ul.tile > li[data-tile=hollow] li {
  margin-top: 1.2rem;
}
.modalv2__stepper {
  padding: 0 5.6rem;
  grid-column: 1/2;
  grid-row: 1/2;
}
.modalv2__search-input {
  padding: 0 4.8rem;
  margin-top: 0 !important;
}
.modalv2__scroll-el {
  flex-grow: 1;
  overflow-y: auto;
}
.modalv2__loader {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
}
.modalv2__loader--text {
  background-color: #ffffff;
}
.modalv2__loader p {
  font-size: 1.4rem;
  margin-top: 2rem;
  text-align: center;
}
.modalv2 .no-results {
  margin-top: auto;
  margin-bottom: auto;
}
.modalv2 .search-bar--modal {
  margin-top: 0 !important;
}
.modalv2__results-table {
  margin-top: 1.2rem;
}
.modalv2__message {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.modalv2__message .basic-card {
  display: flex;
  flex-direction: column;
  pointer-events: none;
  box-shadow: none;
  border: none;
  padding-top: 0;
}
.modalv2__message__main-text {
  text-align: left;
}
.modalv2__message h3 {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  text-align: center;
}
.modalv2__message h4 {
  font-weight: 700;
  font-size: 1.4rem;
  padding-top: 2rem;
  margin-bottom: 2rem;
}
.modalv2__message p {
  font-size: 1.4rem;
  margin-bottom: 2rem;
}
.modalv2__checkbox {
  position: sticky;
  display: block;
  bottom: -1.2rem;
  left: 0;
  right: 0;
  background: #fff;
  padding: 1rem;
}
.modalv2__checkbox label {
  display: inline-block;
  margin-left: 1rem;
  font-size: 1.4rem;
}

.modalv2-footer {
  display: flex;
  height: 6.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2.4rem;
  border-top: 1px solid #e6eaf2;
  box-shadow: 0px -4px 8px -2px #e6eaf2;
}
.modalv2-footer__button-container {
  display: grid;
  gap: 1rem;
  opacity: 100%;
  transition: opacity 0.2s ease-in-out;
}
.modalv2-footer__button-container > * {
  grid-row: 1;
}
.modalv2-footer__button-container--hidden {
  opacity: 0;
  pointer-events: none;
}

.nav-item {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.nav-item--hidden {
  display: none;
}
.nav-item--alt .nav-submenu__option:hover {
  background-color: #324e5d;
  background-color: var(--colorNavigationExtraLight, #324e5d);
}
.nav-item__button {
  align-items: center;
  background-color: transparent;
  border-radius: 1rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  padding: 0.8rem 0.1rem;
  text-decoration: none;
  transition: 0.15s all ease-out;
  z-index: 4;
}
.nav-item__button::before {
  content: "";
  display: block;
  position: absolute;
  height: 2rem;
  width: 2rem;
  background: transparent;
  border-radius: 1rem;
  transition: all 0.2s ease-in-out;
}
.nav-item__button > span {
  display: block;
  position: relative;
  margin-top: 0.3rem;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 0.03em;
}
.nav-item__icon-container {
  height: min-content;
  width: min-content;
}
.nav-item i {
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.nav-item:not([disabled]):not(.disabled):hover .nav-item__button {
  background-color: hsl(201, 65%, 8%);
  background-color: var(--colorNavigation, hsl(201, 65%, 8%));
}
@media only screen and (min-width: 46.85em) and (hover: hover) and (pointer: fine) {
  .nav-item:focus .nav-item__button::before, .nav-item:not([disabled]):not(.disabled):hover .nav-item__button::before {
    background-color: #26414f;
    background-color: var(--colorNavigationLight, #26414f);
    width: 6.2rem;
    height: 6.2rem;
  }
  .nav__items--lower .nav-item:focus .nav-item__button::before, .nav__items--lower .nav-item:not([disabled]):not(.disabled):hover .nav-item__button::before {
    border-radius: 100%;
    width: 4.2rem;
    height: 4.2rem;
  }
}
.nav-item--active span,
.nav-item--active i {
  color: hsl(19, 97%, 64%);
  color: var(--colorHighlight, hsl(19, 97%, 64%));
  filter: brightness(130%);
}
.nav-item__text {
  margin-left: 0.6rem;
  overflow: hidden;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
}
.nav-item__tooltip {
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

#nav_more {
  display: none;
}

.nav-submenu {
  min-width: 20rem;
  position: absolute;
  left: 7rem;
  top: 0;
  z-index: 15;
  transition: top 0.2s ease-out, height 0.5s ease-out, opacity 0.2s ease-out;
}
.nav-submenu ul {
  margin-left: 2rem;
  padding: 1.6rem;
  background-color: #26414f;
  background-color: var(--colorNavigationLight, #26414f);
  border-radius: 1rem;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.031), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.044), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.056), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.069), 14px 14px 45px -2px rgba(0, 0, 0, 0.1);
  position: relative;
}
.nav-submenu ul::before {
  border-bottom: 8px solid transparent;
  border-right: 9px solid #26414f;
  border-right: 9px solid var(--colorNavigationLight, #26414f);
  border-top: 8px solid transparent;
  content: "";
  height: 0;
  left: 0;
  margin-left: -0.9rem;
  margin-top: 0rem;
  position: absolute;
  top: 2.8rem;
  width: 0;
}
.nav-submenu--lower ul::before {
  top: auto;
  bottom: 31px;
}
.nav-submenu__option {
  align-items: center;
  border-radius: 1rem;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease-in-out;
}
.nav-submenu__option:not(:last-child) {
  margin-bottom: 0.6rem;
}
.nav-submenu__option:hover {
  background-color: hsl(201, 65%, 8%);
  background-color: var(--colorNavigation, hsl(201, 65%, 8%));
}
.nav-submenu__option button, .nav-submenu__option a {
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 1.2rem 0.8rem 1.2rem 1.6rem;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.no-results {
  border-bottom: 1px solid transparent !important;
  width: 100%;
}
.no-results--add .no-results__icon-container {
  padding: 1.4rem;
  cursor: pointer;
}
.no-results--add .no-results__icon-container:hover {
  background-color: #e6eaf2;
}
.no-results--add .no-results__icon {
  height: 5rem;
  width: 5rem;
}
.no-results__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 28rem;
  margin: 4rem auto 2.5rem auto;
}
.no-results__content--small {
  margin: 2.5rem auto 2rem auto;
}
.no-results__icon {
  font-size: 3.8rem;
  color: #9e9fa0;
}
.no-results__icon-container {
  width: 7.8rem;
  height: 7.8rem;
  position: relative;
  background-color: #eff3f5;
  padding: 1.8rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.1rem;
  transition: background-color 0.2s ease-in-out;
}
.no-results__icon-container--small {
  width: auto;
  height: auto;
  padding: 1rem;
  flex-shrink: 0;
  border-radius: 0.6rem;
}
.no-results__icon-container--small .no-results__icon {
  height: 1.2rem;
  width: 1.2rem;
}
@container (max-height: 150px) {
  .no-results__icon-container {
    width: auto;
    height: auto;
    padding: 1rem;
    flex-shrink: 0;
    border-radius: 0.6rem;
  }
  .no-results__icon-container .no-results__icon {
    height: 1.2rem;
    width: 1.2rem;
  }
}
.no-results__heading, .no-results__sub-heading {
  text-align: center;
  white-space: initial;
}
.no-results__heading {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1rem;
  max-width: 28rem;
  line-height: 1.3;
}
.no-results__heading--plus {
  font-size: 1.2rem;
  font-weight: 400;
  color: #9e9fa0;
  text-transform: uppercase;
}
.no-results__heading strong {
  font-weight: 600;
}
.no-results__sub-heading {
  color: #9e9fa0;
  max-width: 30rem;
}
.no-results--page-error .no-results__icon-container {
  background-color: #ffffff;
  width: max-content;
  height: max-content;
  padding: 2.8rem;
}
.no-results--page-error .no-results__icon {
  fill: hsl(201, 65%, 8%);
  height: 7.8rem;
  width: 7.8rem;
}
.no-results--page-error .no-results__heading {
  color: #4c5259;
}
.no-results--page-error .no-results__sub-heading {
  color: #9e9fa0;
}
.no-results--tile-error .no-results__content {
  padding: 0 0.5em;
  margin: 0 auto;
}
.no-results--tile-error .no-results__content > div:first-child {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.no-results--tile-error .no-results__icon-container {
  background-color: #ffffff;
  width: auto;
  height: auto;
  padding: 0 1.5rem 0 0;
  margin: 0;
}
.no-results--tile-error .no-results__icon {
  fill: hsl(201, 65%, 8%);
  height: 2.5rem;
  width: 2.5rem;
}
.no-results--tile-error .no-results__heading {
  color: #4c5259;
  margin: 0;
}
.no-results--tile-error .no-results__sub-heading {
  color: #9e9fa0;
  text-overflow: ellipsis;
}
.no-results--tile-error .no-results__heading, .no-results--tile-error .no-results__sub-heading {
  width: auto;
  max-width: 45rem;
}
.no-results--dark .no-results__icon-container {
  background-color: #26414f;
  background-color: var(--colorNavigationLight, #26414f);
}
.no-results--dark .no-results__icon {
  fill: #9e9fa0;
}
.no-results--dark .no-results__heading {
  color: #dadee5;
}
.no-results--dark .no-results__sub-heading {
  color: #9e9fa0;
}

.info-page {
  margin: auto;
}
.info-page__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 28rem;
  margin: 2rem auto 2rem auto;
}
.info-page__icon-container {
  width: 12rem;
  height: 12rem;
  position: relative;
  padding: 1.2rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease-in-out;
}
.info-page__icon-container--tile-view {
  width: unset;
  height: unset;
  gap: 4rem;
}
.info-page__icon {
  height: 12rem;
  width: 12rem;
  fill: #9e9fa0;
}
.info-page__icon--tile-view {
  height: 7rem;
  width: 7rem;
}
.info-page__heading {
  width: 100%;
  text-align: center;
  margin-top: 3rem;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: #4c5259;
}
.info-page__heading--tile-view {
  margin-top: 6rem;
}
.info-page__sub-heading {
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  color: #9e9fa0;
  font-weight: 400;
  line-height: 1;
}
.info-page__dashboard-button {
  margin: 4rem auto;
}

.object-edit__container {
  position: relative;
  min-height: 35rem;
  display: flex;
  flex-direction: column;
}
.object-edit__header {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  z-index: 2;
  padding-bottom: 1.8rem;
}
@media only screen and (max-width: 46.85em) {
  .object-edit__header {
    flex-direction: column;
  }
  .object-edit__header > *:last-child {
    margin-top: 1.2rem;
    width: min-content;
  }
}

.notes {
  display: flex;
  flex-direction: column;
  grid-template-columns: 100%;
  min-height: 10rem;
  height: 100%;
}

li[data-tile=table] .notes {
  margin: 0 1.8rem 1.8rem 1.8rem;
}

.note-content__wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.note-content__wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";
  /* This is how textarea text behaves */
  white-space: pre-wrap;
  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.note-content__content {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.note-content__content:focus, .note-content__content:focus-visible, .note-content__content:focus-within {
  border: none;
  outline: none;
}
.note-content__content, .note-content__wrap::after {
  /* Identical styling required!! */
  font-size: 1.3rem;
  line-height: 1.4;
  border-radius: 1rem;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  /* Place on top of each other */
  grid-area: 1/1/2/2;
}

.note-info {
  display: flex;
  align-items: center;
}
.note-info__section {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  position: relative;
}
.note-info__section:not(:last-child) {
  margin-right: 0.9rem;
}
.note-info__absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.note-info__absolute--hidden {
  display: none;
}
.note-info__dropdown {
  border: none;
  margin-top: 0.45rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
  animation: fadeInandUp 0.2s ease-in-out;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.028), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.04), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.05), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.062), 14px 14px 45px -2px rgba(0, 0, 0, 0.09);
}
.note-info__dropdown--below {
  border-radius: 0.5rem;
}
.note-info__dropdown .select2-results {
  border-radius: 0.5rem;
  overflow: hidden;
  padding: 0.45rem;
}
.note-info__dropdown .select2-results__option {
  font-size: 1.3rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease-in-out;
}
.note-info__dropdown .select2-results__option:not(:last-child) {
  margin-bottom: 0.45rem;
}
.note-info__dropdown .select2-results__option[aria-selected=true] {
  background-color: #eff3f5;
}
.note-info__dropdown .select2-results__option--highlighted {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  color: #000000;
}
.note-info__dropdown .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  color: #000000;
}
.note-info__category {
  padding: 0.45rem 0.8rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  margin-left: 0.45rem;
  display: inline-block;
}
.note-info__author {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  position: relative;
  width: max-content;
  font-weight: 600;
}
.note-info__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.9rem;
  margin-bottom: 0;
}
.note-info__button {
  padding: 0.45rem;
}
.note-info__info {
  margin-left: 0.7rem;
  margin-top: 1px;
}
.note-info__add-cat {
  margin-left: 0.45rem;
}
.note-info__inline-input {
  width: 100%;
}

.note {
  border-radius: 1rem;
  background-color: #f0f7fa;
  background-color: var(--colorTertiary, #f0f7fa);
  position: relative;
  padding: 1.2rem 1.8rem;
  transition: height 0.5s ease-in-out, padding 0.5s ease-in-out;
  border: 2px solid transparent;
}
.note:not(:last-child) {
  margin-bottom: 1.8rem;
}
.note--removed {
  padding: 0 1.8rem;
  overflow: hidden;
}
.note--removed:not(:last-child) {
  margin-bottom: 0rem;
}
.note--editing {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.note--editing:not(:last-child) {
  border-bottom: 2px solid hsl(197, 100%, 47%);
  border-bottom: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.note--skeleton {
  border: 0px;
  height: 12rem;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  background: #f0f7fa;
  background: var(--colorTertiary, #f0f7fa);
  background-image: linear-gradient(to right, #f0f7fa 0%, rgba(255, 255, 255, 0.5) 20%, #f0f7fa 40%, #f0f7fa 100%);
  background-image: linear-gradient(to right, var(--colorTertiary, #f0f7fa) 0%, rgba(255, 255, 255, 0.5), var(--colorTertiary, #f0f7fa) 40%, var(--colorTertiary, #f0f7fa) 100%);
  background-repeat: no-repeat;
  background-size: 1000px 300px;
}
.note__title-text {
  font-size: 1.4rem;
  margin-bottom: 0.9rem;
  color: #000000;
  text-transform: none;
  font-weight: 600;
}
.note__heading {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
.note__loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 100%;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.note__loading--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.note__skeleton {
  width: 28rem;
  height: 1.5rem;
  opacity: 75%;
  border-radius: 1rem;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  background: #dadee5;
  background-image: linear-gradient(to right, #dadee5 0%, rgba(255, 255, 255, 0.5) 20%, #dadee5 40%, #dadee5 100%);
  background-repeat: no-repeat;
  background-size: 1000px 300px;
}
.note__skeleton--info, .note__skeleton--footer {
  margin-left: auto;
}
.note__skeleton--footer {
  width: 20rem;
}
.note__skeleton--content {
  width: 80%;
  height: 1rem;
}
.note__skeleton--content:first-child {
  margin-top: 1.2rem;
}
.note__skeleton--content:not(:last-child) {
  margin-bottom: 0.8rem;
}
.note__skeleton--content:last-child {
  width: 60%;
}

.stepper {
  display: flex;
  align-items: center;
  transition: opacity 0.25s ease-in-out;
  animation: fadeIn 0.25s ease-in-out;
}

.stepper-step {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.stepper-step__circle {
  width: 3rem;
  height: 3rem;
  border-radius: 100rem;
  border: 3px solid #ccc;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.stepper-step__number {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 100%;
  font-size: 1.2rem;
  margin-right: 1px;
  transition: opacity 0.2s ease-in-out;
}
.stepper-step__line {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  background-color: #ccc;
}
.stepper-step__line span {
  display: block;
  height: 3px;
  width: 0%;
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  transition: width 0.2s ease-in-out;
}
.stepper-step__label {
  position: absolute;
  top: 3.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 400;
  color: #9e9fa0;
  transition: color 0.2s ease-in-out, font-size 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
@media only screen and (max-width: 56.25em) {
  .stepper-step__label {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 46.85em) {
  .stepper-step__label {
    opacity: 0;
    font-size: 1rem;
  }
}
.stepper-step__tick {
  margin-top: 2px;
  transform: scale(0.01);
  fill: hsl(197, 100%, 47%);
  fill: var(--colorPrimary, hsl(197, 100%, 47%));
  opacity: 0;
  transition: opacity 0.2s ease-in-out, scale 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (max-width: 46.85em) {
  .stepper-step:hover .stepper-step__label {
    opacity: 100%;
  }
}
.stepper-step--active .stepper-step__circle {
  border-color: hsl(197, 100%, 47%);
  border-color: var(--colorPrimary, hsl(197, 100%, 47%));
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.stepper-step--active .stepper-step__label {
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  text-align: center;
}
@media only screen and (max-width: 46.85em) {
  .stepper-step--active .stepper-step__label {
    opacity: 100%;
  }
}
.stepper-step--active .stepper-step__number {
  color: #ffffff;
}
.stepper-step--active.stepper-step--complete .stepper-step__number {
  opacity: 100%;
}
.stepper-step--active.stepper-step--complete .stepper-step__tick {
  opacity: 0%;
}
.stepper-step--passed .stepper-step__circle {
  border-color: hsl(197, 100%, 47%);
  border-color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.stepper-step--passed .stepper-step__line span {
  width: 100%;
}
.stepper-step--visited .stepper-step__circle {
  border-color: hsl(197, 100%, 47%);
  border-color: var(--colorPrimary, hsl(197, 100%, 47%));
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.stepper-step--complete .stepper-step__number {
  opacity: 0%;
}
.stepper-step--complete .stepper-step__tick {
  opacity: 100%;
  transform: scale(0.65);
}
.stepper-step--disabled .stepper-step__circle {
  border-color: #ccc;
  background-color: #ccc;
  color: #ffffff;
}
.stepper-step--last {
  flex-grow: 0;
}
.stepper-step--last .stepper-step__line {
  display: none;
}

.burger {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.burger__line {
  width: 30px;
  height: 4px;
  background-color: hsl(201, 65%, 8%);
  border-radius: 2px;
}
.burger__line:nth-child(2) {
  width: 24px;
}
.burger__line:not(:last-child) {
  margin-bottom: 6px;
}

/**
Example
  <label class="checkbox">
    <input class="form-default__input" name="location_manual" type="checkbox" value="yes" /><span>
  </label>
*/
.checkbox {
  cursor: pointer;
  height: 3.2rem;
  position: relative;
  width: 27.3rem;
  max-width: 27.3rem;
  padding-right: 0;
  display: inline-block;
}
.checkbox--table {
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkbox--table > span {
  display: inline-block;
  position: relative !important;
  top: auto !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
}
.checkbox--table > span:after {
  left: 0.45rem !important;
  top: 0.1rem !important;
  width: 0.25rem !important;
  height: 0.7rem !important;
}
.checkbox > input {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.checkbox > span {
  background-color: #e9ebf0;
  border: 0.1rem solid #dadee5;
  border-radius: 0.5rem;
  box-sizing: content-box;
  height: 1.8rem;
  left: 0;
  position: absolute;
  top: 0.7rem;
  transition: 0.15s background-color;
  width: 1.8rem;
}
.checkbox:hover > span {
  background-color: #dadee5;
}
.checkbox input:checked ~ span {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
}
.checkbox input:disabled:checked ~ span {
  opacity: 0.65;
}
.checkbox > span:after {
  content: "";
  display: none;
  position: absolute;
}
.checkbox > input:checked ~ span:after {
  display: block;
}
.checkbox > span:after {
  border: solid white;
  border-width: 0 0.2rem 0.2rem 0;
  height: 1rem;
  left: 0.6rem;
  top: 0.1rem;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0.4rem;
}

.circle-text {
  background-color: #fff;
  border-radius: 1000rem;
  box-shadow: 0 0 0 4px hsl(197, 100%, 47%);
  box-shadow: 0 0 0 4px var(--colorPrimary, hsl(197, 100%, 47%));
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.circle-text__initials {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0;
  text-align: center;
}
.circle-text--large {
  height: 6rem;
  width: 6rem;
}
.circle-text--large .circle-text__initials {
  font-size: 2.6rem;
}
.circle-text--dark {
  background-color: transparent;
  box-shadow: 0 0 0 2px #fff;
  transition: box-shadow 0.2s ease-in-out;
  color: #fff;
}
.circle-text--dark:hover {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 7px #26414f;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 7px var(--colorNavigationLight, #26414f);
}
.circle-text--button {
  cursor: pointer;
}

ul.column {
  width: 100%;
  list-style: none;
}

ul.column.w50 > li {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

@media screen and (max-width: 102.4rem) {
  ul.column.w50 > li {
    width: 100%;
  }
}
/* Condition Item */
.condition-item {
  min-width: min-content;
  display: flex;
  margin-bottom: 0.8rem;
}

.condition-item .condition-item__btn {
  margin: 0 !important;
  display: flex;
  cursor: pointer;
  background-color: transparent;
}

.condition-item .condition-item__btn:focus {
  text-decoration: underline;
  outline: none;
  border: none;
}

.condition-item__icon:hover {
  transform: translateY(-0.1rem);
  opacity: 100%;
}

.condition-item__icon {
  opacity: 50%;
  transition: all 0.2s ease-out;
}

.css-loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.css-loader div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.tick-checkbox-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  width: 100%;
  grid-gap: 0.8rem;
  align-items: center;
}
.tick-checkbox-container--large {
  grid-gap: 2rem;
}
.tick-checkbox-container--large p {
  font-size: 1.8rem;
  text-transform: capitalize;
  padding-top: 0.5rem;
  color: hsl(201, 65%, 8%);
}
.tick-checkbox-container--large .tick-checkbox--image .tick-checkbox__content {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.tick-checkbox-container--inline {
  width: 27.5rem;
  display: flex;
}
.tick-checkbox-container > label {
  height: 100%;
}

.tick-checkbox {
  cursor: pointer;
}
.tick-checkbox--medium {
  width: 13.5rem;
}
.tick-checkbox--small {
  width: 10rem !important;
}
.tick-checkbox__checkbox {
  visibility: hidden;
  display: none;
  height: 0;
  max-height: 0;
}
.tick-checkbox__content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem 0;
  border-radius: 0.4rem;
  transition: all 0.2s ease-out;
  border: 0.1rem solid #dadee5;
  border-radius: 1rem;
  box-shadow: 0 0.1rem 0.1rem 0 #dadee5;
}
.tick-checkbox__content i {
  fill: #4c5259;
  color: #4c5259;
}
.tick-checkbox__content:hover {
  background-color: #eff3f5;
}
.tick-checkbox__text {
  color: #9e9fa0;
  width: auto;
  margin-bottom: 0;
  text-transform: uppercase;
}
.tick-checkbox__icons {
  height: 1rem;
  width: 0rem;
  position: relative;
  overflow: hidden;
  transition: width 0.2s ease-out;
  fill: #4c5259;
}
.tick-checkbox__icons--multiple {
  height: 2rem;
  width: 2rem;
  border: 2px solid #ccc;
  border-radius: 100%;
  box-sizing: content-box;
}
.tick-checkbox__icons--multiple .tick-checkbox__icon {
  transition: none;
  height: 2rem;
  width: 2rem;
}
.tick-checkbox__icon {
  position: absolute;
  height: 1rem;
  width: 1rem;
  margin-left: 1rem;
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s all ease-out;
}
.tick-checkbox__icon--unchecked {
  transform: translateY(180%);
  opacity: 0;
}
.tick-checkbox__icon--checked {
  transform: translateY(-180%);
  opacity: 0;
}
.tick-checkbox__checkbox:checked ~ .tick-checkbox__content {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  border: 0.1rem solid hsl(197, 100%, 47%);
  border: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.tick-checkbox__checkbox:checked ~ .tick-checkbox__content .tick-checkbox__icons--multiple {
  border: 2px solid #4c5259;
}
.tick-checkbox__checkbox:checked ~ .tick-checkbox__content > .tick-checkbox__icons {
  width: 2rem;
}
.tick-checkbox__checkbox:checked ~ .tick-checkbox__content:hover .tick-checkbox__icon--unchecked {
  transform: translateY(0%);
  opacity: 100%;
}
.tick-checkbox__checkbox:checked ~ .tick-checkbox__content .tick-checkbox__icon--checked {
  transform: translateY(0%);
  opacity: 100%;
}
.tick-checkbox--image .tick-checkbox__content {
  padding-top: 2rem;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}
.tick-checkbox--image .tick-checkbox__icons {
  text-align: center;
}
.tick-checkbox--image .tick-checkbox__icon--checked {
  margin: auto;
  position: relative;
}

/* ----- DIALOG ----- */
div.dialog {
  display: none;
}

.ui-dialog {
  box-shadow: 0 0 0.1rem 0 #dadee5;
  border: #e6eaf2 solid 0.1rem !important;
  border-bottom: 0.3rem solid #dadee5 !important;
}

.ui-widget-overlay {
  opacity: 0.35 !important;
  background-color: #ccc !important;
  margin: 5.4rem 0 0 9rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
}

.ui-dialog-titlebar {
  background: transparent !important;
  border: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #4c5259 !important;
  padding: 1.2rem 1.7rem !important;
}

.ui-button.ui-widget:not(.ui-dialog-titlebar-close) {
  position: relative !important;
  display: inline-block !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  padding: 0.9rem 1.3rem !important;
  background-color: hsl(197, 99%, 33%) !important;
  background-color: var(--colorSecondary, hsl(197, 99%, 33%)) !important;
  border-radius: 1rem !important;
  transition: 0.15s background-color !important;
  cursor: pointer !important;
  border: 0 !important;
}

.ui-dialog-buttonpane {
  border: 0 !important;
  padding: 0.7rem 1.2rem !important;
}

.ui-dialog-titlebar-close {
  display: none !important;
}

/* Time Slider */
.slider-container {
  flex: 1 0 auto;
}

.schedule-modal .ui-slider-time,
.modalv2__page .ui-slider-time {
  margin-bottom: 2rem;
}
.schedule-modal .ui-slider-horizontal,
.modalv2__page .ui-slider-horizontal {
  background: #ffffff;
  border: 0.1rem solid #ccc;
  -webkit-border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -ms-border-radius: 0.6rem;
  -o-border-radius: 0.6rem;
  border-radius: 1rem;
  clear: both;
  height: 0.8rem;
  margin: 0.8rem 0;
}
.schedule-modal .ui-slider,
.modalv2__page .ui-slider {
  position: relative;
  text-align: left;
}
.schedule-modal .ui-slider-horizontal .ui-slider-range,
.modalv2__page .ui-slider-horizontal .ui-slider-range {
  height: 100%;
  top: -0.1rem;
}
.schedule-modal .ui-slider .ui-slider-range,
.modalv2__page .ui-slider .ui-slider-range {
  background: hsl(197, 100%, 47%);
  background: var(--colorPrimary, hsl(197, 100%, 47%));
  background-size: 100%;
  -moz-border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -khtml-border-radius: 1rem;
  border-radius: 1rem;
  box-shadow: 0 0.1rem 0 hsl(197, 100%, 47%) inset;
  box-shadow: 0 0.1rem 0 var(--colorPrimary, hsl(197, 100%, 47%)) inset;
  display: block;
  font-size: 0.7em;
  height: 0.8rem;
  position: absolute;
  z-index: 1;
}
.schedule-modal .ui-slider .ui-slider-handle,
.modalv2__page .ui-slider .ui-slider-handle {
  background: #ffffff;
  background-size: 100%;
  border: 0.2rem solid hsl(197, 100%, 47%);
  border: 0.2rem solid var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 0.6rem;
  cursor: default;
  cursor: pointer;
  height: 1.6rem;
  position: absolute;
  transition: background-color 0.2s ease-in-out;
  width: 1.6rem;
  z-index: 2;
}
.schedule-modal .ui-slider .ui-slider-handle .slider-label,
.modalv2__page .ui-slider .ui-slider-handle .slider-label {
  margin-top: 2.4rem;
  position: absolute;
}
.schedule-modal .ui-slider .ui-slider-handle .slider-label--min,
.modalv2__page .ui-slider .ui-slider-handle .slider-label--min {
  right: 0;
}
.schedule-modal .ui-slider .ui-slider-handle .slider-label--min__adjust,
.modalv2__page .ui-slider .ui-slider-handle .slider-label--min__adjust {
  right: 1.6rem;
}
.schedule-modal .ui-slider .ui-slider-handle .slider-label--max,
.modalv2__page .ui-slider .ui-slider-handle .slider-label--max {
  left: 0;
}
.schedule-modal .ui-slider .ui-slider-handle .slider-label--max__adjust,
.modalv2__page .ui-slider .ui-slider-handle .slider-label--max__adjust {
  left: 1.6rem;
}
.schedule-modal .ui-slider .ui-slider-handle:focus,
.schedule-modal .ui-slider .ui-slider-handle:hover,
.modalv2__page .ui-slider .ui-slider-handle:focus,
.modalv2__page .ui-slider .ui-slider-handle:hover {
  outline: none;
}
.schedule-modal .ui-slider-horizontal .ui-slider-handle,
.modalv2__page .ui-slider-horizontal .ui-slider-handle {
  margin-left: -0.6em;
  top: -0.3em;
}
.schedule-modal .ui-slider a:focus,
.modalv2__page .ui-slider a:focus {
  outline: none;
}
.schedule-modal .ui-slider-times,
.modalv2__page .ui-slider-times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
}

#slider-range {
  margin: 0 auto;
  width: 100%;
}

/* ----- DOWNLOADING ----- */
div#download_success {
  display: none;
  margin: 2rem auto 1rem auto;
  width: 10rem;
  height: 10rem;
  box-sizing: border-box;
  background-image: url("/public/images/icons/tick.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7rem;
}

iframe#download_loader {
  margin: 2rem 0 1rem 0;
  width: 10rem;
  height: 10rem;
  box-sizing: border-box;
}

.dropdown-menu {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.031), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.044), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.056), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.069), 14px 14px 45px -2px rgba(0, 0, 0, 0.1);
  color: #000000;
  margin-top: 0.8rem;
  min-width: 19rem;
  opacity: 100%;
  overflow: hidden;
  pointer-events: visible;
  transform: translateY(0rem);
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out, height 0.4s ease-in-out;
  visibility: visible;
  cursor: default;
  z-index: 5;
}
.dropdown-menu--light {
  color: #ffffff;
}
.dropdown-menu--hidden {
  opacity: 0;
  transform: translateY(1rem);
  visibility: hidden;
}
.dropdown-menu--hidden * {
  pointer-events: none;
}
.dropdown-menu__container {
  left: 0;
  padding: 1.6rem;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.4s ease-in-out;
}
.dropdown-menu__container--hidden-right {
  transform: translateX(100%);
}
.dropdown-menu__container--hidden-left {
  transform: translateX(-100%);
}
.dropdown-menu__container > li:not(:last-child) {
  margin-bottom: 0.9rem;
}
.dropdown-menu__option {
  align-items: center;
  border-radius: 1rem;
  background-color: transparent;
  display: flex;
  font-size: 1.2rem;
  justify-content: space-between;
  color: #4c5259;
  text-decoration: none;
  padding: 1.2rem 1.6rem;
  text-align: left;
  transition: background-color 0.2s ease-in-out;
  position: relative;
  width: 100%;
}
.dropdown-menu__option:not(:last-child) {
  margin-bottom: 0.6rem;
}
.dropdown-menu__option:hover {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}
.dropdown-menu__option--title {
  background-color: transparent;
  font-size: 1.4rem;
  padding: 0;
}
.dropdown-menu__option--title:hover {
  background-color: inherit;
}
.dropdown-menu__arrow {
  border-bottom: 0.5rem solid transparent;
  border-left: 0.8rem solid #ffffff;
  border-top: 0.5rem solid transparent;
  display: inline-block;
  height: 0;
  margin-left: auto;
  width: 0;
}
.dropdown-menu__icon-buttons {
  display: flex;
  margin-bottom: 0.8rem;
}
.dropdown-menu__icon-buttons > li:not(:last-of-type) {
  margin-right: 0.8rem;
}
.dropdown-menu__icon-button {
  background-color: #eff3f5;
  border-radius: 1rem;
  color: #000000;
  cursor: pointer;
  height: 4rem;
  transition: all 0.4s ease-in-out;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dropdown-menu__icon-button:hover {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}
.dropdown-menu__icon-button > * {
  pointer-events: none;
}
.dropdown-menu__icon {
  color: #000000;
  font-size: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
}
.dropdown-menu__icon-header {
  height: 3.5rem;
  margin-right: 1.4rem;
  width: 3.5rem;
}

span.dstatus {
  font-size: 1.3rem;
  text-transform: uppercase;
  background-color: #e6eaf2;
  padding: 0.6rem 1rem;
  border: 0.1rem solid #ccc;
  border-radius: 1rem;
  color: #9e9fa0;
}

span.dstatus.closed {
  background-color: #f17270;
  color: #ffffff;
  border-color: #ec4442;
}

span.dstatus.open {
  background-color: #59cd89;
  color: #ffffff;
  border-color: #4fb878;
}

.edit-icon {
  width: 1.6rem;
  height: 1.6rem;
  background-image: url("/svg/icon/edit.svg?c=000000");
}

.edit-icon--inline {
  margin-left: 0.8rem;
}

/* ----- EMAIL PREVIEW ----- */
div.email-preview {
  background-color: #eaeaea;
}

div.email-preview div.email-header {
  width: 100%;
  padding: 2rem 2.5rem;
  box-sizing: border-box;
  background-color: var(--emailHeaderBackgroundColor, hsl(197, 100%, 47%));
}

div.email-preview div.email-header div.email-header-wrapper {
  width: 100%;
  max-width: 55rem;
  margin: 0 auto;
}

div.email-preview div.email-logo {
  width: 100%;
  height: 8rem;
  margin-bottom: 2rem;
  background-image: url(https://cthings.io/wp-content/uploads/2019/02/cthings_logo_light.png);
  background-size: contain;
  background-repeat: no-repeat;
}

div.email-preview h1.email-heading {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.4rem;
  line-height: 150%;
  text-align: left;
  color: var(--emailHeaderTextColor, #ffffff);
}

div.email-preview div.email-body {
  width: calc(100% - 10rem);
  max-width: 55rem;
  padding: 2rem;
  background-color: #ffffff;
  box-sizing: border-box;
  margin: 0 auto;
  color: var(--emailTextColor, #000000);
}

div.email-preview div.email-body > h2 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: bold;
  line-height: 150%;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  margin-bottom: 0.7rem;
  color: var(--emailTextColor, #000000);
}

div.email-preview p,
div.email-preview table.email-table td {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 150%;
  text-align: left;
  padding-bottom: 0.8rem;
  color: var(--emailTextColor, #000000);
}

div.email-preview a {
  color: var(--emailTextLinkColor, hsl(197, 100%, 47%));
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 150%;
  font-weight: 600;
  cursor: pointer;
}
div.email-preview a:hover {
  color: var(--emailTextLinkHoverColor, #000000);
}

div.email-preview table.email-table {
  width: 100%;
  margin-bottom: 2rem;
}

div.email-preview table.email-table thead th {
  color: var(--emailTextHighlightColor, hsl(197, 100%, 47%));
  border-top-width: 0.2rem;
  border-top-style: solid;
}

div.email-preview table.email-table th,
div.email-preview table.email-table td {
  padding: 0.9rem 0.7rem;
}

div.email-preview table.email-table tbody td {
  border-top: 0.2rem solid #e6eaf2;
}

div.email-preview table.email-table th {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 150%;
  text-align: left;
  padding-bottom: 0.8rem;
  text-transform: uppercase;
}

div.email-preview div.email-body > button.email-button {
  letter-spacing: normal;
  padding: 1.2rem 1.4rem !important;
  line-height: 100%;
  text-align: center;
  text-decoration: none;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  border-collapse: separate !important;
  border-radius: 0.4rem;
  background-color: var(--emailButtonBackgroundColor, #ffffff);
  color: var(--emailButtonTextColor, #ffffff);
  cursor: pointer;
}
div.email-preview div.email-body > button.email-button:hover {
  background-color: var(--emailButtonBackgroundColorHover, #ffffff);
}

div.email-preview div.email-footer {
  width: calc(100% - 12rem);
  max-width: 55rem;
  padding: 1rem 0 0 0;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: center;
}

div.email-preview div.email-footer > p {
  text-align: center;
}

div.email-preview div.email-disclaimer {
  width: calc(100% - 10rem);
  max-width: 53rem;
  margin: 0 auto;
  text-align: left;
  color: #9e9fa0;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  line-height: 150%;
  margin-bottom: 2rem;
}

.filter-dropdown {
  animation: fadeInandUp 0.2s ease-in-out;
  border: none;
  border-radius: 1rem !important;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.031), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.044), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.056), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.069), 14px 14px 45px -2px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
  min-width: 14.5rem;
  overflow: hidden;
  padding: 0.9rem;
  position: relative;
}
.filter-dropdown--above {
  margin-top: -2rem;
  box-shadow: 0.5px -0.5px 1.5px -2px rgba(0, 0, 0, 0.031), 1.2px -1.2px 3.9px -2px rgba(0, 0, 0, 0.044), 2.5px -2.5px 8px -2px rgba(0, 0, 0, 0.056), 5.1px -5.1px 16.4px -2px rgba(0, 0, 0, 0.069), 14px -14px 45px -2px rgba(0, 0, 0, 0.1);
}
.filter-dropdown .select2-dropdown--below {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.filter-dropdown.filter-dropdown--datepicker {
  margin-top: 0;
  animation: none;
  border-radius: none !important;
  box-shadow: none;
}
.filter-dropdown.filter-dropdown--datepicker .select2-results__options {
  max-height: 215.5px;
}
.filter-dropdown .select2-results__option {
  border-radius: 1rem;
  font-size: 1.3rem;
  padding: 1rem 1.2rem;
  transition: background-color 0.2s ease-in-out;
}
.filter-dropdown .select2-results__option:not(:last-child) {
  margin-bottom: 0.4rem;
}
.filter-dropdown .select2-results__option--highlighted {
  background-color: rgba(0, 172, 240, 0.15) !important;
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15)) !important;
  color: inherit !important;
}
.filter-dropdown .select2-search__field {
  border: solid 2px #dadee5 !important;
  border-radius: 1rem !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  padding: 0.7rem 0.8rem !important;
  margin-bottom: 0.4rem;
}
.filter-dropdown .select2-search__field:focus {
  border: none !important;
  border: solid 2px hsl(197, 100%, 47%) !important;
  border: solid 2px var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  outline: none !important;
}

/* ------ EXAMPLE ------ */
/*<form class="form-default" id="update_password">
    // TEXT INPUT WITH TOOLTIP INFO
    <div class="form-default__field">
        <label class="form-default__label">New Password</label>
        <input class="form-default__input" name="password" type="password" placeholder="••••••••" data-type="password" data-required />
        <span class="info tooltipster" data-tooltip="right" title="Tooltip content here">
        <svg class="icon icon--small">
          <use xlink:href="/public/images/symbol-defs.svg?v=${appConfig.version}#icon-question"></use>
        </svg>
        </span>
    </div>

    <div class="button-container">
        <button class="button">Update Password</button>
    </div>
  </form>
/* ------ FORMS ------ */
.form-default {
  box-sizing: border-box;
  padding: 0 1.5rem;
  text-align: left;
  width: 100%;
  color: #4c5259;
}
.form-default--modal {
  padding: 0.9rem 1.5rem;
}
.form-default--padded {
  padding: 1.8rem 1.5rem;
}
.form-default.disabled .form-default__input {
  background-color: #e6eaf2;
  border: 0.1rem solid #dadee5;
  color: #9e9fa0;
  pointer-events: none;
}
.form-default.disabled .select2-selection {
  background-color: #e6eaf2 !important;
  border: 0.1rem solid #dadee5 !important;
}
.form-default.disabled .select2-container {
  pointer-events: none;
}
.form-default.loading .form-default__input {
  border: 0.1rem solid #dadee5;
  color: #9e9fa0;
  pointer-events: none;
  -moz-appearance: textfield;
  background-image: url("/public/images/loader/0171a9/spinner_30.gif");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 2.8rem;
}
.form-default__field {
  margin-bottom: 1.2rem;
  vertical-align: top;
}
.form-default__field--top {
  margin-top: 1.2rem;
}
.form-default__field--hidden, .form-default__field.hidden {
  display: none;
}
.form-default__field--variable {
  margin-bottom: 1.2rem;
  min-height: 4rem;
  padding-top: 0.3rem;
  transition: all 0.4s ease-out;
}
.form-default__field--remove {
  opacity: 0;
  transform: translateY(-100%);
}
.form-default__field:last-child, .form-default__field.last {
  margin-bottom: 0.2rem;
}
.form-default__field:last-child.form-default__field--alt-last, .form-default__field.last.form-default__field--alt-last {
  margin-bottom: 1.2rem;
}
.form-default__field.multiline > label {
  vertical-align: top;
}
.form-default__field--picker {
  min-width: max-content;
}
.form-default__field--picker > div.pickr {
  box-sizing: border-box;
  display: inline-block;
  height: 3.2rem;
  overflow: hidden;
  vertical-align: top;
  width: 3.2rem;
  box-shadow: none;
}
.form-default__field--picker > div.pickr > button, .form-default__field--picker > div.pickr > button::after, .form-default__field--picker > div.pickr > button::before {
  border: 0.1rem solid #ccc;
  border-radius: 0;
  border-bottom-right-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  height: 100%;
  width: 100%;
}
.form-default__field--picker > input {
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0;
  width: 8rem;
}
.form-default__fieldset {
  width: 55rem;
  display: inline-block;
}
@media only screen and (max-width: 46.85em) {
  .form-default__fieldset {
    width: 30rem;
  }
}
@media only screen and (max-width: 36.375em) {
  .form-default__fieldset {
    width: 26rem;
  }
}
.form-default__label {
  box-sizing: border-box;
  color: #4c5259;
  display: inline-block;
  font-size: 1.2rem;
  min-height: 2.4rem;
  padding-right: 0.5rem;
  text-align: left;
  vertical-align: bottom;
  width: 12.5rem;
  max-width: 12.5rem;
}
.form-default__label.fullwidth {
  display: block;
}
.form-default__label--wide {
  width: 14rem;
}
.form-default__label--align-top {
  margin-top: 0.8rem;
  vertical-align: top;
}
.form-default__input {
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.07) 0rem 0.1rem 0rem inset;
  box-sizing: border-box;
  color: #4c5259;
  font-size: 1.3rem;
  padding: 0.7rem 0.7rem;
  position: relative;
  width: 27.5rem;
}
.form-default__input::placeholder {
  color: #ccc;
}
.form-default__input:disabled {
  background-color: #e6eaf2;
  border: 0.1rem solid #dadee5;
  color: #9e9fa0;
  pointer-events: none;
}
.form-default__input:focus {
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
  box-shadow: rgba(3, 173, 239, 0.5) 0 0 0.3rem;
}
.form-default__input.dp {
  display: none;
}
.form-default__input.dp + div.datepicker-inline {
  display: inline-block;
  margin-bottom: 1.2rem;
}
.form-default__input.error {
  border: 0.1rem solid #f17270;
  box-shadow: rgba(232, 126, 125, 0.5) 0 0 0.3rem;
}
.form-default__input.loading {
  border: 0.1rem solid #dadee5;
  color: #9e9fa0;
  pointer-events: none;
  -moz-appearance: textfield;
  background-image: url("/public/images/loader/0171a9/spinner_30.gif");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 2.8rem;
}
.form-default__input--file {
  border: 0.1rem solid #ccc;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.07) 0rem 0.1rem 0rem inset;
  box-sizing: border-box;
  color: #4c5259;
  font-size: 1.3rem;
  padding: 0.7rem 0.7rem;
  position: relative;
  width: 27.5rem;
}
.form-default__input--textarea {
  min-height: 3.2rem;
  resize: vertical;
}
.form-default__input--textarea.wide {
  width: 100%;
}
.form-default__inline-element {
  display: inline-block;
  width: 27.5rem;
}
.form-default__inline-element--align-right {
  text-align: right;
}
.form-default__info {
  display: inline-block;
}
.form-default .button-container {
  text-align: right;
  width: 40.2rem;
}
.form-default .wand, .form-default .info {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.9rem;
  display: inline-block;
  height: 1.9rem;
  margin-left: 1.1rem;
  margin-top: 0.6rem;
  vertical-align: top;
  width: 1.9rem;
}
.form-default .wand svg, .form-default .info svg {
  fill: #ccc;
  transition: all 0.2s ease-in-out;
}
.form-default .wand svg:hover, .form-default .wand svg:focus, .form-default .info svg:hover, .form-default .info svg:focus {
  fill: #9e9fa0;
}
.form-default .info > div {
  display: inline-block;
  margin-top: 1rem;
  min-width: 27.5rem;
  width: calc(100% - 13rem);
}
.form-default .info > label {
  font-size: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}
.form-default .wand {
  background-color: transparent;
  border-radius: 1rem;
  cursor: pointer;
  height: 2.5rem;
  margin: 0 0 0 1rem;
  padding: 0.6rem;
  width: 2.5rem;
}
.form-default__icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.9rem;
  margin-left: 1.1rem;
  margin-top: 0.6rem;
  vertical-align: top;
  width: 1.9rem;
}
.form-default .select2 {
  min-width: 27.5rem;
  width: 27.5rem;
}
.form-default .select2.timepicker ~ .select2-container {
  min-width: auto;
  width: auto !important;
}
.form-default .select2-selection--single {
  border: 1px solid #ccc;
  box-shadow: rgba(0, 0, 0, 0.07) 0rem 0.1rem 0rem inset;
  height: 3.2rem !important;
}
.form-default .select2.loading + .select2-container .select2-selection__arrow {
  display: none;
}
.form-default .select2.loading + .select2-container::after {
  background-image: url("/public/images/loader/0171a9/spinner_30.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.8rem;
  content: "";
  height: 3rem;
  position: absolute;
  right: 0;
  top: 0.2rem;
  width: 3rem;
}

.input-contained-label {
  box-sizing: border-box;
  position: relative;
}
.input-contained-label > input {
  padding-right: 5rem !important;
}
.input-contained-label::after {
  box-sizing: border-box;
  color: #ccc;
  content: attr(data-uom);
  font-size: 1.3rem;
  height: 3.2rem;
  line-height: 3.2rem;
  padding-right: 1rem;
  position: absolute;
  right: 0;
  text-align: right;
  top: -2.1rem;
  width: 4rem;
}
.input-contained-label.input-contained-label--schedule::after {
  top: -0.5rem;
}

.map-info-window {
  text-decoration: none !important;
}

.form-default.loading button {
  background-image: url("/public/images/spinner.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4rem;
  color: rgba(0, 0, 0, 0);
  pointer-events: none;
}

@media screen and (min-width: 102.4rem) {
  .form-default.inline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 1rem;
  }
  .form-default.inline > div.form-default__field {
    flex: 1 1;
    padding-right: 1rem;
  }
  .form-default.inline > div.form-default__field > label {
    display: block;
  }
  .form-default.inline input[type=text] {
    width: 100%;
  }
}
.form-default input.loading::-webkit-outer-spin-button,
.form-default input.loading::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.formv2 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.8rem 4.8rem;
  position: relative;
}
@media only screen and (max-width: 46.85em) {
  .formv2 {
    gap: 1.8rem 2.4rem;
  }
}
@media only screen and (max-width: 46.85em) {
  .formv2--modal {
    padding-top: 0;
    gap: 1.8rem 2.4rem;
  }
  .formv2--modal .formv2__input--span1, .formv2--modal .formv2__input--span2, .formv2--modal .formv2__input--span3, .formv2--modal .formv2__input--span4, .formv2--modal .formv2__input--span5, .formv2--modal .formv2__input--span6, .formv2--modal .formv2__input--span7, .formv2--modal .formv2__input--span8, .formv2--modal .formv2__input--span9, .formv2--modal .formv2__input--span10, .formv2--modal .formv2__input--span11, .formv2--modal .formv2__input--span12,
  .formv2--modal .formv2__input --span13 {
    grid-column: span 12/span 12;
  }
}
.formv2--tile {
  padding: 0 1.2rem;
}
.formv2--tile100 {
  max-width: 100rem;
}
.formv2__input--span1 {
  grid-column: span 1/span 1;
}
.formv2__input--span2 {
  grid-column: span 2/span 2;
}
.formv2__input--span3 {
  grid-column: span 3/span 3;
}
.formv2__input--span4 {
  grid-column: span 4/span 4;
}
.formv2__input--span5 {
  grid-column: span 5/span 5;
}
.formv2__input--span6 {
  grid-column: span 6/span 6;
}
.formv2__input--span7 {
  grid-column: span 7/span 7;
}
.formv2__input--span8 {
  grid-column: span 8/span 8;
}
.formv2__input--span9 {
  grid-column: span 9/span 9;
}
.formv2__input--span10 {
  grid-column: span 10/span 10;
}
.formv2__input--span11 {
  grid-column: span 11/span 11;
}
.formv2__input--span12 {
  grid-column: span 12/span 12;
}
.formv2__input--c1-2 {
  grid-column: 1/2;
}
.formv2__input--c1-3 {
  grid-column: 1/3;
}
.formv2__input--c1-4 {
  grid-column: 1/4;
}
.formv2__input--c1-5 {
  grid-column: 1/5;
}
.formv2__input--c2-3 {
  grid-column: 2/3;
}
.formv2__input--c2-4 {
  grid-column: 2/4;
}
.formv2__input--c2-5 {
  grid-column: 2/5;
}
.formv2__input--c3-4 {
  grid-column: 3/4;
}
.formv2__input--c3-5 {
  grid-column: 3/5;
}
.formv2__input--c4-5 {
  grid-column: 4/5;
}
.formv2__input--c1-6 {
  grid-column: 1/6;
}
.formv2__input--c2-6 {
  grid-column: 2/6;
}
.formv2__input--c3-6 {
  grid-column: 3/6;
}
.formv2__input--c4-6 {
  grid-column: 4/6;
}
.formv2__input--c5-6 {
  grid-column: 5/6;
}
.formv2__input--c1-7 {
  grid-column: 1/7;
}
.formv2__input--c2-7 {
  grid-column: 2/7;
}
.formv2__input--c3-7 {
  grid-column: 3/7;
}
.formv2__input--c4-7 {
  grid-column: 4/7;
}
.formv2__input--c5-7 {
  grid-column: 5/7;
}
.formv2__input--c6-7 {
  grid-column: 6/7;
}
.formv2__input--c1-8 {
  grid-column: 1/8;
}
.formv2__input--c2-8 {
  grid-column: 2/8;
}
.formv2__input--c3-8 {
  grid-column: 3/8;
}
.formv2__input--c4-8 {
  grid-column: 4/8;
}
.formv2__input--c5-8 {
  grid-column: 5/8;
}
.formv2__input--c6-8 {
  grid-column: 6/8;
}
.formv2__input--c7-8 {
  grid-column: 7/8;
}
.formv2__input--c1-9 {
  grid-column: 1/9;
}
.formv2__input--c2-9 {
  grid-column: 2/9;
}
.formv2__input--c3-9 {
  grid-column: 3/9;
}
.formv2__input--c4-9 {
  grid-column: 4/9;
}
.formv2__input--c5-9 {
  grid-column: 5/9;
}
.formv2__input--c6-9 {
  grid-column: 6/9;
}
.formv2__input--c7-9 {
  grid-column: 7/9;
}
.formv2__input--c8-9 {
  grid-column: 8/9;
}
.formv2__input--c1-10 {
  grid-column: 1/10;
}
.formv2__input--c2-10 {
  grid-column: 2/10;
}
.formv2__input--c3-10 {
  grid-column: 3/10;
}
.formv2__input--c4-10 {
  grid-column: 4/10;
}
.formv2__input--c5-10 {
  grid-column: 5/10;
}
.formv2__input--c6-10 {
  grid-column: 6/10;
}
.formv2__input--c7-10 {
  grid-column: 7/10;
}
.formv2__input--c8-10 {
  grid-column: 8/10;
}
.formv2__input--c9-10 {
  grid-column: 9/10;
}
.formv2__input--c1-11 {
  grid-column: 1/11;
}
.formv2__input--c2-11 {
  grid-column: 2/11;
}
.formv2__input--c3-11 {
  grid-column: 3/11;
}
.formv2__input--c4-11 {
  grid-column: 4/11;
}
.formv2__input--c5-11 {
  grid-column: 5/11;
}
.formv2__input--c6-11 {
  grid-column: 6/11;
}
.formv2__input--c7-11 {
  grid-column: 7/11;
}
.formv2__input--c8-11 {
  grid-column: 8/11;
}
.formv2__input--c9-11 {
  grid-column: 9/11;
}
.formv2__input--c10-11 {
  grid-column: 9/11;
}
.formv2__input--c1-12 {
  grid-column: 1/12;
}
.formv2__input--c2-12 {
  grid-column: 2/12;
}
.formv2__input--c3-12 {
  grid-column: 3/12;
}
.formv2__input--c4-12 {
  grid-column: 4/12;
}
.formv2__input--c5-12 {
  grid-column: 5/12;
}
.formv2__input--c6-12 {
  grid-column: 6/12;
}
.formv2__input--c7-12 {
  grid-column: 7/12;
}
.formv2__input--c8-12 {
  grid-column: 8/12;
}
.formv2__input--c9-12 {
  grid-column: 9/12;
}
.formv2__input--c10-12 {
  grid-column: 9/12;
}
.formv2__input--c11-12 {
  grid-column: 9/12;
}
.formv2__input--c1-13 {
  grid-column: 1/13;
}
.formv2__input--c2-13 {
  grid-column: 2/13;
}
.formv2__input--c3-13 {
  grid-column: 3/13;
}
.formv2__input--c4-13 {
  grid-column: 4/13;
}
.formv2__input--c5-13 {
  grid-column: 5/13;
}
.formv2__input--c6-13 {
  grid-column: 6/13;
}
.formv2__input--c7-13 {
  grid-column: 7/13;
}
.formv2__input--c8-13 {
  grid-column: 8/13;
}
.formv2__input--c9-13 {
  grid-column: 9/13;
}
.formv2__input--c10-13 {
  grid-column: 10/13;
}
.formv2__input--c11-13 {
  grid-column: 11/13;
}
.formv2__input--c12-13 {
  grid-column: 12/13;
}
.formv2__input--r1-2 {
  grid-row: 1/2;
}
.formv2__input--r1-3 {
  grid-row: 1/3;
}
.formv2__input--r1-4 {
  grid-row: 1/4;
}
.formv2__input--r1-5 {
  grid-row: 1/5;
}
.formv2__input--r2-3 {
  grid-row: 2/3;
}
.formv2__input--r2-4 {
  grid-row: 2/4;
}
.formv2__input--r2-5 {
  grid-row: 2/5;
}
.formv2__input--r3-4 {
  grid-row: 3/4;
}
.formv2__input--r3-5 {
  grid-row: 3/5;
}
.formv2__input--r4-5 {
  grid-row: 4/5;
}
.formv2__input--r1-6 {
  grid-row: 1/6;
}
.formv2__input--r2-6 {
  grid-row: 2/6;
}
.formv2__input--r3-6 {
  grid-row: 3/6;
}
.formv2__input--r4-6 {
  grid-row: 4/6;
}
.formv2__input--r5-6 {
  grid-row: 5/6;
}
.formv2__input--r1-7 {
  grid-row: 1/7;
}
.formv2__input--r2-7 {
  grid-row: 2/7;
}
.formv2__input--r3-7 {
  grid-row: 3/7;
}
.formv2__input--r4-7 {
  grid-row: 4/7;
}
.formv2__input--r5-7 {
  grid-row: 5/7;
}
.formv2__input--r6-7 {
  grid-row: 6/7;
}
.formv2__input--r1-8 {
  grid-row: 1/8;
}
.formv2__input--r2-8 {
  grid-row: 2/8;
}
.formv2__input--r3-8 {
  grid-row: 3/8;
}
.formv2__input--r4-8 {
  grid-row: 4/8;
}
.formv2__input--r5-8 {
  grid-row: 5/8;
}
.formv2__input--r6-8 {
  grid-row: 6/8;
}
.formv2__input--r7-8 {
  grid-row: 7/8;
}
.formv2__input--r1-9 {
  grid-row: 1/9;
}
.formv2__input--r2-9 {
  grid-row: 2/9;
}
.formv2__input--r3-9 {
  grid-row: 3/9;
}
.formv2__input--r4-9 {
  grid-row: 4/9;
}
.formv2__input--r5-9 {
  grid-row: 5/9;
}
.formv2__input--r6-9 {
  grid-row: 6/9;
}
.formv2__input--r7-9 {
  grid-row: 7/9;
}
.formv2__input--r8-9 {
  grid-row: 8/9;
}
.formv2__input--r1-10 {
  grid-row: 1/10;
}
.formv2__input--r2-10 {
  grid-row: 2/10;
}
.formv2__input--r3-10 {
  grid-row: 3/10;
}
.formv2__input--r4-10 {
  grid-row: 4/10;
}
.formv2__input--r5-10 {
  grid-row: 5/10;
}
.formv2__input--r6-10 {
  grid-row: 6/10;
}
.formv2__input--r7-10 {
  grid-row: 7/10;
}
.formv2__input--r8-10 {
  grid-row: 8/10;
}
.formv2__input--r9-10 {
  grid-row: 9/10;
}
.formv2__input--r1-11 {
  grid-row: 1/11;
}
.formv2__input--r2-11 {
  grid-row: 2/11;
}
.formv2__input--r3-11 {
  grid-row: 3/11;
}
.formv2__input--r4-11 {
  grid-row: 4/11;
}
.formv2__input--r5-11 {
  grid-row: 5/11;
}
.formv2__input--r6-11 {
  grid-row: 6/11;
}
.formv2__input--r7-11 {
  grid-row: 7/11;
}
.formv2__input--r8-11 {
  grid-row: 8/11;
}
.formv2__input--r9-11 {
  grid-row: 9/11;
}
.formv2__input--r10-11 {
  grid-row: 9/11;
}
.formv2__input--r1-12 {
  grid-row: 1/12;
}
.formv2__input--r2-12 {
  grid-row: 2/12;
}
.formv2__input--r3-12 {
  grid-row: 3/12;
}
.formv2__input--r4-12 {
  grid-row: 4/12;
}
.formv2__input--r5-12 {
  grid-row: 5/12;
}
.formv2__input--r6-12 {
  grid-row: 6/12;
}
.formv2__input--r7-12 {
  grid-row: 7/12;
}
.formv2__input--r8-12 {
  grid-row: 8/12;
}
.formv2__input--r9-12 {
  grid-row: 9/12;
}
.formv2__input--r10-12 {
  grid-row: 9/12;
}
.formv2__input--r11-12 {
  grid-row: 9/12;
}
.formv2__input--horizontal {
  display: grid;
  grid-template-columns: 3.5rem auto;
  align-items: baseline;
  margin-bottom: 1rem;
}
.formv2__input--horizontal .input__wrapper {
  grid-row: 1;
  grid-column: 1;
  margin-right: 1rem;
}
.formv2__input--horizontal label {
  grid-row: 1;
  grid-column: 2;
  margin-bottom: 0;
}
.formv2__input--horizontal .input__helper-text {
  grid-row: 2;
  grid-column: 1/span 2;
}
.formv2__input--link-toggle {
  position: relative;
}
.formv2__input--link-toggle .toggle-text {
  position: absolute;
  top: 0;
  left: 4rem;
  border: none;
  height: auto;
  background: transparent;
}
.formv2__input--link-toggle .toggle-text__input:checked + .toggle-text__tab, .formv2__input--link-toggle .toggle-text__glider {
  display: none;
}
.formv2__input--link-toggle .toggle-text__tab {
  font-weight: 400;
  font-size: 1.3rem;
  color: #9e9fa0;
  height: auto;
  text-decoration: underline;
  justify-content: flex-start;
}
.formv2__input--link-toggle .toggle-text__tab:hover {
  color: #4c5259;
}
.formv2--no-gap {
  gap: 0;
}
.formv2--table {
  gap: 1.8rem 2.4rem;
}
.formv2--table .input__label {
  margin: 1rem 0 3rem;
}
.formv2--table .input__label-text {
  font-size: 1.4rem !important;
}
@media only screen and (max-width: 46.85em) {
  .formv2--table {
    gap: 1rem;
  }
  .formv2--table .input--title:not(:first-child) {
    margin-top: 2rem;
  }
  .formv2--table .input--title label {
    display: none !important;
  }
  .formv2--table .input--title .input__input {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 2rem 0 0.5rem;
  }
  .formv2--table .input__label {
    margin: 0;
    font-size: 1.25rem;
  }
  .formv2--table .input__label-text {
    font-weight: 400;
    font-size: 1.3rem !important;
  }
  .formv2--table > div.input {
    display: flex;
    align-items: center;
  }
  .formv2--table > div.input > * {
    width: 50%;
    flex-grow: 0;
    flex-shrink: 0;
  }
}
.formv2 .wand, .formv2 .info {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.9rem;
  display: inline-block;
  height: 1.9rem;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  vertical-align: top;
  width: 1.9rem;
  cursor: pointer;
}
.formv2 .wand svg, .formv2 .info svg {
  fill: #ccc;
  transition: all 0.2s ease-in-out;
}
.formv2 .wand svg:hover, .formv2 .wand svg:focus, .formv2 .info svg:hover, .formv2 .info svg:focus {
  fill: #9e9fa0;
}

.icon-tile {
  background-color: #eff3f5;
  background-position: top 2rem center;
  background-repeat: no-repeat;
  background-size: auto 3.2rem;
  border: 0.1rem solid #dadee5;
  border-bottom: 0.2rem solid #dadee5;
  border-radius: 1rem;
  color: #4c5259;
  cursor: pointer;
  flex-direction: column;
  font-size: 1.2rem;
  justify-content: space-around;
  margin-bottom: 0.6rem;
  margin-top: 0.6rem;
  opacity: 60%;
  padding: 1.8rem;
  position: relative;
  text-transform: uppercase;
  transition: 0.2s opacity ease-out, 0.2s color ease-out, 0.1s box-shadow ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-tile:not(:last-of-type) {
  margin-right: 1.2rem;
}
.icon-tile__icon {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
}
.icon-tile__text {
  width: 9.5rem;
}

.icon--smaller {
  font-size: 1.2rem;
}
.icon--small {
  font-size: 1.8rem;
}
.icon--small-medium {
  font-size: 2.2rem;
}
.icon--medium {
  font-size: 2.6rem;
}
.icon--large {
  font-size: 5rem;
  min-width: 5rem;
  min-height: 5rem;
}
.icon--success {
  fill: #59cd89;
}
.icon--warning {
  fill: #e0b558;
}
.icon--alert {
  fill: #d26969;
}
.icon--grey {
  fill: #4c5259;
  color: #4c5259;
}
.icon--primary {
  fill: hsl(197, 99%, 33%);
  fill: var(--colorSecondary, hsl(197, 99%, 33%));
}
.icon__add {
  margin-bottom: 0.3rem;
}
.icon__add::before {
  content: "+";
  color: #bbc7d7;
  font-size: 2.6rem;
}

.icon-test {
  font-size: 32px !important;
  width: 1em !important;
  height: 1em !important;
  fill: red !important;
}

/* ------ INLINE HIERARCHY ----- */
.inline-search-dropdown {
  position: relative;
  display: inline-block;
}
.inline-search-dropdown--compact .input__input--form {
  height: 3.6rem !important;
}
.inline-search-dropdown.inline-search-dropdown--v2 {
  width: 100%;
}
.inline-search-dropdown.inline-search-dropdown--v2.open > input {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.inline-search-dropdown.inline-search-dropdown--v2 .inline-search-results {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  margin-top: -2px;
}

.inline-search-dropdown.loading ul.results::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 17rem;
  background-color: rgba(255, 255, 255, 0.7);
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 3.5rem;
  border-radius: 1rem;
  /* z-index: 2; */
}

span.inline-search-dropdown.loading.simple ul.results::before {
  background-image: none;
}

span.inline-search-dropdown > input.error + input {
  box-shadow: rgba(232, 126, 125, 0.5) 0 0 0.3rem !important;
  border: 0.1rem solid #f17270;
}

span.inline-search-dropdown > input {
  box-shadow: 0 0 0 0 !important;
  background-position: right 0.7rem center;
  background-repeat: no-repeat;
  background-size: 1.2rem;
}

span.inline-search-dropdown.open > input {
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
  border-bottom-color: #ffffff !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

span.inline-search-dropdown.open > input::placeholder {
  font-size: 0;
}

span.inline-search-dropdown.open > input + div.inline-search-results {
  display: flex;
}

.inline-search-results {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  border-top-width: 0;
  background: #ffffff;
  height: 17rem;
  box-sizing: border-box;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  z-index: 6;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
  border-top: 0;
}

div.inline-search-results > ul.parent {
  display: none;
  width: 100%;
  flex: 0;
}

div.inline-search-results .results-wrapper {
  z-index: 6;
  flex: 1 0 0;
  overflow-y: scroll;
  overflow-x: hidden;
}

span.inline-search-dropdown > input[type=text] {
  padding-right: 3rem;
}

span.inline-search-dropdown.loading .results-wrapper {
  overflow: hidden;
}

div.inline-search-results ul.results {
  position: relative;
  width: 100%;
  list-style: none;
}

div.inline-search-results ul > li {
  position: relative;
  font-size: 1.3rem;
  padding: 0.8rem 0.7rem 0.8rem 0.9rem;
  border-top: 0.1rem solid #ffffff;
  border-bottom: 0.1rem solid #ffffff;
  cursor: pointer;
}

div.inline-search-results ul.hierarchy > li {
  padding-left: 2.5rem;
}
div.inline-search-results ul.hierarchy > li.inherit-option {
  padding-left: 1.1rem;
}

div.inline-search-results ul > li.empty {
  font-size: 1.3rem;
  font-weight: 300;
  color: #ccc;
  text-align: center;
  padding: 0.8rem 0.7rem !important;
  cursor: default;
}

div.inline-search-results.loading > ul > li.empty {
  font-size: 0;
}

div.inline-search-results ul.hierarchy > li:not([data-children="0"]):not(.empty) {
  background-position: left 0.8rem center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
}

div.inline-search-results ul.hierarchy > li:not([data-children="0"]):not(.empty) > span:not(.all) {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 3rem;
  height: 100%;
  top: 0;
  left: 0;
}

div.inline-search-results ul.parent > li {
  background-position: left 0.8rem center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  border-bottom: 0.1rem solid #dadee5;
  padding-right: 2rem;
  padding-left: 2.5rem;
}

div.inline-search-results ul.parent > li > p {
  padding: 0;
  margin: 0;
  font-size: 1.3rem;
}

div.inline-search-results ul.parent > li > span.collapse.single {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 2.4rem;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

div.inline-search-results ul.parent > li > span.collapse.all {
  position: absolute;
  width: 2.5rem;
  height: 2.2rem;
  top: 50%;
  margin-top: -1.1rem;
  right: 0.2rem;
  background-image: url("/svg/icon/remove.svg?c=0171a9");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.9rem;
  cursor: pointer;
}

.single-result-option {
  position: relative;
}

div.inline-search-results ul.hierarchy > li[data-children="0"]::before,
.single-result-option::before {
  content: "-";
  position: absolute;
  left: 1rem;
  top: 50%;
  margin-top: -0.4rem;
  width: 1rem;
  height: 0.9rem;
  line-height: 0.8rem;
  font-size: 1.1rem;
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  text-align: left;
  border-left: 0.1rem solid hsl(197, 99%, 33%);
  border-left: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
}

span.inline-search-dropdown:not([data-parent-id="0"]) ul.hierarchy.results > li {
  padding-left: 3.2rem;
  background-position: left 1.5rem center;
}

div.inline-search-results ul.results:not(.hover-manual) > li:not(.empty):hover,
div.inline-search-results ul.results > li:not(.empty).hover {
  border-top: 0.1rem solid hsl(197, 100%, 47%);
  border-top: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%));
  border-bottom: 0.1rem solid hsl(197, 100%, 47%);
  border-bottom: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%));
}

.inline-select ~ .select2 {
  background-color: #ffffff;
  border-radius: 0.5rem;
  margin-left: 0.45rem;
  display: inline-block;
}
.inline-select ~ .select2-container {
  border-radius: 0.5rem !important;
}
.inline-select ~ .select2-container--disabled .select2-selection--single {
  background-color: #ffffff;
}
.inline-select ~ .select2-container--disabled .select2-selection__rendered {
  padding-right: 0.8rem !important;
  padding-left: 0.8rem;
  min-width: 0 !important;
}
.inline-select ~ .select2-container--disabled .select2-selection__arrow {
  display: none;
}
.inline-select ~ .select2 .select2-selection--single {
  border: 0;
  border-radius: 0.5rem !important;
}
.inline-select ~ .select2 .select2-selection--single:focus-visible {
  outline: 2px solid hsl(197, 100%, 47%);
  outline: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.inline-select ~ .select2 .select2-selection__rendered {
  text-align: left;
  padding-right: 1.4rem;
  padding-left: 0.8rem;
}
.inline-select ~ .select2 .select2-selection__placeholder {
  color: #000000 !important;
}
.inline-select ~ .select2-dropdown--below {
  border-top-left-radius: 0.5rem !important;
}
.inline-select--tile ~ .select2 .select2-selection--single {
  border: 1px solid #ccc;
  border-radius: 0.5rem !important;
  height: 25px;
}
.inline-select--tile ~ .select2 .select2-selection--single .select2-selection__rendered {
  line-height: 25px;
}
.inline-select--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.inline-select__dropdown {
  border: none;
  border-radius: 0.5rem;
  animation: fadeInandUp 0.2s ease-in-out;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.028), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.04), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.05), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.062), 14px 14px 45px -2px rgba(0, 0, 0, 0.09);
}
.inline-select__dropdown.select2-dropdown {
  margin-left: -2px;
}
.inline-select__dropdown.select2-dropdown--above {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  margin-top: -0.9rem;
}
.inline-select__dropdown.select2-dropdown--below {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-top: 0.45rem;
}
.inline-select__dropdown .select2-results {
  border-radius: 0.5rem;
  overflow: hidden;
  padding: 0.45rem;
}
.inline-select__dropdown .select2-results__option {
  font-size: 1.3rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease-in-out;
}
.inline-select__dropdown .select2-results__option:not(:last-child) {
  margin-bottom: 0.45rem;
}
.inline-select__dropdown .select2-results__option[aria-selected=true] {
  background-color: #eff3f5;
}
.inline-select__dropdown .select2-results__option--highlighted {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  color: #000000;
}
.inline-select__dropdown .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  color: #000000;
}
.inline-select__dropdown .select2-results__option.select2-results__message {
  padding: 0;
}
.inline-select__dropdown .select2-search--dropdown .select2-search__field {
  border-radius: 0.5rem;
  border: 2px solid #ccc;
  outline: none;
}
.inline-select__dropdown .select2-search--dropdown .select2-search__field:focus-visible {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  outline: none;
}
.inline-select__button {
  padding: 0.6rem;
  border-radius: 0.5rem;
}

.inline-input {
  background-color: #ffffff;
  border-radius: 0.5rem;
  display: inline-block;
  width: max-content;
  line-height: 2.8rem;
  padding: 0 0.8rem;
}
.inline-input:focus,
.inline-input :focus-visible {
  outline: none;
  border: none;
}

.tile-inline-select--narrow .inline-select.inline-select--tile ~ .select2 .select2-selection__rendered {
  padding-right: 0;
}

.input-reveal {
  display: flex;
  background-color: #ffffff;
  border-radius: 0.5rem;
  position: relative;
}
.input-reveal--hidden {
  display: none;
}
.input-reveal__input {
  line-height: 2.8rem;
  background-color: transparent;
  padding-left: 0.9rem;
  width: 7rem;
  transition: width 0.2s ease-in-out, padding 0.2s ease-in-out;
}
.input-reveal__input:focus, .input-reveal__input:focus-visible {
  border: none;
  outline: none;
}
.input-reveal__input--hidden {
  width: 0;
  padding-left: 0;
}
.input-reveal__button {
  padding: 0.9rem 0.6rem 1.2rem 0.6rem;
  background-color: transparent;
  color: #4c5259;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.3rem;
  cursor: pointer;
  line-height: 0;
}
.input-reveal__loading-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0.45rem;
}
.input-reveal__loading-container--hidden {
  display: none;
}
.input-reveal__loading {
  position: relative;
  width: 2rem;
  background-color: #ffffff;
}

/* ----- MODAL ----- */
.jquery-modal.blocker {
  padding-top: 9.3rem;
  grid-area: body;
  background: rgba(0, 0, 0, 0.5);
}

.jquery-modal.blocker::before {
  /*height: calc(50%);*/
  margin-top: -20%;
}

.jquery-modal {
  z-index: 11;
}
.jquery-modal__body {
  margin: 0.9rem 0;
  overflow-y: scroll;
}

.modal {
  display: none;
  border-radius: 0.2rem;
  padding: 1.7rem 2rem;
  box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.2);
  margin-top: -1.5rem;
  transition: margin-top 0.2s;
  z-index: 15;
}

@media screen and (max-width: 90rem) {
  .jquery-modal.blocker {
    grid-column: 1/3;
    z-index: 13;
  }
}
.jquery-modal > .modal > a.close-modal {
  background-image: url("/svg/icon/cross.svg?c=bbbbbb");
  width: 1.3rem;
  height: 1.3rem;
  top: 2rem;
  right: 2rem;
}

.jquery-modal > .modal.done {
  margin-top: 0;
}

.jquery-modal > .modal.w800 {
  width: 100%;
  min-width: auto;
  max-width: 80rem;
  border-radius: 1rem;
  overflow: hidden;
}

.jquery-modal > .modal.w600 {
  width: 100%;
  min-width: auto;
  max-width: 60rem;
}

.jquery-modal > .modal > ul {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  max-height: 100%;
  min-height: 25.5rem;
}

.jquery-modal > .modal > ul > li {
  position: relative;
  flex: 1 0 auto;
}

.jquery-modal > .modal > ul > li.header,
.jquery-modal > .modal > ul > li.footer {
  flex: 0 0 auto;
}

.jquery-modal > .modal > ul > li.header > h3 {
  margin-bottom: 0.3rem;
}

.jquery-modal > .modal > ul > li.body {
  overflow-y: auto;
}

.jquery-modal > .modal > ul > li.body.hidden {
  display: none;
}

.jquery-modal > .modal > ul > li.body.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.65);
  z-index: 5;
}

.jquery-modal > .modal > ul > li.body.h350 {
  flex: 1 0 35rem;
  height: 35rem;
  max-height: 35rem;
}

.jquery-modal > .modal > ul > li.body.loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3rem;
  margin-top: -1.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/public/images/loader/0171a9/spinner_30.gif");
  background-size: contain;
}

.jquery-modal > .modal > ul > li.body.loading[data-text]::after {
  position: absolute;
  width: 100%;
  top: calc(50% + 2.3rem);
  text-align: center;
  content: attr(data-text);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: #9e9fa0;
}

.jquery-modal > .modal.loading > ul > li.body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-size: 4rem;
  background-color: rgba(255, 255, 255, 0.65);
  z-index: 1;
}

.jquery-modal > .modal.loading.block > ul > li.body::before {
  background-image: none;
}

.jquery-modal > .modal > ul > li.body[data-tab=processing]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 5rem;
  margin-top: -2.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/public/images/loader/0171a9/gear_50.gif");
  background-size: contain;
}

.jquery-modal > .modal > ul > li.body[data-tab=loading] {
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-size: 4rem;
}

.jquery-modal > .modal > ul > li.body[data-tab=success]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 5rem;
  margin-top: -2.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/public/images/icons/tick.svg");
  background-size: contain;
}

.jquery-modal > .modal > ul > li.header h1 {
  font-size: 1.6rem;
  padding-bottom: 0.2rem;
}

.jquery-modal > .modal > ul > li.footer {
  text-align: right;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 0.1rem solid #e6eaf2;
  min-height: 2rem;
}

.jquery-modal > .modal > ul > li.footer.hidden {
  display: none;
}

.jquery-modal > .modal > ul > li.footer > a.btn {
  font-size: 1.3rem;
  font-weight: 400;
  color: #9e9fa0;
  text-transform: uppercase;
  background-color: transparent;
  padding: 0 0.7rem;
  cursor: pointer;
}

.jquery-modal > .modal > ul > li.footer > a.btn.hidden {
  display: none;
}

.jquery-modal > .modal > ul > li.footer.loading {
  background-position: top 0.3rem right;
  background-repeat: no-repeat;
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-size: 3.2rem;
}

.jquery-modal > .modal > ul > li.footer.loading * {
  opacity: 0;
  pointer-events: none;
}

.jquery-modal > .modal > ul > li.nav > a.btn:hover {
  color: #9e9fa0;
  transition: 0.25s color;
}

.jquery-modal > .modal > ul > li.nav > a.btn:last-child {
  padding-right: 0;
}

.jquery-modal ul.tile {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.jquery-modal ul.tile > li {
  padding: 0;
  margin-top: 1.2rem;
  animation: none;
}

.jquery-modal ul.tile li > div.wrapper {
  border-bottom: 0.2rem solid #dadee5;
  box-shadow: 0 0 0 0;
  border-radius: 0;
}

.jquery-modal ul.tile li > div.wrapper > div.header {
  display: none;
}

.jquery-modal ul.tile li[data-tile=table] > div.wrapper {
  border-left-color: #ffffff;
  border-right-color: #ffffff;
  border-bottom: 0;
  border-top: 0;
  background-color: #ffffff;
  background: #ffffff;
}

.jquery-modal .modalv2 ul.tile li[data-tile=table] > div.wrapper {
  background-color: transparent;
}

.jquery-modal ul.tile li[data-tile=table] div.body {
  height: 100%;
}

.jquery-modal ul.tile li table {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.jquery-modal ul.tile li table tr td {
  border-left-color: #ffffff;
  border-right-color: #ffffff;
}

.modal-form {
  margin: 2rem 0 1rem 0;
}

.condition-modal__device-page {
  min-height: 35rem;
}

.modal__list-body {
  overflow-y: auto;
  margin-top: 0 !important;
}

.key-value-table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0px;
  outline: none;
}
.key-value-table__cell {
  border: none;
  border-bottom: 1px solid #e6eaf2;
  color: #4c5259;
  font-size: 1.3rem;
  outline: none;
  padding: 1.4rem 2.4rem;
  width: max-content;
  word-break: break-word;
}
.key-value-table__cell--key {
  color: hsl(197, 99%, 33%);
  color: var(--colorTextHighlight, hsl(197, 99%, 33%));
  font-weight: 600;
  width: 25rem;
}
@media only screen and (max-width: 46.85em) {
  .key-value-table__cell--key {
    width: 18rem;
  }
}
@media only screen and (max-width: 36.375em) {
  .key-value-table__cell--key {
    width: 12rem;
  }
}
.key-value-table__cell--button {
  padding: 0 1.8rem;
  width: 1.6rem;
}
.key-value-table__row:nth-child(odd) .key-value-table__cell {
  background-color: #f0f7fa;
}
.key-value-table__row:first-of-type .key-value-table__cell {
  border-top: 1px solid #e6eaf2;
}

ul.list {
  margin-bottom: 1.2rem;
  padding-left: 2.4rem;
}
ul.list > li {
  list-style: disc;
  padding-left: 1.2rem;
  font-size: 1.2rem;
  font-weight: 400;
  width: 100%;
  text-align: left;
  margin-bottom: 0.6rem;
}

/* ------ LOADING BAR ------ */
div.loading-bar {
  height: 1.8rem;
  width: 93%;
  margin: 0 auto;
  position: relative;
  background: #eff3f5;
  border: 1px solid #e6eaf2;
  border-radius: 2rem;
  padding: 0rem;
  box-shadow: inset 0 -0.1rem 0.1rem rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: opacity 0.4s ease-in-out;
}

div.loading-bar > span {
  display: block;
  height: 100%;
  background-color: hsl(19, 97%, 64%);
  background-image: linear-gradient(center bottom, hsl(19, 97%, 64%) 37%, hsl(19, 97%, 64%) 69%);
  background-color: var(--colorHighlight, hsl(19, 97%, 64%));
  background-image: linear-gradient(center bottom, var(--colorHighlight, hsl(19, 97%, 64%)) 37%, var(--colorHighlight, hsl(19, 97%, 64%)) 69%);
  position: relative;
  overflow: hidden;
  animation: move 3s linear infinite;
  transition: width 0.4s linear;
}

div.loading-bar > span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-size: 5rem 5rem;
  animation: move 2s linear infinite;
  overflow: hidden;
}

/* Spinner */
.loading-spinner::before {
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4rem;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
}
.loading-spinner--100::before {
  background-color: #ffffff;
}
.loading-spinner--up20::before {
  background-position: 50% calc(50% - 2rem);
}
.loading-spinner--up30pc::before {
  background-position: 50% 20%;
}

.page-loader {
  background-color: hsl(200, 33%, 93%);
  background-color: var(--colorBackground, hsl(200, 33%, 93%));
  grid-column: 2/3;
  grid-row: 1/-1;
}

.loading-img {
  animation: fadeIn 0.2s ease-in-out 0.4s;
  height: 50%;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  visibility: visible;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-img__img {
  animation: rotateAnimation 1.2s ease-in-out infinite;
  perspective: 80rem;
  width: 5rem;
}
.loading-img--hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes rotateAnimation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
:root {
  --size: 10rem;
}

.table-loader {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  bottom: 0;
  left: 0;
  position: absolute;
  margin-top: 5.5rem;
  right: 0;
  top: 0;
  z-index: 2;
  display: block;
}
.table-loader--hidden {
  display: none;
}
.table-loader--no-header {
  margin-top: 0;
}
.table-loader__row {
  width: 100%;
}
.table-loader__container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 20rem;
  min-height: 10rem;
}
.table-loader__container td {
  border: 0 !important;
}
.table-loader__spinner {
  width: 40rem;
}

.spinner {
  width: 7rem;
  height: 7rem;
  position: relative;
  text-align: center;
  -webkit-animation: sk-rotate 2s infinite linear;
  animation: sk-rotate 2s infinite linear;
}

@keyframes rotate3 {
  0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
  }
  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
  }
}
@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 hsl(197, 100%, 47%);
  }
  50% {
    box-shadow: 0 0 0 hsl(197, 100%, 47%);
    margin-bottom: 0;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 hsl(197, 100%, 47%);
    margin-bottom: 10px;
  }
}
@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 hsl(197, 100%, 47%);
  }
  50% {
    box-shadow: 0 0 0 hsl(197, 100%, 47%);
    margin-top: -20px;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 hsl(197, 100%, 47%);
    margin-top: 0;
  }
}
/* > 10 will break the round shape */
.loading-circle-spinner {
  position: relative;
  margin: 0 auto;
  width: 5rem;
  border: 0 !important;
}
.loading-circle-spinner--input {
  width: 2.5rem;
}

.loading-circle-spinner:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.loading-circle-spinner__circle-svg {
  -webkit-animation: loading-circle-spinner-rotate 1.28973s linear infinite;
  animation: loading-circle-spinner-rotate 1.28973s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.loading-circle-spinner__circle-stroke {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke: hsl(197, 100%, 47%);
  -webkit-animation: loading-circle-spinner-dash 2s ease-in-out infinite;
  animation: loading-circle-spinner-dash 2s ease-in-out infinite;
  stroke-linecap: round;
  stroke-width: 5px !important;
}

@-webkit-keyframes loading-circle-spinner-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading-circle-spinner-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loading-circle-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes loading-circle-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
.live-circle {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
}
.live-circle:before {
  content: "";
  position: relative;
  display: block;
  width: 240%;
  height: 240%;
  box-sizing: border-box;
  margin-left: -72%;
  margin-top: -72%;
  border-radius: 4.5rem;
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  animation: pulse 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.live-circle:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 5rem;
  animation: circle 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
.live-circle--paused:before, .live-circle--paused:after {
  animation-play-state: paused;
  background-color: #ccc;
}

@keyframes pulse {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
/* ------ LOGIN ------ */
body.login {
  overflow-y: auto;
}
@media only screen and (min-width: 46.85em) {
  body.login {
    display: block;
  }
}

.login-preview {
  border-radius: 1rem;
  overflow: hidden;
}

.login-form {
  display: table;
  height: 100%;
  width: 100%;
}
.login-form--preview {
  position: relative;
  overflow: hidden;
}
.login-form--preview .wrapper {
  transform: scale(0.7);
}
.login-form--preview.login-form > #login_video {
  position: absolute;
  max-height: 100%;
}
.login-form--preview.login-form:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
}

.login-form > #login_video {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0;
  z-index: 0;
}

.login-form::before {
  /* background-image: linear-gradient(to right bottom, #1f3559, #1f3350, #213146, #232f3d, #252c34); */
  background-color: var(--loginOverlayColor, #1f3350);
  content: "";
  height: 1000%;
  opacity: 0.85;
  position: fixed;
  width: 1000%;
  z-index: 1;
}

.login-form > div.wrapper {
  display: table-cell;
  height: 100%;
  padding: 2rem;
  position: relative;
  vertical-align: middle;
  width: 100%;
  z-index: 2;
  animation: fadeIn 0.5s ease-in-out;
}

.login-form div.footer {
  bottom: 0;
  box-sizing: border-box;
  height: 3.5rem;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.login-form div.footer > p {
  color: #9e9fa0;
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 auto 1.2rem auto;
  max-width: 90%;
}

@media only screen and (min-width: 46.85em) {
  .login-form div.footer br {
    display: none;
  }
}

.login-form div#logo_loader {
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-fill-mode: none;
  -webkit-animation-fill-mode: none;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-name: rotate;
  -webkit-animation-name: rotate;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  background-image: url("/public/images/logo_square.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
  height: 6.4rem;
  left: 50%;
  margin-left: -3.2rem;
  margin-top: -5.2rem;
  position: absolute;
  top: 50%;
  width: 6.4rem;
}

.login-form div#logo_loader_text {
  color: #ffffff;
  display: none;
  font-size: 1.5rem;
  font-weight: 300;
  height: 6.4rem;
  left: 50%;
  margin-left: -10rem;
  margin-top: 3rem;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  width: 20rem;
}

.login-form div.logo {
  background-image: url("/public/images/logo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 4rem;
  margin-bottom: 0.7rem;
  width: 100%;
}

.login-form h1 {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 2rem;
  text-align: center;
  width: 100%;
}

.login-form h2 {
  color: #9e9fa0;
  font-size: 1.4rem;
  font-weight: 400;
  margin: 1.4rem 0 1.4rem 0;
  text-align: left;
  text-transform: none;
  width: 100%;
}

.login-form a.h2 {
  color: #ccc;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 300;
  margin: 1.4rem 0 4rem 0;
  text-align: center;
  text-transform: none;
  width: 100%;
}

.login-form a.h2:hover {
  cursor: pointer;
  text-decoration: underline;
}

.login-form form {
  background-color: #fffafa;
  border-radius: 1rem;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 37.5rem;
  padding: 1.9rem 3.6rem;
}

.login-form form label {
  color: #99a4b3;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 400;
  padding: 1rem 0 1.1rem 0;
  text-align: left;
  text-transform: uppercase;
  width: 20rem;
}

.login-form form input {
  background-color: #fffafa;
  border: 0.1rem solid #ccc;
  border-radius: 1rem;
  box-sizing: border-box;
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  margin: 0 0 1.3rem 0;
  padding: 1rem;
  width: 100%;
}

.login-form form input::placeholder {
  color: #ccc;
}

.login-form form .button {
  background-color: var(--loginButtonColor, hsl(197, 99%, 33%));
  border-radius: 1rem;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4rem;
  margin: 1.6rem 0 1.6rem 0;
  padding: 1.2rem;
  text-transform: uppercase;
  width: 100% !important;
}

.login-form form .button.loading {
  background-image: url("/public/images/loader/ffffff/ellipsis_40.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4rem;
  font-size: 0rem;
  line-height: 1.4rem;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #login form .button.loading {
    background-image: url("/public/images/loader/ffffff/ellipsis_40.gif");
  }
}
.login-form form .button:not([disabled]):not(.disabled):not(.menu):hover {
  background-color: var(--loginButtonHoverColor, #019dda) !important;
}

.move-to {
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: flex-start;
  margin: 2.4rem 0 1.2rem 0;
}
.move-to__container {
  width: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.move-to__container:not(:last-child) {
  margin-right: 1rem;
}
.move-to__icon {
  font-size: 7rem;
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
}
.move-to__icon--middle {
  font-size: 5rem;
}
.move-to__heading {
  margin-top: 1.8rem;
}
.move-to__middle-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  height: 8rem;
}

/* ----- OPTION TILE ----- */
.option-tile {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}
.option-tile .basic-card {
  max-width: 47%;
  width: 17%;
  margin: 0 0.9rem 1.8rem 0.9rem;
  flex-grow: 1;
}
.option-tile .basic-card--top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.option-tile--1 .basic-card {
  width: auto;
  min-width: 25rem;
  max-width: 60%;
}
.option-tile--3 .basic-card {
  max-width: 31%;
  width: 31%;
}
.option-tile--3 .basic-card:nth-child(3n+1) {
  margin-left: 0;
}
.option-tile--3 .basic-card:nth-child(3n) {
  margin-right: 0;
}
.option-tile--less-margin {
  margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
}
.option-tile--spaced {
  margin: 2.4rem 1.2rem;
}
.option-tile--small {
  min-height: min-content;
}
.option-tile--smaller {
  min-height: min-content;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.option-tile--nowrap {
  flex-wrap: nowrap;
  margin: auto 0;
}
@media only screen and (max-width: 56.25em) {
  .option-tile:not([class*=option-tile--1]) .basic-card {
    max-width: 40%;
    margin-left: 0.9rem;
    margin-right: 0.9rem;
  }
}
@media only screen and (max-width: 36.375em) {
  .option-tile:not([class*=option-tile--1]) {
    flex-wrap: wrap;
  }
  .option-tile:not([class*=option-tile--1]) .basic-card {
    width: 100%;
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.option-tile--slim {
  width: 86%;
  margin: auto;
}
.option-tile--slim .basic-card {
  min-width: 15rem;
  max-width: 30%;
  padding: 1.7rem;
}
.option-tile--slim .basic-card h1 {
  font-size: 1.5rem;
}
.option-tile--slim .basic-card svg {
  font-size: 5rem;
}
.option-tile--slim--no-wrap {
  flex-wrap: nowrap;
}
@media only screen and (max-width: 56.25em) {
  .option-tile--slim {
    width: 100%;
  }
  .option-tile--slim .basic-card {
    max-width: 40%;
  }
}
.option-tile--grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
.option-tile--grid .basic-card {
  min-width: 15rem;
  max-width: none;
  width: auto;
  margin: 0;
}
.option-tile--grid--double {
  grid-template-columns: 50% 50%;
}
.option-tile--grid--double .basic-card {
  padding: 2rem;
}
.option-tile--grid--triple {
  grid-template-columns: 33% 33% 33%;
}
.option-tile--grid--triple .basic-card {
  padding: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .option-tile--grid {
    grid-template-columns: auto;
  }
  .option-tile--grid .basic-card {
    max-width: 100% !important;
  }
}

.option-tile.loading::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4rem;
}

.option-tile.empty::after {
  position: absolute;
  content: attr(data-empty);
  text-align: center;
  padding-top: 2.5rem;
  font-size: 1.2rem;
  font-weight: 400;
  color: #ccc;
  text-transform: uppercase;
  top: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  box-sizing: border-box;
}

.inline.label {
  padding-right: 1.5rem;
}

div.vmid > div.wrapper {
  display: table-cell;
  vertical-align: middle;
}

/* ----- MISC ----- */
pre.shadow {
  position: relative;
  width: 100%;
  height: 35rem;
  background: #00262f;
  border-radius: 1rem;
  overflow: scroll;
  color: #889797;
  font-size: 1.3rem;
  padding: 0.7rem;
  box-sizing: border-box;
}

pre.shadow.loading::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4.4rem;
  background-image: url("/public/images/spinner.gif");
  background-color: rgba(0, 38, 47, 0.5);
}

.string {
  color: #299f96;
}

.number {
  color: #cc3680;
}

.boolean {
  color: #b58900;
}

.null {
  color: #b58900;
}

.key {
  color: #268bd2;
}

/* ------ HEADER ------ */
.page-header {
  align-items: center;
  background-color: #2f3743;
  border-bottom: 0.4rem solid #00adef;
  box-sizing: border-box;
  display: flex;
  grid-area: header;
  height: 5.4rem;
  justify-content: space-between;
  padding: 1rem 1.6rem;
  width: 100%;
  z-index: 14;
}
.page-header__logo, .page-header__logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
}
.page-header__menu {
  display: grid;
  grid-template-columns: auto 3rem 3rem;
  gap: 1rem;
}
.page-header__user-initials {
  position: relative;
}
.page-header__user {
  width: 2.6rem;
  height: 2.6rem;
  font-size: 2.6rem;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  cursor: pointer;
}
.page-header__user-menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-header__quickbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.page-header__quickbar-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
}

/* ----- PROGRESS BAR ----- */
.progress-bar {
  background: #dadee5;
  box-shadow: inset 0 0 0.3rem 0 #ccc;
  height: 0.8rem;
  grid-column: 1/-1;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  margin-left: 0;
  transition: width 0.2s ease-in-out, margin-left 0.2s ease-in-out;
}
.progress-bar--tile {
  height: 1.5rem;
  display: flex;
}
.progress-bar--tile span.border-left {
  border-left: solid 0.2rem #747e89;
}
.progress-bar > span {
  background-color: hsl(19, 97%, 64%);
  background-color: var(--colorHighlight, hsl(19, 97%, 64%));
  display: block;
  height: 100%;
  transition: width 0.5s ease-out;
  width: 0%;
}
.progress-bar > span:first-child {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.progress-bar > span:last-child {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.progress-bar > span.progress-bar__bar--grey {
  background-color: #ccc;
}
.progress-bar > span.progress-bar__bar--red {
  background-color: #f17270;
}
.progress-bar > span.progress-bar__bar--blue {
  background-color: #00acf0;
}
.progress-bar > span.progress-bar__bar--orange {
  background-color: #e0b558;
}
.progress-bar > span.progress-bar__bar--green {
  background-color: #59cd89;
}

.process-bar {
  display: inline-flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 15rem;
  margin: 2rem auto 0;
}
.process-bar__spacer {
  border: 4px solid #ccc;
  border-radius: 100%;
  width: 0.25rem;
  height: 0.25rem;
  margin-top: -4.5rem;
  opacity: 0.3;
}
.process-bar__spacer--compact {
  margin-top: -2.5rem;
}
.process-bar__item {
  opacity: 0.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 10rem;
  transition: opacity 0.4s ease-in-out;
  position: relative;
}
.process-bar__item:not(.process-bar__item--complete) svg {
  filter: saturate(0);
}
.process-bar__item--complete {
  opacity: 0.9;
}
.process-bar__item--complete + .process-bar__spacer {
  opacity: 0.9;
}
.process-bar__item__icon {
  font-size: 4.1rem;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, padding 0.4s ease-in-out;
  position: relative;
}
.process-bar__item__icon .status-tile__icon {
  font-size: inherit !important;
  line-height: normal !important;
  width: auto !important;
  height: auto !important;
}
.process-bar__item > span {
  font-size: 0.9em;
  text-align: center;
  transition: font-size 0.4s ease-in-out;
  max-width: 9rem;
}
.process-bar__item--active {
  opacity: 0.6;
}
.process-bar__item--active + .process-bar__spacer {
  opacity: 0.6;
}
.process-bar__item--active i {
  width: 9.6rem;
  height: 9.6rem;
  padding: 2rem;
}
.process-bar__item--active > span {
  font-size: 1.1em;
}
.process-bar--linear {
  margin: 5rem auto 3rem;
  width: 400px;
  max-width: 100%;
  text-align: center;
}
.process-bar--linear:has(button) {
  margin-top: 30px;
}
.process-bar--linear button {
  display: block;
  margin: 2rem auto 0;
}
.process-bar--linear .process-bar__text {
  margin: 20px 5px 0;
  padding: 3px 8px;
  color: #9e9fa0;
  display: inline-block;
  font-weight: 400;
  font-size: 0.9em;
}
.process-bar--linear .process-bar__text br {
  display: none;
}
.process-bar--linear span[class^=step] {
  background-color: #59cd89;
}
.process-bar--linear .step0 {
  width: 0;
}
.process-bar--linear .step20 {
  width: 20%;
}
.process-bar--linear .step40 {
  width: 40%;
}
.process-bar--linear .step60 {
  width: 60%;
}
.process-bar--linear .step80 {
  width: 80%;
}
.process-bar--linear .step100 {
  width: 100%;
}
.process-bar__time-elapsed {
  margin-top: 1rem;
  position: absolute;
  bottom: 2rem;
  left: 3rem;
}

@media only screen and (max-width: 56.25em) {
  .process-bar {
    flex-direction: column;
    gap: 3rem;
    min-height: fit-content;
  }
  .process-bar__spacer {
    display: none;
  }
  .process-bar--linear .process-bar__text span {
    display: none;
  }
  .process-bar--linear .process-bar__text br {
    display: block;
  }
  .process-bar__time-elapsed {
    display: none;
  }
}
.gear-rotate {
  font-size: 2.4rem;
  display: block;
  width: 2em;
  height: 2em;
  background: #9e9fa0;
  border-radius: 1em;
  -webkit-animation: 1s gear-rotate linear infinite;
  -moz-animation: 1s gear-rotate linear infinite;
  animation: 1s gear-rotate linear infinite;
}

.gear-rotate::before {
  width: 2.8em;
  height: 2.8em;
  background: -webkit-linear-gradient(0deg, transparent 39%, #9e9fa0 39%, #9e9fa0 61%, transparent 61%), -webkit-linear-gradient(60deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%), -webkit-linear-gradient(120deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%);
  background: -moz-linear-gradient(0deg, transparent 39%, #9e9fa0 39%, #47ec19 61%, transparent 61%), -moz-linear-gradient(60deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%), -moz-linear-gradient(120deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%);
  background: -o-linear-gradient(0deg, transparent 39%, #9e9fa0 39%, #9e9fa0 61%, transparent 61%), -o-linear-gradient(60deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%), -o-linear-gradient(120deg, transparent 42%, #47ec19 42%, #9e9fa0 58%, transparent 58%);
  background: -ms-linear-gradient(0deg, transparent 39%, #9e9fa0 39%, #9e9fa0 61%, transparent 61%), -ms-linear-gradient(60deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%), -ms-linear-gradient(120deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%);
  background: linear-gradient(0deg, transparent 39%, #9e9fa0 39%, #9e9fa0 61%, transparent 61%), linear-gradient(60deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%), linear-gradient(120deg, transparent 42%, #9e9fa0 42%, #9e9fa0 58%, transparent 58%);
  position: absolute;
  content: "";
  top: -0.4em;
  left: -0.4em;
  border-radius: 1.4em;
}

.gear-rotate::after {
  width: 1em;
  height: 1em;
  background: #fff;
  position: absolute;
  content: "";
  top: 0.5em;
  left: 0.5em;
  border-radius: 0.5em;
}

/*
 * Keyframe Animations 
 */
@-webkit-keyframes gear-rotate {
  0% {
    -webkit-transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(210deg);
  }
}
@-moz-keyframes gear-rotate {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(210deg);
  }
}
@keyframes gear-rotate {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(210deg);
  }
}
.popup {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.031), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.044), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.056), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.069), 14px 14px 45px -2px rgba(0, 0, 0, 0.1);
  color: #000000;
  opacity: 0;
  position: absolute;
  transform: translateY(1rem);
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
  visibility: hidden;
}
.popup--visible {
  opacity: 100%;
  transform: translateY(0rem);
  visibility: visible;
}
.popup--visible * {
  pointer-events: visible;
}

.quickbar {
  background-color: #ffffff !important;
  display: flex;
  flex-direction: column;
  height: 80vh;
  padding: 2.8rem 2.8rem 2.8rem 2.4rem;
  position: absolute;
  right: 1.4rem;
  top: 4.8rem;
}
.quickbar__results-container {
  height: 100%;
  position: relative;
}
.quickbar__results {
  height: 100%;
  left: 0;
  margin-top: 1.8rem;
  opacity: 100%;
  overflow-x: visible;
  overflow-y: scroll;
  padding: 2px;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.quickbar__results--loading::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.quickbar__results--left {
  opacity: 0%;
  transform: translateX(-120%);
}
.quickbar__results--right {
  opacity: 0%;
  transform: translateX(120%);
}

.quickbar-result {
  border-radius: 1rem;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px #ccc;
  cursor: pointer;
  margin-bottom: 1.8rem;
  padding: 1.2rem 3.2rem 1.2rem 1.8rem;
  position: relative;
  transition: box-shadow 0.2s ease-in-out;
}
.quickbar-result:hover {
  background-color: #ffffff !important;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.028), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.04), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.05), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.062), 14px 14px 45px -2px rgba(0, 0, 0, 0.09), 0px 0px 0px 1px hsl(197, 100%, 47%);
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.028), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.04), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.05), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.062), 14px 14px 45px -2px rgba(0, 0, 0, 0.09), 0px 0px 0px 1px var(--colorPrimary, hsl(197, 100%, 47%));
}
.quickbar-result:before {
  background-color: #ccc;
  border-radius: 1000rem;
  content: "";
  margin: 0.8rem 0;
  position: absolute;
  right: 1rem;
  top: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
}
.quickbar-result.connected:before {
  background-color: #59cd89;
}
.quickbar-result.disconnected:before {
  background-color: #f17270;
}
.quickbar-result__name {
  font-size: 1.4rem;
}

.result-tile {
  animation: fadeIn 0.2s ease-in-out;
  display: flex;
  opacity: 100%;
  overflow: hidden;
  position: relative;
  transition: height 0.4s ease-in-out, opacity 0.25s ease-in-out, margin-bottom 0.4s ease-in-out;
}
.result-tile:not(:last-child) {
  margin-bottom: 1.8rem;
}
.result-tile--connected:before, .result-tile--disconnected:before {
  background-color: #ccc;
  border-radius: 1000rem;
  content: "";
  height: 1.6rem;
  margin: 0.8rem 0;
  position: absolute;
  right: 1.5rem;
  top: 0.6rem;
  width: 1.6rem;
}
.result-tile--connected:before {
  background-color: #59cd89;
}
.result-tile--disconnected:before {
  background-color: #f17270;
}
.result-tile--skeleton .result-tile__container {
  height: 7rem;
  background-color: #26414f;
  background: #26414f;
  background-image: linear-gradient(to right, #26414f 0%, #324e5d, #26414f 40%, #26414f 100%);
  background-color: var(--colorNavigationLight, #26414f);
  background: var(--colorNavigationLight, #26414f);
  background-image: linear-gradient(to right, var(--colorNavigationLight, #26414f) 0%, var(--colorNavigationExtraLight, #324e5d), var(--colorNavigationLight, #26414f) 40%, var(--colorNavigationLight, #26414f) 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  pointer-events: none;
  cursor: default;
}
.result-tile--skeleton .result-tile__container:hover {
  border: 1px solid transparent;
}
.result-tile__container {
  background-color: #26414f;
  background-color: var(--colorNavigationLight, #26414f);
  border: 1px solid transparent;
  border-radius: 1rem;
  box-shadow: 0 0 0 2px transparent;
  cursor: pointer;
  display: block;
  flex-grow: 1;
  padding: 1.2rem 3.8rem 1.2rem 1.8rem;
  text-decoration: none;
  transition: border 0.2s ease-in-out;
}
.result-tile__container:hover {
  border: 1px solid hsl(197, 100%, 47%);
  border: 1px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.result-tile__container--icon {
  display: flex;
  align-items: center;
}
.result-tile__name, .result-tile__text {
  text-decoration: none;
  line-break: auto;
}
.result-tile__name:link, .result-tile__name:visited, .result-tile__text:link, .result-tile__text:visited {
  text-decoration: none;
}
.result-tile__name:not(:last-child), .result-tile__text:not(:last-child) {
  margin-bottom: 0.4rem;
}
.result-tile__name {
  color: #ffffff;
  font-size: 1.4rem;
}
.result-tile__bottom-right-icon {
  background-color: transparent;
  bottom: 0;
  cursor: pointer;
  margin: 0.8rem 0;
  opacity: 75%;
  position: absolute;
  right: 1rem;
  transition: opacity 0.2s ease-in-out;
}
.result-tile__bottom-right-icon:hover {
  opacity: 100%;
}
.result-tile__bottom-right-icon svg {
  fill: #ffffff;
  font-size: 2rem;
  height: 2rem;
  width: 2rem;
}
.result-tile__icon {
  fill: #ffffff;
  height: 2.6rem;
  width: 2.6rem;
  font-size: 2.6rem;
  margin-right: 2.2rem;
}

.results-grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(5, 1fr);
  padding: 1.8rem 0;
  margin: 2px;
}
.results-grid__no-results {
  grid-column: 1/-1;
}
.results-grid--input-field {
  padding: 0.2rem 0 1rem 0;
}
.results-grid--wide-tiles {
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 46.85em) {
  .results-grid--wide-tiles.results-grid--modal {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 36.375em) {
  .results-grid--wide-tiles.results-grid--modal {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media only screen and (max-width: 64em) {
  .results-grid--modal :not(.results-grid--wide-tiles) {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media only screen and (max-width: 56.25em) {
  .results-grid--modal :not(.results-grid--wide-tiles) {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 46.85em) {
  .results-grid--modal :not(.results-grid--wide-tiles) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 36.375em) {
  .results-grid--modal :not(.results-grid--wide-tiles) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 30em) {
  .results-grid--modal :not(.results-grid--wide-tiles) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.results-grid-tile {
  align-items: center;
  background-color: transparent;
  border: 1px solid #dadee5;
  border-radius: 1rem;
  box-shadow: 0px 1px 5px 0px #dadee5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 12rem;
  padding: 0.9rem;
  transition: border 0.2s ease-in-out;
}
.results-grid-tile:hover, .results-grid-tile:focus {
  border: 1px solid hsl(197, 100%, 47%);
  border: 1px solid var(--colorPrimary, hsl(197, 100%, 47%));
  outline: none;
}
.results-grid-tile--loading {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  background: #ffffff;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #ffffff 0%, #f7f7f7 20%, #ffffff 40%, #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 1000px 300px;
  border-radius: 1rem;
}
.results-grid-tile--selected {
  border: 1px solid hsl(19, 97%, 64%);
}
.results-grid-tile--disabled {
  background-color: #eff3f5;
  opacity: 60%;
  pointer-events: none;
}
.results-grid-tile--includes-description {
  align-items: flex-start;
  height: unset;
  padding: 1.7rem;
  min-height: 13rem;
}
.results-grid-tile--includes-description h6 {
  text-align: left;
}
.results-grid-tile__text {
  color: #4c5259;
  font-size: 1.3rem;
  font-weight: 500;
}
.results-grid-tile__container {
  height: 5rem;
  margin-bottom: 1.2rem;
  max-width: 8rem;
  width: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.results-grid-tile__image {
  max-height: 4.5rem;
  width: 100%;
}
.results-grid-tile__default-logo {
  color: #ccc;
  font-size: 3.8rem;
  font-weight: 600;
}

.results-grid--compact {
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.results-grid--compact .results-grid-tile {
  height: 10rem;
}
.results-grid--compact .results-grid-tile__container {
  height: 3rem;
}
.results-grid--compact svg.results-grid-tile__image {
  max-height: 3rem;
}

svg.results-grid-tile__image {
  fill: #4c5259;
  max-height: 4rem;
}

/* ----- ROW ----- */
div.row {
  position: relative;
  font-size: 1.2rem;
  padding: 1.3rem 1.5rem 1.4rem 1.4rem;
  border: 0.1rem solid hsl(19, 97%, 64%);
  border: 0.1rem solid var(--colorHighlight, hsl(19, 97%, 64%));
}

div.row span.delete {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 4rem;
  background-image: url("/svg/icon/cross.svg?c=bbbbbb");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.3rem;
  opacity: 0.75;
}

div.row span.delete:hover {
  opacity: 1;
  cursor: pointer;
}

.search-bar {
  width: 100%;
  margin-top: 2px;
  display: flex;
  gap: 1.2rem;
}
.search-bar__inputs {
  flex-grow: 1;
  display: flex;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  border: 2px solid transparent;
  transition: border 0.2s ease-in-out;
}
.search-bar__inputs:focus-within {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.search-bar__inputs .search-input__input {
  box-shadow: none !important;
}
.search-bar__inputs--dark {
  background-color: transparent;
  border: 2px solid #ffffff;
}
.search-bar__inputs--dark .search-input__input {
  background-color: hsl(201, 65%, 8%);
  background-color: var(--colorNavigation, hsl(201, 65%, 8%));
  box-shadow: 0 0 0 2px #dadee5;
  transition: box-shadow 0.2s ease-in-out;
  color: #ffffff;
}
@media only screen and (max-width: 64em) {
  .search-bar__inputs--3 {
    background-color: transparent;
    box-shadow: none;
    border: 0px solid transparent;
    flex-direction: column;
    justify-content: stretch;
  }
  .search-bar__inputs--3:focus-within {
    border: 0px solid transparent !important;
  }
  .search-bar__inputs--3 .search-input__input {
    background-color: #ffffff;
    box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease-in-out;
    border: 2px solid transparent;
  }
  .search-bar__inputs--3 .search-input__input:focus {
    border: 2px solid hsl(197, 100%, 47%);
    border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  }
}
@media only screen and (max-width: 46.85em) {
  .search-bar__inputs--2 {
    background-color: transparent;
    box-shadow: none;
    border: 0px solid transparent;
    flex-direction: column;
    justify-content: stretch;
  }
  .search-bar__inputs--2:focus-within {
    border: 0px solid transparent !important;
  }
  .search-bar__inputs--2 .search-input__input {
    background-color: #ffffff;
    box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease-in-out;
    border: 2px solid transparent;
  }
  .search-bar__inputs--2 .search-input__input:focus {
    border: 2px solid hsl(197, 100%, 47%);
    border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  }
}
@media only screen and (max-width: 36.375em) {
  .search-bar__inputs--1 {
    background-color: transparent;
    box-shadow: none;
    border: 0px solid transparent;
    flex-direction: column;
    justify-content: stretch;
  }
  .search-bar__inputs--1:focus-within {
    border: 0px solid transparent !important;
  }
  .search-bar__inputs--1 .search-input__input {
    background-color: #ffffff;
    box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease-in-out;
    border: 2px solid transparent;
  }
  .search-bar__inputs--1 .search-input__input:focus {
    border: 2px solid hsl(197, 100%, 47%);
    border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  }
}
.search-bar__inputs--permanently-seperated-filters {
  background-color: transparent;
  box-shadow: none;
  border: 0px solid transparent;
  flex-direction: column;
  justify-content: stretch;
}
.search-bar__inputs--permanently-seperated-filters:focus-within {
  border: 0px solid transparent !important;
}
.search-bar__inputs--permanently-seperated-filters .search-input__input {
  background-color: #ffffff;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s ease-in-out;
  border: 2px solid transparent;
}
.search-bar__inputs--permanently-seperated-filters .search-input__input:focus {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.search-bar__filters {
  display: flex;
  gap: 1.2rem;
}
@media only screen and (max-width: 64em) {
  .search-bar__filters--3 {
    margin-top: 1.8rem;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.8rem;
    width: 100%;
    flex-wrap: wrap;
  }
  .grid-stack .search-bar__filters--3 {
    margin-top: 0.9rem;
    gap: 0.9rem;
  }
  .search-bar__filters--3 > *:not(:last-child) {
    margin-right: 0rem;
  }
  .search-bar__filters--3 .datepicker-container {
    left: 0;
    right: inherit;
  }
  .search-bar__filters--3 .select2-selection.select2-selection--single {
    background-color: #ffffff;
    box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
    height: 4.6rem !important;
  }
  .search-bar__filters--3 .select2-selection.select2-selection--single:before {
    background-color: transparent;
  }
}
@media only screen and (max-width: 46.85em) {
  .search-bar__filters--2 {
    margin-top: 1.8rem;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.8rem;
    width: 100%;
    flex-wrap: wrap;
  }
  .grid-stack .search-bar__filters--2 {
    margin-top: 0.9rem;
    gap: 0.9rem;
  }
  .search-bar__filters--2 > *:not(:last-child) {
    margin-right: 0rem;
  }
  .search-bar__filters--2 .datepicker-container {
    left: 0;
    right: inherit;
  }
  .search-bar__filters--2 .select2-selection.select2-selection--single {
    background-color: #ffffff;
    box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
    height: 4.6rem !important;
  }
  .search-bar__filters--2 .select2-selection.select2-selection--single:before {
    background-color: transparent;
  }
}
@media only screen and (max-width: 36.375em) {
  .search-bar__filters--1 {
    margin-top: 1.8rem;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.8rem;
    width: 100%;
    flex-wrap: wrap;
  }
  .grid-stack .search-bar__filters--1 {
    margin-top: 0.9rem;
    gap: 0.9rem;
  }
  .search-bar__filters--1 > *:not(:last-child) {
    margin-right: 0rem;
  }
  .search-bar__filters--1 .datepicker-container {
    left: 0;
    right: inherit;
  }
  .search-bar__filters--1 .select2-selection.select2-selection--single {
    background-color: #ffffff;
    box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
    height: 4.6rem !important;
  }
  .search-bar__filters--1 .select2-selection.select2-selection--single:before {
    background-color: transparent;
  }
}
.search-bar__filters--permanently-seperated-filters {
  margin-top: 1.8rem;
  margin-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.8rem;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 0;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
.grid-stack .search-bar__filters--permanently-seperated-filters {
  margin-top: 0.9rem;
  gap: 0.9rem;
}
.search-bar__filters--permanently-seperated-filters > *:not(:last-child) {
  margin-right: 0rem;
}
.search-bar__filters--permanently-seperated-filters .datepicker-container {
  left: 0;
  right: inherit;
}
.search-bar__filters--permanently-seperated-filters .select2-selection.select2-selection--single {
  background-color: #ffffff;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  height: 4.6rem !important;
}
.search-bar__filters--permanently-seperated-filters .select2-selection.select2-selection--single:before {
  background-color: transparent;
}
@media screen and (min-width: 75em) {
  .search-bar__filters--permanently-seperated-filters {
    grid-template-columns: repeat(5, fit-content(30rem));
  }
}
.search-bar__element {
  border-radius: 1rem;
}
.search-bar__element .input__wrapper {
  height: 100%;
}
.search-bar__element .toggle-text {
  border-radius: 1rem;
  height: 100%;
}
.search-bar .select2__icon {
  font-size: 1.6rem;
  fill: #bbc7d7;
  color: #bbc7d7;
}
.search-bar .select2__icon--datepicker {
  padding: 0 1rem;
}
.search-bar .select2__icon-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  margin-left: 1.6rem;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-bar .select2-selection {
  border-radius: 1rem !important;
  padding-left: 3.2rem;
  height: 100%;
  border: 2px solid #ffffff;
  outline: none;
  min-width: 15rem;
}
.search-bar .select2-selection--no-search-bar {
  height: 4.6rem;
}
.search-bar .select2-selection:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background-color: #dadee5;
  border-radius: 1rem;
}
.search-bar .select2-selection__rendered {
  padding: 0 !important;
  font-size: 0;
  display: flex !important;
  align-items: center;
  margin-left: 1.2rem;
}
.search-bar .select2-selection__rendered--showValue {
  font-size: 1.2rem;
  margin-left: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000 !important;
}
.search-bar .select2-selection__rendered--showValue::before {
  content: attr(data-label);
  font-size: 1.2rem;
  font-weight: 600;
  color: #8d97a5;
  min-width: 5.6rem;
}
@media screen and (min-width: 75em) {
  .search-bar .select2-selection__rendered--showValue::before {
    min-width: 0;
  }
}
.search-bar .select2-selection__rendered:not(.select2-selection__rendered--showValue)::before {
  content: attr(data-label);
  font-size: 1.2rem;
  font-weight: 600;
  color: #8d97a5;
}
.search-bar .select2-selection__placeholder {
  display: none;
}
.search-bar .select2-selection__display-value {
  font-size: 1.2rem;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-bar .select2-container {
  min-width: 14.5rem;
}
@media only screen and (max-width: 75em) {
  .search-bar .select2-container {
    width: 100% !important;
  }
}
.search-bar--modal {
  margin-top: 1.2rem;
}
.search-bar--modal .search-bar__inputs {
  box-shadow: none;
  border: 2px solid #dadee5;
  width: auto;
}
.search-bar--modal .search-bar__inputs:focus-within {
  border: 2px solid hsl(197, 100%, 47%) !important;
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%)) !important;
}
.search-bar--modal .search-bar__inputs--permanently-seperated-filters {
  gap: 1.8rem;
}
.search-bar--modal .search-bar__inputs--permanently-seperated-filters.search-bar__inputs:has(.search-input):has(.search-bar__filters), .search-bar--modal .search-bar__inputs--permanently-seperated-filters.search-bar__inputs:has(.search-input):has(.search-bar__filters):focus-within {
  border-color: transparent !important;
}
.search-bar--modal .search-bar__inputs--permanently-seperated-filters .search-input__input,
.search-bar--modal .search-bar__inputs--permanently-seperated-filters .select2-selection.select2-selection--single {
  border-color: #dadee5;
  box-shadow: none !important;
}
.search-bar--modal .search-bar__inputs--permanently-seperated-filters .search-input__input:focus,
.search-bar--modal .search-bar__inputs--permanently-seperated-filters .select2-selection.select2-selection--single:focus {
  border-color: hsl(197, 100%, 47%);
  border-color: var(--colorPrimary, hsl(197, 100%, 47%));
}

.search-dropdown__container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1051;
}
.search-dropdown__inline-search-results {
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  border-top-width: 0;
  background: #ffffff;
  height: 20rem;
  box-sizing: border-box;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  z-index: 6;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  border-top: 0;
}
.search-dropdown__inline-search-results--overflow {
  overflow-y: auto;
  overflow-x: hidden;
}
.search-dropdown__option p {
  margin-bottom: 0;
}
.search-dropdown__option-text {
  font-size: 1.3rem;
  margin-bottom: 0;
}
.search-dropdown__open-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}

.search-input {
  flex-grow: 1;
  position: relative;
}
.search-input--nav {
  width: 20rem;
  transition: width 0.2s ease-in-out;
}
.search-input--nav:focus-within {
  width: 28rem;
}
.search-input--sidebar {
  height: 4rem;
  margin-bottom: 1.2rem;
}
.search-input--sidebar .search-input__input {
  padding: 1.2rem 1.2rem 1.2rem 4.2rem !important;
}
.search-input__input {
  border-radius: 1rem;
  box-sizing: border-box;
  background-color: #ffffff;
  border: none;
  outline: none;
  padding: 1.5rem 2rem 1.5rem 4.5rem;
  width: 100%;
  font-size: 1.3rem;
}
.search-input__input:focus {
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04), 0 0 0 2px hsl(197, 100%, 47%);
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04), 0 0 0 2px var(--colorPrimary, hsl(197, 100%, 47%));
  outline: none;
}
.search-input__input--sidebar {
  font-size: 1.2rem !important;
  padding: 1rem 0.9rem 1rem 4rem !important;
}
.search-input__input--nav {
  padding: 0.8rem 2rem 0.8rem 4rem;
}
.search-input__input:disabled ~ .search-barV2__icon-container svg {
  fill: #4c5259;
}
.search-input__form-input {
  padding-right: 3rem !important;
}
.search-input__icon-container {
  bottom: 0;
  left: 0;
  padding-left: 1.5rem;
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-input__icon-container--right {
  bottom: 0;
  right: 0;
  padding-right: 1.5rem;
  position: absolute;
  top: 0;
  z-index: 2;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
}
.search-input__icon-container--form {
  height: 100%;
  position: absolute;
  right: 1rem;
  left: inherit;
  z-index: 5;
}
.search-input__icon {
  color: #9e9fa0;
  font-size: 1.7rem;
}
.search-input__icon--form {
  font-size: 1.5rem !important;
}
.search-input__icon--small {
  font-size: 1.4rem !important;
  color: #ccc;
}

.side-bar {
  background-color: hsl(201, 65%, 8%);
  background-color: var(--colorNavigation, hsl(201, 65%, 8%));
  grid-area: sidebar;
  overflow: hidden;
  position: relative;
  transition: width 0.2s ease-in-out, visibility 0.2s ease-in-out;
  visibility: hidden;
  width: 0;
}
.side-bar--open {
  visibility: visible;
  width: 30rem;
}
.side-bar--open .side-bar__container {
  opacity: 100%;
}
.side-bar__container {
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease-in-out;
  transition-delay: 0.1s;
  width: 30rem;
}
.side-bar__loader {
  left: 0;
  opacity: 100%;
  position: absolute;
  right: 0;
  top: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-bar__loader > div {
  background-color: #26414f;
  background-color: var(--colorNavigationLight, #26414f);
  border: 1px solid transparent;
  border-radius: 1rem;
  height: 5rem;
  width: 100%;
}
.side-bar__heading {
  padding: 2.6rem 0rem 2rem 0rem;
}
.side-bar__border-left {
  border-left: 1px solid rgba(218, 222, 229, 0.5);
  bottom: 2rem;
  position: absolute;
  top: 2rem;
}
.side-bar__content {
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  opacity: 100%;
  padding: 0 2rem 2rem 2rem;
  pointer-events: visible;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  visibility: visible;
  z-index: 1;
}
.side-bar__content--hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.side-bar__results {
  flex-grow: 1;
  overflow-y: auto;
  position: relative;
}
.side-bar__no-results {
  color: #dadee5;
  left: 0;
  margin: 0 2rem;
  padding-top: 0.9rem;
  position: absolute;
  right: 0;
  top: 7rem;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-bar__no-results--hidden {
  opacity: 0;
  visibility: 0;
}
.side-bar__search {
  margin-bottom: 11rem;
  margin-top: 1.8rem;
}
.side-bar__close {
  font-size: 1.7rem;
  color: #ccc;
  background-color: transparent;
  border-radius: 1rem;
  cursor: pointer;
  margin: 0.8rem;
  padding: 0.8rem 1rem;
  position: absolute;
  right: 1rem;
  top: 1.4rem;
  transition: background-color 0.2s ease-in-out;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-bar__close:hover {
  background-color: #26414f;
  background-color: var(--colorNavigationLight, #26414f);
}

/* ----- SLOT ----- */
ul.slot {
  width: 100%;
  list-style: none;
  font-size: 0;
  margin-top: 1.7rem;
}

ul.slot > li {
  width: 100%;
  padding: 1rem;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  border: 0.1rem solid #d2d2d4;
  border-radius: 1rem;
  box-sizing: border-box;
  background-color: #dedee0;
  cursor: pointer;
  transition: 0.15s background-color;
}

ul.slot > li > span {
  display: inline-block;
  box-sizing: border-box;
  font-weight: 300;
  vertical-align: middle;
}

ul.slot > li > span.col1 {
  width: 20%;
  font-weight: 400;
}

ul.slot > li > span.col2 {
  width: 28%;
}

ul.slot > li > span.col3 {
  width: 25%;
}

ul.slot > li > span.col4 {
  width: 25%;
}

ul.slot > li.new:hover {
  background-color: #d2d2d4;
}

ul.slot > li.available {
  background: hsl(197, 99%, 33%);
  background: var(--colorSecondary, hsl(197, 99%, 33%));
  color: #ffffff;
}

ul.slot > li.available:hover {
  background-color: #187db0;
}

ul.slot > li.unavailable {
  background-color: #0193d8;
  color: #ffffff;
}

ul.slot > li.unavailable:hover {
  background-color: #18527d;
}

ul.slot > li.available > span:not(.col1) {
  font-style: italic;
}

ul.slot > li:last-child {
  margin-bottom: 0;
}

.status-indicator {
  background: #000000;
  background-color: #e6eaf2;
  border: 0.1rem solid #ccc;
  border-radius: 100%;
  box-sizing: border-box;
  height: 1.7rem;
  left: 1.5rem;
  margin-top: -0.9rem;
  position: absolute;
  top: 50%;
  width: 1.7rem;
}
.status-indicator--no-text {
  left: 50%;
  transform: translateX(-50%);
}
.status-indicator--connected, .status-indicator--ok {
  background-color: #59cd89;
  border: 0.1rem solid #4fb878;
}
.status-indicator--disconnected, .status-indicator--error {
  background-color: #f17270;
  border: 0.1rem solid #d26969;
}
.status-indicator--expired {
  background-color: #e0b558;
  border: 0.1rem solid #dcab42;
}

/* Checkbox */
.styled-checkbox {
  align-items: center;
  border-right: 0.1rem solid #e9edf4;
  display: flex;
  height: 100%;
  justify-content: center;
  min-width: 4rem;
  padding: 0.1rem 0 0.1rem 0.1rem;
  position: relative;
}

.styled-checkbox__label {
  align-items: center;
  cursor: default;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.styled-checkbox__input {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.styled-checkbox__input:checked ~ .styled-checkbox__element {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
}

.styled-checkbox__input:disabled:checked ~ .styled-checkbox__element {
  opacity: 0.65;
}

.styled-checkbox__input:checked ~ .styled-checkbox__element:after {
  display: block;
}

.styled-checkbox__element:after {
  background-image: url("/svg/icon/checkbox.svg?c=ffffff");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  content: "";
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}

.styled-checkbox__element {
  background-color: #dadee5;
  border: 0.1rem solid #4c5259;
  border-radius: 0.4rem;
  box-sizing: border-box;
  height: 1.4rem;
  left: 50%;
  margin-left: -0.6rem;
  margin-top: -0.6rem;
  position: absolute;
  top: 50%;
  transition: 0.15s background-color;
  width: 1.4rem;
}

.styled-checkbox__element:hover {
  background-color: #4c5259;
}

.submenu {
  position: absolute;
  right: 0;
  top: 100%;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  padding-top: 0.9rem;
  z-index: 3;
}
.submenu ul {
  min-width: 19rem;
  border-radius: 1rem;
  box-shadow: 0.2px 0.2px 0.5px rgba(0, 0, 0, 0.037), 0.4px 0.4px 1.3px rgba(0, 0, 0, 0.053), 0.9px 0.9px 2.7px rgba(0, 0, 0, 0.067), 1.8px 1.8px 5.5px rgba(0, 0, 0, 0.083), 5px 5px 15px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  display: flex;
  font-size: 1.4rem;
  justify-content: center;
  background-color: #fff;
}
.submenu__container {
  padding: 1.2rem;
  width: auto;
  display: flex;
  flex-direction: column;
}
.submenu__option {
  align-items: center;
  border-radius: 1rem;
  background-color: transparent;
  display: flex;
  font-size: 1.2rem;
  justify-content: space-between;
  color: #4c5259;
  text-decoration: none;
  padding: 1.2rem 1.6rem;
  text-align: left;
  transition: background-color 0.2s ease-in-out;
  position: relative;
  width: 100%;
  cursor: pointer;
}
.submenu__option:hover {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}
.submenu__option:hover .nav-submenu__icon {
  opacity: 100%;
  transform: translateX(0);
}
.submenu__option button, .submenu__option a {
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 1.2rem 0.8rem 1.2rem 1.6rem;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.submenu__icon {
  font-size: 1rem;
  height: 1rem;
  margin: 0.4rem 0.4rem 0 0.8rem;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  width: 1rem;
}

.switch {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04), 0px 0px 0px 1px #ccc;
  display: flex;
  font-size: 1.2rem;
  justify-content: stretch;
  padding: 0.4rem;
  position: relative;
  width: 25rem;
  z-index: 1;
}
.switch__overlay {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 1rem;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
}
.switch__state {
  border-radius: 1rem;
  color: #9e9fa0;
  cursor: pointer;
  padding: 1.2rem 1.6rem;
  text-align: center;
  transition: color 0.4s ease-in-out;
  width: 12.5rem;
}
.switch__state:hover {
  color: #000000;
}
.switch__state--left:before {
  background-color: hsl(197, 100%, 47%);
  background-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 1rem;
  bottom: 0;
  content: "";
  margin: 0.6rem;
  position: absolute;
  top: 0;
  transition: transform 0.4s ease-in-out;
  width: 12.5rem;
  z-index: -1;
}
.switch__input--left:checked + .switch__state--left {
  color: #ffffff;
}
.switch__input--left:checked + .switch__state--left::before {
  left: 0;
}
.switch__input--left:not(:checked) + .switch__state--left::before {
  transform: translateX(8rem);
}
.switch__input--right:checked + .switch__state--right {
  color: #ffffff;
}

/* ------ SWAL ------ */
.swal2__input {
  margin-top: 1.6rem;
}

.swal2-container {
  z-index: 14 !important;
}

.swal2-title {
  font-size: 2rem !important;
  font-weight: 500 !important;
}

.swal2-content {
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  margin-bottom: 1.6rem !important;
}

.swal2-content span.input-contained-label::after {
  top: -0.7rem !important;
}

.swal2-content textarea {
  width: 94%;
  border: 0.1rem solid #ccc;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 0.8rem;
  font-size: 1.4rem;
  font-weight: 300;
  box-sizing: border-box;
}

button.swal2-confirm:not([disabled]) {
  cursor: pointer !important;
  position: relative !important;
  border: solid 2px #ccc !important;
  border-radius: 0.6666666667rem !important;
  color: #9e9fa0 !important;
  background-color: #ffffff !important;
  padding: 1rem 2.4rem !important;
  font-size: 1.3rem !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease-in-out, padding 0.3s ease-out !important;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(197, 100%, 47%) !important;
  background-color: var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  border: solid 2px transparent !important;
  color: #ffffff !important;
}
button.swal2-confirm:not([disabled]):hover {
  background-color: hsl(197, 99%, 33%) !important;
  background-color: var(--colorSecondary, hsl(197, 99%, 33%)) !important;
}
button.swal2-confirm:not([disabled]):focus, button.swal2-confirm:not([disabled]):focus-visible {
  background-color: hsl(197, 100%, 47%) !important;
  background-color: var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  border: solid 2px hsl(197, 99%, 33%) !important;
  border: solid 2px var(--colorSecondary, hsl(197, 99%, 33%)) !important;
  outline: none !important;
  box-shadow: none !important;
}

button.swal2-confirm[disabled] {
  height: 2.6rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 0.5rem !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 4rem !important;
  background-image: url("/public/images/loader/0171a9/spinner_40.gif") !important;
  background-color: transparent !important;
  color: transparent !important;
  opacity: 1 !important;
}

button.swal2-cancel {
  cursor: pointer !important;
  position: relative !important;
  border: solid 2px #ccc !important;
  border-radius: 0.6666666667rem !important;
  color: #9e9fa0 !important;
  background-color: #ffffff !important;
  padding: 1rem 2.4rem !important;
  font-size: 1.3rem !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease-in-out, padding 0.3s ease-out !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
button.swal2-cancel:hover, button.swal2-cancel:focus {
  background-color: #eff3f5 !important;
}
button.swal2-cancel:focus-visible {
  background-color: #eff3f5 !important;
  outline: none !important;
}
button.swal2-cancel:disabled {
  cursor: default !important;
  opacity: 0.5 !important;
}
button.swal2-cancel:disabled:hover {
  background-color: #ffffff !important;
}

div.swal2-popup {
  width: max-content;
  max-width: 60rem;
  padding: 4rem 8rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 46.85em) {
  div.swal2-popup {
    padding: 4rem;
  }
}

div.swal2-popup div.swal2-icon.swal2-warning {
  border-color: #facea8;
  color: #f8bb86;
  width: 8rem;
  height: 8rem;
}
div.swal2-popup div.swal2-icon.swal2-warning .swal2-icon-text {
  font-size: 6em;
  line-height: 1.28em;
}

div.swal2-popup .swal2-actions {
  margin: 0 auto 0;
}
div.swal2-popup .swal2-actions button:last-child {
  margin-left: 1.4rem !important;
}

.swal2-confirm--custom-disable {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}
.swal2-confirm--custom-disable:hover {
  background-color: #ffffff;
}

.swal2-confirm--custom-enable {
  cursor: pointer;
  pointer-events: all;
  opacity: 1;
}

/* Table */
.table--full-page {
  min-height: 30rem;
}
.table__cell--loading {
  position: relative;
}
.table__cell--loading > div {
  width: 50%;
  min-width: 1.2rem;
  height: 1.5rem;
  border-radius: 1rem;
  background: #dadee5;
  background-image: linear-gradient(to right, #dadee5 0%, #e9ebf0 20%, #dadee5 40%, #dadee5 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  opacity: 80%;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}
.table__cell--no-results {
  white-space: unset !important;
  border: none !important;
}
.table__cell--no-results:not(#no-results):hover::before {
  content: none !important;
}
.table__select-row {
  display: flex;
  justify-content: space-between;
  border: 0.1rem solid hsl(19, 97%, 64%);
  border: 0.1rem solid var(--colorHighlight, hsl(19, 97%, 64%));
}
.table__select-item {
  display: inline-block;
  padding: 1.3rem 1.5rem 1.4rem 1.5rem;
  font-size: 1.2rem;
}
.table__select-item--35 {
  width: 35%;
}
.table__select-item--30 {
  width: 30%;
}
.table__select-item--end {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table__select-item--delete {
  cursor: pointer;
  height: 1.3rem;
  width: 1.3rem;
  background-image: url("/svg/icon/cross.svg?c=bbbbbb");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.3rem;
  opacity: 0.75;
  transition: opacity 0.2s ease-out;
}
.table__select-item--delete:hover {
  opacity: 1;
}
.table__state-icon {
  font-size: 1.8rem;
  margin-right: 0.8rem;
}
.table__state-icon--alert {
  fill: #d26969;
}
.table__state-icon--ok {
  background-color: #59cd89;
  border: 1px solid #4fb878;
  width: 17px;
  height: 17px;
  border-radius: 100%;
  box-sizing: border-box;
}
.table__security-icon {
  width: 2rem;
  font-size: 1.2rem;
  margin-left: 0.6rem;
}
.table__expand-icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 100%;
  min-width: 4rem;
  padding: 0.1rem 0 0.1rem 0.1rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4.3rem;
}
.table__expand-icon-container--modal {
  margin-left: 0;
}
.table__expand-icon {
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  margin-bottom: 1px;
  font-size: 0.9rem;
  pointer-events: none;
  transition: transform 0.2s ease-in-out;
}
.table__expand-icon--open {
  transform: rotate(90deg);
}
.table__row-controls {
  white-space: normal !important;
  padding: 0 0.9rem 0 0 !important;
  border-right: 1px solid transparent;
}
.table__row-control-button {
  height: min-content;
  background-color: transparent;
  padding: 1.8rem;
  cursor: pointer;
}
.table__row-control-button:hover .table__row-control-icon, .table__row-control-button:focus .table__row-control-icon {
  color: #9e9fa0;
}
.table__row-control-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #bbc7d7;
  transition: color 0.2s ease-in-out;
}
.table__buttons {
  display: grid;
  gap: 1.2rem;
}
.table__buttons button {
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-wrapper {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.table-wrapper--full-page {
  min-height: 30rem !important;
}
.table-wrapper--internal-scroll {
  overflow-y: auto;
}

ul.tile li h2[data-tableattr=page-count] {
  text-transform: none;
}
ul.tile li a[data-tableattr=prev].disabled, ul.tile li a[data-tableattr=next].disabled {
  opacity: 0.25;
  cursor: default;
}

ul.tile li[data-tile=table] table tr td span.selectable {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 3.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.tile li[data-tile=table] table tr td span.selectable label {
  cursor: pointer;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.tile li[data-tile=table] table tr td span.selectable label > input[type=checkbox] {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

ul.tile li[data-tile=table] table tr td span.selectable label > span {
  display: inline-block;
  background-color: #e6eaf2;
  border: 0.1rem solid #dadee5;
  border-radius: 0.4rem;
  box-sizing: border-box;
  cursor: pointer;
  width: 1.4rem;
  height: 1.4rem;
  transition: 0.15s background-color;
}

ul.tile li[data-tile=table] table tr td span.selectable label:hover > span {
  background-color: #d5dce9;
}

ul.tile li[data-tile=table] table tr td span.selectable label input:checked ~ span {
  background-color: hsl(197, 99%, 33%);
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
}

ul.tile li[data-tile=table] table tr td span.selectable label > span:after {
  content: "";
  display: none;
  position: absolute;
}

ul.tile li[data-tile=table] table tr td span.selectable label > input:checked ~ span:after {
  display: block;
}

ul.tile li[data-tile=table] table tr td span.selectable label > span:after {
  background-image: url("/svg/icon/checkbox.svg?c=ffffff");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

ul.tile li[data-tile=table] table.empty thead,
ul.tile li[data-tile=table] table.init tbody.main,
ul.tile li[data-tile=table] table:not(.init) tbody tr.init,
ul.tile li[data-tile=table].init-loader table tbody tr.init,
ul.tile li[data-tile=table] table:not(.empty) tbody tr.empty {
  display: none;
}

ul.tile li[data-tile=table] table thead.hidden {
  display: none;
}

ul.tile li[data-tile=table] table tbody tr.init td,
ul.tile li[data-tile=table] table tbody tr.empty td {
  border-bottom: 0;
  padding: 2.5rem 0;
  text-align: center;
  width: 100%;
  background-color: transparent;
}

ul.tile li[data-tile=table] table.loading tbody tr.init td,
ul.tile li[data-tile=table] table.loading tbody tr.empty td {
  display: none;
}

ul.tile li[data-tile=table] table th,
ul.tile li[data-tile=table] table td {
  border-bottom: 0.1rem solid #e6eaf2;
  font-size: 1.2rem;
  position: relative;
  padding: 1.3rem 1.5rem 1.4rem 1.5rem;
}

ul.tile li[data-tile=table] table tr:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

ul.tile li[data-tile=table] table td {
  border-top: 0.1rem solid #ffffff;
  white-space: pre-wrap;
}

ul.tile li[data-tile=table] table tr:nth-child(even) td {
  background: #f0f7fa;
  background: var(--colorTertiary, #f0f7fa);
  border-top-color: #f0f7fa;
  border-top-color: var(--colorTertiary, #f0f7fa);
}

ul.tile li[data-tile=table] table col[data-visible=false],
ul.tile li[data-tile=table] table th[data-visible=false],
ul.tile li[data-tile=table] table td[data-visible=false] {
  display: none;
}

ul.tile li[data-tile=table] table th {
  background-color: #f0f7fa;
  background-color: var(--colorTertiary, #f0f7fa);
  border-bottom: 0.1rem solid #e6eaf2;
  color: #9e9fa0;
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  text-transform: uppercase;
  white-space: pre-wrap;
}

ul.tile li[data-tile=table] table th.sortable {
  cursor: pointer;
}

ul.tile li[data-tile=table] table th.sort span {
  position: relative;
}

ul.tile li[data-tile=table] table th.sort span::before {
  border-color: transparent transparent #ccc transparent;
  border-style: solid;
  border-width: 0 0.3rem 0.4rem 0.3rem;
  content: "";
  height: 0;
  left: 0.5rem;
  position: absolute;
  top: calc(50% - 0.2rem);
  width: 0;
}

ul.tile li[data-tile=table] table th.sort[data-sort=desc] span::before {
  border-color: #9e9fa0 transparent transparent transparent;
  border-width: 0.4rem 0.3rem 0 0.3rem;
}

ul.tile li[data-tile=table] table tr td.clickable {
  cursor: pointer;
}

ul.tile li[data-tile=table] table tr td.highlight {
  color: hsl(197, 99%, 33%);
  color: var(--colorTextHighlight, hsl(197, 99%, 33%));
  font-weight: 600;
}

ul.tile li[data-tile=table] table tr td.align-center,
ul.tile li[data-tile=table] table tr th.align-center {
  text-align: center;
}

ul.tile li[data-tile=table] table tr td.align-left,
ul.tile li[data-tile=table] table tr th.align-left {
  text-align: left;
}

ul.tile li[data-tile=table] table tr.inactive td {
  color: #ccc;
}

ul.tile li[data-tile=table] table tr td.expandable {
  padding-left: 4rem;
}

ul.tile li[data-tile=table] table tr[data-depth="1"] td.expandable {
  padding-left: 6.2rem;
}

ul.tile li[data-tile=table] table tr[data-depth="2"] td.expandable {
  padding-left: 8.4rem;
}

ul.tile li[data-tile=table] table tr[data-depth="3"] td.expandable {
  padding-left: 10.6rem;
}

ul.tile li[data-tile=table] table tr[data-depth="4"] td.expandable {
  padding-left: 12.8rem;
}

ul.tile li[data-tile=table] table tr[data-depth="5"] td.expandable {
  padding-left: 15rem;
}

ul.tile li[data-tile=table] table tr[data-depth="6"] td.expandable {
  padding-left: 17.2rem;
}

ul.tile li[data-tile=table] table tr[data-depth="7"] td.expandable {
  padding-left: 19.4rem;
}

ul.tile li[data-tile=table] table tr td.selectable {
  padding-left: 5.4rem;
}

ul.tile li[data-tile=table] table tr td.expandable.selectable {
  padding-left: 7.8rem;
}

ul.tile li[data-tile=table] table tr[data-depth="1"] td.selectable {
  padding-left: 10rem;
}

ul.tile li[data-tile=table] table tr[data-depth="2"] td.selectable {
  padding-left: 12.2rem;
}

ul.tile li[data-tile=table] table tr[data-depth="3"] td.selectable {
  padding-left: 14.4rem;
}

ul.tile li[data-tile=table] table tr[data-depth="4"] td.selectable {
  padding-left: 16.6rem;
}

ul.tile li[data-tile=table] table tr[data-depth="5"] td.selectable {
  padding-left: 18.8rem;
}

ul.tile li[data-tile=table] table tr[data-depth="6"] td.selectable {
  padding-left: 21rem;
}

ul.tile li[data-tile=table] table tr[data-depth="7"] td.selectable {
  padding-left: 23.2rem;
}

ul.tile li[data-tile=table] table tr td span.expand {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  left: 0;
  min-width: 4rem;
  padding: 0.1rem 0 0.1rem 0.1rem;
  position: absolute;
  text-align: center;
  top: 0;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.tile li[data-tile=table] table tr td.selectable span.expand {
  left: 3.4rem;
}

ul.tile li[data-tile=table] table tr td span.expand[data-children="0"]::before {
  border-left: 0.1rem solid hsl(197, 99%, 33%);
  border-left: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  content: "-";
  font-size: 1.1rem;
  height: 1.1rem;
  left: 2.3rem;
  line-height: 1rem;
  margin-top: -0.6rem;
  position: absolute;
  text-align: left;
  top: 50%;
  width: 1rem;
}

ul.tile li[data-tile=table] table tr[data-depth="1"] td span.expand {
  margin-left: 2rem;
}

ul.tile li[data-tile=table] table tr[data-depth="2"] td span.expand {
  margin-left: 4rem;
}

ul.tile li[data-tile=table] table tr[data-depth="3"] td span.expand {
  margin-left: 6rem;
}

ul.tile li[data-tile=table] table tr[data-depth="4"] td span.expand {
  margin-left: 8rem;
}

ul.tile li[data-tile=table] table tr[data-depth="5"] td span.expand {
  margin-left: 10rem;
}

ul.tile li[data-tile=table] table tr[data-depth="6"] td span.expand {
  margin-left: 12rem;
}

ul.tile li[data-tile=table] table tr[data-depth="7"] td span.expand {
  margin-left: 14rem;
}

ul.tile li[data-tile=table] table tr[data-depth="8"] td span.expand {
  margin-left: 16rem;
}

ul.tile li[data-tile=table] table tr.selected td span.expand:not([data-children="0"])::after {
  background-image: url("/public/images/icons/ffffff/expand.svg");
}

ul.tile li[data-tile=table] table tr.open td span.expand:not([data-children="0"])::after {
  background-image: url("/public/images/icons/0171a9/collapse.svg");
}

ul.tile li[data-tile=table] table tr.open.selected td span.expand:not([data-children="0"])::after {
  background-image: url("/public/images/icons/ffffff/collapse.svg");
}

ul.tile li[data-tile=table] table tbody.main tr:not(#no-results):hover td {
  border-bottom-color: hsl(197, 100%, 47%);
  border-bottom-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-top-color: hsl(197, 100%, 47%);
  border-top-color: var(--colorPrimary, hsl(197, 100%, 47%));
}

ul.tile li[data-tile=table] table tr th.firestarter,
ul.tile li[data-tile=table] table tr td.firestarter {
  padding: 0 !important;
  position: relative;
  width: 0 !important;
}

ul.tile li[data-tile=table] table tbody.main tr:not(#no-results):hover td:first-child::before {
  border-left: 0.1rem solid hsl(197, 100%, 47%) !important;
  border-left: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;
}

ul.tile li[data-tile=table] table tbody.main tr.tablev2__row--selected:hover td:first-child::before {
  border-left: 0rem solid hsl(19, 97%, 64%) !important;
  border-left: 0rem solid var(--colorHighlight, hsl(19, 97%, 64%)) !important;
}

ul.tile li[data-tile=table] table tbody.main tr td:last-child {
  border-right: 0.1rem solid transparent;
}

ul.tile li[data-tile=table] table tbody.main tr:not(#no-results):hover td:last-child {
  border-right: 0.1rem solid hsl(197, 100%, 47%);
  border-right: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%));
}

ul.tile li[data-tile=table] table tbody.main tr.selected:hover td:first-child::before {
  border-left-color: transparent !important;
}

ul.tile li[data-tile=table] div.body div.table-search {
  box-sizing: border-box;
  display: none;
  height: auto;
  padding: 0.3rem 1.2rem 1.2rem 1.2rem;
  width: 100%;
  z-index: 1;
}

ul.tile li[data-tile=table] div.body div.table-search > input {
  border: 0.1rem solid #bbc7d7;
  border-radius: 1rem;
  box-sizing: border-box;
  font-size: 1.3rem;
  padding: 0.8rem 0.9rem;
  width: 100%;
}

ul.tile li[data-tile=table] div.body div.table-search > input::placeholder {
  color: #bbc7d7;
}

ul.tile li[data-tile=table] td.status {
  padding-left: 4rem;
}
ul.tile li[data-tile=table] td.status--alert {
  padding-left: 1.5rem;
}

ul.tile li[data-tile=table] td.status > span {
  background: #000000;
  background-color: #e6eaf2;
  border: 0.1rem solid #ccc;
  border-radius: 100%;
  box-sizing: border-box;
  height: 1.7rem;
  left: 1.5rem;
  margin-top: -0.9rem;
  position: absolute;
  top: 50%;
  width: 1.7rem;
}

ul.tile li[data-tile=table] td.status > span.open,
ul.tile li[data-tile=table] td.status > span.ok,
ul.tile li[data-tile=table] td.status > span.connected {
  background-color: #59cd89;
  border: 0.1rem solid #4fb878;
}

ul.tile li[data-tile=table] td.status > span.closed,
ul.tile li[data-tile=table] td.status > span.fault,
ul.tile li[data-tile=table] td.status > span.disconnected,
ul.tile li[data-tile=table] td.status > span.error {
  background-color: #f17270;
  border: 0.1rem solid #d26969;
}

ul.tile li[data-tile=table] td.status > span.expired,
ul.tile li[data-tile=table] td.status > span.partial {
  background-color: #e0b558;
  border: 0.1rem solid #dcab42;
}

ul.tile li[data-tile=table] td.status > span.in_alert {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 0;
  height: 1.8rem;
  left: 1.5rem;
  margin-top: -0.9rem;
  width: 1.8rem;
}

ul.tile li[data-tile=table] td.status > span.standby {
  background-color: transparent;
  background-image: url("/svg/icon/standby.svg?c=D26969");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 0;
  height: 1.8rem;
  left: 1.5rem;
  margin-top: -0.9rem;
  width: 1.8rem;
}

ul.tile li[data-tile=table] td > span.private,
ul.tile li[data-tile=table] td > span.organisation,
ul.tile li[data-tile=table] td > span.public {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.2rem 1.2rem;
  display: inline-block;
  height: 1.2rem;
  padding-left: 1.2rem;
  vertical-align: baseline;
  vertical-align: top;
  width: 1.2rem;
}

ul.tile li[data-tile=table] td > span.private {
  background-image: url("/svg/icon/security.svg?c=0171a9");
}

ul.tile li[data-tile=table] td > span.organisation {
  background-image: url("/svg/icon/organisation.svg?c=0171a9");
  background-size: 1.4rem 1.4rem;
  height: 1.4rem;
  width: 1.4rem;
}

ul.tile li[data-tile=table] td > span.public {
  background-image: url("/svg/icon/globe.svg?c=0171a9");
  background-size: 1.3rem 1.3rem;
  height: 1.3rem;
  width: 1.3rem;
}

ul.tile li[data-tile=table] td > span.link {
  background-color: transparent;
  background-image: url("/svg/icon/link.svg?c=0171a9");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.2rem;
  padding-left: 0.8rem;
  vertical-align: baseline;
  width: 1.2rem;
}

/* Table v2 */
.tablev2 {
  position: relative;
}
.tablev2--tile {
  border-spacing: 0;
  border-top: 0.1rem solid #e6eaf2;
  min-width: 100%;
}
.tablev2--full-height {
  display: inline-table;
  height: 100%;
}
.tablev2--full-page {
  min-height: 30rem;
}
.tablev2__body {
  position: relative;
}
.tablev2__body tr:not(#no-results):not(.tablev2__row--selected):hover td {
  border-bottom-color: hsl(197, 100%, 47%);
  border-bottom-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-top-color: hsl(197, 100%, 47%) !important;
  border-top-color: var(--colorPrimary, hsl(197, 100%, 47%)) !important;
}
.tablev2__body tr:not(#no-results):hover td:first-child::before {
  border-left: 0.1rem solid hsl(197, 100%, 47%);
  border-left: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%));
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;
}
.tablev2__body tr:not(#no-results):hover td:last-child,
.tablev2__body tr:not(#no-results):hover .tablev2__cell--end {
  border-right: 0.1rem solid hsl(197, 100%, 47%);
  border-right: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.tablev2__heading {
  height: auto;
}
.tablev2__cell {
  padding: 0 !important;
}
.tablev2__cell:last-child {
  border-right: 1px solid transparent;
}
.tablev2__cell--status .tablev2__cell-text {
  padding-left: 2.5rem;
}
.tablev2__cell--loading {
  position: relative;
  padding: 1.3rem 1.5rem 1.4rem 1.5rem !important;
}
.tablev2__cell--loading > div {
  width: 50%;
  min-width: 1.2rem;
  height: 1.5rem;
  border-radius: 1rem;
  background: #dadee5;
  background-image: linear-gradient(to right, #dadee5 0%, #e9ebf0 20%, #dadee5 40%, #dadee5 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  opacity: 80%;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}
.tablev2__cell--no-results {
  white-space: unset !important;
  border: none !important;
}
.tablev2__cell--no-results:hover {
  padding-right: 1.5rem !important;
}
.tablev2__cell--no-results:hover::before {
  content: none !important;
}
.tablev2__cell--no-results--hidden {
  visibility: hidden;
}
.tablev2__cell--clickable {
  cursor: pointer;
}
.tablev2__cell--highlight {
  color: hsl(197, 99%, 33%);
  color: var(--colorTextHighlight, hsl(197, 99%, 33%));
  font-weight: 600;
}
.tablev2__cell--highlight .tablev2__copy-icon {
  fill: hsl(197, 99%, 33%);
  fill: var(--colorTextHighlight, hsl(197, 99%, 33%));
}
.tablev2__cell--word-break {
  word-break: break-word;
}
.tablev2__cell--no-wrap {
  white-space: nowrap !important;
}
.tablev2__cell--no-wrap .tablev2__cell-container {
  width: auto;
}
.tablev2__cell--no-wrap .tablev2__cell-text {
  flex: 0 0 auto;
}
.tablev2__cell--buttons > div {
  padding-left: 0.5rem;
}
.tablev2__cell.align-center > .tablev2__cell-container {
  justify-content: center;
}
.tablev2__cell-text--italicize {
  color: #9e9fa0;
  font-style: italic;
}
.tablev2__select-item {
  display: inline-block;
  padding: 1.3rem 1.5rem 1.4rem 1.5rem;
  font-size: 1.2rem;
}
.tablev2__select-item--35 {
  width: 35%;
}
.tablev2__select-item--30 {
  width: 30%;
}
.tablev2__select-item--end {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tablev2__select-item--delete {
  cursor: pointer;
  height: 1.3rem;
  width: 1.3rem;
  background-image: url("/svg/icon/cross.svg?c=bbbbbb");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.3rem;
  opacity: 0.75;
  transition: opacity 0.2s ease-out;
}
.tablev2__select-item--delete:hover {
  opacity: 1;
}
.tablev2__state-icon {
  font-size: 1.8rem;
  margin-right: 0.8rem;
}
.tablev2__state-icon--alert {
  fill: #d26969;
}
.tablev2__state-icon--ok {
  background-color: #59cd89;
  border: 1px solid #4fb878;
  width: 17px;
  height: 17px;
  border-radius: 100%;
  box-sizing: border-box;
}
.tablev2__security-icon {
  width: 2rem;
  font-size: 1.2rem;
  margin-left: 0.6rem;
}
.tablev2__expand-icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 100%;
  min-width: 4rem;
  padding: 0.1rem 0 0.1rem 0.1rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4.3rem;
}
.tablev2__expand-icon-container--modal {
  margin-left: 0;
}
.tablev2__expand-icon {
  fill: hsl(197, 99%, 33%);
  fill: var(--colorSecondary, hsl(197, 99%, 33%));
  margin-bottom: 1px;
  font-size: 0.9rem;
  pointer-events: none;
  transition: transform 0.2s ease-in-out;
}
.tablev2__expand-icon--open {
  transform: rotate(90deg);
}
.tablev2__row:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.tablev2__row--selected {
  position: relative;
}
.tablev2__row--selected td {
  border-top: 1px solid hsl(19, 97%, 64%) !important;
  border-top: 1px solid var(--colorHighlight, hsl(19, 97%, 64%)) !important;
  border-bottom: 1px solid hsl(19, 97%, 64%) !important;
  border-bottom: 1px solid var(--colorHighlight, hsl(19, 97%, 64%)) !important;
}
.tablev2__row--selected td:last-of-type {
  border-right: 1px solid hsl(19, 97%, 64%) !important;
  border-right: 1px solid var(--colorHighlight, hsl(19, 97%, 64%)) !important;
  padding-right: 1.7rem !important;
}
.tablev2__row--selected td:first-of-type {
  border-left: 1px solid hsl(19, 97%, 64%) !important;
  border-left: 1px solid var(--colorHighlight, hsl(19, 97%, 64%)) !important;
}
.tablev2__row--selected td:first-of-type:hover {
  border-left: 1px solid hsl(19, 97%, 64%) !important;
  border-left: 1px solid var(--colorHighlight, hsl(19, 97%, 64%)) !important;
  outline: none !important;
}
.tablev2__expanded-cell {
  display: table-cell;
  white-space: nowrap !important;
  border-top: none !important;
  padding: 0 !important;
  background-color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
.tablev2__expanded-cell__container {
  display: none;
}
.tablev2__expanded-cell--open {
  border-left: 0.3rem solid hsl(197, 100%, 47%);
  border-left: 0.3rem solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.tablev2__expanded-cell:not(.tablev2__expanded-cell--open) {
  border-bottom: none;
}
.tablev2 tr.tablev2__expanded-row td {
  background-color: #ffffff !important;
  transition: background-color 0.2s ease-in-out;
}
.tablev2 tr.tablev2__expanded-row td:first-child::before {
  border-left: 0.3rem solid hsl(197, 100%, 47%) !important;
  border-left: 0.3rem solid var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;
}
.tablev2__row-close {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 1.2rem;
  font-size: 1.2rem;
}
.tablev2__row-controls {
  white-space: normal !important;
  padding: 0 0.9rem 0 0 !important;
  border-right: 1px solid transparent;
}
.tablev2__row-control-button {
  height: min-content;
  background-color: transparent;
  padding: 1.8rem;
  cursor: pointer;
}
.tablev2__row-control-button:hover .tablev2__row-control-icon, .tablev2__row-control-button:focus .tablev2__row-control-icon {
  color: #9e9fa0;
}
.tablev2__row-control-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #bbc7d7;
  transition: color 0.2s ease-in-out;
}
.tablev2__buttons {
  display: grid;
  gap: 1.2rem;
}
.tablev2__buttons button {
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tablev2__cell-container {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 1.5rem 1.4rem 1.5rem;
  text-decoration: none;
  color: inherit;
}
.tablev2__cell-container > * {
  grid-row: 1;
}
.tablev2__cell-container--selectable {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.tablev2__cell-container--selectable .tablev2__cell-text {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
@media (hover: hover) and (pointer: fine) {
  .tablev2__cell-container:hover .tablev2__copy-button {
    opacity: 100%;
  }
}
.tablev2__cell-container select ~ .select2 {
  min-width: 10rem;
  max-width: 13rem;
  text-align: left;
}
.tablev2__cell-container select ~ .select2 .select2-selection__rendered {
  padding-right: 0;
}
.tablev2__cell-container select.select2--compact ~ .select2 {
  min-width: 8rem;
}
.tablev2__cell-container .estimate {
  background-image: url("/svg/icon/estimate.svg?c=9e9fa0");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.4rem;
  fill: #9e9fa0;
  display: inline-block;
  height: 1.4rem;
  margin-left: 0.6rem;
  margin-top: 0;
  vertical-align: top;
  width: 1.4rem;
}
.tablev2__cell-container .tablev2__picker {
  min-width: max-content;
}
.tablev2__cell-container .tablev2__picker .input__input--picker {
  width: 8rem;
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0;
}
.tablev2__cell-container .tablev2__picker .input__input--compact {
  font-size: 1.3rem;
  padding: 0.6rem 1.2rem;
}
@media only screen and (max-width: 64em) {
  .tablev2__cell-container .tablev2__picker .input__input--compact {
    display: none;
  }
}
.tablev2__cell-container .tablev2__picker div.pickr {
  box-sizing: border-box;
  display: inline-block;
  height: 3.2rem;
  overflow: hidden;
  vertical-align: top;
  width: 3.2rem;
}
@media only screen and (max-width: 64em) {
  .tablev2__cell-container .tablev2__picker div.pickr {
    border-radius: 0.6666666667rem;
  }
}
.tablev2__cell-container .tablev2__picker div.pickr > button, .tablev2__cell-container .tablev2__picker div.pickr > button::after, .tablev2__cell-container .tablev2__picker div.pickr > button::before {
  border-radius: 0;
  border-bottom-right-radius: 0.6666666667rem;
  border-top-right-radius: 0.6666666667rem;
  height: 100%;
  width: 100%;
  position: fixed;
}
.tablev2__cell-container .selectv2 + .select2.select2-container.select2-container--default .select2-selection {
  height: 3.5rem;
  padding-right: 0;
}
.tablev2__cell-container .selectv2 + .select2.select2-container.select2-container--default .select2-selection--single:focus {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  outline: none;
}
.tablev2__cell-container--buttons {
  padding: 1rem 1.5rem 1.1rem 1.5rem;
}
.tablev2__cell-container--tags {
  flex-flow: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 1rem;
  font-size: 1.1rem;
}
.tablev2__cell-container--tags__tag {
  border-radius: 3rem;
  line-height: 1;
  min-width: max-content;
  padding: 0.5rem 0.7rem 0.5rem 0.7rem;
  background-color: rgba(0, 172, 240, 0.15);
  filter: brightness(90%);
  border: 1px solid #dadee5;
}
.tablev2__copy-button {
  cursor: pointer;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.tablev2__copy-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #4c5259;
}
.tablev2__display-order {
  width: 2.7rem;
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.tablev2__display-order ~ span {
  margin-top: -0.3rem;
  display: none;
}
.tablev2__button--deselected button {
  cursor: pointer;
  color: #bbc7d7;
  opacity: 0.7;
}
.tablev2__button--selected button {
  cursor: default;
  color: #59cd89;
}
.tablev2__button i {
  color: inherit;
}
.tablev2__selectable {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.4rem;
}
.tablev2__selectable label {
  cursor: default;
}
.tablev2__selectable label > input[type=checkbox] {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.tablev2__selectable label input:checked ~ span {
  background-color: hsl(197, 99%, 33%);
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
}
.tablev2__selectable label input:checked ~ span:after {
  display: block;
}
.tablev2__selectable label > span {
  background-color: #e6eaf2;
  border: 0.1rem solid #dadee5;
  border-radius: 0.4rem;
  box-sizing: border-box;
  cursor: pointer;
  height: 1.4rem;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transition: 0.15s background-color;
  width: 1.4rem;
}
.tablev2__selectable label > span:after {
  content: "";
  display: none;
  position: absolute;
  background-image: url("/svg/icon/checkbox.svg?c=ffffff");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tablev2__selectable label:hover > span {
  background-color: #d5dce9;
}
.tablev2 .tablev2__body tr:not(#no-results):hover td .tablev2__cell-container--show-on-hover {
  opacity: 1 !important;
}
.tablev2--no-hover-style .tablev2__body tr:not(#no-results):hover td {
  border-bottom-color: #e6eaf2;
  border-top-color: transparent !important;
}
.tablev2--no-hover-style .tablev2__body tr:not(#no-results):hover td:first-child::before {
  border-left: none;
}
.tablev2--no-hover-style .tablev2__body tr:not(#no-results):hover td:last-child,
.tablev2--no-hover-style .tablev2__body tr:not(#no-results):hover .tablev2__cell--end {
  border-right: 1px solid transparent !important;
}
.tablev2__col-group[data-visible=false] {
  display: none;
}
.tablev2 tr td.expandable > .tablev2__cell-container {
  padding-left: 4rem;
}
.tablev2 tr[data-depth="1"] td.expandable > .tablev2__cell-container {
  padding-left: 6.2rem;
}
.tablev2 tr[data-depth="2"] td.expandable > .tablev2__cell-container {
  padding-left: 7.8rem;
}
.tablev2 tr[data-depth="3"] td.expandable > .tablev2__cell-container {
  padding-left: 10.6rem;
}
.tablev2 tr[data-depth="4"] td.expandable > .tablev2__cell-container {
  padding-left: 12.8rem;
}
.tablev2 tr[data-depth="5"] td.expandable > .tablev2__cell-container {
  padding-left: 15rem;
}
.tablev2 tr[data-depth="6"] td.expandable > .tablev2__cell-container {
  padding-left: 17.2rem;
}
.tablev2 tr[data-depth="7"] td.expandable > .tablev2__cell-container {
  padding-left: 19.4rem;
}

ul.tags,
.tags {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 0;
  text-align: left !important;
  overflow: hidden;
}
ul.tags__icon,
.tags__icon {
  cursor: pointer;
  pointer-events: visible;
  font-size: 0.9rem;
  margin-left: 0.6rem;
}

ul.tags > li {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border-radius: 1rem;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  color: #ffffff;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0.2rem 0.6rem 0.2rem 0;
  padding: 0.7rem 1.1rem 0.7rem 1.1rem;
  transition: 0.15s color;
  width: auto;
}
ul.tags > li:hover {
  border-color: #019dda;
  border-color: var(--colorSecondaryLight, #019dda);
}
ul.tags > li > span {
  background-image: url("/svg/icon/remove.svg?c=ffffff");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  display: inline-block;
  height: 0.8rem;
  margin-left: 0.7rem;
  vertical-align: baseline;
  width: 0.8rem;
}
ul.tags > li.clear {
  background: none;
  box-shadow: none;
  color: #9e9fa0;
  cursor: pointer;
}
ul.tags > li.clear > span {
  background-image: url("/svg/icon/remove.svg?c=888888");
}

.text-box {
  height: 3.6rem;
  border: 2px solid #ccc;
  border-radius: 0.6666666667rem;
  background-color: #eff3f5;
  font-size: 1.25rem;
  padding: 0 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border 0.2s ease-in-out, backgound-color 0.2s ease-in-out;
}
.text-box__number {
  margin-right: 0.5rem;
}
.text-box--compact {
  padding: 0 1rem;
}
.text-box--success {
  border: 2px solid #59cd89;
  color: #59cd89;
  background-color: #f2fbf6;
}
.text-box--error {
  background-color: #fce5e4;
  border: 2px solid #f17270;
  color: #f17270;
}
.text-box--warning {
  background-color: #dbf5ff;
  border: 2px solid #019dda;
  color: #019dda;
}
.text-box--loading {
  opacity: 0.4;
}
.text-box__icon {
  fill: #9e9fa0;
  font-size: 1.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.7rem;
}

/* ----- TILE LIST ----- */
ul.tile-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  font-size: 0;
  padding: 0;
  margin: 1.5rem 0;
  text-align: center;
}

ul.tile-list--single {
  display: block;
  width: 13rem;
}

ul.tile-list--single > li {
  margin: 0;
}

ul.tile-list > li:not(.selected):hover {
  box-shadow: 0 0 0.2rem 0.1rem #e6eaf2;
  opacity: 100%;
  /* color: $color-grey-darkest; */
  /* background-image: url("/svg/icon/attribute.svg?c=4c5259"); */
}

ul.tile-list > li.selected {
  border-color: hsl(19, 97%, 64%);
  border-color: var(--colorHighlight, hsl(19, 97%, 64%));
  background-color: #ffffff;
  color: #4c5259;
  box-shadow: 0 0 0.1rem 0.1rem #e6eaf2;
}

ul.tile-list > li .tile-list__edit {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f9fa;
  transition: opacity 0.2s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

ul.tile-list > li .tile-list__edit:hover {
  opacity: 1;
  /* backdrop-filter: blur(.3rem); */
}

/* ------ TILE ------ */
.tile {
  transition: opacity 0.3s ease-in-out;
  opacity: 100%;
}
.tile--w100 {
  width: 100%;
}
.tile__header-buttons {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  white-space: nowrap;
  text-align: right;
  height: 100%;
}
.tile__header-buttons--disabled {
  pointer-events: none;
  cursor: default;
}
.tile__footer-buttons {
  margin-left: auto;
}
.tile__header-btn,
.tile ul.tile li > div.wrapper > div.header a.tile__header-btn {
  align-items: center;
  display: flex !important;
  justify-content: center;
  position: relative;
  z-index: 5;
}
.tile__icon {
  fill: #bbc7d7;
  color: #bbc7d7;
  font-size: 1.6rem;
  height: 1em;
  width: 1.9em;
}
.tile__icon--small {
  font-size: 1.4rem;
}
.tile__add-icon {
  width: 2rem !important;
}
.tile__add-icon svg {
  color: #bbc7d7;
}
.tile__large-icon {
  animation: fadeInScale 0.2s ease-in-out;
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  font-size: 5rem;
}
.tile__large-icon--larger {
  font-size: 6.5rem;
}
.tile--with-height .wrapper {
  height: 100%;
}
.tile--with-height .wrapper .body {
  height: 100%;
}
.tile--with-height .wrapper .body .wrapper {
  height: 100%;
}
.tile--unloaded {
  opacity: 0;
}
.tile--search-page {
  min-height: 20rem !important;
}
.tile--clickable {
  cursor: pointer;
}

.tile-header-btn__text {
  margin-left: 0.6rem;
}

ul.tile {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  position: relative;
}
ul.tile--full-page-height {
  flex-direction: column;
  min-height: 100%;
}

div#main.view-transition ul.tile {
  transition: 0.25s width;
}

div#main.view-transition div.highcharts-container {
  display: none;
}

ul.tile > li {
  animation: fadeIn 0.3s ease-out;
  box-sizing: border-box;
  flex: 1 0 100%;
  min-height: 15rem;
  padding: 0.9rem;
  position: relative;
  /* transition: 0 width; */
}

ul.tile > li.collapsing,
ul.tile > li.collapsed {
  min-height: 0 !important;
}

ul.tile > li.wrap {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.tile > li.wrap > ul.tile {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

div#main.view-editor ul.tile > li {
  border-left: 0.1rem dashed #ccc;
  border-top: 0.1rem dashed #ccc;
  padding: 1.6rem;
  transition: 0.25s padding;
}

span.insert-tile {
  display: block;
  font-size: 0;
  height: 0;
  margin: 0;
  padding: 0;
  width: 0;
}

div#main.view-editor ul#wall ul.tile > li > span.insert-tile,
div#main.view-editor ul#wall li > span.insert-tile {
  background-color: #dadee5;
  border-radius: 1rem;
  color: #9e9fa0;
  cursor: pointer;
  font-size: 1.8rem;
  height: 2.4rem;
  margin-top: -1.2rem;
  position: absolute;
  right: -1.4rem;
  text-align: center;
  top: 50%;
  transition: 0.15s background-color;
  width: 2.4rem;
  z-index: 2;
}

div#main.view-editor ul#wall ul.tile > li > span.insert-tile:hover,
div#main.view-editor ul#wall li > span.insert-tile:hover {
  background-color: #ccc;
  color: #4c5259;
}

div#main.view-editor ul.tile {
  border-bottom: 0.1rem dashed #9e9fa0;
  border-right: 0.1rem dashed #9e9fa0;
  margin: 2rem;
  width: calc(100% - 4rem);
}

ul.tile li.reloader:not(.loading) > div.wrapper::after {
  background-color: rgba(255, 255, 255, 0.55);
  border-radius: 1rem;
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

ul.tile li.reloader:not(.loading) > div.wrapper::before {
  background-color: #ffffff;
  background-image: url("/public/images/loader/0171a9/spinner_30.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 3rem;
  content: "";
  height: 2rem;
  position: absolute;
  right: 1.2rem;
  top: 1rem;
  width: 2rem;
  z-index: 3;
}

ul.tile li.block > div.wrapper::after {
  background-color: rgba(255, 255, 255, 0.55);
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 2;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  ul.tile li.reloader:not(.loading) > div.wrapper::before {
    background-image: url("/public/images/loader/0171a9/spinner_30_hd.gif");
  }
}
ul.tile li[data-step] {
  display: none;
}

ul.tile > li[data-tile=search],
ul.tile > li[data-tile=input],
ul.tile > li[data-tile=textarea],
ul.tile > li[data-tile=selection],
ul.tile > li.heightless {
  min-height: 0;
}

ul.tile > li[data-tile=hollow] {
  min-height: 0;
  padding: 0 1.2rem;
}

ul.tile > li[data-tile=title] .wrapper .header .label {
  height: auto;
}

ul.tile li.w50 {
  flex: 1 0 50%;
  min-width: 35rem !important;
}

ul.tile > li.w50 > ul.tile > li.w50,
ul.tile li.w25 {
  flex: 1 0 25%;
  min-width: 22.5rem !important;
}

ul.tile li.hidden {
  display: none;
}

ul.tile li.show {
  display: inline-block;
}

ul.tile li.w450min {
  min-width: 45rem !important;
}

ul.tile li.h150 {
  min-height: 15rem;
}

ul.tile li.h250 {
  min-height: 25rem;
}

ul.tile li.h300 {
  min-height: 30rem;
}

ul.tile li.h300max {
  max-height: 30rem;
}

ul.tile li.h350 {
  min-height: 35rem;
}

ul.tile li.h350max {
  max-height: 35rem;
}

ul.tile li.h400 {
  min-height: 40rem;
}

ul.tile li.h400max {
  max-height: 40rem;
}

ul.tile li.h500 {
  min-height: 50rem;
}

ul.tile li.h600 {
  min-height: 60rem;
}

ul.tile li.h700 {
  min-height: 70rem;
}

ul.tile li.wrap {
  min-width: 22.5rem;
  padding: 0;
}

ul.tile li.wrap > ul.tile {
  height: 100%;
  list-style: none;
  padding: 0;
}

ul.tile li.rowspan {
  padding: 0;
}

ul.tile li.rowspan > ul.tile {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

ul.tile li.rowspan > ul.tile > li.w25 {
  flex: 1 0 50%;
}

ul.tile li.rowspan > ul.tile > li.w50 {
  flex: 1 0 100%;
}

ul.tile li > div.wrapper {
  background-color: #ffffff;
  border-radius: 1rem;
  background: radial-gradient(circle, #ffffff 20%, #fafafa 100%);
  border-radius: 1rem;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  height: 100%;
  position: relative;
  width: 100%;
}

ul.tile li.editing > div.wrapper {
  border: 0.1rem solid hsl(19, 97%, 64%);
  border: 0.1rem solid var(--colorHighlight, hsl(19, 97%, 64%));
  border-bottom: 0.3rem solid hsl(19, 97%, 64%);
  border-bottom: 0.3rem solid var(--colorHighlight, hsl(19, 97%, 64%));
}

ul.tile li.headerless > div.wrapper {
  padding-top: 2rem;
}

ul.tile li.error > div.wrapper {
  border: 0.1rem solid #f17270;
  border-bottom-width: 0.3rem;
  box-shadow: rgba(232, 126, 125, 0.5) 0 0 0.3rem;
  transition: 1s all;
}

ul.tile li > div.wrapper > div.header {
  border-bottom: 0rem solid #e6eaf2;
  height: 3.9rem;
  padding-right: 0.7rem;
  position: relative;
}
ul.tile li > div.wrapper > div.header.header--tall {
  height: 5rem;
  padding-right: 1rem;
}

ul.tile li > div.wrapper > div.header > ul {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  list-style: none;
  min-height: 100%;
  width: 100%;
}

ul.tile li > div.wrapper > div.header > ul > li {
  height: 100%;
}

ul.tile li > div.wrapper > div.header > ul > li.label {
  flex: 1 1 auto;
}

ul.tile li > div.wrapper > div.header > ul > .label--display-none {
  display: none;
  margin-left: 1rem;
}
ul.tile li > div.wrapper > div.header > ul > .label--display-none ~ .tile__header-buttons {
  width: 100%;
  padding-left: 1rem;
}

ul.tile li > div.wrapper > div.header h3 {
  line-height: 1.2;
  padding: 1rem 1.4rem;
}

ul.tile li > div.wrapper > div.header h6 {
  padding: 0 1.4rem;
}

ul.tile li.collapse > div.wrapper > div.header h3 {
  cursor: pointer;
}

ul.tile li.collapsing div.body,
ul.tile.li.collapsed div.body {
  overflow: hidden !important;
}

ul.tile li.collapse > div.wrapper > div.header span.collapse {
  cursor: pointer;
  display: inline-block;
  height: 2rem;
  margin-left: 0.4rem;
  padding: 0;
  position: relative;
  vertical-align: middle;
  width: 2rem;
}

ul.tile li.collapse > div.wrapper > div.header span.collapse::after {
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.5rem solid #4c5259;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.4rem;
  position: absolute;
  top: 50%;
  width: 0;
}

ul.tile li.collapse.collapsed > div.wrapper > div.header span.collapse::after {
  border-bottom: 0.5rem solid #4c5259;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.4rem;
  position: absolute;
  top: 50%;
  width: 0;
}

ul.tile li > div.wrapper > div.header li.button {
  text-align: right;
}

ul.tile li > div.wrapper > div.header a,
ul.tile li > div.wrapper > div.header span.opt {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1.6rem;
  cursor: pointer;
  display: inline-block;
  height: 100%;
  transition: 0.15s opacity;
  vertical-align: middle;
  min-width: 3rem;
}

ul.tile li > div.wrapper > div.header a:hover,
ul.tile li > div.wrapper > div.header span.opt:hover {
  opacity: 1;
}

ul.tile li > div.wrapper > div.header span.opt {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

ul.tile li > div.wrapper > div.header span.opt > ul {
  border-radius: 1rem;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.028), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.04), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.05), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.062), 14px 14px 45px -2px rgba(0, 0, 0, 0.09), 0 0 0 1px #ccc;
  visibility: none;
  pointer-events: none;
  font-size: 0;
  list-style: none;
  position: absolute;
  right: 1rem;
  text-align: center;
  top: 3.5rem;
  z-index: 1;
  transform: translateY(5px);
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
ul.tile li > div.wrapper > div.header span.opt > ul::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  right: 0rem;
  width: 2.5rem;
  height: 2.5rem;
}

ul.tile li > div.wrapper > div.header span.opt:hover > ul {
  visibility: visible;
  pointer-events: all;
  transform: translateY(0px);
  opacity: 100%;
  z-index: 2;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li {
  background-color: #ffffff;
  display: block;
  transition: 0.15s background-color;
}
ul.tile li > div.wrapper > div.header span.opt > ul > li:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
ul.tile li > div.wrapper > div.header span.opt > ul > li:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
ul.tile li > div.wrapper > div.header span.opt > ul > li:not(:last-child) {
  border-bottom: 0.1rem solid #e6eaf2;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li.menu {
  box-sizing: border-box;
  color: #4c5259;
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 1 !important;
  padding: 0.9rem 1.4rem;
  text-align: left;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li > a {
  box-sizing: border-box;
  color: #4c5259;
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  height: 100%;
  opacity: 1 !important;
  padding: 0.9rem 1.4rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li.selected > a {
  color: hsl(19, 97%, 64%);
  font-weight: 600;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li.nopt > a {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li[data-depth="1"] > a {
  padding-left: 2.4rem;
  position: relative;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li[data-depth="1"] > a::after {
  border-bottom: 0.1rem solid #ccc;
  border-left: 0.1rem solid #ccc;
  box-sizing: border-box;
  content: "";
  height: 0.6rem;
  left: 1.4rem;
  margin-top: -0.4rem;
  position: absolute;
  top: 50%;
  width: 0.6rem;
}

ul.tile li > div.wrapper > div.header span.opt > ul > li[data-depth="1"].selected > a::after {
  border-bottom: 0.1rem solid hsl(19, 97%, 64%);
  border-left: 0.1rem solid hsl(19, 97%, 64%);
}

ul.tile li > div.wrapper > div.header span.opt > ul > li:not(.nopt):not(.menu):hover {
  background-color: #f0f7fa;
  background-color: var(--colorTertiary, #f0f7fa);
}

ul.tile li > div.wrapper > div.header a.left {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.tile li > div.wrapper > div.header a.right {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.tile li > div.wrapper > div.header a.search {
  display: flex;
  justify-content: center;
  align-items: center;
}
ul.tile li > div.wrapper > div.header a.search svg {
  fill: #bbc7d7;
}

ul.tile li > div.wrapper > div.header a.sidebar {
  background-image: url("/svg/icon/sidebar.svg?c=bbc7D7");
}

ul.tile li > div.wrapper > div.header a.pref {
  display: none;
}

div#main.view-editor ul.tile li > div.wrapper > div.header a.pref {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button.download + .tile-inline-select--narrow {
  margin-left: 0;
}

ul.tile li > div.wrapper > div.header a.magic {
  background-image: url("/svg/icon/wand.svg?c=bbc7D7");
  background-size: 1.9rem;
}

ul.tile li:not([data-tile=wizard]) > div.wrapper > div.header a.button {
  background-color: #e6eaf2 !important;
  color: #9e9fa0 !important;
  font-size: 1.2rem;
  height: auto;
  margin-left: 0.7rem;
  padding: 0.5rem 0.9rem;
  position: relative;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out;
}

ul.tile li > div.wrapper > div.header a.button.add {
  padding-left: 2rem;
}

ul.tile li > div.wrapper > div.header a.add__icon::before {
  color: #9e9fa0 !important;
  content: "+";
  font-size: 1.6rem;
  height: 100%;
  width: 100%;
}

ul.tile li > div.wrapper > div.header a.button.add::before {
  color: #9e9fa0 !important;
  content: "+";
  cursor: pointer;
  font-size: 1.6rem;
  height: 100% !important;
  left: 0;
  padding: 0 !important;
  position: absolute;
  text-align: center;
  top: 0.2rem;
  width: 2.2rem !important;
}

ul.tile li > div.wrapper > div.header a.button.margin {
  margin-left: 0.7rem;
}

ul.tile li > div.wrapper > div.header a.button:hover {
  background-color: #d9dfeb !important;
  color: #949596 !important;
}

ul.tile li > div.wrapper > div.header a.button:hover::before {
  color: #949596 !important;
}

ul.tile li > div.wrapper > div.body {
  box-sizing: border-box;
  display: table;
  height: calc(100% - 3.9rem);
  min-height: 5rem;
  padding: 0 1.4rem 2rem 1.4rem;
  position: relative;
  width: 100%;
}
ul.tile li > div.wrapper > div.body--border-top {
  border-top: 1px solid #dadee5;
}

ul.tile > li.heightless > div.wrapper > div.body {
  min-height: 0;
}

ul.tile li > div.wrapper > div.body > div.wrapper {
  display: table-cell;
  height: 100%;
  position: relative !important;
  text-align: center;
  vertical-align: middle;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
ul.tile li > div.wrapper > div.body > div.wrapper--shorter-tile {
  height: auto;
}

ul.tile li > div.wrapper > div.body > div.wrapper > div.content {
  height: 100%;
  width: 100%;
}

ul.tile li > div.wrapper > div.body > div.wrapper > div.content.padded {
  box-sizing: border-box;
  padding: 0 1rem;
}

ul.tile li[data-tile=selection] > div.wrapper {
  background-color: hsl(19, 97%, 64%);
  background-image: url("/svg/icon/checked.svg?c=ffffff");
  background-position: left 1.4rem center;
  background-repeat: no-repeat;
  background-size: 2rem;
  padding-top: 2rem;
}

ul.tile li[data-tile=selection] > div.wrapper > div.body {
  color: #ffffff;
  min-height: 0;
  padding-left: 4.6rem;
}

ul.tile li[data-tile=number] a {
  text-decoration: none;
}

ul.tile li[data-tile=number].icon h4 {
  background-image: url("/svg/icon/device.svg?c=353535");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 2.8rem;
  display: inline-block;
  padding-right: 3.8rem;
}

ul.tile li[data-tile=number] h1 {
  font-size: 2.5rem;
}

ul.tile li[data-tile=number].loading h1 {
  background-image: url("/public/images/ajax-loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 0;
  height: 3.8rem;
}

ul.tile li[data-tile=number] h2 {
  margin-top: 0.7rem;
}

.gmap-marker-meta.background-color {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
}

.gmap-marker-meta.border-color {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
}

.gmap-marker-meta.color {
  background-color: #ffffff;
}

ul.tile li[data-tile=search] div.body,
ul.tile li[data-tile=input] div.body {
  height: 100% !important;
  min-height: 0 !important;
  overflow: none;
  padding: 0 !important;
}

ul.tile li[data-tile=search] div.body > div.wrapper,
ul.tile li[data-tile=input] div.body > div.wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
@media only screen and (max-width: 36.375em) {
  ul.tile li[data-tile=search] div.body > div.wrapper.wrapper--no-wrap-mobile,
  ul.tile li[data-tile=input] div.body > div.wrapper.wrapper--no-wrap-mobile {
    display: block !important;
  }
}

ul.tile li[data-tile=textarea] div.body textarea::placeholder {
  color: #ccc;
  font-weight: normal;
}

ul.tile li[data-tile=textarea] div.body {
  min-height: 0 !important;
  padding: 0 !important;
}

ul.tile li[data-tile=textarea] div.body textarea {
  box-sizing: border-box;
  color: #4c5259;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0 !important;
  padding: 0 1.4rem 1.3rem 1.4rem;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  ul.tile li[data-tile=search] div.body > div.wrapper,
  ul.tile li[data-tile=input] div.body > div.wrapper {
    flex-wrap: wrap !important;
  }
  ul.tile li[data-tile=search] div.body select {
    flex: 1 0 auto;
  }
}
ul.tile li[data-tile=status] div.body span.status {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 3.8rem;
  width: 3.8rem;
}

ul.tile li[data-tile=status].loading div.body span.status {
  background-image: url("/public/images/ajax-loader.gif");
}

ul.tile li[data-tile=status][data-status=connected] div.body span.status,
ul.tile li[data-tile=status][data-status=open] div.body span.status,
ul.tile li[data-tile=status][data-status=ok] div.body span.status,
ul.tile li[data-tile=status][data-status=true] div.body span.status,
ul.tile li[data-tile=status][data-status=active] div.body span.status,
ul.tile li[data-tile=status][data-status=up] div.body span.status {
  background-image: url("/public/images/icons/connected.svg");
}

ul.tile li[data-tile=status][data-status=disconnected] div.body span.status,
ul.tile li[data-tile=status][data-status=closed] div.body span.status,
ul.tile li[data-tile=status][data-status=fault] div.body span.status,
ul.tile li[data-tile=status][data-status=false] div.body span.status,
ul.tile li[data-tile=status][data-status=error] div.body span.status,
ul.tile li[data-tile=status][data-status=shutoff] div.body span.status,
ul.tile li[data-tile=status][data-status=down] div.body span.status {
  background-image: url("/public/images/icons/disconnected.svg");
}

ul.tile li[data-tile=status][data-status="in alert"] div.body span.status {
  background-image: url("/svg/icon/inalarm.svg?c=E57272");
}

ul.tile li[data-tile=status][data-status=standby] div.body span.status {
  background-image: url("/svg/icon/standby.svg?c=f3b543");
}

ul.tile li[data-tile=status][data-status=disabled] div.body span.status {
  background-image: url("/svg/icon/disabled.svg?c=c6c6c6");
}

ul.tile li[data-tile=status][data-status=warning] div.body span.status {
  background-image: url("/public/images/icons/warning.svg");
}

ul.tile li[data-tile=status][data-status=unknown] div.body span.status {
  background-image: url("/public/images/icons/unknown.svg");
}

ul.tile li[data-tile=status][data-status="pending creation"] div.body span.status {
  background-image: url("/public/images/icons/pending.svg");
}

ul.tile li[data-tile=status] div.body h2 {
  margin-top: 0.7rem;
}

ul.tile li[data-tile=status][data-status=pending] div.body span.status {
  background-image: url("/public/images/icons/pending.svg");
}

ul.tile li[data-tile=status][data-status="battery ok"] div.body span.status {
  width: 8rem;
  height: 5rem;
  background-image: url("/public/images/icons/battery_ok.svg");
}

ul.tile li[data-tile=status][data-status="battery low"] div.body span.status {
  width: 8rem;
  height: 5rem;
  background-image: url("/public/images/icons/battery_low.svg");
}

ul.tile li[data-tile=status][data-status="battery empty"] div.body span.status {
  width: 8rem;
  height: 5rem;
  background-image: url("/public/images/icons/battery_empty.svg");
}

ul.tile li[data-tile=form] div.body div.wrapper {
  vertical-align: top !important;
}

ul.tile li[data-tile=form] form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ul.tile li[data-tile=form] form > div.fbody {
  flex: 1;
}

ul.tile li[data-tile=form] form div.paramgrp {
  display: none;
}

ul.tile li[data-tile=form] form > div.ffooter {
  border-top: 0.1rem solid #e6eaf2;
  flex: 0 0 3.4rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  text-align: right;
}

ul.tile li[data-tile=empty].loading div.body > div.wrapper {
  background-image: url("/public/images/ajax-loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 3.8rem;
}

ul.tile li[data-tile=title] {
  height: auto !important;
  min-height: auto !important;
  padding: 0 0.9rem 0 0;
}

ul.tile li[data-tile=title] > div.wrapper {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 0 !important;
  height: auto;
  min-height: auto;
}

ul.tile li[data-tile=title] div.header {
  background: none !important;
  border: 0 !important;
}

ul.tile li[data-tile=title] div.header h3 {
  color: #4c5259;
  font-size: 1.6rem;
  font-weight: 600 !important;
  line-height: normal !important;
  padding: 0 1.4rem !important;
}

ul.tile li[data-tile=title] div.header ul > li.button > span.opt {
  display: none;
}

ul.tile li[data-tile=title] div.body {
  display: none !important;
}

ul.tile div.overlay {
  box-sizing: border-box;
  height: calc(100% - 4.8rem);
  left: 0;
  margin: 2.4rem;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 0;
  width: calc(100% - 4.8rem);
}

/* Tile */
.tile--mh293 {
  max-height: 29.3rem;
}

/* ----- TILES ----- */
.privacy-policy {
  text-align: left;
}
.privacy-policy h3 {
  padding-top: 1.5rem;
}

li[data-tile=table] .wrapper {
  overflow: hidden;
}

li[data-tile=table] div.body {
  display: block !important;
  max-height: 100%;
  padding: 0 !important;
  overflow-x: visible;
}

li[data-tile=table] table {
  border-bottom: 0.1rem solid transparent;
  border-spacing: 0;
  border-top: 0.1rem solid #e6eaf2;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

li[data-tile=table].loading div.body::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 3.8rem;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

li[data-tile=table]:not(.loading) table.loading::before {
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-position: 50% 10rem;
  background-repeat: no-repeat;
  background-size: 4rem;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

li[data-tile=table].load-from-top:not(.loading) table.loading:not(.init)::before {
  background-position: top10rem center;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  li[data-tile=table]:not(.loading) table.loading::before {
    background-image: url("/public/images/loader/0171a9/spinner_40_hd.gif");
  }
}
.user-menu {
  align-items: center;
  cursor: auto;
  display: flex;
  flex-direction: column;
  margin-top: 0.8rem;
  margin-left: 1rem;
  padding: 3.2rem 3.2rem 2.6rem 3.2rem;
  left: 8rem;
  bottom: 1rem;
  width: 30rem;
}
.user-menu::before {
  border-bottom: 8px solid transparent;
  border-right: 9px solid #ffffff;
  border-top: 8px solid transparent;
  content: "";
  height: 0;
  left: 0;
  margin-left: -0.9rem;
  margin-top: 0rem;
  position: absolute;
  bottom: 2.6rem;
  width: 0;
}
.user-menu #user_menu_close {
  color: #4c5259;
  cursor: pointer;
  font-size: 2rem;
  width: 4rem;
  height: 4rem;
  padding: 1rem;
  opacity: 0.7;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s ease-out;
}
@media only screen and (min-width: 46.85em) {
  .user-menu #user_menu_close {
    opacity: 0 !important;
  }
}
.user-menu #user_menu_close--light {
  color: #e6eaf2;
}
.user-menu #user_menu_close:hover {
  opacity: 1;
}
.user-menu__info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1.4rem;
  padding: 0 3rem;
}
.user-menu__button {
  margin-bottom: 1.4rem;
}
.user-menu__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.user-menu__icon {
  margin-bottom: 1.4rem;
}
.user-menu__btn {
  color: #000000;
  margin-bottom: 1.4rem;
  text-decoration: none;
}
.user-menu__heading {
  text-align: center;
}
.user-menu__heading:not(:last-child) {
  margin-bottom: 0.4rem;
}
.user-menu__terms {
  color: #000000;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: max-content max-content max-content;
  text-decoration: none;
  margin-bottom: 1.4rem;
}
.user-menu__footer {
  text-align: center;
  line-height: 1.6;
}
.user-menu__hr {
  border-top: 1px solid #e6eaf2;
  margin-bottom: 1.4rem;
  width: 100%;
}

.vehicle-info {
  position: relative;
}
.vehicle-info__loader, .vehicle-info__error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.2s ease-in-out;
}
.vehicle-info__loader {
  background-color: #ffffff;
  z-index: 20;
}
.vehicle-info__error {
  text-align: center;
  color: #d26969;
  display: flex;
  justify-content: center;
  align-items: center;
}

.codeblock {
  display: grid;
  gap: 1.8rem;
  margin: 1.8rem 0;
  grid-template-columns: 1fr 1fr;
  height: 50vh;
  max-height: 70rem;
}
.codeblock__container {
  background-color: #f8fafb;
  border-radius: 0.3333333333rem;
  outline: 2px solid #ccc;
  border-left: 2rem solid #eff3f5;
  padding: 0.9rem;
  position: relative;
  overflow: hidden;
}
.codeblock__container--loading .codeblock__loading {
  opacity: 100%;
  visibility: visible;
}
.codeblock__container--loading .codeblock__code, .codeblock__container--loading .codeblock__response-code {
  opacity: 0;
  visibility: hidden;
}
.codeblock__container:hover .codeblock__copy,
.codeblock__container:hover .codeblock__download {
  opacity: 100%;
}
.codeblock__loading {
  left: 0;
  position: absolute;
  right: 0;
  top: 10rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.codeblock__heading {
  line-height: 1.8;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.9rem;
}
.codeblock__response-code {
  margin-left: 1.2rem;
  padding: 0 1rem;
  font-size: 1.3rem;
}
.codeblock__pre {
  font-size: 1.2rem;
  overflow-y: scroll;
  max-height: 100%;
  display: flex;
  white-space: pre-wrap;
}
.codeblock__pre--no-scroll {
  overflow: hidden;
}
.codeblock__code, .codeblock__response-code {
  opacity: 100%;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  word-break: break-all;
}
.codeblock__code {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
  font-family: monospace;
}
.codeblock__code span {
  font-family: monospace;
  line-break: anywhere;
}
.codeblock__table {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 1fr;
  gap: 1.3rem;
}
.codeblock__key {
  color: #00425b;
}
.codeblock__value {
  color: #018ac1;
}
.codeblock__string {
  color: hsl(197, 99%, 33%);
}
.codeblock__error {
  color: #d26969;
}
.codeblock__empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.codeblock__empty .no-results__heading {
  color: #9e9fa0;
  width: 16rem;
  margin-bottom: 0;
}
.codeblock__empty .no-results__content {
  margin: 0;
  container-type: size;
  width: 100%;
  height: 100%;
}
@container (max-height: 150px) {
  .codeblock__empty .no-results__content .no-results__icon-container {
    width: 5.5rem;
    height: 5.5rem;
  }
}
.codeblock__copy {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  border-radius: 0.6666666667rem;
  background-color: rgba(248, 250, 251, 0.8);
}
.codeblock__copy--short {
  padding: 0.7rem;
}
.codeblock__download {
  margin-top: 0.6rem;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  border-radius: 0.6666666667rem;
  background-color: rgba(248, 250, 251, 0.8);
}
.codeblock__copy-icon {
  width: 2rem;
  height: 2rem;
  color: #9e9fa0;
}

@media only screen and (max-width: 46.85em) {
  .dynamic-row {
    gap: 4.8rem 2.4rem;
  }
}
.dynamic-row__fieldset {
  grid-column: span 12/span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow: hidden;
  transition: height 0.2s ease-in-out;
  gap: 1rem 1.2rem;
}
.dynamic-row__fieldset--compact {
  gap: 1rem;
}
.dynamic-row__fieldset--complete .dynamic-row__status {
  background-color: #59cd89;
  border: solid 2px #59cd89;
  color: #fff;
}
.dynamic-row__fieldset--complete .dynamic-row__status:hover, .dynamic-row__fieldset--complete .dynamic-row__status:focus {
  background-color: #4fb878;
  border: solid 2px #4fb878;
}
@media only screen and (max-width: 46.85em) {
  .dynamic-row__fieldset__remove-button {
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}
.dynamic-row__fieldset__drag-icon__container {
  cursor: move;
  font-size: 2.5rem;
}
.dynamic-row__fieldset__drag-icon__container--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.dynamic-row__fieldset__controls-container {
  align-self: end;
  display: flex;
  justify-content: space-around;
  grid-column: span 2/span 2;
}
.dynamic-row__fieldset__controls-container--single-control {
  grid-column: span 1/span 1;
  justify-content: unset;
}
.dynamic-row__fieldset__controls-container--dual-control {
  justify-content: start;
  gap: 1.2rem;
}
.dynamic-row__fieldset__controls-container button {
  padding: 0.9rem;
}
.dynamic-row__fieldset .btnv2--text-and-icon--horizontal {
  height: 3.5rem;
}
.dynamic-row .dynamic-row__fieldset--label-row {
  margin-bottom: -0.8rem;
}
.dynamic-row .dynamic-row__fieldset .input__helper-text {
  display: none;
}
.dynamic-row .dynamic-row__fieldset--draggable {
  z-index: 1;
}
.dynamic-row .dynamic-row__fieldset--draggable.dragging {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.6666666667rem;
  border: #9e9fa0 1px dashed;
}
.dynamic-row .dynamic-row__fieldset--draggable.dragging div {
  opacity: 0;
}

.drag-drop__placeholder {
  color: #ccc;
}
.drag-drop__target {
  white-space: nowrap;
  overflow: hidden;
}
.drag-drop__option {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.7rem;
  cursor: grab;
}
.drag-drop .drag-drop__option {
  margin: -0.5rem 0.5rem;
  background-color: rgba(1, 120, 167, 0.1);
}
.drag-drop .drag-drop__option--error {
  background-color: rgba(241, 114, 112, 0.1254901961);
}
.drag-drop-options {
  font-size: 1.3rem;
  margin-top: 1.3rem;
}
.drag-drop-options .drag-drop__option {
  background-color: hsl(197, 99%, 33%);
  color: #fff;
  margin: 0 1rem 1rem 0;
}
.drag-drop-options .drag-drop__option--error {
  background-color: #d26969;
}

.drag-drop-file__zone {
  border-style: dashed;
  text-align: center;
  cursor: pointer;
  display: grid;
  gap: 2rem;
  padding: 2rem;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  height: 31rem;
  align-content: space-evenly;
}
.drag-drop-file__zone--compact {
  height: 16rem;
}
.drag-drop-file__zone--compact .drag-drop-file__icon {
  font-size: 4rem;
  min-height: 0;
}
.drag-drop-file__zone--compact .drag-drop-file__main-text {
  font-size: 1.4rem;
  font-weight: 700;
}
.drag-drop-file__zone--single-line {
  height: 8rem;
  display: flex;
  padding: 2rem;
}
.drag-drop-file__zone--single-line .drag-drop-file__icon {
  font-size: 4rem;
  min-height: 0;
}
.drag-drop-file__zone--single-line .drag-drop-file__main-text {
  font-size: 1.4rem;
  font-weight: 700;
}
.drag-drop-file__zone--single-line .drag-drop-file__main-container {
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drag-drop-file__zone--active {
  border-color: hsl(197, 100%, 47%);
  border-style: solid;
}
.drag-drop-file__zone--not-allowed {
  background-color: #eff3f5;
  cursor: not-allowed !important;
}
.drag-drop-file__zone--custom-error .drag-drop-file__main-text {
  font-size: 1.4rem;
}
.drag-drop-file__zone--custom-error .drag-drop-file__icon {
  color: #f17270;
}
.drag-drop-file__input {
  display: none;
}
.drag-drop-file__main-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.drag-drop-file__icon {
  color: #4c5259;
  font-size: 4rem;
}
.drag-drop-file__main-text {
  font-size: 1.6rem;
  color: #4c5259;
}
.drag-drop-file__main-text li {
  list-style-type: disc;
  text-align: left;
}
.drag-drop-file__sub-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: #4c5259;
  text-transform: uppercase;
}
.drag-drop-file__button {
  max-width: 20rem;
}

.counter {
  color: #ccc;
  font-size: 1.2rem;
  text-transform: uppercase;
}
.counter__description {
  display: inline-block;
  margin-right: 1rem;
}

.grid--full-height-tile {
  height: 100%;
  padding: 0 0.8rem;
}
.grid--full-height-tile .tile-v2:not(.search-input-tile) {
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
}
.grid--disabled {
  opacity: 70%;
  pointer-events: 0;
  filter: grayscale(50%);
}
.grid__loading-skeleton {
  background-color: hsl(200, 33%, 93%);
  background-color: var(--colorBackground, hsl(200, 33%, 93%));
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(4, 1fr);
  left: 0;
  padding: 1rem 2.7rem 1.8rem 2.7rem;
  opacity: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.grid__loading-skeleton--hidden {
  opacity: 0;
  visibility: hidden;
}
@media only screen and (max-width: 64em) {
  .grid__loading-skeleton {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 46.85em) {
  .grid__loading-skeleton {
    grid-template-columns: repeat(1);
  }
}
.grid__loading-skeleton div {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
  background: #ffffff;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #ffffff 0%, #f7f7f7 20%, #ffffff 40%, #ffffff 100%);
  background-repeat: no-repeat;
  background-size: 1000px 100%;
  border-radius: 1rem;
  opacity: 60%;
}
.grid__loading-skeleton div:nth-child(1), .grid__loading-skeleton div:nth-child(2), .grid__loading-skeleton div:nth-child(3), .grid__loading-skeleton div:nth-child(4) {
  height: 13.2rem;
}
.grid__loading-skeleton div:nth-child(5), .grid__loading-skeleton div:nth-child(6), .grid__loading-skeleton div:nth-child(7) {
  height: 35rem;
}
.grid__loading-skeleton div:nth-child(5) {
  grid-column: 1/span 2;
}
@media only screen and (max-width: 64em) {
  .grid__loading-skeleton div:nth-child(5) {
    grid-column: 1/span 1;
  }
}
.grid__loading-skeleton div:nth-child(6) {
  grid-column: 3/span 2;
}
@media only screen and (max-width: 64em) {
  .grid__loading-skeleton div:nth-child(6) {
    grid-column: 2/span 1;
  }
}
.grid__loading-skeleton div:nth-child(7) {
  animation-name: placeholderShimmerLarge;
  background-size: 2000px 300px;
  grid-column: 1/-1;
}

.tile-view .grid-stack {
  width: 100%;
  margin-top: -1rem;
}
.tile-view--disabled .tile-v2 {
  opacity: 50%;
  pointer-events: none;
}
.tile-view--disabled svg {
  opacity: 50%;
  pointer-events: none !important;
}

.tabs-nav {
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: max-content;
  position: relative;
}
.tabs-nav__container {
  display: flex;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.tabs-nav__hr {
  background: rgba(0, 0, 0, 0.07);
  border: none;
  height: 0.3rem;
  margin: 0;
  transition: width 0.4s ease-in-out, margin-left 0.4s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  width: 100%;
}
.tabs-nav__hr--color {
  background: hsl(197, 100%, 47%);
  background: var(--colorPrimary, hsl(197, 100%, 47%));
  height: 0.3rem;
  margin-top: -0.3rem;
}
.tabs-nav__hr--no-transition {
  transition: none !important;
}
.tabs-nav:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  border-radius: 1rem;
  width: 100rem;
  height: 3.4rem;
  margin: 0.3rem 0;
  background-color: #dadee5;
  visibility: hidden;
  opacity: 0;
  background: #dadee5;
  background-image: linear-gradient(to right, #dadee5 0%, #e9ebf0 20%, #dadee5 40%, #dadee5 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}
.tabs-nav--loading {
  position: relative;
  height: 3.4rem;
}
.tabs-nav--loading:after {
  opacity: 100%;
  visibility: visible;
}
.tabs-nav__container, .tabs-nav__hr {
  opacity: 100%;
  visibility: visible;
}
.tabs-nav--loading .tabs-nav__container, .tabs-nav--loading .tabs-nav__hr {
  opacity: 0;
  visibility: hidden;
}
.tabs-nav__button {
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 1.2rem;
  overflow: hidden;
  padding: 0.8rem 0;
  transition: all 0.2s ease-out;
  min-width: 10rem;
}
.tabs-nav__button h3 {
  color: #9e9fa0;
  padding: 0 1.6rem;
  font-size: 1.2rem;
  transition: color 0.2s ease-out;
}
.tabs-nav__button:last-child {
  z-index: 2;
}
.tabs-nav__button:not(:last-child) {
  border-right: 2px solid rgba(0, 0, 0, 0.07);
}
.tabs-nav__button:hover {
  background-color: rgba(255, 255, 255, 0.6);
  outline: none;
}
.tabs-nav__button:hover h3 {
  color: #4c5259;
}
.tabs-nav__button--selected {
  background-color: #ffffff;
}
.tabs-nav__button--selected h3 {
  color: #000000;
}
.tabs-nav__button--selected:hover {
  background-color: #ffffff;
}
.tabs-nav__button--selected:hover h3 {
  color: #000000;
}
.tabs-nav__button--non-interactive {
  pointer-events: none;
}
.tabs-nav__button--disabled {
  cursor: default;
}
.tabs-nav__button--disabled h3 {
  color: #ccc;
}
.tabs-nav__button--disabled:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.tabs-nav__button--disabled:hover h3 {
  color: #ccc;
}

.tab {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  opacity: 100%;
  padding: 0 1.8rem 18rem 1.8rem;
  transition: all 0.3s ease-out;
  transform: translateX(0%);
}
@media only screen and (max-width: 30em) {
  .tab {
    grid-gap: 1rem;
  }
}
.tab--hidden {
  display: none !important;
}
.tab[data-tab=data] {
  height: 100%;
}
.tab[data-tab=data].tab {
  padding-bottom: 0;
}

.tile-view-edit-menu {
  z-index: 10;
  position: fixed;
  bottom: 0;
  left: 7rem;
  right: 0;
  margin: 0 auto 5rem;
  max-width: 72rem;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: 1fr max-content;
  opacity: 1;
  transform: translateY(0%);
  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
.tile-view-edit-menu .btnv2 {
  border: none;
  padding: 1.4rem;
}
.tile-view-edit-menu--hidden {
  opacity: 0;
  transform: translateY(80%);
  pointer-events: none;
}
.tile-view-edit-menu--6-options {
  max-width: 62rem;
}
.tile-view-edit-menu__controls-left {
  display: grid;
  width: 100%;
  gap: 1.2rem;
  padding-right: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.tile-view-edit-menu__controls-left > * {
  grid-row: 1/2;
}
.tile-view-edit-menu__controls-right {
  display: grid;
  padding-left: 1rem;
  border-left: solid #dadee5 2px;
  width: 100%;
  align-items: center;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 8rem);
}
.tile-view-edit-menu__controls-right > * {
  grid-row: 1/2;
}
.tile-view-edit-menu__controls-right button {
  aspect-ratio: 1/1;
}
.tile-view-edit-menu__controls-right button .btnv2__icon {
  height: 2rem;
  width: 2rem;
}
.tile-view-edit-menu__controls-right button .btnv2__icon {
  height: 2.5rem;
}
.tile-view-edit-menu__controls-right button .btnv2--text-and-icon__icon-container {
  margin-bottom: 0.6rem;
}

.tile-v2 {
  background-color: #ffffff;
  height: 100%;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}
.tile-v2--scrollable {
  overflow: auto;
}
.tile-v2__content {
  padding: 0 1.4rem 1.4rem;
  flex-grow: 1;
  position: relative;
}
.tile-v2__content:has(.value-tile__bottom-content) {
  padding-bottom: 1rem;
}
.tile-v2__content--scrollable {
  overflow-y: hidden;
}
.tile-v2__content--no-header {
  padding-top: 2rem;
}
.tile-v2__content--centered {
  display: flex;
}
.tile-v2__content--centered > * {
  flex-grow: 0;
}
.tile-v2__content--no-padding {
  padding: 0;
}
.tile-v2__content__loader {
  height: 100%;
  display: flex;
  z-index: 10;
}
.tile-v2__content__loader--overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tile-v2__content__loader--main {
  background-color: rgba(255, 255, 255, 0.7);
}
.tile-v2__content__loader--corner .loading-circle-spinner {
  width: 2.3rem;
  margin-left: 1.7rem;
}
.tile-v2__content--placeholder {
  display: flex;
  height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: -1rem;
}
.tile-v2__icon {
  fill: #bbc7d7;
  color: #bbc7d7;
  font-size: 1.6rem;
  height: 1em;
  width: 1.9em;
}
.tile-v2__icon--small {
  font-size: 1.4rem;
}
.tile-v2__icon--square {
  width: 1.5rem;
}
.tile-v2--hidden {
  display: none;
}
.tile-v2--min-height {
  min-height: 37rem;
}
.tile-v2--medium-min-height {
  min-height: 48rem;
}
.tile-v2--transparent {
  background-color: transparent;
}
.tile-v2--skeleton {
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
}
.tile-v2 > :last-child {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.tile-edit-menu {
  margin-left: 0.4rem;
  border-radius: 1rem;
  background-color: #ffffff;
  display: grid;
  gap: 0.5rem;
  transform: translateX(0.6rem);
}
.tile-edit-menu--transparent {
  background-color: transparent;
  transform: translateX(-0.6rem);
}
.tile-edit-menu > * {
  grid-row: 1/2;
}
.tile-edit-menu__button {
  border: none;
  padding: 0.6rem;
}
.tile-edit-menu__button--transparent {
  background-color: transparent;
}
.tile-edit-menu__button--transparent:hover, .tile-edit-menu__button--transparent:focus {
  background-color: #dadee5;
}

.grid-stack-item-content {
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.6s ease-out;
  border-radius: 1rem;
  top: 0;
  left: 1rem;
  right: 1rem;
  bottom: 2rem;
}

.grid-stack-item-content--no-shadow {
  box-shadow: none;
  overflow-y: hidden !important;
  overflow-x: visible !important;
}

.grid-stack .grid-stack-placeholder > .placeholder-content {
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 0 !important;
  border-radius: 1rem;
  border: none;
}

.tile-header {
  padding: 1rem 1.4rem;
  display: flex;
  min-height: 4.6rem;
  align-items: center;
  justify-content: flex-end;
}
.tile-header__title {
  line-height: 1.8;
  font-size: 1.4rem;
  flex: 1 0 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  overflow: unset;
}
.tile-header__title__live-circle {
  margin-right: 1.6rem;
  order: -2;
}
.tile-header__title--medium {
  font-size: 1.6rem;
}
.tile-header__buttons {
  align-items: center;
  display: flex;
  flex: 0 0 0;
  white-space: nowrap;
  text-align: right;
  height: 100%;
  width: 100%;
  justify-content: flex-end;
}
.tile-header__buttons [data-tableattr=page-count] {
  order: 0;
  margin-left: 3rem;
  text-transform: none;
}
.tile-header__buttons [data-tableattr=prev], .tile-header__buttons [data-tableattr=next] {
  display: flex;
  align-items: center;
  order: 0;
}
.tile-header__buttons [data-tableattr=prev].disabled, .tile-header__buttons [data-tableattr=next].disabled {
  opacity: 0.25;
  cursor: default;
}
.tile-header__buttons .tile-header-btn {
  order: 0;
  background-color: #e6eaf2 !important;
  color: #9e9fa0 !important;
  font-size: 1.2rem;
  height: auto;
  margin-left: 1rem;
  padding: 0.5rem 0.9rem;
  position: relative;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out;
  border: none;
}
.tile-header__buttons .tile-header-btn--toggle-sidebar {
  height: 100%;
}
.tile-header__buttons .tile-header-btn__text {
  margin-left: 0.6rem;
}
.tile-header__buttons .tile-header-btn:hover {
  background-color: #d9dfeb !important;
  color: #949596 !important;
}
.tile-header__buttons .add {
  padding-left: 2rem;
}
.tile-header__buttons .remove {
  padding-left: 2.7rem;
}
.tile-header__buttons .add::before,
.tile-header__buttons .remove::before {
  color: #9e9fa0 !important;
  cursor: pointer;
  font-size: 1.6rem;
  height: 100% !important;
  left: 0;
  padding: 0 !important;
  position: absolute;
  text-align: center;
  top: 0.2rem;
}
.tile-header__buttons .add::before {
  content: "+";
  width: 2.2rem !important;
}
.tile-header__buttons .remove::before {
  content: "";
  background-image: url("/svg/icon/delete.svg?c=9e9fa0");
  background-position: center 33%;
  background-repeat: no-repeat;
  background-size: 1.2rem;
  width: 2.9rem !important;
}
.tile-header__buttons a {
  cursor: pointer;
}
.tile-header__buttons .select2-container {
  min-width: 14rem;
}
.tile-header__refresh-container {
  border-radius: 1rem;
  background-color: #ffffff;
}
.tile-header__refresh-container__button {
  border: none;
  padding: 0.6rem;
  margin-left: 1.4rem;
}
.tile-header--hidden {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}
.tile-header--hidden h3 {
  opacity: 0;
}
.tile-header--hidden--editing {
  display: flex;
}
.tile-header--disabled {
  opacity: 0.25 !important;
}
.tile-header .fa-location-pin {
  padding-top: 0.2rem;
  margin-right: 0.6rem;
}

.value-tile {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.value-tile__content {
  display: grid;
  grid-template-rows: max-content max-content;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
.value-tile--small-gap {
  gap: 0.2rem;
}
.value-tile--no-gap {
  gap: 0;
}
.value-tile__main-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.value-tile__sub-content {
  text-align: center;
}
.value-tile__bottom-content {
  padding-top: 0.2rem;
  text-align: center;
}
.value-tile__bottom-content h3 {
  -webkit-transition: color 1s linear;
  -moz-transition: color 1s linear;
  -o-transition: color 1s linear;
  -ms-transition: color 1s linear;
  transition: color 0.1s linear;
}

a.value-tile {
  text-decoration: none;
}

.link-tile {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.link-tile__icon {
  animation: fadeInScale 0.2s ease-in-out;
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  font-size: 5rem;
}

.button-tile {
  font-size: 1.5rem;
  display: flex;
  margin: auto;
}
.button-tile--horizontal svg {
  height: 2rem;
  width: 2rem;
}
.button-tile--horizontal svg,
.button-tile--horizontal i {
  margin-right: 1rem;
}

.table-tile--horizontal-scroll .tile-v2__content {
  overflow-x: auto;
  overflow-y: hidden;
}
.table-tile .wrapper {
  overflow: hidden;
}
.table-tile div.tile-header h2 {
  color: #9e9fa0;
  display: inline-block;
  font-size: 1.1rem;
  margin-right: 1.4rem;
  vertical-align: middle;
}
.table-tile div.tile-header .toggle-switch + h2 {
  margin-left: 1rem;
}
.table-tile div.body {
  display: block;
  max-height: 100%;
  height: 100%;
  padding: 0;
  overflow-x: auto;
}
.table-tile div.body div.table-search {
  box-sizing: border-box;
  display: none;
  height: auto;
  padding: 0.3rem 1.2rem 1.2rem 1.2rem;
  width: 100%;
  z-index: 1;
}
.table-tile div.body div.table-search > input {
  border: 0.1rem solid #bbc7d7;
  border-radius: 1rem;
  box-sizing: border-box;
  font-size: 1.3rem;
  padding: 0.8rem 0.9rem;
  width: 100%;
}
.table-tile div.body div.table-search > input::placeholder {
  color: #bbc7d7;
}
.table-tile td.status {
  padding-left: 4rem;
}
.table-tile td.status--alert {
  padding-left: 1.5rem;
}
.table-tile td.status > span {
  background: #000000;
  background-color: #e6eaf2;
  border: 0.1rem solid #ccc;
  border-radius: 100%;
  box-sizing: border-box;
  height: 1.7rem;
  left: 1.5rem;
  margin-top: -0.9rem;
  position: absolute;
  top: 50%;
  width: 1.7rem;
}
.table-tile td.status > span.open,
.table-tile td.status > span.ok,
.table-tile td.status span.connected {
  background-color: #59cd89;
  border: 0.1rem solid #4fb878;
}
.table-tile td.status > span.closed,
.table-tile td.status > span.fault,
.table-tile td.status span.disconnected,
.table-tile td.status > span.error {
  background-color: #f17270;
  border: 0.1rem solid #d26969;
}
.table-tile td.status > span.expired,
.table-tile td.status > span.partial {
  background-color: #e0b558;
  border: 0.1rem solid #dcab42;
}
.table-tile td.status > span.in_alert {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 0;
  height: 1.8rem;
  left: 1.5rem;
  margin-top: -0.9rem;
  width: 1.8rem;
}
.table-tile td.status > span.standby {
  background-color: transparent;
  background-image: url("/svg/icon/standby.svg?c=D26969");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 0;
  height: 1.8rem;
  left: 1.5rem;
  margin-top: -0.9rem;
  width: 1.8rem;
}
.table-tile td > span.private,
.table-tile td > span.organisation,
.table-tile td > span.public {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.2rem 1.2rem;
  display: inline-block;
  height: 1.2rem;
  padding-left: 1.2rem;
  vertical-align: baseline;
  vertical-align: top;
  width: 1.2rem;
}
.table-tile td > span.private {
  background-image: url("/svg/icon/security.svg?c=0171a9");
}
.table-tile td > span.organisation {
  background-image: url("/svg/icon/organisation.svg?c=0171a9");
  background-size: 1.4rem 1.4rem;
  height: 1.4rem;
  width: 1.4rem;
}
.table-tile td > span.public {
  background-image: url("/svg/icon/globe.svg?c=0171a9");
  background-size: 1.3rem 1.3rem;
  height: 1.3rem;
  width: 1.3rem;
}
.table-tile td span.link {
  background-color: transparent;
  background-image: url("/svg/icon/link.svg?c=0171a9");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline;
  height: 1.2rem;
  padding-left: 2rem;
  vertical-align: baseline;
  width: 1.2rem;
  font-size: 1rem;
}
.table-tile.init-loader table tbody tr.init {
  display: none;
}
.table-tile table tr td span.selectable {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 3.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-tile table tr td span.selectable label {
  cursor: pointer;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-tile table tr td span.selectable label > input[type=checkbox] {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.table-tile table tr td span.selectable label > span {
  display: inline-block;
  background-color: #e6eaf2;
  border: 0.1rem solid #dadee5;
  border-radius: 0.4rem;
  box-sizing: border-box;
  cursor: pointer;
  width: 1.4rem;
  height: 1.4rem;
  transition: 0.15s background-color;
}
.table-tile table tr td span.selectable label:hover > span {
  background-color: #d5dce9;
}
.table-tile table tr td span.selectable label input:checked ~ span {
  background-color: hsl(197, 99%, 33%);
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  border: 0.1rem solid hsl(197, 99%, 33%);
  border: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
}
.table-tile table tr td span.selectable label > span:after {
  content: "";
  display: none;
  position: absolute;
}
.table-tile table tr td span.selectable label > input:checked ~ span:after {
  display: block;
}
.table-tile table tr td span.selectable label > span:after {
  background-image: url("/svg/icon/checkbox.svg?c=ffffff");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.table-tile table thead.hidden {
  display: none;
}
.table-tile table tbody tr.init td,
.table-tile table tbody tr.empty td {
  border-bottom: 0;
  padding: 2.5rem 0;
  text-align: center;
  width: 100%;
  background-color: transparent;
}
.table-tile table.loading tbody tr.init td, .table-tile table.loading tbody tr.empty td {
  display: none;
}
.table-tile table th,
.table-tile table td {
  border-bottom: 0.1rem solid #e6eaf2;
  font-size: 1.2rem;
  position: relative;
  padding: 1.3rem 1.5rem 1.4rem 1.5rem;
}
.table-tile table td.no-border-bottom {
  border-bottom: none;
}
.table-tile table tr:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.table-tile table td {
  border-top: 0.1rem solid #ffffff;
  white-space: pre-wrap;
}
.table-tile table tbody:not(.tablev2__body--reversed) tr:not(#no-results):nth-child(even) td,
.table-tile table tbody.tablev2__body--reversed tr:not(#no-results):nth-child(odd) td {
  background: #f0f7fa;
  background: var(--colorTertiary, #f0f7fa);
  border-top-color: #f0f7fa;
  border-top-color: var(--colorTertiary, #f0f7fa);
}
.table-tile table tbody:not(.tablev2__body--reversed) tr:not(#no-results):nth-child(even of .tablev2__expandable-row) td {
  background: #f0f7fa;
  background: var(--colorTertiary, #f0f7fa);
  border-top-color: #f0f7fa;
  border-top-color: var(--colorTertiary, #f0f7fa);
}
.table-tile table col[data-visible=false],
.table-tile table th[data-visible=false],
.table-tile table td[data-visible=false] {
  display: none;
}
.table-tile table th {
  background-color: #f0f7fa;
  background-color: var(--colorTertiary, #f0f7fa);
  border-bottom: 0.1rem solid #e6eaf2;
  color: #9e9fa0;
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  text-transform: uppercase;
  white-space: pre-wrap;
  text-align: left;
}
.table-tile table th.sortable {
  cursor: pointer;
}
.table-tile table th.sort span {
  position: relative;
}
.table-tile table th.sort span::before {
  border-color: transparent transparent #ccc transparent;
  border-style: solid;
  border-width: 0 0.3rem 0.4rem 0.3rem;
  content: "";
  height: 0;
  left: 0.5rem;
  position: absolute;
  top: calc(50% - 0.2rem);
  width: 0;
}
.table-tile table th.sort[data-sort=desc] span::before {
  border-color: #9e9fa0 transparent transparent transparent;
  border-width: 0.4rem 0.3rem 0 0.3rem;
}
.table-tile table tr td.clickable,
.table-tile table tr.clickable {
  cursor: pointer;
}
.table-tile table tr td.highlight {
  color: hsl(197, 99%, 33%);
  color: var(--colorTextHighlight, hsl(197, 99%, 33%));
  font-weight: 600;
}
.table-tile table tr td.header-styling .tablev2__cell-text {
  color: #9e9fa0;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: uppercase;
}
.table-tile table tr td.header-styling ~ .tablev2__cell a {
  color: inherit;
}
.table-tile table tr td.align-center,
.table-tile table tr th.align-center {
  text-align: center;
}
.table-tile table tr td.align-left,
.table-tile table tr th.align-left {
  text-align: left;
}
.table-tile table tr.inactive td {
  color: #9e9fa0;
}
.table-tile table tr td.expandable {
  padding-left: 4rem;
}
.table-tile table tr[data-depth="1"] td.expandable {
  padding-left: 6.2rem;
}
.table-tile table tr[data-depth="2"] td.expandable {
  padding-left: 7.8rem;
}
.table-tile table tr[data-depth="3"] td.expandable {
  padding-left: 10.6rem;
}
.table-tile table tr[data-depth="4"] td.expandable {
  padding-left: 12.8rem;
}
.table-tile table tr[data-depth="5"] td.expandable {
  padding-left: 15rem;
}
.table-tile table tr[data-depth="6"] td.expandable {
  padding-left: 17.2rem;
}
.table-tile table tr[data-depth="7"] td.expandable {
  padding-left: 19.4rem;
}
.table-tile table tr td.selectable {
  padding-left: 5.4rem;
}
.table-tile table tr td.expandable.selectable {
  padding-left: 7.3rem;
}
.table-tile table tr[data-depth="1"] td.selectable {
  padding-left: 10rem;
}
.table-tile table tr[data-depth="2"] td.selectable {
  padding-left: 12.2rem;
}
.table-tile table tr[data-depth="3"] td.selectable {
  padding-left: 14.4rem;
}
.table-tile table tr[data-depth="4"] td.selectable {
  padding-left: 16.6rem;
}
.table-tile table tr[data-depth="5"] td.selectable {
  padding-left: 18.8rem;
}
.table-tile table tr[data-depth="6"] td.selectable {
  padding-left: 21rem;
}
.table-tile table tr[data-depth="7"] td.selectable {
  padding-left: 23.2rem;
}
.table-tile table tr td span.expand {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  left: 0;
  min-width: 4rem;
  padding: 0.1rem 0 0.1rem 0.1rem;
  position: absolute;
  text-align: center;
  top: 0;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-tile table tr td.selectable span.expand {
  left: 3.4rem;
}
.table-tile table tr td span.expand[data-children="0"]::before {
  border-left: 0.1rem solid hsl(197, 99%, 33%);
  border-left: 0.1rem solid var(--colorSecondary, hsl(197, 99%, 33%));
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  content: "-";
  font-size: 1.1rem;
  height: 1.1rem;
  left: 2.3rem;
  line-height: 1rem;
  margin-top: -0.6rem;
  position: absolute;
  text-align: left;
  top: 50%;
  width: 1rem;
}
.table-tile table tr[data-depth="1"] td span.expand {
  margin-left: 2rem;
}
.table-tile table tr[data-depth="2"] td span.expand {
  margin-left: 4rem;
}
.table-tile table tr[data-depth="3"] td span.expand {
  margin-left: 6rem;
}
.table-tile table tr[data-depth="4"] td span.expand {
  margin-left: 8rem;
}
.table-tile table tr[data-depth="5"] td span.expand {
  margin-left: 10rem;
}
.table-tile table tr[data-depth="6"] td span.expand {
  margin-left: 12rem;
}
.table-tile table tr[data-depth="7"] td span.expand {
  margin-left: 14rem;
}
.table-tile table tr[data-depth="8"] td span.expand {
  margin-left: 16rem;
}
.table-tile table tr.selected td span.expand:not([data-children="0"])::after {
  background-image: url("/public/images/icons/ffffff/expand.svg");
}
.table-tile table tr.open td span.expand:not([data-children="0"])::after {
  background-image: url("/public/images/icons/0171a9/collapse.svg");
}
.table-tile table tr.open.selected td span.expand:not([data-children="0"])::after {
  background-image: url("/public/images/icons/ffffff/collapse.svg");
}
.table-tile table tbody.main tr:not(#no-results):hover td {
  border-bottom-color: hsl(197, 100%, 47%);
  border-bottom-color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-top-color: hsl(197, 100%, 47%);
  border-top-color: var(--colorPrimary, hsl(197, 100%, 47%));
}
.table-tile table tr th.firestarter,
.table-tile table tr td.firestarter {
  padding: 0 !important;
  position: relative;
  width: 0 !important;
}
.table-tile table tbody.main tr:not(#no-results):hover td:first-child::before {
  border-left: 0.1rem solid hsl(197, 100%, 47%) !important;
  border-left: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;
}
.table-tile table tbody.main tr.tablev2__row--selected:hover td:first-child::before {
  border-left: 0rem solid hsl(19, 97%, 64%) !important;
  border-left: 0rem solid var(--colorHighlight, hsl(19, 97%, 64%)) !important;
}
.table-tile table tbody.main tr td:last-child {
  border-right: 0.1rem solid transparent;
}
.table-tile table tbody.main tr:not(#no-results):hover td:last-child {
  border-right: 0.1rem solid hsl(197, 100%, 47%);
  border-right: 0.1rem solid var(--colorPrimary, hsl(197, 100%, 47%));
}
.table-tile table tbody.main tr.selected:hover td:first-child::before {
  border-left-color: transparent !important;
}
.table-tile table.init thead, .table-tile table.empty thead, .table-tile table.init tbody.main, .table-tile table:not(.init) tbody tr.init, .table-tile table:not(.empty) tbody tr.empty {
  display: none;
}
.table-tile table.no-bottom-border tbody.tablev2__body--reversed tr:not(#no-results):nth-child(even):last-child td {
  border-bottom: 0;
}
.table-tile.loading div.body::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 3.8rem;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.table-tile:not(.loading) table.loading::before {
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  background-position: 50% 10rem;
  background-repeat: no-repeat;
  background-size: 4rem;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.table-tile.load-from-top:not(.loading) table.loading:not(.init)::before {
  background-position: top10rem center;
}

.search-input-tile {
  padding-bottom: 0;
  background-color: unset;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.grid-stack .search-input-tile div[data-tile=hollow] li {
  margin-top: 0.9rem;
}
.search-input-tile__input-container {
  margin-bottom: 0.9rem;
}
.grid-stack .search-input-tile__input-container {
  margin-bottom: 0;
}
.search-input-tile__input-container ~ .tile-v2 {
  margin-top: 0.9rem;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
}

.status-tile__icon {
  font-size: 4rem;
  min-width: 4rem;
  min-height: 4rem;
  text-align: center;
  color: #ccc;
}
.status-tile__icon--small {
  font-size: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
}
.status-tile__icon--green {
  color: #59cd89;
}
.status-tile__icon--orange {
  color: #e0b558;
}
.status-tile__icon--red {
  color: #f17270;
}
.status-tile__icon--blue {
  color: #00acf0;
}

.alert-state-tile__icon {
  font-size: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
}

.user-type-tile__icon {
  font-size: 4rem;
  min-width: 4rem;
  min-height: 4rem;
  text-align: center;
}

.schedule {
  display: grid;
  width: 100%;
}
.schedule__container {
  text-align: center;
  padding: 0 !important;
  border-top: 0.1rem solid #e6eaf2;
}
.schedule__container--empty {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 0 !important;
}
.schedule__header {
  display: flex;
  align-items: center;
  z-index: 2;
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  text-align: left;
}
.schedule__header-text {
  padding: 0.5rem 1.5rem;
  width: 100%;
  display: flex;
  align-items: center;
}
.schedule__time-header {
  color: #ccc;
  grid-row: 1/span 1;
  z-index: 2;
  position: relative;
  margin-bottom: 0.8rem;
}
@media only screen and (max-width: 46.85em) {
  .schedule__time-header:nth-child(even) {
    display: none;
  }
}
.schedule__time-header > h6 {
  color: #9e9fa0;
  transform: translateX(-50%);
  position: absolute;
  bottom: 0;
}
.schedule__time {
  grid-column: 1/2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.schedule__day {
  background-color: #e6eaf2;
  grid-row: header-start/header-end;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #ccc;
  text-transform: uppercase;
  font-weight: 400;
  padding: 1.3rem 1.5rem 1.4rem 1.5rem;
  border-top: 0.1rem solid #e6eaf2;
}
.schedule__vertical-line {
  background-color: #e6eaf2;
  z-index: 2;
  min-width: 0;
  width: 0.1rem;
  margin-right: auto;
  max-width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 160rem) {
  .schedule__vertical-line--hourly {
    background-color: transparent;
  }
}
.schedule__horizontal-line {
  z-index: 1;
  border-top: 0.1rem solid #dadee5;
}
.schedule__horizontal-line--header {
  grid-column: 1/-1;
  grid-row: 1/span 1;
  border-top: 0rem solid #4c5259;
}
.schedule__horizontal-line:nth-of-type(even) {
  background-color: #eef7fa;
}
.schedule__sub-line {
  grid-column: times-end/days-end;
  border-bottom: 0.1rem solid #4c5259;
  opacity: 50%;
}
.schedule__combined {
  cursor: pointer;
  /* grid-row: 2/-1; */
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  opacity: 60%;
  z-index: 2;
  margin: 0.9rem 0;
  border-radius: 1rem;
  transition: all 0.4s ease-out;
}
.schedule__combined:hover, .schedule__combined:focus {
  opacity: 100%;
}

/* Schedule Modal */
.schedule-modal__form {
  margin: 2rem 1.5rem 0 1.5rem;
}

.single-value-tile--no-data .no-results__icon-container {
  margin-top: 2.5rem;
}
.single-value-tile__heading {
  color: #4c5259;
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 300;
  text-align: center;
}
.single-value-tile__heading--only {
  font-size: 3.8rem;
  white-space: nowrap;
}
.single-value-tile__heading--ellipsis {
  max-width: 100%;
}
.single-value-tile__heading--ellipsis:has(span) {
  display: grid;
  gap: 0.5rem;
}
.single-value-tile__heading--ellipsis:has(span) span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto !important;
}
.single-value-tile__heading--ellipsis:not(:has(span)) {
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto !important;
}
.single-value-tile__heading--ellipsis .single-value-tile__inline-value {
  font-size: 1.2rem;
  font-weight: 400;
  color: #9e9fa0;
}
.single-value-tile__sub-heading {
  font-size: 1.2rem;
  font-weight: 400;
  color: #9e9fa0;
}
.single-value-tile__noTransform {
  text-transform: none;
}
.single-value-tile__inline-value {
  font-size: 0.7em;
  display: inline-block;
}
.single-value-tile__inline-value:first-child {
  margin-right: 0.5rem;
}
.single-value-tile__inline-value:last-child {
  margin-left: 0.5rem;
}
.single-value-tile__bottom-heading {
  font-weight: 400;
  color: #4c5259;
}
.single-value-tile__bottom-heading__icon {
  display: inline-block;
  height: 1.7rem;
  margin-right: 0.7rem;
  vertical-align: bottom;
  width: 1.7rem;
}

.date-time-tile {
  display: grid;
  align-content: center;
  height: 100%;
  gap: 1rem;
}
.date-time-tile p {
  text-align: center;
  color: #4a4a4a;
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 1;
}
.date-time-tile__date {
  font-size: 2rem;
}
.date-time-tile__time {
  font-size: 5rem;
}

.device-signal-strength-tile > li {
  background-color: #e6eaf2;
  border: 0.1rem solid #ccc;
  border-radius: 0.2rem;
  box-sizing: border-box;
  display: inline-block;
  height: 0.6rem;
  margin: 0 0.2rem;
  max-width: 0.9rem;
  width: 0.9rem;
}
.device-signal-strength-tile > li.active {
  background-color: #acccf1;
  border-color: #009ed5;
}
.device-signal-strength-tile > li:nth-child(2) {
  height: 1.2rem;
}
.device-signal-strength-tile > li:nth-child(3) {
  height: 1.8rem;
}
.device-signal-strength-tile > li:nth-child(4) {
  height: 2.4rem;
}
.device-signal-strength-tile > li:nth-child(5) {
  height: 3rem;
}

.map-tile__controls {
  margin: 0.9rem;
  display: flex;
}
.map-tile__controls__gm-style-button {
  background: none padding-box rgb(255, 255, 255);
  display: table-cell;
  border: 0px;
  margin: 0px;
  padding: 0px 17px;
  text-transform: none;
  appearance: none;
  position: relative;
  cursor: pointer;
  user-select: none;
  direction: ltr;
  overflow: hidden;
  text-align: center;
  height: 36px;
  vertical-align: middle;
  color: rgb(86, 86, 86);
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  min-width: 35px;
  display: flex;
  align-items: center;
}
.map-tile__controls__gm-style-button__icon-container {
  display: flex;
  margin-right: 0.7rem;
}
.map-tile__controls__gm-style-button--selected {
  font-weight: 500;
  color: rgb(0, 0, 0);
}
.map-tile__controls__gm-style-button--selected svg {
  stroke-width: 0.8;
}
.map-tile__controls__gm-style-button:hover {
  background: none padding-box rgb(235, 235, 235);
  color: rgb(0, 0, 0);
}
.map-tile .tile__content {
  vertical-align: baseline;
  padding: 0;
}
.map-tile__map-container {
  position: absolute;
  height: 100%;
  width: 100%;
  outline: none !important;
}
.map-tile__map-container--disabled {
  opacity: 50%;
  pointer-events: none;
}
.map-tile__map-container .gm-style-iw {
  flex-direction: row-reverse;
  padding: 1.6rem !important;
}
.map-tile__map-container .gm-style-iw .gm-style-iw-d {
  overflow: auto !important;
}
.map-tile__map-container .gm-style-iw button {
  top: 0;
  right: 0;
  height: 30px !important;
  width: 30px !important;
}
.map-tile__map-container .gm-style-iw button span {
  margin-top: 0 !important;
  margin-right: 0 !important;
}
.map-tile .gmap-marker-meta {
  display: block;
  position: absolute;
  height: 1rem;
  width: 1rem;
}
.map-tile .gmap-marker-meta.background-color {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
}
.map-tile .gmap-marker-meta.border-color {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
}
.map-tile .gmap-marker-meta.color {
  background-color: #ffffff;
}
.map-tile .leaflet-container {
  background: #ffffff;
}
.map-tile .leaflet-container .leaflet-info-box {
  display: grid;
  grid-template-columns: minmax(16.5rem, auto) 1fr; /* 1st column: min 200px, auto if larger; 2nd column: fills remaining space */
  grid-gap: 0.2rem;
}
.map-tile .leaflet-container .leaflet-div-icon--override {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}
.map-tile .leaflet-container .leaflet-div-icon--override img {
  height: 4rem;
}

.device-historical-graph-tile {
  margin-bottom: 7.2rem;
}
.device-historical-graph-tile .graph-tile {
  height: auto;
}
.device-historical-graph-tile--dashboard {
  margin-bottom: 0;
  height: 100%;
}
.device-historical-graph-tile--dashboard .graph-tile {
  height: 100%;
  width: 100%;
}
.device-historical-graph-tile__graph-container {
  display: block;
  width: 100%;
}
.device-historical-graph-tile .tile-v2__content {
  position: relative;
  padding-bottom: 0;
}
.device-historical-graph-tile .tile-v2__content div.sidebar {
  border: 0 solid #000000;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  padding: 1rem;
  position: absolute;
  right: 0;
  text-align: left;
  top: 0;
  width: 25rem;
}
.device-historical-graph-tile .tile-v2__content div.sidebar > div {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: 23rem;
  padding: 1rem 1rem 0 1rem;
  text-align: left;
  width: 100%;
}
.device-historical-graph-tile .tile-v2__content div.sidebar > a.back {
  background-image: url("/svg/icon/back.svg?c=999999");
  background-position: left 0.3rem center;
  background-repeat: no-repeat;
  background-size: 1.4rem;
  color: #9e9fa0;
  cursor: pointer;
  display: block;
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
  padding-left: 2.2rem;
  text-align: left;
}
.device-historical-graph-tile .tile-v2__content div.sidebar > label {
  box-sizing: border-box;
  color: #4c5259;
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 0.7rem;
  padding-left: 0.3rem;
  text-align: left;
}
.device-historical-graph-tile .tile-v2__content div.sidebar > input {
  width: 100%;
}
.device-historical-graph-tile .tile-v2__content div.sidebar > div > h2 {
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 30%;
  min-width: 7rem;
}
.device-historical-graph-tile .tile-v2__content div.sidebar > div > h6 {
  box-sizing: border-box;
  display: inline-block;
  flex: 1 0 auto;
  text-align: right;
}
.device-historical-graph-tile .tile-v2__content .graph-config-options__container {
  width: 100%;
}
.device-historical-graph-tile .tile-v2__content .graph-config-options__shared-text {
  align-items: center;
}
.device-historical-graph-tile .tile-v2__content .graph-config-options__shared-text h2 {
  text-transform: none;
}
.device-historical-graph-tile .tile-v2__content .graph-config-options__buttons {
  padding: 0 1rem;
  margin: 1.4rem 0 1.4rem auto;
  display: flex;
  justify-content: flex-end;
}
.device-historical-graph-tile .tile-v2__content .graph-config-options__buttons button {
  margin-left: 1.5rem;
}
.device-historical-graph-tile .tile-v2__content .graph-config-options__buttons button:first-of-type {
  margin-left: 0;
  margin-right: auto;
}
.device-historical-graph-tile .highcharts-legend-item.highcharts-legend-item-hidden {
  display: none;
}

.device-historical-table-tile {
  height: auto;
  margin-bottom: 7.2rem;
}
.device-historical-table-tile .tile-header__buttons {
  flex: 0 0 100%;
}

.image-tile {
  height: 100%;
  width: 100%;
}
.image-tile__content {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.image-tile__content--cover {
  background-size: cover;
}

.smart-valve-tile__status-indicator--text {
  margin-left: 2.5rem;
}
.smart-valve-tile--toggle-text__tab, .smart-valve-tile--toggle-text__glider {
  height: 100%;
  width: 10rem;
}
.smart-valve-tile--toggle-text__tab--narrow, .smart-valve-tile--toggle-text__glider--narrow {
  width: 3rem;
}

.network-node-activity-tile .tile-header__buttons {
  flex: 0 0 auto;
}
.network-node-activity-tile .tile-header__buttons .input__inline-label span {
  margin-right: 0.8rem;
}
.network-node-activity-tile__message-type__icon {
  font-size: 1.6rem;
  margin-right: 0.6rem;
  fill: #bbc7d7;
  color: #bbc7d7;
}
.network-node-activity-tile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 3rem;
  padding: 1rem 3rem 3rem 3rem;
  margin-bottom: 0.6rem;
}
.network-node-activity-tile__grid:has(> *:nth-child(4)) {
  grid-template-rows: 1fr 1fr;
}
.network-node-activity-tile__grid__item {
  position: relative;
  max-height: 16.8rem;
}
.network-node-activity-tile__grid__item .codeblock__container {
  height: calc(100% - 2rem);
  outline: 1px solid #e6eaf2;
  border-left: 0.8rem solid #e6eaf2;
  overflow-y: auto;
}
.network-node-activity-tile__grid__item .codeblock__copy {
  top: 3rem;
}
.network-node-activity-tile__grid__item:hover .codeblock__copy {
  opacity: 100%;
}
.network-node-activity-tile__grid__item--span-2-rows {
  grid-row: span 2;
  max-height: 36rem;
}
.network-node-activity-tile__grid__item--no-max-height {
  max-height: none;
  min-width: 40rem;
}
@media only screen and (max-width: 46.85em) {
  .network-node-activity-tile__grid {
    grid-auto-rows: unset;
    margin-bottom: 1rem;
    grid-template-columns: repeat(1, 1fr);
    padding: 1.3rem 1.5rem 1.4rem 1.5rem;
  }
  .network-node-activity-tile__grid__item {
    grid-row: auto;
    grid-column: auto;
  }
}

.metric-pie-chart-tile {
  height: 100%;
}
.metric-pie-chart-tile svg {
  pointer-events: all;
}

.graph-tile {
  height: 100%;
  display: grid;
  text-align: center;
  position: relative;
}
.graph-tile__graph-container {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  position: relative;
}
.graph-tile__graph-container.partwidth {
  width: calc(100% - 25rem);
}
.graph-tile__graph-container__center-content {
  display: table;
  height: 100%;
  position: absolute;
  top: -0.5rem;
  width: 100%;
  pointer-events: none;
  display: flex;
}
.graph-tile__graph-container__center-content--text {
  display: flex;
  flex-direction: column;
  margin: auto;
  flex: 0 1 40%;
  align-items: center;
}
.graph-tile__graph-container__center-content--text h2 {
  padding: 0 2rem;
}
.graph-tile__graph-container__bottom-content .target {
  border-top: 0.1rem solid #e6eaf2;
  margin-top: 2rem;
  padding-top: 2rem;
}
.graph-tile__graph-container svg {
  pointer-events: visible !important;
}
.graph-tile__no-data {
  left: 0;
  margin-top: -1rem;
  top: 50%;
  width: 100%;
  container-type: size;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: static;
}
.graph-tile__time-selector {
  display: inline-block;
  font-size: 0;
  margin-right: 0.7rem;
  vertical-align: bottom;
}
.graph-tile__time-selector.disabled {
  opacity: 0.7;
  pointer-events: none;
}
.graph-tile__time-selector li {
  border: 0.1rem solid #bbc7d7;
  border-radius: 1rem;
  color: #9e9fa0;
  display: inline-block;
  font-size: 1.3rem;
  margin-left: 1rem;
}
.graph-tile__time-selector li:not(.graph-tile__time-selector--custom) {
  padding: 0.3rem 0.6rem;
}
.graph-tile__time-selector li:hover, .graph-tile__time-selector li.selected {
  background-color: #e6eaf2;
  color: #9e9fa0;
  cursor: pointer;
}
.graph-tile__time-selector li > label {
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 0.3rem 0.6rem;
  position: relative;
  width: 100%;
}
.graph-tile__time-selector li > label > input {
  border: 0;
  cursor: pointer;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.graph-tile__time-selector--custom {
  padding: 0;
}
.graph-tile__gauge-text {
  text-align: center;
}
.graph-tile__gauge-text h1 {
  font-size: 2.2rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.graph-tile__gauge-text h2 {
  font-size: 2.2rem;
  color: #4c5259;
}
.graph-tile__gauge-text--small h1 {
  font-size: 1.7rem;
}
.graph-tile__gauge-text--smaller h1 {
  margin-bottom: 0;
  font-size: 1.2rem;
}

.heatmap-tile .highcharts-axis.highcharts-yaxis .highcharts-tick:nth-last-child(2) {
  display: none;
}

.fuel-calculator-gauge-tile {
  overflow: hidden;
  position: relative;
  width: 100%;
  box-sizing: initial;
  height: 100%;
  position: relative !important;
  text-align: center;
  vertical-align: middle;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.fuel-calculator-gauge-tile__wrapper {
  display: table-cell;
  vertical-align: middle;
}
.fuel-calculator-gauge-tile__wrapper h1.value {
  font-size: 2.5rem;
}
.fuel-calculator-gauge-tile__label {
  display: table;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.fuel-calculator-gauge-tile__label__status {
  padding-top: 1rem;
  transition: 0.5s color;
}
.fuel-calculator-gauge-tile__label__status.red {
  color: #f17270;
}
.fuel-calculator-gauge-tile__label__status.amber {
  color: #e0b558;
}
.fuel-calculator-gauge-tile__label__status.green {
  color: #59cd89;
}
.fuel-calculator-gauge-tile__increment {
  height: 100%;
  position: relative;
}
.fuel-calculator-gauge-tile__increment > .dial {
  fill: rgba(0, 0, 0, 0);
  stroke: #e6eaf2;
  stroke-linecap: round;
  stroke-width: 4;
}
.fuel-calculator-gauge-tile__increment > .value {
  fill: rgba(0, 0, 0, 0);
  stroke: rgb(47, 227, 255);
  stroke-linecap: round;
  /*stroke-dasharray: 15.8 1;*/
  stroke-width: 4;
}
.fuel-calculator-gauge-tile__increment > .value-text {
  fill: #000000;
  font-family: sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
}

.analyticsTargetGauge .target h3 {
  display: inline-block;
  font-weight: 400;
}

.analyticsTargetGauge .target span {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.7rem;
  margin-right: 0.7rem;
  vertical-align: bottom;
  width: 1.7rem;
}

.eastron {
  font-size: 1.6rem;
  padding: 1.5rem 2rem;
  color: #4c5259;
}
.eastron__content {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  height: 100%;
  max-width: 30rem;
  margin: auto;
  gap: 1.5rem;
}
.eastron__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 20px;
}
.eastron__header__left {
  flex-grow: 1;
  height: 15px;
  background: url("/public/images/customer/Eastron-Europe_logo.png") no-repeat left center;
  background-size: contain;
}
.eastron__header__right {
  font-size: 1.1rem;
}
.eastron__main {
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid #f6f6f6;
  padding: 1.25rem 1.5rem;
}
.eastron th,
.eastron td {
  font-family: "Roboto Mono", "Courier New", Courier, monospace;
  font-size: 1.4rem;
  padding: 0 1.5rem 0.75rem 0;
}
.eastron th span,
.eastron td span {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 1.1rem;
}
.eastron th {
  font-weight: normal;
  text-align: left;
  position: relative;
  color: rgba(5, 66, 135, 0.8666666667);
}
.eastron td:nth-child(1) {
  color: rgba(5, 66, 135, 0.8666666667);
}
.eastron td:nth-child(2) {
  color: rgba(5, 66, 135, 0.7058823529);
  text-align: right;
}
.eastron td:nth-child(3) {
  color: rgba(5, 66, 135, 0.5764705882);
  text-align: right;
}
.eastron td:last-child {
  padding-right: 0;
}
.eastron thead {
  display: none;
}
.eastron table {
  width: 100%;
}
.eastron table:not(:last-child) {
  border-bottom: 1px solid #ededed;
  margin-bottom: 0.75rem;
}
.eastron table:nth-child(2) th,
.eastron table:nth-child(2) td {
  color: #4c5259;
}
.eastron table:nth-child(2) tr:last-child th,
.eastron table:nth-child(2) tr:last-child td {
  padding-bottom: 0;
}
.eastron abbr {
  text-decoration: none;
}
.eastron .fai {
  font-weight: normal;
  position: absolute;
  top: 0;
  left: 0;
}
.eastron--single-phase .eastron__content {
  max-width: 20rem;
}
.eastron--single-phase .eastron__main {
  flex-direction: column;
  gap: 1rem;
}
.eastron--single-phase .eastron__main th + td {
  text-align: left;
}
.eastron--single-phase .eastron__main ul {
  flex-direction: row;
  justify-content: flex-start;
  gap: 6%;
}
.eastron--single-phase .eastron__main li {
  width: 22%;
}
.eastron--single-phase .eastron__main svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  font-size: 1.4rem;
  margin-top: 0.1rem;
}

.hiu-temperature-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  line-height: 1;
}
.hiu-temperature-tile__controls {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
  font-size: 4.3rem;
  font-weight: 300;
  color: #4c5259;
  /* smaller gap for medium size screens where the tile could be very narrow */
}
@media only screen and (max-width: 56.25em) {
  .hiu-temperature-tile__controls {
    gap: 1.5rem;
  }
}
@media only screen and (max-width: 75em) {
  .hiu-temperature-tile__controls {
    gap: 0.5rem;
  }
}
.hiu-temperature-tile__controls span {
  line-height: 1.2;
}
.hiu-temperature-tile__controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #9e9fa0;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  background: #f4f4f4;
  border: 2px solid #ccc;
  line-height: 1;
  margin-bottom: 0.3rem;
  padding-bottom: 0.2rem;
}
.hiu-temperature-tile__controls__set {
  text-align: center;
  width: 1.21em;
}
.hiu-temperature-tile__controls__set:focus {
  outline: none;
}
.hiu-temperature-tile__setContainer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.custom-map-tile .tile-v2__content {
  overflow: hidden;
}
.custom-map-tile img {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}
.custom-map-tile .marker-edit-menu {
  margin-right: -6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.custom-map-tile .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  cursor: default;
  transition: opacity 0.25s ease-in-out;
}
.custom-map-tile .overlay__content {
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
}
.custom-map-tile .overlay__content p {
  font-size: 2.2rem;
}
.custom-map-tile .leaflet-container {
  background: inherit;
  z-index: 1;
}
.custom-map-tile .leaflet-bottom .leaflet-control {
  margin-bottom: 24px;
}
.custom-map-tile .leaflet-touch .leaflet-bar {
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  border: 0;
  border-radius: 0;
}
.custom-map-tile .leaflet-touch .leaflet-bar a {
  width: 3.6rem;
  height: 3.6rem;
  border: 0;
  position: relative;
  border-radius: 0 !important;
}
.custom-map-tile .leaflet-touch .leaflet-bar a.leaflet-disabled {
  color: #d1d1d1;
  background-color: #fff;
}
.custom-map-tile .leaflet-touch .leaflet-control-zoom-in,
.custom-map-tile .leaflet-touch .leaflet-control-zoom-out {
  font-size: 3.5rem;
  color: #666666;
}
.custom-map-tile .leaflet-touch .leaflet-control-zoom-in::after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: 2.7rem;
  height: 1px;
  margin: 0px 5px;
  background-color: #e6e6e6;
}
.custom-map-tile .leaflet-popup {
  max-width: 80vw;
}
.custom-map-tile .leaflet-popup-content {
  font-size: 1.3rem;
  margin-right: 20px;
}
.custom-map-tile .leaflet-popup-content a {
  color: #071822;
  text-decoration: none;
}
.custom-map-tile .leaflet-popup-content a:hover {
  text-decoration: underline;
}
.custom-map-tile .leaflet-popup-content h3,
.custom-map-tile .leaflet-popup-content .btnv2--block {
  min-width: 16rem;
}

/* don't show the overlay, add marker button and marker popup edit buttons if we're on non-edit mode */
.grid-stack-item.ui-draggable-disabled .custom-map-tile .overlay,
.grid-stack-item.ui-draggable-disabled .custom-map-tile button[name=addMarker],
.grid-stack-item.ui-draggable-disabled .custom-map-tile .marker-edit-menu,
.grid-stack-item.ui-draggable-disabled .custom-map-tile .configure {
  display: none;
}

.grid-stack-item:not(.ui-draggable-disabled) .custom-map-tile .leaflet-container:not(.dragging) {
  cursor: crosshair;
}
.grid-stack-item:not(.ui-draggable-disabled) .custom-map-tile .no-data {
  display: none;
}

.marker {
  position: relative;
}
.marker:focus, .marker:active {
  outline: none;
}
.marker svg {
  /* this is needed for the shadow */
  overflow: visible;
}
.marker .icon-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.marker-attributes {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1rem;
}
.marker-attributes dt {
  color: #000000;
}
.marker-attributes dd {
  color: #4c5259;
}

.react-flow .react-flow__attribution a {
  font-size: 5px;
}
.react-flow__node .handles {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  visibility: hidden;
}
.react-flow__node .handles.source {
  right: 0;
  top: 0;
  height: 100%;
  transform: translate(50%, 0);
}
.react-flow__node .handles.target {
  left: 0;
  top: 0;
  height: 100%;
  transform: translate(-50%, 0);
}
.react-flow__node .handles .react-flow__handle {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
}
.react-flow__node__container {
  display: flex;
  align-items: center;
  padding: 1.6rem;
  border: 1px solid #ddd;
  border-radius: 1rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background-color: white;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  min-width: 13rem;
}
.react-flow__node__value {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
}
.react-flow__node__value svg {
  fill: rgba(44, 62, 80, 0.9);
}
.react-flow__node__value__text {
  font-size: 1.8rem;
  color: #333;
  text-align: center;
  width: 100%;
}
.react-flow__node__value__text--italic {
  font-weight: 500;
  color: #747e89;
  font-style: italic;
}
.react-flow__node-background {
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: 1rem;
}
.react-flow__node-background__label {
  position: absolute;
  font-size: 1.6rem;
  color: #333;
}
.react-flow__node-background__label--large {
  font-size: 2rem;
}
.react-flow__node-background__label img {
  width: 12rem;
  height: auto;
}
.react-flow__node-background__label--bold {
  font-weight: 600;
}
.react-flow__node-background__label.top-left {
  top: 2rem;
  left: 2rem;
}
.react-flow__node-background__label.bottom-left {
  bottom: 2rem;
  left: 2rem;
}
.react-flow__node-background__label.top-right {
  top: 2rem;
  right: 2rem;
}
.react-flow__node-background__box {
  display: flex;
  align-items: center;
  border: 1px solid #9e9fa0;
  border-radius: 1rem;
  background-color: white;
  justify-content: center;
  padding: 1.2rem;
  gap: 1rem;
}
.react-flow__node-anchor {
  width: 2rem;
  height: 2rem;
}
.react-flow__node-anchor > div {
  display: flex;
  align-items: center;
  gap: 1rem; /* 1rem gap between label and node */
  justify-content: flex-end;
}
.react-flow__node-anchor__label {
  font-size: 1.6rem;
  margin-right: 1rem;
}
.react-flow__node-custom__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 1.8rem;
}
.react-flow__node-value .react-flow__node__container {
  gap: 1rem;
}

/* ------ BODY ------- */
#body {
  grid-area: body;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  font-size: 0;
  box-sizing: border-box;
}

.body--hidden {
  display: none;
}

.page-body__loader {
  z-index: 1;
  position: relative;
  grid-area: body;
  padding-top: 15%;
  transition: opacity 0.2s ease-in-out;
}
.page-body__loader::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: hsl(200, 33%, 93%);
  background-color: var(--colorBackground, hsl(200, 33%, 93%));
  opacity: 0.55;
}

#body.loading::after {
  position: fixed;
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 4;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4rem;
  background-image: url("/public/images/loader/0171a9/spinner_40.gif");
  animation: fadeIn 0.2s ease-out;
}

body.simple #body {
  width: 100%;
  margin-left: 0;
}

div.loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% - 9rem);
  padding-top: 5.4rem;
  margin-left: 9rem;
  z-index: 1;
  background-color: rgba(240, 240, 240, 0.4);
}

div.loader:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  margin-left: -3.2rem;
  margin-top: -3.2rem;
  width: 6.4rem;
  height: 6.4rem;
  background-image: url("/public/images/logo_square.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  animation-name: rotate;
  -webkit-animation-name: rotate;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-fill-mode: none;
  -webkit-animation-fill-mode: none;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

/* ----- FOOTER ----- */
div#footer_copyright {
  grid-area: body;
  margin-top: auto;
  width: 100%;
  height: auto;
  font-size: 1.2rem;
  color: #9e9fa0;
  text-align: center;
  padding: 0.2rem 0 1.5rem 9rem;
  box-sizing: border-box;
  transition: 0.25s padding;
}

div#footer_copyright.view-manager {
  padding-right: 27.5rem;
}

body.simple #footer_copyright {
  padding: 0.2rem 0 0.5rem 0;
}

/* ------ MAIN ------ */
#main {
  position: relative;
  display: block;
  margin: -0.9rem 1.8rem 9rem 1.8rem;
  background-color: hsl(200, 33%, 93%);
  -webkit-box-shadow: 0px 8px 10px -5px hsl(200, 33%, 93%);
  box-shadow: 0px 8px 10px -5px hsl(200, 33%, 93%);
  background-color: var(--colorBackground, hsl(200, 33%, 93%));
  -webkit-box-shadow: 0px 8px 10px -5px var(--colorBackground, hsl(200, 33%, 93%));
  box-shadow: 0px 8px 10px -5px var(--colorBackground, hsl(200, 33%, 93%));
}
#main #wall {
  padding-bottom: 4.8rem;
}
#main.main--search-page {
  padding: 0.9rem;
}

.main {
  margin: 0rem 1.8rem 3.5rem 1.8rem;
}
.main--disabled ul.tile li > div.wrapper {
  opacity: 50%;
  pointer-events: none;
}
.main--paginated {
  height: 100%;
}

#main.blur {
  /*filter: blur(.2rem) !important;
  -webkit-filter: blur(.2rem) !important;*/
  opacity: 0.75;
}

body.simple #main {
  padding-top: 0;
}

/**
navigation bar on the left hand side of the page
*/
.nav {
  align-items: center;
  background-color: hsl(201, 65%, 8%);
  background-color: var(--colorNavigation, hsl(201, 65%, 8%));
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  grid-area: navigation;
  padding: 2rem 0;
  position: relative;
  transition: width 0.2s ease-in-out;
  width: 8rem;
  z-index: 12;
  overflow-y: auto;
}
.nav__items {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 0 0.4rem;
}
.nav__items > *:first-child {
  margin-top: 2rem;
}
@media only screen and (max-height: 650px) {
  .nav__items > *:first-child {
    margin-top: 1.8rem;
  }
}
.nav__items > *:not(:last-child) {
  margin-bottom: 0.5rem;
}
@media only screen and (max-height: 650px) {
  .nav__items > *:not(:last-child) {
    margin-bottom: 0.6rem;
  }
}
.nav__items--lower {
  flex-grow: 1;
  justify-content: flex-end;
}
.nav__items--lower .nav-item__button {
  padding: 0.5rem 0.1rem;
}
.nav__items--lower .nav-item__button i {
  width: 3.6rem;
  height: 3.6rem;
  font-size: 2.3rem;
  border-radius: 100%;
  font-style: normal;
}
.nav__items--lower .nav-item__button > span {
  display: none;
}
.nav__items--lower .nav-item__icon {
  height: 2.4rem;
  width: 2.4rem;
}
.nav__logo-container {
  margin: 0 0.5rem;
  z-index: 2;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav__logo {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  transition: margin-top 0.2s ease-in-out;
  cursor: pointer;
}
.nav__logo--min {
  margin-top: 0;
}
.nav__logo--hidden {
  display: none;
}
.nav--open {
  align-items: flex-start;
  padding: 0 1.2rem;
  width: 20rem;
}
.nav--open .nav__items {
  align-items: flex-start;
  width: 100%;
}
.nav--open .nav-item {
  width: 100%;
}
.nav--open .nav-item__button {
  justify-content: flex-start;
  width: 100%;
}

.quickbar__icon {
  font-size: 1.8rem;
  fill: hsl(197, 100%, 47%);
  fill: var(--colorPrimary, hsl(197, 100%, 47%));
}
.quickbar__icon-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ------ TOPBAR ------ */
.topbar {
  align-items: center;
  display: grid;
  gap: 1.8rem;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-area: topbar;
  list-style: none;
  padding: 1.8rem 2.7rem;
  min-height: 4.2rem;
  position: relative;
  transition: padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out, box-shadow 0.2s ease-in-out, gap 0.2s ease-in-out;
  z-index: 11;
}
.topbar #cloud_logo_container--mobile,
.topbar div[name=view_watchlist],
.topbar div[name=recent_devices] {
  display: none;
}
.topbar--tabs {
  grid-template-rows: auto min-content;
}
.topbar--min {
  padding: 0.9rem 2.7rem;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.028), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.04), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.05), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.062), 14px 14px 45px -2px rgba(0, 0, 0, 0.09);
}
.topbar--min .progress-bar {
  width: calc(100% + 2.9rem + 2.9rem);
  margin-left: -2.9rem;
}
.topbar__tabs {
  grid-column: 1/3;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.topbar__tabs > div {
  max-width: 100%;
  overflow: auto;
}
.topbar__tabs::after {
  content: "";
  display: block;
  width: 2rem;
  background-image: linear-gradient(to right, transparent 0%, hsl(200, 33%, 93%) 100%);
  background-image: linear-gradient(to right, transparent 0%, var(--colorBackground, hsl(200, 33%, 93%)) 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.topbar__action-buttons {
  position: absolute;
  top: 100%;
  right: 0;
}
.topbar--progress-bar {
  padding-bottom: 0;
}
.topbar--progress-bar.topbar--min {
  gap: 0.9rem;
}
.topbar--progress-bar ~ #body #main {
  margin-top: 0.9rem;
}
.topbar li.title {
  flex: 1;
}
.topbar > li {
  box-sizing: border-box;
}
.topbar h1 {
  font-size: 2.6rem;
  margin-bottom: 0.8rem;
  line-height: 1;
  color: hsl(201, 65%, 8%);
}
.topbar--hidden {
  display: none;
}

.page-title {
  position: relative;
}
.page-title:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  border-radius: 1rem;
  width: 30rem;
  height: 2.6rem;
  margin: 0.3rem 0;
  background-color: #dadee5;
  visibility: hidden;
  opacity: 0;
  background: #dadee5;
  background-image: linear-gradient(to right, #dadee5 0%, #e9ebf0 20%, #dadee5 40%, #dadee5 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}
.page-title--loading {
  position: relative;
  height: 2.6rem;
}
.page-title--loading:after {
  opacity: 100%;
  visibility: visible;
}

@media only screen and (max-width: 56.25em) {
  .info-page__dashboard-button {
    display: none;
  }
}
@media only screen and (max-width: 46.85em) {
  html,
  body {
    height: auto;
    min-height: 100vh;
    max-height: none;
    min-width: 100vw;
    overflow: auto;
  }
  body {
    display: flex;
    flex-direction: column;
    container-type: normal;
    padding-bottom: 12rem;
  }
  body:has(aside.side-bar--open), body:has(.jquery-modal.current) {
    overflow: hidden;
    position: fixed;
  }
  body.login {
    padding-bottom: 0;
  }
  body .page-body__loader {
    position: fixed;
    height: 100vh;
    width: 100%;
    padding-top: 40vh;
  }
  html:has(.page-body__loader) {
    overflow-y: hidden !important;
  }
  #body {
    overflow: visible;
    height: auto;
  }
  .page-title:after {
    width: 15rem;
  }
  .input--hidden,
  .side-bar__border-left,
  #breadcrumbs,
  #cloud_logo_container,
  .tabs-nav__hr {
    display: none;
  }
  input,
  textarea,
  select,
  .select2-search__field,
  .filter-dropdown .select2-results__option,
  .input__wrapper .select2-selection--single,
  .default .select2-search__field,
  .v2 .select2-search__field,
  .filter-dropdown .select2-search__field,
  .select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 1.6rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  input:not([type=checkbox]):not([type=radio]) {
    height: 4.4rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.2rem !important;
  }
  .input__input--picker-container .input__input--compact + div.pickr {
    height: 4.4rem;
  }
  #wall .form-default__field--picker input {
    height: 3.2rem !important;
    padding: 0.2rem 0.7rem !important;
  }
  .search-bar__filters--permanently-seperated-filters {
    gap: 1rem;
  }
  .login-form {
    min-height: 100vh;
  }
  .grid--full-height-tile {
    padding: 0;
  }
  .grid-stack {
    height: auto !important;
    padding-top: 1.3rem;
  }
  .grid-stack > .grid-stack-item {
    width: 100% !important;
    max-width: 100%;
    min-height: auto !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 2rem;
  }
  .grid-stack > .grid-stack-item > .grid-stack-item-content {
    position: relative !important;
    inset: auto !important;
    margin: 0 1rem !important;
    height: auto !important;
    max-height: none !important;
  }
  .grid-stack > .grid-stack-item.react-flow-tile {
    height: 60vh !important;
  }
  .grid-stack > .grid-stack-item.react-flow-tile > .grid-stack-item-content {
    height: 100% !important;
  }
  .info-page {
    width: 30rem;
  }
  .info-page__heading {
    font-size: 1.8rem;
  }
  .info-page__icon-container--tile-view {
    gap: 1.5rem;
  }
  .info-page__icon--tile-view {
    width: 5rem;
    height: 5rem;
  }
  .tile-header {
    min-width: fit-content;
  }
  .tile-header-container {
    position: relative;
  }
  .tile-header-container::after {
    content: "";
    display: block;
    width: 1.5rem;
    border-top-right-radius: 1rem;
    background-image: linear-gradient(to right, transparent 0%, hsl(200, 33%, 93%) 100%);
    background-image: linear-gradient(to right, transparent 0%, rgb(255, 255, 255) 70%);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
  .tile-header-scroll {
    overflow: auto;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
  }
  .map-tile .tile-header {
    max-height: 4.6rem;
  }
  .image-tile__content {
    min-height: 50vw;
  }
  .tile-v2__content__loader {
    min-height: 14rem;
  }
  .graph-tile__no-data {
    min-height: 14rem;
  }
  .tile-v2__content__loader ~ .graph-tile__no-data {
    display: none;
  }
  .map-tile .tile-v2__content {
    min-height: 32rem;
  }
  .tile-header__buttons [data-tableattr=page-count] {
    margin-left: 1rem;
  }
  .table-tile table {
    overflow: hidden;
  }
  #topbar {
    grid-template-columns: 4rem auto auto;
    min-height: 6rem;
    padding: 1.5rem 1rem;
    gap: 2rem 1rem;
    min-height: 0;
    height: auto;
    flex-shrink: 0;
    align-items: flex-start;
  }
  #topbar #cloud_logo_container--mobile {
    display: block;
    width: 4rem;
    height: 4rem;
  }
  #topbar #cloud_logo_container--mobile .nav__logo {
    width: 100%;
    height: auto;
  }
  #topbar #cloud_logo_container--mobile .nav__logo-container {
    margin: 0;
    height: 100%;
    width: 100%;
  }
  #topbar h1 {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 2rem;
  }
  #topbar.topbar--progress-bar {
    padding-bottom: 0;
  }
  .topbar__tabs {
    grid-column: 1/4;
  }
  .tabs-nav {
    box-shadow: none;
  }
  .tabs-nav__button {
    border-radius: 3rem;
    border: 0 !important;
    box-shadow: 0 0 0.6rem 0 rgba(100, 100, 100, 0.05);
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }
  .tabs-nav__button + button {
    margin-left: 1rem;
  }
  #main {
    margin: 0 1rem;
    padding: 0 !important;
  }
  .tab {
    padding: 0.5rem 1rem 2rem;
    position: relative !important;
  }
  .tab:has(.grid-stack) {
    padding: 0;
  }
  .nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 6rem;
    overflow: hidden;
    flex-wrap: nowrap;
    padding: 0;
    display: block;
    z-index: 13;
  }
  .nav__items {
    flex-direction: row;
    width: auto;
    padding: 0 1rem;
  }
  .nav__items:nth-of-type(2) {
    display: none;
  }
  .nav-item {
    margin: 0 !important;
    width: 6rem;
  }
  .nav-item__button {
    padding: 0.5rem 0;
  }
  .nav-item__button > span {
    font-size: 1rem;
  }
  .nav-item:nth-child(n+5):not(#nav_more) {
    display: none;
  }
  #nav_more {
    display: flex;
    order: 3;
  }
  #nav__more .result-tile__container {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  #nav__more i {
    font-style: normal;
    color: #fff;
    font-size: 2rem;
  }
  #nav__more .circle-text {
    height: 2.4rem;
    width: 2.4rem;
    margin: 0 -1px;
  }
  #nav__more .circle-text__initials {
    font-size: 1.1rem;
  }
  #nav__more .circle-text--dark {
    box-shadow: 0 0 0 1px #ffffff;
  }
  .user-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    width: auto;
    height: auto;
    z-index: 15;
    border-radius: 0;
    justify-content: stretch;
  }
  .user-menu__buttons {
    max-height: 150px;
  }
  .side-bar {
    position: fixed;
    height: 100vh;
    z-index: 12;
    background-color: #26414f;
    background-color: var(--colorNavigationLight, #26414f);
  }
  .side-bar--open {
    width: 100vw;
  }
  .side-bar__container {
    width: 100%;
  }
  .side-bar__content {
    bottom: 6rem;
  }
  .side-bar .result-tile__container {
    background-color: #324e5d;
    background-color: var(--colorNavigationExtraLight, #324e5d);
  }
  ul.tile li > div.wrapper > div.header {
    height: auto;
  }
  li.tile__header-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin: 0.5rem 0;
  }
  ul.tile > li {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  ul.tile li.w50 {
    min-width: 0 !important;
  }
  .jquery-modal ul.tile {
    height: auto;
  }
  .jquery-modal li.header + li.body:not(:last-child) {
    flex-grow: 0;
  }
  .jquery-modal li.body ~ .body {
    flex-grow: 1;
    height: auto !important;
    max-height: 100% !important;
    flex: auto !important;
    overflow: auto;
  }
  .jquery-modal.blocker {
    padding: 0;
    grid-area: auto;
  }
  .jquery-modal.blocker::before {
    margin: 0;
  }
  .modal {
    margin: 0;
    border-radius: 0 !important;
    box-shadow: none;
    height: 100%;
    width: 100%;
  }
  .modalv2__wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .modalv2__content {
    flex-grow: 1;
  }
  .modalv2__stepper {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .modalv2__header, .modalv2__page {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .modalv2-footer {
    height: fit-content;
  }
  .modalv2-footer__button-container {
    display: flex;
    flex-direction: column;
  }
  .modalv2-footer--responsive {
    flex-wrap: wrap;
    gap: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .modalv2-footer--responsive div.modalv2-footer__button-container:first-child {
    order: 2;
  }
  .modalv2-footer--responsive div.modalv2-footer__button-container:last-child {
    order: 3;
  }
  .modalv2-footer--responsive .modalv2__checkbox {
    padding-left: 3rem;
    order: 1;
  }
  .modalv2 .search-bar--modal {
    flex-direction: column;
    gap: 1rem;
  }
  .modalv2 .search-bar--modal .search-bar__element {
    margin-left: 0;
    width: 100%;
  }
  .modalv2 .option-tile {
    max-height: 95%;
  }
  .formv2--modal {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .form-default__input {
    width: 100%;
  }
  .form-default__field .info {
    display: none;
  }
  .form-default .button-container {
    width: auto;
  }
  .form-default .select2-selection--single,
  .form-default .btnv2 {
    height: 4.4rem !important;
  }
  .inline-search-dropdown {
    display: block;
  }
  .results-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .option-tile--1 .basic-card {
    max-width: 90%;
  }
  .pcr-app.visible {
    left: auto !important;
    right: 2rem !important;
  }
  #crisp-chatbox > div > a {
    bottom: 200% !important;
  }
}
@media only screen and (max-width: 36.375em) {
  .search-bar--modal .search-bar__inputs:has(.search-input):has(.search-bar__filters), .search-bar--modal .search-bar__inputs:has(.search-input):has(.search-bar__filters):focus-within {
    border-color: transparent !important;
  }
  .search-bar--modal .search-bar__inputs--1 .search-input__input {
    border-color: #dadee5;
  }
  .search-bar--modal .search-bar__filters--1 .select2-selection.select2-selection--single {
    border-color: #dadee5;
    margin-top: -2px;
  }
  .search-bar--modal .search-bar__inputs--1 .search-input__input:focus,
  .search-bar--modal .search-bar__filters--1 .select2-selection.select2-selection--single:focus {
    border-color: hsl(197, 100%, 47%);
    border-color: var(--colorPrimary, hsl(197, 100%, 47%));
  }
  .search-bar--modal .search-bar__filters--1 {
    margin-top: 1rem;
    display: block;
  }
}
@media only screen and (max-width: 30em) {
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.datepicker--button {
  color: hsl(197, 99%, 33%);
}

.datepicker--day-name {
  color: hsl(19, 97%, 64%);
  color: var(--colorHighlight, hsl(19, 97%, 64%));
}

.datepicker-container {
  display: none;
}

.datepicker-filter.focus .datepicker-container {
  display: block;
  position: relative;
  position: absolute;
  right: 0rem !important;
  top: 5.6rem !important;
  width: 25rem;
  z-index: 22;
}
.datepicker-filter.focus .datepicker-container--dropdown {
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.031), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.044), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.056), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.069), 14px 14px 45px -2px rgba(0, 0, 0, 0.1);
  width: fit-content;
  right: unset !important;
  display: grid;
  grid-template-columns: [col1] 24rem [col2] 12.5rem;
  grid-template-rows: [row1] auto;
}
.datepicker-filter.focus .datepicker-container--dropdown .relative-dates__container {
  grid-column: 2;
  grid-row: 1;
  background-color: white;
  padding: 1.3rem;
  height: 26.55rem;
  background-color: white;
  border-radius: 1rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid #efefef;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.datepicker-filter.focus .datepicker-container--dropdown .relative-dates__container button {
  background-color: #eff3f5;
  width: fit-content;
  border-radius: 1rem;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.1s ease-in-out;
}
.datepicker-filter.focus .datepicker-container--dropdown .relative-dates__container button.relative-dates__button--clicked {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  box-shadow: 0 0 0 0.2rem hsl(197, 100%, 47%);
  box-shadow: 0 0 0 0.2rem var(--colorPrimary, hsl(197, 100%, 47%));
  color: inherit;
}
.datepicker-filter.focus .datepicker-container--dropdown .relative-dates__container button:hover {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  color: inherit;
}

.datepicker {
  border-radius: 0.6666666667rem;
  border: 1px solid #ccc;
  margin-left: 1px;
}
.datepicker--dropdown {
  border: none;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.031), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.044), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.056), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.069), 14px 14px 45px -2px rgba(0, 0, 0, 0.1) !important;
}
.datepicker--dropdown--relative-dates {
  margin-top: 0;
  width: auto;
  border: none;
  grid-column: 1;
  border-top-right-radius: 0;
}

.datepicker--cell {
  transition: background-color 0.2s ease-in-out;
  border-radius: 0.6666666667rem;
}

.datepicker--cell.-current- {
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
}

.datepicker--cell.-selected- {
  background: #ffffff;
  transition: background-color 0.2s ease-in-out;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 0.6666666667rem;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}

.datepicker--cell.-selected-.-current- {
  background: #ffffff;
  transition: background-color 0.2s ease-in-out;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 0.6666666667rem;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}

.datepicker--cell.-selected-.-focus- {
  background: rgba(0, 172, 240, 0.15);
  background: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  transition: background-color 0.2s ease-in-out;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 0.6666666667rem;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}

.datepicker--cell.-current-.-in-range- {
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
}

.datepicker--cell.-range-from- {
  border: 1px solid #ccc;
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  color: #fff;
}

.datepicker--cell.-range-to- {
  border: 1px solid #ccc;
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  color: #fff;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
  color: #ccc;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: hsl(197, 99%, 33%);
  background-color: var(--colorSecondary, hsl(197, 99%, 33%));
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background: #ffffff;
  transition: background-color 0.2s ease-in-out;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 0.6666666667rem;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background: #ffffff;
  transition: background-color 0.2s ease-in-out;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 0.6666666667rem;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
}

.datepicker--time-row input[type=range]:focus::-webkit-slider-thumb {
  background: hsl(197, 100%, 47%);
  background: var(--colorPrimary, hsl(197, 100%, 47%));
  border-color: hsl(197, 100%, 47%);
  border-color: var(--colorPrimary, hsl(197, 100%, 47%));
}

.datepicker--time-row input[type=range]:focus::-moz-range-thumb {
  background: hsl(197, 100%, 47%);
  background: var(--colorPrimary, hsl(197, 100%, 47%));
  border-color: hsl(197, 100%, 47%);
  border-color: var(--colorPrimary, hsl(197, 100%, 47%));
}

.datepicker--time-row input[type=range]:focus::-ms-thumb {
  background: hsl(197, 100%, 47%);
  background: var(--colorPrimary, hsl(197, 100%, 47%));
  border-color: hsl(197, 100%, 47%);
  border-color: var(--colorPrimary, hsl(197, 100%, 47%));
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  background: rgba(0, 172, 240, 0.15);
  background: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  border-radius: 0.6666666667rem;
  border: 2px solid hsl(197, 100%, 47%);
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: rgba(0, 172, 240, 0.15);
  background: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  transition: background-color 0.2s ease-in-out;
  color: hsl(197, 100%, 47%);
  color: var(--colorPrimary, hsl(197, 100%, 47%));
  border-radius: 0.6666666667rem;
  border: 2px solid hsl(197, 100%, 47%);
}

.noty_theme__cts.noty_type__success {
  color: #0d0d0d !important;
}
.noty_theme__cts.noty_bar {
  border-radius: 1rem;
  border: none;
  box-shadow: 0.5px 0.5px 1.5px -2px rgba(0, 0, 0, 0.028), 1.2px 1.2px 3.9px -2px rgba(0, 0, 0, 0.04), 2.5px 2.5px 8px -2px rgba(0, 0, 0, 0.05), 5.1px 5.1px 16.4px -2px rgba(0, 0, 0, 0.062), 14px 14px 45px -2px rgba(0, 0, 0, 0.09);
}

.noty_has_timeout.noty_has_progressbar .noty_progressbar {
  height: 0.5rem;
}

#noty_layout__topRight {
  top: 80px;
}

.pac-container {
  margin-top: -0.2rem;
  box-sizing: content-box !important;
  background: #ffffff !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04) !important;
  border: solid 2px hsl(197, 100%, 47%) !important;
  border: solid 2px var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  margin-top: -0.7rem;
  padding-top: 0.7rem;
  border-top: 0 !important;
}

.pac-logo:after,
.hdpi.pac-logo:after {
  display: none !important;
  height: 0 !important;
}

.swal2-icon.swal2-icon--mb-1 {
  margin-bottom: 1.8rem !important;
}

body.swal2-height-auto {
  height: inherit !important;
  min-height: 100vh;
}

.tooltipster-sidetip .tooltipster-box {
  background: hsl(201, 65%, 8%) !important;
  background: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
  border: 1px solid hsl(201, 65%, 8%) !important;
  border: 1px solid var(--colorNavigation, hsl(201, 65%, 8%)) !important;
  border-radius: 1rem;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: hsl(201, 65%, 8%) !important;
  border-bottom-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
  left: 0px;
  top: 1px;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
  border-left-color: hsl(201, 65%, 8%) !important;
  border-left-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
  left: -1px;
  top: 0px;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
  border-right-color: hsl(201, 65%, 8%) !important;
  border-right-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
  left: 1px;
  top: 0px;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  border-top-color: hsl(201, 65%, 8%) !important;
  border-top-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
  left: 0px;
  top: -1px;
}

.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: hsl(201, 65%, 8%) !important;
  border-bottom-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
  border-left-color: hsl(201, 65%, 8%) !important;
  border-left-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
  border-right-color: hsl(201, 65%, 8%) !important;
  border-right-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
  border-top-color: hsl(201, 65%, 8%) !important;
  border-top-color: var(--colorNavigation, hsl(201, 65%, 8%)) !important;
}

.select2 {
  width: 100%;
}
.select2.loading + .select2-container .select2.loading::after {
  position: absolute;
  content: "";
  width: 2.8rem;
  height: 2.8rem;
  top: 0.3rem;
  right: 0.2rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/public/images/loader/0171a9/spinner_30.gif");
}
.select2.loading .select2-selection__arrow {
  display: none;
}
.select2.error + .select2-container .select2-selection {
  box-shadow: rgba(232, 126, 125, 0.5) 0 0 0.3rem !important;
  border: 0.1rem solid #f17270 !important;
}
.select2-selection--single {
  display: flex !important;
  align-items: center !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
}
.select2-selection__rendered {
  flex-grow: 1;
}
.select2-selection__left-line {
  width: 0.2rem;
  min-width: 0.2rem;
  height: 2.6rem;
  margin: 1rem;
  background-color: #dadee5;
  border-radius: 1rem;
}
.select2-selection__arrow {
  position: relative !important;
  height: auto !important;
  top: inherit !important;
  right: inherit !important;
  width: 3rem !important;
}
.select2-selection__placeholder {
  color: #ccc !important;
}
.select2-results__options {
  overflow-x: hidden;
}
.select2-results__option--highlighted .deleteable-dropdown-option__button {
  opacity: 100%;
}
.select2-results__option.loading-results {
  display: none;
}
.select2__icon {
  color: hsl(197, 99%, 33%);
  color: var(--colorSecondary, hsl(197, 99%, 33%));
  font-size: 2rem;
}

.default.select2-dropdown,
.v2.select2-dropdown {
  padding: 0.9rem;
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  animation: fadeInEven 0.2s ease-in-out;
}
.default.select2-dropdown:focus-within,
.v2.select2-dropdown:focus-within {
  border: 2px solid #ccc;
}
.default.select2-dropdown--below,
.v2.select2-dropdown--below {
  border-bottom-left-radius: 0.6666666667rem;
  border-bottom-right-radius: 0.6666666667rem;
  box-shadow: 0.2px 0.2px 0.5px -2px rgba(0, 0, 0, 0.012), 0.4px 0.4px 1.3px -2px rgba(0, 0, 0, 0.018), 0.9px 0.9px 2.7px -2px rgba(0, 0, 0, 0.022), 1.8px 1.8px 5.5px -2px rgba(0, 0, 0, 0.028), 5px 5px 15px -2px rgba(0, 0, 0, 0.04);
  margin-top: -2px;
}
.default.select2-dropdown--above,
.v2.select2-dropdown--above {
  border-top-left-radius: 0.6666666667rem;
  border-top-right-radius: 0.6666666667rem;
  margin-top: 2px;
}
.default .select2-search--dropdown,
.v2 .select2-search--dropdown {
  padding: 0;
}
.default .select2-search__field,
.v2 .select2-search__field {
  border: solid 2px #dadee5 !important;
  border-radius: 1rem !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  padding: 0.7rem 0.8rem !important;
  margin-bottom: 0.8rem;
}
.default .select2-search__field:focus,
.v2 .select2-search__field:focus {
  border: none !important;
  border: solid 2px hsl(197, 100%, 47%) !important;
  border: solid 2px var(--colorPrimary, hsl(197, 100%, 47%)) !important;
  outline: none !important;
}
.default .select2-results__option,
.v2 .select2-results__option {
  border-radius: 0.5rem;
  transition: background-color 0.2s ease-in-out;
  font-size: 1.3rem;
}
.default .select2-results__option[aria-selected=true],
.v2 .select2-results__option[aria-selected=true] {
  background-color: #dadee5;
}
.default .select2-results__option--highlighted[aria-selected],
.v2 .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
  color: inherit;
}
.default .select2-results__option:not(:last-child),
.v2 .select2-results__option:not(:last-child) {
  margin-bottom: 0.4rem;
}
.default .select2-results__option .sub-text,
.v2 .select2-results__option .sub-text {
  padding-top: 0.2rem;
  font-size: 1.2rem;
  font-weight: 400;
  color: #9e9fa0;
}

.deleteable-dropdown-option {
  position: relative;
}
.deleteable-dropdown-option__text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.deleteable-dropdown-option__spacer {
  visibility: hidden;
}
.deleteable-dropdown-option__button {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  background-color: rgba(0, 172, 240, 0.15);
  background-color: var(--colorPrimaryLight, rgba(0, 172, 240, 0.15));
}

.selectv2 + .select2.select2-container.select2-container--default {
  width: 100% !important;
}
.selectv2 + .select2.select2-container.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 2px solid transparent;
}
.selectv2 + .select2.select2-container.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 2px solid transparent;
}
.selectv2 + .select2.select2-container.select2-container--default .select2-selection {
  height: 4.4rem;
}
.selectv2 + .select2.select2-container.select2-container--default.select2-container--compact .select2-selection {
  height: 3.6rem !important;
}
.selectv2 + .select2.select2-container.select2-container--default.select2-container--compact .select2-selection__rendered {
  padding-right: unset;
}
.selectv2 + .select2.select2-container.select2-container--default .select2-selection--single {
  border-radius: 0.6666666667rem;
  border: 2px solid #ccc;
  padding: 1.2rem;
  transition: border 0.2s ease-in-out;
}
.selectv2 + .select2.select2-container.select2-container--default .select2-selection--single:focus, .selectv2 + .select2.select2-container.select2-container--default .select2-selection--single:focus-visible {
  border: 2px solid hsl(197, 100%, 47%);
  border: 2px solid var(--colorPrimary, hsl(197, 100%, 47%));
  outline: none;
}
.selectv2 + .select2.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
}
.selectv2 + .select2.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered:not([title]) {
  color: #ccc !important;
}
.selectv2 + .select2.select2-container.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eff3f5;
  pointer-events: none;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eff3f5;
  border-color: #eff3f5;
  pointer-events: none;
}

.input--error .selectv2 + .select2.select2-container.select2-container--default .select2-selection--single {
  border: 2px solid #f17270;
}
.input--warning .selectv2 + .select2.select2-container.select2-container--default .select2-selection--single {
  border: 2px solid #e0b558;
}
.input--success .selectv2 + .select2.select2-container.select2-container--default .select2-selection--single {
  border: 2px solid #4fb878;
}

/* Z-index */
/* Noty + swal 14 */
/* header - 13*/
/* navigation 12*/
/* topbar 11 */
/* body 1-10 */