/*
COLORS

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

:root {
    --color-warn-light:#FF8080; /* light red, candidate */
    --color-warn:#CF4C4C; /* generally usable red */
    --color-ok-light:#90EE90; /* light 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-dark:#333E4F;
    --color-background-dark-transparent:rgba(51, 62, 79, 0); /* #333E4F */
    --color-background-medium:#606D80;
    --color-background-light:#9BA6B5;
    --color-tree-text:#333333;
    --color-tree-background:rgba(255,255,255,0.1);
    --color-tree-background-selected:#333E4F;
    --color-tree-background-hover:#333E4F;
    --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-text-header:#002842; /* or #002741? */
    --color-menubutton:#828C9B;
    --color-menubutton-hover:#8D97A5;
    --color-dialogbutton:#002741;
    --color-text-header-light:#828C9B;
    --color-text-link:#034AF3;
    --color-text-link-hover:#1D60FF;
    --color-text-tree:#C5CBD3; /* E.g. for "Customize" and "alternative name" */
    --color-table-stripe:#f4f4f4;
}

.app-highcontrast-mode {
    --color-warn-light:#D01C8B;
    --color-warn:#AA1772;
    --color-ok-light:#4DAC26;
    --color-ok-dark:#2A5F15;
    --color-neutral:#CCCCFF;
}
    
/* Z-index */

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

.notifications { z-index: 1000; }

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

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

.personal-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 {
     z-index: 4;
    pointer-events: none;
}

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

.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 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 10rem;
    margin-top: -5rem;
    margin-left: -15rem;
    width: 30rem;
    padding: 1rem;
    background-color: #fff;
    border-color: #5F333E;
    color: #333;
    box-shadow: 0px 0px 0.4rem 0.4rem rgba(95,51,62,0.5);
}


/* 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 { visibility: hidden !important; max-width: 0.1px; max-height: 0.1px; overflow: hidden; }

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 { visibility: visible !important; max-width: inherit; max-height: inherit; overflow: inherit; }

/* High contrast mode */
.app-highcontrast-mode-only { display: none; visibility: hidden; }
.app-highcontrast-mode .app-highcontrast-mode-only { display: inherit; visibility: inherit; }

* {
    box-sizing: border-box;
}

html {
    width: 100%;
}

*:focus {
    outline: none;
}

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   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 {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    white-space: nowrap;
}

.app-header-right {
    width: auto;
    left: auto;
    padding-left: 10px;
    /* 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%);
}

.app-header__item {
    background-color: var(--color-background-dark);
    display: inline-block;
    float: left;
}

.app-footer {
    height: 40px;
    top: auto;
}

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

.app-base--client, .app-base--portal {
    background-color: #ffffff;
    color: #333;
    top: 0;
    bottom: 0;
}

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

.content-left {
        overflow-y: auto;
        text-overflow: ellipsis;
        width: 200px;
    }

.content-left-inner { margin: 15px; }

.content-left-menu {
    padding: 15px;
    background-color: #5F333E;
}

.content-resizer {
    left: 200px;
}
.content-right {
    left: 200px;
    -moz-min-width: 594px;
    -ms-min-width: 594px;
    -o-min-width: 594px;
    -webkit-min-width: 594px;
    min-width: 594px;
    background-color: var(--color-background-light);
}

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-weight: 400;
    text-rendering: optimizeLegibility;
}

body {
    background-color: #333E4F; /* so that we at least see something in old browsers */
    background-color: var(--color-background-dark);
    color: #f8f8f8;
    font-size: 0.8rem;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.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: 0px !important; }

body.maximized.area--site .app-footer { height: 0px !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: 180px;
}
.map-home {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../img/marker.png');
    width: 34px;
    height: 34px;
    line-height: 34px;
}

.map-hotspot {
    text-shadow: 1px 1px 2px #000000;
    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;
    width: 26px;
}
        
.logo {
    float: left;
    min-width: 200px;
    padding-left: 10px;
}

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

