html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

div {
    padding: 0px;
    margin: 0px;
}

b {
    font-weight: bold;
}

#loadwrapper {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 100px
}
.featureinfo_highlighted{
    background-color:rgba(0,0,255,0.2);
    border: 1px solid rgba(0,0,255,0.4);
}
#loader {
    position: absolute;

    display: none;
    text-align: center;
    padding: 5px;
    font: bold small sans-serif;
    background-color: #ffffaa;
    border: 1px solid #888888;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* messages */

.messages .box {
    width: 400px;
    padding: 5px;
    margin: 10px;
    margin-left: 0px;
}

.wideMessages .box {
    width: 700px;
    padding: 5px;
    margin: 10px;
    margin-left: 0px;
}

.box div {
    padding-left: 18px;
    padding-bottom: 1px;
}

.security {
    border: 1px solid #7f7f00;
    background-color: #ffffee;
}

.security div {
    background: url('../images/lock.gif') no-repeat;
    color: #7f7f00;
}

.errors {
    border: 1px solid red;
    background-color: #fff5f5;
}

.errors div {
    background: url('../images/error.gif') no-repeat;
    color: red;
}

.info {
    border: 1px solid blue;
    background-color: #f5f5ff;
}

.info div {
    background: url('../images/info.gif') no-repeat;
    color: blue;
}

.warnings {
    border: 1px solid #7f7f00;
    background-color: #ffffee;
}

.warnings div {
    background: url('../images/warning.gif') no-repeat;
    color: #7f7f00;
}

