/*
    Debug Information:

    userSkin loaded? true
    projectSkin used: ""

    Color definitions used:

    CIColor: 236,146,40
    baseColor: 255,255,255
    inputColor: 102,102,102
    separatorColor: 190,190,190
    overlayDarkColor: 0,0,0
    headerColor: 246,246,246
    headerFontColor: 102,102,102
    footerColor: 246,246,246
    footerFontColor: 102,102,102
    opaque: 0.75
    font-family: Helvetica, Segoe UI, Calibri, Verdana, Arial
    bgColor: 255,255,255
*/
/********************************************** INDEX ***********************************************
*
 * Looking for something specific? Just search for one of the following headings (ALL CAPS Words):
 *
 * BASIC (html, body, wo_basenode etc.)
 * UTIL CLASSES
 * OVERWRITES
 * COMPONENTS
 *      BUTTON (.wo-button)                     - Button with icon. Mostly used in toolbar
 *      INPUT (.wo-input)                       - Standard styling for input
 *      INPUT RESET (.wo-input-reset)           - Little X button in input to clear the input. (Parent has to have position: relative;)
 *      SELECT (.wo-select)                     - Standard styling for select
 *          .wo--inline                         - Modifier to display .wo-select inline with no border and width: auto (used in Measure-Toolform)
 *      COMBO BOX (.wo-combo)                   - Standard styling for combo-box
 *      TEXT BUTTON (.wo-text-button)           - Mostly used in queries and tools
 *      CHECKBOX (.wo-checkbox)                 - Standard styling of checkbox
 *      RADIO BUTTON (.wo-radio-button)         - Standard styling of radio buttons
 *      SLIDER (.wo-slider)                     - Standard styling of slider
 *      CONTENT LIST (.wo-content-list)         - Mostly used in queries and result.
 *          .wo-content-list--hoverable         - Modifier to allow hovering of children rows
 *          .wo-content-list__row               - Row element of .wo-content-list
 *          .wo-content-list__row--selected     - Modifier to set .wo-content-list__row as selected (active)
 *          .wo-content-list__row--highlight    - Modifier to highlight .wo-content-list__row
 *          .wo-content-list__row--no-hover     - Modifier to disable hovering for this specific .wo-content-list__row
 *          .wo-content-list__label             - Label element of .wo-content-list (always child of .wo-content-list__row)
 *          .wo-content-list__button            - Button element of .wo-content-list (always child of .wo-content-list__row)
 *      PREVIEW CONTAINER (.wo-preview)         - Used in basemaps and repmodels
 *          .wo-preview-container               - Main container
 *          .wo-preview-category-title          - Category title
 *          .wo-preview-item                    - One item (including text and image)
 *              .wo-preview-item--active        - Modifier to set item active
 *              .wo-preview-item__image         - Image element of a single item
 *              .wo-preview-item__text          - Text element of a single item
 *      UPLOADTEXT (.wo-uploadText)             - Upload field for edit
 *      UPLOAD (.wo-upload)                     - Upload field
 *      TOOL (.wo-tool)                         - Standard styling of a tool
 *          .wo-tool__form                      - Form element of tool
 *          .wo-tool__form-row                  - Row element of tool (usually includes a single field + label)
 *          .wo-tool__form-row--last            - Modifier to indicate last row (removes bottom margin)
 *      TAB HANDLE (.wo-tab-handle)             - Standard styling of a tab-handle (used in Downloads-Container and External GUI Modules)
 *          .wo-tab-handle--active              - Modifier to set item active
 *          .wo-tab-handle__title               - Title element of tab-handle
 *          .wo-tab-handle__close-button        - Close Button element of tab-handle
 *      GUI GROUP (.wo-guigroup)                - Standard border radius, shadow, background-color etc.
 *          .wo-guigroup--horizontal            - Modifier to add dividers between children (use .wo--no-divider class in child if you don't want a divider!)
 *          .wo-guigroup--vertical              - Modifier to add dividers between children (use .wo--no-divider class in child if you don't want a divider!)
 *          .wo-guigroup__header                - Used in toolform, query-container, etc.
 *
 *
 * ACTION CONTAINER
 * SPLASHSCREEN
 * OVERVIEW MAP
 * CUSTOMER INFO
 * USERMESSAGES
 * GUI AREA
 * TOOLBAR
 * ATTRIBUTION
 * REQUEST SPINNER
 * ERROR DISPLAY
 * RIGHT BOTTOM CONTAINER
 * EXTERNAL CALL TARGET
 * ADDITIONAL QUERY CONTAINER
 * LEGEND
 * DOWNLOADS CONTAINER
 * POPUP
 * SMALL GUI MENU
 * FULL SIZE STACK
 * GUI MODULES
 * TOC
 * TOOLS
 * TOOL SPECIFIC STYLING
 *      TOOL MEASURE
 *      TOOL MEETINGPOINT
 *      TOOL MAPTIP
 *      TOOL IDENTIFY
 *      TOOL CUSTOM
 *      TOOL COORSEARCH
 * DEBUG
 * MISCELLANEOUS
 *
 ****************************************************************************************************/
/* ---------------------------------- BASIC --------------------------------- */
html, body {
    -webkit-touch-action: none;
    -moz-touch-action: none;
    -ms-touch-action: none;
    /* MS IE10 */
    touch-action: none;
    -webkit-content-zooming: none;
    -moz-content-zooming: none;
    -ms-content-zooming: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: Helvetica, Segoe UI, Calibri, Verdana, Arial !important;
    font-size: 10px !important;
    user-select: none;
    overflow: hidden;
}

.mobile body {
    letter-spacing: 0;
    color: rgba(102,102,102, 1);
}

/* no box around focused buttons in popup; selected pane titles, etc. */
body > * :hover, body > * :focus {
    outline: none;
}

#wo_basenode {
    position: absolute;
    height: inherit;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 100;
    pointer-events: none;
}

#wo_layout {
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.mapcontainer {
    overflow: hidden;
}

#mainMapContainer {
    position: absolute;
    background-color: rgba(255,255,255, 1);
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#mainMapContainer .mainMap {
    position: absolute;
    background-color: white;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.ui-logger {
    position: absolute;
    z-index: 100;
    overflow-y: auto;
    height: 200px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
}


/* scrollbar on touch devices for overflow containers */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    background-color: rgba(255,255,255, 1);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(102,102,102, 0.75);
    box-shadow: 0 0 1px rgba(255,255,255, 1);
}

/* ------------------------------ UTIL CLASSES ------------------------------ */
/* ---------------- GENERAL ---------------- */
.hidden {
    display: none !important;
}

.map2D .only-3D {
    display: none;
}

.map3D .only-2D {
    display: none;
}

.offsite {
    position: absolute;
    top: 9999em;
    left: 9999em;
}

.invisible {
    visibility: hidden !important;
}

.animated {
    transition: none;
}

