@charset "UTF-8";
/****************************************************************************************************
 *          .wo--small-only     - Modifier to show element only in small gui.
 *          .wo--big-only       - Modifier to show element only in desktop gui.
 ****************************************************************************************************/
/* -------------- UTIL CLASSES ------------- */
body:not(.width-xsmall):not(.width-small) .wo--small-only {
    display: none !important;
}

.width-small .wo--big-only,
.width-xsmall .wo--big-only{
    display: none !important;
}

/* ------------- USER MESSAGES ------------- */
.width-small #UserMessageContainer,
.width-xsmall #UserMessageContainer{
    left: 10px;
    top: 70px;
    width: calc(100% - 20px);
    z-index: 100000;
}
.width-xsmall.rssfeed-displayed #UserMessageContainer {
    top: 95px;
}

/* ---------------- GUI AREA --------------- */
.width-small #guiarea,
.width-xsmall #guiarea{
    bottom: 31px;
    left: 0;
    right: auto;
    top: auto;
}

/* ------------ REQUEST COUNTER ------------ */
.width-small .requestcounter-container,
.width-xsmall .requestcounter-container{
    top: 50px;
}

/* ------------------ FTS ----------------- */
.width-small:not(.webspeech-available) #ftsInput,
.width-xsmall:not(.webspeech-available) #ftsInput{
    margin-right: 1em;
}

.width-small #customerInfo_form > .inline,
.width-xsmall #customerInfo_form > .inline{
    display: block;
}

.width-small #actionContainer,
.width-xsmall #actionContainer{
    width: 100%
}

/* ---------------- STACKS ---------------- */
.width-small #resultStack,
.width-small #moduleContainer,
.width-small #actionStack,
.width-xsmall #resultStack,
.width-xsmall #moduleContainer,
.width-xsmall #actionStack{
    bottom: 0;
    margin: 0;
    max-height: 45%;
    position: absolute;
    width: 100vw;
    z-index: 1;
}
.width-small #moduleContainer,
.width-xsmall #moduleContainer {
    min-height: 45%;
}
.width-small.inactive-storedqueriescontainer:not(.inactive-resultstack) .no-fts #resultContainer,
.width-xsmall.inactive-storedqueriescontainer:not(.inactive-resultstack) .no-fts #resultContainer{
    display: block !important;
}

.width-small.undocked-modulestack #moduleContainer,
.width-xsmall.undocked-modulestack #moduleContainer{
    height: 100%;
    max-height: none;
}
.width-small.undocked-modulestack #moduleContentNode,
.width-xsmall.undocked-modulestack #moduleContentNode{
    height: 100%;
}
.width-small.undocked-modulestack .module-container .wo-guigroup__header,
.width-xsmall.undocked-modulestack .module-container .wo-guigroup__header{
    pointer-events: all;
}

.width-small #resultStack,
.width-xsmall #resultStack{
    max-height: 100%;
}
.width-small #queryContainer,
.width-xsmall #queryContainer{
    width: calc(100% - 20px);
}
.width-small.active-storedqueriescontainer #queryContainer,
.width-xsmall.active-storedqueriescontainer #queryContainer{
    width: 100%;
}
.width-small.layerresult:not(.inactive-resultstack):not(.shortcut-result) #resultStack,
.width-xsmall.layerresult:not(.inactive-resultstack):not(.shortcut-result) #resultStack{
    height: 100%;
}

.width-small #resultContainer,
.width-xsmall #resultContainer{
    height: 100%;
}

.width-small .right-bottom-container,
.width-xsmall .right-bottom-container{
    margin-right: 10px;
}

.width-small #customerInfo_form img,
.width-xsmall #customerInfo_form img{
    max-width: 100px;
    max-height: 70px;
}
/* -------------- ATTRIBUTION ------------- */
.width-small .esri-attribution,
.width-xsmall .esri-attribution{
    left: 0;
    max-height: 26px;
    overflow: hidden;
}
.width-small .esri-attribution--open,
.width-xsmall .esri-attribution--open{
    align-items: flex-start;
    flex-direction: column;
    max-height: inherit;
}
.width-small .esri-attribution__sources,
.width-xsmall .esri-attribution__sources{
    max-width: 30px;
    visibility: hidden;
}
.width-small .esri-attribution__sources:before,
.width-xsmall .esri-attribution__sources:before{
    content: "© ";
    text-align: center;
    visibility: visible;
}
.width-small .esri-attribution--open .esri-attribution__sources:before,
.width-xsmall .esri-attribution--open .esri-attribution__sources:before{
    content: "";
}

