/**
 * A "super-module" CSS-file that collects all css from subdirectories
 * as an entry point for the whole library
 *
 * @author rhess robin.hess@awi.de
 */

/* vef base styles */

.vef-ui *,
.vef-ui ::before, 
.vef-ui ::after {
    box-sizing: border-box;
}

.vef-ui {
    font-family: "PT Sans", sans-serif;
    box-sizing: border-box;
    line-height: 1.15;
    color: var(--text-color);
    font-size: 14px;
}

.vef-ui p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: normal;
}

.vef-ui a {
    text-decoration: none;
    color: var(--primary-color);
}

.vef-ui a:hover {
    text-decoration: underline;
}

.vef-ui h1, .vef-ui h2, .vef-ui h3, .vef-ui h4 {
    font-weight: bold;
    color: var(--headline-color);
}

.vef-ui input, .vef-ui button {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* load UiElement base class first */

.checkboxgroup {
    color: var(--text-color);
    display: flex;
    flex-wrap: wrap;
}

.checkboxgroup .checkboxgroup-item {
    width: calc(100% - 10px);
    margin: 0 0 2px 10px;
    padding: 0;
    display: flex;
    flex-direction: row;
}

.checkboxgroup .checkboxgroup-item > .checkboxgroup-checkbox {
    width: 35px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.checkboxgroup.multi-column .checkboxgroup-item {
    width: calc(50% - 23px);
}

.checkboxgroup .checkboxgroup-item > .checkboxgroup-value {
    width: calc(100% - 47px);
    margin: 0;
    padding: 0 0 0 12px;
    display: flex;
    align-items: center;
}

.checkboxgroup .checkboxgroup-item > .checkboxgroup-value > .checkboxgroup-value-inner {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.checkboxgroup .checkboxgroup-item > .checkboxgroup-checkbox > .fa-stack > .fa-check {
    display: none;
}

.checkboxgroup .checkboxgroup-item.selected > .checkboxgroup-checkbox > .fa-stack > .fa-check {
    display: inline-block;
    color: var(--success-color);
}

.vef-context-menu {
    z-index: 4000;
    position: fixed;
    box-shadow: var(--window-shadow);
    color: var(--text-color);
}

.vef-context-menu .context-menu-item {
    padding: 7px 28px 7px 14px;
    transition: background-color 0.33s ease-in-out;
    background-color: var(--light-surface-color);
    cursor: pointer;
}

.vef-context-menu .context-menu-item i {
    margin-right: 14px;
    width: 15px;
    text-align: center;
}

.vef-context-menu .context-menu-item:hover {
    background-color: var(--dark-surface-color);
}

.vef-dropdown {
    position: relative;
    background-color: var(--light-surface-color);
    border: 1px solid var(--light-surface-color);
    color: var(--text-color);
    width: 100%;
    height: 30px;
    line-height: 28px;
    cursor: pointer;
}

.vef-dropdown .vef-dropdown-header .vef-dropdown-header-inner {
    padding: 0 8px;
}

.vef-dropdown.open .vef-dropdown-menu {
    display: block;
    z-index: 3;
}

.vef-dropdown .vef-dropdown-header .vef-dropdown-header-inner .fas.fa-chevron-down {
    float: right;
    line-height: 30px;
}

.vef-dropdown .vef-dropdown-menu {
    position: absolute;
    top: 27px;
    display: none;
    overflow-y: scroll;
    border: 1px solid var(--light-surface-color);
    background-color: var(--light-surface-color);
    max-height: 250px;
    left: -1px;
    right: -1px;
}

.vef-dropdown .vef-dropdown-menu .vef-dropdown-content .vef-dropdown-item {
    width: calc(100% - 14px);
    height: 30px;
    border-bottom: 1px solid var(--text-color);
    margin: 0 8px;
}

.vef-dropdown .vef-dropdown-menu .vef-dropdown-content .vef-dropdown-item:hover,
.vef-dropdown .vef-dropdown-menu .vef-dropdown-content .vef-dropdown-item:focus {
    font-weight: bold;
}

.vef-dropdown .vef-dropdown-menu .vef-dropdown-search input {
    margin: 0;
    outline: 0;
    width: calc(100% - 16px);
    height: 30px;
    margin: 0 8px;
    border: 0px;
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    background-color: var(--light-surface-color);
}

.vef-dropdown .vef-dropdown-menu .vef-dropdown-search input::placeholder {
    font-style: italic;
}

.vef-dropdown .vef-dropdown-menu .vef-dropdown-content .vef-dropdown-item .vef-dropdown-item-text,
.vef-dropdown .vef-dropdown-header .vef-dropdown-header-inner {
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* default position on the right */

.feedback-widget.maximized {
    width: 400px;
    height: fit-content;
    padding: 12px;
    z-index: 3001;
}

.feedback-widget .form {
    display: none;
}

.feedback-widget.maximized .form {
    display: block;
}

.feedback-widget .form .feedback-title {
    color: var(--light-surface-color);
    font-weight: bold;
}

.feedback-widget .form p {
    color: var(--light-surface-color);
    margin: 5px 0;
}

.feedback-widget .form p:empty {
    display: none;
}

.feedback-widget .form .feedback-text {
    resize: none;
    margin-top: 8px;
    background-color: var(--light-surface-color);
    color: var(--text-color);
    width: calc(100% - 12px);
    border: 1px solid var(--text-color);
    padding: 5px;
    height: 180px;
}

.feedback-widget .form input {
    width: 50%;
}

.feedback-widget .form .fas.fa-times {
    position: absolute;
    color: var(--light-surface-color);
    cursor: pointer;
    top: 7px;
    right: 8px;
}

.feedback-widget .form .fas.fa-times:hover {
    color: var(--dark-surface-color);
}

.feedback-widget .form .response {
    display: inline-block;
    margin: 10px 0;
    color: var(--light-surface-color);
}

.feedback-widget .form .response.fail {
    color: var(--error-color);
}

.feedback-widget .form .btn-submit {
    float: right;
    background-color: var(--light-surface-color);
    color: var(--primary-color);
    padding: 7px;
    cursor: pointer;
    margin: 10px 0 0 0;
    outline: 0;
    border: 0;
}

.feedback-widget .form .btn-submit:hover,
.feedback-widget .form .btn-submit:focus {
    background-color: var(--dark-surface-color);
}

.vef-window.slim.popup-tour {
    transition:
        top 0.33s ease-out,
        left 0.33s ease-out,
        height 0.33s ease-out,
        width 0.33s ease-out,
        opacity 0.33s ease-out;
    opacity: 1;
}

.vef-window.slim.popup-tour .vef-window-content {
    padding: 16px 24px 16px 16px;
}

/* Simple and generic text input with button */

.text-input-field {
    width: 100%;
    display: flex;
    align-items: center;
}

.text-input-field .fa-times {
    width: 20px;
    margin-left: 4px;
    color: var(--text-color);
    display: flex;
}

.text-input-field .fa-times:hover {
    cursor: pointer;
    color: var(--error-color);
}

.text-input-field input {
    margin: 0;
    outline: 0;
    color: var(--primary-color);
    width: calc(100% - 124px);
    height: 25px;

    padding: 0 7px;
    border: 2px solid var(--primary-color);
}

.text-input-field input::placeholder {
    font-style: italic;
    color: var(--primary-color);
}

.text-input-field button {
    width: 100px;
    height: 25px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--light-surface-color);
    cursor: pointer;
    background-color: var(--primary-color);
    text-align: center;
}

.text-input-field button:focus {
    outline: 0;
}

.tab-group .tab-container {
    display: flex;
    margin-bottom: 14px;
}

.tab-group .tab-container .tabs  {
    display: flex;
    align-items: baseline;
}

.tab-group .tab-container .tabs .tab  {
    border-bottom: 1px solid #AAA;
    margin: 0 -1px;
    padding: 4px 12px;
    cursor: pointer;
    width: max-content;
}

.tab-group .tab-container .tabs .tab:hover  {
    background-color: var(--dark-surface-color);
}

.tab-group .tab-container .tabs .tab[data-active="true"] {
    background-color: var(--primary-color);
    z-index: 1;
    cursor: default;
    color: var(--light-surface-color);
}

.tab-group .tab-container .tab-spacer {
    width: 100%;
    border-bottom: 1px solid #AAA;
}

.vef-tree {
    width: 100%;
}

.vef-tree .tree-item > .tree-item {
    padding-left: 20px;
}

.vef-tree .tree-item > .item-inner {
    width: 100%;
    display: flex;
    align-items: center;
    color: #999;
}

.vef-tree .tree-item > .item-inner > .item-checkbox,
.vef-tree .tree-item > .item-inner > .item-icon {
    width: 25px;
    display: inline-block;
    text-align: center;
}

.vef-tree .tree-item > .item-inner > .item-title {
    width: calc(100% - 50px);
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vef-tree .tree-item > .item-inner > .item-checkbox > .fa-check {
    display: none;
}

/* selected state */

.vef-tree .tree-item.selected > .item-inner > .item-checkbox > .fa-check {
    display: inline-block;
    color: green;
}

.vef-tree .tree-item.selected.partly > .item-inner > .item-checkbox > .fa-check {
    color: #999;
}

.vef-tree .tree-item.selected > .item-inner {
    color: #222;
}

.vef-tree .tree-item.selected > .item-inner > .item-icon {
    color: var(--primary-color);
}

.vef-tree .tree-item.selected > .item-inner > .item-icon {
    color: var(--primary-color);
}

.vef-window {
    position: fixed;
    z-index: 4001;
    background-color: var(--background-color);
    box-shadow: var(--window-shadow);
    font-size: 16px;

    /* default position */
    top: 0;
    left: 0;

    padding: 0px 15px 15px 15px;

    display: none;
}

/* fullscreen on small screens*/

@media (max-width: 767.5px) {
    .vef-window.responsive {
        /* override element position with !important */
        width: unset !important;
        inset: 0 0 0 0 !important;
        transition: inset 0.5s ease-in-out;
    }

    .vef-window.responsive .vef-window-header.draggable {
        cursor: default;
    }

    .vef-window.responsive {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.vef-window.open {
    display: block;
}

.vef-window .vef-window-header {
    color: var(--headline-color);
    width: 100%;
    padding: 10px 0px 2px 0px;
    margin-bottom: 10px;
    user-select: none;
    border-bottom: 1px solid var(--text-color);
}

.vef-window .vef-window-header.draggable {
    cursor: move;
}

.vef-window .vef-window-header .vef-window-title {
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    height: 20px;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    width: calc(100% - 20px);
}

.vef-window .vef-window-header .fas.fa-times {
    float: right;
    font-size: 18px;
}

.vef-window .vef-window-header .fas.fa-times:hover {
    color: var(--text-color);
    cursor: pointer;
}

.vef-window .vef-window-content h4 {
    font-size: 16px;
    margin: 20px 0px 8px 0px;
}

/* slim mode */

.vef-window.slim {
    padding: 0;
}

.vef-window.slim .vef-window-content {
    padding: 16px 16px 16px 16px;
}

.vef-window.slim .vef-window-header {
    width: calc(100% - 5px);
    height: 0;
    margin: 0;
    border: 0;
    padding: 0;
    user-select: none;
}

.vef-window.slim .vef-window-header .vef-window-title {
    display: none;
}

.vef-window.slim .vef-window-header .fas.fa-times {
    margin-right: 7px;
    margin-top: 8px;
}

/* arrow pointer */

.vef-window .pointer-container {
    display: none;
    position: absolute;
    overflow: hidden;
    height: 24px;
    width: 24px;
}

.vef-window .pointer-container:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    transform: rotate(45deg);
    box-shadow: var(--window-shadow);
    background-color: var(--background-color);
}

.vef-window.pointer-left .pointer-container {
    display: block;
    top: 0px;
    left: -24px;
}

.vef-window.pointer-left .pointer-container:before {
    top: 3px;
    left: 16px;
}

.vef-window.pointer-right .pointer-container {
    display: block;
    top: 0px;
    right: -24px;
}

.vef-window.pointer-right .pointer-container:before {
    top: 3px;
    right: 16px;
}

.vef-window.pointer-top .pointer-container {
    display: block;
    top: -24px;
    left: calc(50% - 6px);
}

.vef-window.pointer-top .pointer-container:before {
    top: 16px;
    left: 3px;
}

.vef-window.pointer-bottom .pointer-container {
    display: block;
    bottom: -24px;
    left: calc(50% - 6px);
}

.vef-window.pointer-bottom .pointer-container:before {
    bottom: 16px;
    left: 3px;
}

/* default vef button styling in vef window */

.vef-window button {
    margin: 5px 0 0 5px;
    padding: 4px 8px;
    color: var(--light-surface-color);
    background-color: var(--primary-color);
    border: unset;
    outline: unset;
    outline-offset: -1px;
    cursor: pointer;
}

.vef-window button:hover,
.vef-window button:focus {
    background-color: var(--primary-color-dark);
}

.vef-window button:disabled {
    cursor: unset;
    background-color: var(--disabled-color);
    outline: unset;
}

.vef-widget-button {
    width: 50px;
    height: 50px;
    max-height: 50px;
    max-width: 50px;
    bottom: 50px;
    right: 50px;
    opacity: 0.7;
    padding: 0;
    z-index: 3000;
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    position: fixed;
    overflow: hidden;
    transition: max-width 1s ease-out, max-height 1s ease-out;
}

.vef-widget-button.left {
    left: 50px;
    right: unset;
}

.vef-widget-button:hover {
    opacity: 1;
}

.vef-widget-button .widget-button-icon {
    display: block;
    cursor: pointer;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    text-align: center;
    color: var(--light-surface-color);
}

.vef-widget-button.maximized {
    opacity: 1;
    max-height: calc(100vh - 50px);
    max-width: calc(100vw - 50px);
}

.vef-widget-button.maximized .widget-button-icon {
    display: none;
}

.vef-dropdown.color-scale-dropdown .vef-dropdown-content .vef-dropdown-item {
    background-color: unset;
    width: 100%;
    margin: 0;
}

.vef-dropdown.color-scale-dropdown .vef-dropdown-content .vef-dropdown-item .vef-dropdown-item-text {
    padding: 0 8px;
}

.vef-dropdown.color-scale-dropdown .vef-dropdown-header .vef-dropdown-header-inner {
    background-color: rgba(256, 256, 256, 0.4);
}

.vef-dropdown.color-scale-dropdown .vef-dropdown-content .vef-dropdown-item .vef-dropdown-item-text {
    background-color: rgba(256, 256, 256, 0.4);
    display: none;
}

.vef-dropdown.color-scale-dropdown .vef-dropdown-content .vef-dropdown-item:hover .vef-dropdown-item-text,
.vef-dropdown.color-scale-dropdown .vef-dropdown-content .vef-dropdown-item:focus .vef-dropdown-item-text{
    display: block;
}

.color-scale-picker .opacity-slider {
    width: 150px;
    height: 15px;
    margin-right: 10px;
}

.color-scale-picker .color-picker {
    width: 100%;
    display: none;
    margin-top: 20px;
}

.color-scale-picker .color-picker .iro-color-picker {
    float: left;
}

.color-scale-picker .color-picker .color-picker-form {
    float: right;
    padding: 0px 0px 0px 25px;
}

.color-scale-picker .color-picker .color-picker-form span {
    width: 50px;
    display: inline-blocK;
}

.color-scale-picker .color-picker .color-picker-form input {
    width: 70px;
    padding: 2px;
    margin: 0 0 5px 0;
}

.color-scale-picker .min-max-form {
    margin: 20px auto 10px auto;
    width: calc(100% - 24px);
}

.color-scale-picker .min-max-form button{
    margin: 5px 5px 0 0;
}

.color-scale-picker .color-slider-placeholder {
    margin-top: 20px;
}

.color-scale-picker .min-max-form input {
    display: block;
    float: left;
    text-align: center;
    width: calc(44%);
    height: 24px;
    outline: unset;
    border: unset;
    box-sizing: border-box;
    margin: 14px 0 10px 0;
}

.color-scale-picker .min-max-form input.error {
    outline: 1px solid var(--error-color);
    outline-offset: -1px;
}

.color-scale-picker .min-max-form .separator {
    float: left;
    width: 12%;
    margin: 14px 0 10px 0;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-weight: bold;
}

.color-scale-picker .btn-delete-color {
    float: right;
}

.color-scale-picker .footer-buttons {
    margin-top: 20px;
    float: right;
}

.color-slider-container {
    width: 100%;
    height: 48px;
    overflow: hidden;
}

.color-slider-container .color-slider {
    width: calc(100% - 24px);
    margin: 0 12px;
    height: 20px;
    margin-bottom: 20px;
    position: relative;
}

.color-slider-container .color-slider .handle {
    position: absolute;
    top: 14px;
    border-radius: 50% 50% 50% 0;
    width: 20px;
    height: 20px;
    transform: rotate(135deg) translateX(15px);
    border: 1px solid #ffffff;
}

:root {
    --lightbox-background: #F6F6F6;
    --lightbox-navigation-bar: #f8faf9;
    --lightbox-icon-shadow: white;
    --lightbox-font-shadow: white;
    --lightbox-mobile-font: white;
    --lightbox-mobile-button-font: white;
    --lightbox-icon: var(--primary-color);
    --lightbox-font: var(--primary-color);
    --lightbox-caption-font: var(--text-color);
    --lightbox-caption-headline: var(--headline-color);
    --lightbox-caption-background: var(--lightbox-background);
    --lightbox-mobile-caption-background: var(--lightbox-navigation-bar);
    --lightbox-root-z-index: 100;
}

/* added vef-ui class for higher specificity selectors and font inheritance */

.vef-ui.pswp-lightbox .pswp {
    --pswp-bg: var(--lightbox-background);
    --pswp-icon-color: var(--lightbox-icon);
    --pswp-icon-stroke-color: var(--lightbox-icon-shadow);
    --pswp-root-z-index: var(--lightbox-root-z-index);
}

/*[1]: required for drag to close event */

.vef-ui.pswp-lightbox {
    background-color: var(--lightbox-background);
}

/*[1]*/

.vef-ui.custom-lightbox[class*="state-"] .vef-ui.pswp-lightbox {
    background-color: transparent;
}

/* disable pswp topbar */

.vef-ui.pswp-lightbox .pswp__top-bar {
    display: none;
}

.vef-ui.custom-lightbox {
    position: fixed;
    width: 100vw;
    /* height is set in Lightbox.js */
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: var(--lightbox-root-z-index);
}

.vef-ui.custom-lightbox>[class|='lightbox'] {
    position: relative;
}

.vef-ui.custom-lightbox.state-closing :is(.lightbox-header, .lightbox-footer, .pswp__dynamic-caption, .metadata-section) {
    visibility: hidden;
}

.vef-ui.custom-lightbox.state-closing .lightbox-header .header-item-text.visible {
    visibility: hidden !important;
}

/* lightbox header, footer, content */

.vef-ui.custom-lightbox .lightbox-header {
    width: 100%;
    z-index: calc(var(--lightbox-root-z-index) + 10);
    background-color: var(--lightbox-navigation-bar);
    color: var(--lightbox-font);
}

.vef-ui.custom-lightbox .lightbox-header [class|="header-item"] {
    display: inline-block;
    padding: 12px 15px;
    text-align: center;
}

.vef-ui.custom-lightbox .lightbox-header .header-item-text {
    user-select: none;
}

.vef-ui.custom-lightbox .lightbox-header .header-item-button {
    cursor: pointer;
}

@media (hover: hover) {
    .vef-ui.custom-lightbox .lightbox-header .header-item-button:hover {
        background-color: #e6e6e6;
    }
}

.vef-ui.custom-lightbox .lightbox-header .header-left {
    float: left;
}

.vef-ui.custom-lightbox .lightbox-header .header-right {
    float: right;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.vef-ui.custom-lightbox :is(.lightbox-header, .lightbox-footer) {
    position: relative;
    height: 40px;
    overflow: hidden;
    animation-name: fadeInOpacity;
    animation-duration: 0.8s;
}

.vef-ui.lightbox-content {
    height: calc(100% - 80px);
}

.vef-ui.custom-lightbox .lightbox-footer {
    z-index: calc(var(--lightbox-root-z-index) + 10);
}

.vef-ui.custom-lightbox .popup-pagination [class|="btn"] {
    color: var(--lightbox-font);
    background-color: var(--lightbox-navigation-bar);
}

/* pswp fade out effect is to early for slow internet connections: show the gallery image until the lightbox image is fully loaded */

.vef-ui.pswp-lightbox .pswp__img.pswp__img--placeholder {
    z-index: 2;
}

.vef-ui.pswp-lightbox .pswp__img {
    background-color: var(--lightbox-image-background);
}

/*  metadata */

.vef-ui.pswp-lightbox .pswp__dynamic-caption {
    background-color: var(--lightbox-caption-background);
    overflow: auto;
    overscroll-behavior: contain;
    transition: opacity 20ms linear !important;
    margin: 0px 20px;
    padding: 0 10px;
    /*padding: 20px 15px;
    background-color: var(--background-color);*/
}

.vef-ui.pswp-lightbox .pswp__dynamic-caption--aside {
    width: 30em;
    max-width: none;
}

.vef-ui.custom-lightbox:is(.state-before-opening, .state-opening) .pswp__dynamic-caption {
    visibility: hidden;
}

.vef-ui.lightbox-content .template-ui {
    color: var(--lightbox-caption-font)
}

.vef-ui.lightbox-content .template-ui h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: var(--lightbox-caption-headline)
}

.vef-ui.pswp-lightbox .template-ui a {
    color: var(--primary-color);
}

.vef-ui.pswp-lightbox .template-ui .metadata-table {
    margin-bottom: 20px;
}

.vef-ui.pswp-lightbox .pswp__dynamic-caption .metadata-table :is(.tr-message, .tr-button) {
    background-color: var(--lightbox-caption-background);
}

.vef-ui.custom-lightbox .metadata-section .metadata-table :is(.tr-message, .tr-button) {
    background-color: var(--lightbox-mobile-caption-background);
}

/* avoid that the caption overlays the image for a moment when click to zoom is used  */

.vef-ui.pswp-lightbox .pswp__zoom-wrap {
    z-index: calc(var(--pswp-root-z-index) + 1);
}

.vef-ui.custom-lightbox .metadata-section {
    background-color: var(--lightbox-mobile-caption-background);
    height: 100%;
    position: relative;
    z-index: var(--lightbox-root-z-index);
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 2em 2em 2em 2em;
    left: 0em;
    transition: width 500ms;
}

.vef-ui.custom-lightbox .metadata-section.closed {
    overflow-y: hidden;
    padding: 0em;
    width: 0em;
}

.vef-ui.custom-lightbox .metadata-section.closed>* {
    visibility: hidden;
}

@media only screen and (min-width: 1281px) {
    .vef-ui.custom-lightbox .lightbox-header .metadata-button {
        display: none;
    }

    .vef-ui.custom-lightbox .metadata-section {
        display: none;
    }
}

@media only screen and (max-width: 1280px) {
    @media (orientation: portrait) {
        .vef-ui.custom-lightbox .metadata-section {
            width: 50vw;
        }
    }

    @media (orientation: portrait) and (max-width: 640px) {
        .vef-ui.custom-lightbox .metadata-section {
            width: 100vw;
        }
    }

    @media (orientation: landscape) {
        .vef-ui.custom-lightbox .metadata-section {
            width: 30em;
            max-width: 50vw;
        }
    }

    @media (orientation: landscape) and (max-width: 640px) {
        .vef-ui.custom-lightbox .metadata-section {
            max-width: 100vw;
        }
    }

    .vef-ui.custom-lightbox .pswp__dynamic-caption {
        display: none;
    }
}

:root {
    --share-box-background-color: var(--lightbox-background);
    --share-box-shadow: var(--window-shadow);
    --lightbox-overlays-z-index: var(--lightbox-root-z-index);
}

.vef-ui.custom-lightbox .header-item-text.zoom-text.hidden {
    display: none;
}

.vef-ui.custom-lightbox .share-box {
    position: absolute;
    display: block;
    float: right;
    width: fit-content;
    margin-top: 10px;
    right: 10px;
    padding-top: 10px;
    z-index: calc(var(--lightbox-overlays-z-index) + 10);
    background-color: var(--share-box-background-color);
    box-shadow: var(--share-box-shadow);
}

.vef-ui.custom-lightbox .share-box * {
    font-size: 1em;
}

.vef-ui.custom-lightbox .share-box fieldset {
    border: 0px;
    margin: 0px;
    padding: 10px;
}

.vef-ui.custom-lightbox .share-box input {
    margin: 5px 0px;
    border: 1px lightgrey solid;
    width: 14em;
}

.vef-ui.custom-lightbox .share-box button {
    border-color: var(--primary-color);
    border-radius: 5px;
    border: 1.5px var(--primary-color) solid;
    cursor: pointer;
}

.vef-ui.custom-lightbox .share-box button,
.vef-ui.custom-lightbox .share-box input {
    box-sizing: border-box;
    height: 1.8em;
    outline: none;
}

.vef-ui.custom-lightbox .share-box .copy-message {
    text-align: left;
    margin: 5px 0px;
    font-style: italic;
    color: var(--primary-color);
    cursor: context-menu;
    opacity: 0;
}

.vef-ui.custom-lightbox .share-box.closed {
    display: none;
}

.vef-ui.custom-lightbox .share-box .copy-message.visible {
    opacity: 1;
    transition: opacity 0.5s;
}

.vef-ui.custom-lightbox .share-box .copy-message.hidden {
    opacity: 0;
    transition: opacity 0.5s;
}

.vef-ui.custom-lightbox .share-box .copy-button {
    background-color: var(--primary-color);
    color: white;
    box-sizing: border-box;
    width: 1.8em;
}

.vef-ui.custom-lightbox .share-box .close-button {
    padding: 0px 5px;
    float: right;
    color: var(--primary-color);
    background-color: var(--share-box-background-color);
}

.vef-ui.custom-lightbox .share-box .header {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

/* sidebar preview-thumbnail icon */

.preview-thumbnail-image {
    display: inline-block;
    width: 100%;
    position: relative;
}

.preview-thumbnail-image>div {
    position: relative;
    width: 100%;
    height: 0;
    background-color: var(--background-color);
    /* observe: padding is based on aspect ratio and is set via javascript in ImageUtils.js */
}

.preview-thumbnail-image img {
    position: absolute;
    /* height is based on padding */
    height: 100%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.preview-thumbnail-image:after,
.preview-thumbnail-image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.preview-thumbnail-image:after {
    content: '\A';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
}

.preview-thumbnail-image:before {
    font-size: 2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    content: "\f424";
    font-family: "Font Awesome 5 Free";
    /*font-weight: required for f424 in v5, however not in v6 */
    font-weight: 900;
    font-size: 5em;
    z-index: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

@media (hover: hover) {

    .preview-thumbnail-image:hover:after,
    .preview-thumbnail-image:hover:before {
        opacity: 1;
    }
}

/* added .vef-ui.viewer class via general sibling combinator to prevent impact on pswp in media gallery  */

.vef-ui.viewer-lightbox.pswp {
    --lightbox-stroke-color: none;
    --pswp-bg: var(--background-color);
    --pswp-icon-color: var(--primary-color);
    --pswp-icon-stroke-color: var(--lightbox-stroke-color);
}

.vef-ui.viewer-lightbox.pswp .pswp__button,
.vef-ui.viewer-lightbox.pswp .pswp__zoom-level-indicator {
    font-size: 1em;
    font-weight: bold;
    color: var(--pswp-icon-color);
    text-shadow: 1px 0 0 var(--lightbox-stroke-color), 0 -1px 0 var(--lightbox-stroke-color), 0 1px 0 var(--lightbox-stroke-color), -1px 0 0 var(--lightbox-stroke-color);
}

.vef-ui.viewer-lightbox.pswp .pswp__zoom-level-indicator {
    height: auto;
    align-self: center;
    padding: 5px 6px;
    margin-right: 4px;
}

/* color style */

:root {
    --gallery-image-background: var(--background-color);
}

.media-gallery>div {
    opacity: 1;
    background-color: var(--gallery-image-background);
}

.media-gallery.pswp-gallery .pswp-caption-content {
    display: none;
}

.media-gallery.pswp-gallery .pswp-gallery__item a {
    text-decoration: none;
}

.media-gallery.pswp-gallery .pswp-gallery__item img {
    filter: brightness(100%);
}

.media-gallery.pswp-gallery .pswp-gallery__item img:not([src]) {
    opacity: 0;
}

.media-gallery.pswp-gallery .pswp-gallery__item img[class*='loaded'] {
    opacity: 1;
    transition: opacity 0.5s;
}

@media (hover: hover) {
    .media-gallery.pswp-gallery .pswp-gallery__item a:hover {
        cursor: pointer;
    }

    .media-gallery.pswp-gallery .pswp-gallery__item img:hover {
        filter: brightness(80%);
        transition: all 0.2s ease;
    }
}

.gallery-overview {
    /* same padding as 'margins' value in the js configuration for justified gallery */
    padding: 0px 3px;
}

.gallery-overview h1 {
    color: var(--primary-color);
    margin-bottom: 1em;
}

.gallery-overview [class^='gallery-flex-container'] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    margin: 1.5em 0em;
    row-gap: 0.25em;
}

.gallery-overview .gallery-flex-container-icon {
    column-gap: 1em;
}

.gallery-overview .gallery-flex-container-data {
    column-gap: 2em;
}

.gallery-overview .gallery-description {
    color: gray;
    cursor: help;
}

.gallery-overview .gallery-description:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 0.3em;
}

.gallery-overview .gallery-description#author:before {
    content: "\f007";
    /*content: "\f500";*/
}

.gallery-overview .gallery-description#depth:before {
    content: "\f309";
}

.gallery-overview .gallery-description#coordinate {
    cursor: pointer;
}

.gallery-overview .gallery-description#coordinate:before {
    content: "\f5a0";
    /*content: "\f3c5";*/
}

.gallery-overview .gallery-description#date:before {
    content: "\f133";
    /*content: "\f073";*/
}

.gallery-overview .gallery-description#dataset:before {
    content: "\f302";
}

