/* #region Variables (126) */
/* #endregion Variables */

/* #region Variables */
/* #endregion */

/* #region Reset */

/* #region viewPort */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
/* #endregion */

body {
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
}
div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
input,
textarea {
  border-radius: 0px;
  -webkit-box-shadow: inset 0px 0px 0px transparent;
  box-shadow: inset 0px 0px 0px transparent;
  margin: 0;
  padding: 0;
  border: 0px solid transparent;
  -webkit-appearance: none;
  font-family: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[readonly],
textarea[readonly] {
  background-color: transparent;
  /*color: @color-light-dark;*/
  color: #333333;
}
select[disabled] {
  background-color: transparent;
  color: #979797;
}
svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
svg text {
  font-family: "Open Sans";
}
/* #endregion */
/* #region Methods */
/* #region auto-color */
/* #endregion */
/* #region advanced-button */
/* #endregion */
/* #region xxx-color */
/* #endregion */
/* #region border-xxx */
/* #endregion */
/* #region vertical-align-content */
/* #endregion */
/* #region horizontal-align-content */
/* #endregion */
/* #region ellipsis */
/* #endregion */

/* #region close-button */

.close-button {
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.close-button > .container {
  cursor: pointer;
}
.close-button > .container svg {
  width: 32px;
  height: 32px;
  fill: white;
}
/* #endregion */
/* #region color-iterate */
/* #endregion */
/* #region flex */
/* #endregion */

/* #region fadeout */

@-moz-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* #endregion */

/* #region fadein */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* #endregion */

/* #region pulse */

@-moz-keyframes pulse {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes pulse {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
/* #endregion */
/* #region page-titlebar */
/* #endregion */
/* #region dialog-title */
/* #endregion */
/* #region basic-button */
/* #endregion */
/* #region row-group-header */
/* #endregion */
/* #region tile-group-header */
/* #endregion */
/* #region row-button */
/* #endregion */
/* #region tile-button */
/* #endregion */
/* #region text-button */
/* #endregion */
/* #region shadow */
/* #endregion */
/* #region editor-height */
/* #endregion */

/* #endregion */

/* #region Html */

/* #region elements */

* {
  -webkit-transition: background-color 0.1s linear;
  -moz-transition: background-color 0.1s linear;
  -o-transition: background-color 0.1s linear;
  -ms-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
  /*-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
	-o-transition: width 0.1s linear;
	-ms-transition: width 0.1s linear;
	transition: width 0.1s linear;*/

}
body,
html {
  padding: 0px;
  margin: 0px;
  font-family: "Open Sans";
  font-size: 12px;
  width: 100%;
  height: 100%;
  background-color: white !important;
  /* Important is used for error toast messages not to change this value */

}
/* #endregion */

/* #region classes */

/* #region tooltip */

.tooltip {
  z-index: 9999;
  position: fixed;
  background-color: black;
  color: white;
  padding: 5px 7px;
  max-width: 350px;
  /* white-space: nowrap; */
  text-align: center;
  font-size: 10px;
}
.tooltip h1 {
  font-size: 14px;
  margin: 5px 7px 0 7px;
}
.tooltip .top:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: black;
  border-width: 10px;
  margin-left: -10px;
}
.tooltip .left::after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-left-color: black;
  border-width: 10px;
  margin-top: -10px;
}
.tooltip .bottom:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-bottom-color: black;
  border-width: 10px;
  margin-left: -10px;
}
.tooltip .right:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-right-color: black;
  border-width: 10px;
  margin-top: -10px;
}
/* #endregion */

/* #region touch */

.touching {
  -webkit-animation: touch-color 0.75s ease-in;
  animation: touch-color 0.75s ease-in;
}
@-webkit-keyframes touch-color {
  to {
    opacity: 0.5;
    background-color: white;
  }
}
@keyframes touch-color {
  to {
    opacity: 0.5;
    background-color: white;
  }
}
/* #endregion */

/* #region Shortcuts */

.shortcutKey {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 2px 5px;
  color: white;
  position: absolute;
  z-index: 9999;
}
.shortcutButton {
  box-shadow: 0 0 3px black inset;
}
/* #endregion */

/* #region Colors (BAD CODE, WHY SHOULD THE VERY GENERAL CLASS .BG-RED CHANGE PADDING?) */

.bg-red {
  border-left: 10px solid #c4262c;
  padding-left: 5px;
}
.bg-purple {
  border-left: 10px solid #673080;
  padding-left: 5px;
}
.bg-blue {
  border-left: 10px solid #4b82be;
  padding-left: 5px;
}
.bg-turquoise {
  border-left: 10px solid #1aa8b4;
  padding-left: 5px;
}
.bg-green {
  border-left: 10px solid #71b84a;
  padding-left: 5px;
}
.bg-brown {
  border-left: 10px solid #a9988a;
  padding-left: 5px;
}
.bg-pink {
  border-left: 10px solid #e98b99;
  padding-left: 5px;
}
.bg-grey {
  border-left: 10px solid #70797a;
  padding-left: 5px;
}
.bg-yellow {
  border-left: 10px solid #ffda31;
  padding-left: 5px;
}
.bg-orange {
  border-left: 10px solid #f8ac45;
  padding-left: 5px;
}
/* #endregion */

/* #region hidden */

.hidden {
  display: none !important;
}
/* #endregion */

/* #region invisible */

.invisible {
  visibility: hidden;
}
/* #endregion */

/* #region toast */

#toastContainer {
  bottom: 66px;
  right: 0px;
  position: fixed;
  padding: 0;
  margin: 0;
  text-align: right;
  z-index: 99;
}
.toast:hover {
  cursor: pointer;
}
.toast {
  border: 3px white solid;
  padding: 10px;
  background: #f2ba00;
  color: white;
  max-width: 350px;
  text-align: left;
}
.toast > h1 {
  display: inline;
  font-size: inherit;
  margin-right: 10px;
}
.toast.error {
  background: #c4262c;
}
/* #endregion */

/* #region error */

.error {
  text-align: center;
  padding: 5px;
  color: white;
  background-color: #c4262c;
}
.error.invisible {
  padding: 0;
}
/* #endregion */

/* #region fill-screen */

.fill-screen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* #endregion */

/* #region button */