.width-small .esri-attribution--open .esri-attribution__sources,
.width-xsmall .esri-attribution--open .esri-attribution__sources{
    max-width: 100% !important;
    visibility: visible;
}
.width-small .esri-attribution--open .coord-system,
.width-xsmall .esri-attribution--open .coord-system{
    display: block !important;
}
.width-small .esri-attribution--open .esri-scale-bar,
.width-xsmall .esri-attribution--open .esri-scale-bar{
    align-self: flex-end;
    position: absolute;
    bottom: 5px;
}
.width-small .esri-attribution .esri-scale-bar.hide_scalebar ,
.width-xsmall .esri-attribution .esri-scale-bar.hide_scalebar {
    display: none;
}
.width-small .esri-attribution--open .esri-scale-bar.hide_scalebar ,
.width-xsmall .esri-attribution--open .esri-scale-bar.hide_scalebar {
    display: block;
}
/* ------------- COLOR PICKER ------------- */
.width-small .colorpicker-container,
.width-xsmall .colorpicker-container {
    align-items: center;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0 !important;
    margin: 10px;
    right: 0 !important;
    top: 0 !important;
}
.width-small .colorpicker-container .color-node,
.width-xsmall .colorpicker-container .color-node{
    height: 35px;
}
/* -------------- ATTRIBUTION ------------- */
.width-small .wo-preview-item,
.width-xsmall .wo-preview-item{
    box-sizing: border-box;
    width: calc(100vw / 3);
}
.width-small .wo-preview-item__image,
.width-xsmall .wo-preview-item__image{
    height: 0;
    padding-top: 66.67%;
}

/* ------------- ERROR DISPLAY ------------ */
.width-small .error-display,
.width-xsmall .error-display{
    width: 90%;
}

/* ----------- SHORTCUT BUTTONS ----------- */
.width-small.shortcut-result.inactive-actionstack #resultStack,
.width-small.shortcut-result.inactive-actionstack .esri-popup__main-container,
.width-xsmall.shortcut-result.inactive-actionstack #resultStack,
.width-xsmall.shortcut-result.inactive-actionstack .esri-popup__main-container{
    bottom: 60px;
}

.width-small.shortcut-actionstack #actionStack,
.width-xsmall.shortcut-actionstack #actionStack{
    width: 50px;
    margin-left: 10px;
}
.width-small.shortcut-actionstack #actionStack .wo-guigroup__header,
.width-xsmall.shortcut-actionstack #actionStack .wo-guigroup__header{
    border-radius: 2px;
    justify-content: center;
}
.width-small.shortcut-actionstack #actionStack .wo-guigroup__header *:not(:first-child),
.width-xsmall.shortcut-actionstack #actionStack .wo-guigroup__header *:not(:first-child){
    display: none;
}
.width-small.shortcut-actionstack #actionStack .wo-guigroup__header *:first-child,
.width-xsmall.shortcut-actionstack #actionStack .wo-guigroup__header *:first-child{
    padding: 0;
}