/* general configuration video player */

.video-player {
    --main-color: var(--primary-color, #00AFB9);
    --background-color-loading: #aaa;
    --background-color: #000;
}

.video-player *,
.video-player ::before,
.video-player ::after {
    box-sizing: border-box;
}

.video-player {
    height: 100%;
    width: 100%;
}

.video-player .video-player-container {
    height: 100%;
    width: 100%;
    background-color: var(--background-color);
}

.video-player video {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--background-color-loading);
    transition: background-color 1s ease-in-out;
}

.video-player video.loaded {
    background-color: var(--background-color);
}

/* VIDEOJS PLAYER */

.vjs-poster {
    z-index: -1;
    position: absolute;
}

video[poster] {
    object-fit: inherit;
}

video:fullscreen {
    object-fit: contain;
}

/* videojs: thumbnail compatibility */

.video-js .vjs-progress-control.vjs-control:hover .vjs-mouse-display {
    display: none;
}

.video-js .vjs-progress-control.vjs-control .vjs-time-tooltip {
    display: none !important;
}

.video-player-container>.video-js {
    height: 100% !important;
}

.video-js .vjs-time-control {
    display: block;
}

.video-js .vjs-remaining-time {
    display: none;
}

/* videojs: UI design */

.vjs-control-bar>* {
    order: 1;
}