.not-animated {
    transition: none;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ------------------ MISC ----------------- */
.link {
    text-decoration: underline;
}

.fullheight {
    height: 100%;
}

.ui-lock {
    height: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10000;
}
.ui-lock .message {
    font-size: 1.75em;
    position: inherit;
    top: 45%;
    width: inherit;
}

.mandatory {
    line-height: 1em;
}

/* ------------ BACKGROUND COLOR ----------- */
.bg-1 {
    background-color: rgba(255,255,255, 1);
    background-image: none;
    opacity: 1;
}

.bg-1Checked {
    background-color: rgba(190,190,190, 1);
}

.bg-2 {
    background-color: rgba(236,146,40, 1);
    background-image: none;
    opacity: 1;
}

.bg-3 {
    background-color: rgba(255,255,255, 0.75);
}

/* --------------- FONT COLOR -------------- */
.fc-1 {
    color: rgba(102,102,102, 1);
}

.fc-2 {
    color: rgba(255,255,255, 1);
}

.fc-3 {
    color: rgba(236,146,40, 1);
}

/* ----------------- CURSOR ---------------- */
.pointer {
    pointer-events: all;
}

.noPointer {
    pointer-events: auto;
}

.hand {
    cursor: pointer;
}

.move {
    cursor: move;
}

/* ---------------- OVERFLOW --------------- */
.overflow-0 {
    overflow: hidden;
}

.overflow-x {
    overflow-y: hidden;
}

.overflow-y {
    overflow-x: hidden;
}

.overflow-auto {
    overflow: auto;
}

/* -------------- INDENTATION -------------- */
.indend-0 {
    padding-left: 0.25em;
}

.indend-1 {
    padding-left: 0.5em;
}

.indend-2 {
    padding-left: 1em;
}

.indend-3 {
    padding-left: 1.5em;
}

.indend-4 {
    padding-left: 2em;
}

/* ------------- WIDTH / HEIGHT ------------ */
.width-0 {
    width: 0;
}

.width-full {
    width: 100%;
}

.height-0 {
    height: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.height-0 .wo-content-list {
    display: none;
}

.height-full {
    height: 100%;
}

/* ----------------- BORDER ---------------- */
.border-1 {
    border: 1px solid rgba(190,190,190, 0.75);
}

.border-2 {
    border: 1px solid rgba(236,146,40, 1);
}

/* ------------------------------- OVERWRITES ------------------------------- */
/* how come we need this ?!? */
.esri-view {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.esri-widget, .esri-scale-bar__label {
    color: rgba(102,102,102, 1);
    font-family: Helvetica, Segoe UI, Calibri, Verdana, Arial;
    font-size: inherit;
}
.esri-widget, .esri-popup__main-container, .esri-popup__pointer-direction {
    background-color: rgba(255,255,255, 1);
}
.esri-widget *:focus {
    outline: none;
}
.esri-popup__header-container--button {
    cursor: pointer;
}
.esri-popup__header-container--button:hover {
    background-color: rgba(236,146,40, 1);
}
.esri-compass {
    border-radius: 0;
}

.esri-compass:hover {
    background-color: rgba(236,146,40, 1);
    color: rgba(102,102,102, 1);
}
.esri-scale-bar__line {
    background-color: rgba(102,102,102, .0);
}
.esri-view .esri-view-surface--inset-outline:focus::after {
    outline: none;
}

.esri-view-width-less-than-large .esri-popup__action-text {
    display: initial;
}
.dijitPopup{
    border: none !important;
}
.dijitComboBoxMenuPopup .dijitMenu, .dijitSelectMenu {
    background-color: rgba(255,255,255, 1);
    border: 1px solid rgba(190,190,190, 0.75) !important;
    border-radius: 2px;
    font-size: 1.2em;
}
.dijitSelectMenu .dijitMenuItem,
.dijitComboBoxMenuPopup .dijitMenuItem {
    display: block;
    height: 3em;
    line-height: 3em;
    margin-left: 1em;
    padding: 0 1em 0 0;
}
.dijitSelectMenu .dijitMenu--nomargin .dijitMenuItem{
    margin: 0;
}
.dijitSelectMenu .dijitMenu--nodivider .dijitMenuItem{
    border: none !important;
}
.dijitSelectMenu .dijitMenu--padding-left-right .dijitMenuItem{
    padding: 0 .5em;
}
.dijitSelectMenu .dijitMenuItem .dijitMenuItemLabel, .dijitComboBoxMenuPopup .dijitMenuItem .dijitMenuItemLabel {
    line-height: inherit;
}
.dijitSelectMenu .dijitMenuItem.dijitSelectSelectedOption *, .dijitComboBoxMenuPopup .dijitMenuItem.dijitSelectSelectedOption * {
    font-weight: normal;
    color: rgba(236,146,40, 1);
}
.dijitSelectMenu .dijitMenuItem.dijitMenuItemSelected, .dijitSelectMenu .dijitMenuItem .dijitMenuItemHover,
.dijitComboBoxMenuPopup .dijitMenuItem.dijitMenuItemSelected, .dijitComboBoxMenuPopup .dijitMenuItem .dijitMenuItemHover,
.dijitMenuPopup .dijitMenuItem.dijitMenuItemHover , .dijitMenuPopup .dijitMenuItem .dijitMenuItemHover  {
    background-color: transparent;
    color: rgba(0,0,0, 1);
}
.dijitSelectMenu .dijitMenuItem:not(:last-child),
.dijitComboBoxMenuPopup .dijitMenuItem:not(.last-in-row) {
    border-bottom: 1px solid rgba(190,190,190, 0.75);
}
.wo-button.query-date-hierarchy{
    display: inline-flex;
}
.mblValuePicker{
    height: auto;
    display: inline-block;
}
.mblValuePickerSlot{
    width: 4em !important;
}
.mblValuePicker > .mblValuePickerSlot:first-child{
    margin-left: 0;
}
.mblValuePickerSlotButton{
    background: none;
    border: 0;
    height: 2em;
}
.mblValuePickerSlotIcon.fonticon.tool-button{
    font-size: 2em;
}
.mblValuePickerSlotIcon{
    bottom: 0;
    top: 0;
}
.mblValuePickerSlotIcon > div{
    display: none;
}
.mblValuePickerSlotInputArea{
    background: none;
    border-color: rgba(190,190,190, 1);
    height: 3em;
    margin: 10px 0;
}
.mblValuePickerSlotInput{
    font-size: 1em;
}

/* REMOVE X from IE inputs */
input::-ms-clear {
    display: none;
}

/* ------------------------------- COMPONENTS ------------------------------- */
/* ---------- BUTTON (.wo-button) ---------- */
.wo-button {
    pointer-events: all;
    background-image: none;
    background-color: transparent;
    border: none;
    color: rgba(102,102,102, 1);
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    height: 48px;
    width: 48px;
}
.wo-button.mblToggleButtonChecked:after {
    display: none;
}
.wo-button.mblToggleButtonChecked, .wo-button.mblToggleButtonSelected {
    background-image: none;
    color: rgba(102,102,102, 1);
}
.wo-button.esri-widget--button:hover {
    background-color: transparent;
    color: rgba(102,102,102, 1);
}
.wo-button.tool-buttonChecked, .wo-button.active, .toolgroup .wo-tool-button .wo-button-buttonChecked {
    color: rgba(236,146,40, 1) !important;
}
.wo-button.disabled {
    color: rgba(102,102,102, 0.3);
}

/* ----------- INPUT (.wo-input) ---------- */
.wo-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-opacity: 1;
    border: 1px solid rgba(190,190,190, 0.75);
    color: rgba(102,102,102, 1);
    height: 28px;
    width: 100%;
    font-size: 12px;
    box-sizing: border-box;
    background-color: rgba(255,255,255, 1);
    padding: 0 0.5em;
    position: relative;
}

.wo-input[disabled] {
    color:rgba(102,102,102, 0.75);
}

/* ---- INPUT RESET (.wo-input-reset) ----- */
/*
 Little X button in input to clear the input.
 PARENT HAS TO HAVE position: relative;
*/
.wo-input-reset {
    position: absolute;
    color: rgba(102,102,102, 1);
    top: 0;
    right: 0;
    padding: 0;
    background-image: none;
    border: none;
    font-size: 8px;
}

/* -------- SELECT BOX (.wo-select) -------- */
.wo-select {
    background-color: rgba(255,255,255, 1);
    border: 1px solid rgba(190,190,190, 0.75);
    box-sizing: border-box !important;
    color: rgba(102,102,102, 1);
    font-size: 12px;
    height: 28px;
    width: 100%;
}
.wo-select .dijitSelectLabel {
    padding-left: 0.5em;
}
.wo-select *, .wo-select td.dijitButtonContents {
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: none;
}
.wo-select td:not(.dijitDownArrowButton) {
    width: 100%;
}
.wo-select td.dijitDownArrowButton .dijitArrowButtonInner {
    display: none;
}
.wo--inline .wo-select {
    border: none;
    width: auto;
}
.wo--inline .wo-select td:not(.dijitDownArrowButton) {
    width: auto;
}
.wo--inline label{
    margin: 0!important;
    vertical-align: middle;
}

/* --------- COMBO BOX (.wo-combo) -------- */
.wo-combo {
    border: 1px solid rgba(190,190,190, 0.75);
    height: 28px;
    font-size: 12px;
    box-sizing: border-box;
    background-color: rgba(255,255,255, 1);
    width: 100%;
}
.wo-combo .dijitInputContainer {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 0.5em;
}
.wo-combo * {
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

/* ---- TEXT BUTTON (.wo-text-button) ----- */
/* Mostly used in queries and tools */
.wo-text-button {
    border: 1px solid rgba(190,190,190, 0.75);
    background-color: transparent;
    margin: 0;
    margin-right: 1.25em;
    font-size: 1.2em;
    font-weight: normal;
    color: rgba(102,102,102, 1);
    text-shadow: none;
}
.wo-text-button:hover {
    border-color: rgba(0,0,0, 1);
    color: rgba(0,0,0, 1);
}
.wo-text-button:disabled, .wo-text-button.disabled {
    opacity: 0.2;
    pointer-events: none;
}

/* ------- CHECKBOX (.wo-checkbox) -------- */
.wo-checkbox.mblCheckBox {
    background: none;
    border: 1px solid rgb(102,102,102);
    border-radius: 0;
    height: 1.5em;
    margin: -0.5em 3px 0.2em 0;
    width: 1.5em;
}
.wo-checkbox:checked:after {
    height: 0.8em;
    left: 0.4em;
    border-width: 0.2em;
    border-color: rgba(102,102,102, 1);
}
.wo-checkbox.mblCheckBoxSelected, .wo-checkbox.mblCheckBoxSelected:checked {
    background-image: none;
}
.wo-checkbox.mblCheckBoxSelected::after, .wo-checkbox.mblCheckBoxSelected:checked::after {
    border-color: rgba(102,102,102, 1);
}
.time-checkbox-container .wo-checkbox.mblCheckBox{
    transform: none;
    -webkit-transform: none;
}

/* ---- RADIO BUTTON (.wo-radio-button) --- */
.wo-radio-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 18px;
    border-color: rgba(102,102,102, 1);
    margin-bottom: 4px;
    background-image: none;
}
.wo-radio-button.mblRadioButtonChecked, .wo-radio-button:checked {
    background-image: none;
}
.wo-radio-button.mblRadioButtonChecked::after, .wo-radio-button:checked::after {
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    background-color: rgba(102,102,102, 1);
    border-radius: 6px;
    border-style: none;
    transform-origin: initial;
    transform: initial;
    width: auto;
    height: auto;
}

/* --------- SLIDER (.wo-slider) ---------- */
.wo-slider.mblSlider {
    margin: 0.75em 1em;
    background: rgba(255,255,255, 1);
    border: 1px solid rgba(190,190,190, 0.75);
    border-bottom-color: rgba(190,190,190, 0.75);
    width: auto;
}
.wo-slider .mblSliderProgressBar {
    background: rgba(255,255,255, 1);
}
.wo-slider .mblSliderHandle {
    background: rgba(255,255,255, 1);
    line-height: 18px;
    text-align: center;
    width: 25px;
    border: 1px solid rgba(190,190,190, 0.75);
    border-bottom-color: rgba(190,190,190, 0.75);
}

/* --- CONTENT LIST (.wo-content-list) ---- */
/* Mostly used in queries and result. */
.wo-content-list {
    overflow-y: auto;
}
.fullsize-content .wo-content-list {
    overflow-y: hidden;
}
.wo-content-list__row {
    border-bottom: 1px solid rgba(190,190,190, 0.75);
    font-size: 1em;
    display: flex;
    color: rgba(102,102,102, 1);
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
}
.wo-content-list__row:last-child {
    border-bottom: none;
}
.wo-content-list__row.wo-content-list__row--highlight {
    color: rgba(0,0,0, 1);
}
.wo-content-list__row.wo-content-list__row--selected {
    color: rgba(236,146,40, 1);
}
.wo-content-list__row.row-indend {
    left: .5em;
    width: calc(100% - .5em);
}
.wo-content-list__row.mblAccordionTitle {
    background-color: transparent;
    border-top: none;
}
.wo-content-list__label {
    /* Text in a content-list row */
    line-height: calc(1em + 2px);
    padding-top: calc(0.75em + 2px);
    padding-bottom: calc(0.75em + 2px);
}
.wo-content-list__button {
    /* Buttons in a content-list row (like arrows) */
    margin-left: auto;
    font-size: 2em;
    margin-right: 0.5em;
}
.wo-content-list.wo-content-list--hoverable .wo-content-list__row:not(.wo-content-list__row--no-hover):hover {
    color: rgba(0,0,0, 1);
}

/* --- PREVIEW CONTAINER (.wo-preview) ---- */
/* Used in basemaps and repmodels */
.wo-preview-container {
    font-size: 1.2em;
    margin: 0;
    max-width: 360px;
    position: absolute;
}
.wo-preview-category-title {
    margin: 0.5em 1em;
    padding: 0.25em 0;
    font-size: 1.2em;
    width: calc(100% - 2em);
    border-bottom: 1px solid rgba(190,190,190, 0.75);
}
.wo-preview-item {
    padding: 1em 1em;
    width: 90px;
    vertical-align: top;
}
.wo-preview-item__image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    height: 60px;
}
.wo-preview-item__text {
    color: rgba(102,102,102, 1);
    text-align: center;
    word-wrap: break-word;
}
.wo-preview-item:hover .wo-preview-item__image {
    border-color: rgba(0,0,0, 1);
}
.wo-preview-item:hover .wo-preview-item__text {
    color: rgba(0,0,0, 1);
}
.wo-preview-item--active .wo-preview-item__image, .wo-preview-item--active:hover .wo-preview-item__image {
    border-width: 2px;
    border-color: rgba(236,146,40, 1);
}
.wo-preview-item--active .wo-preview-item__text, .wo-preview-item--active:hover .wo-preview-item__text {
    color: rgba(236,146,40, 1);
}

/* ----------- UPLOADTEXT (.wo-uploadText) ---------- */
.wo-uploadText {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-opacity: 1;
    border: 0;
    color: rgba(102,102,102, 1);
    height: 28px;
    width: 100%;
    font-size: 12px;
    box-sizing: border-box;
    background-color: rgba(255,255,255, 1);
    padding: 0;
    position: relative;
}

.wo-uploadText[disabled] {
    color:rgba(102,102,102, 1);
    background-color: rgba(255,255,255, 1);
}
/* ----------- UPLOAD (.wo-upload) ---------- */
.wo-upload-row{
    display: flex;
}
.wo-upload{
    background-color: rgba(255,255,255, 1);
    box-sizing: border-box;
    color: rgba(102,102,102, 1);
    font-size: 1.2em;
    height: 29px;
    line-height: 27px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    width: calc(100% - 120px);
}

/* ----------- TOOL (.wo-tool) ------------ */
.wo-tool {
    overflow-y: auto;
}
.wo-tool__form {
    box-sizing: border-box;
    padding: 1.5em;
}
.wo-tool__form-row {
    width: 100%;
}
.wo-tool__form-row:not(.wo-tool__form-row--last) {
    margin-bottom: 1em;
}
.wo-tool__form-row > label,
.wo-tool__form-row > span:not(.wo-text-button),
.time-checkbox-container > label {
    display: inline-block;
    font-size: 1.2em;
    margin-bottom: 0.5em;
}
.wo-tool__form .wo-font-button.wo-font-button {
    font-size: 2.5em;
    margin: 0 0.25em;
    vertical-align: middle;
}
.wo-tool__form-list-row{
    border-bottom: 1px solid rgba(190,190,190, 0.75);
    line-height: 30px;
    width: 100%;
}
.wo-tool__form-list-row.lastrow{
    /* last row in category shoudn't have a border */
    border-bottom: none;
}
.wo-tool__form-list-row > span{
    font-size: 1.2em;
}
.wo-tool__form-row--last .mblToolBarButton  {
    margin-right: .5em;
    margin-left: .5em;
    margin-bottom: .5em;
}

/* ----- TAB HANDLE (.wo-tab-handle) ------ */
.wo-tab-handle {
    border: 0 solid rgba(190,190,190, 0.75);
    border-right-width: 1px;
    /* not directly in border property because of rtl */
    display: inline-flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 1em;
    width: 150px;
    padding-right: 1.5em;
    padding-left: auto;
}
.wo-tab-handle--active, .wo-tab-handle:hover {
    color: rgba(102,102,102, 1);
    background: rgba(246,246,246, 1);
}
.wo-tab-handle__title {
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.wo-tab-handle__close-button {
    position: absolute;
    right: 2px;
    font-size: 1.75em;
}
.colorpicker-container .wo-tab-handle__close-button {
    top: 5px;
}
/* ------- GUI GROUP (.wo-guigroup) -------- */
.wo-guigroup {
    background-color: rgba(255,255,255, 1);
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.wo-guigroup:not(.wo-guigroup--no-margin) {
    margin: 10px;
}
.wo-guigroup--horizontal {
    /* horizontal menu bar (i. e. toolbar) */
    height: 48px;
}
.wo-guigroup--horizontal > *:not(.wo--no-divider)::before,
.wo-guigroup.context-form > *:not(.wo--no-divider)::before {
    /* use :before pseudo element as divider (use .wo--no-divider class if you don't want a divider!) */
    width: 1px;
    height: 80%;
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    background-color: rgba(190,190,190, 0.75);
}
.wo-guigroup--horizontal > *:not(.wo--no-divider):last-child::before {
    display: none;
}
.wo-guigroup--vertical {
    /* vertical menu bar (i. e. nav components) */
    width: 48px;
}
.wo-guigroup--vertical > *:not(.wo--no-divider)::before {
    /* use :before pseudo element as divider (use .wo--no-divider class if you don't want a divider!) */
    width: 80%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    background-color: rgba(190,190,190, 0.75);
}
.wo-guigroup--vertical > *:not(.wo--no-divider):last-child::before {
    display: none;
}
.wo-guigroup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    font-size: 1.2em;
    background-color: rgba(246,246,246, 1);
    color: rgba(102,102,102, 1);
}
.wo-guigroup__header > * {
    color: inherit;
    display: inline-flex;
}
.wo-guigroup__header > *:first-child {
    display: inline-flex;
    align-items: center;
    padding-left: 1.25em;
}

/* popup - used in context menu, Repmodel/Project-Switching/Basemap-List */
.dijitMenuPopup .wo-guigroup,
.fullsizestack .wo-guigroup {
    margin: 0;
}
.dijitMenuPopup .wo-guigroup.dijitMenuTable,
.fullsizestack .wo-guigroup.dijitMenuTable {
    min-width: 166px;
    font-size: 1.2em;
}
.dijitMenuPopup .wo-guigroup.dijitMenuTable .dijitMenuItem,
.fullsizestack .wo-guigroup.dijitMenuTable .dijitMenuItem {
    height: 3em;
}
.dijitMenuPopup .wo-guigroup.dijitMenuTable .dijitMenuItem.dijitMenuItemSelected,
.fullsizestack .wo-guigroup.dijitMenuTable .dijitMenuItem.dijitMenuItemSelected {
    background-color: transparent;
    color: rgba(0,0,0, 1);
}
.dijitMenuPopup .wo-guigroup.dijitMenuTable .dijitMenuItem.selected,
.dijitMenuPopup .wo-guigroup.dijitMenuTable .dijitMenuItem.selected:hover,
.fullsizestack .wo-guigroup.dijitMenuTable .dijitMenuItem.selected,
.fullsizestack .wo-guigroup.dijitMenuTable .dijitMenuItem.selected:hover {
    color: rgba(236,146,40, 1) !important;
}
.dijitMenuPopup .wo-guigroup.dijitMenuTable .dijitMenuItem .dijitMenuItemLabel,
.fullsizestack .wo-guigroup.dijitMenuTable .dijitMenuItem .dijitMenuItemLabel {
    padding: 0.5em;
}
.metadata-menuitem .dijitMenuItemIconCell{
    width: 25px;
    padding-left: 0.5em;
}
.metadata-menuitem .dijitMenuItemIconCell .fonticon,
.fullsize-metadata .fonticon{
    font-size: 2em;
}
.metadata-menuitem .dijitMenuItemLabel{
    /* max-width of popup must be 360px (-> preview) */
    max-width: 317px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* ---------------------------- ACTION CONTAINER ---------------------------- */
#actionContainer {
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 5;
}
#actionContainer > * {
    height: auto;
    pointer-events: all;
    width: 400px;
}

#queryContainer #FTSContainer {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 1);
}
#queryContainer #FTSContainer #ftsQueryTable {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}
#queryContainer #FTSContainer #ftsQueryTable #queryToggleButton {
    border: 0 solid rgba(190,190,190, 1);
    border-right-width: 1px;
    /* not directly in border property because of rtl */
    margin-right: 1em;
}
#queryContainer #FTSContainer #ftsQueryTable #ftsIndices {
    /* will be shown by .fts-thematic #ftsIndices */
    display: none;
}
#queryContainer #FTSContainer #ftsQueryTable #ftsIndices .wo-select {
    border-right-width: 0;
}
#queryContainer #FTSContainer #ftsQueryTable #ftsInput {
    flex: 1;
    position: relative;
}
#queryContainer #queryListButton {
    display: none;
}