.esri-view-width-small .esri-popup--is-docked .esri-popup__main-container,
.esri-view-width-xsmall .esri-popup--is-docked .esri-popup__main-container{
    max-height: 45%;
}
.esri-view-width-small .esri-popup--is-docked-bottom-center .esri-popup__main-container,
.esri-view-width-xsmall .esri-popup--is-docked-bottom-center .esri-popup__main-container{
    padding: 0;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.esri-view-width-small .esri-popup--is-docked-bottom-center {
    width: auto;
    margin: 0;
}
.width-small.shortcut-result .esri-popup__main-container,
.width-small.shortcut-result #resultStack,
.width-xsmall.shortcut-result .esri-popup__main-container,
.width-xsmall.shortcut-result #resultStack{
    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);
    height: 50px;
    left: 0;
    margin-left: 10px;
    overflow: hidden;
    width: 50px;
}
.width-small.shortcut-result .esri-popup__main-container > *:not(.esri-popup__header),
.width-small.shortcut-result #resultLabelLabel,
.width-small.shortcut-result #resultCloseBtn,
.width-xsmall.shortcut-result .esri-popup__main-container > *:not(.esri-popup__header),
.width-xsmall.shortcut-result #resultLabelLabel,
.width-xsmall.shortcut-result #resultCloseBtn{
    display: none;
}
.width-small.shortcut-result .esri-popup__main-container .esri-popup__header,
.width-xsmall.shortcut-result .esri-popup__main-container .esri-popup__header{
    border-radius: 2px;
    padding-top: 0;
}
.width-small.shortcut-result .esri-popup__main-container .esri-popup__header > *:not(.esri-popup-small-inactive-btn),
.width-xsmall.shortcut-result .esri-popup__main-container .esri-popup__header > *:not(.esri-popup-small-inactive-btn){
    display: none;
}
.width-small.shortcut-result .esri-popup__main-container .esri-popup__header .esri-popup-small-inactive-btn,
.width-xsmall.shortcut-result .esri-popup__main-container .esri-popup__header .esri-popup-small-inactive-btn{
    display: flex;
    justify-content: center;
}
.width-small.shortcut-result .esri-popup__main-container .esri-popup__header .esri-popup-small-inactive-btn *,
.width-xsmall.shortcut-result .esri-popup__main-container .esri-popup__header .esri-popup-small-inactive-btn *{
    padding: 0;
}

/* -------------- GUI MODULES ------------- */
.width-small.inactive-modulecontainer #moduleContainer,
.width-xsmall.inactive-modulecontainer #moduleContainer{
    display: none;
}
.width-small .wo-gui-modules__content iframe,
.width-xsmall .wo-gui-modules__content iframe{
    height: 100% !important;
}

/* -------------- GUI MODULES ------------- */
/* ------- STORED QUERIES DISPLAYED ------- */
.width-small.active-storedqueriescontainer #actionContainer,
.width-xsmall.active-storedqueriescontainer #actionContainer{
    width: 100vw;
    height: 100%;
}
.width-small.active-storedqueriescontainer #queryContainer,
.width-xsmall.active-storedqueriescontainer #queryContainer{
    margin: 0;
    border-radius: 0;
    height: 100%;
}
.width-small.active-storedqueriescontainer #actionStack,
.width-small.active-storedqueriescontainer #attribution,
.width-xsmall.active-storedqueriescontainer #actionStack,
.width-xsmall.active-storedqueriescontainer #attribution{
    display: none;
}

/* --------- SMALL MENU DISPLAYED --------- */
body.width-small #smallMenuButton,
body.width-xsmall #smallMenuButton{
    display: flex;
}
.width-small.smallmenu-displayed #smallMenuContainer,
.width-xsmall.smallmenu-displayed #smallMenuContainer{
    display: block;
}
.width-small.smallmenu-displayed #guiarea,
.width-xsmall.smallmenu-displayed #guiarea{
    display: none;
}
.inactive-resultstack #smallMenuContainer,
.featureresult-collapsed #smallMenuContainer,
.layerresult-collapsed #smallMenuContainer,
.multilayerresult-collapsed #smallMenuContainer {
    bottom: 50px;
}

.width-small.collision-toolbar #mapcomponents_small,
.width-small.collision-toolbar #title_mapcomponents,
.width-xsmall.collision-toolbar #mapcomponents_small,
.width-xsmall.collision-toolbar #title_mapcomponents{
    display: flex;
    flex-wrap: wrap;
}
.width-small .wo-tool__form,
.width-xsmall .wo-tool__form{
    max-height: calc( 100% - 50px);
    max-width: calc(100% - 30px);
}

/* -------- ACTION STACK DISPLAYED -------- */
.width-small.inactive-actionstack #attribution,
.width-small.inactive-actionstack #guiarea,
.width-small.inactive-actionstack #rightBottomContainer,
.width-small.active-actionstack #attribution,
.width-small.active-actionstack #guiarea,
.width-small.active-actionstack #rightBottomContainer,
.width-xsmall.inactive-actionstack #attribution,
.width-xsmall.inactive-actionstack #guiarea,
.width-xsmall.inactive-actionstack #rightBottomContainer,
.width-xsmall.active-actionstack #attribution,
.width-xsmall.active-actionstack #guiarea,
.width-xsmall.active-actionstack #rightBottomContainer{
    display: none;
}