.video-js .vjs-control-bar {
    height: auto !important;
    flex-wrap: wrap;
    background: linear-gradient(to top, var(--background-color) 0, transparent max(15%, 7.5em)) !important;
    padding: 2em 1em 1em 1em;
}

.video-js .vjs-progress-control.vjs-control {
    order: 10;
    width: 100%;
    height: 3em;
}

/* videojs: seekbar */

.video-js .vjs-progress-control.vjs-control .vjs-progress-holder {
    border-radius: 1em;
}

.video-js .vjs-progress-control.vjs-control .vjs-slider-bar {
    border-radius: 1em;
}

.video-js .vjs-control-bar .vjs-control {
    height: 3em;
}

.video-js .vjs-control-bar .vjs-playback-rate {
    margin-left: auto;
}

.video-js .vjs-time-control>* {
    font-size: 1.25em !important;
}

.video-js.vjs-theme-vef .vjs-big-play-button {
    background-color: #00AFB9;
    opacity: .8;
}

.video-js.vjs-theme-vef:hover .vjs-big-play-button {
    background-color: #00AFB9;
    opacity: .9;
    transition: opacity .5s;

}

@media (hover: hover) {
    .video-js.vjs-theme-vef .vjs-button>*:hover {
        /* icons: play, menu, fullscreen and timestamp -> above seek bar*/
        color: var(--main-color);
        transition: color 0.2s ease-in-out;
    }

    .video-js .vjs-progress-control.vjs-control .vjs-play-progress.vjs-slider-bar:hover {
        color: var(--main-color);
        transition: color 0.2s ease-in-out;
    }

    .video-js .vjs-playback-rate:hover .vjs-playback-rate-value {
        color: var(--main-color) !important;
        transition: color 0.2s ease-in-out;
    }

    .video-js .vjs-playback-rate>.vjs-menu .vjs-menu-item.vjs-selected {
        color: black;
    }

    .video-js .vjs-playback-rate>.vjs-menu .vjs-menu-item {
        color: white;
    }
}

/* SHAKA VIDEO PLAYER*/

/* settings for UI that adapts to small sizes */

.video-player .shaka-controls-container * {
    flex-shrink: 1;
}

.video-player .shaka-overflow-menu,
.video-player .shaka-settings-menu {
    max-height: 80%;
}

/* color and menu settings */

.video-player .shaka-video-container .material-icons-round {
    /* icons like play, menu, fullscreen, loop, abr, ... */
    font-family: 'Material Icons Round';
}

@media (hover: hover) {
    .video-player .shaka-controls-button-panel>*:hover {
        /* icons: play, menu, fullscreen and timestamp -> above seek bar*/
        color: var(--main-color);
        transition: color 0.2s ease-in-out;
    }

    .video-player .shaka-overflow-menu>*:hover {
        /* main settings menu */
        color: var(--main-color);
    }

    .video-player .shaka-settings-menu>*:hover {
        /* child settings menu */
        color: var(--main-color);
    }

    .video-player .shaka-current-time:hover {
        /* timestamp above seek bar*/
        color: white;
    }

    input[type='range']::-webkit-slider-thumb:hover {
        /* dot on range elements, i.e., volume bar */
        background: var(--main-color);
        transition: color 0.2s ease-in-out;
        cursor: pointer;
    }

    input[type='range']::-moz-range-thumb:hover {
        /* dot on range elements, i.e., volume bar */
        background: var(--main-color);
        transition: color 0.2s ease-in-out;
        cursor: pointer;
    }
}

/* make the gradient appear behind the buttons even for small video players */

.video-player .shaka-controls-container .shaka-scrim-container {
    background: linear-gradient(to top, var(--background-color) 0, transparent max(15%, 4.5em))
}

.video-player .shaka-spinner-path {
    /* buffer animation */
    stroke: white !important;
}

.video-player .shaka-range-container input[type='range'] {
    cursor: pointer;
}

.video-player-shortcuts {
    border-collapse: collapse;
}

.video-player-shortcuts kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
    cursor: default;
}

.video-player-shortcuts tr > td {
    padding: 6px 10px;
}

.video-player-shortcuts tr > td:last-child {
    padding-left: 8px;
}

.video-player-shortcuts tr:nth-of-type(odd) {
    background-color: var(--dark-surface-color);
}

.video-player .thumbnail-box {
    display: inline-block;
    position: absolute;
    bottom: 0px;
    z-index: 2;
    user-select: none;
    height: max-content;
}

.video-player .thumbnail-time {
    display: inline-block;
    position: absolute;
    width: 100%;
    bottom: 4px;
    font-family: Roboto-Regular, Roboto, sans-serif;
    font-size: 12px;
    color: white;
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
    text-align: center;
    cursor: default;
    z-index: 3;
}