#resultContainer,
#storedQueriesContainer {
    padding-left: 1.5em;
}

#storedQueriesContainer .query-handle {
    /* .query-handle are the rows when selecting the query and convert to the breadcrumb when active */
    font-size: 1.2em;
}
#storedQueriesContainer .query-handle.lastrow:not(.active) {
    /* last row in category shoudn't have a border, but when active this is the breadcrumb (it needs border) */
    border-bottom: none;
}
#storedQueriesContainer .query-handle.active:hover {
    /* disable hovering when query-hanlde is breadcrumb */
    color: rgba(102,102,102, 1);
}
#storedQueriesContainer .query-handle .query-icon {
    height: 24px;
    width: 24px;
    padding-right: 0.25em;
}
#storedQueriesContainer .query-handle .query-icon div {
    width: 100%;
    height: 100%;
    background-color: currentColor;
    background-repeat: no-repeat;
    background-size: contain;
}
#storedQueriesContainer .query-handle .breadcrumb-row {
    box-sizing: border-box;
    display: flex;
    font-style: italic;
    flex-wrap: wrap;
    overflow: auto;
    padding-left: 0.25em;
    width: 100%;
}
.breadcrumb-row > *{
    display: inline-block;
    word-break: break-all;
}
#storedQueriesContainer .query-handle .breadcrumb-row .breadcrumb-clickable {
    font-style: normal;
    text-decoration: underline;
}
#storedQueriesContainer .query-handle .breadcrumb-row .breadcrumb-clickable:hover {
    color: rgba(0,0,0, 1);
}
#storedQueriesContainer .query-handle .breadcrumb-row .breadcrumb-splitter {
    padding: 0 0.25em;
}
#storedQueriesContainer .query-content {
    padding: 5px 0;
    /*.query-content encloses the actual fields (incl. label) etc. */
}
#storedQueriesContainer .query-content .field .wo-content-list {
    font-size: 1.2em;
}
#storedQueriesContainer .query-content .field .field-handle {
    margin: 0.7em 0;
    padding-right: 1.5em;
    padding-left: 0.25em;
    font-size: 1.2em;
}
#storedQueriesContainer .query-content .group .field .field-handle{
    padding-right: 0;
}
#storedQueriesContainer .query-content .field .field-handle label {
    min-height: 2em;
    line-height: 2em;
}
#storedQueriesContainer .query-content .field .field-handle .query-field {
    /* for clear-button in inputs */
    position: relative;
}
#storedQueriesContainer .query-content .field .field-handle.hierarchic.input_list {
    /* TODO: Replace with .hidden */
    display: none;
}
#storedQueriesContainer .query-content .field .field-handle.hierarchic.input_list_big {
    /* TODO: Replace with .hidden */
    display: none;
}