.search-box {
    transition: width 0.25s;
    width: 15em;
    background-image: url('../img/magnifier.png');
    background-position: right 5px center;
    background-repeat: no-repeat;
    border: 0;
    height: 26px;
    padding: 3px 6px;
    border-radius: 5px; 
}
.search-box:focus {
    width: 30em !important;
    background-image: none;
}
.search-box--autocomplete {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.search-qr-code {
    position: relative;
    border: 0;
    background: url('../img/qr.png') center center #fff no-repeat;
    height: 16px;
    width: 16px;
    right: 3rem;
    cursor: pointer;
    margin: 0 -20px 0 0;
    padding: 0;
}
.search-box:focus + .search-qr-code {
    display: none;
}
#qr-video {
    position: fixed;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    text-align: center;
}
.qr-video__wrapper {
    margin: auto;
    position: relative;
    border: 1px solid #000;
}
.qr-video__scanline {
    height: 1px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff00ff;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    z-index: 65535;
}
.qr-video__video {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}
.qr-video__close {
    background: transparent url('../img/cross-circle-bw.png') center center no-repeat;
    border: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 65536;
    height: 32px;
    width: 32px;
    cursor: pointer;
}
@-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 {
    cursor: pointer;
    height: 36px;
    line-height: 36px;
    margin: 2px 0 2px 0.5em;
    background-color: var(--color-menubutton);
    border-radius: 5px 0 0 5px;
    padding: 0 0.5em 0 10px;
    float: right;
}
.app-header__item--personal.loggedIn {
    border-radius: 5px;
    margin-right: 8px;
    padding: 0 24px 0 10px;
    background-image: url(../img/chevron-collapse-single.png);
    background-repeat: no-repeat;
    background-position: right 8px top 16px;
}

a.app-header__login {
    color: #fff;
    text-decoration: none;
}
.app-header__item--show-personal-menu {
    cursor: pointer;
    background-color: var(--color-menubutton);
    background-image: url(../img/chevron-collapse-single.png);
    background-repeat: no-repeat;
    background-position: right 8px top 16px;
    height: 36px;
    width: 18px;
    line-height: 2.25rem;
    margin: 2px 1em 2px 0;
    border-width: 0;
    border-radius: 0 5px 5px 0;
    float: right;
}
.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 {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display: inline-block;
}

.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: #fff;
    text-decoration: none;
}

.content-tools a, .general-tools a {
    cursor: pointer;
    padding: 0 2em 0 0;
    text-decoration: none;
}

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

.content-tools a[href] {
    cursor: pointer;
}

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

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

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

.notification--error { background-color: #5F333E; }

.content-pane { overflow: hidden; }

.viewer, .popup, .select2-container {
    background-color: #fff;
    color: #333;
}

.basket {
    position: absolute;
    background-color: #3a4f63;
    border-radius: 5px;
    right: 0;
    height: 40px;
    min-width: 150px;
    transition: background-color 0.5s;
}
.basket.active {
    background-color: #496077;
}
.basket-items {
    margin-right: 40px;
}
.basket-tools {
    width: 40px;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    padding: 2px 0.5em;
}
.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;
    background-color: white;
    background-position: center bottom;
    background-repeat: no-repeat;
    border: 1px solid #999;
    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;
    width: 30px;
    -webkit-transition: width 0.5s, opacity 0.5s;
    transition: width 0.5s, opacity 0.5s;
}

.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 {
    font-weight: 400;
    margin: 0 0 0.5em 0;
    text-transform: none;
}

h1 { font-size: 1.3125rem; }

h2 { font-size: 1.125rem; }

h3 { font-size: 1rem; }

h4 { font-size: 0.6875rem; }

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

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

h1 > a:hover, 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-weight: 200; font-family: 'Segoe UI Light', 'Open Sans Light', "Segoe UI", "Open sans", "Helvetica Neue", "Lucida Grande", Arial, Helvetica, Verdana, sans-serif; margin-left: 0.3em; }
a .item-alternativeName { text-decoration: none; }

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

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

