html, body {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Hind Siliguri', sans-serif !important;
    font-size: 14px;
}
input,
button,
select,
optgroup,
textarea
{
    font-size: 14px;
}
.btn, .dropdown-menu {
    font-size: 1em;
}

.header {
    background: rgb(62,67,68);
    height: 34px;
}

.logo {
    float: left;
    width: 34px;
    height: 34px;
    background-image: url(/Content/Images/logo/FHWA.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: left;
}
    .logo svg {
        width: 32px;
        height: 32px;
        margin-top: 1px;
        margin-left: 1px;
    }
.header-title {
    float: left;
    line-height: 32px;
    font-size: 26px;
    color: white;
}
.mapping-toolbar {
    float: right;
    width: 100%;
    height: 34px;
    background: rgb(62,67,68);
}

.above-toolbar {
    float: left;
    width: 100%;
    height: 20px;
}

.above-toolbar-links {
    float: right;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    font-size: 11px;
    color: white;
}

    .above-toolbar-links div, .above-toolbar-links a {
        float: left;
        padding-left: 6px;
        color: white;
    }

        .above-toolbar-links a:visited, .above-toolbar-links div a:visited {
            color: white !important;
        }

.main-toolbar-images {
    float: left;
}

    .main-toolbar-images img {
        margin: 4px;
        float: left;
        height: 24px;
        width: 24px;
    }

        .main-toolbar-images img:hover {
            background: #888888;
        }

    .main-toolbar-images .toolbar-separator {
        float: left;
        width: 15px;
        height: 24px;
    }

.tool-button-background {
    border-radius: 5px;
    border: 2px solid #c0c0c0;
    box-sizing: border-box;
}

.tool-button-background-old {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,b0b0b0+75,909090+100 */
    background: #A0A0A0; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e0e0e0 75%, #c0c0c0 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e0e0e0 75%,#c0c0c0 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 0%,#e0e0e0 75%,#c0c0c0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

    .tool-button-background-old.hover {
        border-color: #808080;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,b0b0b0+75,909090+100 */
        background: #ffffff; /* Old browsers */
        background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #b0b0b0 75%, #909090 100%); /* FF3.6-15 */
        background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#b0b0b0 75%,#909090 100%); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center, #ffffff 0%,#b0b0b0 75%,#909090 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#909090',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

.calcite-ui-icon-base {
    background-repeat: no-repeat;
    background-position: top center;
}
.calcite-ui-360view {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' %3E%3Cpath stroke='rgb(255,255,255)' fill='rgb(255,255,255)' stroke-width='1.00' \
    d='M22.8 18.6c0 1.812-3.58 2.923-7.8 3.276V24h-.216l-2.842-2.5 1.705-1.5L15 18.81v2.062c4.227-.37 6.8-1.469 6.8-2.272 0-.978-3.818-2.4-9.8-2.4s-9.8 1.422-9.8 2.4c0 .864 2.982 2.073 7.8 2.343v1.003c-4.637-.254-8.8-1.392-8.8-3.346 0-2.232 5.433-3.4 10.8-3.4s10.8 1.168 10.8 3.4zM12 3a41.552 41.552 0 0 0 11-1.685v13.37A41.552 41.552 0 0 0 12 13a41.552 41.552 0 0 0-11 1.685V1.315A41.552 41.552 0 0 0 12 3zm0 9a41.7 41.7 0 0 1 8.382.986l-4.698-3.765-1.245.933a1.376 1.376 0 0 1-1.708-.043l-2.27-1.891-2.288 2.289a1.38 1.38 0 0 1-1.402.334L4.884 12.73A40.364 40.364 0 0 1 12 12zm10-9.367A42.676 42.676 0 0 1 12 4 42.676 42.676 0 0 1 2 2.633v10.734c.36-.094.729-.182 1.1-.267l3.3-3.3a.377.377 0 0 1 .533 0 .377.377 0 0 0 .534 0l2.69-2.69a.377.377 0 0 1 .508-.023l2.706 2.256a.377.377 0 0 0 .468.012l1.633-1.225a.377.377 0 0 1 .493.035L22 13.002zM14.479 6.5h.043a.979.979 0 0 0 .978-.979A1.021 1.021 0 0 0 14.479 4.5a.979.979 0 0 0-.979.979v.043a.981.981 0 0 0 .979.978z' \
    /%3E%3C/svg%3E")
}

.calcite-ui-configure {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' %3E%3Cpath stroke='rgb(255,255,255)' fill='rgb(255,255,255)' stroke-width='1.00' \
    d='M11.969 14a1.237 1.237 0 0 0 .044.863l.061.137H8v-1zm5.183-3.25h1.65a1.216 1.216 0 0 1 .198.03V10H8v1h8.412a1.243 1.243 0 0 1 .74-.25zM19 6H8v1h11zM4 13h3v3H4zm1 2h1v-1H5zm5.75 3H2V3h19v9.077l.135-.06a1.1 1.1 0 0 1 .865-.039V2H1v17h9.773a1.201 1.201 0 0 1-.023-.152zM7 8H4V5h3zM6 6H5v1h1zm1 6H4V9h3zm-1-2H5v1h1zm14 8a2 2 0 1 1-2-2 2 2 0 0 1 2 2zm-1 0a1 1 0 1 0-1 1 1 1 0 0 0 1-1zm3.414 1.392l-.296.628.724 1.624-1.162 1.17-1.543-.71-.653.236-.636 1.66h-1.65l-.59-1.586-.628-.295-1.627.727-1.167-1.166.71-1.543-.236-.653-1.66-.636v-1.65l1.586-.59.295-.628-.727-1.627 1.166-1.167 1.543.71.653-.236.636-1.66h1.65l.59 1.586.628.296 1.624-.724 1.166 1.167-.705 1.538.235.653 1.66.636v1.65zm-1.277.523l.544-1.158 1.319-.49v-.582l-1.427-.548-.434-1.204.585-1.28-.412-.412-1.397.622-1.158-.544-.49-1.319h-.582l-.548 1.427-1.206.434-1.283-.59-.41.411.626 1.4-.545 1.161-1.319.49v.582l1.427.548.434 1.206-.59 1.283.411.41 1.4-.626 1.161.545.49 1.319h.582l.548-1.427 1.206-.434 1.28.588.411-.413z' \
    /%3E%3C/svg%3E")
}

.ui-tooltip-content {
    font-size: 12px;
}

.mapContainer {
    height: calc(100% - 34px);
    position: relative;
}
.full-map {
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.esri-view .esri-view-surface--inset-outline:focus::after {
    outline: none !important;
}

.loading-image {
    position: absolute;
    height: calc(100% - 180px);
    width: 100%;
    z-index: 20000;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(../../../Content/Images/mapping4/Loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

.esri-popup--is-docked {
    margin: 15px 50px 30px 15px;
}

.esri-search {
    width: 300px;
}

.esri-popup__header-title {
    font-size: 16px;
}

.esri-basemap-gallery {
    max-width: none;
    height: 100%;
}

.esri-basemap-gallery__item {
    padding: 5px 7px;
}

.esri-search__sources-menu {
    z-index: 20000;
}

/*.esri-popup__main-container {
    width: 550px !important;
}
*/
#searchDiv-suggest-menu {
    z-index: 10010 !important;
}

span, label, div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.donotshow {
    display:none;
}

/***************** ‍‍generic toolbar and tool buttons *****************/
.mapping-toolbar {
    float: right;
    width: 100%;
    height: 34px;
    background: #1d232b;
}

.above-toolbar {
    float: left;
    width: 100%;
    height: 20px;
}

.above-toolbar-links {
    float: right;
    height: 20px;
    line-height: 20px;
    margin-right: 5px;
    font-size: 11px;
    color: white;
}

    .above-toolbar-links div, .above-toolbar-links a {
        float: left;
        padding-left: 6px;
        color: white;
    }

        .above-toolbar-links a:visited, .above-toolbar-links div a:visited {
            color: white !important;
        }

.main-toolbar-images {
    float: left;
}

    .main-toolbar-images img {
        margin: 4px;
        float: left;
        height: 24px;
        width: 24px;
    }

        .main-toolbar-images img:hover {
            background: #888888;
        }

    .main-toolbar-images .toolbar-separator {
        float: left;
        width: 15px;
        height: 24px;
    }

.tool-button-background {
    border-radius: 5px;
    border: 2px solid #c0c0c0;
    box-sizing: border-box;
}

.tool-button-background-old {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,b0b0b0+75,909090+100 */
    background: #A0A0A0; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e0e0e0 75%, #c0c0c0 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e0e0e0 75%,#c0c0c0 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 0%,#e0e0e0 75%,#c0c0c0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0c0c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

    .tool-button-background-old.hover {
        border-color: #808080;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,b0b0b0+75,909090+100 */
        background: #ffffff; /* Old browsers */
        background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #b0b0b0 75%, #909090 100%); /* FF3.6-15 */
        background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#b0b0b0 75%,#909090 100%); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center, #ffffff 0%,#b0b0b0 75%,#909090 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#909090',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

.top-toolbar {
    float: right;
    width: 470px;
}

.toolbar-button-div {
    height: 34px;
    width: 34px;
    float: left;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

    .toolbar-button-div:hover {
        background-color: #888888
    }

    .toolbar-button-div.selected {
        background-color: #888888
    }

#searchDiv {
    float: left;
    margin-top: 1px;
}

.header-toolbar-tooltip, .header-toolbar-tooltip-triangle {
    position: absolute;
    z-index: 10002;
}

.header-toolbar-tooltip {
    height: 25px;
    min-width: 100px;
    max-width: 200px;
    background-color: #323741;
    box-sizing: border-box;
    color: #edf4f7;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    padding: 0 15px;
}

.header-toolbar-tooltip-triangle {
    width: 0;
    height: 0;
    display: inline;
    border-style: solid;
    border-width: 0 10px 5px 10px;
    border-color: transparent transparent #323741 transparent;
}
/***************** ‍‍end generic toolbar and tool buttons *****************/


/***************** ‍‍side nav *****************/
.sidenav {
    height: 100%;
    height: calc(100% - 35px);
    position: fixed;
    z-index: 99;
    top: 35px;
    right: -320px;
    overflow: hidden;
    transition: 0.25s;
    color: #404040;
    box-sizing: border-box;
}

    .sidenav.standard-width {
        width: 354px;
    }

    .sidenav.double-width {
        width: 434px;
    }

    .sidenav .closebtn {
        z-index: 10002;
        position: absolute;
        top: -5px;
        right: 16px;
        font-size: 36px;
    }

        .sidenav .closebtn a {
            text-decoration: none;
            color: #404040;
            display: block;
            transition: 0.3s;
        }

    .sidenav #sidenavcontent {
        float: right;
        background-color: #f0f0f0;
        height: 100%;
    }

@media screen and (max-height: 720px) {
    .sidenav #sidenavcontents {
        overflow-y: auto;
    }
}

.sidenav #sidenavcontent #sidenav_defaultContent {
    font-size: 16px;
    font-weight: bold;
}

.sidenav #sidenavcontent .sidenav_content_tool_title {
    font-size: 16px;
    font-weight: bold;
    background: rgb(62,67,68);
    padding: 5px;
    color: white;
    text-align: center;
    position: relative;
}

    .sidenav #sidenavcontent .sidenav_content_tool_title img {
        position: absolute;
        right: 8px;
        top: 8px;
        height: 20px;
    }

.sidenav #sidenavcontent .sidenav_content {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}
.sidenav #sidenavcontent > div.sidenav_content {
    border-left: 1px solid #404040;
}

@media screen and (max-height: 720px) {
    .sidenav #sidenavcontent .sidenav_content {
        height: 100%;
        overflow-y: auto;
    }
}