.storedquery .concatenator{
    opacity: 0.7;
}
.storedquery .group{
    border: 1px solid rgba(190,190,190, 1);
    border-radius: 5px;
    margin: 5px 0;
    padding: 0 5px;
    width: calc( 100% - 2.5em );
}
#storedQueriesContainer .query-content .button-row {
    margin: 1.2em 0.25em;
}

#resultContainer .result-container-title > div {
    /* TODO: remove unnecessary div */
    border-bottom: 1px solid rgba(190,190,190, 0.75);
    font-size: 1.2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#resultContainer .result-container-title > div.has-back-to-multi .wo-content-list__label {
    display: flex;
}
#resultContainer .result-container-title > div.has-back-to-multi .breadcrumb-clickable {
    font-style: normal;
    text-decoration: underline;
}
#resultContainer .result-container-title > div.has-back-to-multi .breadcrumb-clickable:hover {
    color: rgba(0,0,0, 1);
}
#resultContainer .result-container-title > div.has-back-to-multi .breadcrumb-splitter {
    padding: 0 0.25em;
}
#resultContainer .wo-content-list {
    font-size: 1.2em;
}
#resultContainer .show-all {
    justify-content: flex-end;
}

#resultContainer .show-all .wo-content-list__button {
    margin-left: 0;
}

#resultContainer .show-all .wo-content-list__label {
    margin-right: auto;
}

#resultContainer .custom-icon {
    padding: 0 1em;
}
.active-storedqueriescontainer .active-result .storedquery,
.inactive-storedqueriescontainer #resultContainer,
.shortcut-result .result-container .content-list,
.inactive-storedqueriescontainer #storedQueriesContainer {
    /* TODO: Replace with .hidden */
    display: none !important;
}

.hidden-storedqueriescontainer .query-label,
.hidden-storedqueriescontainer #storedQueriesContainer {
    /* TODO: Replace with .hidden */
    display: none !important;
}

.hidden-ftscontainer #FTSContainer {
    /* TODO: Replace with .hidden */
    display: none !important;
}

.hidden-ftscontainer #queryListButton,
.active-sqContainer #queryListButton,
.layerresult #queryListButton {
    /* show x when fts is hidden or stored query is active */
    display: flex !important;
}
.layerresult #queryToggleButton{
    display: none;
}

.fts-thematic #ftsIndices {
    /* TODO: Replace with .hidden */
    display: inline-table !important;
}

.query-handle.filtering-inactive .fi-filterquery-reset {
    /* TODO: Replace with .hidden */
    display: none;
}
#ftsIndexSelect.wo-select .dijitSelectLabel {
    width: 80px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------ SPLASHSCREEN ------------------------------ */
#splashscreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
}
#splashscreen.splash-fade-in {
    opacity: 1;
    transition: opacity 1.5s linear;
    visibility: visible;
}
#splashscreen.splash-fade-out {
    opacity: 0;
    transition: visibility 0s 0.75s, opacity 0.75s linear;
    visibility: hidden;
}
#splashimage {
    height: 100px;
    padding: 40px;
    margin-top: 100px;
    background: url(../images/splashscreen_flexjs.png) no-repeat center center;
}
#initmessage {
    color: red;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    display: none;
}
#loadinfo {
    position: absolute;
    left: 50%;
    width: 300px;
    margin-left: -200px;
    display: table-row;
}
#loadanimation_container {
    display: table-cell;
}
#loadanimation_container #load {
    width: 60px;
    height: 60px;
    animation: loadanimation 1s ease-in-out 20;
    background-image: url("../images/load.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
#loadmessage {
    display: table-cell;
    vertical-align: top;
    padding-left: 20px;
}
.load-msg-id {
    font-size: 1.2em;
    white-space: nowrap;
    color: rgba(102,102,102, 1);
}
.load-msg-id-done {
    color: rgba(236,146,40, 1);
}
@keyframes loadanimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media only screen and (max-width: 400px) {
     .splashscreen #splashimage {
         margin: 0 10px;
         padding: 0;
         padding-bottom: 40px;
         background-size: contain;
         margin-top: 100px;
     }

     #loadinfo {
        position: absolute;
        left: 0;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #loadmessage {
        padding-left: 10px;
    }

    .load-msg-id {
        white-space: normal;
    }
 }

/* ------------------------------ NOT SUPPORTED SCREEN ------------------------------ */
.notsupportedscreen {
    z-index: 21000;
    font-size: 11pt;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: 255,255,255;
    padding-top: 20px;
}
.notsupportedscreen .important {
    font-weight: bold;
}

#notsupportedscreen_javascript{
    margin-bottom: 10px;
}
#notsupportedscreen.no-script > div{
    display: none;
}