.version-viewer .item-version--deleted {
    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 {
    display: block;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 4px;
    margin: 0 0 2px 0;
}

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

.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 {
    border-radius: 5px;
    background-color: var(--color-menubutton);
    text-decoration: none;
    color: #fff;
    padding: 5px;
    display: inline-block;
}
.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; width: 24px;padding: 0 10px;cursor: help;}

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

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


/* 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; }

/* A PageTemplate inside Markdown will be rendered as <p><div></div></p> which will result in
   an empty <p></p> at the top of the page, giving unnecessary whitespace. Make this hidden.
   PageTemplates further down in the document will also have a leading <p></p> but that is
   less noticeable.
*/
.webpage-viewer__content p:first-child:empty { display: none; }

.pagetemplate + .pagetemplate { margin-top: 1em; }

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

.pagetemplate__inner > .vp-table {
    overflow: hidden;
}

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

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

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

.pagetemplate--graphview .pagetemplate__inner {
    position: absolute;
    top: 32px;
    height: auto;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}
.pagetemplate--graphview .pagetemplate__maximize {
    position: absolute;
    z-index: 32767;
    top: 40px;
    right: 0.5em;
    width: 6em;
}
.pagetemplate--graphview .pagetemplate__showall {
    position: absolute;
    z-index: 32767;
    top: 40px;
    right: 7.5em;
    width: 6em;
}

