/*
COLORS

HEX       ALTERNATIVE  COLOR      USE
---------------------------------------------------------------------------
#333333   #333         darkgray   body text
*/

:root {
    --color-border: #333;
    --color-text: #333;
    --color-text-app-header: #fff;
    --color-text-header: #363c4d;
    --color-text-header-light: #828C9B;
    --color-text-link: #314893;
    --color-text-link-hover: #475b9b;
    --color-text-tree: #828C9B; /* E.g. for "Customize" and "alternative name" */
    --color-warn-light: #FF8080; /* light red, candidate */
    --color-warn: #CF4C4C; /* generally usable red */
    --color-ok-light: #90EE90; /* iight green, reference */
    --color-ok: #4CCF4C; /* generally usable green */
    --color-ok-dark: #217b21; /* dark green, for text */
    --color-warn-ok: #FFA500;
    --color-neutral: #999999;
    --color-background: #FFFFFF;
    --color-background-light: #FAFBFC;
    --color-background-medium: #F3F5F7;
    --color-background-dark-hover: #4f5e8c;
    --color-background-dark: #404a6a;
    --color-background-dark-transparent: rgba(64, 74, 106, 0); /* #404a6a */
    --color-background-error: #5F333E;
    --color-tree-background: #E9EDF0;
    --color-tree-background-selected: #2A396C;
    --color-tree-background-hover: #D2D8DD;
    --color-active-selection: #FF9632; /* search result */
    --color-active-selection-light: #FFC890; /* Used for col resizer */
    --color-searchresult: #CCCCFF;
    --color-active-searchresult: #FFEE99;
    --color-shape: #FFFF66;
    --color-viewer-background: #CDD1D8;
    --color-viewer-menubutton-background-active: #E9EDF0;
    --color-viewer-menubutton-background: #F3F5F7;
    --color-button-hover: #E9EDF0;
    --color-menubutton: #E38710;
    --color-menubutton-hover: #E69A39;
    --color-dialogbutton: #002741;
    --color-table-stripe: #F3F5F7;
    --color-sidebar-background: #E9EDF0;
    --border-separator: 1px solid #D2D8DD;
}

.app-highcontrast-mode {
    --color-warn-light:#D01C8B;
    --color-warn:#AA1772;
    --color-ok-light:#4DAC26;
    --color-neutral:#CCCCFF;
}

/* Z-index */

.old-browser {
    z-index: 1100;
}

.notifications {
    z-index: 1000;
}

#qr-video {
    z-index: 900;
}

.mask--app {
    z-index: 800;
}

.menu {
    z-index: 700;
}

.shape-edit, .shape-edit-preview {
    z-index: 600;
}

.popup, .dialog {
    z-index: 600;
}

.ui-autocomplete {
    z-index: 500 !important /* override jQuery UIs default z-index */;
}

/* z-index: 400 is leafletjs map */

.app-header {
    z-index: 300;
}

.popup-mask {
    z-index: 300;
}

div.loading {
    z-index: 700;
}

.viewer-toolbar {
    z-index: 300;
}

.marquee {
    z-index: 300;
}

body.maximized.area--site .content-right {
    z-index: 250 !important;
}

.resizer {
    z-index: 200;
}

#tooltip {
    z-index: 100;
}

.page-content > .markup {
    pointer-events: none;
    z-index: 4;
}

.editor-active--markup + .ac-viewport-wrapper .markup {
    pointer-events: auto;
}

.hsp--shape--note {
    z-index: 4;
}

.hs {
    z-index: 3;
}

.hs--pagelink {
    z-index: 3;
}

.hs--shape .fill {
    z-index: 2;
}

.fade-top, .fade-bottom {
    z-index: 2;
}

.history-item--dragging {
    z-index: 2;
}

.hs--highlight, .search {
    z-index: 2;
}

.viewer {
    z-index: 1;
}

.fd-file {
    z-index: 1;
}

/* Browser support */

.old-browser {
    display: none;
}

.mod_no-promises .old-browser {
    background-color: #fff;
    border-color: #5F333E;
    box-shadow: 0 0 0.4rem 0.4rem #5f333e;
    box-shadow: 0 0 0.4rem 0.4rem rgba(95, 51, 62, 0.5);
    color: #333;
    display: block;
    height: 10rem;
    left: 50%;
    margin-left: -15rem;
    margin-top: -5rem;
    padding: 1rem;
    position: absolute;
    top: 50%;
    width: 30rem;
}


/* Authorization stuff */

html:not(.app-mode-contentadmin) .app-auth-contentadmin,
html:not(.app-mode-systemadmin) .app-auth-systemadmin,
html:not(.app-mode-qc) .app-auth-qc,
html:not(.app-mode-patterneditor) .app-auth-patterneditor,
html:not(.app-mode-labelereditor) .app-auth-labelereditor {
    margin-left: 0;
    max-height: 0.1px;
    max-width: 0.1px;
    overflow: hidden;
    visibility: hidden !important;
}

html.app-mode-contentadmin .app-auth-contentadmin,
html.app-mode-systemadmin .app-auth-systemadmin,
html.app-mode-qc .app-auth-qc,
html.app-mode-patterneditor .app-auth-patterneditor,
html.app-mode-labelereditor .app-auth-labelereditor {
    max-height: inherit;
    max-width: inherit;
    overflow: inherit;
    visibility: visible !important;
}

/* High contrast mode */

.app-highcontrast-mode-only {
    display: none;
    visibility: hidden;
}

.app-highcontrast-mode .app-highcontrast-mode-only {
    display: inherit;
    visibility: inherit;
}

.app-dark-mode-only {
    display: none;
    visibility: hidden;
}

.app-dark-mode .app-dark-mode-only {
    display: inherit;
    visibility: inherit;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
}

*:focus {
    outline: none;
}

.unselectable {
    user-select: none;
}