.sidenav #sidenavcontent .sidenav_content::after {
    content: "";
    clear: both;
    display: table;
}

.sidenav #sidenavcontent .sidenav_content.ui-tabs {
    padding: 0;
}


.sidenav #sidenavcontent .sidenav_content .ui_tabs::after {
    content: "";
    clear: both;
    display: table;
}

#sidenavcontent.standard-width {
    width: 320px;
}

#sidenavcontent.double-width {
    width: 400px;
}

.sidenav .sidenav_content .sidenav_tool_enclosure {
    height: calc(100% - 36px);
    overflow: auto;
}

@media screen and (max-height: 720px) {
    .sidenav .sidenav_content .sidenav_tool_enclosure {
        height: unset;
    }
}

@media screen and (max-height: 720px) {
    .sidenav_tool_enclosure {
        height: unset;
    }
}

.sidenav .sidenav_content .sidenav_tool_enclosure .big_button_caption {
    width: 200px;
    display: inline-block;
}


.sidenav .ui-grid-a .ui-block-a {
    float: none;
    padding-bottom: 5px;
    width: auto;
    border-right: 0;
    font-weight: bold;
}

.sidenav .ui-grid-a .ui-block-b {
    float: none;
    margin: 0;
    padding-top: 0;
    width: auto;
    border-left: 0;
}