.video-player .thumbnail-media canvas {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 10px;
    border: 3px solid white;
    background-color: white;
}

.video-player .shaka-seek-bar-container {
    height: 8px;
    pointer-events: none;
}

.video-player .shaka-seek-bar-container .shaka-range-element {
    top: -2px;
    pointer-events: auto;
}

.media-container .cover-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.media-container img {
    float: left;
}

.media-container canvas {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    .media-container:hover canvas {
        display: block;
    }
}

.media-container .video-cover-text-container {
    position: absolute;
    z-index: 3;
    bottom: 0px;
    right: 0px;
    padding: 0px 5px;
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.media-container .video-cover-text-container .overlay-item {
    color: white;
    padding: 5px;
    display: inline-block;
}

.flex-container-ifdo-icon {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0.5em 0em;
    row-gap: 0.25em;
    column-gap: 0.5em;
}

/* iFDO icon font */

[class^="icon-image"],
[class*=" icon-image"] {
    color: gray;
    font-size: 1.8em;
    cursor: help;
}

/* Sidebar Container */

.sidebar {
    position: absolute;
    background-color: var(--background-color);
    overflow: hidden;
    z-index: 2000;
    transition: all 500ms;
    width: 460px;

    box-shadow: var(--window-shadow);
    border-radius: var(--border-radius);
}

.sidebar.left {
    top: 10px;
    left: 10px;
    bottom: 10px;
}

.sidebar.right {
    top: 10px;
    right: 10px;
    bottom: 10px;
}

.sidebar.bottom {
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 40%;
    width: unset;
}

.sidebar.left ~ .sidebar.responsive.bottom {
    left: 480px;
}

.sidebar.left.collapsed ~ .sidebar.responsive.bottom {
    left: 10px;
}

.sidebar.left.collapsed.menu ~ .sidebar.responsive.bottom {
    left: 60px;
}

.sidebar.right ~ .sidebar.responsive.bottom {
    right: 480px;
}

.sidebar.right.collapsed ~ .sidebar.responsive.bottom {
    right: 10px;
}

.sidebar.right.collapsed.menu ~ .sidebar.responsive.bottom {
    right: 60px;
}

@media (max-width: 1199.5px) {
    .sidebar.responsive {
        width: 390px;
    }

    .sidebar.responsive.bottom {
        width: unset;
    }

    .sidebar.responsive.left ~ .sidebar.responsive.bottom {
        left: 410px;
    }

    .sidebar.responsive.right ~ .sidebar.responsive.bottom {
        right: 410px;
    }
}

@media (max-width: 767.5px) {
    .sidebar.responsive {
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;

        border-radius: unset;
    }

    .sidebar.responsive.bottom {
        top: unset;
        width: unset;
        /* bottom sidebar */
        left: 0px !important;
        right: 0px !important;
    }
}

/* Sidebar Menu */

.sidebar.collapsed {
    display: none;
}

.sidebar.menu.collapsed {
    display: block;
    width: 40px;
}

.sidebar .sidebar-menu {
    display: none;
}

.sidebar.menu .sidebar-menu {
    display: block;
    position: absolute;
    background-color: var(--light-surface-color);
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
}

.sidebar .sidebar-menu .menu-element {
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    background-color: var(--light-surface-color);
    color: var(--primary-color);
}

.sidebar .sidebar-menu .menu-element.active {
    background-color: var(--primary-color);
    color: var(--light-surface-color);
}

/* Sidebar Content */

.sidebar .sidebar-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.sidebar .sidebar-content h1,
.sidebar .sidebar-content h2,
.sidebar .sidebar-content h3 {
    color: #666;
    margin: 20px 0 5px 0;
    font-size: 16px;
    text-transform: uppercase;
}

.sidebar .sidebar-content h4,
.sidebar .sidebar-content h5,
.sidebar .sidebar-content h6 {
    margin: 2px 0;
    font-weight: normal;
    font-size: 14px;
    color: #888;
    font-style: italic;
    text-decoration: underline;
}

.sidebar.menu .sidebar-content {
    width: calc(100% - 40px);
    left: 40px;
}

.sidebar .sidebar-group {
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 15px 250px 15px;
    width: 100%;
    height: calc(100% - 45px);
}

.sidebar .sidebar-group.show {
    display: block;
}

/* sidebar header */

.sidebar .sidebar-header {
    width: calc(100% - 30px);
    margin: 10px 15px;
    padding-bottom: 5px;
    user-select: none;
    display: flex;
    color: var(--headline-color);
    font-size: 16px;
    line-height: 22px;
}

.sidebar.underline-header .sidebar-header {
    border-bottom: 1px solid var(--text-color);
}

.sidebar .sidebar-header .sidebar-title {
    font-weight: bold;
    float: left;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    font-size: 16px;
    width: calc(100% - 20px);
}

.sidebar .sidebar-header .fas.fa-times {
    display: none;
}

.sidebar.closeable .sidebar-header .fas.fa-times {
    display: block;
    float: left;
    width: 20px;
    line-height: 22px;
    font-size: 18px;
    text-align: right;
}

.sidebar.closeable .sidebar-header .fas.fa-times:hover {
    color: var(--text-color);
    cursor: pointer;
}

.sidebar-element {
    margin-bottom: 24px;
}

.sidebar-element .sidebar-element-header {
    width: 100%;
    padding: 5px 0 12px 0;
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--background-color);
    background: linear-gradient(to top, rgba(242, 242, 242, 0) 0px, rgba(242, 242, 242, 1) 16px);
}

.sidebar-element .sidebar-element-header-inner {
    width: 100%;
    padding-bottom: 5px;
    font-size: 16px;
    border-bottom: 1px solid var(--text-color);
    display: flex;
    justify-content: space-between;
    color: var(--headline-color);
    user-select: none;
}