.ac {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

.js-hidden {
    display: none !important;
}

.js-invisible {
    visibility: hidden !important;
}

.app-header {
    background-color: var(--color-background-dark);
    color: var(--color-text-app-header);
    filter: drop-shadow(0 0 2px var(--color-background-dark));
    height: 40px;
    line-height: 40px;
    overflow: visible;
    white-space: nowrap;
}

.app-header-left {
    overflow: visible;
}

.app-header-right {
    /* ReSharper disable once InvalidValue */
    background: linear-gradient(to right, var(--color-background-dark-transparent) 0%, var(--color-background-dark) 10px, var(--color-background-dark) 100%);
    left: auto;
    padding-left: 10px;
    width: auto;
}

.app-header__item {
    display: inline-block;
    float: left;
}

.app-footer {
    background-color: var(--color-background-light);
    height: 40px;
    top: auto;
}

.app-base {
    background-color: var(--color-background);
    bottom: 40px;
    min-width: 0;
    overflow-x: auto;
    top: 40px;
}

.app-base--client, .app-base--portal {
    bottom: 0;
    top: 0;
}

.app-base--portal {
    padding: 1rem;
    top: 40px;
}

.content-left {
    background-color: var(--color-background-light);
    overflow-y: auto;
    text-overflow: ellipsis;
    width: 200px;
}

.area--admin .content-left {
    background-color: var(--color-background-medium);
    border-right: var(--border-separator);
}

.content-left-menu {
    padding: 15px;
}

.content-resizer {
    border-left: var(--border-separator);
    left: 200px;
}

.content-right {
    border-bottom: var(--border-separator);
    left: 200px;
    min-width: 594px;
}

html, body, form {
    height: 100%;
}

th, td {
    vertical-align: top
}

img {
    border: 0;
}

body, input, textarea, keygen, select, button {
    font-family: "Segoe UI", "Open sans", "Helvetica Neue", "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

input:focus, textarea:focus, select:focus, button:focus, a.button:focus, .select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus {
    border-color: transparent !important;
    border-radius: 4px;
    outline: 1px solid var(--color-active-selection);
    outline-offset: -1px;
}

input:focus, textarea:focus, keygen:focus {
    border-radius: 2px;
}

button, button:focus {
    border-radius: 5px;
}

select + button {
    margin-left: 0.5rem;
}

body {
    color: #333333;
    font-size: 0.8rem;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

body.somewhere {
    background-color: #333E4F; /* so that we at least see something in old browsers */
    background-color: var(--color-background-dark);
    color: #f8f8f8;
}

.general-tools__maximize-link::after {
    content: 'Maximize';
}

body.maximized .general-tools__maximize-link::after {
    content: 'Restore';
}

body.maximized.area--site .viewer-content-pane {
    margin-top: 8px;
}

body.maximized.area--site .viewer-header {
    height: 30px !important;
    overflow: hidden !important;
}

body.maximized .item-header h1 {
    font-size: 1rem !important;
}

body.maximized.area--site .item-info {
    display: none;
}

body.maximized.area--site .viewer-body {
    top: 30px !important;
}

body.maximized.area--site .app-base {
    bottom: 0 !important;
}

body.maximized.area--site .app-footer {
    height: 0 !important;
}

body.maximized.area--site .tree-resizer, body.maximized.area--site .content-right {
    left: 0 !important;
}

a {
    color: var(--color-text-link);
}

a:link, a:visited {
    color: var(--color-text-link);
}

a:hover {
    color: var(--color-text-link-hover);
    text-decoration: none;
}

a:active {
    color: var(--color-text-link);
}

p {
    line-height: 1.6em;
    margin-bottom: 10px;
}

/* Components */

.app-start__logo {
    background: url(../img/logo-small.png) no-repeat;
    display: inline-block;
    height: 45px;
    width: 130px;
}

.map-home {
    background-image: url('../img/marker.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 34px;
    line-height: 34px;
    width: 34px;
}

.map-hotspot {
    background-color: var(--color-active-selection);
    border-radius: 100%;
    color: white;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    opacity: 1;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 2px #000000;
    width: 26px;
}

.logo {
    float: left;
    height: 100%;
    padding-left: 10px;
}

.home-header {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    margin-right: 2em;
    white-space: nowrap;
}

.home-header:hover {
    background-color: var(--color-background-dark-hover);
}

.home-header__name:before {
    background-color: #fff;
    background-image: var(--site-icon-url);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 26px;
    margin-right: 0.5rem;
    position: relative;
    top: -3px;
    vertical-align: middle;
    width: 26px;
}

.home-header__name {
    padding: 10px 10px 9px;
}

.home-header__name.icon-site {
    background-position: left center;
}

.site-dropdown {
    max-height: 50vh;
    min-width: 120%;
    overflow-y: auto;
    position: relative !important;
}

.breadcrumbs-link {
    color: #333;
    cursor: pointer;
}

.search-box {
    background-image: url('../img/magnifier.png');
    background-position: right 5px center;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px;
    height: 26px;
    padding: 3px 6px;
    transition: width 0.25s;
    width: 15em;
}

.search-box:focus {
    background-image: none;
    border-radius: 5px;
    width: 45em !important;
}

.search-box--autocomplete {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.search-qr-code {
    background: url('../img/qr.png') center center #fff no-repeat;
    border: 0;
    cursor: pointer;
    height: 16px;
    margin: 0 -20px 0 0;
    padding: 0;
    position: relative;
    right: 3rem;
    width: 16px;
}

.search-box:focus + .search-qr-code {
    display: none;
}

#qr-video {
    height: 50%;
    left: 25%;
    position: fixed;
    text-align: center;
    top: 25%;
    width: 50%;
}

.qr-video__wrapper {
    border: 1px solid #000;
    margin: auto;
    position: relative;
}

.qr-video__scanline {
    -webkit-animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: bounce;
    -webkit-animation-timing-function: linear;
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: bounce;
    animation-timing-function: linear;
    background-color: #ff00ff;
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 65535;
}

.qr-video__video {
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}

.qr-video__close {
    background: transparent url('../img/cross-circle-bw.png') center center no-repeat;
    border: 0;
    cursor: pointer;
    height: 32px;
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    z-index: 65536;
}

@-webkit-keyframes bounce {
    0% {
        top: 0;
    }

    50% {
        top: 100%;
    }
}

@keyframes bounce {
    0% {
        top: 0;
    }

    50% {
        top: 100%;
    }
}

.area--startpage .search-box {
    height: 36px;
    padding: 5px 8px;
}

.resizer {
    bottom: 0;
    /* background: url('../img/dotted-vertical.png') repeat-y 4px 0; */
    cursor: col-resize;
    position: absolute;
    top: 0;
    width: 15px;
}

.resizer.active {
    background-color: var(--color-active-selection-light);
    /* background-image: url('../img/dotted-vertical-drag.png'); */
}

.app-header__item--personal {
    background-color: var(--color-menubutton);
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    margin: 2px 0 2px 0.5em;
    padding: 0 0.5em 0 10px;
}

.app-header__item--personal.loggedIn, .home-header {
    background-image: url(../img/chevron-collapse-single.png);
    background-position: right 8px top 16px;
    background-repeat: no-repeat;
    border-radius: 5px;
    margin-right: 8px;
    padding: 0 24px 0 10px;
}

a.app-header__login {
    color: var(--color-text-app-header);
    text-decoration: none;
}

.app-header__item--show-personal-menu {
    background-color: var(--color-menubutton);
    background-image: url(../img/chevron-collapse-single.png);
    background-position: right 8px top 16px;
    background-repeat: no-repeat;
    border-radius: 0 5px 5px 0;
    border-width: 0;
    cursor: pointer;
    float: right;
    height: 36px;
    line-height: 2.25rem;
    margin: 2px 1em 2px 0;
    width: 18px;
}

.app-header__item--show-personal-menu:hover {
    background-color: var(--color-menubutton-hover);
}

.app-header__item--personal:hover {
    background-color: var(--color-menubutton-hover);
}

.content-tools-container {
    float: left;
}

.content-tools, .admin-tools, .general-tools {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.content-tools li, .general-tools li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.content-left a, .content-tools a, .general-tools a, .tree a {
    color: var(--color-text);
    text-decoration: none;
}

.content-tools a, .general-tools a {
    color: var(--color-text-app-header);
    cursor: pointer;
    padding: 0 2em 0 0;
}

.general-tools li:first-child {
    padding-right: 2em;
}

.content-tools a {
    cursor: pointer;
}

.item-header__item.content-tools--common {
    display: flex;
    flex-shrink: 0;
    padding-left: 1em;
    padding-bottom: 8px;
}
.item-header__item.content-tools--common > .content-tool:not(.button) {
    padding: 0 0.25em;
    line-height: 24px;
}
.item-header__item.content-tools--common > .content-tool:not(.button):hover {
    background-color: var(--color-background-dark);
    border-radius: 3px;
    color: #ffffff;
}


.area--site .viewer-header, .area--site .item-header {
    overflow: visible;
}

.content-tools--submenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 1rem;
    top: 1.25rem;
    z-index: 32767;
}

.app-action {
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 24px;
    order: -1;
    width: 24px;
}

.app-action--submenu {
    background-image: url(../img/menu-dots.png);
    order: 32767;
}

.app-action--add-to-workfolder {
    background-image: url(../img/folder--plus.png);
    order: -10;
}

.app-action--sync {
    background-image: url(../img/arrow-circle.png);
}

.app-action--download, .app-action--download-original {
    background-image: url(../img/drive-download.png);
    order: -20;
}

.app-action--download--csv {
    background-image: url(../img/document-excel-csv.png);
    order: -20;
}

.app-action--download--xlsx {
    background-image: url(../img/blue-document-excel.png);
    order: -20;
}

.app-action--download--json {
    background-image: url(../img/json.png);
    order: -20;
}

.app-action--print {
    background-image: url(../img/printer.png);
    order: -30;
}

.app-action--show-properties {
    background-image: url(../img/information-white.png);
    order: -40;
}

.content-left a:hover,
.content-tools a:hover, .general-tools a:hover {
    text-decoration: underline;
}

.notifications {
    margin-top: 0.5em;
    position: absolute;
    right: 0.5em;
    top: 40px;
}

.notification {
    background: #FF9122 url('../img/cross-circle.png') no-repeat top right;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 2px;
    padding: 1em;
    width: 200px;
}

.notification--error {
    background-color: var(--color-background-error);
}

.fatalerror {
    background-color: var(--color-background-error);
}

.fatalerror > div {
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-name: infocus;
    animation-timing-function: linear;
    background-color: #fff;
    color: #333;
    height: 80%;
    left: 10%;
    padding: 20px;
    position: absolute;
    top: 10%;
    width: 80%;
}

.fatalerror .v-stack > header {
    height: auto !important;
}

.fatalerror .v-stack > section {
    padding: 10px;
}

.content-pane {
    overflow: hidden;
}

.viewer, .popup, .select2-container {
    background-color: var(--color-background);
    color: #333;
}

.basket {
    background-color: var(--color-background);
    border-radius: 5px;
    height: 40px;
    min-width: 150px;
    position: absolute;
    right: 0;
    transition: background-color 0.5s;
}

.basket.active {
    background-color: #496077;
}

.basket-items {
    margin-right: 40px;
}

.basket-tools {
    bottom: 0;
    padding: 2px 0.5em;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}

.date {
    color: var(--color-text-header-light);
    font-size: 0.5625rem;
    text-transform: capitalize;
}

body .history {
    padding: 2px 2px 2px 15px;
}

/* prevent name collision with modernizr html.history */

/* .history-items { left: 200px; /* corresponds with #zone_upload width } */

.history-item {
    -webkit-font-smoothing: antialiased !important;
    -webkit-transition: width 0.5s, opacity 0.5s;
    background-color: white;
    background-position: center bottom;
    background-repeat: no-repeat;
    border: var(--border-separator);
    border-radius: 4px;
    box-sizing: content-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    float: left;
    font-size: 0.5rem;
    height: 30px;
    margin: 2px 4px 2px 2px;
    overflow: hidden;
    transition: width 0.5s, opacity 0.5s;
    width: 30px;
}

.history-item.hidden {
    opacity: 0;
    width: 0;
}

.history-item--dragging {
    position: absolute !important;
}

.history-item--placeholder {
    background-color: transparent;
    border-style: dotted;
}

.history-item.shim {
    display: block;
    float: none;
    position: absolute;
}

.history-item.active {
    border-width: 3px;
    margin: 0 2px 0 0;
}

/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-header);
    font-weight: 400;
    margin: 0 0 0.5em 0;
    text-transform: none;
}

h1 {
    font-size: 1.125rem;
}

h2 {
    font-size: 1rem;
}

h3 {
    font-size: 0.875rem;
}

h4 {
    font-size: 0.6875rem;
}

h5, h6 {
    font-size: 1rem;
}

:is(h1, h2) > a {
    color: inherit !important;
    text-decoration: none;
}

:is(h1, h2) > a:hover {
    text-decoration: underline;
}

.item-relation-link {
    text-decoration: none;
}
.item-relation-link:hover .item-name {
    text-decoration: underline;
    color: var(--color-text-header);
    font-weight: 400;
}
.item-relation-link .item-alternativeName {
    text-decoration: none;
    color: var(--color-text-header);
    font-weight: 200;
}

.item-name, .item-version, .item-alternativeName {
    color: var(--color-text-header);
}

.item-names .item-alternativeName {
    color: var(--color-text-header);
    font-family: 'Segoe UI Light', 'Open Sans Light', "Segoe UI", "Open sans", "Helvetica Neue", "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    font-weight: 200;
    margin-left: 0.3em;
}

a .item-alternativeName {
    text-decoration: none;
}

.version-viewer .item-version {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 8px;
    padding: 12px;
}

.version-viewer .item-version--active {
    background: url("../img/toggle-selected.png") no-repeat scroll 0 18px #fff;
}

.version-viewer .item-version--deleted {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.7);
}

.version-viewer .item-version .item-version__revision:only-child {
    border-color: transparent !important;
}

.version-viewer .item-version .item-version__revision {
    border: 1px solid transparent;
    color: #666;
    cursor: pointer;
    display: block;
    margin: 0 0 2px 0;
    padding: 4px;
    white-space: nowrap;
}

.version-viewer .item-version .item-version__revision:hover, .item-version--active .item-version__revision--active {
    border: 1px solid var(--color-active-selection);
    color: var(--color-text-header);
}

.version-viewer .item-version h2 {
    margin-left: 4px;
}

.version-viewer .item-version--active .item-version__revision--active {
    border-color: var(--color-text-header);
}

.version-viewer .item-version--active h2 {
    color: var(--color-text-header);
}

.version-viewer .item-version__revision--deleted:hover {
    background-color: unset;
}

.version-viewer .app-copy-qc-edits {
    background-color: var(--color-menubutton);
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    padding: 5px;
    text-decoration: none;
}

.version-viewer .app-copy-qc-edits:hover {
    background-color: var(--color-menubutton-hover);
}

.tag-properties, .tag-ranges, .tag-settings {
    margin-bottom: 2em;
}

.sync-state.uptodate {
    background: url(../img/ball-green.png) no-repeat;
    cursor: help;
    padding: 0 10px;
    width: 24px;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */

.rightColumn > :is(h1, h2), .leftColumn > :is(h1, h2) {
    margin-top: 0;
}

.null-value::before {
    content: "[Empty]";
}

.null-value {
    color: #999da2;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    background-color: #fff;
    border: 1px solid #496077;
    margin: 20px auto 0 auto;
    width: 960px;
}

.header {
    background: #4b6c9e;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.header h1 {
    border: none;
    color: #f9f9f9;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2em;
    margin: 0;
    padding: 0 0 0 20px;
}

.main {
    margin: 12px 8px 8px 8px;
    min-height: 420px;
    padding: 0 12px;
}

.leftCol {
    margin: 12px 8px 8px 8px;
    min-height: 200px;
    padding: 6px 0;
    width: 200px;
}

.footer {
    color: #4e5766;
    line-height: normal;
    margin: 0 auto;
    padding: 8px 0 0 0;
    text-align: center;
}

.pagetemplate {
    clear: both;
}

.pagetemplate__inner {
    border: 1px solid #ccc;
}

.pagetemplate--site-image {
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    max-width: 200px;
}

.pagetemplate--graphview {
    height: 30vh;
    margin-bottom: 2em;
    position: relative;
    width: 100%;
}

.pagetemplate--graphview > h2 {
    height: 32px;
}

.pagetemplate--graphview .pagetemplate__inner {
    background-color: #000;
    bottom: 0;
    height: auto;
    overflow: hidden;
    position: absolute;
    top: 32px;
    width: 100%;
}

.pagetemplate--graphview .pagetemplate__maximize {
    position: absolute;
    right: 0.5em;
    top: 40px;
    width: 6em;
    z-index: 32767;
}

.pagetemplate--graphview .pagetemplate__showall {
    position: absolute;
    right: 7.5em;
    top: 40px;
    width: 6em;
    z-index: 32767;
}

.pagetemplate--graphview .pagetemplate__showfiles {
    position: absolute;
    right: 14.5em;
    top: 40px;
    width: 6em;
    z-index: 32767;
}

.pagetemplate--graphview .pagetemplate__showtags {
    position: absolute;
    right: 21.5em;
    top: 40px;
    width: 6.5em;
    z-index: 32767;
}

.pagetemplate--graphview.maximized {
    background-color: #fff;
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 32766;
}

.pagetemplate--barchart {
    height: 100%;
    width: 100%;
}

.pagetemplate--barchart__canvas {
    height: 100%;
    margin: -1px;
    width: 100%;
}

.pagetemplate--iframe {
    border: 1px solid #999;
    height: 400px;
    width: 100%;
}

.box .pagetemplate {
    width: 100%;
}

:is(.pagetemplate--mru, .pagetemplate--mvi, .pagetemplate--folder) .supercompact li {
    font-size: 0.7rem;
    margin-top: 0;
}

/* TAB MENU   
----------------------------------------------------------*/

div .hideSkiplink {
    background-color: #3a4f63;
    width: 100%;
}

.report-list {
    overflow-x: hidden !important;
}

.report__parameters {
    padding-left: 0 !important;
}

.report__parameters td > label {
    padding-left: 0;
}

.report__parameters td > label > input {
    margin-left: 0;
}

.menu ul, .menu__items, .report-list__ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.report-list__item {
    background: url('../img/report.png') no-repeat 3px center;
    padding: 0 0 0 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.report-list__item a {
    display: inline-block;
    padding: 0.25rem 0;
    width: 100%;
}

.report-list__item:hover {
    background-color: var(--color-tree-background-hover);
}

.report-list__item a:hover {
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ccc;
    margin: 1em 0;
    padding: 1em;
}

fieldset p {
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label {
    display: block;
}

fieldset label.inline {
    display: inline;
}

legend {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry {
    border: 1px solid #ccc;
    width: 320px;
}

input.passwordEntry {
    border: 1px solid #ccc;
    width: 320px;
}

div.accountInfo {
    width: 42%;
}

table.grid {
    border-collapse: collapse;
    margin-bottom: 1rem;
}

table.grid th {
    color: var(--color-text-header);
    text-align: left;
    white-space: nowrap;
}

table.grid > :is(tbody, thead, tfoot) > tr > :is(td, th) {
    padding: 0.2rem 1rem;
    vertical-align: middle;
}

table.grid > tbody > tr.highlight {
    background-color: var(--color-warn-ok);
}

td.grid-td-empty {
    text-align: center
}

table.grid > tbody > tr:nth-child(odd):not(.highlight), td.grid-td-empty {
    background-color: var(--color-table-stripe);
}

table.grid .icon {
    background-position: left center;
}

table.grid .icon--top {
    background-position: right 4px;
}

table.grid input[type="text"], table.grid textarea {
    width: 450px;
}

table.grid tr[data-bind-item] {
    display: none;
}

.form-controls {
    margin-top: 1em;
    padding: 2px;
}

.edit-list-template {
    display: none;
}

/* GRID2 */

.grid2-container {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.grid2 {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.grid2--autowidth .grid2 {
    table-layout: auto;
}

.grid2__head {
    flex-shrink: 0;
    height: 40px;
    order: 1;
    overflow: hidden;
    padding-right: 16px;
    position: relative;
    white-space: nowrap;
}

.grid2__head--no-headers {
    height: 24px;
}

.grid2__head--no-headers .grid2__header {
    display: none;
}

.grid2__head--no-filter {
    height: 24px;
}

.grid2__body {
    flex: 1 auto;
    height: 100%;
    order: 2;
    overflow-y: scroll;
    position: relative;
}

.grid2__foot {
    flex-shrink: 0;
    height: 40px;
    order: 3;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.grid2 > tbody > tr > :is(td, th) {
    overflow: hidden;
    padding: 4px 4px 4px 2px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid2 > tbody > tr > td > div {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid2--wrap-words > tbody > tr > td, .grid2--wrap-words > tbody > tr > td > div {
    max-height: 50px;
    white-space: normal;
    word-wrap: break-word;
}

.grid2 > tbody > tr > td {
    padding-right: 10px;
}

.grid2__header-container {
    display: grid;
    grid-template-columns: auto 10px;
    grid-template-rows: 50% 50%;
    height: 100%;
    width: 100%;
}

.grid2__header {
    grid-column: 1/2;
    grid-row: 1/2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid2__resizer {
    border-right: #d8d8d8 2px dotted;
    cursor: col-resize;
    grid-column: 2/3;
    grid-row: 1/3;
    height: 100%;
    width: 100%;
}

.grid2__resizer.active {
    background-color: var(--color-active-selection-light);
}

.grid2__header--asc:after {
    content: url('../img/chevron-expand.png');
    padding-left: 3px;
}

.grid2__header--desc:after {
    content: url('../img/chevron-collapse.png');
    padding-left: 3px;
}

.grid2__filter {
    display: block;
    grid-column: 1/2;
    grid-row: 2/3;
    overflow: hidden;
    padding-bottom: 2px;
}

.grid2__filter input {
    border-color: #666;
    border-style: solid;
    border-width: 0;
    color: #999;
    display: inline-block;
    height: 17px;
    padding: 2px 0;
    width: 100%;
}

.grid2__filter input:hover, .grid2__filter input:focus {
    background: url('../img/funnel.png') no-repeat right center;
    background-size: 12px 12px;
    border-bottom-width: 1px;
    padding: 2px;
}

.grid2__filter:focus {
    outline: 0;
}

.grid2__empty {
    padding: 1em;
    text-align: center;
}

.grid2--empty .grid2__filter, .grid2--empty .grid2__header--selection {
    visibility: hidden
}

.grid2--body > tbody > tr:nth-child(odd) {
    background-color: var(--color-table-stripe);
}

.grid2--body > tbody > tr:hover {
    background-color: var(--color-tree-background-hover);
}

.grid2__button-container {
    display: flex;
    flex-direction: row;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.grid2__button-container > a.button, .grid2__button-container > button, .content-tools--common .button {
    border: 0;
    margin-right: 0;
    padding: 0;
}

.grid2__button-container > a.button, .grid2__button-container > button {
    opacity: 0;
    transition: opacity 0.5s;
}

.grid2-container:hover .grid2__button-container > a.button, .grid2-container:hover .grid2__button-container > button {
    opacity: 1;
}

.grid2__download-button {
    background: url('../img/drive-download.png') no-repeat center center;
    height: 24px;
    width: 24px;
}

.grid2__columnpicker-button {
    background: url('../img/gear.png') no-repeat center center;
    height: 24px;
    padding: 0;
    width: 24px;
}

.grid2__columnpicker__list {
    list-style: none;
    padding: 0;
}

.grid2__columnpicker__list > li {
    margin: 0;
}

.grid2 > tbody > tr > td.grid2__selection {
    padding-right: 0;
}

.grid2__header--selection {
    grid-column: 1/2;
    grid-row: 2/3;
}

.grid2-container:not(.grid2--selection-active) tr:not(:hover) td.grid2__selection input,
.grid2-container:not(.grid2--selection-active) tr:not(:hover) .grid2__header--selection {
    visibility: hidden;
}

.grid2__foot__page {
    display: inline-block;
    margin-right: 0.5em;
    min-width: 110px;
    padding: 3px;
    text-align: center;
    vertical-align: bottom;
}

.grid2__foot__button {
    background-position: center center;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

.grid2__foot__button--start {
    background-image: url('../img/control-stop-180.png')
}

.grid2__foot__button--previous {
    background-image: url('../img/control-180.png')
}

.grid2__foot__button--next {
    background-image: url('../img/control.png')
}

.grid2__foot__button--end {
    background-image: url('../img/control-stop.png')
}

/* MISC  
----------------------------------------------------------*/

.clear {
    clear: both;
}

.bold {
    font-weight: bold;
}

.submitButton {
    padding-right: 10px;
    text-align: right;
}

button, input[type=submit], a.button {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    cursor: pointer;
    font-weight: 600;
    margin: 0 0.5em 0 0;
    padding: 0.5em 1em;
    transition: background-color 0.2s linear;
}

a.button {
    display: inline-block;
}

button:last-child, input[type=submit]:last-child, a.button:last-child {
    margin-right: 0;
}

button:hover, button:focus, button.active, a.button:hover {
    background-color: #f0f0f0;
}

button:disabled, a.button:disabled {
    background-color: #ddd;
    color: #666;
    cursor: default;
}

button.button-danger {
    background-color: #C33;
    border: none;
    color: #fff;
    font-weight: bold;
    transition: box-shadow 0.2s ease-in-out;
}

button.button-danger:hover {
    background-color: #C33;
    box-shadow: 0 0 1px 1px #E66;
}

.button-primary, .app-ok, input[type=submit].app-ok, .app-form-submit, .sp-choose {
    background-color: var(--color-dialogbutton);
    border: 1px solid transparent;
    color: #fff;
    font-weight: bold;
    transition: box-shadow 0.2s ease-in-out;
}

.button-primary:hover:not(:disabled),
.app-ok:hover:not(:disabled),
input[type=submit].app-ok:hover:not(:disabled),
.app-form-submit:hover:not(:disabled),
.sp-choose:hover:not(:disabled),
.app-ok:focus:not(:disabled) {
    background-color: var(--color-dialogbutton);
    box-shadow: 0 0 1px 1px var(--color-active-selection);
}

.loading--edit-list {
    background: url(../img/loading_60fps_31px.apng) no-repeat left 3px;
    color: var(--color-menubutton);
    display: block;
    font-weight: bold;
    height: 34px;
    line-height: 34px;
    margin: 0;
    padding-left: 40px;
    text-align: center;
}

.ui-autocomplete {
    background: #fff !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: 2px 6px 6px #000000;
    box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.5);
    padding: 0;
}

.ui-autocomplete .ui-menu-item {
    color: #333;
    height: 2.5rem;
    list-style-type: none;
    width: auto;
}

.ui-autocomplete .ui-menu-item-wrapper {
    display: block;
    height: 100%;
    padding: 5px;
    width: 100%;
}

.ui-menu .ui-menu-item :is(h1, h2) {
    cursor: default;
}

.ui-menu .ui-menu-item h1 {
    font-size: 0.8rem;
}

.ui-menu .ui-menu-item h2 {
    font-size: 0.675rem;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-focus > :is(h1, h2),
.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active > :is(h1, h2) {
    background-color: var(--color-background-medium) !important;
    color: var(--color-text) !important;
    font-weight: bold;
}

.autocomplete--loading {
    background-image: url('../img/loading_60fps_31px.apng');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

.autocomplete--search {
    background-image: url('../img/magnifier.png');
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
}

div.loading {
    background-color: var(--color-background-medium);
    border-radius: 0.75rem;
    color: var(--color-menubutton);
    font-weight: bold;
    height: auto;
    left: 50%;
    line-height: 34px;
    margin-left: -110px;
    margin-top: -50px;
    padding: 1rem;
    position: absolute;
    top: 50%;
    white-space: nowrap;
    z-index: 2;
}

div.loading:after {
    content: url(../img/loading_60fps_31px.apng);
    display: inline-block;
    float: left;
    height: 34px;
    position: relative;
    text-align: center;
    top: 3px;
    width: 34px;
}

div.loading > *:first-child {
    margin-left: 0.5em;
}

@keyframes infocus {
    from {
        filter: blur(50px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

.spinning {
    -moz-animation-duration: 500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: spin;
    -moz-animation-timing-function: linear;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: spin;
    -webkit-animation-timing-function: linear;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-name: spin;
    animation-timing-function: linear;
    transform-origin: center center;
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0);
    }

    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay {
    color: White;
    display: block;
    font-size: 1.1rem;
    padding: 10px;
    text-align: right;
}

.loginDisplay a:link {
    color: white;
}

.loginDisplay a:visited {
    color: white;
}

.loginDisplay a:hover {
    color: white;
}

.failureNotification {
    color: #C33;
    font-size: 1.2rem;
}

.fd-file {
    cursor: pointer;
    font-family: sans-serif;
    font-size: 10rem;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

#zone_upload, #upload_siteimage {
    display: inline-block;
    margin: 1px;
    overflow: hidden;
    padding: 5px;
}

#zone_upload {
    position: absolute;
    right: auto;
    width: 200px;
}

#zone_upload p, #upload_siteimage p {
    margin: 5px 0 0 10px;
}

#zone_upload:hover {
    border: 1px solid white;
    margin: 0;
}

#upload_siteimage:hover {
    border: 1px solid #333;
    margin: 0;
}

.app-unselectable {
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* NOTE: there is also some reference CSS in tree.css */

.tree-container {
    margin: 5px 15px;
    min-width: 150px;
    overflow-y: auto;
}

.tree-container .sidebar-header {
    display: flex;
}

.sidebar-header:not(.active) .tree__control {
    display: none;
}

.tree__control {
    -webkit-transition: opacity 1s;
    background-position: 0 center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 100%;
    margin-left: 5px;
    opacity: 0;
    transition: opacity 1s;
}

.tree__control--settings {
    float: right;
    font-size: 14px;
    order: 50;
    text-decoration: underline;
    transition: opacity 1s;
    width: auto;
}

.tree-container:hover .tree__control {
    opacity: 1;
}

.tree__control.tinymenu {
    height: 100%;
    margin: 0;
}

.tree__control--settings.active {
    color: #fff;
    font-weight: bold;
    opacity: 1;
}

.treesettings__properties .not-in-site {
    color: #999;
}

.treesettings__footer {
    margin-bottom: 0;
}

.tree__control--reload {
    background-image: url('../img/arrow-circle-gray.png');
    transform-origin: 50% 50%;
}

.tree__control--collapse-all {
    background-image: url('../img/collapse-all.png');
    display: inline-block;
    order: 10;
    transform-origin: 50% 50%;
    width: 16px;
}

.tree__control--show-most-recent-updates {
    background-image: url('../img/clock-frame.png');
    display: inline-block;
    order: 20;
    transform-origin: 50% 50%;
    width: 16px;
}

.treesettings__properties ol {
    list-style-type: none;
    margin: 1em 0 1em 20px;
    padding: 0;
}

.treesettings__properties ol li {
    padding-bottom: 2px;
}

.treesettings__properties ol li:not(:first-child)::before {
    content: url('../img/dotted-corner.png');
}

.treesettings__properties ol li:nth-child(3) {
    padding-left: 16px;
}

.treesettings__properties ol li:nth-child(4) {
    padding-left: 32px;
}

.treesettings__properties ol li:nth-child(5) {
    padding-left: 48px;
}

.treesettings__properties ol li:nth-child(6) {
    padding-left: 64px;
}

.treesettings__properties ol li:nth-child(7) {
    padding-left: 80px;
}

.treesettings__properties ol li:nth-child(8) {
    padding-left: 96px;
}

.viewer-body {
    outline: 0;
    overflow: auto;
}

.section-header {
    background: url('../img/toggle-expand.png') -2px 3px no-repeat;
    cursor: pointer;
    display: flex;
    padding-left: 20px;
    white-space: nowrap;
}

.item-info {
    cursor: pointer;
    display: flex;
    white-space: nowrap;
}

.item-info__contents {
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-info__source-actions .content-tool {
    margin-left: 1em;
}

.app-expand--base-explorer::after {
    content: 'show more';
}

.app-expand--base-explorer.active::after {
    content: 'show less';
}

.item-header {
    display: flex;
    white-space: nowrap;
}

.item-header__item {
    margin: 0;
    overflow: hidden;
    padding: 0 1em 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-header__item:last-child {
    padding-right: 0;
}

.item-header__item--version {
    flex: 1;
    min-width: 250px;
    padding: 0 0 0 0.5em;
    text-align: right;
}

.item-header .item-header__item__version,
.item-header .item-alternativeName {
    font-family: 'Segoe UI Light', 'Open Sans Light', "Segoe UI", "Open sans", "Helvetica Neue", "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    font-weight: 200;
}

.item-header__item .item-name, .item-header .item-alternativeName {
    display: inline;
}

.item-header--preview .item-name, .item-header--preview .item-alternativeName {
    margin-bottom: 0;
}

.item-header--preview .item-name:hover, .item-header--preview .item-alternativeName:hover {
    overflow: visible;
}

.noshrink {
    flex-shrink: 0;
}

.webpage-viewer .item-header__item:first-child, .item-header__item:first-child:hover {
    flex: 1 0 auto;
}

.item-header__item:first-child:hover ~ .item-header__item {
    flex: 0 0 auto;
}

.item-header__item--version:hover {
    flex: 1 0 auto;
}

.viewer-footer .item-properties a {
    color: #333;
    text-decoration: dotted #333;
}

.item-info__version__not-default {
    background-color: var(--color-warn);
    border-radius: 5px;
    display: inline-block;
    font-size: 0.6rem;
    line-height: 100%;
    margin-left: 1em;
    padding: 5px;
    position: relative;
    text-decoration: none;
    top: -0.25em;
}

.item-info__version__not-default a {
    color: #fff;
    text-decoration: none;
}

.section-header-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-header-count {
    margin-left: 0.3em;
}

li .section-header {
    font-size: 1rem;
}

.section-header.expanded, .section-header.expanded {
    background-image: url('../img/toggle.png');
}

.section-header--empty {
    background-image: none;
    color: #999;
    cursor: inherit;
}

.reference-list--hide-empty .section-header--empty {
    display: none;
}

.sidebar-list {
    cursor: pointer;
    margin: 0 0 1em;
    overflow: hidden;
    padding: 0 0 0 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.sidebar-list-item, li.reference, li.candidate {
    display: block;
    list-style-type: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-list-item:hover {
    background-color: var(--color-tree-background-hover);
}
.item-version .sidebar-list-item:hover {
    background-color: unset;
}

.sidebar-list-item__cell {
    padding: 0;
    width: 100%;
}

.sidebar-list-item__cell:first-child {
    padding-left: 7px;
    width: auto;
}

.candidate-validation-tools td {
    white-space: nowrap;
}

.sidebar-list.candidate-validation {
    table-layout: fixed;
    width: 100%;
}

.sidebar-list.candidate-validation .sidebar-list-item__cell {
    width: 20%;
}

.sidebar-list.candidate-validation .sidebar-list-item__cell:first-child {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%;
}

.candidate-validation .sidebar-list-item {
    display: table-row;
}

li.reference, li.candidate {
    display: flex;
    height: 1.5rem;
    padding-top: 0.15rem;
}

.reference__label, .candidate__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference__label .alternativename {
    color: var(--color-text-tree);
}

.reference__link, .candidate__link {
    display: none;
    margin-left: 1em;
    text-decoration: underline;
}

.reference.active .reference__link {
    display: flex;
}

.candidate.active .candidate__link {
    display: flex;
}

.reference--outside .reference__label {
    cursor: pointer;
}

.reference--indirect .reference__label {
    color: var(--color-text-link);
}

.candidate__label {
    cursor: default;
    text-decoration: none;
}

.reference.active, .candidate.active {
    background-color: #ccc;
}

.candidate__link::after, .reference--outside .reference__via::before, .more::after, .external-link::after {
    background: url('../img/external-link-icon.png') right no-repeat;
    content: '';
    display: inline-block;
    height: 1em;
    margin-right: 0.5em;
    width: 16px;
}

.more::after {
    float: none;
}

h1.icon, h2.icon {
    background-position: left center;
}

.icon {
    background-position: 0 1px;
    background-repeat: no-repeat;
    padding-left: 20px;
}

.icon--inline {
    background-position: left 1px !important;
    padding-left: 22px !important;
}

.vp-table.grid-mode .icon--inline {
    background-position: left 2px !important;
    padding-bottom: 2px !important;
}

.icon--top {
    background-position: top;
    vertical-align: top;
}

.icon--history {
    background-repeat: no-repeat;
}

.icon-collection {
    background-image: url('../img/box.png');
}

.icon-datatable {
    background-image: url('../img/document-excel-csv.png');
}

.icon-documentnumber {
    background-image: url('../img/document-number.png');
}

.icon-equipment {
    background-image: url('../img/switch-network.png');
}

.icon-folder {
    background-image: url('../img/folder.png');
}

.icon-file {
    background-image: url('../img/document.png');
}

.icon-filename {
    background-image: url('../img/document-attribute.png');
}

.icon-funcarealoc {
    background-image: url('../img/marker.png');
    padding-left: 16px;
}

.icon-funcloc {
    background-image: url('../img/tag-label.png');
}

.icon-link {
    background-image: url('../img/shortcut.png');
}

.icon-tagnumber {
    background-image: url('../img/tag-label.png');
}

.icon-glossary {
    background-image: url('../img/blue-document-list.png');
}

.icon-glossaryentry {
    background-image: url('../img/blue-document-hf-delete.png');
}

.icon-organization {
    background-image: url('../img/building.png');
}

.icon-page, .icon-webpage {
    background-image: url('../img/document-globe.png');
}

.icon-site {
    background-image: url('../img/globe-medium-green.png');
}

.icon-root {
    background-image: url('../img/globe-model.png');
}

.icon-date {
    background-image: url('../img/calendar-blue.png');
}

.icon-linenumber {
    background-image: url('../img/layer-shape-line.png');
}

.icon-uri {
    background-image: url('../img/chain.png');
}

.icon-literalkeyword {
    background-image: url('../img/book-open.png');
}

.icon-hidden {
    background-image: url('../img/eye--minus.png');
}

.icon-hidden-before::before {
    content: url('../img/eye--minus.png');
    margin-left: -16px;
    opacity: 0.6;
}

/* Entity types-as-classes */

.icon-markup {
    background-image: url('../img/pencil.png');
}

.icon-workfolder {
    background-image: url('../img/folder-vertical.png');
}

.item-name.icon.icon-file[data-extension]::before {
    background-color: var(--color-background-dark);
    border-radius: 2px;
    color: #fff;
    content: attr(data-extension);
    font-size: 0.6rem;
    left: -10px;
    padding: 1px 3px;
    position: relative;
    text-transform: uppercase;
    top: 3px;
}

.treenode__label.qced::before, .infinite-tree-title.qced::before {
    border: 0;
    content: url(../img/tick-small-circle.png);
    display: inline-block;
    height: 14px;
    left: -20px;
    margin-right: -16px;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 16px;
}

.viewer--autocompleteviewer {
    padding: 1em;
}

.candidateviewer__text-label {
    color: var(--color-text-header);
    font-weight: bold;
}

.candidate-validation {
    border-collapse: collapse;
    margin-top: 0.5em;
}

.candidate-validation.hideqced .candidate.valid, .candidate-validation.hideqced .candidate.invalid {
    display: none;
}

.candidate-validation .icon:not(.has-target)::before {
    background: url('../img/PossibleRefOverlay.png') no-repeat;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    /*    opacity: .6; */
}

.candidate-validation .icon {
    position: relative;
}

.candidate-validation .validate {
    display: inline-block;
    height: 18px;
    margin-left: 5px;
    visibility: hidden;
    width: 16px;
}

.candidate-validation .label:not(.has-target) {
    line-height: 12px;
    text-decoration: none;
}

.candidate-validation .label.has-target {
    color: #333;
    line-height: 12px;
    text-decoration: none;
}

.candidate-validation .status {
    display: inline-block;
}

.candidate-validation .candidate.active .validate {
    visibility: visible;
}

.candidate-validation .candidate.valid .ok.status {
    background-image: url(../img/tick-circle-bw.png);
    background-position-y: 3px;
    visibility: visible;
}

.candidate-validation .candidate.valid.active .ok.status {
    background-color: var(--color-active-selection);
    background-image: url(../img/tick-circle.png);
    background-position-y: 1px;
}

.candidate-validation .candidate.invalid .label {
    text-decoration: line-through;
}

.candidate-validation .candidate.invalid .err.status {
    background-image: url(../img/cross-circle-bw.png);
    background-position-y: 3px;
    visibility: visible;
}

.candidate-validation .candidate.invalid.active .err.status {
    background-color: var(--color-active-selection);
    background-image: url(../img/cross-circle.png);
    background-position-y: 1px;
}

.candidate-validation .validate.ok {
    background-image: url(../img/tick-circle.png);
    background-position-y: 1px;
    background-repeat: no-repeat;
}

.candidate-validation .validate.err {
    background-image: url(../img/cross-circle.png);
    background-position-y: 1px;
    background-repeat: no-repeat;
}

.viewer {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
    height: 100%;
    left: 0;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.25s, opacity 0.25s;
}

.viewer.folder-viewer {
    transition-duration: 0.25s;
}


.vp-table:not(.selection--active) .selection__select-item, .vp-table:not(.selection--active) .selection__select-all {
    visibility: hidden;
}

.tooltip {
    white-space: nowrap;
}

/* ReSharper disable InvalidValue */

body.has-popup .viewer {
    -webkit-transform: translate3d(0, 0, -2px);
    opacity: 0.75;
    transform: perspective(500px) translate3d(0, 0, -2px);
}

.content-pane.minimized .viewer {
    -webkit-transform: translate3d(0, 0, -5px);
    opacity: 0;
    transform: perspective(500px) translate3d(0, 0, -5px);
}

.show-warning-icon-right, .funcloc-viewer__property--has-conflicts {
    background-image: url('../img/exclamation-red.png');
    background-position: right center !important;
    background-repeat: no-repeat;
    padding-right: 20px !important;
}

.show-ok-icon-right {
    background-image: url('../img/tick-circle.png');
    background-position: right center !important;
    background-repeat: no-repeat;
    padding-right: 20px !important;
}

/* ReSharper restore InvalidValue */

.sidebar-header, .sidebar-content {
    left: 0;
    position: absolute;
    right: 0;
}

.sidebar-header {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    padding: 0 0 0 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-header h1 {
    display: inline;
    pointer-events: none;
}

.sidebar-header.below h1 {
    line-height: 40px;
}

.viewer-sidebar-pane .sidebar-header {
    line-height: 24px;
    padding-top: 0;
}

.sidebar-header.mine h1::after {
    background: url(../img/question-white.png) no-repeat left center;
    content: '?';
    color: transparent;
    display: inline-block;
    font-size: 0.8rem;
    margin-left: 8px;
    padding-left: 20px;
    min-width: 20px;
}

.sidebar-header.qced h1::after, .item-header .item-name.qced + .item-alternativeName::after {
    background: url(../img/tick-circle.png) no-repeat left center;
    color: var(--color-ok);
    content: 'Verified';
    display: inline-block;
    font-size: 0.8rem;
    margin-left: 8px;
    padding-left: 20px;
}

.reset-validation {
    float: right;
}

.sidebar-content {
    background-color: var(--color-tree-background);
    border-radius: 5px;
    overflow: hidden;
}

.sidebar-content__inner {
    bottom: 0;
    left: 0;
    overflow: auto;
    padding: 5px;
    position: absolute;
    right: 0;
    scrollbar-color: var(--color-background-dark) transparent;
    scrollbar-width: none;
    top: 0;
}

.viewer-sidebar-pane .sidebar-content__inner::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.viewer-sidebar-pane .sidebar-content__inner::-webkit-scrollbar-thumb {
    -webkit-box-shadow: 0 0 1px #ffffff;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    background-color: #000000;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 4px;
}

.viewer-sidebar-pane .sidebar-content__inner {
    background-color: var(--color-sidebar-background);
    margin: 0 0 15px 0;
    padding: 8px;
    scrollbar-color: auto;
    scrollbar-width: thin;
}

.sidebar-content__inner:hover {
    scrollbar-width: thin;
}

.sidebar-content.animating .sidebar-content__inner {
    /* ReSharper disable once CssNotResolved */
    scrollbar-width: none !important;
}

.sidebar-content:last-child .sidebar-content__inner {
    margin-bottom: 0;
}

.sidebar-header h1 {
    -webkit-transition: color 0.5s ease;
    flex: auto 1 0;
    font-size: 1rem;
    margin-right: 30px;
    order: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.viewer-sidebar-pane .sidebar-header h1 {
    color: var(--color-text-header);
    margin-left: 8px;
}

.sidebar-header::before {
    float: right;
    height: 25px;
    margin-top: 10px;
    order: 100;
    transition: transform .25s ease-in;
    width: 25px;
}

.sidebar-header.above::before, .sidebar-header.below::before {
    content: url(../img/chevron-black.svg);
}

.sidebar-header.above::before {
    transform: scale(.85);
}

.sidebar-header.above:hover::before {
    transform: scale(1);
}

.sidebar-header.below::before {
    transform: rotate(180deg) scale(.85);
}

.sidebar-header.below:hover::before {
    transform: rotate(180deg);
}

.viewer-sidebar-pane .sidebar-header.above::before {
    margin-top: 0;
}

.sidebar-header.active h1 {
    margin-right: 0;
}

.sidebar-header:not(.active):hover h1 {
    text-decoration: underline;
}

.viewer-sidebar-pane .sidebar-header:hover h1, .viewer-sidebar-pane .sidebar-header.active h1 {
    color: var(--color-text-header);
}

.most-recent-updates li {
    display: block;
}

.keyword-box {
    background-color: #FFFAF0;
    border-color: grey;
    border-style: dotted;
    border-width: 1px;
    margin: 0;
    padding: 10px;
    width: 300px;
}

.keyword-box h2 {
    padding: 0;
}

.keyword-box a {
    padding: 0;
}

.keyword-box p {
    font-size: 0.8rem;
    padding: 0;
}

.feedback .minimize::after {
    content: 'Minimize';
}

.feedback .minimize.active::after {
    content: 'Restore';
}

.feedback .app-form-attachment-label {
    background: url('../img/paper-clip-small.png') no-repeat;
    padding-left: 20px;
}

.app-form-attachment-clear {
    background: url('../img/cross-circle.png') no-repeat;
    border: 0;
    cursor: pointer;
    height: 20px;
    margin-left: 0.5em;
    width: 20px;
}

.feedback .app-form-attachment-clear {
    display: none;
    float: right;
}

.feedback .have-attachment {
    background-color: var(--color-sidebar-background);
    border-radius: 5px;
    padding: 5px;
}

.feedback .have-attachment .app-form-attachment-clear {
    display: inline-block;
}

.paging-control {
    float: right;
}

.paging-control a, .paging-control span {
    color: #333 !important;
    padding: 8px;
}

.paging-control span {
    font-weight: bold;
}

.paging-control a {
    cursor: pointer;
    text-decoration: underline;
}

.paging-control a:hover {
    background-color: var(--color-button-hover);
}

.popup, .dialog {
    /* ReSharper disable CssNotResolved */
    background-color: white;
    border-radius: 5px;
    box-shadow: 3px 3px 24px #000000;
    box-shadow: 3px 3px 24px rgba(0, 0, 0, 1.0);
    /* ReSharper restore CssNotResolved */
    color: #333;
    padding: 1em;
    position: absolute;
}

.popup::before {
    border-color: #fff transparent;
    border-style: solid;
    border-width: 0 8px 16px 8px;
    content: "";
    position: absolute;
    visibility: hidden;
}

.popup.aligned-left::before {
    transform: rotate(270deg);
}

.popup.aligned-bottom::before {
    transform: rotate(180deg);
}

.popup.aligned-right::before {
    transform: rotate(90deg);
}

.popup.aligned-top::before {
    margin-top: -1px;
}

.popup.smooth-transition, .dialog.smooth-transition {
    transition: left 0.3s ease, top 0.3s ease, right 0.3s ease, bottom 0.3s ease, width 0.6s ease, height 0.6s ease;
}

.popup ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.popup ul li a {
    color: #666;
    text-decoration: underline #666 dotted;
}

.popup ul li a.has-target {
    color: blue;
    text-decoration: underline solid blue;
}

.popup--draggable form {
    overflow: hidden;
}

.popup__resize {
    background: url('../img/resize-handle.png') no-repeat 6px 6px;
    bottom: 0;
    cursor: se-resize;
    height: 16px;
    position: absolute;
    right: 0;
    width: 16px;
}

.popup__drag {
    background-color: #f0f0f0;
    background-color: rgba(240, 240, 240, 0);
    cursor: move;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.popup__close-button {
    position: absolute;
    right: 8px;
    top: 8px;
}

.dialog-content {
    min-height: 50px;
    min-width: 50px;
}

.popup .v-stack > header {
    padding: 0;
}

.dialog-footer {
    padding: 1rem 0 0 0 !important;
    text-align: right;
}

.candidate-validation .label:not(.has-target) {
    color: #666;
    line-height: 12px;
    opacity: 0.75;
    text-decoration: none;
}

.popup-mask, .mask--app {
    background-color: #c0c0c0;
    background-color: rgba(192, 192, 192, 0.4);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.mask--app {
    background-color: #808080;
    background-color: rgba(128, 128, 128, 0.4);
}

/* BASE PREVIEW POPUP */

.popup--preview {
    max-height: 80vh;
    max-width: 700px;
}

.popup .preview {
    background-color: var(--color-background-light);
    border: 1px solid var(--color-border);
    cursor: pointer;
    max-height: 250px;
    max-width: 300px;
    vertical-align: bottom;
}

.popup--preview > form > div {
    min-width: 600px;
    width: 100%;
}

.section-header__property-group:hover {
    text-decoration: none;
}

.section-header__property-group {
    background: url('../img/chevron-collapse.png') right 2px center no-repeat;
    cursor: pointer;
    display: table;
    font-weight: 400;
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: underline;
}

.section-header__property-group.expanded {
    background-image: url('../img/chevron-expand.png');
}

.glossary-entry-popup {
    max-width: 300px;
    width: auto;
}

/* SEARCH */

h1.autocomplete {
    margin-bottom: 0;
}

.menu {
    padding: 8px;
    position: absolute;
}

.personal-menu {
    right: 0;
    top: 40px;
    width: 240px;
}

.menu__header {
    color: #666666;
}

.close-button {
    background: url('../img/cross-circle-bw.png') no-repeat center center;
    cursor: pointer;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    padding: 0;
    width: 20px;
}

.menu__close {
    float: right;
}

.menu__item, .menu__header {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding: 0 0.5em;
    width: 100%;
}

.menu__item:hover, .menu__item--folder--expanded {
    background-color: var(--color-background-dark);
    border-radius: 3px;
    color: #ffffff;
}

.menu__item__link, .menu__item__link:hover {
    color: inherit !important;
    display: block;
    text-decoration: none;
}
.menu__item--folder {
    background-image: url(../img/chevron-collapse-single.png);
    background-position: right 8px center;
    background-repeat: no-repeat;
    margin-right: 8px;
    padding: 0 24px 0 10px;
    height: auto;
}
.menu__item--folder + ul {
    padding: 0;
    list-style-type: none;
    height: auto;
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
}

.menu__item--folder--expanded + ul {
    max-height: 500px;
}
    /* Media depend */
    @media (max-width: 850px) {
        body {
        font-size: 1rem;
    }

    .area--startpage .app-header-right {
        background: var(--color-background-dark);
        margin-left: 0 !important;
    }

    .area--startpage #searchpageBox {
        font-family: segoe ui light;
        font-size: 1.5rem;
        height: 40px;
        left: 12px;
        max-width: calc(100vw - 40px) !important;
        position: absolute;
        top: 12px;
        width: 200px;
    }

    .area--startpage .search-qr-code {
        background-color: transparent;
        background-size: 50%;
        height: 50px;
        padding: 10px;
        top: -4px;
        width: 50px;
    }

    .search-box:focus {
        width: 10em;
    }

    .search-box {
        width: 10em;
    }

    .area--startpage .app-start__logo {
        width: 60px !important;
    }

    .app-start__logo {
        width: 40px;
    }

    .app-header-right {
        margin-left: 40px;
    }

    .app-header .content-tools > :not(:first-child) {
        display: none;
    }

    .content-resizer {
        display: none;
    }

    .logo {
        -moz-min-width: 40px;
        -ms-min-width: 40px;
        -o-min-width: 40px;
        -webkit-min-width: 40px;
        min-width: 40px;
    }

    /* Less room for menu */
    .content-tools {
        padding-left: 5px;
    }

    .content-tools a {
        padding-right: 0;
    }

    .grid2__body.dir-folder .grid2 {
        table-layout: auto;
    }

    .grid2__head.dir-folder {
        height: 1px;
        overflow: hidden;
        visibility: hidden;
        width: auto !important;
    }

    .grid2__body.dir-folder .grid2__selection {
        display: none;
    }

    .grid2__body.dir-folder td {
        padding: 10px;
    }

    .grid__view-selector {
        display: none !important;
    }

    .grid .icon--top {
        background-position: right center !important;
    }

    .grid .folder-viewer__select > * {
        display: none;
    }

    .app-base {
        bottom: 0 !important;
    }

    .app-footer {
        height: 0 !important;
    }

    .viewer-sidebar-pane {
        width: 0 !important;
    }

    .viewer-sidebar-pane {
        left: auto !important;
    }

    .content-right {
        left: 0 !important;
    }

    .content-left {
        visibility: hidden;
        width: 100% !important;
    }

    .viewer-content-pane {
        margin: 0 !important;
        right: 0 !important;
        width: auto !important;
    }

    .area--site .logo {
        padding-left: 0;
    }

    .area--site .viewer-header, .area--site .viewer-footer {
        left: 15px;
        padding-top: 5px;
        right: 15px;
        width: auto;
    }

    .area--site .app-base {
        top: 40px;
    }

    .area--site .viewer-toolbar, .toolbar-overflow-container {
        display: none !important;
    }

    .area--site .viewer-body.funcloc-viewer {
        padding-left: 15px;
    }
}

.app-expand {
    background: url(../img/chevron-collapse.png) no-repeat right;
    display: inline-block;
    padding-right: 16px;
    text-decoration: none;
}

.app-expand--up {
    background: url(../img/chevron-expand.png) no-repeat right;
}

.app-expand:hover {
    text-decoration: underline;
}

.app-expand.active {
    background-image: url(../img/chevron-expand.png);
}

.app-expand--up.active {
    background: url(../img/chevron-collapse.png) no-repeat right;
}

.demo-notice {
    color: var(--color-text-link-hover);
    filter: saturate(30%);
    font-style: italic;
    left: 30%;
    opacity: 0.4;
    padding: 10px;
    position: absolute;
    right: 0;
}

.expiry-nag {
    background-color: #ff0000;
    background-color: rgba(255, 0, 0, 0.4);
    border-radius: 5px;
    color: #ffffff;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    height: 30px;
    left: 55%;
    margin-left: -50px;
    margin-top: 5px;
    padding: 5px 10px;
    position: absolute;
    z-index: 2;
}

/* Date picker */

.ui-datepicker-prev {
    float: left;
    margin-top: 1px;
}

.ui-datepicker-next {
    float: right;
    margin-top: 1px;
}

.ui-datepicker-title {
    text-align: center;
}

.ui-datepicker-calendar td a {
    color: #333 !important;
    display: inline-block;
    font-weight: normal !important;
    text-align: center;
    text-decoration: none;
    width: 20px;
}

.ui-datepicker-calendar th {
    font-weight: normal;
}

.ui-datepicker-calendar td a:hover {
    background-color: var(--color-button-hover);
    text-decoration: underline;
}

.ui-datepicker.ui-corner-all {
    border-radius: 0;
}

.ui-datepicker-header.ui-widget-header {
    background-color: var(--color-active-selection);
    border: 0 !important;
}

.ui-datepicker.ui-widget-content {
    background: #fff;
    padding: 1em;
}

/* Tabs */

.tabs {
    align-content: start;
    display: flex !important;
    flex-wrap: wrap;
    height: calc(100% - 0.5rem);
    left: 0;
    margin-top: 0.5rem;
    position: relative;
    top: 0;
    width: 100%;
}

.tabs::before {
    border-bottom: 1px solid #ddd;
    content: '';
    display: block;
    height: 1.75rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: -1px;
    width: 100%;
}

.tabs__label {
    background: #ddd;
    border-radius: 5px 5px 0 0;
    color: #666;
    cursor: pointer;
    display: block;
    height: 1.75rem;
    margin: 0 0 0 0.5rem;
    order: 1;
    overflow-y: hidden;
    padding: 0.35rem 1rem;
    transition: background ease 0.2s, box-shadow ease 0.2s, color ease 0.2s;
    z-index: 1;
}

.tabs__label:first-of-type {
    margin-left: 5px;
}

.tabs__label:hover, .tabs__label:focus {
    color: inherit;
    text-decoration: underline !important;
}

.tabs__tab {
    background: #fff;
    display: block;
    flex-grow: 1;
    height: 0;
    left: 0;
    order: 99;
    overflow-y: hidden;
    position: relative;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 2;
}

.tabs__radio {
    display: none;
}

.tabs__radio:checked + .tabs__label {
    background: #fff;
    box-shadow: 0 0 0.5rem 0 #000000;
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.5);
    color: inherit;
    text-decoration: none;
}

.tabs__radio:checked + .tabs__label + .tabs__tab {
    height: auto;
    overflow-y: auto;
    visibility: visible;
}

/* Patterngroup. Used in admin section, but also in viewer (QC popup) */

.edit-pattern-form table.grid {
    width: 100%;
}

.patterngroups-section {
    margin-bottom: 2em;
}

.patterngroups-popup {
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
}

.pattern-disabled td {
    text-decoration: line-through;
}

.patterngroups-popup:not(.view-mode--advanced) .advanced,
.patterngroups-popup--built-in .no-builtin {
    display: none;
}

.is-mentioned-in > tbody > tr:not(:first-child) > .is-mentioned-in-label {
    visibility: hidden;
}

.pattern-capturegroup-helper {
    padding-left: 3px;
}

.pattern-literals {
    height: 10em;
}

.pattern--automatic::after {
    content: url('../img/lightning.png');
    cursor: help;
}

.patterns.grid {
    table-layout: fixed;
}

.patterns textarea[name=testGroup] {
    height: 1.6rem;
    transition: height 0.3s;
}

.patterns textarea[name=testGroup]::placeholder {
    font-size: 0.8rem;
}

.patterns textarea[name=testGroup]:focus {
    height: 3.2rem;
}

:is(.patterns.grid, .is-mentioned-in.grid, .patterngroups.grid) > tbody > tr > td {
    vertical-align: middle;
}

.capturegroup-hint {
    background-color: var(--color-active-searchresult);
    position: relative;
}

.capturegroup-hint--delimiter {
    background-color: var(--color-background-light);
}

.capturegroup-hint--first {
    border-left: 2px solid #fff;
    margin-right: -2px;
}

.capturegroup-hint-number {
    font-size: 50%;
    margin-left: -1em;
    position: absolute;
    text-align: center;
    width: 1em;
}

/* WebPage widgets */

.grid-container {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: [col-1]1fr[col-2]1fr[col-3]1fr[col-4]1fr[col-5]1fr[col-6]1fr[col-7]1fr[col-8]1fr[col-9]1fr[col-10]1fr[col-11]1fr[col-12]1fr[col-13];
    grid-template-rows: [row-1]1fr[row-2]1fr[row-3]1fr[row-4]1fr[row-5]1fr[row-6]1fr[row-7]1fr[row-8]1fr[row-9]1fr[row-10]1fr[row-11]1fr[row-12]1fr[row-13];
    height: calc(100% - 10px);
    min-height: 700px;
    min-width: 1000px;
    row-gap: 1rem;
}

.grid-container > section, .box {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 4px;
    overflow: hidden;
    padding: 1rem;
}

.h-stack {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.h-stack > * {
    flex: 1 0 auto;
    overflow: hidden;
    width: auto;
}

.h-stack--m1 > * {
    margin: 0 1em 0 0;
}

.h-stack > section {
    flex: 1 auto;
    width: 100%;
}

.h-stack--m1 > *:last-child {
    margin-right: 0;
}

.grid-container > section, .v-stack, .popup--report form > div {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.grid-container > section > *, .v-stack > *, .popup--report form > div > * {
    flex: 1 auto;
    height: 100%;
    order: 2;
    overflow: auto;
}

.grid-container > section > header, .v-stack > header {
    flex-shrink: 0;
    height: calc(34px + 1rem);
    order: 1;
    overflow: hidden;
    padding: 0.5rem;
    white-space: nowrap;
}

.grid-container > section > footer, .v-stack > footer, .popup--report form > div .dialog-footer {
    flex-shrink: 0;
    height: calc(34px + 1rem);
    order: 3;
    overflow: hidden;
    padding: 0.5rem;
    white-space: nowrap;
}

.grid-container > section > footer {
    padding: 1rem 0 0 0;
}

.grid-container > section .pagetemplate--iframe, .grid-container > section .pagetemplate__inner {
    border: none;
}

.grid-container table.grid {
    margin: 0;
}

.grid-container ul {
    list-style-type: none;
    margin-top: 5px;
    padding: 0;
}

.grid-container ul li {
    font-size: 0.900rem;
    margin-top: 5px;
}

.grid-container ul li a {
    color: #666;
    text-decoration: underline #666 dotted;
}

.grid-container ul li a.has-target {
    color: blue;
    text-decoration: underline solid blue;
}

.widget-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    overflow: auto;
}

.widget-content canvas {
    height: 100%;
    overflow: auto;
    width: 100%;
}

.widget-body button {
    align-self: flex-end;
    width: fit-content;
}

.flex-column {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    justify-content: space-between;
}

.webpage-viewer__content > h1:first-child {
    margin-top: 1.3175rem;
}

.pagetemplate--piechart {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.pagetemplate--piechart__canvas {
    flex: 1 auto;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.pagetemplate--piechart__legend {
    flex-shrink: 0;
    overflow: hidden;
    width: auto;
}

.pagetemplate--piechart__legend ul li {
    font-size: 0.7rem;
    white-space: nowrap;
}

.pagetemplate--piechart__legend li span {
    margin-right: 0.5em;
    padding-left: 1em;
}

.map-marker > span {
    background-color: var(--color-text-link);
    border: 1px solid #000000;
}

.map-marker--active > span {
    background-color: var(--color-active-selection);
}

path.map-marker--active {
    fill: var(--color-active-selection);
    stroke: var(--color-active-selection);
}

.tinymenu {
    background-image: url('../img/menu-dots.png');
    background-position: center center;
    background-repeat: no-repeat;
    border: 0;
    height: 24px;
    margin: 0 1em 0 0.5em;
    padding: 0;
    vertical-align: top;
    width: 24px;
}

.popup--preview header > div {
    display: inline-block;
}

.popup--preview .tabs__radio:checked + .tabs__label + .tabs__tab {
    height: calc(100% - 30px);
    max-height: calc(80vh - 200px);
}

.popup--preview.popup--autoheight .tabs__radio:checked + .tabs__label + .tabs__tab > * {
    max-height: calc(80vh - 200px);
}

/* The switch - the box around the slider */

.switch {
    --slider-height: 25px;
    --slider-margin: 2px;
    --slider-width: 35px;
    display: inline-block;
    height: var(--slider-height);
    margin: 3px;
    position: relative;
    width: var(--slider-width);
}

.switch--small {
    --slider-height: 15px;
    --slider-width: 25px;
}

/* Hide default HTML checkbox */

.switch input {
    height: 0;
    opacity: 0;
    width: 0;
}

/* The slider */

.slider {
    -webkit-transition: .4s;
    background-color: var(--color-neutral);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider::before {
    -webkit-transition: .4s;
    background-color: #fff;
    bottom: var(--slider-margin);
    content: "";
    height: calc(var(--slider-height) - 2 * var(--slider-margin));
    left: var(--slider-margin);
    position: absolute;
    transition: .4s;
    width: calc(var(--slider-height) - 2 * var(--slider-margin));
}

input:checked + .slider {
    background-color: var(--color-active-selection);
}

input:focus + .slider {
}

input:checked + .slider:before {
    -ms-transform: translateX(calc(var(--slider-width) - var(--slider-height)));
    -webkit-transform: translateX(calc(var(--slider-width) - var(--slider-height)));
    transform: translateX(calc(var(--slider-width) - var(--slider-height)));
}

/* Rounded sliders */

.slider.round {
    border-radius: 1em;
}

.slider.round:before {
    border-radius: 50%;
}

.edit-toggle {
    position: absolute;
    top: 1rem;
    right: 15px;
    line-height: 19px;
}

.sidebar-content .edit-toggle {
    top: 0.375rem;
}

.sidebar-content .prop__value {
    padding-left: 20px;
}
.sidebar-content .grid--properties, .sidebar-content .grid--properties > tbody, .sidebar-content .prop--multivalue, .sidebar-content .prop--multivalue > tbody {
    display: block;
    width: 100%;
}

.sidebar-content .grid--properties > tbody > tr, .sidebar-content .prop--multivalue > tbody > tr {
    display: block;
    background-color: unset !important;
}

.sidebar-content .grid--properties th, .sidebar-content .grid--properties td, .sidebar-content .prop--multivalue td {
    padding: 0;
}

.sidebar-content .grid--properties th, .sidebar-content .grid--properties tr:not(.prop--readonly) > td, .sidebar-content .prop--multivalue td {
    display: flex;
}

.sidebar-content .propertyform-wrapper {
    padding-top: 2em;
}

.sidebar-content .propertyform:not(.propertyform--editing) .grid--properties td {
    display: inline;
}

.sidebar-content .grid--properties td > input:first-child {
    flex-grow: 1;
    min-width: unset;
}

.sidebar-content .prop--multivalue button.add {
    border: 0;
    background-color: unset;
    font-weight: normal;
    text-decoration: underline;
    padding: 0 0 1em 0;
    color: var(--color-text-link);
}

/* DARK MODE */
.app-dark-mode {
    --color-background: #121212;
    --color-background-light: #282828;
    --color-viewer-menubutton-background: #fff;
    --color-viewer-menubutton-background-active: #fff;
    --color-background-medium: #232527;
    --color-background-dark: #404040;
    --color-background-dark-hover: #211e00;
    --color-background-dark-transparent: rgba(64, 74, 102, 0);
    --color-background-error: #5F333E;
    --color-text: #eee;
    --color-text-app-header: #fff;
    --color-text-header: #ccc;
    --color-text-header-light: #bbb;
    --color-text-link: #fff;
    --color-text-link-hover: var(--color-menubutton-hover);
    --color-text-tree: #fff;
    --color-tree-background: #2A2B2C;
    --color-tree-background-selected: #2A396C;
    --color-tree-background-hover: #404040;
    --color-sidebar-background: #2A2B2C;
    --border-separator: 1px solid #32383D;
    --color-table-stripe: #282828;
    --color-dialogbutton: #404040;
}

.app-dark-mode .sp-replacer {
    background-color: var(--color-viewer-menubutton-background) !important;
}

.app-dark-mode .sidebar-content__inner {
    scrollbar-color: #42484D transparent;
}

.app-dark-mode .viewer, .app-dark-mode .popup, .app-dark-mode .select2-container {
    color: var(--color-text) !important;
}

.app-dark-mode .grid2__filter input {
    background-color: var(--color-background-dark);
}

.app-dark-mode .grid2__filter:hover input {
    background-color: var(--color-background-light);
}

.app-dark-mode .grid2__resizer {
    border-color: var(--color-background-dark);
}

.app-dark-mode .popup, .app-dark-mode .dialog, .app-dark-mode .shape-edit {
    background-color: var(--color-background-light) !important;
    box-shadow: 3px 3px 24px rgba(64, 74, 102, 1.0);
}

.app-dark-mode .popup::before {
    border-color: var(--color-background-light) transparent;
}

.app-dark-mode button, .app-dark-mode input[type=submit], .app-dark-mode a.button {
    background-color: #000;
    border: 1px solid var(--color-text);
    color: var(--color-text);
}

.app-dark-mode button:hover, .app-dark-mode button:focus, .app-dark-mode button.active, .app-dark-mode a.button:hover {
    background-color: var(--color-background-medium);
}

/* document viewer */

.app-dark-mode .content-pane {
    background-color: var(--color-background) !important;
    color: var(--color-text);
}

.app-dark-mode .resizer--explorer {
    background: var(--color-background);
}

/* admin tools background */

.app-dark-mode .content-pane--explorer {
    background: var(--color-background);
}

/* admin tools background */

.app-dark-mode .area--admin {
    background: var(--color-background);
    color: var(--color-text);
}

.app-dark-mode .demo-notice {
    color: var(--color-text);
}

.app-dark-mode .menu__item, .app-dark-mode .menu__header {
    color: var(--color-text);
}

.app-dark-mode .menu__item:hover {
    color: #f38800;
}

.app-dark-mode .infinite-tree-content .infinite-tree-toggler, .app-dark-mode .section-header {
    filter: invert();
}

/* folder view table */

.app-dark-mode .grid2__filter {
    background-color: var(--color-background-light);
}

.app-dark-mode .viewer-body {
    filter: opacity(80%);
}

.app-dark-mode .viewer {
    background: var(--color-background);
}

.app-dark-mode .viewer-toolbar button:active {
    border-color: #f38800;
}

/* reference section header title*/

.app-dark-mode .section-header-name {
    color: #000;
}

.app-dark-mode .section-header-count {
    color: #000;
}

.app-dark-mode .section-header--empty {
    color: #333;
}

/* File breadcrumb item extension */

.app-dark-mode .item-extension {
    background-color: var(--color-background-dark) !important;
    color: var(--color-text);
}

/* Data Quality Report */

.app-dark-mode .grid-container {
    background-color: var(--color-background-light);
}

/* Data Quality Report */

.app-dark-mode .grid-container--report {
    background-color: var(--color-background);
}

/* Data Quality Report */

.app-dark-mode .grid-container > section {
    background-color: var(--color-background-light);
}

/* Data Quality Report */

.app-dark-mode .grid-container > section:nth-child(n + 1) {
    background-color: var(--color-background-light);
}

/* Data Quality Report */

.app-dark-mode .grid-container > section, .app-dark-mode .box {
    box-shadow: 0 2px 8px #111111;
    box-shadow: 0 2px 8px rgba(17, 17, 17, 0.26);
}

/* Dim map viewer */

.app-dark-mode .site-view {
    filter: opacity(80%);
}

/* document viewer button background */

.app-dark-mode a.button:nth-child(n + 2) {
    background-color: var(--color-background);
}

.app-dark-mode tr.sidebar-list-item:nth-child(n + 1) > td:nth-child(1) > span:nth-child(1) {
    color: #fff;
}

.app-dark-mode .tabs__radio:checked + .tabs__label {
    background: var(--color-background-dark);
}

.app-dark-mode div.tabs__tab:nth-child(n + 1) {
    background-color: var(--color-background-dark);
}

.app-dark-mode .grid2__filter:hover {
    background: var(--color-background-dark);
}

.app-dark-mode .grid2__header {
    background: var(--color-background-dark);
}

.app-dark-mode .grid2-container {
    background: var(--color-background-dark);
}

/* popup tabs */

.app-dark-mode .tabs__label {
    background-color: var(--color-background);
}

.app-dark-mode .grid-container {
    background-color: var(--color-background);
}

.app-dark-mode .popup ul li a:hover, .popup ul li a.has-target:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline var(--color-text-link-hover) dotted;
}

.app-dark-mode .popup ul li a.has-target {
    color: var(--color-text-link);
    text-decoration: underline var(--color-text-link) dotted;
}

.app-dark-mode .tabs::before {
    border-bottom-color: var(--color-background);
}

.app-dark-mode .ui-autocomplete {
    background: var(--color-background-light) !important;
	box-shadow: 3px 3px 12px rgba(64, 74, 102, 1.0);
}

.app-dark-mode .paging-control a, .app-dark-mode .paging-control span {
    color: #fff !important;
}