.button {
  /* A basic button (cannot be named button as the class is already named so */
  background-color: #005791;
  color: white;
  margin: 0;
  padding: 0;
  width: 66px;
  height: 60px;
  font-size: 10px;
  display: inline-block;
}
.button > .container {
  width: 100%;
  height: 100%;
}
.button > .container > a {
  cursor: default;
  display: block;
  padding: 6px 2px;
  width: 100%;
  height: 100%;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.button > .container > a > .container {
  position: relative;
  width: 100%;
  height: 100%;
}
.button > .container > a > .container > .icon {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
}
.button > .container > a > .container > .icon .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.button > .container > a > .container > .icon .container svg {
  fill: white;
  /*margin-left: auto;
							margin-right: auto;*/
  width: 32px;
  height: 32px;
}
.button > .container > a > .container > .text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.button > .container > a > .container > .text .container {
  text-align: center;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.button > .container > input {
  width: 100%;
  font-size: 14px;
  text-align: center;
  background-color: #e6b000;
  color: inherit;
  padding: 5px;
}
@media only screen and (max-width: 1024px) {
  .button > .container > input {
    padding: 10px;
  }
}
@media only screen and (max-width: 480px) {
  .button > .container > input {
    padding: 15px;
  }
}
.button > .container > input[disabled="disabled"],
.button > .container > input[disabled] {
  color: rgba(255, 255, 255, 0.2);
}
/* #endregion */

/* #region widgets */

.widget {
  background-color: #ffc91a;
  height: 200px;
  cursor: default;
  overflow: hidden;
  font-size: 12px;
}
.widget > .container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget > .container > .loading {
  width: 32px;
  height: 32px;
}
.widget.error-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.widget.button-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
}
.widget.button-widget:hover {
  background-color: #f9c007;
}
.widget.button-widget > svg {
  width: 38%;
  height: 38%;
  margin-bottom: 5px;
}
.widget.entity-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
}
.widget.entity-widget:hover {
  background-color: #f9c007;
}
.widget.entity-widget > svg {
  width: 38%;
  height: 38%;
  margin-bottom: 5px;
}
.widget.diagram-widget:hover {
  background-color: #f9c007;
}
.widget.diagram-widget.type-0,
.widget.diagram-widget.type-1,
.widget.diagram-widget.type-2,
.widget.diagram-widget.type-3,
.widget.diagram-widget.type-4,
.widget.diagram-widget.type-6 {
  display: flex;
  flex-direction: column-reverse;
  padding: 15px;
}
.widget.diagram-widget.type-0:hover > .full-screen-button,
.widget.diagram-widget.type-1:hover > .full-screen-button,
.widget.diagram-widget.type-2:hover > .full-screen-button,
.widget.diagram-widget.type-3:hover > .full-screen-button,
.widget.diagram-widget.type-4:hover > .full-screen-button,
.widget.diagram-widget.type-6:hover > .full-screen-button {
  display: block;
}
.widget.diagram-widget.type-0 > .diagram,
.widget.diagram-widget.type-1 > .diagram,
.widget.diagram-widget.type-2 > .diagram,
.widget.diagram-widget.type-3 > .diagram,
.widget.diagram-widget.type-4 > .diagram,
.widget.diagram-widget.type-6 > .diagram {
  flex-grow: 1;
  position: relative;
}
.widget.diagram-widget.type-0 > .diagram > .container,
.widget.diagram-widget.type-1 > .diagram > .container,
.widget.diagram-widget.type-2 > .diagram > .container,
.widget.diagram-widget.type-3 > .diagram > .container,
.widget.diagram-widget.type-4 > .diagram > .container,
.widget.diagram-widget.type-6 > .diagram > .container {
  position: absolute;
  height: 100%;
  width: 100%;
}
.widget.diagram-widget.type-0 > .diagram > .container > .content,
.widget.diagram-widget.type-1 > .diagram > .container > .content,
.widget.diagram-widget.type-2 > .diagram > .container > .content,
.widget.diagram-widget.type-3 > .diagram > .container > .content,
.widget.diagram-widget.type-4 > .diagram > .container > .content,
.widget.diagram-widget.type-6 > .diagram > .container > .content {
  height: 100%;
}
.widget.diagram-widget.type-0 > .diagram > .container > .content > .container,
.widget.diagram-widget.type-1 > .diagram > .container > .content > .container,
.widget.diagram-widget.type-2 > .diagram > .container > .content > .container,
.widget.diagram-widget.type-3 > .diagram > .container > .content > .container,
.widget.diagram-widget.type-4 > .diagram > .container > .content > .container,
.widget.diagram-widget.type-6 > .diagram > .container > .content > .container {
  height: 100%;
}
.widget.diagram-widget.type-0 > .title,
.widget.diagram-widget.type-1 > .title,
.widget.diagram-widget.type-2 > .title,
.widget.diagram-widget.type-3 > .title,
.widget.diagram-widget.type-4 > .title,
.widget.diagram-widget.type-6 > .title {
  text-align: center;
}
.widget.diagram-widget.type-0 > .full-screen-button,
.widget.diagram-widget.type-1 > .full-screen-button,
.widget.diagram-widget.type-2 > .full-screen-button,
.widget.diagram-widget.type-3 > .full-screen-button,
.widget.diagram-widget.type-4 > .full-screen-button,
.widget.diagram-widget.type-6 > .full-screen-button {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  fill: #f2ba00;
  padding: 5px;
  opacity: 0.5;
}
.widget.diagram-widget.type-0 > .full-screen-button:hover,
.widget.diagram-widget.type-1 > .full-screen-button:hover,
.widget.diagram-widget.type-2 > .full-screen-button:hover,
.widget.diagram-widget.type-3 > .full-screen-button:hover,
.widget.diagram-widget.type-4 > .full-screen-button:hover,
.widget.diagram-widget.type-6 > .full-screen-button:hover {
  opacity: 1;
  fill: #d9a600;
}
.widget.diagram-widget.type-0 > .full-screen-content,
.widget.diagram-widget.type-1 > .full-screen-content,
.widget.diagram-widget.type-2 > .full-screen-content,
.widget.diagram-widget.type-3 > .full-screen-content,
.widget.diagram-widget.type-4 > .full-screen-content,
.widget.diagram-widget.type-6 > .full-screen-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 10;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.widget.diagram-widget.type-0 > .full-screen-content > .loading,
.widget.diagram-widget.type-1 > .full-screen-content > .loading,
.widget.diagram-widget.type-2 > .full-screen-content > .loading,
.widget.diagram-widget.type-3 > .full-screen-content > .loading,
.widget.diagram-widget.type-4 > .full-screen-content > .loading,
.widget.diagram-widget.type-6 > .full-screen-content > .loading {
  width: 25px;
  height: 25px;
}
.widget.diagram-widget.type-0 > .full-screen-content > .loading > svg,
.widget.diagram-widget.type-1 > .full-screen-content > .loading > svg,
.widget.diagram-widget.type-2 > .full-screen-content > .loading > svg,
.widget.diagram-widget.type-3 > .full-screen-content > .loading > svg,
.widget.diagram-widget.type-4 > .full-screen-content > .loading > svg,
.widget.diagram-widget.type-6 > .full-screen-content > .loading > svg {
  fill: rgba(0, 0, 0, 0.8);
}
.widget.diagram-widget.type-0 > .full-screen-content > .container,
.widget.diagram-widget.type-1 > .full-screen-content > .container,
.widget.diagram-widget.type-2 > .full-screen-content > .container,
.widget.diagram-widget.type-3 > .full-screen-content > .container,
.widget.diagram-widget.type-4 > .full-screen-content > .container,
.widget.diagram-widget.type-6 > .full-screen-content > .container {
  background-color: rgba(255, 255, 255, 0.9);
  width: 85%;
  height: 85%;
}
@media only screen and (max-width: 768px) {
  .widget.diagram-widget.type-0 > .full-screen-content > .container,
  .widget.diagram-widget.type-1 > .full-screen-content > .container,
  .widget.diagram-widget.type-2 > .full-screen-content > .container,
  .widget.diagram-widget.type-3 > .full-screen-content > .container,
  .widget.diagram-widget.type-4 > .full-screen-content > .container,
  .widget.diagram-widget.type-6 > .full-screen-content > .container {
    width: 100%;
    height: 100%;
    background-color: white;
  }
}
.widget.diagram-widget.type-0 > .full-screen-content > .container > .title,
.widget.diagram-widget.type-1 > .full-screen-content > .container > .title,
.widget.diagram-widget.type-2 > .full-screen-content > .container > .title,
.widget.diagram-widget.type-3 > .full-screen-content > .container > .title,
.widget.diagram-widget.type-4 > .full-screen-content > .container > .title,
.widget.diagram-widget.type-6 > .full-screen-content > .container > .title {
  height: 10%;
  width: 100%;
  margin-top: 15px;
}
.widget.diagram-widget.type-0 > .full-screen-content > .container > .title > .container,
.widget.diagram-widget.type-1 > .full-screen-content > .container > .title > .container,
.widget.diagram-widget.type-2 > .full-screen-content > .container > .title > .container,
.widget.diagram-widget.type-3 > .full-screen-content > .container > .title > .container,
.widget.diagram-widget.type-4 > .full-screen-content > .container > .title > .container,
.widget.diagram-widget.type-6 > .full-screen-content > .container > .title > .container {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 10px;
  font-size: 20px;
}
.widget.diagram-widget.type-0 > .full-screen-content > .container > .content,
.widget.diagram-widget.type-1 > .full-screen-content > .container > .content,
.widget.diagram-widget.type-2 > .full-screen-content > .container > .content,
.widget.diagram-widget.type-3 > .full-screen-content > .container > .content,
.widget.diagram-widget.type-4 > .full-screen-content > .container > .content,
.widget.diagram-widget.type-6 > .full-screen-content > .container > .content {
  width: 100%;
  height: 85%;
}
.widget.diagram-widget.type-0 > .full-screen-content > .container > .content > .container,
.widget.diagram-widget.type-1 > .full-screen-content > .container > .content > .container,
.widget.diagram-widget.type-2 > .full-screen-content > .container > .content > .container,
.widget.diagram-widget.type-3 > .full-screen-content > .container > .content > .container,
.widget.diagram-widget.type-4 > .full-screen-content > .container > .content > .container,
.widget.diagram-widget.type-6 > .full-screen-content > .container > .content > .container {
  padding: 30px;
  width: 100%;
  height: 100%;
}
.widget.diagram-widget.type-0 > .full-screen-content > .container > .content > .container > div,
.widget.diagram-widget.type-1 > .full-screen-content > .container > .content > .container > div,
.widget.diagram-widget.type-2 > .full-screen-content > .container > .content > .container > div,
.widget.diagram-widget.type-3 > .full-screen-content > .container > .content > .container > div,
.widget.diagram-widget.type-4 > .full-screen-content > .container > .content > .container > div,
.widget.diagram-widget.type-6 > .full-screen-content > .container > .content > .container > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget.diagram-widget.type-5 {
  padding: 5px;
  flex-direction: column;
  display: flex;
  justify-content: center;
}
.widget.diagram-widget.type-5 > .diagram {
  font-weight: bold;
  text-align: center;
  overflow: hidden;
}
.widget.diagram-widget.type-5 > .diagram > .container {
  height: 100%;
}
.widget.diagram-widget.type-5 > .diagram > .container > .content {
  height: 100%;
}
.widget.diagram-widget.type-5 > .diagram > .container > .content > .container {
  height: 100%;
}
.widget.diagram-widget.type-5 > .title {
  flex-shrink: 0;
  text-align: center;
}
.widget.key-figure-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
}
.widget.key-figure-widget:hover {
  background-color: #f9c007;
}
.widget.key-figure-widget > .value {
  width: 100%;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* #endregion */

/* #region dashboard */

.dashboard-grid > .dashboard-group.size-1 {
  width: 50%;
}
.dashboard-grid > .dashboard-group.size-2 {
  width: 100%;
}
.dashboard-grid > .dashboard-group > .dashboard-group-header {
  padding: 10px;
}
.dashboard-grid > .dashboard-group > .dashboard-group-header > .dashboard-group-header-content {
  border-bottom: 1px solid black;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item {
  padding: 10px;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item.width-1 {
  width: 150px;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item.width-2 {
  width: 320px;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item.width-3 {
  width: 490px;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item.width-4 {
  width: 660px;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item > .dashboard-item-content {
  background-color: #ffc91a;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item .article {
  padding: 20px;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item .article .article-element {
  display: none;
  text-align: center;
}
.dashboard-grid > .dashboard-group > .dashboard-group-content > .dashboard-item .article .article-element .title {
  font-size: 16px;
}
.dashboard > .widgets-panel {
  margin-bottom: 20px;
}
.dashboard > .widgets-panel > .container {
  width: 100%;
}
.dashboard > .container > .dashboard-placeholder {
  background-color: #ffc91a;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item.article:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item {
  padding: 20px;
  /* height: 260px; */
  /* W1995-3 #31 */
  height: 200px;
  width: 100%;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container {
  width: 100%;
  overflow: hidden;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;*/
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .title {
  margin-bottom: 5px;
  color: #333333;
  font-size: 14px;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .title > .container {
  width: 100%;
  text-align: center;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content {
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container {
  width: 100%;
  height: 100%;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .article-element {
  display: none;
  padding-right: 30px;
  padding-top: 10px;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .article-element > .container > .date {
  font-size: 14px;
  font-style: italic;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .article-element > .container > .title {
  font-weight: 600;
  font-size: 16px;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .more {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 20px;
  /*margin-top: -25px;*/

}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .more:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .more:hover > .container > svg {
  fill: #e6b000;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .more > .container {
  height: 100%;
  width: 100%;
}
.dashboard > .container > .dashboard-placeholder > .container > .dashboard-item > .container > .content > .container > div > .container > .more > .container > svg {
  fill: #ffc400;
}
/* #endregion */

/* #region chart */

.chart {
  color: #f2ba00;
  width: 100%;
  height: 100%;
}
.chart > .container {
  width: 100%;
  height: 100%;
}
.chart > .container > .content {
  width: 100%;
  height: 100%;
}
.chart > .container > .content > .container {
  width: 100%;
  height: 100%;
  height: 150px;
  /*height: 100%;*/

}
@media only screen and (max-width: 1024px) {
  .chart > .container > .content > .container {
    height: 250px;
  }
}
.chart > .container > .content > .container svg {
  fill: #f2ba00;
}
.chart > .container > .content > .container > .item {
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
}
.chart > .container > .content > .container > .item > .container {
  text-align: center;
}
.chart > .container > .content > .container > .item > .container > div:first-child {
  margin-left: auto;
  margin-right: auto;
}
.chart > .container > .content > .container > .value-chart {
  font-weight: 800;
  line-height: 1.2;
  padding-bottom: 30px;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.chart > .container > .content > .container > .value-chart > .container {
  width: 100%;
  text-align: center;
}
.chart > .container > .content > .container > .image-chart {
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  background-position: center;
  background-color: white;
}
.chart > .container > .more {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 20px;
  /*margin-top: -25px;*/

}
.chart > .container > .more:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.chart > .container > .more:hover > .container > svg {
  fill: #e6b000;
}
.chart > .container > .more > .container {
  height: 100%;
  width: 100%;
}
.chart > .container > .more > .container > svg {
  fill: #ffc400;
}
svg > g > g:last-child {
  pointer-events: none;
}
/* #endregion */

/* #region method-control, .link-control */

.method-control,
.link-control {
  background-color: #cc9c00;
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  text-decoration: none;
  margin: 0 0 10px 0;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: default;
  color: white;
  text-align: center;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
@media only screen and (max-width: 1024px) {
  .method-control,
  .link-control {
    height: 40px;
  }
}
.method-control:hover,
.link-control:hover {
  background-color: #b38900;
}
.method-control > .container,
.link-control > .container {
  position: relative;
}
/* #endregion */

/* #region dialog */

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  /* #region login-dialog */

  /* #endregion */

  /* #region diagram-dialog */

}
.dialog > .container {
  background-color: white;
  padding: 20px;
  max-height: 90%;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  width: 50%;
  overflow-y: auto;
  /* Helps IE a bit */

}
.dialog > .container > .titlebar {
  background-color: #005791;
  color: white;
  height: 50px;
  min-height: 50px;
  cursor: default;
}
.dialog > .container > .titlebar > .container {
  width: 100%;
  height: 100%;
}
.dialog > .container > .titlebar > .container > .title {
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: 300;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.dialog > .container > .titlebar > .container > .title > .container {
  width: 100%;
  padding-left: 15px;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog > .container > .titlebar > .container > .smaller-title {
  width: 100%;
  height: 65%;
  font-size: 20px;
  font-weight: 300;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: flex-end;
  display: -webkit-box;
  -webkit-box-align: flex-end;
  display: flex;
  align-items: flex-end;
  margin: 0 40px 0 15px;
}
.dialog > .container > .titlebar > .container > .smaller-title > .container {
  padding: 0;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog > .container > .titlebar > .container > .sub-title {
  width: 100%;
  height: 35%;
  font-size: 10px;
  font-weight: 300;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: flex-start;
  display: -webkit-box;
  -webkit-box-align: flex-start;
  display: flex;
  align-items: flex-start;
  margin: -3px 40px 0 15px;
}
.dialog > .container > .titlebar > .container > .sub-title > .container {
  padding: 0;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog > .container > .titlebar > .container > .more {
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.dialog > .container > .titlebar > .container > .more > .container {
  width: 100%;
}
.dialog > .container > .titlebar > .container > .more svg {
  fill: white;
}
.dialog > .container > .content {
  margin: 10px 0;
  overflow-y: auto;
}
.dialog > .container > .content > .container {
  overflow-y: auto;
  height: 100%;
}
.dialog > .container > .content > .container > .button-list .container > .button {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: white;
  height: 40px;
  display: table;
  border-spacing: 0;
}
.dialog > .container > .content > .container > .button-list .container > .button:hover {
  background-color: #00385e;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container {
  display: table-row;
  vertical-align: middle;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > a {
  text-decoration: none;
  display: table-cell;
  padding: 0;
  /*width: auto;*/
  width: 100%;
  border-spacing: 0;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > a > .container {
  height: 40px;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > a > .container > .icon {
  display: none;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > a > .container > .text > .container {
  min-width: 120px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > .icons {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  border-spacing: 0;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > .icons > .container {
  height: 16px;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > .icons > .container > .icon {
  display: inline-block;
  padding-right: 5px;
  height: 100%;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > .icons > .container > .icon > .container {
  height: 100%;
}
.dialog > .container > .content > .container > .button-list .container > .button > .container > .icons > .container > .icon > .container > svg {
  width: 16px;
  fill: white;
  opacity: 0.3;
  height: 100%;
}
.dialog > .container > .content > .container > .editor.boolean-editor {
  height: 35px;
}
.dialog > .container > .content > .container > .editor.boolean-editor > .container > .label {
  left: 35px;
  top: 2.5px;
  font-size: 14px;
}
.dialog > .container > .content > .container > .editor.boolean-editor > .container > .status {
  top: 0;
}
.dialog > .container > .content > .container > .editor.boolean-editor > .container > .control {
  top: 0;
  height: 27px;
  width: 27px;
  margin-right: 32px;
}
.dialog > .container > .content > .container > .editor > .container > .label {
  width: 100%;
  left: 0;
}
.dialog > .container > .content > .container > .editor > .container > .control {
  width: 100%;
  left: 0;
  border: 1px solid #ffc400;
}
.dialog > .container > .content > .container > .value-chart {
  text-align: center;
  color: #f2ba00;
  font-weight: 800;
  /*margin: @margin-20;*/

  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin: 0 auto;
}
.dialog > .container > .content > .container > .dialog-chart {
  text-align: center;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin: 0 auto;
}
.dialog > .container > .bottombar {
  height: 40px;
  min-height: 40px;
  color: white;
}
.dialog > .container > .bottombar > .container {
  display: flex;
  justify-content: flex-end;
}
.dialog > .container > .bottombar > .container::before {
  content: "";
  background-color: #005791;
  display: block;
  flex: 1 1;
}
.dialog > .container > .bottombar > .container > .button,
.dialog > .container > .bottombar > .container .link-control {
  width: auto;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  cursor: default;
  padding: 0 20px;
  margin: 0 0 0 10px;
  min-width: 85px;
  background-color: #005791;
}
.dialog > .container > .bottombar > .container > .button > .container,
.dialog > .container > .bottombar > .container .link-control > .container {
  position: relative;
}
.dialog > .container > .bottombar > .container > .button > .container > a,
.dialog > .container > .bottombar > .container .link-control > .container > a {
  position: relative;
  text-decoration: none;
}
.dialog > .container > .bottombar > .container > .button > .container > a > .container,
.dialog > .container > .bottombar > .container .link-control > .container > a > .container {
  position: relative;
}
.dialog > .container > .bottombar > .container > .button > .container > a > .container > .icon,
.dialog > .container > .bottombar > .container .link-control > .container > a > .container > .icon {
  display: none;
}
.dialog > .container > .bottombar > .container > .button > .container > a > .container > .text,
.dialog > .container > .bottombar > .container .link-control > .container > a > .container > .text {
  position: relative;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  display: block;
  /* Override av firefox TODO vi ska fixa detta så att det funkar bättre i firefox, men för tillfället gör vi denna override för att det ska bli funktionellt. */

}
.dialog > .container > .bottombar > .container > .button > .container > a > .container > .text > .container,
.dialog > .container > .bottombar > .container .link-control > .container > a > .container > .text > .container {
  min-width: 120px;
  padding: 5px 0;
}
.dialog > .container > .bottombar > .container > .button:hover,
.dialog > .container > .bottombar > .container .link-control:hover {
  background-color: #00385e;
}
.dialog > .container > .bottombar > .container > .button > .container,
.dialog > .container > .bottombar > .container .link-control > .container {
  height: 100%;
  width: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.dialog > .container > .bottombar > .container > .button > .container > a > .container > .text > .container,
.dialog > .container > .bottombar > .container .link-control > .container > a > .container > .text > .container {
  min-width: 40px;
}
@media only screen and (max-width: 1024px) {
  .dialog {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    max-height: 100%;
    overflow: visible;
    margin: 0;
    padding: 0;
    /* Aligns its content in @position (start, end, center, baseline, stretch) */
    display: -ms-flexbox;
    -ms-flex-align: start;
    display: -webkit-box;
    -webkit-box-align: start;
    display: flex;
    align-items: start;
  }
  .dialog > .container {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: inherit;
    padding-bottom: 40px;
  }
  .dialog > .container > .bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 49;
  }
}
.dialog.text-editor-dialog > .container {
  position: relative;
  height: 80%;
}
.dialog.text-editor-dialog > .container > .content {
  position: absolute;
  width: auto;
  top: 80px;
  bottom: 70px;
  left: 20px;
  right: 20px;
  background-color: #ffc91a;
  padding: 20px;
}
.dialog.text-editor-dialog > .container > .content > .container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.dialog.text-editor-dialog > .container > .content > .container > textarea {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid #f2ba00;
  padding: 10px;
  resize: none;
}
.dialog.text-editor-dialog > .container > .content > .container > textarea:focus {
  outline: none;
}
.dialog.text-editor-dialog > .container > .bottombar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: auto;
}
@media only screen and (max-width: 1024px) {
  .dialog.text-editor-dialog > .container {
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .dialog.text-editor-dialog > .container > .content {
    left: 0;
    right: 0;
    top: 50px;
  }
}
.dialog.code-editor-dialog > .container {
  position: relative;
  height: 100%;
}
.dialog.code-editor-dialog > .container > .content {
  position: absolute;
  width: auto;
  top: 80px;
  bottom: 70px;
  left: 20px;
  right: 20px;
  background-color: #ffc91a;
  padding: 0px;
}
.dialog.code-editor-dialog > .container > .content > .container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.dialog.code-editor-dialog > .container > .content > .container > pre {
  width: 100%;
  height: 100%;
  margin: 0;
  /*&:focus {
                            outline: none;
                        }*/

}
.dialog.code-editor-dialog > .container > .bottombar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: auto;
}
@media only screen and (max-width: 1024px) {
  .dialog.code-editor-dialog > .container {
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .dialog.code-editor-dialog > .container > .content {
    left: 0;
    right: 0;
    top: 50px;
  }
}
.dialog.image-editor-dialog > .container {
  position: relative;
  height: 80%;
  width: auto;
}
.dialog.image-editor-dialog > .container > .content {
  position: absolute;
  width: auto;
  top: 80px;
  bottom: 70px;
  left: 20px;
  right: 20px;
  background-color: #ffc91a;
  padding: 20px;
}
.dialog.image-editor-dialog > .container > .content > .container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.dialog.image-editor-dialog > .container > .content > .container > .image-placeholder {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.dialog.image-editor-dialog > .container > .content > .container > .image-placeholder > .container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.dialog.image-editor-dialog > .container > .content > .container > .image-placeholder > .container > img {
  max-height: 100%;
  max-width: 100%;
}
.dialog.image-editor-dialog > .container > .content > .container > .image-placeholder > .container > .loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dialog.image-editor-dialog > .container > .content > .container > .image-placeholder.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #333333;
  z-index: 50;
}
.dialog.image-editor-dialog > .container > .bottombar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: auto;
}
.dialog.image-editor-dialog > .container > .bottombar > .container > .image-information {
  margin-right: 20px;
}
@media only screen and (max-width: 1024px) {
  .dialog.image-editor-dialog > .container {
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .dialog.image-editor-dialog > .container > .content {
    left: 0;
    right: 0;
    top: 50px;
  }
}
.dialog.login-dialog > .container {
  padding: 10px;
}
.dialog.login-dialog > .container > .titlebar {
  display: none;
}
.dialog.login-dialog > .container > .content {
  margin: 0;
  padding: 0;
}
.dialog.login-dialog > .container > .content > .container > .login > .container {
  padding: 20px;
  max-width: 100%;
  width: 100%;
}
.dialog.login-dialog > .container > .content > .container > .login > .container > .logotype {
  margin: 0px auto 20px auto;
}
.dialog.login-dialog > .container > .content > .container > .login > .container > .footer {
  display: none;
}
.dialog.login-dialog > .container > .content > .container > .login > .container .button {
  height: auto;
}
.dialog.login-dialog > .container > .bottombar {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .dialog.login-dialog > .container {
    padding: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    height: 100%;
  }
  .dialog.login-dialog > .container > .content {
    height: 100%;
    min-height: 100%;
    margin: 0;
  }
  .dialog.login-dialog > .container > .content > .container {
    height: 100%;
  }
  .dialog.login-dialog > .container > .content > .container > .login {
    height: 100%;
  }
}
.dialog.diagram-dialog > .container {
  max-width: 65%;
  width: auto;
}
.dialog.diagram-dialog > .container > .content > .container > .value-chart {
  text-align: center;
  color: #f2ba00;
  font-weight: 800;
  margin: 20px;
}
.dialog.diagram-dialog > .container > .content > .container > .value-chart > .container {
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog.chart-dialog > .container > .content > .container {
  padding: 15px;
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) {
  .dialog,
  .widget.diagram-widget .full-screen-content {
    background-color: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: saturate(100%) blur(5px);
  }
}
/* #endregion */

/* #region group */

.group > .container > .title {
  padding: 0 0 5px 0;
}
.group > .container > .content {
  font-size: 0;
}
.group > .container > .content > .container > .button:nth-child(5n + 1) {
  background-color: #cc9c00;
}
.group > .container > .content > .container > .button:nth-child(5n + 1):hover {
  background-color: #b38900;
}
.group > .container > .content > .container > .button:nth-child(5n + 2) {
  background-color: #b38900;
}
.group > .container > .content > .container > .button:nth-child(5n + 2):hover {
  background-color: #9a7500;
}
.group > .container > .content > .container > .button:nth-child(5n + 3) {
  background-color: #e6b000;
}
.group > .container > .content > .container > .button:nth-child(5n + 3):hover {
  background-color: #cd9c00;
}
.group > .container > .content > .container > .button:nth-child(5n + 4) {
  background-color: #f2ba00;
}
.group > .container > .content > .container > .button:nth-child(5n + 4):hover {
  background-color: #d9a600;
}
.group > .container > .content > .container > .button:nth-child(5n + 5) {
  background-color: #997500;
}
.group > .container > .content > .container > .button:nth-child(5n + 5):hover {
  background-color: #806200;
}
/* #endregion */

/* #region xxx-tablet-portrait */

@media only screen and (max-width: 480px) {
  .hidden-mobile-landscape {
    display: none !important;
  }
}
@media only screen and (max-width: 768px) {
  .hidden-tablet-portrait {
    display: none !important;
  }
}
@media only screen and (max-width: 1024px) {
  .hidden-tablet-landscape {
    display: none !important;
  }
}
.hidden-inverted-mobile-landscape {
  display: none !important;
}
@media only screen and (max-width: 480px) {
  .hidden-inverted-mobile-landscape {
    display: block !important;
  }
}
.hidden-inverted-tablet-portrait {
  display: none !important;
}
@media only screen and (max-width: 768px) {
  .hidden-inverted-tablet-portrait {
    display: block !important;
  }
}
/* #endregion */

/* #region selectbox */

.selectbox {
  cursor: default;
}
.selectbox > .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  display: -webkit-box;
  -webkit-box-pack: center;
  display: flex;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}
.selectbox > .container svg {
  width: 16px;
  height: 16px;
  fill-opacity: 0.2;
}
.selectbox > .container svg .partial-select-path {
  display: none;
}
.selectbox > .container svg:hover svg {
  fill-opacity: 0.4;
}
.selectbox:hover > .container svg .select-path {
  display: block;
}
.selectbox.selected > .container svg {
  fill-opacity: 1;
}
.selectbox.selected > .container svg .select-path {
  display: block;
}
.selectbox.partially-selected > .container svg {
  fill-opacity: 1;
}
.selectbox.partially-selected > .container svg .select-path {
  display: none;
}
.selectbox.partially-selected > .container svg .partial-select-path {
  display: block;
}
.selectbox.selected:hover > .container svg .select-path {
  display: block;
}
/* #endregion */

/* #region context-menu-backdrop */

.context-menu-backdrop {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: transparent;
}
/* #endregion */

/* #region context-menu */

.context-menu {
  position: absolute;
  padding: 10px;
  margin: 0;
  background-color: white;
  min-height: 32px;
  z-index: 20;
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  max-height: 90%;
  overflow-y: auto;
}
@media only screen and (max-width: 480px) {
  .context-menu {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 5px;
  }
  .context-menu > .arrow {
    display: none;
  }
  .context-menu > .container > .group {
    width: 100% !important;
  }
  .context-menu > .container > .button-list {
    width: 100% !important;
  }
  .context-menu > .container > .button-list > .container > .button {
    width: 100% !important;
    margin: 5px 0 0 0;
  }
  .context-menu > .container > .button-list > .container > .button:first-child {
    margin: 0;
  }
}
.context-menu > .container > .empty {
  /*font-size: @font-size-14;*/
  text-align: center;
  padding: 10px;
  font-style: italic;
}
.context-menu > .container > .arrow {
  width: 0;
  height: 0;
  position: absolute;
  border: 16px solid transparent;
  display: none;
}
.context-menu > .container > .arrow:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border: 15px solid transparent;
}
.context-menu > .container > .arrow.below:after {
  top: -16px;
  left: -15px;
  border-top: 15px solid white;
}
.context-menu > .container > .arrow.left:after {
  top: -15px;
  left: -14px;
  border-right: 15px solid white;
}
.context-menu > .container > .arrow.above:after {
  top: -14px;
  left: -15px;
  border-bottom: 15px solid white;
}
.context-menu > .container > .arrow.right:after {
  top: -15px;
  left: -16px;
  border-left: 15px solid white;
}
.context-menu > .container > .titlebar {
  height: 40px;
  background-color: #b38900;
  margin-top: -5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 5px;
  color: white;
  position: relative;
}
.context-menu > .container > .titlebar > .container > .title {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 0;
  bottom: 0;
  font-size: 16px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.context-menu > .container > .titlebar > .container > .title > .container {
  text-align: center;
  width: 100%;
}
.context-menu > .container > .titlebar > .container > .close-button {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.context-menu > .container > .titlebar > .container > .close-button > .container > svg {
  fill: white;
  width: 16px;
  height: 16px;
}
.context-menu > .container > .group > .container > .content > .container > .button {
  height: 100px;
  /*&:hover {
                                background-color: @color-dark-1-hover;
                            }*/

}
.context-menu > .container > .group > .container > .content > .container > .button > .container > a > .container > .icon {
  bottom: 25%;
}
.context-menu > .container > .group > .container > .content > .container > .button > .container > a > .container > .icon > .container svg {
  width: 40px;
  height: 40px;
  fill: white;
}
.context-menu > .container > .group > .container > .content > .container > .button > .container > a > .container > .text {
  top: 75%;
  font-size: 12px;
}
/* #endregion */

/* #region button-list */

.button-list > .container > .title {
  position: relative;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 600;
  height: 35px;
}
.button-list > .container > .title > .container {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
}
.button-list > .container > .button {
  height: 45px;
  width: 300px;
  min-width: 100px;
  display: block;
  margin: 10px 0 0 0;
  /*.color-iterate();*/
  background-color: #005791;
  color: white;
}
.button-list > .container > .button:hover {
  background-color: #d9a600;
}
.button-list > .container > .button.strong > .container > a > .container > .text > .container {
  font-weight: 800;
}
.button-list > .container > .button.strong > .container > a > .container > .maintext > .container {
  font-weight: 800;
}
.button-list > .container > .button.strong > .container > a > .container > .subtext > .container {
  font-weight: 800;
}
.button-list > .container > .button:first-child {
  margin: 0;
}
.button-list > .container > .button > .container > a {
  text-decoration: none;
}
.button-list > .container > .button > .container > a > .container > .icon {
  display: none;
}
.button-list > .container > .button > .container > a > .container > .text {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.button-list > .container > .button > .container > a > .container > .text > .container {
  text-align: center;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 400;
  width: 100%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.button-list > .container > .button > .container > a > .container > .maintext {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.button-list > .container > .button > .container > a > .container > .maintext > .container {
  text-align: center;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 400;
  width: 100%;
  height: 60%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.button-list > .container > .button > .container > a > .container > .subtext {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.button-list > .container > .button > .container > a > .container > .subtext > .container {
  text-decoration: none;
  text-align: center;
  padding: 0 20px;
  font-size: 10px;
  font-weight: 400;
  width: 100%;
  height: 40%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.button-list > .container > .button.invisible {
  display: none;
}
/* #endregion */

/* #region tab-container */

.tab-container > .message {
  display: block;
  text-align: center;
  font-style: italic;
}
/* #endregion */

/* #region tab-control */

.tab-control {
  width: 100%;
  max-width: 100%;
}
.tab-control:first-of-type {
  padding-bottom: 20px;
}
.tab-control > .container > .headers {
  background-color: #f2ba00;
  color: white;
}
.tab-control > .container > .headers > .container {
  font-size: 0;
}
.tab-control > .container > .headers > .container > .header {
  position: relative;
  font-size: 14px;
  font-weight: 300;
  display: inline-block;
  padding: 15px;
  cursor: default;
}
.tab-control > .container > .headers > .container > .header:hover {
  background-color: #d9a600;
}
.tab-control > .container > .headers > .container > .header.selected {
  background-color: #005791;
  color: white;
  /*&:after { // Experimental /Jonte (2013-03-27)
							content: '';
							position: absolute;
							bottom: 0;
							left: 50%;
							margin-left: -8px;
							width: 0;
							height: 0;
							background-color: transparent;
							border-left: 8px solid transparent;
							border-right: 8px solid transparent;
							border-bottom: 8px solid #ffffff;
						}*/

}
.tab-control > .container > .headers > .container > .header.selected:hover {
  background-color: #004878;
}
.tab-control > .container > .pages {
  padding: 20px 0 0 0;
}
.tab-control > .container > .pages > .container > .page > .container {
  font-size: 0;
  overflow: hidden;
}
.tab-control > .container > .pages > .container > .page > .container > .group {
  background-color: #f2f2f2;
  padding: 0 20px 10px 20px;
}
.tab-control > .container > .pages > .container > .page > .container > .group > .container > .title {
  font-size: 14px;
  font-weight: 600;
  height: 50px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.tab-control > .container > .pages > .container > .page > .container > .group > .container > .content > .container > .editor {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}
.tab-control > .container > .pages > .container > .page > .container > .empty {
  font-size: 14px;
  text-align: center;
  padding: 10px;
  font-style: italic;
}
.tab-control > .container > .pages > .container > .page > .container > .message {
  position: relative;
  width: 100%;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}
.tab-control > .container > .pages > .container > .page > .container > .widgets-panel {
  margin-bottom: 20px;
}
.tab-control > .container > .pages > .container > .page > .container > .widgets-panel > .container {
  width: 100%;
}
/* #endregion */

/* #region ItemTogglerControl */

.itemToggler {
  /*min-height: 500px;*/
  overflow-y: auto;
  width: 100% !important;
  height: 100%;
  /* #region show only selective columns on small displays */

  /* #endregion */

}
.itemToggler > .container {
  /*width: 100%;
		height: 100%;*/
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
}
.itemToggler > .container > .stateContainer {
  display: flex;
  align-items: stretch;
  /*padding: 0 10px;*/
  padding-right: 10px;
}
.itemToggler > .container > .stateContainer:last-child {
  padding-right: 0;
}
.itemToggler > .container > .stateContainer.all > .container > .content > .container > .placeHolder {
  display: none;
}
.itemToggler > .container > .stateContainer.all > .container > .content > .container > .item > .container > .icons > .container > .icon {
  display: none;
}
.itemToggler > .container > .stateContainer > .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.itemToggler > .container > .stateContainer > .container > .header {
  background-color: #e6b000;
  color: white;
  padding: 7px;
  text-align: center;
  font-size: 150%;
}
.itemToggler > .container > .stateContainer > .container > .content {
  /*overflow-y: auto;*/
  flex: 1;
  display: flex;
  /* Must be done for container to take up full height for some wierd reason */
  flex-direction: column;
}
.itemToggler > .container > .stateContainer > .container > .content > .container {
  flex: 1;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item {
  background-color: #f2ba00;
  margin: 1px 0;
  width: 100%;
  display: block;
  height: 30px;
  padding: 0;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item:hover {
  background-color: #d9a600;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container {
  display: flex;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container > a {
  flex: 1;
  padding: 5px 10px;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container > .icons {
  width: 25px;
  height: 100%;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container > .icons > .container {
  height: 100%;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container > .icons > .container .icon {
  height: 100%;
  cursor: default;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container > .icons > .container .icon > .container {
  height: 10px;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container > .icons > .container .icon > .container > svg {
  fill: white;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item > .container > .icons > .container .icon:hover > .container > svg {
  fill: #e6e6e6;
}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item .text {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.itemToggler .placeHolder {
  /*background-color: white;*/
  background-color: #ffd959;
  border: 1px dotted #f2ba00;
  display: inline-block;
  margin: 0;
  min-height: 30px;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item {
    opacity: 0.5;
  }
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(1),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(2),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(3),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(4),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(5),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(6),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(7),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(8) {
    opacity: 1;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item {
    opacity: 0.5;
  }
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(1),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(2),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(3),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(4),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(5),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(6) {
    opacity: 1;
  }
}
@media only screen and (max-width: 480px) {
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item {
    opacity: 0.5;
  }
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(1),
  .itemToggler > .container > .stateContainer:not(.all) > .container > .content > .container > .item:nth-child(2) {
    opacity: 1;
  }
}
/* #endregion*/

/* #region AutoTextListControl */

.auto-text-list {
  cursor: default;
  max-width: 500px;
}
.auto-text-list > .container > .ro {
  /* background-color: lighten(black, 95%); */
  background-color: #f7f7f7;
  /* background-color: @color-dark-1; */

}
.auto-text-list > .container > .item {
  position: relative;
  height: 35px;
  padding: 5px 15px 5px 10px;
  margin-bottom: 5px;
}
.auto-text-list > .container > .item:hover {
  background-color: #ffc91a;
}
.auto-text-list > .container > .item:hover > .container > .delete > .container > svg {
  visibility: visible;
}
.auto-text-list > .container > .item > .container {
  height: 100%;
}
.auto-text-list > .container > .item > .container > .title {
  height: 100%;
  padding-right: 15px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.auto-text-list > .container > .item > .container > .title > .container {
  width: 100%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-text-list > .container > .item > .container > .delete {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 10px 0 5px;
}
.auto-text-list > .container > .item > .container > .delete:hover > .container > svg {
  fill: #cc9d00;
}
.auto-text-list > .container > .item > .container > .delete > .container {
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.auto-text-list > .container > .item > .container > .delete > .container > svg {
  visibility: hidden;
  fill: #ffc400;
  width: 15px;
  height: 15px;
  max-width: 100%;
  max-height: 100%;
}
.auto-text-list > .container > .item > .container > .delete > .loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.auto-text-list > .container > .item > .container > .delete > .loading > svg {
  fill: white;
}
.auto-text-list > .container > .item > .loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.auto-text-list > .container > .item > .loading > svg {
  fill: #f2ba00;
}
.auto-text-list > .container > .add-button {
  position: relative;
  background-color: #cc9c00;
  width: 100%;
  min-width: 100px;
  height: 35px;
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  color: white;
  text-align: center;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.auto-text-list > .container > .add-button:hover {
  background-color: #b38900;
}
.auto-text-list > .container > .add-button > .container {
  position: relative;
}
.auto-text-list > .container > .add-button > .loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.auto-text-list > .container > .add-button > .loading > svg {
  fill: white;
}
/* #endregion */

/* #region editor */

.editor {
  background-color: transparent;
  width: 100%;
  margin: 0;
  padding: 0 0 10px 0;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  /* Defines the different heights editors can have */

}
@media only screen and (max-width: 1024px) {
  .editor {
    height: 50px;
  }
}
.editor.boolean-editor {
  height: 35px;
}
.editor.boolean-editor > .container > .label {
  left: 35px;
  top: 2.5px;
  font-size: 14px;
}
.editor.boolean-editor > .container > .status {
  top: 0;
}
.editor.boolean-editor > .container > .control {
  top: 0;
  margin-right: 32px;
}
.editor.contextMenu > .container > .control > .container > div > .container {
  padding-right: 20px;
  word-break: break-all;
}
.editor > .container {
  position: relative;
  width: 100%;
  height: 100%;
}
.editor > .container > .label {
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 100%;
  padding-top: 0;
  font-size: 10px;
  font-weight: 400;
}
@media only screen and (max-width: 1024px) {
  .editor > .container > .label {
    padding-top: 0;
  }
}
.editor > .container > .label > .container {
  width: 100%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor > .container > .help-button {
  position: absolute;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  width: 16px;
  height: 16px;
  text-align: center;
  border-radius: 8px;
  font-size: 11px;
}
.editor > .container > .status {
  position: absolute;
  top: 15px;
  left: -8px;
  bottom: 0;
  width: 5px;
}
.editor > .container > .status.changed {
  background-color: #70797a;
}
.editor > .container > .status.done {
  background-color: #71b84a;
}
.editor > .container > .status.error {
  background-color: #c4262c;
  padding: 0;
}
.editor > .container > .status.saving {
  background-color: #ffda31;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-name: pulse;
  -o-animation-name: pulse;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  opacity: 0;
}
.editor > .container > .control {
  position: absolute;
  top: 15px;
  font-size: 14px;
  border: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.editor > .container > .control > .tooltip-hover {
  position: absolute;
  min-width: 300px;
  color: white;
  background-color: #005791;
  top: 150%;
  left: -50%;
  z-index: 999;
  padding: 10px;
}
.editor > .container > .control > .tooltip-hover:after {
  position: absolute;
  top: -15px;
  left: 50%;
  border-bottom: 15px solid transparent;
  border-bottom: 15px solid #005791;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  content: " ";
  z-index: 9999;
}
.editor > .container > .control > .container {
  height: 100%;
  width: 100%;
}
.editor > .container > .control > .container input,
.editor > .container > .control > .container select {
  border: 0;
}
.editor > .container > .control > .container input:focus,
.editor > .container > .control > .container select:focus {
  outline: none;
}
.editor > .container > .more {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
  width: 20px;
  cursor: default;
}
.editor > .container > .more:hover {
  background-color: #ffc91a;
}
.editor > .container > .more:hover > .container > svg {
  fill: #cc9d00;
}
.editor > .container > .more > .container {
  height: 100%;
  width: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.editor > .container > .more > .container svg {
  fill: #ffc400;
  width: 18px;
  height: 18px;
}
.editor.editor-height-1 {
  height: 50px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-1 {
    height: 50px;
  }
}
.editor.editor-height-2 {
  height: 75px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-2 {
    height: 100px;
  }
}
.editor.editor-height-3 {
  height: 100px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-3 {
    height: 150px;
  }
}
.editor.editor-height-4 {
  height: 125px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-4 {
    height: 200px;
  }
}
.editor.editor-height-5 {
  height: 150px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-5 {
    height: 250px;
  }
}
.editor.editor-height-6 {
  height: 175px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-6 {
    height: 300px;
  }
}
.editor.editor-height-7 {
  height: 200px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-7 {
    height: 350px;
  }
}
.editor.editor-height-8 {
  height: 225px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-8 {
    height: 400px;
  }
}
.editor.editor-height-9 {
  height: 250px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-9 {
    height: 450px;
  }
}
.editor.editor-height-10 {
  height: 275px;
}
@media only screen and (max-width: 1024px) {
  .editor.editor-height-10 {
    height: 500px;
  }
}
/* #endregion */

/* #region date-editor */

.editor.date-editor > .container > .control > .container > input {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 10px;
  border: 0 solid #ffc400;
}
/* #endregion */

/* #region date-period-editor */

.editor.date-period-editor > .container > .control > .container > .control {
  height: 100%;
}
.editor.date-period-editor > .container > .control > .container > .control > .container {
  display: flex;
  height: 100%;
}
.editor.date-period-editor > .container > .control > .container > .control > .container > input {
  width: 10px;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 10px;
  border-top: 0 solid #ffc400;
  border-bottom: 0 solid #ffc400;
  border-left: 0 solid #ffc400;
  flex: 1 1 50%;
  overflow: hidden;
}
.editor.date-period-editor > .container > .control > .container > .control > .container > input:last-child {
  border-right: 0 solid #ffc400;
}
/* #endregion */

/* #region date-time-editor */

.editor.date-time-editor > .container > .control > .container > input {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 10px;
  border: 0 solid #ffc400;
}
.editor.date-time-editor > .container > .control > .container > .panel {
  width: 100%;
  height: 100%;
}
.editor.date-time-editor > .container > .control > .container > .panel > .container {
  width: 100%;
  height: 100%;
}
.editor.date-time-editor > .container > .control > .container > .panel > .container > input {
  position: absolute;
  top: 0;
  bottom: 0;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 10px;
  border: 0 solid #ffc400;
}
.editor.date-time-editor > .container > .control > .container > .panel > .container > .date-control {
  left: 0;
  width: 70%;
}
.editor.date-time-editor > .container > .control > .container > .panel > .container > .time-control {
  width: 30%;
  right: 0;
  border-left: none;
  text-align: center;
}
/* #endregion */

/* #region decimal-editor */

.editor.decimal-editor > .container > .control > .container > input {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 20px 5px 10px;
  border: 0 solid #ffc400;
}
/* #endregion */

/*#region readonly-file */

.readonly-file {
  height: 100%;
}
/* #endregion */

/* #region file-editor */

.editor.file-editor {
  height: 100px;
}
@media only screen and (max-width: 1024px) {
  .editor.file-editor {
    height: 150px;
  }
}
.editor.file-editor > .container > .control > .container > .thumbnail {
  position: relative;
  background-color: white;
  border: 0 solid #ffc400;
  width: 100%;
  height: 100%;
}
.editor.file-editor > .container > .control > .container > .thumbnail:hover > .container > .icon > .container > svg,
.editor.file-editor > .container > .control > .container > .thumbnail:hover > .container > .no-file > .container > svg {
  fill: #b38900;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container > .icon {
  width: 100%;
  height: 100%;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container > .icon > .container {
  height: 100%;
  width: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  display: -webkit-box;
  -webkit-box-pack: center;
  display: flex;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container > .icon > .container > svg {
  max-height: 70%;
  max-width: 50%;
  fill: #e6b000;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-file {
  width: 100%;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-file > .container {
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  display: -webkit-box;
  -webkit-box-pack: center;
  display: flex;
  justify-content: center;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-file > .container > svg {
  height: 60px;
  fill: #e6b000;
}
.editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-file > .container > input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.editor.file-editor.locked > .container > .control > .container > .readonly-file > a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  overflow: hidden;
}
.editor.file-editor.locked > .container > .control > .container > .readonly-file > a > svg {
  fill: rgba(51, 51, 51, 0.2);
}
.editor.file-editor.locked > .container > .control > .container > .readonly-file > a:hover > svg {
  fill: rgba(51, 51, 51, 0.3);
}
/* #endregion */

/* #region integer-editor */

.editor.integer-editor > .container > .control > .container > input {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 20px 5px 10px;
  border: 0 solid #ffc400;
}
/* #endregion */

/* #region image-editor */

.editor.image-editor {
  height: 100px;
}
@media only screen and (max-width: 1024px) {
  .editor.image-editor {
    height: 150px;
  }
}
.editor.image-editor > .container > .control > .container > .thumbnail {
  position: relative;
  background-color: white;
  border: 0 solid #ffc400;
  height: 100%;
}
.editor.image-editor > .container > .control > .container > .thumbnail:hover > .container > .no-image > .container > svg {
  fill: #b38900;
}
.editor.image-editor > .container > .control > .container > .thumbnail > .container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.editor.image-editor > .container > .control > .container > .thumbnail > .container > .image {
  width: 100%;
  height: 100%;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-image {
  width: 100%;
  height: 100%;
}
.editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-image > .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  display: -webkit-box;
  -webkit-box-pack: center;
  display: flex;
  justify-content: center;
}
.editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-image > .container > svg {
  width: 60px;
  fill: #e6b000;
}
.editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-image > .container > input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.editor.image-editor > .container > .control > .container > .thumbnail .loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
}
.editor.image-editor.locked > .container > .control > .container > div {
  width: 100%;
  height: 100%;
}
.editor.image-editor.locked > .container > .control > .container > div > a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  overflow: hidden;
}
.editor.image-editor.locked > .container > .control > .container > div > a > svg {
  fill: rgba(51, 51, 51, 0.2);
}
/* #endregion */

/* #region boolean-editor */

.editor.boolean-editor > .container > .control > .container .checkbox {
  height: 25px;
  width: 25px;
  background-color: white;
  border: 0 solid #ffc400;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
@media only screen and (max-width: 1024px) {
  .editor.boolean-editor > .container > .control > .container .checkbox {
    height: 25px;
    width: 25px;
  }
}
.editor.boolean-editor > .container > .control > .container .checkbox > .container {
  height: 16px;
  width: 16px;
}
.editor.boolean-editor > .container > .control > .container .checkbox > .container > svg {
  height: 16px;
  fill: #f2ba00;
  display: none;
}
.editor.boolean-editor > .container > .control > .container .checkbox.checked > .container > svg {
  display: block;
}
.editor.boolean-editor.locked > .container > .control > .container > .checkbox {
  background-color: transparent;
}
/* #endregion */

/* #region multi-select-editor */

.editor.multi-select-editor > .container > .control {
  cursor: pointer;
  border-spacing: 0px;
}
.editor.multi-select-editor > .container > .control > .container {
  width: 100%;
  border: 0 solid #ffc400;
  background-color: white;
  padding: 5px;
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder {
  overflow: hidden;
  font-size: 0;
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder .tag {
  font-size: 12px;
  background-color: #f2ba00;
  color: white;
  height: 18px;
  max-height: 18px;
  margin: 0 2px 2px 0;
  padding: 0px 5px;
  border-radius: 4px 3px;
  display: inline-block;
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-1 {
  height: 25px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-1 {
    height: 0px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-2 {
  height: 50px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-2 {
    height: 50px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-3 {
  height: 75px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-3 {
    height: 100px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-4 {
  height: 100px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-4 {
    height: 150px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-5 {
  height: 125px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-5 {
    height: 200px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-6 {
  height: 150px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-6 {
    height: 250px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-7 {
  height: 175px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-7 {
    height: 300px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-8 {
  height: 200px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-8 {
    height: 350px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-9 {
  height: 225px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-9 {
    height: 400px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-10 {
  height: 250px;
}
@media only screen and (max-width: 1024px) {
  .editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder-height-10 {
    height: 450px;
  }
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .label {
  font-size: 10px;
  overflow: hidden;
  color: #e6b000;
  padding: 0 0 0 0;
}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container > .loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.75);
}
.editor.multi-select-editor.locked > .container > .control > .container {
  background-color: transparent;
  cursor: default;
  color: #333333;
}
/* #endregion */

/* #region loading */

.loading {
  text-align: center;
  width: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: fadein;
  -o-animation-name: fadein;
  -webkit-animation-name: fadein;
  animation-name: fadein;
  opacity: 1;
}
.loading > svg {
  margin: 0 auto;
  fill: #b38900;
  width: 30px;
}
/* #endregion */

/* #region option-editor */

.editor.option-editor > .container > .control > .container > select {
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-family: "Open Sans";
  padding: 2px 2px;
  border: 0 solid #ffc400;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  padding: 0 10px;
  background-color: white;
  cursor: default;
}
.editor.option-editor > .container > .control > .container > select::-ms-expand {
  display: none;
}
.editor.option-editor > .container > .control > .container > select[disabled] {
  background-color: transparent;
  color: #333333;
}
.editor.option-editor > .container > .control > .container > select.color-red {
  background-color: #c4262c;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-purple {
  background-color: #673080;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-blue {
  background-color: #4b82be;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-turquoise {
  background-color: #1aa8b4;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-green {
  background-color: #71b84a;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-brown {
  background-color: #a9988a;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-pink {
  background-color: #e98b99;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-grey {
  background-color: #70797a;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-yellow {
  background-color: #ffda31;
  border: none;
  color: #333333;
  font-weight: 300;
}
.editor.option-editor > .container > .control > .container > select.color-orange {
  background-color: #f8ac45;
  border: none;
  color: white;
  font-weight: 300;
}
.editor.option-editor.locked > .container > .control > .container > select {
  /*background-color: transparent;*/
  cursor: default;
}
/* #endregion */

/* #region dropdown-editor */

.editor.dropdown-editor > .container > .control > .container > select {
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-family: "Open Sans";
  border: 0 solid #ffc400;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  border-radius: 0;
  padding: 0px 10px;
  background-color: white;
  cursor: default;
}
.editor.dropdown-editor > .container > .control > .container > select::-ms-expand {
  display: none;
}
.editor.dropdown-editor > .container > .control > .container > span.readonly {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 2px 10px;
  border: 0 solid #ffc400;
  resize: none;
  cursor: default;
  background-color: transparent;
  height: 100%;
  color: #333333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* #endregion */

/* #region valuepicker-editor */

.editor.valuepicker-editor > .container > .control > .container > div {
  height: 100%;
  width: 100%;
}
.editor.valuepicker-editor > .container > .control > .container > div > .container {
  height: 100%;
  width: 100%;
  font-size: 0;
  border: solid #ffc400 1px;
  text-align: left;
}
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box {
  height: 100%;
  display: inline-block;
  border-left: solid #ffc400 1px;
  text-align: center;
  font-size: 14px;
  padding: 0 0;
  margin: 0 0;
  color: #f2ba00;
}
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box.included {
  background-color: #f2ba00;
  opacity: 0.8;
  color: white;
}
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box:hover,
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box.selected,
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box.included:hover {
  background-color: #f2ba00;
  opacity: 1;
  color: white;
  cursor: default;
}
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box:first-child {
  border-left-width: 0;
}
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box > .container {
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.editor.valuepicker-editor.locked > .container > .control {
  background-color: transparent;
  color: #333333;
  cursor: default;
}
/* #endregion */

/* #region string-editor */

.editor.string-editor > .container > .control > .container > input {
  width: 100%;
  height: 100%;
  border: 0 solid #ffc400;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 20px 5px 10px;
}
/* #endregion */

/* #region string-editor */

.editor.multiline-string-editor {
  height: 120px;
}
.editor.multiline-string-editor > .container > .control > .container > textarea {
  width: 100%;
  height: 100%;
  border: 0 solid #ffc400;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 20px 5px 10px;
  resize: none;
}
/* #endregion */

/* #region percent-editor */

.editor.percent-editor > .container > .control > .container > div {
  height: 100%;
}
.editor.percent-editor > .container > .control > .container > div > .container {
  height: 100%;
  display: flex;
  border: 0 solid #ffc400;
  background-color: white;
}
.editor.percent-editor > .container > .control > .container > div > .container > .value {
  height: 100%;
  border: none;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px;
  text-align: right;
  background-color: transparent;
  flex-grow: 1;
}
.editor.percent-editor > .container > .control > .container > div > .container > span {
  padding: 5px 10px 5px 0;
  cursor: default;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.editor.percent-editor > .container > .control > .container > div > .container > .progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  overflow: hidden;
}
.editor.percent-editor > .container > .control > .container > div > .container > .progress-bar > .container > .progress-bar-value {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #f2ba00;
}
.editor.percent-editor.locked > .container > .control > .container > div > .container {
  color: #333333;
  cursor: default;
  background-color: transparent;
}
.editor.percent-editor.locked > .container > .control > .container > div > .container > .value {
  height: 100%;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.editor.percent-editor.locked > .container > .control > .container > div > .container > span {
  background-color: transparent;
}
/* #endregion */

/* #region fraction-editor */

.editor.fraction-editor > .container > .control > .container > div {
  height: 100%;
}
.editor.fraction-editor > .container > .control > .container > div > .container {
  height: 100%;
  display: flex;
  border: 0 solid #ffc400;
  background-color: white;
}
.editor.fraction-editor > .container > .control > .container > div > .container > input {
  width: 10px;
  flex: 1 1 50%;
  height: 100%;
  border: none;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px;
  text-align: center;
  background-color: transparent;
  overflow: hidden;
}
.editor.fraction-editor > .container > .control > .container > div > .container > span {
  padding: 5px 2px;
  cursor: default;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.editor.fraction-editor.locked > .container > .control > .container > div > .container {
  color: #333333;
  cursor: default;
  background-color: transparent;
}
.editor.fraction-editor.locked > .container > .control > .container > div > .container > div {
  height: 100%;
  font-size: 12px;
  font-family: "Open Sans";
  padding: 5px;
  text-align: center;
  flex: 1;
  align-items: center;
  display: flex;
  justify-content: center;
}
.editor.fraction-editor.locked > .container > .control > .container > div > .container > span {
  background-color: transparent;
}
/* #endregion */

/* #region tag-editor */

.editor.tag-editor > .container > .control > .container > .tag-textbox {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0 solid #ffc400;
  background-color: #ffc91a;
  overflow: hidden;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container {
  width: 100%;
  padding: 2px;
  height: 100%;
  overflow-x: hidden;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .tags {
  float: left;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  padding-bottom: 25px;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .tags > .container {
  height: 100%;
  font-size: 0;
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: scroll;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .tags > .container > .tag {
  display: inline-block;
  background-color: #f2ba00;
  color: white;
  cursor: pointer;
  font-size: 12px;
  margin-left: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 2px 5px;
  border-radius: 2px;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .tags > .container > .tag > input {
  background-color: white;
  font-size: 12px;
  color: #333333;
  height: 100%;
  min-width: 100%;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .tags > .container > .tag > input:focus {
  outline: none;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .text-field {
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25px;
  background-color: white;
  border-top: 1px solid #ffc400;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .text-field > .container {
  height: 100%;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .text-field > .container > input {
  min-height: 25px;
  display: block;
  background-color: transparent;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 14px;
}
.editor.tag-editor > .container > .control > .container > .tag-textbox > .container > .text-field > .container > input:focus {
  outline: none;
}
/* #endregion */

/* #region text-editor */

.editor.text-editor > .container > .control > .container > .text {
  height: 100%;
  overflow: hidden;
}
.editor.text-editor > .container > .control > .container > .text > .container {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 10px 20px 10px 10px;
  border: 0 solid #ffc400;
  resize: none;
  cursor: pointer;
  background-color: white;
}
.editor.text-editor > .container > .control > .container > .text.readonly {
  height: 100%;
  overflow: hidden;
}
.editor.text-editor > .container > .control > .container > .text.readonly > .container {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 10px 20px 10px 10px;
  border: 0 solid #ffc400;
  resize: none;
  cursor: default;
  background-color: #ffc91a;
  color: #333333;
}
.editor.text-editor > .container > .control > .container > .code {
  height: 100%;
  overflow: hidden;
}
.editor.text-editor > .container > .control > .container > .code > .container {
  width: 100%;
  height: 100%;
  padding: 10px 20px 10px 10px;
  border: 0 solid #ffc400;
  resize: none;
  cursor: pointer;
  background-color: white;
  margin: 0px;
  overflow: hidden;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
  font-size: 8px;
  font-weight: 600;
  direction: ltr;
  text-align: left;
}
.editor.text-editor > .container > .control > .container > .code.readonly {
  height: 100%;
  overflow: hidden;
}
.editor.text-editor > .container > .control > .container > .code.readonly > .container {
  width: 100%;
  height: 100%;
  padding: 10px 20px 10px 10px;
  border: 0 solid #ffc400;
  resize: none;
  cursor: default;
  background-color: #ffc91a;
  color: #333333;
  overflow: hidden;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
  font-size: 8px;
  font-weight: 600;
  direction: ltr;
  text-align: left;
}
/* #endregion */

/* #region time-editor */

.editor.time-editor > .container > .control > .container > input {
  width: 100%;
  height: 100%;
  border: 0 solid #ffc400;
  font-size: 14px;
  font-family: "Open Sans";
  padding: 5px 20px 5px 5px;
}
/* #endregion */

/* #region ui-datepicker */

.ui-datepicker {
  display: none;
  background-color: white;
  border: 1px solid #f2ba00;
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
.ui-datepicker > .ui-widget-header {
  /*padding: @margin-10 @margin-10 @margin-5 @margin-10;*/
  padding: 1px 0 0 0;
  margin-top: -1px;
  text-align: center;
  background-color: #f2ba00;
  color: white;
  display: flex;
  align-items: stretch;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all {
  border: none;
  cursor: default;
  /* A basic button (cannot be named button as the class is already named so */
  background-color: #005791;
  color: white;
  margin: 0;
  padding: 0;
  width: 66px;
  height: 60px;
  font-size: 10px;
  display: inline-block;
  width: 49%;
  height: 30px;
  text-align: center;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container {
  width: 100%;
  height: 100%;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > a {
  cursor: default;
  display: block;
  padding: 6px 2px;
  width: 100%;
  height: 100%;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > a > .container {
  position: relative;
  width: 100%;
  height: 100%;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > a > .container > .icon {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > a > .container > .icon .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > a > .container > .icon .container svg {
  fill: white;
  /*margin-left: auto;
							margin-right: auto;*/
  width: 32px;
  height: 32px;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > a > .container > .text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > a > .container > .text .container {
  text-align: center;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > input {
  width: 100%;
  font-size: 14px;
  text-align: center;
  background-color: #e6b000;
  color: inherit;
  padding: 5px;
}
@media only screen and (max-width: 1024px) {
  .ui-datepicker > .ui-widget-header > .ui-corner-all > .container > input {
    padding: 10px;
  }
}
@media only screen and (max-width: 480px) {
  .ui-datepicker > .ui-widget-header > .ui-corner-all > .container > input {
    padding: 15px;
  }
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > input[disabled="disabled"],
.ui-datepicker > .ui-widget-header > .ui-corner-all > .container > input[disabled] {
  color: rgba(255, 255, 255, 0.2);
}
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-prev > span,
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-next > span {
  height: 100%;
  background-color: #f2ba00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-prev > span:hover,
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-next > span:hover {
  background-color: #d9a600;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-prev {
  order: 1;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-next {
  order: 3;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all > span {
  display: block;
  width: 100%;
  text-align: center;
}
.ui-datepicker > .ui-widget-header > .ui-datepicker-title {
  width: 185px;
  flex-grow: 1;
  order: 2;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.ui-datepicker > .ui-widget-header > .ui-datepicker-title > .ui-datepicker-month,
.ui-datepicker > .ui-widget-header > .ui-datepicker-title > .ui-datepicker-year {
  justify-content: center;
  cursor: default;
  font-size: 12px;
  font-weight: 600;
}
.ui-datepicker > .ui-datepicker-calendar {
  padding: 0 5px;
}
.ui-datepicker > .ui-datepicker-calendar > thead > tr > th.ui-datepicker-week-col,
.ui-datepicker > .ui-datepicker-calendar > thead > tr th > span {
  font-weight: 600;
  cursor: default;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td {
  position: relative;
  padding: 2px;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: default;
  margin: 0;
  padding: 0;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td > a {
  cursor: default;
  background-color: #ffc91a;
  text-decoration: none;
  color: #f2ba00;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td > a.ui-state-hover {
  background-color: #ffc400;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td.ui-datepicker-week-col {
  cursor: default;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td.ui-datepicker-current-day {
  border: 2px solid #ffc400;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td.ui-datepicker-today > a {
  background-color: white;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td.ui-datepicker-today > a.ui-state-hover {
  background-color: #ffc400;
}
.ui-datepicker > .ui-datepicker-buttonpane {
  padding: 10px;
}
.ui-datepicker > .ui-datepicker-buttonpane > button {
  border: none;
  /* A basic button (cannot be named button as the class is already named so */
  background-color: #005791;
  color: white;
  margin: 0;
  padding: 0;
  width: 66px;
  height: 60px;
  font-size: 10px;
  display: inline-block;
  height: 30px;
  width: 49%;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container {
  width: 100%;
  height: 100%;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > a {
  cursor: default;
  display: block;
  padding: 6px 2px;
  width: 100%;
  height: 100%;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > a > .container {
  position: relative;
  width: 100%;
  height: 100%;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > a > .container > .icon {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > a > .container > .icon .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > a > .container > .icon .container svg {
  fill: white;
  /*margin-left: auto;
							margin-right: auto;*/
  width: 32px;
  height: 32px;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > a > .container > .text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > a > .container > .text .container {
  text-align: center;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > input {
  width: 100%;
  font-size: 14px;
  text-align: center;
  background-color: #e6b000;
  color: inherit;
  padding: 5px;
}
@media only screen and (max-width: 1024px) {
  .ui-datepicker > .ui-datepicker-buttonpane > button > .container > input {
    padding: 10px;
  }
}
@media only screen and (max-width: 480px) {
  .ui-datepicker > .ui-datepicker-buttonpane > button > .container > input {
    padding: 15px;
  }
}
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > input[disabled="disabled"],
.ui-datepicker > .ui-datepicker-buttonpane > button > .container > input[disabled] {
  color: rgba(255, 255, 255, 0.2);
}
.ui-datepicker > .ui-datepicker-buttonpane > button.ui-datepicker-close {
  float: right;
}
/* #endregion */

/* #region resize-handle */

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background-color: transparent;
  cursor: col-resize;
}
.resize-handle.resizing {
  background-color: rgba(0, 0, 0, 0.1);
}
/* #endregion */

/* #region grid*/

.grid {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  color: #333333;
  position: relative;
  /* #region editable grid */

  /* #endregion */

  /* #region show only selective columns on small displays */

}
.grid svg {
  fill: #333333;
}
.grid .selectbox {
  width: 45px;
  min-width: 45px;
}
.grid .selectbox > .container svg {
  fill: #f2ba00;
}
.grid .selectbox:hover > .container > svg {
  fill: #8c6c00;
}
.grid .column > .container > a,
.grid .cell > .container > a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.grid .column > .container > a > .container,
.grid .cell > .container > a > .container {
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid > .loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.grid > .loading svg {
  fill: #f2ba00;
}
.grid > .container {
  float: left;
  /* Makes everything inside full width (even if horizontal scroll is needed) */
  min-width: 100%;
  max-width: 100%;
}
.grid > .container > .message > .container {
  text-align: center;
  font-style: italic;
  font-size: 14px;
}
.grid > .container > .filters {
  background-color: white;
  display: inline-block;
  float: left;
  padding-right: 10px;
}
.grid > .container > .filters > .container > .filter {
  background-color: #ffc91a;
  width: 250px;
}
.grid > .container > .filters > .container > .filter:not(:last-child) {
  margin-bottom: 10px;
}
.grid > .container > .filters > .container > .filter > .container > .items > .container > .grid > .container > .data > .container > .group > .container > .row > .content {
  padding-right: 0;
}
.grid > .container > .filters > .container > .filter > .container > .header {
  background-color: #f2ba00;
  color: white;
  padding: 10px;
}
.grid > .container > .filter-visible {
  margin-left: 260px;
}
.grid > .container > .header {
  /*display: table;*/
  border-spacing: 0;
  border-collapse: collapse;
  background-color: #005791;
  color: white;
  max-width: 100%;
  height: 55px;
  max-height: 55px;
  min-height: 55px;
}
.grid > .container > .header > .container {
  /*display: table-row;*/
  position: relative;
  width: 100%;
  height: 100%;
}
.grid > .container > .header > .container > div {
  /*display: table-cell;*/
  vertical-align: middle;
  /*padding: @margin-5 @no-margin;*/

}
.grid > .container > .header > .container > .selectbox {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
}
.grid > .container > .header > .container > .selectbox > .container > svg {
  fill: #e6b000;
}
.grid > .container > .header > .container > .selectbox:hover > .container > svg {
  fill: #b38900;
}
.grid > .container > .header > .container > .columns {
  /*position: absolute;*/
  /*padding-top: @margin-5;*/
  margin-left: 50px;
  /*padding-bottom: @margin-5;*/
  margin-right: 50px;
  height: 100%;
  width: auto;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .header > .container > .columns > .container {
  width: 100%;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid > .container > .header > .container > .columns > .container > .main-columns,
.grid > .container > .header > .container > .columns > .container .sub-columns {
  /* Common between main and sub columns */
  max-width: 100%;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-content: stretch;
}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container,
.grid > .container > .header > .container > .columns > .container .sub-columns > .container {
  font-size: 0;
  overflow: hidden;
  display: flex;
  align-content: stretch;
}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column,
.grid > .container > .header > .container > .columns > .container .sub-columns > .container > .column {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column[data-type="numerical"],
.grid > .container > .header > .container > .columns > .container .sub-columns > .container > .column[data-type="numerical"] {
  text-align: right;
}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column > .container,
.grid > .container > .header > .container > .columns > .container .sub-columns > .container > .column > .container {
  width: 100%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 7.5px;
  padding-right: 7.5px;
}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:hover,
.grid > .container > .header > .container > .columns > .container .sub-columns > .container > .column:hover {
  background-color: #d9a600;
  cursor: default;
}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column {
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column.sorted-column {
  text-decoration: underline;
}
.grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column {
  font-size: 10px;
}
.grid > .container > .header > .container > .icons {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  padding-right: 10px;
}
.grid > .container > .header > .container > .icons > .container {
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .header > .container > .icons > .container > .icon {
  position: relative;
  height: 100%;
  display: inline-block;
  padding: 0 5px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .header > .container > .icons > .container > .icon.selected {
  background-color: #ffc91a;
}
.grid > .container > .header > .container > .icons > .container > .icon.selected svg {
  fill: #f2ba00;
}
.grid > .container > .header > .container > .icons > .container > .icon > .container {
  height: 18px;
  width: 18px;
}
.grid > .container > .header > .container > .icons > .container > .icon > .container > .loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2ba00;
}
.grid > .container > .header > .container > .icons > .container > .icon svg {
  fill: white;
}
.grid > .container > .selection-field {
  position: relative;
  border-right: 2px solid #f2ba00;
  border-left: 2px solid #f2ba00;
}
.grid > .container > .selection-field > .container > .tag-textbox {
  background-color: #f2ba00;
  border-bottom: 2px solid #f2ba00;
  font-size: 12px;
}
.grid > .container > .selection-field > .container > .tag-textbox.active {
  background-color: #ffc91a;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .tags {
  overflow-y: hidden;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .tags > .container {
  height: 100%;
  font-size: 0;
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 1px 0;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .tags > .container > .tag {
  display: inline-block;
  background-color: #f2ba00;
  color: white;
  cursor: pointer;
  font-size: 12px;
  margin-left: 2px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 2px 5px;
  border-radius: 2px;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .text-field {
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
  background-color: white;
  border-top: 1px solid #ffc400;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .text-field > .container {
  height: 100%;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .text-field > .container > input {
  min-height: 25px;
  display: block;
  background-color: transparent;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 14px;
}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .text-field > .container > input:focus {
  outline: none;
}
.grid > .container > .data > .container > .group[data-group-type="default"] > .container > .header {
  display: none;
}
.grid > .container > .data > .container > .group > .container > .header {
  background-color: #ffc91a;
  height: 45px;
  width: 100%;
  cursor: pointer;
}
.grid > .container > .data > .container > .group > .container > .header > .container {
  max-width: 100%;
  white-space: nowrap;
  font-size: 0;
  overflow: hidden;
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .selectbox {
  width: 50px;
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .selectbox > .container {
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .selectbox > .container svg {
  width: 14px;
  height: 14px;
}
.grid > .container > .data > .container > .group > .container > .header > .container > div {
  display: inline-block;
  vertical-align: middle;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title {
  font-size: 14px;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container {
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container > .group-field {
  font-weight: 400;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container > span {
  display: inline-block;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container > svg {
  max-height: 15px;
  max-width: 15px;
  display: inline-block;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container .percent-grid-chart,
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container .fraction-grid-chart {
  position: relative;
  cursor: default;
  display: inline-block;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container .percent-grid-chart > svg,
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container .fraction-grid-chart > svg {
  display: none;
}
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container .percent-grid-chart > .text-value.light,
.grid > .container > .data > .container > .group > .container > .header > .container > .title > .container .fraction-grid-chart > .text-value.light {
  display: none;
}
.grid > .container > .data > .container > .group > .container > .data-header {
  /*height: @small-grid-row-height;*/
  color: #979797;
  font-size: 12px;
}
.grid > .container > .data > .container > .group > .container > .data-header > .container {
  display: flex;
  align-content: stretch;
  max-width: 100%;
}
.grid > .container > .data > .container > .group > .container > .data-header > .container > .column {
  height: 30px;
}
.grid > .container > .data > .container > .group > .container > .data-header > .container > .column.empty {
  height: 0;
}
.grid > .container > .data > .container > .group > .container > .data-header > .container > .column:first-child {
  margin-left: 50px;
}
.grid > .container > .data > .container > .group > .container > .data-header > .container > .column:last-child {
  margin-right: 50px;
}
.grid > .container > .data > .container > .group > .container > .data-header > .container > .column.data-grid-bar-chart {
  display: flex;
  align-content: stretch;
  max-width: 100%;
  padding: 0 7.5px;
}
.grid > .container > .data > .container > .group > .container > .data-header > .container > .column.data-grid-bar-chart > div {
  flex: 1;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.grid > .container > .data > .container > .group > .container > .row {
  position: relative;
  min-width: 100%;
  height: 40px;
  border-bottom: 2px solid white;
  -webkit-box-shadow: 0 1px 0 #333333;
  box-shadow: 0 1px 0 #ffc91a;
  margin-bottom: 2px;
  margin-top: 2px;
  display: flex;
  align-content: stretch;
}
.grid > .container > .data > .container > .group > .container > .row:hover,
.grid > .container > .data > .container > .group > .container > .row.selected {
  background-color: #ffc91a;
}
.grid > .container > .data > .container > .group > .container > .row:hover > .edit > .container,
.grid > .container > .data > .container > .group > .container > .row.selected > .edit > .container {
  visibility: visible;
  cursor: pointer;
}
.grid > .container > .data > .container > .group > .container > .row > .selectbox {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
}
.grid > .container > .data > .container > .group > .container > .row > .selectbox svg {
  width: 12px;
  height: 12px;
}
.grid > .container > .data > .container > .group > .container > .row > .content {
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row {
  /* Common between main and sub row */
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-content: stretch;
  font-size: 0;
  max-width: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell {
  display: flex;
  align-content: stretch;
  overflow: hidden;
  width: 100%;
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell[data-type="numerical"],
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell[data-type="numerical"] {
  justify-content: flex-end;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell[data-type="numerical"] > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell[data-type="numerical"] > a {
  text-align: right;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell[class^="bg-"],
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell[class^="bg-"],
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell[class*=" bg-"],
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell[class*=" bg-"] {
  border: none;
  padding: 0;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell[class^="bg-"] > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell[class^="bg-"] > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell[class*=" bg-"] > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell[class*=" bg-"] > a {
  margin: 0 5px;
  padding: 5px 10px;
  font-size: 10px;
  border: none;
  color: white;
  height: 20px;
  width: auto;
  justify-content: center;
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-red > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-red > a {
  background-color: #c4262c;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-purple > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-purple > a {
  background-color: #673080;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-blue > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-blue > a {
  background-color: #4b82be;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-turquoise > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-turquoise > a {
  background-color: #1aa8b4;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-green > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-green > a {
  background-color: #71b84a;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-brown > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-brown > a {
  background-color: #a9988a;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-pink > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-pink > a {
  background-color: #e98b99;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-grey > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-grey > a {
  background-color: #70797a;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-yellow > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-yellow > a {
  background-color: #ffda31;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.bg-orange > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell.bg-orange > a {
  background-color: #f8ac45;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a {
  display: block;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding-left: 7.5px;
  padding-right: 7.5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart {
  position: relative;
  cursor: default;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > svg {
  width: 100%;
  height: 50px;
  background-color: transparent;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > svg > rect,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > svg > rect {
  fill: #f8ac45;
  position: relative;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > svg > rect:hover,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > svg > rect:hover {
  fill: #333333 !important;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > svg > .current-value,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > svg > .current-value {
  stroke: #c4262c;
  stroke-width: 2;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > svg > .bar-line,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > svg > .bar-line {
  stroke: rgba(242, 186, 0, 0.15);
  stroke-width: 1;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-left,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-left,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-right,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-right {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-left > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-left > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-right > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-right > svg {
  border-radius: 100%;
  fill: rgba(255, 255, 255, 0.75);
  height: 25%;
  padding: 5px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-left > svg:hover,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-left > svg:hover,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-right > svg:hover,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-right > svg:hover {
  fill: white;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-left,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-left {
  left: 2px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .grid-bar-chart > .arrow-right,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .grid-bar-chart > .arrow-right {
  right: 2px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart {
  position: relative;
  cursor: default;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > svg {
  width: 100%;
  height: 50px;
  background-color: transparent;
  z-index: 1;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > svg > rect,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > svg > rect,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > svg > rect,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > svg > rect {
  fill: #70797a;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > svg > rect.momo,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > svg > rect.momo,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > svg > rect.momo,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > svg > rect.momo {
  opacity: 0.2;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > svg > .outer-back,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > svg > .outer-back,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > svg > .outer-back,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > svg > .outer-back {
  fill: #ffcf34;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > svg > .bar-line,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > svg > .bar-line,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > svg > .bar-line,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > svg > .bar-line {
  stroke: rgba(242, 186, 0, 0.15);
  stroke-width: 1;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > .text-value,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > .text-value,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > .text-value,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > .text-value {
  position: absolute;
  font-size: 10px;
  top: 0;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  margin: 0 3%;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > .text-value.dark,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > .text-value.dark,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > .text-value.dark,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > .text-value.dark {
  color: black;
  z-index: 0;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .percent-grid-chart > .text-value.light,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .percent-grid-chart > .text-value.light,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a .fraction-grid-chart > .text-value.light,
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell > a .fraction-grid-chart > .text-value.light {
  color: white;
  overflow: hidden;
  z-index: 2;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell {
  font-size: 14px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level0 {
  padding-left: 0px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level1 {
  padding-left: 20px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level2 {
  padding-left: 40px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level3 {
  padding-left: 60px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level4 {
  padding-left: 80px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level5 {
  padding-left: 100px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level6 {
  padding-left: 120px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level7 {
  padding-left: 140px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level8 {
  padding-left: 160px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.hierarchy.level9 {
  padding-left: 180px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.boolean-cell > a > svg {
  height: 20px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.file-cell > a > div > .container {
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.file-cell > a > div > .container > svg {
  height: 30px;
  width: auto;
  fill: #e6b000;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.option-cell {
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.option-cell > a {
  height: 20px;
  padding: 0 10px;
  display: flex;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell.image-cell img {
  height: 20px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell svg {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  fill: #e6b000;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon {
  display: inline-block;
  width: 12px;
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container {
  width: 100%;
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .plus,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .minus {
  width: 100%;
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .plus > .container,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .minus > .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .plus > .container > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .minus > .container > svg {
  width: 12px;
  height: 18px;
  fill: #f2ba00;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell .editor.more svg {
  fill: #ffc400;
  width: 20px;
  height: 20px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell {
  font-size: 10px;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell svg {
  height: 10px;
  width: 10px;
}
.grid > .container > .data > .container > .group > .container > .row > .edit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  width: 45px;
  min-width: 45px;
  /*width: @medium-grid-row-height;
								min-width: @medium-grid-row-height;*/

}
.grid > .container > .data > .container > .group > .container > .row > .edit > .container {
  position: relative;
  width: 100%;
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .edit > .container > a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid > .container > .data > .container > .group > .container > .row > .edit > .container > a > a {
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .row > .edit > .container > a svg {
  width: 24px;
  height: 24px;
  fill: #ffc400;
  margin: 0;
  padding: 0;
}
.grid > .container > .data > .container > .group > .container > .footer {
  /*display: table;*/
  border-spacing: 0;
  border-collapse: collapse;
  min-width: 100%;
  height: 45px;
  max-height: 45px;
}
.grid > .container > .data > .container > .group > .container > .footer > .container {
  /*display: table-row;*/
  position: relative;
  width: 100%;
  height: 100%;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > div {
  /*display: table-cell;*/
  vertical-align: middle;
  padding: 5px 0;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns {
  position: absolute;
  top: 5px;
  left: 50px;
  bottom: 5px;
  right: 50px;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns > .container > .main-columns {
  height: 22.5px;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns > .container > .main-columns > .container {
  white-space: nowrap;
  font-size: 0;
  display: flex;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns > .container > .main-columns > .container > .column {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns > .container > .main-columns > .container > .column[data-type="numerical"] {
  text-align: right;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns > .container > .sub-columns {
  height: 22.5px;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns > .container > .sub-columns > .container {
  white-space: nowrap;
  font-size: 0;
  display: flex;
}
.grid > .container > .data > .container > .group > .container > .footer > .container > .columns > .container > .sub-columns > .container > .column {
  display: inline-block;
  font-size: 12px;
}
.grid > .container > .data > .container > .empty {
  text-align: center;
  padding: 10px;
  font-style: italic;
}
.grid > .container > .data > .loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.grid > .container > .data > .loading svg {
  fill: #f2ba00;
}
.grid > .container > .new-row {
  background-color: #005791;
  margin-top: 5px;
  margin-bottom: 5px;
}
.grid > .container > .new-row:hover {
  background-color: #00385e;
}
.grid > .container > .new-row > .container {
  padding: 0px;
}
.grid > .container > .new-row > .container > .button {
  background-color: transparent;
  color: white;
  width: auto;
  height: auto;
  font-size: 14px;
  display: block;
  padding: 5px;
}
.grid > .container > .new-row > .container > .button a {
  text-decoration: none;
}
.grid > .container > .new-row > .container > .button .text {
  position: relative;
}
.grid > .container > .new-row > .container > .button .icon {
  position: relative;
}
.grid > .container > .footer {
  background-color: #005791;
  color: white;
}
.grid > .container > .footer:hover {
  background-color: #00385e;
}
.grid > .container > .footer > .container > .post-count {
  font-size: 14px;
  width: 100%;
  cursor: default;
}
.grid > .container > .footer > .container > .post-count > .container {
  width: 100%;
  text-align: center;
  padding: 10px;
}
.grid > .container > .footer > .container > .post-count > .container > span {
  display: inline;
}
.grid.sub-list .selectbox > .container > svg {
  fill: #f2ba00;
}
.grid.sub-list .selectbox:hover > .container > svg {
  fill: #8c6c00;
}
.grid.sub-list > .container > .selection-field {
  background-color: #ffc91a;
}
.grid.sub-list > .container > .selection-field.active {
  background-color: white;
  border-right: 2px solid #ffc91a;
  border-bottom: 2px solid #ffc91a;
  border-left: 2px solid #ffc91a;
}
.grid.sub-list > .container > .header {
  background-color: #ffc91a;
  color: #333333;
}
.grid.sub-list > .container > .header svg {
  fill: #f2ba00;
}
.grid.sub-list > .container > .header > .container > .icons > .container > .icon.selected {
  background-color: white;
}
.grid.sub-list > .container > .header > .container > .icons > .container > .icon svg {
  fill: #ffc400;
}
.grid.sub-list > .container > .header > .container > .settings {
  right: 50px;
}
.grid.sub-list > .container > .header > .container > .settings > .container > a svg {
  fill: #f2ba00;
  fill-opacity: 0.4;
}
.grid.sub-list > .container > .header > .container > .menu {
  display: block;
}
.grid.sub-list > .container > .header > .container > .menu > .container > a svg {
  fill: #f2ba00;
}
.grid.sub-list > .container > .header > .container > .columns > .container > div > .container > .column:hover {
  background-color: #ffc300;
}
.grid.sub-list > .container > .footer {
  background-color: #ffc91a;
  color: #333333;
}
.grid.editable > .container > .data > .container > .group > .container > .row {
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid #ffc91a;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom: 1px;
}
.grid.editable > .container > .data > .container > .group > .container > .row:hover {
  background-color: inherit;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .selectbox {
  /*border-top: 1px solid @color-light-1;*/
  border-right: 1px solid #ffc91a;
  border-left: 1px solid #ffc91a;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content {
  top: 0;
  bottom: 0;
  height: 100%;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row {
  height: 100%;
  padding: 0;
  margin: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell {
  height: 100%;
  border-right: 1px solid #ffc91a;
  padding: 0;
  margin: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a {
  height: 100%;
  width: 100%;
  padding: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor {
  margin: 0;
  padding: 2px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  cursor: default;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .status {
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 7px;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .status.done {
  border-right: 2px solid white;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .control {
  left: 0;
  margin: 0;
  top: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .control > .container > input {
  border: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .control > .container > input:focus {
  background-color: #ffc91a;
  outline: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .control > .container > span {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .control > .container > .readonly,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor > .container > .control > .container > input[readonly] {
  /*color: fadeout(@color-dark, 30%);*/
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: default;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.image-editor > .container > .control > .container > .thumbnail,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.file-editor > .container > .control > .container > .thumbnail {
  border: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-file > .container > svg,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-file > .container > svg,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-image > .container > svg,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-image > .container > svg {
  height: 30px;
  width: 30px;
  fill: #ffc400;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-file > .container > input:focus,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-file > .container > input:focus,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.image-editor > .container > .control > .container > .thumbnail > .container > .no-image > .container > input:focus,
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.file-editor > .container > .control > .container > .thumbnail > .container > .no-image > .container > input:focus {
  outline: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.multi-select-editor > .container > .control > .container {
  border: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.multi-select-editor > .container > .control > .container > div {
  width: 100%;
  height: 100%;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.multi-select-editor > .container > .control > .container > div > .container {
  width: 100%;
  height: 100%;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.multi-select-editor > .container > .control > .container > div > .container > .tagholder {
  display: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.multi-select-editor > .container > .control > .container > div > .container > .label {
  width: 100%;
  height: 100%;
  font-style: italic;
  color: #f2ba00;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.multi-select-editor > .container > .control > .container > div > .container > .label > .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.valuepicker-editor > .container > .control > .container > div > .container {
  border: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.valuepicker-editor > .container > .control > .container > div > .container > .box {
  border-color: #ffc91a;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.text-editor > .container > .control > .container > .text > .container {
  border: none;
  white-space: normal;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.dropdown-editor > .container > .control > .container > select {
  border: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.date-time-editor {
  padding: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.date-time-editor > .container > .control > .container > .panel > .container > input {
  border-top: none;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid #ffcf34;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.date-time-editor > .container > .control > .container > .panel > .container > input:last-child {
  border-right: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.date-period-editor {
  padding: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.date-period-editor > .container > .control > .container > .control > .container > input {
  border-top: none;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid #ffcf34;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.date-period-editor > .container > .control > .container > .control > .container > input:last-child {
  border-right: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.percent-editor {
  padding: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.percent-editor > .container > .control > .container > div {
  height: 100%;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.percent-editor > .container > .control > .container > div > .container {
  height: 100%;
  border: none;
  /*> input {*/

}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.percent-editor > .container > .control > .container > div > .container > .value {
  height: 100%;
  border: none;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.percent-editor > .container > .control > .container > div > .container > .value > .container {
  width: 100%;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.percent-editor > .container > .control > .container > div > .container > span {
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.fraction-editor {
  padding: 0;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.fraction-editor > .container > .control > .container > div {
  height: 100%;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.fraction-editor > .container > .control > .container > div > .container {
  height: 100%;
  border: none;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.fraction-editor > .container > .control > .container > div > .container > input {
  border: none;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.fraction-editor > .container > .control > .container > div > .container > div {
  height: auto;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > a > .editor.fraction-editor > .container > .control > .container > div > .container > span {
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.grid.editable > .container > .data > .container > .group > .container > .row > .edit {
  border-right: 1px solid #ffc91a;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column,
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column,
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell,
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell {
    display: none;
  }
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(1),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(1),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(1),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(1),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(2),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(2),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(2),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(2),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(3),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(3),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(3),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(3),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(4),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(4),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(4),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(4),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(5),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(5),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(5),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(5),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(6),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(6),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(6),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(6) {
    display: flex;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column,
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column,
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell,
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell {
    display: none;
  }
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(1),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(1),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(1),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(1),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(2),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(2),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(2),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(2),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(3),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(3),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(3),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(3),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(4),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(4),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(4),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(4) {
    display: flex;
  }
}
@media only screen and (max-width: 480px) {
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column,
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column,
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell,
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell {
    display: none;
  }
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(1),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(1),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(1),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(1),
  .grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:nth-child(2),
  .grid > .container > .header > .container > .columns > .container > .sub-columns > .container > .column:nth-child(2),
  .grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell:nth-child(2),
  .grid > .container > .data > .container > .group > .container > .row > .content > .sub-row > .cell:nth-child(2) {
    display: flex;
  }
}
/* #endregion */

/* #region tinydropdown */

.tinydropdown {
  /*border: 1px solid transparent;*/
  /*padding: 2px;
	margin-left: -3px;
	margin-top: -3px;
	margin-bottom: 10px;*/
  cursor: default;
  position: relative;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-size: 12px;
}
.tinydropdown:hover {
  /*border: 1px solid @color-light-1;*/
  background-color: #ffc91a;
  /*color: @color-light;*/

}
.tinydropdown > .container {
  position: relative;
  padding: 2px;
}
.tinydropdown > .container svg {
  position: absolute;
  top: 0;
  left: 2px;
  bottom: 0;
  width: 10px;
  fill: white;
}
.tinydropdown > .container .value > .container {
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 4px/*@icon-size-10 +*/;
}
.tinydropdown > .container .value > .container svg {
  display: none;
}
.tinydropdown > .container ul {
  /*border: 1px solid @color-dark-1;*/
  background-color: #ffc91a;
  display: block;
  position: absolute;
  z-index: 18;
  width: auto;
  min-width: 100%;
  /*top: -1px;
			left: -1px;*/
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  /*color: @color-light;*/

}
.tinydropdown > .container ul svg {
  fill: white;
}
.tinydropdown > .container ul li {
  position: relative;
  padding: 2px;
  display: block;
  clear: both;
  margin: 0;
}
.tinydropdown > .container ul li:hover {
  color: white;
  background-color: #f2ba00;
}
/* #endregion */

/* #region table */

.group > .container > .content > .container > .table {
  font-size: 12px;
  border-spacing: 0px;
  width: 100%;
  background-color: transparent;
}
.group > .container > .content > .container > .table td {
  padding: 10px 5px;
  border-bottom: 1px solid #ffc400;
}
.group > .container > .content > .container > .table td > .container {
  display: inline-block;
}
.group > .container > .content > .container > .table td:first-child {
  width: 100px;
  padding-left: 0;
}
.group > .container > .content > .container > .table td:first-child > .container {
  max-width: 100px;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group > .container > .content > .container > .table td:last-child {
  padding-right: 0;
}
.group > .container > .content > .container > .table tr.grid-header td {
  font-weight: 600;
}
/* #endregion */

/* #endregion */

/* #region body */

.body {
  background-color: transparent;
  min-height: 100%;
}
@media only screen and (max-width: 768px) {
  .body {
    display: block;
  }
}
.body > .container {
  font-family: "Open Sans";
  width: 100%;
  height: 100%;
  min-height: 100%;
  /* #region page */

  /* #endregion */

}
@media only screen and (max-width: 768px) {
  .body > .container {
    display: block;
  }
}
.body > .container > .navbars > .container > .horizontal-navbar {
  display: none;
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .horizontal-navbar {
    display: block;
  }
}
@media only screen and (max-width: 480px) {
  .body > .container > .navbars > .container > .horizontal-navbar {
    display: none;
  }
}
.body > .container > .navbars > .container > .horizontal-navbar.help-visible {
  margin-right: 315px;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container {
  position: relative;
  background-color: #e6b000;
  height: 40px;
  width: 100%;
  font-size: 0;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .left-buttons {
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .left-buttons > .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .left-buttons > .container .button {
  cursor: pointer;
  margin-right: 20px;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .left-buttons > .container .button > .container {
  height: 20px;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .left-buttons > .container .button > .container > a > .container > .icon {
  height: 100%;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .right-buttons {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .right-buttons > .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .right-buttons > .container .button {
  cursor: pointer;
  margin-left: 20px;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .right-buttons > .container .button > .container {
  height: 20px;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container > .right-buttons > .container .button > .container > a > .container > .icon {
  height: 100%;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button {
  background-color: transparent;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button:hover svg {
  /*fill: darken(@color-light, 10%);*/
  fill: #ffc400;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button svg {
  fill: white;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button > .container > a {
  padding: 0;
  margin: 0;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button > .container > a:hover {
  background-color: transparent;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button > .container > a > .container > .icon {
  width: 20px;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button > .container > a > .container > .icon > .container > svg {
  width: 20px;
  height: 20px;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container .button > .container > a > .container > .text {
  display: none;
}
.body > .container > .navbars > .container > .navbar {
  font-weight: 300;
  background-color: transparent;
  color: white;
  position: absolute;
  top: 0;
  width: 256px;
  left: 0;
  overflow-x: hidden;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar {
    width: 256px;
  }
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar {
    background-color: #f2ba00;
    color: #333333;
  }
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
.body > .container > .navbars > .container > .navbar:before {
  content: "";
  background-color: #f2ba00;
  position: fixed;
  top: 0;
  left: 0;
  width: 256px;
  bottom: 0;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar:before {
    width: 256px;
  }
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar:before {
    display: none;
  }
}
.body > .container > .navbars > .container > .navbar > .container {
  position: relative;
  width: 256px;
  padding-bottom: 80px;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container {
    width: 256px;
  }
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container {
    width: 100%;
  }
}
.body > .container > .navbars > .container > .navbar > .container svg {
  fill: white;
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container svg {
    fill: white;
  }
}
.body > .container > .navbars > .container > .navbar > .container .logotype {
  display: block;
  width: 240px;
  position: relative;
  height: auto;
  padding: 20px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container .logotype {
    display: none;
    width: 240px;
  }
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .logotype {
    padding: 20px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .logotype > .container {
  width: 100%;
  height: 120px;
  max-height: 120px;
}
.body > .container > .navbars > .container > .navbar > .container .logotype > .container svg {
  height: 120px;
  max-height: 120px;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar {
  color: #333333;
  position: relative;
  height: 100px;
  display: none;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container {
  height: 100%;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .history-button {
  height: 30px;
  width: 30px;
  position: absolute;
  top: 36px;
  bottom: 0px;
  left: 20px;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .history-button:hover > .container > svg {
  fill: #004878;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .history-button > .container {
  height: 100%;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .text {
  height: 100%;
  margin-left: 65px;
  margin-right: 150px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .text > .container {
  width: auto;
  max-width: 100%;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .text > .container > .title > .container {
  font-size: 30px;
  font-weight: 300;
  cursor: pointer;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .text > .container > .title > .container > .entity-name {
  font-size: 10px;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 135px;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container {
  width: 100%;
  height: 100%;
  text-align: right;
  font-size: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  justify-content: end;
  -ms-flex-pack: flex-end;
  -webkit-box-pack: flex-end;
  justify-content: flex-end;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button {
  display: inline-block;
  background-color: transparent;
  width: 30px;
  height: 30px;
  margin: 0 0 0 15px;
  padding: 0;
  cursor: pointer;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button > .container {
  margin: auto;
  width: 30px;
  height: 100%;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button svg {
  fill: #005791;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button.menu svg {
  fill: #005791;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button.bookmark.bookmarked svg {
  fill: #c4262c;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button.bookmark.locked {
  opacity: 0.4;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button.bookmark.locked svg {
  fill: #c4262c;
}
.body > .container > .navbars > .container > .navbar > .container .titlebar svg {
  fill: #ffc400;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .text {
    left: 20px;
    right: 135px;
  }
  .body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons {
    right: 20px;
  }
  .body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .buttons > .container > .button {
    margin: 0 0 0 10px;
  }
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container .titlebar {
    display: block;
  }
}
.body > .container > .navbars > .container > .navbar > .container .titlebar > .container > .button.navbar-button {
  right: 10px;
  left: auto;
}
.body > .container > .navbars > .container > .navbar > .container .group {
  margin-bottom: 30px;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title {
  position: relative;
  background-color: #005791;
  height: 50px;
  font-size: 24px;
  font-weight: 300;
  padding: 0;
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > .title {
    background-color: #005791;
  }
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container {
  height: 100%;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .text {
  color: white;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  padding-bottom: 2px;
  /* 2px just for that perfect little extra touch */
  margin-right: 10px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .text {
    padding-left: 20px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .text .container {
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .icon {
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 2px;
  /* 2px just for that perfect little extra touch */

}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .icon {
    right: 20px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .icon > .container {
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .icon > .container svg {
  width: 24px;
  height: 24px;
  fill: white;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a {
  display: block;
  color: white;
  padding: 0;
  position: relative;
  text-decoration: none;
  height: 50px;
  cursor: default;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a:hover {
  background-color: #d9a600;
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > .item a:hover {
    background-color: #e6b000;
  }
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .title {
  position: absolute;
  top: 7px;
  right: 30px;
  left: 30px;
  font-size: 16px;
  font-weight: 600;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: end;
  display: -webkit-box;
  -webkit-box-align: end;
  display: flex;
  align-items: end;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .title {
    left: 20px;
    right: 20px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .title .container {
  width: 100%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .sub-title {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 7px;
  font-size: 10px;
  font-weight: 400;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: start;
  display: -webkit-box;
  -webkit-box-align: start;
  display: flex;
  align-items: start;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .sub-title {
    left: 20px;
    right: 20px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .sub-title .container {
  width: 100%;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .icon {
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  width: 30px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  display: none;
  /* Do not show anymore */

}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .icon > .container {
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .icon > .container {
    right: 10px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .icon > .container svg {
  width: 16px;
  height: 16px;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > p {
  display: block;
  margin-left: 30px;
  margin-right: 30px;
  font-style: italic;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .group > .container > p {
    margin-left: 20px;
    margin-right: 20px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  right: auto;
  width: 256px;
  height: 65px;
  padding: 0 20px;
  text-align: center;
  background-color: #005791;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .bottom {
    width: 256px;
    padding: 0 20px;
    height: 65px;
  }
}
@media only screen and (max-width: 768px) {
  .body > .container > .navbars > .container > .navbar > .container .bottom {
    width: auto;
    right: 0;
  }
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container {
  font-size: 0;
  height: 100%;
  text-align: center;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button.maximizeNavbarButton {
  display: none;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button.minimizeNavbarButton {
  display: block;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button {
  background-color: transparent;
  display: block;
  color: white;
  width: 40px;
  height: 50px;
  font-size: 10px;
  font-weight: 400;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button:hover svg {
  fill: #ffc400;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button:not(:last-child) {
  margin-right: 5px;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button {
    height: 50px;
    width: 40px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container {
    height: 50px;
  }
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container > a {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container > a > .container {
  width: 100%;
  height: 100%;
  display: block;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container > a > .container > .icon {
    bottom: 0;
  }
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container > a > .container > .icon > .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container > a > .container > .icon > .container > svg {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
}
.body > .container > .navbars > .container > .navbar > .container .bottom > .container > .button > .container > a > .container > .text {
  bottom: 5px;
  display: none;
}
.body > .container > .page {
  position: absolute;
  top: 0;
  right: 0;
  left: 256px;
  overflow: hidden;
  padding-bottom: 66px;
  min-height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .page {
    left: 256px;
  }
}
@media only screen and (max-width: 768px) {
  .body > .container > .page {
    /*position: relative;*/
    display: block;
    width: 100%;
    top: auto;
    right: auto;
    left: auto;
  }
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar {
  height: 36px;
  background-color: #e6b000;
  color: white;
  font-weight: 800;
  font-size: 16px;
  position: relative;
  display: none;
}
@media only screen and (max-width: 480px) {
  .body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar {
    display: block;
  }
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar > .container > .shortcut-button {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 12px;
  bottom: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar > .container > .shortcut-button > .container {
  width: 16px;
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar > .container > .title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  right: 40px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar > .container > .title > .container {
  width: 100%;
  text-align: center;
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar > .container > .context-menu-button {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar > .container > .context-menu-button > .container {
  width: 16px;
}
.body > .container > .page > .container > .combined-titlebar-container > .container > .combined-titlebar svg {
  fill: white;
}
.body > .container > .page > .container > .titlebar {
  display: block;
  color: #333333;
  position: relative;
  height: 100px;
}
@media only screen and (max-width: 480px) {
  .body > .container > .page > .container > .titlebar {
    display: none;
  }
}
.body > .container > .page > .container > .titlebar > .container {
  height: 100%;
}
.body > .container > .page > .container > .titlebar > .container > .history-button {
  height: 30px;
  width: 30px;
  position: absolute;
  top: 36px;
  bottom: 0px;
  left: 20px;
}
.body > .container > .page > .container > .titlebar > .container > .history-button:hover > .container > svg {
  fill: #004878;
}
.body > .container > .page > .container > .titlebar > .container > .history-button > .container {
  height: 100%;
}
.body > .container > .page > .container > .titlebar > .container > .text {
  height: 100%;
  margin-left: 65px;
  margin-right: 150px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
.body > .container > .page > .container > .titlebar > .container > .text > .container {
  width: auto;
  max-width: 100%;
}
.body > .container > .page > .container > .titlebar > .container > .text > .container > .title > .container {
  font-size: 30px;
  font-weight: 300;
  cursor: pointer;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body > .container > .page > .container > .titlebar > .container > .text > .container > .title > .container > .entity-name {
  font-size: 10px;
}
.body > .container > .page > .container > .titlebar > .container > .buttons {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 135px;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container {
  width: 100%;
  height: 100%;
  text-align: right;
  font-size: 0;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  justify-content: end;
  -ms-flex-pack: flex-end;
  -webkit-box-pack: flex-end;
  justify-content: flex-end;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button {
  display: inline-block;
  background-color: transparent;
  width: 30px;
  height: 30px;
  margin: 0 0 0 15px;
  padding: 0;
  cursor: pointer;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button > .container {
  margin: auto;
  width: 30px;
  height: 100%;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button svg {
  fill: #005791;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button.menu svg {
  fill: #005791;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button.bookmark.bookmarked svg {
  fill: #c4262c;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button.bookmark.locked {
  opacity: 0.4;
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button.bookmark.locked svg {
  fill: #c4262c;
}
.body > .container > .page > .container > .titlebar svg {
  fill: #ffc400;
}
@media only screen and (max-width: 1024px) {
  .body > .container > .page > .container > .titlebar > .container > .text {
    left: 20px;
    right: 135px;
  }
  .body > .container > .page > .container > .titlebar > .container > .buttons {
    right: 20px;
  }
  .body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button {
    margin: 0 0 0 10px;
  }
}
.body > .container > .page > .container > .breadcrumb {
  padding: 5px;
  background-color: #e6b000;
  font-size: 10px;
}
.body > .container > .page > .container > .content {
  font-size: 14px;
  font-weight: 300;
  padding: 0 20px 20px 20px;
}
@media only screen and (max-width: 480px) {
  .body > .container > .page > .container > .content {
    padding: 0;
  }
}
.body > .container > .page > .container > .content > p {
  padding: 20px;
}
.body > .container > .page > .container > .content > .container > .widgets-panel {
  margin-bottom: 20px;
}
.body > .container > .page > .container > .content > .container > .widgets-panel > .container {
  width: 100%;
}
.body > .container > .page > .container > .content .helpText {
  position: fixed;
  right: 0;
  color: white;
  width: 315px;
  background-color: #f2ba00;
  top: 0;
  bottom: 0;
  border: none;
  overflow-y: auto;
}
.body > .container > .page > .container > .content .helpText.minimized {
  width: 0;
}
.body > .container > .page > .container > .content .helpText.minimized .content {
  display: none;
}
.body > .container > .page > .container > .content .helpText > .container > .content > .container > h1 {
  margin-top: 0;
}
.body > .container > .page > .container > .content .helpText > .container > .content > .container > .group > .container > h2 {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 10px;
}
.body > .container > .page > .container > .content .helpText > .container > .content > .container > .group > .container > .group {
  padding-left: 10px;
}
.body > .container > .page > .container > .content .helpText > .container > .content > .container > .group > .container > .group > .container > h3 {
  margin-bottom: 0;
}
.body > .container > .page > .container > .content .helpText > .container > .content > .container > .group > .container > .group > .container > .group {
  padding-left: 10px;
  border-left: rgba(255, 255, 255, 0.5) 2px solid;
}
.body > .container > .page > .container > .content .helpText > .container > .content > .container > .group > .container > .group > .container > .group > .container > h4 {
  margin-bottom: 0;
}
.body > .container > .page > .container > .content .helpText p {
  margin-top: 0;
}
.body > .container > .page > .container > .content .helpText .content {
  padding: 20px;
}
.body > .container > .page > .container > .content .helpText [onclick] {
  cursor: pointer;
}
/* #endregion */

/* #region HelpText */

@media only screen and (min-width: 1024px) {
  .body.helpTextVisible > .container > .page {
    padding-right: 315px;
  }
}
@media only screen and (max-width: 1024px) {
  .body.helpTextVisible > .container > .page {
    padding-right: 315px;
  }
}
@media only screen and (max-width: 768px) {
  .body.helpTextVisible > .container > .page {
    /* The content of the page */
    padding-right: 0;
  }
  .body.helpTextVisible > .container .helpText {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
  .body > .container > .navbars > .container > .horizontal-navbar > .container > .right-buttons > .container > .topNavbarButton {
    display: none;
  }
}
/* #endregion */

/* #region MinimizeNavbar */

.page-toggle-nav {
  position: relative;
  display: block;
  width: 100%;
  top: auto;
  right: auto;
  left: auto;
}
@media only screen and (min-width: 769px) {
  .body.minimizeNavBar > .container .page {
    /* The content of the page */
    left: 50px;
    position: relative;
    display: block;
    width: 100%;
    top: auto;
    right: auto;
    left: auto;
  }
  .body.minimizeNavBar > .container > .navbars > .container > .horizontal-navbar {
    display: block;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar {
    /* The navbar panel */
    left: -400px;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar:before {
    /* Navbar background*/
    width: 0;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .navbarToggle .minimizeNavbarButton {
    display: none;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom {
    /* Navbar Buttons Panel */
    display: none;
    top: 0;
    width: 50px;
    height: 100%;
    padding: 0 20px;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container {
    /* The navbar panel container */
    display: block;
    position: relative;
    left: -20px;
    height: 50px;
    width: 50px;
    margin-top: 10px;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container > .button.maximizeNavbarButton {
    display: block;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container > .button.minimizeNavbarButton {
    display: none;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container > .button {
    width: 50px;
    height: 50px;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container > .button > .container {
    width: 50px;
    height: 50px;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container > .button > .container > a > .container > .icon {
    bottom: 0;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container > .button > .container > a > .container > .icon > .container > svg {
    width: 30px;
    height: 30px;
  }
  .body.minimizeNavBar > .container .navbars > .container > .navbar > .container > .bottom > .container > .button > .container > a > .container > .text {
    display: none;
  }
  .body.minimizeNavBar > .container > .activity-bar {
    left: 0;
  }
}
/* #endregion */

/* #region login */

body > .login {
  position: relative;
  top: 0;
  left: 0;
}
.login-layout.use-background.page-mode {
  background: url("../Images/login-background.png");
}
.login-layout.use-background.page-mode > .container .login {
  background: transparent;
}
.login-layout.splash-enabled.page-mode > .container {
  display: flex;
  flex-direction: row;
}
.login-layout.splash-enabled.page-mode > .container > .login {
  max-width: 350px;
  min-width: 250px;
  min-height: 100%;
  height: 100%;
}
.login-layout.splash-enabled.page-mode > .container > .login > .container {
  margin-top: 30%;
  align-self: self-start;
}
.login-layout.splash-enabled.page-mode > .container > .login > .container > .logotype {
  display: none;
}
.login-layout.splash-enabled.page-mode > .container > .login-splash {
  min-height: 100%;
  height: 100%;
}
.login-layout.splash-disabled > .container,
.login-layout.dialog-mode > .container {
  display: block;
}
.login-layout.splash-disabled > .container > .login,
.login-layout.dialog-mode > .container > .login {
  width: 100%;
  min-height: 100%;
  height: 100%;
  padding: 10px;
}
.login-layout.splash-disabled > .container > .login-splash,
.login-layout.dialog-mode > .container > .login-splash {
  display: none;
}
.login-layout {
  height: 100%;
  min-height: 100%;
}
.login-layout > .container {
  width: 100%;
  height: 100%;
}
.login-layout > .container > .login-splash {
  min-height: 100%;
  height: 100%;
}
.login-layout > .container > .login {
  background-color: #f2ba00;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.login-layout > .container > .login > .container {
  position: static;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow: visible;
  width: 400px;
  max-width: 85%;
}
@media only screen and (max-width: 480px) {
  .login-layout > .container > .login > .container {
    width: 320px;
  }
}
.login-layout > .container > .login > .container > .logotype {
  max-height: 200px;
  width: 80%;
  margin: 0 auto 40px auto;
}
.login-layout > .container > .login > .container > .logotype > .container > svg {
  width: 100%;
  height: auto;
  max-height: 200px;
  fill: white;
}
.login-layout > .container > .login > .container > .form > .container {
  text-align: right;
  color: white;
}
.login-layout > .container > .login > .container > .form > .container > form {
  text-align: left;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .error {
  min-height: 27px;
  margin: 10px 0;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .pannel {
  margin-bottom: 30px;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .pannel .editor .control {
  top: 20px;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .pannel > .container > .pannel-title {
  font-size: 20px;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .bankid-poll-panel > .container > .description {
  text-align: center;
  margin: 20px 0;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .bankid-poll-panel > .container > .qrcode {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .bankid-poll-panel > .container > .loader {
  width: 100%;
  height: 100px;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .bankid-poll-panel > .container > .loader > .container {
  position: relative;
  top: 50px;
}
.login-layout > .container > .login > .container > .form > .container > form > .container > .bankid-panel > .container > .save-social-security-number {
  margin-top: 32px;
}
.login-layout > .container > .login > .container > .form > .container > .forgot-password-button,
.login-layout > .container > .login > .container > .form > .container .username-login-button {
  position: relative;
  display: inline-block;
  cursor: default;
  padding: 5px;
  margin-top: 15px;
  background-color: #b2b2b2;
}
.login-layout > .container > .login > .container > .form > .container > .forgot-password-button:hover,
.login-layout > .container > .login > .container > .form > .container .username-login-button:hover {
  background-color: #00385e;
}
.login-layout > .container > .login > .container > .form > .container > .forgot-password-button > .container > .tooltip,
.login-layout > .container > .login > .container > .form > .container .username-login-button > .container > .tooltip {
  position: absolute;
  top: -20px;
  left: 100%;
  left: calc(115%);
}
.login-layout > .container > .login > .container > .form > .container > .error {
  margin-top: 5px;
}
.login-layout > .container > .login > .container > .form > .container .textbox {
  margin-top: 10px;
  height: 45px;
}
.login-layout > .container > .login > .container > .form > .container .textbox .control {
  left: 0px;
  height: 45px;
}
.login-layout > .container > .login > .container > .form > .container .textbox .control input {
  font-size: 16px;
}
.login-layout > .container > .login > .container > .form > .container .button {
  width: 100%;
  background-color: transparent;
}
.login-layout > .container > .login > .container > .form > .container .button > .container > input {
  margin-top: 25px;
  background-color: #005791;
  color: white;
  height: 45px;
  cursor: default;
}
.login-layout > .container > .login > .container > .form > .container .button > .container > input:hover {
  background-color: #00385e;
}
.login-layout > .container > .login > .container > .form > .container .button > .container > input[disabled="disabled"],
.login-layout > .container > .login > .container > .form > .container .button > .container > input[disabled] {
  color: rgba(255, 255, 255, 0.2);
  background-color: #70797a;
}
.login-layout > .container > .login > .container > .form > .container .button > .container > input[disabled="disabled"]:hover,
.login-layout > .container > .login > .container > .form > .container .button > .container > input[disabled]:hover {
  background-color: #005791;
  background-color: #70797a;
}
.login-layout > .container > .login > .container > .form > .container > .bankid-button {
  display: block;
  position: relative;
  text-align: left;
}
.login-layout > .container > .login > .container > .form > .container > .bankid-button > .container {
  display: inline-block;
  cursor: pointer;
}
.login-layout > .container > .login > .container > .form > .container > .bankid-button > .container:hover {
  color: #00385e;
  text-decoration: underline;
}
.login-layout > .container > .login > .container > .form > .container > .bankid-button > .container > .logo {
  background-color: white;
  border: 1px solid #d9d9d9;
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
}
.login-layout > .container > .login > .container > .form > .container > .bankid-button > .container > .logo > .container {
  width: 30px;
  height: 30px;
  background: url(../images/bankid_logo.png) no-repeat center center;
  background-size: cover;
}
.login-layout > .container > .login > .container > .form > .container > .bankid-button > .container > span {
  margin-left: 5px;
}
.login-layout > .container > .login > .container > .form > .container > .footer {
  text-align: center;
  padding: 10px;
  color: white;
}
.login-layout > .container > .login > .container > .form > .container > .footer.invisible {
  padding: 0;
}
/* #endregion */

/* #region activity-bar */

.activity-bar {
  display: block;
  position: fixed;
  height: 65px;
  bottom: 0;
  right: 0;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.95);
  left: 256px;
  font-size: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 768px) {
  .activity-bar {
    left: 0;
  }
}
.activity-bar > .container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
}
.activity-bar > .container > .activity-bar-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
}
.activity-bar > .container > .activity-bar-left > .container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.activity-bar > .container > .activity-bar-left > .container > .spinner-container {
  display: flex;
  width: auto;
}
.activity-bar > .container > .activity-bar-left > .container > .spinner-container > .container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.activity-bar > .container > .activity-bar-left > .container > .spinner-container > .container > .spinner-icon {
  width: 32px;
  height: 32px;
  cursor: default;
  margin-right: 10px;
}
.activity-bar > .container > .activity-bar-left > .container > .spinner-container > .container > .spinner-icon > .container {
  display: flex;
  width: 100%;
  height: 100%;
}
.activity-bar > .container > .activity-bar-left > .container > .spinner-container > .container > .spinner-text {
  width: auto;
  height: 32px;
  cursor: default;
  display: flex;
}
.activity-bar > .container > .activity-bar-left > .container > .spinner-container > .container > .spinner-text > .container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}
.activity-bar > .container > .activity-bar-left > .container > * {
  margin-left: 10px;
}
.activity-bar > .container > .activity-bar-left > .container > *:first-child {
  margin-right: 15px;
}
.activity-bar > .container > .activity-bar-left > .container > * svg {
  fill: #f2ba00;
}
.activity-bar > .container > .activity-bar-left > .container > *:hover svg {
  fill: #d9a600;
}
.activity-bar > .container > .activity-bar-right {
  top: 0;
  right: 0;
  bottom: 0;
}
.activity-bar > .container > .activity-bar-right.help-visible {
  right: 315px;
}
@media only screen and (max-width: 768px) {
  .activity-bar > .container > .activity-bar-right.help-visible {
    display: none;
  }
}
.activity-bar > .container > .activity-bar-right > .container {
  display: flex;
  width: 100%;
  height: 100%;
  /*align-content: stretch;*/
  justify-content: flex-end;
  align-items: center;
}
.activity-bar > .container > .activity-bar-right > .container > .current-role {
  width: auto;
  height: 32px;
  cursor: default;
}
.activity-bar > .container > .activity-bar-right > .container > .current-role > .container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}
.activity-bar > .container > .activity-bar-right > .container > .current-role > .container > .title {
  height: 32px;
  display: flex;
  align-items: center;
}
.activity-bar > .container > .activity-bar-right > .container > .current-role > .container > .icon {
  width: 32px;
  margin-left: 10px;
}
.activity-bar > .container > .activity-bar-right > .container > .current-role > .container > .icon > .container {
  width: 100%;
  height: 100%;
}
.activity-bar > .container > .activity-bar-right > .container > .help-button {
  height: 32px;
  width: 32px;
}
.activity-bar > .container > .activity-bar-right > .container > .help-button > .container {
  height: 100%;
}
.activity-bar > .container > .activity-bar-right > .container > .help-button > .container svg {
  fill: #e6b000;
}
.activity-bar > .container > .activity-bar-right > .container > .help-button:hover svg {
  fill: #cd9c00;
}
.activity-bar > .container > .activity-bar-right > .container > * {
  margin-right: 10px;
}
.activity-bar > .container > .activity-bar-right > .container > *:last-child {
  margin-right: 15px;
}
.activity-bar > .container > .activity-bar-right > .container > * svg {
  fill: #f2ba00;
}
.activity-bar > .container > .activity-bar-right > .container > *:hover svg {
  fill: #d9a600;
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) {
  .activity-bar {
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
/* #endregion */

#tiptip_holder {
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 99999;
}
#tiptip_holder.tip_top {
  padding-bottom: 5px;
}
#tiptip_holder.tip_top #tiptip_arrow {
  border-top-color: #c4262c;
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
  border-top-color: #c4262c;
  margin-left: -6px;
  margin-top: -7px;
}
#tiptip_holder.tip_bottom {
  padding-top: 5px;
}
#tiptip_holder.tip_bottom #tiptip_arrow {
  border-bottom-color: #c4262c;
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
  border-bottom-color: #c4262c;
  margin-left: -6px;
  margin-top: -5px;
}
#tiptip_holder.tip_right {
  padding-left: 5px;
}
#tiptip_holder.tip_right #tiptip_arrow {
  border-right-color: #c4262c;
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
  border-right-color: #c4262c;
  margin-left: -5px;
  margin-top: -6px;
}
#tiptip_holder.tip_left {
  padding-right: 5px;
}
#tiptip_holder.tip_left #tiptip_arrow {
  border-left-color: #c4262c;
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
  border-left-color: #c4262c;
  margin-left: -7px;
  margin-top: -6px;
}
#tiptip_content {
  -moz-border-radius: 0px;
  -moz-box-shadow: 0 0 6px #979797;
  -webkit-border-radius: 0px;
  -webkit-box-shadow: 0 0 6px #979797;
  background-color: #c4262c;
  border-radius: 0px;
  border: 1px solid #c4262c;
  box-shadow: 0 0 6px #979797;
  color: white;
  font-size: 13px;
  line-height: 15px;
  padding: 5px 10px;
}
#tiptip_arrow {
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  height: 0;
  position: absolute;
  width: 0;
}
#tiptip_arrow_inner {
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  height: 0;
  position: absolute;
  width: 0;
}
/*** Terms of agreement ***/

body > .terms-of-agreement {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2ba00;
  color: white;
  z-index: 5;
  cursor: default;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
body > .terms-of-agreement > .container {
  max-width: 1000px;
  height: 100%;
  max-height: 100%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
body > .terms-of-agreement > .container > .title > .container {
  height: 40px;
  font-size: 24px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
body > .terms-of-agreement > .container > .version {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 40px;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
body > .terms-of-agreement > .container > .content {
  flex: 1 1;
  background-color: white;
  color: #333333;
  padding: 30px;
  overflow-y: auto;
}
body > .terms-of-agreement > .container > .content > .container {
  min-height: 100%;
  position: relative;
}
body > .terms-of-agreement > .container > .content > .container > .text {
  min-height: 100%;
  padding-bottom: 42px;
  cursor: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
  user-select: text;
}
body > .terms-of-agreement > .container > .content > .container > .text > .container {
  min-height: 100%;
}
body > .terms-of-agreement > .container > .content > .container > .text > .container > .loading {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
body > .terms-of-agreement > .container > .content > .container > .text > .container > .loading svg {
  width: 32px;
  fill: #f2ba00;
}
body > .terms-of-agreement > .container > .content > .container > #terms-of-agreement-accept-checkbox {
  -webkit-appearance: checkbox;
  position: absolute;
  bottom: 12px;
  left: 10px;
  width: 15px;
  display: none;
}
body > .terms-of-agreement > .container > .content > .container > label {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 30px;
  display: none;
  font-size: 14px;
  font-weight: 600;
}
body > .terms-of-agreement > .container > .footer {
  height: 40px;
  margin-top: 20px;
}
body > .terms-of-agreement > .container > .footer > .container {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  display: none;
}
body > .terms-of-agreement > .container > .footer > .container > .button {
  /* A basic button (cannot be named button as the class is already named so */
  background-color: #005791;
  color: white;
  margin: 0;
  padding: 0;
  width: 66px;
  height: 60px;
  font-size: 10px;
  display: inline-block;
  height: 30px;
  width: auto;
  margin: 0 0 0 10px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: default;
  border: none;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container {
  width: 100%;
  height: 100%;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > a {
  cursor: default;
  display: block;
  padding: 6px 2px;
  width: 100%;
  height: 100%;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > a > .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > a > .container > .icon {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > a > .container > .icon .container {
  width: 100%;
  height: 100%;
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > a > .container > .icon .container svg {
  fill: white;
  /*margin-left: auto;
							margin-right: auto;*/
  width: 32px;
  height: 32px;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > a > .container > .text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > a > .container > .text .container {
  text-align: center;
  /* Sets its text-overflow to ellipsis */
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > input {
  width: 100%;
  font-size: 14px;
  text-align: center;
  background-color: #e6b000;
  color: inherit;
  padding: 5px;
}
@media only screen and (max-width: 1024px) {
  body > .terms-of-agreement > .container > .footer > .container > .button > .container > input {
    padding: 10px;
  }
}
@media only screen and (max-width: 480px) {
  body > .terms-of-agreement > .container > .footer > .container > .button > .container > input {
    padding: 15px;
  }
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container > input[disabled="disabled"],
body > .terms-of-agreement > .container > .footer > .container > .button > .container > input[disabled] {
  color: rgba(255, 255, 255, 0.2);
}
body > .terms-of-agreement > .container > .footer > .container > .button:disabled {
  background-color: #70797a;
  pointer-events: none;
}
body > .terms-of-agreement > .container > .footer > .container > .button:disabled:hover {
  background-color: #70797a;
}
body > .terms-of-agreement > .container > .footer > .container > .button:hover {
  background-color: #cd9c00;
}
body > .terms-of-agreement > .container > .footer > .container > .button > .container {
  /* Aligns its content in @position (start, end, center, baseline, stretch) */
  display: -ms-flexbox;
  -ms-flex-align: center;
  display: -webkit-box;
  -webkit-box-align: center;
  display: flex;
  align-items: center;
}
body > .terms-of-agreement > .container > .footer > .container > .button.icon {
  fill: white;
  background-color: transparent;
  width: 32px;
  padding: 0 5px;
}
body > .terms-of-agreement > .container > .footer > .container > .button.icon:hover {
  fill: #ffc400;
}
body > .terms-of-agreement > .container > .footer > .container > .empty {
  flex: 1 1;
  text-align: right;
}