/* ------------------------------ OVERVIEW MAP ------------------------------ */
#overviewContainer {
    position: relative;
}
#overviewContainer .fi-hide {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255, 1);
    margin: 1px;
    font-size: 24px;
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: rgba(190,190,190, 1);
}
.mapoverview-boxdiv {
    border: 2px solid rgb(236,146,40);
    display: none;
    position: absolute;
}
.mapoverview-boxoverlay {
    display: none;
    background-color: rgba(0,0,0,0.25);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/* ----------------------------- CUSTOMER INFO ------------------------------ */
#customerInfo_form {
    vertical-align: bottom;
    margin-bottom: 10px;
}
#customerInfo_form img {
    max-width: 140px;
    max-height: 90px;
}
#customerInfo_form > div {
    font-size: 1.2em;
    margin: 1em 1em 1em 0;
    text-align: center;
    width: 100%;
}
/* ------------------------------ USERMESSAGES ------------------------------ */
/* TODO: remove unnecessary div */
#UserMessageContainer {
    color: #666666;
    font-size: 1.2em;
    left: 420px;
    margin-top: 0;
    position: absolute;
    top: 10px;
    z-index: 5010;
}
#UserMessageContainer > div {
    box-sizing: border-box;
    margin-bottom: 2px;
    overflow-wrap: break-word;
    padding: 6px 15px 6px 15px;
    transition: all 300ms ease-in-out;
}
#UserMessageContainer > div.info {
    background-color: rgba(102, 255, 204, 0.9);
}
#UserMessageContainer > div.warn {
    background-color: rgba(255, 204, 153, 0.9);
}
#UserMessageContainer > div.error {
    background-color: rgba(255, 102, 102, 0.9);
}

/* -------------------------------- GUI AREA -------------------------------- */
#guiarea {
    position: absolute;
    right: 0;
    top: 60px;
}

.no-legend #staticLegendBtn,
.no-metadata #metaDataBtn {
    /* TODO: Replace with .hidden */
    display: none;
}

/* --------------------------------- TOOLBAR -------------------------------- */
.toolgroup, .small-menu-btn, .small-menu-container, .itemsmenu.languagelist {
    background-color: rgba(255,255,255, 1);
}
.toolgroup .wo-button, .small-menu-container > *, .small-menu-container .wo-button, .itemsmenu.languagelist {
    color: rgb(102,102,102);
}
#toolbarContainer {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0 60px 0 0;
    display: flex;
    flex-direction: row-reverse;
}
#toolbarContainer > .wo-guigroup {
    display: flex;
}
#toolbar-hide{
    margin-right: 0;
}
#toolbar-toggler {
    width: 25px;
}
body:not(.toolbar-hide-displayed) #toolbar-hide,
.collision-toolbar #toolbar-toggler{
    display: none;
}
.collision-toolbar #toolbar-hide{
    margin: 0;
}
/* ------------------------------ ATTRIBUTION ------------------------------- */
#attribution {
    position: absolute;
    background-color: rgba(255,255,255, 0.75);
    bottom: 0;
    right: 0;
    font-size: 1em;
}
#attribution > * {
    padding: 5px;
}
#attribution .esri-attribution__powered-by {
    display: none;
}
#attribution .esri-attribution__sources {
    max-width: 250px;
    align-self: auto;
    flex: auto;
}
#attribution .esri-scale-bar {
    padding: 0 10px;
    width: auto;
}
#attribution .esri-scale-bar .esri-scale-bar__bar-container {
    line-height: 1em;
}
#attribution .esri-scale-bar .esri-scale-bar__bar-container--line:last-child {
    align-items: flex-end;
}
#attribution .esri-scale-bar .esri-scale-bar__label {
    font-size: 1em;
    padding: 0.5em 0 0.5em 0;
}
#attribution .esri-scale-bar .esri-scale-bar__label-container {
    display: inline-block;
    left: 5px;
    width: auto;
}
#attribution .esri-scale-bar__line--top:before, #attribution .esri-scale-bar__line--bottom:before {
    border-right:0;
}
#attribution .coord-display {
    min-height: 1em;
    white-space: nowrap;
}
#attribution .copyright-bing {
    min-width: 120px;
    min-height: 24px;
    margin-top: 2px;
    background: rgba(255,255,255, 0.5) url(../../pub/client_flexjs/images/bing_maps_logo.png) no-repeat center center;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ----------------------------- REQUEST SPINNER ---------------------------- */
.requestcounter-container {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    margin: 5px;
}

.requestcounter {
    width: 60px;
    height: 60px;
}

.requestcounter div {
    position: absolute;
    width: inherit;
    height: inherit;
}

.requestcounter .rc-animation {
    background-image: url("../images/load.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.requestcounter .rc-text {
    font-size: 1.5em;
    text-align: center;
    line-height: 60px;
}

.requestcounter .loading {
    animation: loadanimation 1s ease-in-out infinite;
}

/* ----------------------------- ERROR DISPLAY ------------------------------ */
.error-display {
    border: 1px solid rgba(190,190,190, 0.75);
    margin: 25px auto;
    width: 33%;
    padding: 10px;
}
.error-display .errorLabel,
.error-display .preview {
    font-size: 1.2em;
}

/* ------------------------- RIGHT BOTTOM CONTAINER ------------------------- */
#rightBottomContainer {
    right: 0;
    bottom: 0;
    margin-bottom: 26px;
    position: absolute;
}
#rightBottomContainer > * {
    display: inline-block;
}
.mapgroup, .overview-container, .itemsmenu, #basemapsPreview, #repmodelsPreview, #overviewContainer .fi-hide {
    background-color: rgba(255,255,255, 1);
}
.mapgroup .wo-button, .itemsmenu, #overviewContainer .fi-hide{
    color: rgba(102,102,102, 1);
}
/* -------------------------- EXTERNAL CALL TARGET -------------------------- */
#to_weboffice {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    border-top: 2px dashed red;
}

/* ---------------------- ADDITIONAL QUERY CONTAINER    ----------------------- */
#additionalQueryContainer {
    padding-left: 1.5em;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(190,190,190, 0.75);
    overflow: hidden;
    font-size: 1.2em;
}
#additionalQueryContainer .wo-content-list.query-list{
    max-height: inherit;
}

/* --------------------------------- LEGEND --------------------------------- */
#legendView {
    position: absolute;
}

/* -------------------------- DOWNLOADS CONTAINER --------------------------- */
#DownloadsContainer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 5000;
    display: flex;
    flex-direction: column;
}
#DownloadsContainer .title-bar {
    height: 48px;
    border-bottom: 1px solid rgba(190,190,190, 0.75);
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    font-size: 1.2em;
}
#DownloadsContainer .title-bar .download-tabnode {
    position: absolute;
    top: 0;
    height: 100%;
}
#DownloadsContainer .title-bar .download-tabnode .wo-tab-handle:only-child {
    width: auto;
    max-width: 100%;
}
#DownloadsContainer .title-bar .download-tabnode .wo-tab-handle:first-child:nth-last-child(2),
#DownloadsContainer .title-bar .download-tabnode .wo-tab-handle:first-child:nth-last-child(2) ~ .wo-tab-handle{
    width: auto;
    max-width: 50%;
}
#DownloadsContainer .title-bar .download-tabnode .wo-tab-handle:first-child:nth-last-child(3),
#DownloadsContainer .title-bar .download-tabnode .wo-tab-handle:first-child:nth-last-child(3) ~ .wo-tab-handle{
    width: auto;
    max-width: 30%;
}
#DownloadsContainer .title-bar .download-tabnode .wo-tab-handle:first-child:nth-last-child(4),
#DownloadsContainer .title-bar .download-tabnode .wo-tab-handle:first-child:nth-last-child(4) ~ .wo-tab-handle{
    width: auto;
    max-width: 25%;
}
#DownloadsContainer .title-bar #DownloadBtnNode {
    float: right;
    display: flex;
}
#DownloadsContainer .title-bar #DownloadBtnNode > * {
    background-color: rgba(255,255,255, 1);
    z-index: 10;
    border: 0 solid rgba(190,190,190, 1);
    border-left-width: 1px;
}
#DownloadsContainer .title-bar #DownloadBtnNode .stepper {
    display: inline-flex;
    align-items: center;
}
#DownloadsContainer .title-bar #DownloadBtnNode .stepper #DownloadTabCountLabel {
    font-size: 1.2em;
}
#DownloadsContainer .content-node {
    align-items: center;
    display: flex;
    flex: 1;
    height: calc(100% - 48px);
    justify-content: center;
}
#DownloadsContainer .content-node iframe {
    border: none;
}
#DownloadsContainer .content-node > div{
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 1.5em;
}
#DownloadsContainer .content-node .wo-text-button {
    font-size: 1em;
}

.measure-3d-result {
    background-color: rgba(255,255,255, 1);
    overflow: auto;
}
.measure-3d-result > table {
    padding: 0.5em;
    width: 100%;
}
.measure-3d-result .img-row {
    padding: 20px 0;
    text-align: center;
}
.measure-3d-result img {
    /* 100vw instead of % because of IE11 bug */
    max-width: calc(100vw - 60px);
    height: auto;
    width: auto;
}