.ext-style {
    border: 1px solid #cecece;
    padding: 4px 6px 3px 6px;
    color: #000;
    font-size: 13px;
    font-weight: 300;
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
    line-height: 22px;
    vertical-align: middle;
    min-height: 22px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/* validation styles */

input.error, textarea.error {
    color: red;
    background-color: #ffffaa;
}

input.error[type="radio"], input.error[type="checkbox"], select.error {
    background-color: white;
    border: 2px solid red;
}

.theme-crisp .tristatenode .x-tree-checkbox {
    background-position: 0 -30px;
}

.theme-triton .x-tree-checkbox, .theme-triton .x-tree-checkbox-checked {
    font-family: FontAwesome;
}

.theme-triton .x-tree-checkbox:before {
    content: "\f096";
}

.theme-triton .x-tree-checkbox-checked:before {
    content: "\f046";
}

.theme-triton .tristatenode .x-tree-checkbox:before {
    content: "\f0c8";
}

.theme-triton .radionode .x-tree-checkbox:before {
    content: "\f10c";
}

.theme-triton .radionode .x-tree-checkbox-checked:before {
    content: "\f192";
}

.toc-outofscale,
.node-disabled,
.node-disabled .x-tree-checkbox {
    color : gray;
}
.node-disabled img {
    filter: gray;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.toc-zoomtoscale{
    height: 36px !important;
}
.toc-zoomtoscale-text{
    color: blue;
    float: right;
    margin-right: 10px;
    font-style: italic;
    cursor: pointer;
}
.toc-inscale {
    color: black;
}
.layer--is-userlayer {
    font-style: italic;
}
.no_treenode_icon{
    background-image: none;
    width: 1px;
}
.customIconButton button {
    width: 100% !important;
    height: 100%;
}
.customIconButton .x-btn-icon {
    width: 38px;
    height: 38px;
    line-height: 38px;
}

.searchResultButton{
    width:100%;
    border-radius: 0;
}
.layout-left_menu{
    z-index: 15000;
}
.layout-left_menu .viewer-component-block {
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 }

.direct-search-result {
    position: absolute;
}

.round-shadows {
    -webkit-box-shadow: 0px 0px 5px -2px rgba(41,41,41,.75);
    -moz-box-shadow: 0px 0px 5px -2px rgba(41,41,41,.75);
    box-shadow: 0px 0px 5px -2px rgba(41,41,41,.75);
}

/*
if legend is direct ancestor of body, hide it
*/
body > .legend {
    display: none;
}

/**
* Fix for ExtJS not setting the cursor to move for draggable windows.
*/
.x-header-draggable {
  cursor: move;
}

/* Override ExtJS style */
.x-btn-default, .x-btn-default-large, .x-btn-default-small, .x-tab-default {
    background-color: #f5f5f5 !important;
    border-color: #d8d8d8 !important;
}
.x-tab-active.x-tab-default,
.x-btn.x-btn-menu-active.x-btn-default-small,
.x-btn.x-btn-pressed.x-btn-default-small{
    background-color: #E5E5E5 !important;
    border-color: #C8C8C8 !important;
}
/* Fixes style of Cycle buttons, because of background-color override above */
.x-btn-wrap-default-small.x-btn-split-right::after {
    color: #444444;
}
.x-btn-wrap-default-small.x-btn-split-right > .x-btn-button::after {
    border-right-color: #C8C8C8;
}
/* Add border in IE */
.x-nlg .x-btn-default, .x-nlg .x-btn-default-large, .x-nlg .x-btn-default-small, .x-nlg .x-tab-default {
    border: 1px solid #d8d8d8 !important;
}
.x-btn-default-large .x-btn-inner, .x-btn-default-small .x-btn-inner, .x-tab-default .x-tab-inner {
    color: #000000 !important;
}
/* Remove button color in IE */
.x-nlg .x-btn-default-small-tl,
.x-nlg .x-btn-default-small-tc,
.x-nlg .x-btn-default-small-tr,
.x-nlg .x-btn-default-small-ml,
.x-nlg .x-btn-default-small-mc,
.x-nlg .x-btn-default-small-mr,
.x-nlg .x-btn-default-small-bl,
.x-nlg .x-btn-default-small-bc,
.x-nlg .x-btn-default-small-br,
.x-nlg .x-btn-default-large-tl,
.x-nlg .x-btn-default-large-tc,
.x-nlg .x-btn-default-large-tr,
.x-nlg .x-btn-default-large-ml,
.x-nlg .x-btn-default-large-mc,
.x-nlg .x-btn-default-large-mr,
.x-nlg .x-btn-default-large-bl,
.x-nlg .x-btn-default-large-bc,
.x-nlg .x-btn-default-large-br,
.x-nlg .x-tab-default-tl,
.x-nlg .x-tab-default-tc,
.x-nlg .x-tab-default-tr,
.x-nlg .x-tab-default-ml,
.x-nlg .x-tab-default-mc,
.x-nlg .x-tab-default-mr,
.x-nlg .x-tab-default-bl,
.x-nlg .x-tab-default-bc,
.x-nlg .x-tab-default-br{
    background-image: none;
    background-color: #f5f5f5;
}

.theme-crisp .x-tree-checkbox {
    background-image: url(../images/extjs-overrides/crisp/checkbox.png);
}
.theme-crisp .radionode .x-tree-checkbox {
    background-image: url(../images/extjs-overrides/touch-crisp/radio.png);
}
.theme-crisp .x-btn-wrap-default-small.x-btn-split-right:after {
    background-image: url(../images/extjs-overrides/crisp/default-small-s-arrow.png);
}

.x-fieldset {
    border-top: 0 none !important;
    background: #FFFFFF;
}

.edit-component-container .x-fieldset {
    border-top: 1px solid #bbb !important;
}

/*/ makes (editable) field labels overflow into ellipsis*/
.x-form-item-label-inner {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* center allign paging toolbar input */
.x-tbar-page-number .x-form-text {
    text-align: center;
}

/* End Override ExtJS style */

/*
   IOS7 on iPad has an issue with height of the html/body
   http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue
   To resolve this issue we add a class to the HTML tag and set a fixed height for the wrapper + disable touch on html element (to prevent scroll / bounce effect)
*/
@media (orientation:landscape) {
    html.ipad.ios7 #wrapper {
        height: 672px !important;
    }
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.theme-crisp-touch .tristatenode .x-tree-checkbox {
    background-position: 0 -44px;
}
/* ExtJS override images */
.theme-crisp-touch .x-tree-checkbox {
    background-image: url(../images/extjs-overrides/touch-crisp/checkbox.png);
}
.theme-crisp .radionode .x-tree-checkbox {
    background-image: url(../images/extjs-overrides/touch-crisp/radio.png);
}
.theme-crisp-touch .x-btn-wrap-default-small.x-btn-split-right:after {
    background-image: url(../images/extjs-overrides/touch-crisp/default-small-s-arrow.png);
}
.x-grid-item-container {
    overflow: visible;
}
/* Remove IE10/11 clear button for fields with clear trigger */
.x-form-has-clear-trigger input::-ms-clear {
  width : 0;
  height: 0;
  display: none;
}

.legend-toggle {
    background-image: url(../../extjs/resources/css/crisp/images/toolbar/default-more.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
}

.button-toggle.active-state {
    -webkit-box-shadow: #157fcc 0 2px 0 0 inset,#157fcc 0 -2px 0 0 inset,#157fcc -2px 0 0 0 inset,#157fcc 2px 0 0 0 inset;
    -moz-box-shadow: #157fcc 0 2px 0 0 inset,#157fcc 0 -2px 0 0 inset,#157fcc -2px 0 0 0 inset,#157fcc 2px 0 0 0 inset;
    box-shadow: #157fcc 0 2px 0 0 inset,#157fcc 0 -2px 0 0 inset,#157fcc -2px 0 0 0 inset,#157fcc 2px 0 0 0 inset;
}

/** Make clickable area of close button bigger */
.x-window-header-default-horizontal .x-tool-after-title:after{
    content:"";
    padding: 25px;
    position: absolute;
    left: -18px;
    top: -16px;
}

/* Main background colors */
.x-border-layout-ct {
    background-color: #FFFFFF !important;
}

#wrapper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 0 0;
}

/**
Make contents of popups scrollable on mobile devices
TODO: check if we always need to do this, not only mobile, only on mobile are we setting min widths/heights on
*/
.flamingo-mobile .screen-popup .x-window-bodyWrap {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.applicationSpriteClass .x-mask-msg {
    width: 100%;
    height: 100%;
    background: rgba(208, 208, 208, .5);
}

.applicationSpriteClass .x-mask-msg-inner,
.applicationSpriteClass .x-mask-msg-inner:after {
    border-radius: 50%;
    width: 80%;
    height: 80%;
    margin: 10%;
}

.applicationSpriteClass .x-mask-msg-inner {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 0.5em solid #FFFFFF;
    border-right: 0.5em solid #FFFFFF;
    border-bottom: 0.5em solid #FFFFFF;
    border-left: 0.5em solid rgba(255, 255, 255, 0.2);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

.applicationSpriteClass .x-mask-msg-text {
    display: none;
}

/** LOADING Spinner */
#appLoader {
    font-size: 13px;
    position: fixed;
    width: 12em;
    height: 12em;
    left: 50%;
    top: 50%;
    margin-top: -6em;
    margin-left: -6em;
    background-color: rgba(0, 0, 0, .7);
    padding: 2em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 9999999;

    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#appLoader.hide {
    display: none;
}
#appLoader .spinner{
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
#appLoader .spinner,
#appLoader .spinner:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/** Alerts, taken from Bootstrap **/
.alert-message {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alert-message.error {
    color: rgb(114, 28, 36);
    background-color: rgb(248, 215, 218);
    border-color: rgb(245, 198, 203);
}
.alert-message.warning {
    color: rgb(133, 100, 4);
    background-color: rgb(255, 243, 205);
    border-color: rgb(255, 238, 186);
}
.alert-message.success,
.success-toast.x-window-default,
.success-toast .x-window-header {
    color: rgb(21, 87, 36);
    background-color: rgb(212, 237, 218);
    border-color: rgb(195, 230, 203);
}
.icon-green,
.success-toast .x-title-text,
.success-toast .x-window-header-title-default > .x-title-icon-wrap-default > .x-title-icon-default {
    color: rgb(21, 87, 36);
}
.success-toast {
    border-width: 2px;
}

/* Override font-face declarations form Ext to fix IE errors (embedded-opentype) */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light.eot');
    src: url('fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light.woff') format('woff'),
         url('fonts/OpenSans-Light.ttf') format('truetype'),
         url('fonts/OpenSans-Light.svg#open_sanssemibold_italic') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-LightItalic.eot');
    src: url('fonts/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic.woff') format('woff'),
         url('fonts/OpenSans-LightItalic.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic.svg#open_sanssemibold_italic') format('svg');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.eot');
    src: url('fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular.woff') format('woff'),
         url('fonts/OpenSans-Regular.ttf') format('truetype'),
         url('fonts/OpenSans-Regular.svg#open_sanssemibold_italic') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic.eot');
    src: url('fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Italic.woff') format('woff'),
         url('fonts/OpenSans-Italic.ttf') format('truetype'),
         url('fonts/OpenSans-Italic.svg#open_sanssemibold_italic') format('svg');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Semibold.eot');
    src: url('fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold.woff') format('woff'),
         url('fonts/OpenSans-Semibold.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold.svg#open_sanssemibold_italic') format('svg');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiboldItalic.eot');
    src: url('fonts/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-SemiboldItalic.woff') format('woff'),
         url('fonts/OpenSans-SemiboldItalic.ttf') format('truetype'),
         url('fonts/OpenSans-SemiboldItalic.svg#open_sanssemibold_italic') format('svg');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.eot');
    src: url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold.woff') format('woff'),
         url('fonts/OpenSans-Bold.ttf') format('truetype'),
         url('fonts/OpenSans-Bold.svg#open_sanssemibold_italic') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-BoldItalic.eot');
    src: url('fonts/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-BoldItalic.woff') format('woff'),
         url('fonts/OpenSans-BoldItalic.ttf') format('truetype'),
         url('fonts/OpenSans-BoldItalic.svg#open_sanssemibold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBold.eot');
    src: url('fonts/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-ExtraBold.woff') format('woff'),
         url('fonts/OpenSans-ExtraBold.ttf') format('truetype'),
         url('fonts/OpenSans-ExtraBold.svg#open_sanssemibold_italic') format('svg');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBoldItalic.eot');
    src: url('fonts/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-ExtraBoldItalic.woff') format('woff'),
         url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
         url('fonts/OpenSans-ExtraBoldItalic.svg#open_sanssemibold_italic') format('svg');
    font-weight: 800;
    font-style: italic;
}

/** Override Ext scrolling behaviour for tree's. This appears to be a bug in Ext.
    Horizontal scrolling is disabled even when scrollable is set to true */
.x-tree-view.x-tree-view-default.x-scroller {
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/** Fixes resize handles overlappng the scrollbars (https://www.sencha.com/forum/showthread.php?339346-Resize-Handler-Overlap-Scrollbars-in-the-Triton-Theme)
    This fix moves the resize-handles on the right and the bottom to outside of the popup,
    preventing them from overlapping the scrollbar inside the popup */
.screen-popup { overflow: visible; }
.x-resizable-handle-east { right: -10px; }
.x-resizable-handle-south { bottom: -10px; }