.input-line-group {
    margin-bottom: 10px;
    float: left;
    width: 100%;
    height: auto
}

.sidenav .input-line-group > span:first-child {
    width: 100%;
    display: inline-block;
}

.sidenav .input-line-group > input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.sidenav .input-line-group > select {
    width: 100%;
    box-sizing: border-box;
}

.sidenav .input-line-group > img {
    vertical-align: middle;
}

.sidenav-toolbar {
    float: left;
    width: 34px;
}

.sidenav-tools {
    background: rgb(62,67,68);
    position: absolute;
    top: 36px;
    width: 34px;
    cursor: pointer;
    color: white;
    border-radius: 5px 0 0 5px;
}

.sidenav-tool {
    height: 34px;
    width: 34px;
    box-sizing: border-box;
    text-align: center;
    float: left;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.esri-icon-sidenav-button {
    width: 34px;
    height: 34px;
    font-size: 24px;
    margin-top: 6px;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: block;
    height: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.sidenav-toolbar-overlay {
    height: 34px;
    width: 34px;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 2;
}

    .sidenav-toolbar-overlay.selected {
        opacity: 0.3;
    }

    .sidenav-toolbar-overlay:hover {
        opacity: 0.3;
    }

.sidenav-toolbar-tooltip {
    position: absolute;
    height: 34px;
    width: 150px;
    background-color: #1d232b;
    box-sizing: border-box;
    color: #edf4f7;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
}

.sidenav-toolbar-tooltip-triangle {
    position: absolute;
    width: 0;
    height: 0;
    display: inline;
    border-style: solid;
    border-width: 17px 0 17px 17px;
    border-color: transparent transparent transparent #1d232b;
}

.sidenav-tools div svg {
    overflow: visible;
    width: 0.625em;
}

.chevron-right:before {
    content: "\f054";
}

.chevron-left:before {
    content: "\f053";
}

.bottomnav {
    height: 0;
    width: calc(100% - 350px);
    position: fixed;
    z-index: 10000;
    bottom: 0;
    left: 0;
    overflow-y: hidden;
    transition: 0.5s;
    color: #404040;
    background-color: #f0f0f0;
    box-shadow: -5px -5px 5px #404040;
    box-sizing: border-box;
}

    .bottomnav.open {
        height: 250px;
    }

    .bottomnav .closebtn {
        z-index: 10002;
        position: absolute;
        top: -5px;
        right: 16px;
        font-size: 36px;
    }

        .bottomnav .closebtn a {
            text-decoration: none;
            color: #404040;
            display: block;
            transition: 0.3s;
        }

    .bottomnav #bottomnavcontent {
        padding: 8px;
        padding-top: 5px;
        float: left;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

        .bottomnav #bottomnavcontent #bottomnav_defaultContent {
            font-size: 16px;
            font-weight: bold;
        }

        .bottomnav #bottomnavcontent .bottomnav_content_tool_title {
            font-size: 16px;
            font-weight: bold;
            background: #b0b0b0;
            padding: 5px;
            margin-bottom: 5px;
        }

        .bottomnav #bottomnavcontent .bottomnav_content.ui-tabs {
            padding: 0;
        }

    .bottomnav .bottomnav_content .bottomnav_tool_enclosure {
        margin: 25px;
    }

        .bottomnav .bottomnav_content .bottomnav_tool_enclosure .big_button_caption {
            width: 200px;
            display: inline-block;
        }