.measure-3d-result .label,
.measure-3d-result .value {
    text-align: right;
    padding: 0.25em;
    width: 50%;
}
.measure-3d-result .value {
    text-align: left;
}
/* ---------------------------------- POPUP --------------------------------- */
.esri-view-height-medium .esri-popup__main-container{
    max-height: 300px;
}
.height-small .esri-popup__main-container{
    max-height: 200px;
}
.height-xsmall .esri-popup__main-container{
    max-height: 150px;
}
.esri-popup--shadow {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.esri-popup .back-to-multi,
.esri-popup .back-to-result {
    font-size: 2em;
    padding-left: 15px;
}
.esri-popup .esri-popup__collapse-icon,
.esri-popup .back-to-result{
    display: none;
}
.esri-popup.open-menu .back-to-result {
    display: inherit;
}
.esri-popup--is-docked-bottom-left, .esri-popup--is-docked-bottom-right {
    margin: 10px;
}
.esri-popup--is-docked-bottom-left .esri-popup__main-container, .esri-popup--is-docked-bottom-right .esri-popup__main-container {
    bottom: 26px;
    max-height: 300px;
    width: 400px;
}
.esri-popup-small-inactive-btn {
    align-items: center;
    display: none;
    height: 50px;
    line-height: 1.2em;
    padding: 0;
    width: 50px;
}
.esri-popup__header {
    background-color: rgba(246,246,246, 1);
    color: rgba(102,102,102, 1);
    height: 50px;
    display: flex;
    align-items: center;
}
.esri-popup__header .esri-popup__header-title {
    font-size: 1em;
    font-weight: normal;
}
.esri-popup__header .esri-popup__header-title .icon {
    font-size: 2em;
    vertical-align: middle;
    padding-right: 0.25em;
}
.multilayerresult:not(.featureresult):not(.layerresult) .esri-popup__header-title > span::before {
    content: "\0051";
    display: inline-block;
    font-family: webOfficeFlexJS;
    font-size: 2em;
    padding-right: 0.25em;
    text-align: center;
    vertical-align: middle;
}
.esri-popup__header-title:hover, .esri-popup__button:hover {
    background-color: rgba(246,246,246, 1);
}
.esri-popup__footer .esri-popup__button:hover {
    background-color: rgba(255,255,255, 1);
}
#pagingContainer,
.esri-popup__header .wo-popup-navigation {
    display: flex;
    align-items: center;
    margin: 0 0.5em;
}
#pagingContainer .title-button,
.esri-popup__header .wo-popup-navigation__button {
    font-size: 1.8em;
}
.esri-popup__content {
    margin-right: 0;
}
.esri-feature__content-node{
    font-size: 12px;
}
.wo-popup-images {
    display: flex;
    align-items: center;
}
.wo-popup-images__button {
    border: 0;
    background-color: transparent;
    color: rgba(102,102,102, 1);
    padding: 0 0.25em;
    font-size: 2.5em;
}
.wo-popup-images.wo-popup-images--single-image .wo-popup-images__button {
    display: none;
}
.wo-popup-images__image-node {
    flex: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.wo-popup-images__image-node.large {
    height: 180px;
    max-height: 180px;
}
.wo-popup-images__image-node.medium {
    height: 160px;
    max-height: 160px;
}
.wo-popup-images__image-node.small {
    height: 120px;
    max-height: 120px;
}

.singlefeature table {
    border-spacing: 0;
}

.esri-popup__content .wo-content-list__row .wo-content-list__label:not(:only-child) {
    /* not only child -> layer selection in mulitlayer-result needs full width */
    width: 50%;
    word-wrap: break-word;
}
#customToolIdentifyResult .wo-content-list__row .wo-content-list__label:not(:only-child) {
    width: calc(100% - 30px);
}
#customToolIdentifyResult .wo-content-list__button{
    line-height: 1.5em;
    text-align: center;
    width: 1.5em;
}
#customToolIdentifyResult .wo-content-list__row.active .wo-content-list__button {
    background-color: rgba(236,146,40, 1);
}
.esri-popup__content .wo-content-list__row .wo-popup-thumbnail {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    height: 80px;
    width: auto !important;
}
.esri-ui {
    font-size: 12px;
}
.esri-popup__button,
.esri-popup__button:hover{
    color: inherit;
}
.esri-popup__footer:not(.esri-popup__footer--has-actions){
    display: none;
}
.esri-popup__footer .esri-popup__inline-actions-container{
    justify-content: initial;
    width: 100%;
    flex-wrap: wrap;
}
.esri-popup__footer .esri-popup__inline-actions-container .esri-popup__button {
    align-items: center;
}
.esri-popup__inline-actions-container>.esri-popup__action, .esri-popup__inline-actions-container>.esri-popup__action-toggle {
    max-width: 100%;
}
.esri-popup__inline-actions-container>.esri-popup__action:only-child {
    max-width: 100%;
}
.esri-popup__inline-actions-container>.esri-popup__action:first-child:nth-last-child(2),
.esri-popup__inline-actions-container>.esri-popup__action:first-child:nth-last-child(2) ~ .esri-popup__action{
    max-width: 50%;
}
.esri-popup__inline-actions-container>.esri-popup__action:first-child:nth-last-child(3),
.esri-popup__inline-actions-container>.esri-popup__action:first-child:nth-last-child(3) ~ .esri-popup__action{
    max-width: 30%;
}
span.esri-popup__icon.esri-popup__action-image {
    background-color: currentColor;
    background-size: cover;
}
.esri-popup__action-text{
    line-height: 24px;
    margin: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.esri-popup__footer .esri-popup__inline-actions-container .esri-popup__button:hover span,
.actions-row .esri-popup__button:hover span {
    color: rgba(0,0,0, 1);
}
.featurepopup .esri-popup__footer .esri-popup__navigation,
.layerpopup .esri-popup__footer .esri-popup__navigation,
.mulitlayerpopup .esri-popup__footer .esri-popup__navigation{
    display: none;
}
.result-no-location .esri-popup__pointer,
.result-on-clickpoint .esri-popup__pointer,
.esri-popup--is-collapsed .esri-popup__footer,
.esri-popup.open-menu .esri-popup__footer,
.esri-popup.open-menu .popup-navigation,
.esri-popup.open-menu .back-to-multi,
.esri-popup--is-collapsed .esri-popup__feature-menu{
    display: none;
}
#relateFeaturePopupTable{
    width: 100%;
    display: flex;
    flex-direction: column;
}
#relateContainer{
    border-top: 2px solid rgba(190,190,190,1);
    margin: 5px 0;
}
#relateContainer .title-row, #relateContainer .actions-row {
    background-color: rgba(246,246,246, 1);
    color: rgba(102,102,102, 1);
    display: flex;
    flex-direction: row;
    font-weight: bold;
    height: 40px;
    justify-content: space-between;
}
#relateContainer .actions-row {
    font-weight: normal;
    justify-content: flex-start;
}
#relateContainer .actions-row.menu-button{
    justify-content: space-between;
}

#relateContainer .actions-row .wo-button {
    height: 32px;
    width: 32px;
}

#relateContainer .actions-row .esri-popup__button {
    max-width: 150px;
}
#relateContainer .wo-content-list__label {
    padding-left: 0.5em;
}
#menu_relateActions.wo-guigroup {
    background-color: rgba(246,246,246, 1);
}
.relate-menu-item {
    padding: 0.5em;
}
#pagingContainer{
    font-weight: normal;
}
.esri-feature__media-chart{
    max-height: 150px;
}
/* ----------------------------- SMALL GUI MENU ----------------------------- */
#smallMenuContainer {
    bottom: 31px;
    display: none;
    font-size: 1.2em;
    left: 0;
    padding: 10px;
    pointer-events: all;
    position: absolute;
    right: 0;
    z-index: 5;
}
#smallMenuContainer label {
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 6px;
    display: inline-block;
}
#smallMenuContainer .smallmenugroup {
    display: flex;
    flex-wrap: wrap;
}
#smallMenuContainer .smallmenugroup:not(:last-child) {
    border-bottom: 1px solid "190,190,190";
}
#smallMenuContainer .smallmenugroup > * {
    flex: none;
}
#smallMenuContainer .smallmenu-close-button {
    position: absolute;
    top: 0;
    right: 0;
}

/* ----------------------------- FULL SIZE STACK ---------------------------- */
#fullSizeStack {
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}
#fullSizeStack > * {
    pointer-events: all;
}
#fullSizeStack > *:last-child {
    flex-grow: 1;
}
#fullSizeStack .fullsize-content {
    font-size: 1.2em;
    max-height: calc(100% - 48px);
    overflow: auto;
}
.rssfeed-displayed #fullSizeStack {
    top: 25px;
}
.rssfeed-displayed .requestcounter-container {
    top: 25px;
}

.rssfeed-displayed #UserMessageContainer {
    top: 40px;
}
.fullsize-metadata .indend-2{
    padding-left: 0.5em;
}
#fullSizeStack .fullsize-metadata .wo-content-list__row{
    padding-left: 1.25em;
    max-width: calc(100% - 1.25em)
}
#fullSizeStack .fullsize-metadata .wo-content-list__row .fonticon{
    padding-right: .2em;
}
#fullSizeStack .fullsize-metadata .wo-content-list__label-container{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    width: calc(100% - 1.45em);
}

/* ------------------------------ GUI MODULES ------------------------------- */
#moduleContainer {
    height: 100%;
    overflow: hidden;
}
.title-container{
    align-items: center;
    display: flex;
}
.wo-gui-modules__tabs-container {
    border-bottom: 1px solid rgba(190,190,190, 0.75);
    display: flex;
    height: 5em;
    position: relative;
}
#moduleTabBar .wo-button {
    background-color: rgba(255,255,255, 0.75);
    border: 0 solid rgba(190,190,190, 0.75);
}
#moduleTabBar .wo-button.prev {
    border-right-width: 1px;
}
#moduleTabBar .wo-button.next {
    border-left-width: 1px;
}
.wo-gui-modules__tabs-node {
    display: flex;
    font-size: 1.2em;
    height: 100%;
    overflow: hidden;
}
.wo-gui-modules__tabs-node .wo-tab-handle {
    box-sizing: border-box;
    max-width: 100px;
    min-width: 50px;
}
.module-container{
    height: 100%;
}
.wo-gui-modules__content{
    height: calc(100% - 50px);
    overflow-y: auto;
    position: relative;
}
.modulestack-tabs-visible .wo-gui-modules__content{
    height: calc(100% - 100px);
}
.wo-gui-modules__content iframe {
    border: none;
    width: 100%;
    height: 100%;
}
.inactive-modulecontainer .module-node,
.inactive-modulecontainer .module-container .tab-bar {
    /* TODO: Replace with .hidden */
    display: none;
}
.inactive-modulecontainer #moduleContainer{
    height: 50px;
}