.sidebar-element .sidebar-element-title-span {
    width: max-content;
    max-width: calc(100% - 25px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidebar-element .sidebar-element-header .sidebar-element-collapse {
    width: 20px;
    text-align: center;
}

.sidebar-element .sidebar-element-title {
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 5px;
}

.sidebar-element .sidebar-element-header .notification-counter {
    margin-right: auto;
    margin-left: 3px;
    width: 22px;
    height: 20px;
    line-height: 20px;
    background-color: var(--primary-color);
    border-radius: 10px;
    text-align: center;
    position: relative;
    font-size: 13px;
    vertical-align: bottom;
    color: var(--light-surface-color);
}

.sidebar-element .sidebar-element-header .notification-counter:before {
    content:"";
    position: absolute; 
    bottom: 4px; 
    left: -10px; 
    height: 0px;
    width: 0px; 
    border: 6px solid transparent;
    border-right-color: var(--primary-color);
    background-color: transparent;
}

.sidebar-element .sidebar-element-header .notification-counter:empty {
    visibility: hidden;
}

.sidebar-element .sidebar-element-tools {
    width: max-content;
    white-space: nowrap;
}

.sidebar-element .sidebar-element-tools .sidebar-element-tool {
    display: inline-block;
    text-align: center;
    color: var(--primary-color);
    width: 20px;
    margin-left: 4px;
    vertical-align: middle;
}

.sidebar-element .sidebar-element-tools .sidebar-element-tool:hover,
.sidebar-element .sidebar-element-tools .sidebar-element-tool:focus,
.sidebar-element .sidebar-element-tools .sidebar-element-tool.enabled {
    color: var(--secondary-color);
    cursor: pointer;
}

.sidebar-element .sidebar-element-tools .sidebar-element-tool.enabled {
    color: var(--error-color);
}

.sidebar-element .sidebar-element-content {
    transition: max-height 0.33s ease-in-out;
    color: var(--text-color);
}

.sidebar-element .sidebar-element-content.collapsed {
    display: none;
}

.sidebar-element.disabled .sidebar-element-content {
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
    filter: grayscale(1);
}

.sidebar-element.disabled .sidebar-element-header .notification-counter {
    background-color: var(--disabled-color);
}

.sidebar-element.disabled .sidebar-element-header .notification-counter:before {
    border-right-color: var(--disabled-color);
}

.slider {
    background-color: var(--light-surface-color);
}

.slider .slider-inner {
    position: relative;
}

.slider .slider-inner .handle {
    position: absolute;
    background-color: var(--primary-color);
}

.slider .slider-inner .handle:focus {
    outline: unset;
}

.slider .slider-inner .handle:hover,
.slider .slider-inner .handle:focus {
    background-color: var(--secondary-color);
}

.slider .slider-inner .bar {
    background-color: var(--dark-surface-color);
    position: absolute;
    cursor: move;
}

/* horizontal slider */

.slider.horizontal {
    height: 16px;
    width: 100%;
}

.slider.horizontal .slider-inner {
    width: 100%;
    height: 100%;
}

.slider.horizontal .slider-inner .handle {
    bottom: 0px;
    width: 8px;
    cursor: e-resize;
    height: 24px;
}

.slider.horizontal .slider-inner .bar {
    height: 16px;
    top: 0;
}

/* vertical slider */

.slider.vertical{
    width: 16px;
    height: 100%;
}

.slider.vertical .slider-inner {
    height: 100%;
    height: 100%;
}

.slider.vertical .slider-inner .handle {
    left: 0px;
    width: 24px;
    height: 8px;
    cursor: n-resize;
}

.slider.vertical .slider-inner .bar {
    width: 16px;
    left: 0;
}

/* header */

.slider-header {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
}

.slider-header .header-title {
    width: calc(34% - 50px);
    line-height: 30px;
    padding-left: 5px;
}

.slider-header .value-left,
.slider-header .value-right {
    background-color: var(--light-surface-color);
    color: var(--headline-color);
    margin: 0;
    line-height: 30px;
    height: 30px;
    width: 33%;
    text-align: center;
    border: 0;
}

.slider-header .value-left.disabled ,
.slider-header .value-right.disabled {
    color: var(--disabled-color);
}

.slider-header input.value-left:not([disabled]):focus,
.slider-header input.value-right:not([disabled]):focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.slider-header input.value-left:not([disabled]):invalid,
.slider-header input.value-right:not([disabled]):invalid {
    outline: 2px solid var(--error-color);
    outline-offset: -2px;
}

.slider-header .operator-dropdown {
    width: 50px;
    height: 30px;
    position: relative;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.slider-header .operator-dropdown .drop-down-title {
    color: var(--light-surface-color);
    background-color: var(--primary-color);
    height: 100%;
}

.slider-header .operator-dropdown .drop-down-list {
    display: none;
    position: absolute;
    top: 30px;
    z-index: 3;
}

.slider-header .operator-dropdown .drop-down-list .list-item {
    background-color: var(--light-surface-color);
    transition: background-color ease-in-out 0.33s;
    color: var(--primary-color);
    width: 50px;
    height: 30px;
}

.slider-header .operator-dropdown .drop-down-list .list-item:hover,
.slider-header .operator-dropdown .drop-down-list .list-item:focus {
    background-color: var(--dark-surface-color);
}

.slider-header .operator-dropdown:hover .drop-down-list,
.slider-header .operator-dropdown:hover .drop-down-list:focus {
    display: block;
}

/* default table with line breaks allowed */

.metadata-table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}

.metadata-table > tbody > tr > td {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 2px;
    position: relative;
}

.metadata-table > tbody > tr > td ul {
    margin: 0;
    padding: 0;
}

.metadata-table > tbody > tr > td ul li::marker {
    display: none;
}

.metadata-table > tbody > tr > td:last-child {
    text-align: left;
    padding-left: 5px;
    white-space: normal;
    word-break: break-all;
}

/* crop long lines by addind an ellipsis in the end */

.metadata-table.ellipsis {
    table-layout: fixed;
    cursor: text;
}

.metadata-table.ellipsis > tbody > tr > td:last-child {
    word-break: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* feature content for layer info preview */

.metadata-table.preview {
    table-layout: fixed;
}

.metadata-table.preview > tbody > tr > td {
    white-space: unset;
    word-break: break-word;
    word-wrap: break-word;
    padding-bottom: 5px;
    max-width: 125px;
    max-height: 70px;
}

.metadata-table.preview > tbody > tr > td:last-child {
    word-break: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* feature content for layer filters info */

.metadata-table.preview.filter > tbody > tr > td:first-child {
    width: 85px;
}

.metadata-table.preview.filter > tbody > tr > td:last-child {
    word-break: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 225px;
}

.metadata-table tr.annotation-row input {
    width: 130px;
}

.metadata-table tr.annotation-row input.error {
    border: 1px solid var(--error-color);
}

/* button to copy text */

.metadata-table > tbody > tr > td:first-child > .tr-buttons {
    display: none;
    position: absolute;
    right: 0px;
}

.metadata-table > tbody > tr > td:first-child > .tr-buttons > a.tr-button {
    font-size: 12px;
    padding: 4px 0 4px 6px;
    color: var(--disabled-color);
    cursor: pointer;
    background-color: var(--background-color);
    text-decoration: none;
}

.metadata-table > tbody > tr:hover > td:first-child > .tr-buttons, 
.metadata-table > tbody > tr:focus > td:first-child > .tr-buttons {
    display: inline-block;
}

.metadata-table > tbody > tr > td:last-child > .tr-message {
    position: absolute;
    right: 0;
    display: inline-block;
    text-decoration: none;
    color: var(--primary-color);
    font-style: italic;
    margin-left: 12px;
    font-size: 12px;
    padding: 4px;
    background-color: var(--background-color);
}

.metadata-table.editing  > tbody > tr.private {
    color: #999;
}

/* load ui base classes first */

.time-filter {
    padding-bottom: 5px;
}

.time-filter .slider-container > div:not(:first-child) {
    margin-top: 14px;
}

.time-filter .advanced {
    display: flex;
    margin: 20px 0 5px 0;
}

.time-filter .btn-close {
    background-color: var(--primary-color);
    color: var(--light-surface-color);
    border: unset;
    height: 22px;
    outline: unset;
    cursor: pointer;
}

.time-filter .btn-close:hover {
    background-color: var(--secondary-color);
}

.time-filter .settings {
    display: flex;
}

.time-filter .settings-item {
    color: var(--light-surface-color);
    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.4);
    width: 70px;
    display: flex;
    height: 22px;
    align-items: center;
    padding-left: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.time-filter .settings-item .fa-stack {
    width: 16px;
    line-height: 20px;
    height: 20px;
    margin-right: 5px;
}

.time-filter .settings-item .fa-check {
    display: none;
}

.time-filter .settings-item.checked .fa-check {
    display: inline;
}

.time-filter .settings-item + .settings-item {
    background-color: var(--dark-surface-color);
}

.time-filter .settings-item:first-of-type,
.time-filter .settings-item.checked,
.time-filter .settings-item.checked + .settings-item {
    background-color: var(--disabled-color);
}

.key-value-filter{
    padding-bottom: 5px;
}

.key-value-filter .key-input-wrapper,
.key-value-filter .value-input-wrapper {
    height: 30px;
    display: inline-block;
    position: relative;
}

.key-value-filter input,
.key-value-filter .key-overview,
.key-value-filter .value-overview {
    background-color: var(--light-surface-color);
    color: var(--headline-color);
    margin: 0;
    padding: 0 8px;
    line-height: 30px;
    height: 30px;
    text-align: left;
    border: 0;
    display: inline-block;
    outline-offset: -2px;
}

.key-value-filter input {
    width: 100%;
}

.key-value-filter input:focus {
    outline: 2px solid var(--primary-color);
}

.key-value-filter input::placeholder {
    font-style: italic;
}

.key-value-filter .main-input,
.key-value-filter .input-item {
    display: flex;
}

.key-value-filter .input-item button {
    width: 30px;
    height: 30px;
    background-color: var(--light-surface-color);
    color: var(--primary-color);
    cursor: pointer;
    border: 0;
    margin: 0;
}

.key-value-filter .input-item button:focus,
.key-value-filter .input-item button:hover {
    color: var(--secondary-color);
}

.key-value-filter .input-item .value-input-wrapper {
    width: calc(100% - 122px - 30px - 30px);
}

.key-value-filter .key-input-wrapper,
.key-value-filter .key-overview {
    width: 120px;
    margin-right: 2px;
}

.key-value-filter .main-input .value-input-wrapper,
.key-value-filter .value-overview {
    width: calc(100% - 122px - 30px);
}

.key-value-filter .value-overview,
.key-value-filter .key-overview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.key-value-filter .main-input .btn-add,
.key-value-filter .key-group .btn-edit {
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    color: var(--light-surface-color);
    cursor: pointer;
    border: 0;
    margin: 0;
}

.key-value-filter .key-group {
    margin-top: 10px;
}

.key-value-filter .key-group .group-overview {
    display: flex;
}

.key-value-filter .key-group .group-overview .key-overview,
.key-value-filter .key-group .group-overview .value-overview {
    opacity: 0.5;
}

.key-value-filter .key-group.closed .group-overview .key-overview,
.key-value-filter .key-group.closed .group-overview .value-overview {
    opacity: 1;
}

.key-value-filter .key-group.closed .group-inputs {
    display: none;
}

.key-value-filter .auto-complete {
    position: absolute;
    top: 30px;
    left: -2px;
    min-width: 160px;
    width: calc(100% + 4px);
    height: auto;
    background-color: var(--light-surface-color);
    z-index: 10;
    border-bottom: 2px solid var(--background-color);
    border-left: 2px solid var(--background-color);
    border-right: 2px solid var(--background-color);
}

.key-value-filter .auto-complete > div {
    height: 30px;
    width: 100%;
    padding: 0 8px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.key-value-filter .auto-complete > div.suggestion:hover,
.key-value-filter .auto-complete > div.suggestion:focus,
.key-value-filter .auto-complete > div.suggestion.selected {
    font-weight: bold;
    cursor: pointer;
}

.text-filter .text-input {
    background-color: var(--light-surface-color);
    color: var(--headline-color);
    margin: 0;
    padding: 0 8px;
    line-height: 30px;
    height: 30px;
    text-align: left;
    border: 0;
    display: inline-block;
    outline-offset: -2px;
    width: 100%;
    display: flex;
}

.text-filter .text-input:focus {
    outline: 2px solid var(--primary-color);
}

.text-filter .text-input::placeholder {
    font-style: italic;
}

.btn-add-filter a {
    float: right;
    margin-top: 16px;
    margin-bottom: 24px;
}

.filter-selection-dropdown-wrapper {
    width: 100%;
    height: 30px;
    display: flex;
    background-color: #fff;
}

.filter-selection-dropdown-wrapper:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.filter-selection-dropdown-wrapper .filter-selection-dropdown {
    width: calc(100% - 44px);
    height: 100%;
    border: 0;
    padding: 0 4px;
    margin-right: 4px;
}

.filter-selection-dropdown-wrapper .filter-selection-dropdown {
    outline: none
}

.filter-selection-dropdown-wrapper .btn-add {
    width: 40px;
    margin: 0;
    height: 100%;
}

/* re-usable base css for filter-settings */

.filter-settings .button-group {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.filter-settings form>div {
    margin-bottom: 3px;
}

.filter-settings form label,
.filter-settings form input {
    line-height: 25px;
}

.filter-settings form .input-label {
    display: inline-block;
}

.filter-settings form input:invalid {
    outline: 2px solid var(--error-color);
    outline-offset: -2px;
}

.filter-settings form input[type="text"],
.filter-settings form input[type="number"],
.filter-settings form input[type="date"] {
    border: 0;
    padding: 0 8px;
    color:var(--text-color);
}

.filter-settings form select {
    height: 25px;
    border: 0;
    padding: 0 4px;
    color:var(--text-color);
}

.filter-settings form input[type="checkbox"] {
    margin-right: 5px;
}

.filter-settings form input[type="text"]:focus,
.filter-settings form input[type="number"]:focus,
.filter-settings form input[type="date"]:focus,
.filter-settings form select:focus  {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.filter-settings .layer-list {
    background-color: var(--light-surface-color);
    border: 1px dashed var(--primary-color);
}

.filter-settings .layer-list .layer-list-info {
    padding: 10px;
}

.filter-settings .layer-list-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-settings .layer-list-inner .layer .btn-remove {
    cursor: pointer;
    margin-right: 3px;
}

.filter-settings .layer-list-inner .layer .btn-remove:hover,
.filter-settings .layer-list-inner .layer .btn-remove:focus {
    color: red;
}

.filter-settings .layer-list-inner .layer {
    padding: 5px 10px;
    border-bottom: 1px solid lightgray;
}

.filter-settings .layer-list-inner .layer:last-child {
    margin-bottom: 5;
}

.dws-input {
    position: relative;
    width: 100%;
    height: 25px;
    font-size: 1em;
    align-items: center;
}

.dws-input .fa-times {
    width: 20px;
    margin-left: 4px;
    color: var(--text-color);
    display: flex;
}

.dws-input .fa-times:hover {
    cursor: pointer;
    color: var(--error-color);
}

.dws-input.not-closeable .fa-times {
    display: none;
}

.dws-input input {
    margin: 0;
    outline: 0;
    color: var(--primary-color);
    width: calc(100% - 24px);
    height: 25px;

    padding: 0 7px;
    border: 2px solid var(--primary-color);
    background-color: var(--light-surface-color);
}

.dws-input.not-closeable input {
    width: 100%;
}

.dws-input input::placeholder {
    font-style: italic;
    color: var(--primary-color);
}

.dws-input.active .search-results {
    display: block;
}

.dws-input .search-results {
    position: absolute;
    width: calc(100% - 24px);
    max-height: 200px;
    overflow-y: scroll;
    top: 25px;
    right: 0;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
    display: none;
    background-color: var(--background-color);
    z-index: 5;
}

.dws-input.not-closeable .search-results {
    width: 100%;
}

.dws-input .search-results .search-result {
    width: calc(100% - 16px);
    height: calc(1em + 12px);
    padding: 0px 4px;
    margin: 4px;
    cursor: pointer;
}

.dws-input .search-results .search-result:hover {
    background-color: var(--dark-surface-color);
}

.dws-input .search-results .search-result .layer-title {
    float: left;
    margin-left: 8px;
    width: calc(100% - 52px);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: calc(1em + 12px);
}

.dws-input .search-results .search-result .add-layer {
    float: right;
    line-height: calc(1em + 12px);
    color: var(--primary-color);
}

.dws-input .search-results .search-result .layer-type {
    float: left;
    color: var(--primary-color);
    line-height: calc(1em + 12px);
}

.dws-input .vef-window .fas.fa-times {
    display: none;
}

.dws-ui .dws-form-label {
    width: 85px;
    float: left;
    margin-bottom: 8px;
    line-height: 25px;
}

.dws-ui .device-input-wrapper,
.dws-ui .lat-input-wrapper,
.dws-ui .lon-input-wrapper,
.dws-ui .aggregation-dropdown-wrapper,
.dws-ui .limit-input-wrapper {
    width: calc(100% - 85px);
    float: left;
    margin-bottom: 8px;
}

.dws-ui .error-msg {
    color: var(--error-color);
    font-weight: bold;
    margin-top: 14px;
    width: 100%;
    float: left;
}

.dws-ui .aggregation-dropdown,
.dws-ui .limit-input {
    border: 0;
    height: 25px;
    outline-offset: -2px;
}

.dws-ui .limit-input {
    padding: 0 7px;
}

.dws-ui .aggregation-dropdown {
    padding: 0 5px;
}

.dws-ui .limit-input:focus,
.dws-ui .aggregation-dropdown:focus {
    outline: 2px solid var(--primary-color);
}

/* override dws input */

.dws-ui .dws-input input {
    border: 0;
    height: 25px;
    background-color: var(--light-surface-color);
    color: var(--text-color);
    outline-offset: -2px;
}

.dws-ui .dws-input input:focus {
    outline: 2px solid var(--primary-color);
}

.dws-ui .dws-input input::placeholder {
    color: grey;
}

.file-ui .url-input-form {
    width: 100%;
    height: 30px;
    display: flex;
    margin-bottom: 14px;
}

.file-ui .url-input-form .url-input {
    width: calc(100% - 40px);
    height: 100%;
    outline-offset: -2px;
    border: 0;
    padding: 0 8px;
}

.file-ui .url-input-form .url-input:focus {
    outline: 2px solid var(--primary-color);
}

.file-ui .url-input-form .url-input-button {
    width: 40px;
    margin: 0;
    height: 100%;
}

.file-ui .file-drop-area {
    width: 100%;
    padding: 20px 0;
    border: 2px dashed var(--primary-color);
    background-color: #fff;
    text-align: center;
    margin-bottom: 0;
    vertical-align: middle;
}

.file-ui .fas.fa-upload {
    font-size: 22px;
    margin-bottom: 10px;
}

.file-ui .file-list {
    margin-bottom: 14px;
}

.file-ui .file-list:empty {
    display: none;
}

.file-ui .file-list .file-list-entry {
    display: flex;
    background-color: var(--light-surface-color);
}

.file-ui .file-list .file-list-entry:not(:last-child) {
    margin-bottom: 3px;
}

.file-ui .file-list .file-list-entry .fas.fa-times {
    width: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
}

.file-ui .file-list .file-list-entry .fas.fa-times:hover {
    color: red;
}

.file-ui .file-list .file-list-entry .filename {
    width: calc(100% - 30px - 30px - 90px);
    line-height: 30px;
    padding-right: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-ui .file-list .file-list-entry .status {
    width: 20px;
    line-height: 30px;
    margin-right: 10px;
}

.file-ui .file-list .file-list-entry .type-dropdown {
    width: 90px;
    line-height: 30px;
    height: 30px;
    border: 0;
}

/* re-usable base css for data importers */

.importer-ui .button-group {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.catalog-ui .catalog-input-wrapper {
    display: flex;
}

.catalog-ui .catalog-input-wrapper button,
.catalog-ui .catalog-input-wrapper .btn-filter {
    width: 40px;
    height: 30px;
    margin: 0;
    border-left: 1px solid white;
}

.catalog-ui .catalog-input-wrapper .catalog-input {
    width: calc(100% - 80px);
    margin: 0;
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
    border: 0;
}

.catalog-ui .catalog-input-wrapper .catalog-input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.catalog-ui .catalog-filters {
    display: none;
}

.catalog-ui.filters-active .catalog-input-wrapper .btn-filter {
    background-color: var(--secondary-color);
}

.catalog-ui.filters-active .catalog-filters {
    display: block;
    margin-top: 8px;
}

.catalog-ui.filters-active .catalog-results,
.catalog-ui.filters-active .results-pagination {
    display: none !important;
}

.catalog-ui .results-pagination {
    margin-top: 25px;
    margin-bottom: 10px;
    text-align: left;
}

.catalog-ui .catalog-results .result {
    margin-top: 8px;
    background-color: var(--light-surface-color);
    display: flex;
    align-items: stretch;
}

.catalog-ui .catalog-results .result .result-drag {
    width: 25px;
    margin: 5px 0;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #AAA;
    cursor: move;
}

.catalog-ui .catalog-results .result .result-content {
    padding: 12px;
    flex-wrap: wrap;
    display: flex;
    width: calc(100% - 20px);
}

.catalog-ui .catalog-results .result .result-content .layer-title {
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 75px);
    white-space: nowrap;
    color: var(--primary-color);
    font-weight: bold;
    display: block;
}

.catalog-ui .catalog-results .result .result-content .layer-type {
    width: 75px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    color: var(--primary-color);
}

.catalog-ui .catalog-results .result .result-content .layer-type i {
    margin-left: 5px;
}

.catalog-ui .catalog-results .result .result-content .layer-abstract {
    width: calc(100% - 75px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 8px;
}

.catalog-ui .catalog-results .result .result-content .layer-abstract:empty {
    display: none;
}

.catalog-ui .catalog-results .result .result-content .service-url {
    width: calc(100% - 75px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 8px;
}

.catalog-ui .catalog-results .result .result-content .info-button {
    width: 10px;
    margin-left: 65px;
    margin-top: 8px;
    text-align: right;
}

.catalog-ui .catalog-filters .filter-label {
    display: inline-block;
    width: 120px;
}

.catalog-ui .catalog-filters .date-time-wrapper input {
    margin-left: 5px;
    border: 0;
    padding: 5px;
}

.catalog-ui .catalog-filters .date-time-wrapper input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.catalog-ui .catalog-filters .catalog-filter {
    margin-bottom: 10px;
}

.catalog-ui .catalog-filters .bbox-wrapper input {
    margin-left: 5px;
    padding: 5px;
    border: 0;
}

.catalog-ui .catalog-filters .bbox-wrapper:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.service-ui .url-input-form {
    width: 100%;
    height: 30px;
    display: flex;
}

.service-ui .url-input-form .url-select-type {
    width: 70px;
    height: 100%;
    border: 0;
    padding: 0 4px;
}

.service-ui .url-input-form .url-input {
    width: calc(100% - 110px);
    height: 100%;
    border: 0;
    padding: 0 8px;
}

.service-ui .url-input-form .url-select-type:focus,
.service-ui .url-input-form .url-input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.service-ui .url-input-form .url-input-button {
    width: 40px;
    margin: 0;
    height: 100%;
}

.service-ui .url-input-form .url-input-button .fas.fa-spinner {
    display: none;
}

.service-ui .url-input-form .url-input-button:disabled .fas.fa-sync {
    display: none;
}

.service-ui .url-input-form .url-input-button:disabled .fas.fa-spinner {
    display: inline-block;
}

.service-ui .layer-list {
    width: 100%;
    margin-top: 10px;
}

.service-ui .layer-list .error-msg {
    display: none;
    color: var(--error-color);
}

.service-ui .layer-list .vef-tree {
    max-height: 250px;
    overflow-x: hidden;
    background-color: #FFF;
    border: 1px solid #000;
    overflow-y: scroll;
    padding: 5px;
}

.service-ui .layer-list .vef-tree:empty {
    display: none;
}

.importer-window.vef-window .vef-window-header {
    border-bottom: unset;
    margin-bottom: 5px;
}

.active-filters {
    max-height: 350px;
    overflow: hidden;
    overflow-y: scroll;
}

.active-filters .dimension {
    padding: 5px 0;
    vertical-align: text-top;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.active-filters .dimension .fa-stack {
    margin-right: 5px;
    width: 35px;
    display: flex;
}

.active-filters .dimension .fa-check {
    color: var(--success-color);
}

.active-filters .dimension.disabled {
    color: var(--disabled-color)
}

.active-filters .dimension.disabled .fa-check {
    display: none;
}

.active-filters .dimension .name {
    margin-right: 10px;
    width: 100px;
    display: flex;
    padding: 4px 0px;
    overflow: hidden;
}

.active-filters .dimension .values {
    display: flex;
    flex-direction: column;
    width: 325px;
    padding: 4px 0px;
    overflow: hidden;
}

.layer-info td {
    vertical-align: top;
    overflow: hidden;
    word-break: break-all;
    padding-bottom: 2px;
}

.layer-info .layer-abstract {
    margin: 2px 0 25px 0;
}

/* geojson color picker window */

.geojson-color-picker .iro-color-picker {
    margin-left: 5px;
    float: left;
}

.geojson-color-picker .color-picker-form {
    float: left;
    padding: 0px 0px 0px 30px;
}

.geojson-color-picker .color-picker-form span {
    width: 50px;
    display: inline-blocK;
}

.geojson-color-picker .color-picker-form input {
    width: 70px;
    padding: 2px;
    margin: 0 0 5px 0;
}

.geojson-color-picker .color-picker-form .color-submit {
    float: right
}

.opus-tooltip-label {
	color: #fff;
	background-color: unset;
	border: unset;
	box-shadow: unset;
	font-size: 12px;
}

.opus-tooltip-label:before {
	display: none;
}

.opus-cluster {
	width: 26px;
	height: 26px;
	margin-left: -13px;
	margin-top: -13px;
	background-color: #237cc9;
}

.opus-cluster span {
	color: #fff;
	line-height: 26px;
}

.vef-map-popup-placeholder {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.vef-map-popup-placeholder p {
    margin: 0;
}

.vef-map-popup-content {
    line-height: 1.4;
    font-size: 14px;
    text-align: left;
    color: var(--text-color);
    width: 100%;
}

.vef-map-popup-content-inner {
    margin: 10px 15px 0 15px;
    width: calc(100% - 30px);
}

.vef-map-popup-content a:hover,
.vef-map-popup-content a:focus {
    text-decoration: underline;
}

.vef-map-popup-content a.popup-link {
    margin-top: 5px;
    margin-right: 16px;
    display: inline-block;
}

.vef-map-popup-content a.popup-link * {
    vertical-align: middle;
}

.vef-map-popup-content a.popup-link i {
    margin-right: 2px;
}

.vef-map-popup-content a.popup-link.disabled{
    color: var(--disabled-color);
    pointer-events: none;
}

.vef-map-popup-button-group {
    margin-top: 12px;
    display: flex;
    width: 100%;
}

.vef-map-popup-button-group .popup-button {
    text-align: center;
    background-color: #f8faf9;
    padding: 6px 0;
}

.vef-map-popup-button-group .popup-button:hover,
.vef-map-popup-button-group .popup-button:focus,
.vef-map-popup-button-group .popup-button.active {
    background-color: #e6e6e6;
    text-decoration: none;
}

.vef-map-popup-button-group .popup-button.active {
    color: red;
}

.vef-map-popup-content .editing .edit-button {
    color: var(--error-color);
}

.vef-map-popup-content .editing tr {
    cursor: text;
}

.popup-content-height-test {
    display: block;
    z-index: -1000;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    width: 390px;
}

/* Override Leaflet Defaults */

.vef-map .leaflet-popup-content-wrapper {
    background-color: var(--light-surface-color);
    box-shadow: var(--window-shadow);
    border-radius: var(--border-radius);
    /* 
       cannot use a transparent background color,
       because buttons with included background colors
       are not rendered properly when doing so 
    */
    width: 390px;
    padding: 0;
}

.vef-map.map-2d .leaflet-popup-content {
    margin: unset;
    display: flex;
    justify-content: center;
}

.vef-map.map-2d a.leaflet-popup-close-button {
    font-size: 22px;
    top: 7px;
    right: 13px;
    color: var(--headline-color);
}

.vef-map.map-2d a.leaflet-popup-close-button:hover {
    text-decoration: none;
}

.vef-map.map-2d .leaflet-popup-tip {
    background-color: var(--light-surface-color);
    pointer-events: none;
}

/* Globe Popup */

.vef-map.map-3d .globe-popup {
	position: absolute;
	width: 300px;
	height: 0px;
    opacity: 0.9;
}

.vef-map.map-3d .globe-popup .popup-content {
	position: absolute;
	bottom: 11px;
	width: 100%;
	background-color: var(--background-color);
	pointer-events: all;
}

.vef-map.map-3d .globe-popup .popup-content .btn-close {
    position: absolute;
    cursor: pointer;
    right: 15px;
    top: 11px;
    font-size: 18px;
}

.vef-map.map-3d .globe-popup:before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: calc(50% - 8px);
    height: 16px;
    width: 16px;
    background-color: var(--background-color);
    transform: rotate(45deg);
}

.vef-map-popup-content .metadata-table > tbody > tr > td:first-child > .tr-buttons > a.tr-button,
.vef-map-popup-content .metadata-table > tbody > tr > td:last-child > .tr-message {
    background-color: var(--light-surface-color);
}

.vef-ui.popup-header {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--headline-color);
    border-bottom: 1px solid var(--text-color);
    height: 30px;
    padding-bottom: 3px;
    line-height: 1.7;
    margin: 6px 15px 0 15px;
    padding-right: 25px;
    position: relative;
}

.vef-ui.popup-header .popup-header-inner {
    max-width: calc(100% - 25px);
    width: max-content;
    position: absolute;
    z-index: 1;
}

.vef-ui.popup-header .popup-header-item,
.vef-ui.popup-header .popup-item {
    display: flex;
    position: relative;
    align-items: center;
    background-color: var(--light-surface-color);
}

.vef-ui.popup-header .popup-header-item.popup-header-title {
    display: none;
}

.vef-ui.popup-header .popup-item-chevron {
    display: none;
    margin-right: 8px;
    width: 15px;
    text-align: center;
    font-size: 14px;
    color: darkgray;
    position: absolute;
    right: 0;
}

.vef-ui.popup-header .popup-item-title {
    max-width: calc(100% - 35px);
    width: max-content;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vef-ui.popup-header .popup-item-counter {
    width: 25px;
    margin-right: 10px;
    text-align: center;
    font-size: 10px;
    height: max-content;
    border-radius: 7px;
    background-color: lightgray;
}

.vef-ui.popup-header .popup-header-dropdown {
    display: none;
    width: 100%;
    margin-top: 3px;
    border-top: 1px solid lightgray;
    animation: 0.33s ease-in-out open-pop-up-header; 
}

.vef-ui.popup-header .popup-header-dropdown .popup-item {
    padding: 5px 0;
    cursor: pointer;
}

.vef-ui.popup-header .popup-header-dropdown .popup-item:hover,
.vef-ui.popup-header .popup-header-dropdown .popup-item:focus {
    background-color: #e6e6e6;
}

.vef-ui.popup-header.dropdown-enabled .popup-header-item .popup-item-chevron {
    display: block;
}

.vef-ui.popup-header.dropdown-enabled .popup-header-item .popup-item-title {
    max-width: calc(100% - 58px);
}

.vef-ui.popup-header.dropdown-enabled .popup-header-item .popup-item-counter {
    margin-right: 33px;
}

.vef-ui.popup-header.dropdown-enabled:hover,
.vef-ui.popup-header.dropdown-enabled:focus {
    margin: 6px 15px 0 10px;

}

.vef-ui.popup-header.dropdown-enabled:hover .popup-header-inner,
.vef-ui.popup-header.dropdown-enabled:focus .popup-header-inner {
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
}

.vef-ui.popup-header.dropdown-enabled:hover .popup-item-title,
.vef-ui.popup-header.dropdown-enabled:focus .popup-item-title {
    padding-left: 5px;

}

.vef-ui.popup-header.dropdown-enabled:hover .popup-header-dropdown,
.vef-ui.popup-header.dropdown-enabled:focus .popup-header-dropdown {
    display: block;

}

.vef-ui.popup-header.dropdown-enabled:hover .popup-header-title,
.vef-ui.popup-header.dropdown-enabled:focus .popup-header-title {
    display: flex;

}

.vef-ui.popup-header.dropdown-enabled:hover .popup-header-label,
.vef-ui.popup-header.dropdown-enabled:focus .popup-header-label {
    display: none;

}

@keyframes open-pop-up-header {
	0% { 
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}

.vef-ui.popup-pagination {
    width: 100%;
    display: flex;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.vef-ui.popup-pagination .btn-previous, 
.vef-ui.popup-pagination .btn-next {
    display: block;
    width: 50%;
    padding: 12px 15px;
    cursor: pointer;
    background-color: #f8faf9;
    color: var(--primary-color);
}

.vef-ui.popup-pagination .btn-previous:hover,
.vef-ui.popup-pagination .btn-next:hover {
    background-color: #e6e6e6;
    text-decoration: none;
}

.vef-ui.popup-pagination .btn-previous {
    text-align: left;
}

.vef-ui.popup-pagination .btn-previous i.fa-backward {
    margin-right: 5px;
}

.vef-ui.popup-pagination .btn-next i.fa-forward {
    margin-left: 5px;
}

.vef-ui.popup-pagination .btn-next {
    text-align: right;
}

.vef-ui.popup-pagination .page-count-overlay {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}

.vef-ui.popup-pagination .page-count-overlay .page-count {
    background-color: #fff;
    padding: 4px 11px;
    border-radius: 12px;
}

.vef-map-attribution {
    background-color: var(--background-color);
    color: var(--primary-color);
    margin: 10px;
    padding: 3px 5px;
    font-size: 13px;
    pointer-events: all;
}

.vef-map-attribution:not(:last-child) {
    margin-right: 0;
}

.vef-map-attribution:not(:first-child) {
    margin-left: 0;
}

.vef-map-attribution:empty {
    display: none;
}

.baselayer-switcher {
    display: flex;
    flex-direction: row;
    background-color: var(--background-color);
    margin: 0 0 10px 10px;
    cursor: pointer;
    pointer-events: all;
    width: fit-content;
    font-size: 12px;
}

.baselayer-switcher .current-map {
    position: relative;
    height: 100px;
    width: 100px;
}

.baselayer-switcher .current-map .current-map-thumbnail {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: 5px 5px;
    background-color: black;
    background-size: cover;
    background-position: center;
}

.baselayer-switcher .current-map .current-map-title {
    position: absolute;
    text-align: center;
    color: #FFF;
    bottom: 10px;
    left: 0;
    right: 0;
    text-shadow: 1px 1px 3px #000;
}

.baselayer-switcher .map-list {
    height: 80px;
    display: flex;
    flex-direction: row;
}

.baselayer-switcher .map-list .list-entry {
    position: relative;
    height: 85px;
    width: 70px;
}

.baselayer-switcher .map-list .list-entry .list-entry-thumbnail {
    width: calc(100% - 5px);
    height: calc(100% - 25px);
    margin: 5px 5px 3px 0px;
    background-size: cover;
    background-position: center;
    background-color: black;
}

.baselayer-switcher .map-list .list-entry .list-entry-id {
    width: calc(100% - 4px);
    margin: 0 2px;
    text-transform: uppercase;
}

.baselayer-switcher .map-list .list-entry.disabled {
    opacity: 0.5;
}

.baselayer-switcher .map-list .list-entry .info-button {
    display: none;
}

.baselayer-switcher.info-enabled .map-list .list-entry .info-button {
    display: block;
    position: absolute;
    color: var(--light-surface-color);
    right: 5px;
    top: 5px;
    padding: 5px 7px 5px 5px;
    text-shadow: 1px 1px var(--text-color);
}

.baselayer-switcher.info-enabled .map-list .list-entry .info-button:hover {
    color: var(--primary-color);
}

.coordinate-control {
    background-color: var(--background-color);
    color: var(--primary-color);
    margin: 10px;
    padding: 3px 5px;
    font-size: 13px;
    cursor: pointer;
    pointer-events: all;
}

.coordinate-control:empty {
    display: none;
}

.coordinate-control span {
    display: inline-block;
}

.coordinate-control span:first-child {
    padding-right: 5px;
}

.vef-tool,
.vef-tool button {
    pointer-events: all;
    height: 30px;
    line-height: 30px;
    background-color: var(--background-color);
    color: var(--primary-color);
    font-size: 14px;
    border: 0px;
    display: block;
    text-align: center;
    transition: all 0.33s;
    position: relative;
    border-radius: var(--border-radius);
    padding: 0;
}

.vef-tool {
    margin: 10px 10px 0 10px;
}

.vef-tool:last-child {
    margin-bottom: 10px;
}

.vef-tool:hover,
.vef-tool:focus,
.vef-tool button:hover,
.vef-tool button:focus {
    background-color: var(--dark-surface-color);
    outline: unset;
    cursor: pointer;
}

.vef-tool > i {
    line-height: inherit;
}

.vef-tool:disabled,
.vef-tool button:disabled {
    color: var(--disabled-color);
    cursor: default;
}

.vef-tool:disabled:hover,
.vef-tool:disabled:focus,
.vef-tool button:disabled:hover,
.vef-tool button:disabled:focus {
    transform: unset;
    background-color: var(--background-color);
}

/* styling for tool buttons */

.vef-tool {
    width: 30px;
}

.vef-tool:hover,
.vef-tool:focus {
    transform: scale(1.05);
}

.vef-tool.tool-dropdown:hover,
.vef-tool.tool-dropdown:focus {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* tool-groups */

.vef-tool.tool-group {
    transition: all 0.33s;
    height: unset;
}

.vef-tool.tool-group > button {
    width: 30px;
}

.vef-tool.tool-group > button:not(:last-child) {
    border-bottom: 1px solid var(--disabled-color);
}

/* styling for dropdown content */

.vef-tool.tool-dropdown > .tool-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--background-color);
    left: 30px;
    top: 0px;
    border-radius: var(--border-radius);
    border-top-left-radius: 0px;
}

.vef-tool.tool-dropdown > .tool-dropdown-content > button {
    white-space: nowrap;
    width: 100%;
    text-align: left;
    padding: 0px 8px;
}

.vef-tool.tool-dropdown > .tool-dropdown-content > button > i {
    width: 25px;
    text-align: center;
    margin-right: 8px;
}

.vef-tool.tool-dropdown:hover > .tool-dropdown-content ,
.vef-tool.tool-dropdown:focus > .tool-dropdown-content {
    display: block;
}

.layer-tree {
    color: var(--text-color);
    background-color: var(--background-color); 
}

.layer-tree table.layertree-content-table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 1px;
}

.layer-tree .tree-checkbox,
.layer-tree .prevent-select-icon {
    display: none;
}

.layer-tree .tree-checkbox-full-selected {
    color: var(--success-color);
}

.layer-tree .tree-checkbox-part-selected {
    color: var(--disabled-color);
}

.layer-tree td.td-item-select,
.layer-tree td.td-item-icon,
.layer-tree td.td-item-chevron {
    padding: unset;
    text-align: center;
}

.layer-tree td.td-item-chevron {
    color: var(--primary-color);
    width: 16px;
    visibility: hidden;
}

.layer-tree .list-item[data-has-children=true] > .layertree-content-table td.td-item-chevron {
    visibility:visible;
}

.layer-tree:not(.delete-mode) .list-item[selected=false][data-prevent-selection=true] > .layertree-content-table > tbody > tr > .td-item-select {
    cursor: not-allowed;
    color: gray;
}

.layer-tree:not(.delete-mode) .list-item[selected=false][data-prevent-selection=true] > .layertree-content-table > tbody > tr > .td-item-select .prevent-select-icon {
    display: inline-block;
    color: darkgray;
}

.layer-tree:not(.delete-mode) .list-item[selected=false][data-prevent-selection=true] > .layertree-content-table > tbody > tr > .td-item-select .far.fa-square {
    display: none;
}

.layer-tree td.td-item-select {
    color: var(--text-color);
    width: 25px;
}

.layer-tree td.td-item-select .fa-stack {
    width: 100%;
}

.layer-tree td.td-item-icon {
    color: var(--primary-color);
    width: 30px;
}

.layer-tree td.td-item-icon i {
    vertical-align: middle;
    line-height: 2em;
}

.layer-tree .td-item-svg,
.layer-tree .td-item-message {
    width: 20px;
}

.layer-tree .td-item-message:empty {
    display: none;
}

.layer-tree .td-item-svg .item-svg,
.layer-tree .td-item-message i {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.layer-tree td.td-item-menu {
    width: 16px;
}

.layer-tree ul,
.layer-tree .list-item {
    width: 100%;
    margin: unset;
    padding: unset;
    list-style-type: none;
}

.layer-tree .list-item > .list-item {
    padding-left: 22px;
    box-sizing: border-box;
}

.layer-tree ul.list-item[expanded='false']>li, 
.layer-tree ul.list-item[expanded='false']>ul {
    display: none;
}

.layer-tree .item-menu {
    display: inline-block;
    color: var(--primary-color);
    text-align: center;
    width: 16px;
}

.layer-tree .item-menu:hover {
    color: var(--secondary-color);
    cursor: pointer;
}

.layer-tree .list-item[disabled="true"] {
    opacity: 0.5;
}

.layer-tree .list-item[disabled="true"] .item-menu {
    cursor: unset;
    color: var(--disabled-color);
}

.layer-tree .list-item[disabled="true"] .item-menu:hover {
    cursor: unset;
    color: var(--disabled-color);
}

.layer-tree .list-item .item-menu.disabled {
    cursor: unset;
    color: var(--disabled-color);
}

.layer-tree .list-item .item-menu.disabled:hover {
    cursor: unset;
    color: var(--disabled-color);
}

.layer-tree .layertree-content-table {
    border-collapse: separate;
}

.layer-tree .layertree-content-table .td-item-title,
.layer-tree .layertree-content-table .td-item-icon {
    cursor: grab;
}

.layer-tree .layertree-content-table .td-item-title .table-title {
    max-height: 36px;
    line-height: 18px;
    padding-left: 5px;
    display: block;
    overflow: hidden;
    position: relative;
}

/* workaround for multiline ellipsis */

.layer-tree .layertree-content-table .td-item-title .table-title::before {
    content: "...";
    position: absolute;
    background-color: var(--background-color);
    width: 11px;
    overflow: hidden;
    bottom: 0;
    right: 0;
}

.layer-tree .layertree-content-table .td-item-title .table-title::after {
    content: "";
    position: absolute;
    right: 0; /* note: not using bottom */
    width: 11px;
    height: 18px;
    background-color: var(--background-color);
  }

/* delete mode */

.layer-tree .layertree-content-table .td-item-select > .fa-stack > .delete-button,
.layer-tree.delete-mode .layertree-content-table .td-item-select > .fa-stack > i {
    display: none;
}

.layer-tree.delete-mode .layertree-content-table .td-item-select > .fa-stack > .delete-button {
    display: inline;
}

.layer-tree.delete-mode .layertree-content-table .td-item-select:hover,
.layer-tree.delete-mode .layertree-content-table .td-item-select:hover ~ .td-item-title,
.layer-tree.delete-mode .layertree-content-table .td-item-select:hover ~ .td-item-icon {
    color: var(--error-color);
    cursor: pointer;
    text-decoration: line-through;
}

/* edit mode */

.layer-tree.edit-mode .layertree-content-table .td-item-title:hover {
    cursor: text;
    color: var(--error-color);
}

/* hover effect */

.layer-tree table.layertree-content-table,
.layer-tree table.layertree-content-table .td-item-title .table-title::after,
.layer-tree table.layertree-content-table .td-item-title .table-title::before {
    transition: background-color 0.33s ease-in-out;
}

.layer-tree table.layertree-content-table:hover,
.layer-tree table.layertree-content-table:hover .td-item-title .table-title::after,
.layer-tree table.layertree-content-table:hover .td-item-title .table-title::before {
    background-color: var(--dark-surface-color); 
}

/* drag-drop effect */

.layer-tree .list-item {
    transition: opacity 0.2s ease-in-out;
}

.layer-tree .list-item.drag {
    opacity: 0.5;
}

.layer-tree .list-item > .layertree-content-table {
    border-top: 1px solid var(--background-color);
    border-bottom: 1px solid var(--background-color);
}

.layer-tree .list-item.drop-insert-before > .layertree-content-table {
    border-top: 1px solid var(--disabled-color);
}

.layer-tree .list-item.drop-insert-after > .layertree-content-table {
    border-bottom: 1px solid var(--disabled-color);
}

.layer-tree .list-item.drop-insert-inside > table.layertree-content-table,
.layer-tree .list-item.drop-insert-inside > table.layertree-content-table .td-item-title .table-title::after,
.layer-tree .list-item.drop-insert-inside > table.layertree-content-table .td-item-title .table-title::before {
    background-color: var(--dark-surface-color);
}

.layer-tree .list-item.drop-insert-inside > table.layertree-content-table .td-item-icon .fas.fa-folder::before {
    content: "\f07c";
}

.layer-tree-message-window .message-wrapper {
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid darkgray;
}

.layer-tree-message-window .message-wrapper:first-child {
    border-top: unset;
    padding-top: unset;
}

.layer-tree-message-window .message-wrapper:last-child {
    padding-bottom: unset;
}

.layer-tree-message-window .message-wrapper {
    display: flex;
}

.layer-tree-message-window .message-wrapper .color-bar {
    width: 20px;
}

.layer-tree-message-window .message-wrapper .message-content {
    width: calc(100% - 12px);
    padding-left: 5px;
}

.vef-map {
    width: 100%;
    height: 100%;
}

.vef-map.ctrl-To-zoom:before {
	content: 'Use ctrl + scroll to zoom the map';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	font-size: 26px;
	opacity: 0.4;
	color: #FFF;
	background-color: #000;
}

.vef-map .map-container {
    cursor: default;
}

.vef-map .tool-container {
    pointer-events: none;
    transition: inset ease 0.5s;
    overflow: hidden;
}

.vef-map .tool-container > div {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.vef-map .tool-container > div.tools-top-left {
    left: 0;
    top: 0;
}

.vef-map .tool-container > div.tools-top-right {
    right: 0;
    top: 0;
}

.vef-map .tool-container > div.tools-bottom-left {
    flex-direction: row;
    align-items: flex-end;
    left: 0;
    bottom: 0;
}

.vef-map .tool-container > div.tools-bottom-right {
    flex-direction: row;
    align-items: flex-end;
    right: 0;
    bottom: 0;
}

/* active area */

.default-active-area {
    position: absolute;
    inset: 0 0 0 0;
}

.sidebar-active-area {
    position: absolute;
	inset: 0 0 0 470px;
}

.sidebar-active-area-alt {
	position: absolute;
	inset: 0 0 0 50px;
}

@media (max-width: 1199.5px) {
    .sidebar-active-area {
        inset: 0 0 0 400px;
    }
}

@media (max-width: 767.5px) {
    .sidebar-active-area,
    .sidebar-active-area-alt {
        inset: 0 0 0 40px;
    }
}

.vef-map.map-2d .map-container {
	width: 100%;
	height: 100%;
}

.vef-map.map-2d .leaflet-control-container {
	display: none;
}

/* labelled geometries */

.vef-map.map-2d .leaflet-tooltip.leaflet-tooltip-label {
	background-color: unset;
	border: unset;
	box-shadow: unset;
	font-size: 20px;
	font-weight: bold;
	text-shadow: -2px 0 rgba(255, 255, 255, 0.75), 0 2px rgba(255, 255, 255, 0.75), 2px 0 rgba(255, 255, 255, 0.75), 0 -2px rgba(255, 255, 255, 0.75);
}

.vef-map.map-2d .leaflet-tooltip.leaflet-tooltip-label:before {
	display: none;
}

/*
.vef-map.ctrl-To-zoom:before {
	content: 'Use ctrl + scroll to zoom the map';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	font-size: 26px;
	opacity: 0.4;
	color: #FFF;
	background-color: #000;
}

.vef-map .leaflet-control-container > .leaflet-bottom.leaflet-right .coord  {
	position: absolute;
	right: -10px;
    bottom: 8.5px;
	white-space:nowrap;
	background-color:rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding-right: 5px;
	padding-left: 5px;
	color: var(--primary-color);
}

.vef-map .coord-long,
.vef-map .coord-lat {
	display: inline-block;
	text-align: right;
}

.vef-map .coord-value-long,
.vef-map .coord-value-lat {
	margin-left: 3px;
	width: 35px;
	display: inline-block;
	text-align: right;
}

.vef-map .coord-value-dms {
	width: 80px;
	display: inline-block;
	text-align: center;
}

.vef-map .coord-space {
	padding-left: 5px;
	padding-right: 5px;
}

.vef-map.leaflet-container .leaflet-control-attribution.leaflet-control a{
	font-size: 12px;
	color: var(--primary-color);
}

.vef-map .leaflet-control-scale {
	margin-bottom: 9px;
}

*/

.vef-map.map-3d {
	background-color: #000000;
}

.vef-map.map-3d .map-container {
	overflow: hidden;
}

.vef-map.map-3d .map-container>canvas {
	width: 100%;
	height: 100%;
}

/* OVERRIDE PLOTLY TOOLBAR CSS */

.vef-plot .modebar-container {
    background-color: var(--light-surface-color);
}

.vef-plot .modebar-container .modebar {
    position: relative;
    top: unset;
    right: unset;
}

.vef-plot .modebar-container .modebar .modebar-group {
    padding-left: unset;
}

.vef-plot .modebar-container .modebar .modebar-group .modebar-btn {
    margin: 5px;
    padding: 5px 10px;
    border: 1px solid var(--background-color);
    display: block;
    float: left;
    height: unset;
}

.vef-plot .modebar-container .modebar .modebar-group .modebar-btn.active .icon path,
.vef-plot .modebar-container .modebar .modebar-group .modebar-btn:hover .icon path {
    fill: var(--primary-color) !important;
}

.vef-plot .modebar-container .modebar .modebar-group .modebar-btn::after {
    right: unset;
    left: 35%;
}

.vef-plot .modebar-container .modebar .modebar-group .modebar-btn i {
    color: rgba(68, 68, 68, 0.3);
}

.vef-plot .modebar-container .modebar .modebar-group .modebar-btn.active i,
.vef-plot .modebar-container .modebar .modebar-group .modebar-btn:hover i {
    color: var(--primary-color);
}

/* AXIS SELECTION */

.plot-sidebar .axis-select-container {
    margin-bottom: 10px;
}

.plot-sidebar .axis-select-container .axis-select-label {
    width: 75px;
    display: inline-block;
}

.plot-sidebar .axis-select-container .axis-select {
    width: calc(100% - 75px);
    display: inline-block;
    padding: 5px;
}

.plot-sidebar .invert-y-axis {
    margin-right: 10px;
}

.facets-ui.facets-selected li {
    display: inline-block;
    list-style: none;
    border: 1px solid #c3c3c3;
    border-radius: 3px;
    padding: 5px;
    margin-right: 5px;
    line-height: 1rem;
    cursor: pointer;
}

.facets-ui.facets-available ul {
    padding: 0;
    margin: 0;
}

.facets-ui.facets-available li {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.vef-pagination {
    display: flex;
    flex-wrap: wrap;
}

.vef-pagination a {
    background-color: #FFF;
    border: 1px solid #dee2e6;
    color: var(--primary-color);
    display: block;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}

.vef-pagination a.active {
    cursor: default;
}

.vef-pagination a.active,
.vef-pagination a:hover,
.vef-pagination a:focus {
    background-color: #EEE;
    text-decoration: none;
}

.vef-pagination a:first-child {
    border-radius : 4px 0 0 4px;
}

.vef-pagination a:last-child {
    border-radius : 0 4px 4px 0;
}

.viewer {
    width: 100%;
    height: 100%;
}

.template-ui .grouped-content {
    padding: 0 0 0 14px;
}

.template-ui .grouped-content > .grouped-content {
    padding: 0 14px;
}

/* message banner */

.vef-message-banner {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 5000;
    pointer-events: none;
}

.vef-message-banner .message-banner-inner {
    width: max-content;
    background-color: var(--primary-color);
    max-width: 75%;
    margin: 0 auto;
    opacity: 0.95;
    position: relative;
    color: var(--light-surface-color);
    pointer-events: all;
    border-radius: 5px;
}

.vef-message-banner.hiding .message-banner-inner {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.vef-message-banner .message-banner-inner .message-content {
    padding: 14px 60px;
    font-size: 18px;
}

.vef-message-banner .message-banner-inner .btn-close {
    position: absolute;
    right: 0;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    text-align: center;
    width: 40px;
    top: calc(50% - 20px);
    cursor: pointer;
    display :block;
}

/**
 * CSS theme with CSS-variables
 *
 * @author rhess <robin.hess@awi.de>
 */

:root {
    --primary-color: #00AFB9;
    --primary-color-dark: #007d84;
    --secondary-color: #0f1E50;
    --background-color: #f2f2f2;
    --light-surface-color: #ffffff;
    --dark-surface-color: #dddddd;
    --disabled-color: #575757;
    --error-color: #FF0000;
    --success-color: #00BA3F;
    --text-color: #444444;
    --headline-color: #000000;

    --window-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    --border-radius: 0px;
}

/* AWI COLORS
:root {
    --primary-color: #00ace5;
    --secondary-color: #003e6e;
}
/*

/* DARK MODE TEST */

/*
:root {
    --primary-color: #00ace5;
    --secondary-color: #003e6e;
    --background-color: #444444;
    --light-surface-color: #222222;
    --dark-surface-color: #999999;
    --disabled-color: #555555;
    --error-color: #FF0000;
    --success-color: #00BA3F;
    --text-color: #bbbbbb;
    --headline-color: #ffffff;

    --window-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    --border-radius: 4px;
}
*/

/* load theme last */
/*# sourceMappingURL=vef.css.map */