.bottomnav_content {
    height: 100%;
}

.bottomnav .ui-grid-a .ui-block-a {
    float: none;
    padding-bottom: 5px;
    width: auto;
    border-right: 0;
    font-weight: bold;
}

.bottomnav .ui-grid-a .ui-block-b {
    float: none;
    margin: 0;
    padding-top: 0;
    width: auto;
    border-left: 0;
}

.bottomnav .input-line-group > span:first-child {
    width: 100px;
    display: inline-block;
}

.bottomnav .input-line-group > input[type="text"] {
    width: 169px;
}

.bottomnav .input-line-group > img {
    vertical-align: middle;
}

/* misc classes for side panel */
*:focus {
    outline: none;
}

.bold {
    font-weight: bold;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt40 {
    margin-top: 40px;
}

.mt80 {
    margin-top: 80px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.ml10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.vam {
    vertical-align: middle;
}

.fll {
    float: left;
}

.rt {
    text-align: right;
}

.select-location-tool-option img {
    width: 50px;
    padding: 10px;
}


.side-panel-button {
    color: #555;
    font-weight: 700;
    font-size: 14px !important;
    text-shadow: 0 1px 0 rgb(255 255 255 / 80%);
    text-decoration: none;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #bcbcbc;
    -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    background-color: #ebebeb;
}

    .side-panel-button:active, .side-panel-button:active:after, .side-panel-button:active:before {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .side-panel-button:hover {
        color: #222;
    }

.buttonIcon {
    background-repeat: no-repeat;
    background-position: left;
    background-position-x: 8px;
    padding-left: 30px;
    padding-right: 30px;
    background-size: 16px 16px;
}

    .buttonIcon.loadingicon {
        background-image: url(/Content/Images/mapping4/loading_small.gif);
    }

/***************** ‍‍end side nav *****************/
/************ ESRI widget ************/
.esri-layer-list__item-actions-menu-item--active, .esri-layer-list__item-actions-menu-item--active:hover {
    background-color:unset;
}
.esri-layer-list__item-container {
    padding: 6px 3px 6px 10px;
}
.esri-layer-list-panel {
    margin: 2px 10px;
}
.esri-legend__layer-table {
    margin-bottom: 3px;
}
.esri-layer-list-panel__content--legend .esri-legend__service
{
    padding: 0 0 3px 0;
}
.esri-icon-non-visible::before {
    content: "\e610";
}

.esri-icon-visible::before {
    content: "\e611";
}
‍‍‍‍‍‍.esri-popup__main-container.esri-widget {
    max-width: 330px;
}
.esri-layerlist-manual-insert-item {
    padding: 5px 3px 5px 8px;
    margin: 2px 2px 1px 2px;
    background: white;
    border-bottom: 1px solid rgba(110,110,110,.3);
    display:inline-flex;
    cursor: pointer;
}
/***************** ‍toc *****************/
.toc-div {
    float: left;
    width: 100%;
    box-sizing: border-box;
}

ul.toc {
    list-style: none;
    font-size: small;
    margin: 0;
    padding: 0 0 0 15px;
}

    ul.toc.mapservice {
        margin: 0;
        padding: 0 0 8px 0;
    }

.toc li {
    padding: 2px 0;
    padding-left: 5px;
}

    .toc li input[type=checkbox] {
        margin: 4px 4px 0 0;
    }

    .toc li .tocServiceTitle {
        font-weight: bold;
    }

    .toc li .tocLayerSlider {
        display: inline-block;
        width: 80px;
        margin-left: 5px;
    }

    .toc li .actionmenu {
        display: block;
        margin: 4px 0 2px 27px;
    }

        .toc li .actionmenu .actionmenuicon {
            margin-right: 4px;
            border: 1px solid #606060;
            border-radius: 2px;
        }

    .toc li .assetactionmenu {
        display: block;
        margin: 4px 0 0 0;
        padding-left: 26px;
    }

        .toc li .assetactionmenu .actionmenuicon {
            margin-right: 4px;
            border: 1px solid #606060;
            border-radius: 2px;
        }

.toc .treeicon {
    vertical-align: baseline;
    margin-left: -4px;
}

.legend-image {
    margin-right: 2px;
}

.legend-span {
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: 23px;
}

.legend-dialog {
    display: none;
    height: 350px;
    width: 300px;
    position: absolute;
    left: 20px;
    bottom: 20px;
    background: white;
}

.legend-dialog-collapsed {
    height: 25px;
    width: 150px;
}

.legend-dialog-title {
    float: left;
    height: 25px;
    width: 100%;
    border-bottom: 1px solid lightgray;
}

    .legend-dialog-title span {
        float: left;
        line-height: 25px;
        margin-left: 8px;
        color: #777777;
    }

.legend-toggle {
    margin: 8px;
    float: right;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.legend-toggle-up {
    border-bottom: 9px solid #777777;
}

.legend-toggle-down {
    border-top: 9px solid #777777;
}

#legendWidgetDiv {
    float: left;
    height: 325px;
    width: 100%;
}

.legend-widget-div-collapsed {
    height: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-minimize,
.ui-dialog .ui-dialog-titlebar-restore {
    width: 20px !important;
    height: 20px !important;
    margin-right: 2px;
}

.assetTocTruncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: inline-block;
    line-height: 13px;
}

.legend-description, .toc-description {
    font-size: 11px;
    font-style: italic;
}

.legend-description {
    margin-left: 5px;
}

.toc-description {
    margin-left: 30px;
}

.toc-assets-custom {
    margin-bottom: 10px;
}

    .toc-assets-custom span {
        float: left;
        font-size: 14px;
        font-weight: bold;
    }

    .toc-assets-custom select {
        width: calc(100% - 60px);
        margin: 5px 0;
        float: left;
    }

    .toc-assets-custom button {
        width: 50px;
        height: 23px;
        margin: 5px;
        float: left;
    }

    .toc-assets-custom div {
        float: left;
        color: red;
        line-height: 15px;
        font-style: italic;
        display: none;
        cursor: pointer;
    }

.save-assetView-dialog {
    display: none;
}

    .save-assetView-dialog input {
        float: left;
        width: 100%;
        margin-top: 5px;
    }
/***************** ‍‍end toc *****************/

/***************** ‍‍measure tools *****************/
.measure-tools {
    text-align: center;
}

    .measure-tools div {
        display: inline-block;
        float: none;
    }

.measure-tooltip {
    text-align: center;
    font-style: italic;
    font-size: 11px;
    background: ivory;
    border-radius: 4px;
}

.measure-results {
    display: none;
    width: 100%;
    height: 100px;
    margin-top: 10px;
    text-align: center;
    padding-top: 10px;
}

    .measure-results span {
        font-weight: 700;
        font-size: 16px;
    }
/***************** ‍‍end measure tools *****************/

/******************* Identify tool ********************/
.id-button-div,
.identify-radio-div,
#identify-noresult,
#loading-results,
#identify-results {
    float: left;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 5px 0;
}

    #identify-results #identify-resultnum {
        text-align: right;
        font-weight: bold;
        margin: 0 7px;
    }

    #identify-results #identify-table a,
    #identify-results #identify-table a:visited,
    #identify-results #identify-table a:active {
        text-decoration: none;
        color: #0077cc;
        font-weight: bold;
    }

        #identify-results #identify-table a:hover {
            text-decoration: underline;
        }