.undocked-modulestack #moduleContainer {
    bottom: 0;
    left:0;
    max-height: calc(100% - 20px);
    position: fixed;
    top: 0;
    width: calc(100% - 20px);
}

.undocked-modulestack .module-container .wo-guigroup__header {
    pointer-events: none;
}

/* --------------------------------- TOC ---------------------------------- */
.toc-container .wo-content-list__row{
    cursor: pointer;
    font-size: 1.2em;
}
.toc-container .wo-content-list__row.out-of-scale .wo-content-list__label,
.toc-node .wo-node-visibility .readonly {
    color: rgb(204, 204, 204);
}
.toc-node [class^="esri-icon"]{
    text-align: center;
    width: 40px;
}
.toc-node .wo-content-list__label{
    width: calc(100% - 80px);
}
.toc-node .has-menu .wo-content-list__label{
    width: calc(100% - 120px);
}
.toc-node .readonly{
    pointer-events: none;
}
.toc-node .wo-node-visibility .readonly{
    cursor: not-allowed;
}
.toc-min-length{
    padding: 5px;
    font-size: 1.2em;
}
.title-container span.toc {
    margin-top: 2px;
}

/* --------------------------------- TOOLS ---------------------------------- */
.hidden-actionstack .actionstack {
    /* TODO: Replace with hidden */
    display: none;
}

.inactive-actionstack .wo-tool {
    /* TODO: Replace with hidden */
    display: none;
}

.wo-tool__scroll-button {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: rgba(0,0,0, 0.25);
}

.visible-transition {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}

.hide-transition {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}

/* -------------------------- TOOL SPECIFIC STYLING ------------------------- */
/* -------------- TOOL MEASURE ------------- */
.wo-tool.wo-tool--measure_area.named-styles .named-styles-active,
.wo-tool.wo-tool--measure_line.named-styles .named-styles-active,
.wo-tool.wo-tool--measure_point.named-styles .named-styles-active,
.wo-tool.wo-tool--markup.named-styles .named-styles-active
 {
    display: inherit !important;
}
.wo-tool.wo-tool--measure_area.named-styles .named-styles-inactive,
.wo-tool.wo-tool--measure_line.named-styles .named-styles-inactive,
.wo-tool.wo-tool--measure_point.named-styles .named-styles-inactive,
.wo-tool.wo-tool--markup.named-styles .named-styles-inactive {
    display: none !important;
}
.wo-tool.wo-tool--measure_area .colorPickerBtn,
.wo-tool.wo-tool--measure_line .colorPickerBtn,
.wo-tool.wo-tool--measure_point .colorPickerBtn,
.wo-tool.wo-tool--markup .colorPickerBtn
 {
    display: block;
    border: 1px solid rgba(190,190,190, 1);
    padding: 0 10px;
    height: 40px;
    width: 40px;
}
.colorpicker-container {
    background-color: rgba(255,255,255, 1);
    border: 1px solid rgba(190,190,190, 1);
    margin: 0 10px;
    padding: 15px 0 0 0;
    position: absolute;
    z-index: 1000;
}
.colorpicker-container .colors-container {
    border: 1px solid rgba(190,190,190, 1);
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    overflow: auto;
}
.colorpicker-container .color-node {
    box-sizing: border-box;
    height: 40px;
    width: 40px;
}
.color-node.active{
    border: 1px solid rgba(236,146,40, 1);
}
.slider-container {
    margin: 10px;
}
.slider-container .slider {
    width: 100%;
}
.slider-container .ticks {
    display: flex;
    justify-content: space-between;
}
.wo-tool.wo-tool--measure_area .colorpicker-container .colorPickerCloseBtn,
.wo-tool.wo-tool--measure_line .colorpicker-container .colorPickerCloseBtn,
.wo-tool.wo-tool--measure_point .colorpicker-container .colorPickerCloseBtn {
    font-size: 1.5em !important;
    position: absolute;
    right: 0;
    top: 0;
    margin: 0.25em 0 !important;
}
.wo-tool.wo-tool--measure_area .polygon-active {
    display: inherit !important;
}
.measure-dialog{
    padding: 5px 0;
    position: absolute;
}
.measure-preview-container{
    padding: 0 5px;
    font-size: 1.2em;
}
#toolmeasure_area_div,
#toolmeasure_length_div {
    display: none;
}
.polygon #toolmeasure_area_div,
.polygon #toolmeasure_length_div,
.polyline #toolmeasure_length_div {
    display: block;
}

/* ----------- TOOL MEETINGPOINT ----------- */
.wo-tool.wo-tool--meetingpoint #MeetingPointSymbols {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}
.wo-tool.wo-tool--meetingpoint .imgContainer {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 2px solid transparent;
}
.wo-tool.wo-tool--meetingpoint .imgContainer.active {
    border-color: rgba(236,146,40, 1);
}

.wo-tool.wo-tool--meetingpoint .imgContainer img {
    max-width: 100%;
}
/* -------------- TOOL MAPTIP -------------- */
.wo-tool.wo-tool--maptip .wo-content-list {
    padding-left: 1.5em;
    font-size: 1.2em;
}
.wo-tool.wo-tool--maptip .wo-radio-button {
    margin-right: 0.5em;
}

/* ------------- TOOL IDENTIFY ------------- */
.wo-tool.wo-tool--identify_layer .wo-content-list {
    padding-left: 1.5em;
    font-size: 1.2em;
}
.wo-tool.wo-tool--identify_layer .wo-radio-button {
    margin-right: 0.5em;
}

/* ------------- TOOL CUSTOM ------------- */
.custom-icon {
    background-repeat: no-repeat;
    background-size: contain;
    height: 24px;
    width: 24px;
}
.module-container .custom-icon, .actionstack .custom-icon {
    padding-right: 0.5em;
}
.relate-menu-item .custom-icon {
    margin: 0 0.5em;
}
/* ------------- TOOL COORDSEARCH ------------- */
#COORDSEARCH_form .wo-tool__form-row:not(.wo-snap) label{
    display: block;
}
.decimal span.symbol-container,
.decimal .field-0,
.decimal .field-1,
.degree_decimal_minutes .field-2,
.degree_decimal_minutes span.field-2{
    display: none;
}
.degree_decimal_minutes .wo-input{
    width: 46%;
}
.degree_decimal_minutes .symbol-container.field-0{
    margin-right: 6px;
}
.degree .wo-input{
    width: 30%;
}

/* ------------- TOOL EDIT ------------- */
#EDIT_form.wo-tool__form[data-page='2'] .wo-snap{
    display: inherit;
}
#EDIT_form.wo-tool__form[data-page='2'] .submit,
#EDIT_form.wo-tool__form[data-page='2'] .continue,
#EDIT_form.wo-tool__form[data-page='2'] .finish,
#EDIT_form.wo-tool__form[data-page='3'] .continue,
#EDIT_form.wo-tool__form[data-page='3'] .finish,
#EDIT_form.wo-tool__form[data-page='4'] .submit,
#EDIT_form.wo-tool__form[data-page='4'] .continue,
#EDIT_form.wo-tool__form[data-page='4'] .cancel,
#EDIT_form.wo-tool__form[data-page='5'] .cancel,
#EDIT_form.wo-tool__form[data-page='5'] .finish,
#EDIT_form.wo-tool__form[data-page='5'] .submit{
    display: none;
}
#EDIT_form.wo-tool__form[data-page='2'] .wo-tool__form-list-row{
    margin-bottom: 10px;
}
#EDIT_form .buttons .wo-text-button{
    margin-top: 1em;
}
#EDIT_form .editlayers-title {
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.attributeform .category-header {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    margin-bottom: 0.5em;
}
.attributeform .mandatory, .uploadform .mandatory {
    display: inline;
    padding-left: 2px;
    color: #cc4c33;
    vertical-align: top;
}
.attributeform .wo-button {
    height: 32px;
    width: 32px;
}
.attributeform .category-header.up {
    border-bottom: 1px solid rgba(190,190,190, 0.75);
}
.attributeform .category-container {
    border-bottom: 1px solid rgba(190,190,190, 0.75);
    margin-bottom: 0.5em;
}
.attributeform .wo-input[disabled], .uploadform .wo-input[disabled]{
    background-color: rgba(190,190,190, 0.75);
}
.datetime{
    background-color: rgba(255,255,255, 1);
    border: 1px solid rgba(190,190,190, 0.75);
    border-radius: 0;
    color: rgba(102,102,102, 1);
    font-family: Helvetica, Segoe UI, Calibri, Verdana, Arial !important;
    height: 28px;
    padding: 0 6px;
    position: relative;
    width: calc(100% - 14px);
    -webkit-appearance: none;
    -webkit-min-logical-width: calc(100% - 16px);
}
.datepicker {
    width: calc(100% - 74px);
    -webkit-appearance: none;
    -webkit-min-logical-width: calc(100% - 76px);
}
input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}
.date-container, .time-checkbox-container {
    display: flex;
    line-height: 30px;
}
.time-checkbox-container{
    align-items: center;
    margin-left: -15px;
}

