body {
    /*font-family: "Open Sans", verdana, sans-serif;*/
    color: #005380;
}

.overlay:before {
    background-color: transparent;
}

.overlay {
    background-color: rgba(255, 255, 255, 0.5);
}

a {
    text-decoration: none;
}

.hidden {
    display: none;
}

.page {
    position: fixed;
    top: 50px;
    overflow: auto;
    bottom: 0;
    width: 100%;
}

.header {
    height: 50px;
    width: 100%;
    z-index: 0;
}

.containerBody {
    position: absolute;
    bottom: 0;
    right: 0;
    /*left: 80px;*/
    top: 0;
    margin: 0;
    padding: 0;
    border: 0;
    /*box-shadow: 0px 51px 25px -7px black;*/
    overflow: hidden;
}

.containerBody iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /*overflow: hidden;*/
}

.roundModal {
    border-radius: 13px;
}

.meu li img {
    max-width: 32px;
}

td, th {
    border-top: none;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.partheader {
    /*margin-left: 20px;*/
    /*padding-top: 10px;*/
}


.dc-chart {
    background-color: white;
}
.dc-chart svg text,
.dc-chart g.row text {
    fill: #005380;
    font-size: 12px;
    cursor: default;
    font-weight: normal;
}
.dc-chart g.row text.selected,
.dc-chart svg text.selected {
    font-weight: bold;
}


div.dc-chart {
    float: inherit;
}

.container {
    height: 100%;
}

.container.grid > .grid-cell {
    /*height: 100%;*/
}

.searchInput,
.searchInput:hover,
.searchInput:active,
.searchInput:focus {
    background-color: #ffffff;
}

.searchItem {
    background-color: #ffffff;
    color: #005380;
}

.searchItem:hover {
    /*transform:scale(0.99);*/
    background-color: #d8e5eb;
}

.searchInfoBox:hover,
.searchInfoBox:active,
.searchInfoBox:focus {
    background-color: #005380;
    color: #ffffff;
}

.listItem.selected {
    background-color: #bfe4f3;
    fill: #bfe4f3;
    color: white;
}

.listItemHover:hover {
    background-color: #005380;
    color: white;
}

.notification {
    border-radius: 6px;
}

.collapsiblePanel-collapse {
    height: 0;
}

.collapsiblePanel--is-expanded > .collapsiblePanel-collapse {
    height: auto;
}

.btn--xsmall {
    height: 32px;
    line-height: 32px;
    padding: 0 14px;
}

.h5   .part { max-height: 5vh; }
.h10  .part { max-height: 10vh; }
.h15  .part { max-height: 15vh; }
.h20  .part { max-height: 20vh; }
.h25  .part { max-height: 25vh; }
.h30  .part { max-height: 30vh; }
.h35  .part { max-height: 35vh; }
.h40  .part { max-height: 40vh; }
.h45  .part { max-height: 45vh; }
.h50  .part { max-height: 50vh; }
.h55  .part { max-height: 55vh; }
.h60  .part { max-height: 60vh; }
.h65  .part { max-height: 65vh; }
.h70  .part { max-height: 70vh; }
.h75  .part { max-height: 75vh; }
.h80  .part { max-height: 80vh; }
.h85  .part { max-height: 85vh; }
.h90  .part { max-height: 90vh; }
.h95  .part { max-height: 95vh; }
.h100 .part { max-height: 100vh; }

.h5vh   .part { max-height: 5vh; }
.h10vh  .part { max-height: 10vh; }
.h15vh  .part { max-height: 15vh; }
.h20vh  .part { max-height: 20vh; }
.h25vh  .part { max-height: 25vh; }
.h30vh  .part { max-height: 30vh; }
.h35vh  .part { max-height: 35vh; }
.h40vh  .part { max-height: 40vh; }
.h45vh  .part { max-height: 45vh; }
.h50vh  .part { max-height: 50vh; }
.h55vh  .part { max-height: 55vh; }
.h60vh  .part { max-height: 60vh; }
.h65vh  .part { max-height: 65vh; }
.h70vh  .part { max-height: 70vh; }
.h75vh  .part { max-height: 75vh; }
.h80vh  .part { max-height: 80vh; }
.h85vh  .part { max-height: 85vh; }
.h90vh  .part { max-height: 90vh; }
.h95vh  .part { max-height: 95vh; }
.h100vh .part { max-height: 100vh; }

.mh5   .part { max-height: 5vh; }
.mh10  .part { max-height: 10vh; }
.mh15  .part { max-height: 15vh; }
.mh20  .part { max-height: 20vh; }
.mh25  .part { max-height: 25vh; }
.mh30  .part { max-height: 30vh; }
.mh35  .part { max-height: 35vh; }
.mh40  .part { max-height: 40vh; }
.mh45  .part { max-height: 45vh; }
.mh50  .part { max-height: 50vh; }
.mh55  .part { max-height: 55vh; }
.mh60  .part { max-height: 60vh; }
.mh65  .part { max-height: 65vh; }
.mh70  .part { max-height: 70vh; }
.mh75  .part { max-height: 75vh; }
.mh80  .part { max-height: 80vh; }
.mh85  .part { max-height: 85vh; }
.mh90  .part { max-height: 90vh; }
.mh95  .part { max-height: 95vh; }
.mh100 .part { max-height: 100vh; }

.containerWrapper .w5  { width: 100%!important; }
.containerWrapper .w10 { width: 100%!important; }
.containerWrapper .w15 { width: 100%!important; }
.containerWrapper .w20 { width: 100%!important; }
.containerWrapper .w25 { width: 100%!important; }
.containerWrapper .w30 { width: 100%!important; }
.containerWrapper .w35 { width: 100%!important; }
.containerWrapper .w40 { width: 100%!important; }
.containerWrapper .w45 { width: 100%!important; }
.containerWrapper .w50 { width: 100%!important; }
.containerWrapper .w55 { width: 100%!important; }
.containerWrapper .w60 { width: 100%!important; }
.containerWrapper .w65 { width: 100%!important; }
.containerWrapper .w70 { width: 100%!important; }
.containerWrapper .w75 { width: 100%!important; }
.containerWrapper .w80 { width: 100%!important; }
.containerWrapper .w85 { width: 100%!important; }
.containerWrapper .w90 { width: 100%!important; }
.containerWrapper .w95 { width: 100%!important; }

.detailView {
    padding: 0px 0px;
}

.container.flex.fdR {
    flex-direction: column;
}

.mhinpx200 { max-height: 200px; }
.mhinpx300 { max-height: 300px; }
.mhinpx400 { max-height: 400px; }

.fillA {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.appTitle {
    position: relative;
    height: 100%;
    border-left: 1px solid lightgray;
    top: -20px;
    left: 5px;
    padding-left: 10px;
}

.logo {
    position: relative;
    left: 9px;
    height: 50px;
}

.version {
    position: relative;
    top: -36px;
    font-size: smaller;
    left: -20px;
}

.smallDeviceShow, .mobileShow, .tabletShow,  .desktopShow {
    display: none;
}

/* This is mobile size  */
@media screen and (max-width: 31.25em) {
    .mobileHide {
        display: none;
    }

    .mobileShow {
        display: block;
    }

    header { text-align: center; }
}

@media screen and (max-width: 48.75em) {
    .smallDeviceShow {
        display: block;
    }
    .smallDeviceHide {
        display: none;
    }

    header {
        text-align: center;
    }
}

/* This is tablet size */
@media screen and (min-width: 31.25em) and (max-width: 87.5em) {
    .tabletShow {
        display: block;
    }
}

@media screen and (max-width: 87.5em) {
    .tabletHide {
        display: none;
    }
}

/* This is desktop */
@media screen and (min-width: 87.5em) {
    .tabletShow {
        display: block;
    }

    .desktopShow {
        display: block;
    }

    .desktopHide {
        display: none;
    }
}

/*  */
@media screen and (min-width: 48.75em) {
    .mhinpx200 { max-height: none; }
    .mhinpx300 { max-height: none; }
    .mhinpx400 { max-height: none; }

    .container.flex.fdR {
        flex-direction: row;
    }

    .container.grid > .grid-cell {
        height: 100%;
    }

    .detailView {
        /*padding: 0px 80px;*/
        margin: 0 auto;
        max-width: 1000px;
    }

    .containerWrapper .detailView { padding: 0; }

    .h5vh  { height: 5vh; }
    .h10vh { height: 10vh; }
    .h15vh { height: 15vh; }
    .h20vh { height: 20vh; }
    .h25vh { height: 25vh; }
    .h30vh { height: 30vh; }
    .h35vh { height: 35vh; }
    .h40vh { height: 40vh; }
    .h45vh { height: 45vh; }
    .h50vh { height: 50vh; }
    .h55vh { height: 55vh; }
    .h60vh { height: 60vh; }
    .h65vh { height: 65vh; }
    .h70vh { height: 70vh; }
    .h75vh { height: 75vh; }
    .h80vh { height: 80vh; }
    .h85vh { height: 85vh; }
    .h90vh { height: 90vh; }
    .h95vh { height: 95vh; }
    .h100vh{ height: 100vh; }

    .mh5  { max-height: 5vh; }
    .mh10 { max-height: 10vh; }
    .mh15 { max-height: 15vh; }
    .mh20 { max-height: 20vh; }
    .mh25 { max-height: 25vh; }
    .mh30 { max-height: 30vh; }
    .mh35 { max-height: 35vh; }
    .mh40 { max-height: 40vh; }
    .mh45 { max-height: 45vh; }
    .mh50 { max-height: 50vh; }
    .mh55 { max-height: 55vh; }
    .mh60 { max-height: 60vh; }
    .mh65 { max-height: 65vh; }
    .mh70 { max-height: 70vh; }
    .mh75 { max-height: 75vh; }
    .mh80 { max-height: 80vh; }
    .mh85 { max-height: 85vh; }
    .mh90 { max-height: 90vh; }
    .mh95 { max-height: 95vh; }
    .mh100{ max-height: 100vh; }
}

@media screen and (max-width: 48.75em) {
    /*
        The s-xxx styles is only used when the media screen is 'small'.
        Useful to set these on parts that otherwise would get to big/small when using flex layout.
    */
    .s-h5  { height: 5vh;  max-height: 5vh; }
    .s-h10 { height: 10vh; max-height: 10vh; }
    .s-h15 { height: 15vh; max-height: 15vh; }
    .s-h20 { height: 20vh; max-height: 20vh; }
    .s-h25 { height: 25vh; max-height: 25vh; }
    .s-h30 { height: 30vh; max-height: 30vh; }
    .s-h35 { height: 35vh; max-height: 35vh; }
    .s-h40 { height: 40vh; max-height: 40vh; }
    .s-h45 { height: 45vh; max-height: 45vh; }
    .s-h50 { height: 50vh; max-height: 50vh; }
    .s-h55 { height: 55vh; max-height: 55vh; }
    .s-h60 { height: 60vh; max-height: 60vh; }
    .s-h65 { height: 65vh; max-height: 65vh; }
    .s-h70 { height: 70vh; max-height: 70vh; }
    .s-h75 { height: 75vh; max-height: 75vh; }
    .s-h80 { height: 80vh; max-height: 80vh; }
    .s-h85 { height: 85vh; max-height: 85vh; }
    .s-h90 { height: 90vh; max-height: 90vh; }
    .s-h95 { height: 95vh; max-height: 95vh; }
    .s-h100{ height: 100vh;max-height: 100vh; }

    .s-mh5  { max-height: 5vh; }
    .s-mh10 { max-height: 10vh; }
    .s-mh15 { max-height: 15vh; }
    .s-mh20 { max-height: 20vh; }
    .s-mh25 { max-height: 25vh; }
    .s-mh30 { max-height: 30vh; }
    .s-mh35 { max-height: 35vh; }
    .s-mh40 { max-height: 40vh; }
    .s-mh45 { max-height: 45vh; }
    .s-mh50 { max-height: 50vh; }
    .s-mh55 { max-height: 55vh; }
    .s-mh60 { max-height: 60vh; }
    .s-mh65 { max-height: 65vh; }
    .s-mh70 { max-height: 70vh; }
    .s-mh75 { max-height: 75vh; }
    .s-mh80 { max-height: 80vh; }
    .s-mh85 { max-height: 85vh; }
    .s-mh90 { max-height: 90vh; }
    .s-mh95 { max-height: 95vh; }
    .s-mh100{ max-height: 100vh; }

    .s-hide  { display: none; }
    .s-hauto { height: auto; }
    .s-wauto { width: auto; }

    .containerBody {
        left: 50px;
    }

    .selected:before {
        /*left: calc(50px - 0.7em + 4px);*/
        right: -2px;
    }
}

.fdCr {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.fdRr {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.collapsiblePanel--is-expanded > .collapsiblePanel-collapse {
    max-height: none;
}

/* Make sure that a collapsed panel does not contain any size */
.collapsed > .collapsiblePanel-collapse {
    padding: 0!important;
    margin: 0!important;
}

/* Overrid display of nav 'collapsed' menu icon  (from 'three lines' to person icon )*/
@media screen and (max-width: 48.6875em) {
    .nav--collapse:before {
        border: none;
        /*background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20560%20560%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M484.9%20325.4c-17.6-31.3-41.7-57.2-71-76.1%2018-26.7%2027.8-58.5%2027.3-91.4-.6-41.4-17-80.5-46.3-110.2S326.7%201.1%20285.3.2h-3.8c-88.2%200-159.9%2071.7-159.9%20159.9%200%2031.9%209.8%2062.8%2027.2%2088.8C80.5%20292.5%2041%20371.5%2041%20467.7v30.2c0%2034.3%2027.5%2062.1%2061.8%2062.1h354.7c34.3%200%2061.5-27.8%2061.5-62.1v-30.2c0-53.1-11.5-102.3-34.1-142.3zM445%20496H115c-5.5%200-10-4.5-10-10v-18.3c0-42.2%207.9-81.4%2026.8-110.9C181%20280.1%20253.5%20269%20253.5%20269c-37.5-10-70.7-49.7-70.7-96%200-1.1%200-2.2.1-3.2%200-1.1-.1-2.2-.1-3.4%200-28.9%2011.8-56.6%2032.4-75.9%2018-17.1%2041.5-26.5%2066.2-26.5h2.3c17.1.4%2033.8%205.4%2048.3%2014.5.4.2.7.5%201.1.7l.4.3c29.1%2018.9%2046.4%2051.4%2046.4%2086.9%200%201.1%200%202.2-.1%203.4%200%201.1.1%202.2.1%203.3%200%2046.4-34.4%2086.3-69.8%2096.1%200%200%2080%2019.3%20118.9%2087.6%2017%2029.9%2025.8%2068.3%2025.8%20111V486c.2%205.5-4.3%2010-9.8%2010z%22%2F%3E%3C%2Fsvg%3E) 50% no-repeat;*/
        background-size: 20px;
    }
}

/* Dashboard items */
.dashboardContentDiv {
/*    width:400px;  */
/*    position: relative; */
/*    margin: 0 auto; */

}
.dashboardContentDiv .circleblock {
    position: relative;
    width: 100px;
/*    bottom: 6px;*/
    /*cursor: pointer;*/
/*    margin: 0 auto; */
}
.dashboardContentDiv .circleChartDiv {
    position: relative;
}
.dashboardContentDiv .circleblock .circlecounter,
.circleChartDiv .circlecounter{
    position: absolute;
    bottom: 30%;
    right: 0;
    /*padding: 0 7px;*/
    width: 100%;
    font-size: xx-large;
}
.circleChartDiv .circlecounter {
    bottom: 32%;
}
.dashboardContentDiv .counterrounded {
    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
    min-width: 55px;
    min-height: 30px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    margin-left: 5px;
    margin-right: 5px;
}

.dashboardContentDiv .counterrounded.inactive {
    border-width: 1px;
    /*color: gray !important;*/
}

.dashboardContentDiv .chartbartext {
    font-size: 12px;
}

.jsgrid-header-sort:before {
    float: right;
    position: relative;
    top: 7px;
    right: 7px;
}

.jsgrid-header-sort-desc:before {
    border-color: #005380 transparent transparent;
}

.jsgrid-header-sort-asc:before {
    border-color: transparent transparent #005380;
}

div.popover.tip {
    z-index: 999999;
}

.modal-content.transparent {
    background: transparent;
}

input.ng-invalid.ng-touched {
    border: 1px solid red;
}

.tabulator {
    border: none;
    background-color: initial;
    height: 100%;
}

    .tabulator .tabulator-footer {
        border: none;
        text-align: center;
        background-color: initial;
    }

.tabulator-row.tabulator-row-even, .tabulator-row.tabulator-row-odd {
    background-color: transparent;
}

.tabulator-table {
    width: 100%;
}

.tabulator .tabulator-footer .tabulator-page {
    border: none;
}

/*.tabulator-paginator button {
    background-color: initial!important;
}*/

/*.nav--block>.nav-item>.nav-link, .nav--block>li>a {
    padding: .5em;
}*/

@media screen and (max-width: 48.6875em) {
    .nav--collapse {
        position: absolute;
        top: 0px;
    }
}

.nav li {
    z-index: 1;
    /*text-align: right;*/
}

.showOnMobile {
    display: none;
}

/*
    Loader info     : https://jamesinkala.me/blog/make-animated-content-placeholders-with-html-and-css/
*/
.loader {
    position        : relative;
    height          : 100%;
    width           : 100%;
    background-color: rgb(211,211,211);
    z-index         : 44;
    overflow        : hidden;
    border-radius   : 3px;
    margin-left     : auto;
    animation       : fadein 1000ms;
}

    .loader::after {
        content         : " ";
        position        : absolute;
        left            : -45%;
        height          : 100%;
        width           : 45%;
        background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
        animation       : loader 1s infinite;
        z-index         : 45;
    }

@keyframes loader {
    0%   { left: -45%; }
    100% { left: 100%; }
}
@keyframes fadein {
    from { opacity: 0.2; }
    to   { opacity: 1; }
}

.loading, .loading:after {
    border-radius: 50%;
    width        : 24px;
    height       : 24px;
}

.loading {
    border     : 3px solid rgba(0, 83, 128, 0.3);
    border-left: 3px solid rgba(0, 83, 128, 1);
    transform  : translateZ(0);
    animation  : spinner 1.1s infinite linear;
    display    : inline-block;
}

@keyframes spinner {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}


.fTable {
    display       : flex;
    flex-direction: column;
}

    .fTable > tbody {
        display       : flex;
        flex-direction: column;
        padding       : 0;
        margin        : 0;
        flex-grow     : 1;
        overflow-y    : auto;
    }

    .fTable > thead {
        display       : flex;
        flex-direction: column;
        padding       : 0;
        margin        : 0;
    }

    .fTable tr {
        display       : flex;
        flex-direction: row;
        flex-shrink   : 0;
        padding       : 0;
        margin        : 0;
        border-bottom : 1px solid #f2f2f2;
    }

        .fTable tr > td {
            display      : block;
            text-overflow: ellipsis;
            overflow-x   : hidden;
            flex-grow    : 1;
            flex-shrink  : 0;
            flex-basis   : 0;
            padding      : 4px 0px
        }

tr td.fgOff { /*  Turns 'off' the flex grow/shrink, use this on columns that also have a given width  */
    flex-grow  : inherit;
    flex-shrink: inherit;
    flex-basis : inherit;
}

.inEditMode .editfield {
    margin-right: 4px;
}

.inEditMode .fieldError {
    border: solid red 1px;
}


.jsgrid-filter-row {
    display: none;
}

.checkboxInLayerSelectorFix {
    position: relative !important;
    padding-left: 2px;
    height:0 !important;
}

.notifications {
    height: 50px;
    min-height: 50px;
    line-height: 50px;
}

@media screen and (max-width: 48.6875em) {
    .notifications {
        position: absolute;
        right: 42px;
    }
}

.modal-container {
    padding: 10px;
}

.dialog-wrapper {
    background: rgba(127, 127, 127, 0.35);
    position  : fixed;
    overflow  : hidden;
    display   : flex;
    padding   : 1.5rem;
    inset     : 0;
}

.dialog-container {
    border-radius: 6px;
    box-shadow   : 0px 0px 8px 0px #00000040;
  /*box-shadow   : 0 10px 20px -5px rgba(0,0,0,.15);*/
    background   : white;
    word-break   : break-word;
    max-height   : 100%;
    overflow     : auto;
    margin       : auto;
    color        : initial;
}


.fill-blue120{
    background-color: #043345;
    color: white;
}

wave-markdown {
    display: flex;
    flex-basis: 0;
    flex-grow: 1;
    overflow: hidden;
    padding: 10px;
    max-width: 1260px;
}

    wave-markdown code {
        color: rgb(255, 123, 0);
    }

    wave-markdown a {
        color: #2a9b9b;
    }

    wave-markdown img {
        max-width: 100%;
    }

    wave-markdown blockquote > p {
        font-size: initial;
        color: #000;
        margin: 0 20px;
        border-left: 5px solid gray;
        background: beige;
        padding: 10px;
        margin-bottom: 4px;
    }

.language-js, .language-html, .language-xml, .language.json, .language-css {
    word-break: break-word;
}

.menu .svgIcon > svg {
    width: 24px;
    height: 24px;
}

.menumini .itemTitle {
    visibility: hidden;
}

.menumini.showMenu .itemTitle {
    visibility: visible;
}