.pagetemplate--graphview .pagetemplate__showfiles {
    position: absolute;
    z-index: 32767;
    top: 40px;
    right: 14.5em;
    width: 6em;
}
.pagetemplate--graphview .pagetemplate__showtags {
    position: absolute;
    z-index: 32767;
    top: 40px;
    right: 21.5em;
    width: 6.5em;
}
.pagetemplate--graphview.maximized {
    position: absolute;
    background-color: #fff;
    z-index: 32766;
    height: auto;
    width: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.pagetemplate--barchart {
    height: 100%;
    width: 100%;
}
.pagetemplate--barchart__canvas {
    margin: -1px;
    height: 100%;
    width: 100%;
}
.pagetemplate--iframe {
    height: 400px;
    border: 1px solid #999;
    width: 100%;
}

.box .pagetemplate {
    width: 100%;
}
.pagetemplate--mru .supercompact li, .pagetemplate--mvi .supercompact li, .pagetemplate--folder .supercompact li {
    font-size: 0.7rem;
    margin-top: 0;
}

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

div.menu { padding: 4px 0 4px 8px; }

div.menu ul, .personal-menu__items {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited {
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover {
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active {
    background-color: #465c71;
    color: #cfdbe6;
    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; }

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

table.grid > tbody > tr > td,
table.grid > tbody > tr > th,
table.grid > thead > tr > th,
table.grid > thead > tr > td,
table.grid > tfoot > tr > td {
    padding: 0.2rem 1rem;
}

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.dir-folder tbody tr:hover, table.grid.most-recent-updates tbody tr:hover {
    background-color: var(--color-background-dark) !important;
    color: #fff !important;
    cursor: pointer;
}
table.grid.dir-folder tbody tr:hover a, table.grid.dir-folder tbody tr:hover span, 
table.grid.most-recent-updates tbody tr:hover a, table.grid.most-recent-updates tbody tr:hover span {
    color: #fff;
}

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

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

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

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

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

.clear { clear: both; }

.bold { font-weight: bold; }

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

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

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

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

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

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

.loading--edit-list {
    background-image: url('../img/loading-FFFFFF.gif');
    background-repeat: no-repeat;
    height: 16px;
    display: block;
}
.ui-autocomplete {
    background: #fff !important;
    box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.5);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.ui-autocomplete .ui-menu-item {
    height: 2.5rem;
    max-width: 600px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background-color: var(--color-background-medium) !important;
    color: #ffffff;
    height: 100%;
}
.autocomplete--loading {
    background-image: url('../img/loading-FFFFFF.gif');
    background-repeat: no-repeat;
    background-position: right center;
}
.autocomplete--search {
    background-image: url('../img/magnifier.png');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}

div.loading {
    background-color: #eee;
    border: 0.5em solid #fff;
    background-image: url('../img/loading-FFFFFF.gif');
    background-repeat: no-repeat;
    background-position: 9px center;
    height: auto;
    min-height: 16px;
    width: auto;
    min-width: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -80px;
    color: #333;
    border: 2px gray solid;
    padding: 10px 10px 10px 34px;
    font-size: 1.5rem;
    
}

.spinning {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    transform-origin: center center;
    animation-name: spin;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    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 {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* NOTE: there is also some reference CSS in tree.css */
.tree-container {
    overflow-y: auto; 
    min-width: 150px; 
}

.sidebar-header:not(.active) .tree__control {
    display: none;
}
.tree__control {
    cursor: pointer;
    height: 100%;
    margin-left: 5px;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    background-position: 0 center;
    background-repeat: no-repeat;
}

.tree__control--settings {
    font-size: 14px;
    text-decoration: underline;
    width: auto;
    color: var(--color-text-tree);
    float: right;
}
.tree__control--settings.active {
    color: #fff;
    font-weight: bold;
}
    .treesettings__properties .not-in-site {
    color: #999;
}
.tree__control--reload {
    background-image: url('../img/arrow-circle-gray.png');
    transform-origin: 50% 50%;
}
.tree__control--collapse-all {
    display: inline-block;
    width: 16px;
    background-image: url('../img/collapse-all.png');
    transform-origin: 50% 50%;
}
.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;
    padding-left: 20px;
    white-space: nowrap;
    display: flex;
}

.item-info {
    display: flex;
    white-space: nowrap;
    cursor: pointer;
}
.item-info__contents {
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-expand--viewer-header {
    margin-left: 1em;
    width: 80px;
}

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

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

.item-header {
    display: flex;
    white-space: nowrap;
}
.item-header__item {
    padding: 0 1em 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-header__item--version {
    flex: 1;
    text-align: right;
    min-width: 250px;
    padding: 0 0 0 0.5em;
}
.item-header .item-header__item__version,
.item-header .item-alternativeName {
    font-weight: 200;
    font-family: 'Segoe UI Light', 'Open Sans Light', "Segoe UI", "Open sans", "Helvetica Neue", "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
}
.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; }

.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 {
    text-decoration: dotted #333;
    color: #333;
}

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

    .item-info__version__not-default a {
        text-decoration: none;
        color: #fff;
    }
.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__cell {
    width: 100%;
    padding: 0;
}

.sidebar-list-item__cell:first-child {
    padding-left: 7px;
    width: auto;
	
}
.candidate-validation-tools td {
    white-space: nowrap;
}
.sidebar-list.candidate-validation {
    width: 100%;
    table-layout: fixed;
}
.sidebar-list.candidate-validation .sidebar-list-item__cell {
    width: 20%;
}
.sidebar-list.candidate-validation .sidebar-list-item__cell:first-child {
    width: 80%;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}
	
.candidate-validation .sidebar-list-item {
    display: table-row;
}

li.reference, li.candidate {
    display: flex;
    line-height: 18px;
    height: 18px;
}
.reference__label, .candidate__label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.reference__label .alternativename {
    color: var(--color-background-medium);
}
.reference__link, .candidate__link {
    margin-left: 1em;
    display: none;
    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 {
    text-decoration: none;
    cursor: default;
}
.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;
    width: 16px;
    margin-right: 0.5em;
}

.more::after {
    float: none;
}

h1.icon, h2.icon { background-position: left center; }
.icon { background-repeat: no-repeat; padding-left: 20px;}
.icon--inline { padding-left: 22px !important; background-position: left 4px !important;}
.vp-table.grid-mode .icon--inline { background-position: left 2px !important; padding-bottom: 2px !important; }
.icon--top { vertical-align: top; background-position: 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.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.png'); }
.icon-fileversion { background-image: url('../img/document.png'); }
.icon-funcarealoc { background-image: url('../img/marker.png'); }
.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-open-image.png'); }

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

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

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

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

.candidate-validation .icon:not(.has-target)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('../img/PossibleRefOverlay.png') no-repeat;
    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 {
    visibility: visible; 
    background-image: url(../img/tick-circle-bw.png);
    background-position-y: 3px;
}

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

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

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

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

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

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

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

.dir-folder tr:hover .selection__select-item, .dir-folder tr:hover .selection__select-all { visibility: visible;}

.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;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sidebar-header h1 {
    display: inline;
    pointer-events: none;
}
.viewer-sidebar-pane .sidebar-header {
    padding-top: 0;
    line-height: 28px;
}

.sidebar-header.mine h1::after {
    background: url(../img/question-white.png) no-repeat left center;
    content: ' ';
    min-height: 16px;
    min-width: 16px;
    display: inline-block;
    margin-left: 8px;
}

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

.reset-validation {
    float: right;
}

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

.sidebar-content__inner {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    /* ReSharper disable once CssNotResolved */
    scrollbar-color: var(--color-background-dark) transparent;
    /* ReSharper disable once CssNotResolved */
    scrollbar-width: none;
}

.viewer-sidebar-pane .sidebar-content__inner::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.viewer-sidebar-pane .sidebar-content__inner::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.viewer-sidebar-pane .sidebar-content__inner {
	/* ReSharper disable once CssNotResolved */
    scrollbar-color: auto;
	/* ReSharper disable once CssNotResolved */
    scrollbar-width: thin;
    margin: 0 0 15px 0;
    background-color: #eee;
    padding: 8px;
}
.sidebar-content__inner:hover{
	/* ReSharper disable once CssNotResolved */
    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: font 0.5s ease, color 0.5s ease;
    font-size: 1.125rem;
    margin-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-sidebar-pane .sidebar-header h1 {
    color: #666;
    margin-left: 8px;
}

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

.sidebar-header.above::before {
    content: url(../img/chevron.svg);
    transform: scale(.85);
}
.sidebar-header.above:hover::before {
    content: url(../img/chevron.svg);
    transform: scale(1);
}
.sidebar-header.below::before {
    content: url(../img/chevron.svg);
    transform: rotate(180deg) scale(.85);
}
.sidebar-header.below:hover::before {
    content: url(../img/chevron.svg);
    transform: rotate(180deg);
}
.viewer-sidebar-pane .sidebar-header::before {
    margin-top: 0;
}
.viewer-sidebar-pane .sidebar-header.above::before {
    content: url(../img/chevron-black.svg);
}
.viewer-sidebar-pane .sidebar-header.below::before {
    content: url(../img/chevron-black.svg);
}
.sidebar-header.active h1 {
    font-size: 1.3125rem;
    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;
}

.timeline-viewer {
    background-color: #FFF;
    padding: 10px;
}

h2.view-timeline { cursor: pointer; }

.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 {
    padding-left: 20px;
    background: url('../img/paper-clip-small.png') no-repeat;
}
.feedback .have-attachment {
    background-color: #eee;
    border-radius: 5px;
    padding: 5px;
}
.feedback .app-form-attachment-clear {
    float: right;
    display: none;
    width: 20px;
    height: 20px;
    background: url('../img/cross-circle.png') no-repeat;
    border: 0;
    cursor: pointer;
}
.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: #eeeeee;
}

.popup, .dialog {
    /* ReSharper disable CssNotResolved */
    background-color: white;
    border-radius: 5px;
    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 {
    text-decoration: underline #666 dotted;
    color: #666;
}

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

.popup--draggable form {
    overflow: hidden;
}
.popup--close-button {
    padding-left: 24px;
    padding-right: 24px;
}

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

.popup__drag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    cursor: move;
    z-index: -1;
    background-color: rgba(240, 240, 240, 0);
}

.popup__close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url('../img/cross-circle.png') no-repeat 0 0;
}

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

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

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

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

/* BASE PREVIEW POPUP */
.popup--preview {
    max-width: 700px;
    max-height: 80vh;
}

.popup .preview {
    background-color: #eeeeee;
    vertical-align: bottom;
    max-width: 300px;
    max-height: 250px;
    cursor: pointer;
    border: 1px solid #333;
}

.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;
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 400;
    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;
}

.personal-menu {
    position: absolute;
    top: 40px;
    right: 0px;
    width: 240px;
    color: #000000;
}
.personal-menu__header {
    color: #666666;
}
.personal-menu__close {
    float: right;
    padding-right: 12px;
    cursor: pointer;
    color: #666666;
}
.personal-menu__close:hover {
    color: #000000;
}
.personal-menu__close::after {
    content: 'X';
}
.personal-menu__item, .personal-menu__header {
    line-height: 30px;
    height: 30px;
    width: 100%;
    padding: 0 0.5em;
    cursor: pointer;
}
.personal-menu__item:hover {
    background-color: var(--color-background-dark);
    color: #ffffff;
}
.personal-menu__item__link, .personal-menu__item__link:hover {
    display: block;
    color: inherit !important;
    text-decoration: none;
}

/* Media depend */
@media (max-width: 850px) 
{
    body {
        font-size: 1rem;
    }

    .area--startpage #searchpageBox {
        font-family: segoe ui light;
        top: 120px;
        font-size: 1.5rem;
        height: 40px;
        max-width: calc(100vw - 40px) !important;
    }
    .area--startpage .search-qr-code {
        top: -4px;
        height: 50px;
        width: 50px;
        background-size: 50%;
        padding: 10px;
        background-color: transparent;
    }
    .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;
    }

    .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;
    }
    .grid.dir-folder tr {
        font-size: 1rem;
        background-color: transparent !important;
        border-bottom: 1px solid #eee;
    }
    .grid.dir-folder {
        table-layout: auto;
    }
    .grid.dir-folder thead, .grid.dir-folder thead th {
        visibility: hidden;
        height: 1px;
        overflow: hidden;
        width: auto !important;
    }
    .grid.dir-folder thead th > * {
        display: none;
    }
    .grid__filter, .grid__view-selector {
        display: none !important;
    }
    .grid .icon--top {
        background-position: right center !important;
    }
    .grid .folder-viewer__select > * {
        display: none;
    }
    .grid.dir-folder td {
        padding: 10px;
    }

    .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 {
        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;
        right: 15px;
        padding-top: 5px;
        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;
    text-decoration: none;
    padding-right: 16px;
}
.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 {
    position: absolute;
    left: 30%;
    right: 0px;
    padding: 10px;
    opacity: 0.4;
    font-style: italic;
}

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

/* 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 {
    width: 20px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333 !important;
    font-weight: normal !important;
}
.ui-datepicker-calendar th {
    font-weight: normal;
}
.ui-datepicker-calendar td a:hover {
    background-color: #eee;
    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 {
    padding: 1em;
    background: #fff;
}

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

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

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

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

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

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

.tabs__radio {
    display: none;
}

.tabs__radio:checked + .tabs__label {
    background: #fff;
    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 {
    visibility: visible;
    overflow-y: auto;
    height: calc(100% - 28px);
}

/* 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;
}

.patterngroups-popup:not(.view-mode--advanced) .advanced {
    display: none;
}

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

.pattern-literals {
    height: 10em;
}

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

.capturegroup-hint--delimiter {
    background-color: #EEE;
}

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

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

/* WebPage widgets */

.grid-container {
    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];
    column-gap: 1rem;
    row-gap: 1rem;
    height: calc(100% - 10px);
    min-width: 1000px;
    min-height: 700px;
}

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

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

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

    .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 {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

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

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

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

    .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 {
    margin-top: 5px;
    font-size: 0.900rem;
}

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

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

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

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

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

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

.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;
    overflow: hidden;
}

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

.pagetemplate--piechart__legend ul {
    list-style-type: none;
    padding-left: 0;
}

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

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

.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 {
    stroke: var(--color-active-selection);
    fill: var(--color-active-selection);
}