.id-button-div {
}

.identify-radio-div {
}

    .identify-radio-div label:not(:first-of-type) {
        margin-left: 10px;
    }

    .identify-radio-div input[type="radio"] {
        margin-top: -1px;
        vertical-align: middle;
    }

#identify-noresult,
#loading-results,
#identify-results {
    display: none;
}

    #identify-noresult span {
    }

#identify-results {
    height: calc(100% - 110px);
}

#identify-table {
    display: block;
    margin: 0 5px;
    overflow-y: auto;
    max-height: calc(100% - 55px);
    float: left;
    width: calc(100% - 10px);
    box-sizing: border-box;
    border: 1px solid rgb(128,128,128);
}

    #identify-table .row {
        background-color: #e6e6e6;
    }

    #identify-table .row-alt {
        background-color: #f5f5f5;
    }

    #identify-table a,
    #identify-table a:visited,
    #identify-table a:active {
        text-decoration: none;
        color: #0077cc;
        font-weight: bold;
    }

        #identify-table a:hover {
            text-decoration: underline;
        }

    /* fluid table */
    #identify-table .ui-grid-a {
        margin-top: -1px;
        border: 1px solid rgb(221,221,221);
        overflow: hidden;
        color: Black;
    }

        #identify-table .ui-grid-a:first-child {
            margin-top: 0px;
        }

        #identify-table .ui-grid-a > :nth-child(n) {
            margin: 0px;
        }

        #identify-table .ui-grid-a > :nth-child(n + 2) {
            border-left: 1px solid rgb(221,221,221);
            margin-left: -1px;
        }

        #identify-table .ui-grid-a .ui-block-a {
            box-sizing: border-box; /* force css to include paddding border margin during size calculation */
            -moz-box-sizing: border-box; /* Firefox */
            clear: left;
            width: 50%;
            border-right: 1px solid rgb(221,221,221);
            text-align: left;
            padding: 5px;
        }

        #identify-table .ui-grid-a .ui-block-b {
            box-sizing: border-box; /* force css to include paddding border margin during size calculation */
            -moz-box-sizing: border-box; /* Firefox */
            width: 50%;
            text-align: left;
            padding: 5px;
        }

        #identify-table .ui-grid-a .ui-block-all {
            box-sizing: border-box; /* force css to include paddding border margin during size calculation */
            -moz-box-sizing: border-box; /* Firefox */
            clear: left;
            width: 100%;
        }

    #identify-table .ui-block-a,
    #identify-table .ui-block-b,
    #identify-table .ui-block-all {
        padding: 1px 5px;
        border: 0px none;
        float: left;
        min-height: 1px;
        -moz-box-sizing: border-box;
        word-wrap: break-word;
    }