.width-small.inactive-resultstack #resultContainer,
.width-xsmall.inactive-resultstack #resultContainer{
    display: none;
}

/* ----------- RESULT DISPLAYED ----------- */
.width-small.layerresult #rightBottomContainer,
.width-small.layerresult #attribution,
.width-small.layerresult #mapcomponents,
.width-small.layerresult #mapinteraction #ToolZoomIn,
.width-small.layerresult #mapinteraction #ToolZoomOut,
.width-small.layerresult #mapinteraction #Compass2D,
.width-small.layerresult #mapinteraction #Compass3D,
.width-small.multilayerresult #rightBottomContainer,
.width-small.multilayerresult #attribution,
.width-small.multilayerresult #mapcomponents,
.width-small.multilayerresult #mapinteraction #ToolZoomIn,
.width-small.multilayerresult #mapinteraction #ToolZoomOut,
.width-small.multilayerresult #mapinteraction #Compass2D,
.width-small.multilayerresult #mapinteraction #Compass3D,
.width-small.featureresult #rightBottomContainer,
.width-small.featureresult #attribution,
.width-small.featureresult #mapcomponents,
.width-small.featureresult #mapinteraction,
.width-small.featureresult #mapinteraction #ToolZoomIn,
.width-small.featureresult #mapinteraction #ToolZoomOut,
.width-small.featureresult #mapinteraction #Compass2D,
.width-small.featureresult #mapinteraction #Compass3D,
.width-xsmall.layerresult #rightBottomContainer,
.width-xsmall.layerresult #attribution,
.width-xsmall.layerresult #mapcomponents,
.width-xsmall.layerresult #mapinteraction #ToolZoomIn,
.width-xsmall.layerresult #mapinteraction #ToolZoomOut,
.width-xsmall.layerresult #mapinteraction #Compass2D,
.width-xsmall.layerresult #mapinteraction #Compass3D,
.width-xsmall.multilayerresult #rightBottomContainer,
.width-xsmall.multilayerresult #attribution,
.width-xsmall.multilayerresult #mapcomponents,
.width-xsmall.multilayerresult #mapinteraction #ToolZoomIn,
.width-xsmall.multilayerresult #mapinteraction #ToolZoomOut,
.width-xsmall.multilayerresult #mapinteraction #Compass2D,
.width-xsmall.multilayerresult #mapinteraction #Compass3D,
.width-xsmall.featureresult #rightBottomContainer,
.width-xsmall.featureresult #attribution,
.width-xsmall.featureresult #mapcomponents,
.width-xsmall.featureresult #mapinteraction #ToolZoomIn,
.width-xsmall.featureresult #mapinteraction #ToolZoomOut,
.width-xsmall.featureresult #mapinteraction #Compass2D,
.width-xsmall.featureresult #mapinteraction #Compass3D {
    display: none;
}
.width-small.active-storedqueriescontainer #UserMessageContainer,
.width-xsmall.active-storedqueriescontainer #UserMessageContainer,
.width-small.active-modulecontainer.undocked-modulestack #UserMessageContainer,
.width-xsmall.active-modulecontainer.undocked-modulestack #UserMessageContainer,
.width-small.layerresult:not(.inactive-resultstack) #UserMessageContainer,
.width-xsmall.layerresult:not(.inactive-resultstack) #UserMessageContainer,
.width-small.multilayerresult:not(.inactive-resultstack) #UserMessageContainer,
.width-xsmall.multilayerresult:not(.inactive-resultstack) #UserMessageContainer{
    bottom: 10px;
    top: auto;
}

.width-small.rssfeed-displayed #actionContainer,
.width-xsmall.rssfeed-displayed #actionContainer{
    top: 25px;
}

.width-small.rssfeed-displayed.inactive-resultstack #resultStack,
.width-small.rssfeed-displayed #actionStack,
.width-xsmall.rssfeed-displayed.inactive-resultstack #resultStack,
.width-xsmall.rssfeed-displayed #actionStack{
    bottom: 25px;
}

.width-small.rssfeed-displayed .requestcounter-container,
.width-xsmall.rssfeed-displayed .requestcounter-container{
    top: 75px;
}