.date-container.between-from, .date-container.between-to {
    margin: 1.2em 0;
}

.attributeform .date-button, .query-field .date-button {
    height: 24px;
    width: 24px;
    right: 26px;
    top: 2px;
    pointer-events: none;
}

.attributeform .wo-textarea {
    padding: 0.5em;
    width: 100%;
    min-height: 56px;
    height: 56px;
    max-width: 100%;
    min-width: 100%;
}
.attributeform .category-header .icon {
    height: 24px;
    width: 24px;
    padding-right: 0.25em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
}
.editfield.invalid {
    border: 1px solid rgb(204, 51, 51) !important;
    background-color: rgba(204, 51, 51, 0.25);
}
.editfield_file.invalid > * {
    border: 1px solid rgb(204, 51, 51) !important;
    background-color: rgba(204, 51, 51, 0.25);
}
.editfield_file.invalid input {
    background-color: rgba(0, 0, 0, 0.0);
}
.editfield.wo-checkbox {
    float: left;
    margin-left: auto;
    margin-right: 1em;
}
.attributeform form, .uploadform form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.attributeform .dijitUploader, .uploadform .dijitUploader {
    width: calc(100% - 144px);
}
.attributeform .dijitUploader span, .uploadform .dijitUploader span {
    width: 99%;
}
.attributeform .dijitUploadDisplayInput, .uploadform .dijitUploadDisplayInput {
    border: 0;
    height: 26px;
    font-size: 12px;
    padding-left: 0.5em;
    color: rgba(102,102,102, 1);
}
.attributeform .dijitButton, .uploadform .dijitButton {
    margin: 0;
}
.uploadform .upload-success-message {
    color: green;
}

/* ------------- TOOL MARKUP ------------- */
.submodule-container {
    border-bottom: 1px solid rgba(190,190,190, 0.75);
    display: flex;
    padding-bottom: 15px;
    justify-content: space-around;
}

.submodule-container .wo-button {
    border: 1px solid rgba(190,190,190, 0.75);
    color: rgba(102,102,102, 0.75);
    height: 32px;
    width: 32px;
}

.submodule-container .wo-button.active {
    border: 1px solid rgba(236,146,40, 1);
    color: rgb(236,146,40);
}

/* ------------- RSS FEED ------------- */

.rss-container {
    pointer-events: all;
    height: 25px;
    position: absolute;
    overflow: hidden;
    width: 100%;
    z-index:100;
}

.rssfeed-label {
    font-size: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.rssfeed-testlabel {
    position: absolute;
    font-size: 14px;
    overflow: visible;
    white-space: nowrap;
    opacity: 0;
}

.rssfeed-displayed #toolbarContainer, .rssfeed-displayed #actionContainer {
    top: 30px;
}

.rssfeed-displayed #guiarea {
    top: 90px;
}

/* --------------------------------- DEBUG --------------------------------- */
.debug-tools-container {
    position: absolute;
    top: 80px;
    right: 80px;
    padding: 2em;
    z-index: 20000;
    background: rgba(255,255,255,0.9);
}
.debug-tools-container .button {
    text-align: center;
}
.debug-display {
    position: absolute;
    pointer-events: all;
    display: block !important;
    background: rgba(255,255,255, 1);
    z-index: 20000;
    border: 2px dotted red;
    font-size: 1.2em;
}
#info_node.debug-display {
    right: 370px;
}
#wo_hidden_node.debug-display {
    left: 0;
    right: 370px;
    height: 200px;
}
.map2D.mapdebug .mapcontainer {
    background-color: rgba(255,255,255, 1);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ----------------------------- MISCELLANEOUS ------------------------------ */


/* collision detection */
.collision-popup-customerinfo .customer-info {
    display: none !important;
}
.collision-bottom-mapinteraction .right-bottom-container {
    margin-right: 70px;
}
.collision-mapinteraction-mapcomponents .guiarea > * {
    display: inline-block;
    vertical-align: top;
}
.collision-mapinteraction-mapcomponents #mapinteraction {
    margin-left: 0;
}
.collision-mapinteraction-mapcomponents .right-bottom-container,
.collision-popup-rightbottomcontainer .right-bottom-container {
    visibility: hidden;
}
.collision-popup-guiarea .esri-popup--is-docked-bottom-right .esri-popup__main-container {
    right: 60px;
}
.collision-popup-guiarea.collision-mapinteraction-mapcomponents .esri-popup--is-docked-bottom-right .esri-popup__main-container {
    right: 116px;
}
/* collision with attribution - shift docked popup up; is overriden by xsmall*/
[class*="esri-popup--is-docked-bottom-"] .esri-popup__main-container {
    bottom: 26px;
}

.esri-color-picker {
    width: 290px;
}

.esri-color-picker .esri-swatch {
    height: 20px;
    width: 20px;
}

.esri-color-picker .esri-transparency-slider[type="range"] {
    padding: 0;
}

.esri-color-picker .esri-transparency-slider[type="range"]::-moz-range-track {
    height: 4px;
    background: #ddd;
    border: none;
}
.esri-color-picker .esri-transparency-slider[type="range"]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 10px;
    background: #6e6e6e;
    border-radius: 2px;
}

.esri-color-picker .esri-transparency-slider[type="range"]::-ms-thumb {
    height: 25px;
    width: 8px;
    background: #6e6e6e;
    border-radius: 6px;
    border-color: transparent;
}

.esri-color-picker .esri-transparency-slider[type="range"]::-ms-track {
    height: 4px;
    border-color: white;
    border-width: 6px 0;
    color: transparent;
    border-radius: 0;
}

.esri-color-picker .esri-transparency-slider[type=range]::-ms-fill-lower {
    background: #ddd;
    border-radius: 2px;
}
.esri-color-picker .esri-transparency-slider[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 2px;
}
.crosshair, .centermark {
    color: rgba(0,0,0,1);
    font-size: 32px;
    left: calc(50% - 16px);
    opacity: 0.7;
    position: absolute;
    text-shadow:
        -1px -1px 0 rgba(255,255,255,0.5),
        1px -1px 0 rgba(255,255,255,0.5),
        -1px 1px 0 rgba(255,255,255,0.5),
        1px 1px 0 rgba(255,255,255,0.5);
    top: calc(50% - 16px);
}
.centermark {
    text-shadow: none;
}
.crosshair.loading {
    animation: crosshair 0.75s ease-in-out infinite;
}
@keyframes crosshair {
    0% {
        color: rgba(0,0,0,1);
    }
    50% {
        color: rgba(236,146,40,1);
    }
    100% {
        color: rgba(0,0,0,1);
    }
}
.context-form.wo-guigroup{
    display: flex;
    flex-wrap: wrap;
    max-width: 240px;
}
.context-form {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: calc(50% - 20px - 48px);
}
body:not(.draw-point-selected) .context-form .show-at-point-selected{
    display: none;
}
.landscape-lock {
    display: none;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 6000;
    color: rgba(102,102,102, 1);
    pointer-events: all;
    background: rgba(255,255,255, 1) url(../images/landscapelock.png) no-repeat center 25%;
    background-size: auto 50%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
}

.landscape-text {
    font-size: 2em;
    margin-bottom: 80px;
}

.landscapelock-displayed .landscape-lock {
    display: flex;

    animation: fadein .5s;
    -moz-animation: fadein .5s;
    -webkit-animation: fadein .5s;
    -o-animation: fadein .5s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.collision-toolbar #mapcomponents_small,
.collision-toolbar #title_mapcomponents {
    display: none;
}

.width-medium.collision-toolbar.smallmenu-displayed #smallMenuContainer,
.width-large.collision-toolbar.smallmenu-displayed #smallMenuContainer,
.width-xlarge.collision-toolbar.smallmenu-displayed #smallMenuContainer{
    display: block;
    top: 70px;
    left: auto;
    bottom: auto;
    margin: 0;
    max-width: 300px;
    min-width: 150px;
}
body:not(.collision-toolbar) #smallMenuButton{
    display: none;
}
.collision-toolbar #smallMenuButton {
    margin-left: 10px;
    margin-right: 0;
}

#smallMenuButton, #smallMenuButton.wo-button.tool-buttonChecked {
    color: rgba(102,102,102, 1);
}

.rssfeed-displayed.collision-toolbar.smallmenu-displayed #smallMenuContainer {
    top: 95px;
}
.wo-tool__form[data-page='0'] > *:not(.page-0),
.wo-tool__form[data-page='1'] > *:not(.page-1),
.wo-tool__form[data-page='2'] > *:not(.page-2),
.wo-tool__form[data-page='3'] > *:not(.page-3),
.wo-tool__form[data-page='4'] > *:not(.page-4),
.wo-tool__form[data-page='5'] > *:not(.page-5){
    display: none;
}
.external-print-fields-container{
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 1.5em;
}
<!-- Styles for the performance debugging tool -->

         #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        margin-bottom:20px;
        font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial,
          sans-serif;
      }

      #performanceInfo {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 1em;
      }

      table {
        margin: 1em 0;
      }

      .center {
        text-align: center;
      }