/******************* End Identify tool ********************/

/******************* message box ********************/
.nonModalDialog {
    background: rgba(255, 224, 130, 0.75);
    padding: 4px;
    width: 350px;
    height: auto;
    position: absolute;
    right: 18px;
    bottom: 32px;
    border: 2px solid #F9A825;
    border-radius: 5px;
    z-index: 20000;
}

    .nonModalDialog .nonModalDialog-message {
        word-wrap: break-word;
        font-size: medium;
        font-weight: 600;
        color: black;
        margin: 0;
        padding: 6px;
    }

.confirmDialog {
    z-index: 21000;
}
/******************* end message box ********************/


/******************* function class panel ********************/
.function-tool-panel-content {
    padding: 25px;
}
#function-class-form .section-header {
    font-size: 1.1em;
}
#function-class-form input[type='text'] {
    width: 100%;
}
#function-class-form input[type='text'][readonly] {
    background: #e0e0e0;
}
#function-class-form textarea {
    resize: none;
    width: 100%;
}
#function-class-form input[type='text']:has(+ img.btn-select-point) {
    width: 80%;
    width: calc(100% - 40px);
}
#function-class-form .btn-select-point {
    width: 32px;
    height: 32px;
    margin-left: 5px;
    border: 1px solid grey;
    border-radius: 4px;
}
    #function-class-form .btn-select-point.selected {
        background: rgba(102,153,153,0.5);
    }
#function-class-form .btn-select-point:hover {
    background: rgba(68,180,255,0.5);
}
#function-class-form button {
    float: right;
    margin-left: 5px;
}
#function-class-form .selectlist {
    padding: 2px;
}
#function-class-form .field-label {
    font-size: 90%;
    font-weight: bold;
}
/******************* end function class panel ********************/