@font-face {
    font-family: 'Lato';
    src: url('../../Fonts/Lato-Regular.ttf') format('truetype');
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.2;
    color: #333333;
    background-color: #ffffff;
    font-size: 14px;
}

#iKeepAlive {
    position: absolute;
}

fieldset legend {
    visibility: hidden;
    margin-bottom: -1.5em;
}

.bold-text {
    font-weight: bold;
}

.underlined-text {
    text-decoration: underline;
}

.italicised-text {
    font-style: italic;
}

.row-no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.label-no-bold label {
    font-weight: 400;
    margin-left: 4px;
}

/*Bootstrap button overrides*/
.btn {
    padding: .275rem .75rem;
}

.btn-sm {
    padding: .15rem .5rem;
}

.btn-light {
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background-color: #e2e6ea;
}

    .btn-light:hover {
        border-color: #212529;
    }

.btn.disabled, .btn:disabled {
    opacity: 0.45;
}

/* CAMSWebGrid */
.gridview-pageSize label {
    margin-right: 5px;
    font-weight: bold;
}

.grid-controls {
}

    .grid-controls .percent-80 {
        width: 80% !important;
        margin-top: -2px;
    }

    .grid-controls.bar {
        /*width: 99.99%;*/
        float: left;
        padding-bottom: 5px;
        padding-top: 5px;
    }

    .grid-controls.filter {
        padding-top: 2px;
        min-width: 15em;
    }

@media (min-width: 768px) {
    .grid-controls.filter {
        width: 20em;
    }
}

.grid-controls.filter label {
    color: #000000;
    font-weight: bold;
}

.grid-controls.crud {
    float: right;
    margin-left: 10px;
}

.grid-filter-button {
    margin: 0 0.2em;
}

    .grid-filter-button span {
        margin-left: 0.2em;
    }

.grid-filter .grid-filter {
    padding: 1em;
    padding-bottom: 0;
}

.grid-filter .filter-submit-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1em;
}

    .grid-filter .filter-submit-container .filter-submit {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

.grid-controls.filter.pull-right select {
    float: right;
    width: 80% !important;
}

.gridImageCentred {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*Library link document control*/
.ll_document_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.ll_document_column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
}

.ll_document_item {
    margin: 1em 0;
}

.ll_document_label {
    word-wrap: break-word;
    font-size: 0.8em;
}

.ll_document_list {
    padding: 0 0 0 1em;
    margin-top: -1em;
}

.ll_document_list_item {
    word-wrap: break-word;
}

/* jQuery UI Overrides */
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    padding: 0 !important;
}

/* Print map button */
.print-map {
    position: relative;
    margin-top: 3px;
    float: right;
    margin-bottom: -31px;
    margin-right: 3px;
}

.ui-dialog .ui-dialog-title {
    overflow: visible;
}

/* Bootstrap Forms - Start */
.popup-form .confirmation-message {
    margin-top: 10px;
}

.popup-form input[type=text], .popup-form textarea, .popup-form select {
    background-color: #FFFFEE;
    border-width: 1px;
    border-color: #A7A7A7;
    border-style: solid;
    padding-left: 3px;
}

select:disabled, select.aspNetDisabled {
    background-color: #f2f2f2 !important;
    color: #888888 !important;
}

.popup-form input:read-only, .popup-form input:disabled {
    background-color: #cccccc;
}

.popup-form .formLabel.short {
    width: 6em !important;
}

.popup-form .formLabel.quite-short {
    width: 4em !important;
}

.popup-form .formLabel.very-short {
    width: 3em !important;
}

.popup-form .formLabel.tiny {
    width: 1.3em !important;
}

.popup-form .more-space {
    margin-top: 0px;
    margin-bottom: 12px; /*Default 15px */
}

.popup-form .no-top-margin {
    margin-top: 0px;
}

.popup-form .grid-view {
    margin-top: 0px;
    margin-bottom: 0px;
}

.for-col-1 {
    width: 3.7em;
}

.for-col-2 {
    width: 5em;
}

.for-col-4 {
    width: 6em;
}

.for-col-5 {
    width: 11em;
}

.for-col-6 {
    width: 15em;
}

.for-col-7 {
    width: 20em;
}

.for-col-8 {
    width: 25em;
}

.for-col-9 {
    width: 30em;
}

.for-col-10 {
    width: 35em;
}

.for-col-11 {
    width: 43em;
}

.for-col-12 {
    width: 45em;
}

.popup-form a.btn.btn-primary {
    color: #ffffff;
}

.popup-form a.btn.btn-light {
    color: #212529;
}

.popup-form .row {
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
}

.form-group {
    margin-bottom: 5px; /*Default 15px */
}

.close-button {
    position: absolute;
    right: -3px;
    top: -9px;
}

.short {
    width: 30px;
}

.date-field {
    width: 90px;
}

.date-icon {
    margin-left: -6px;
    margin-top: -2px;
    color: #A7A7A7;
}

.popup-form .grid-view {
    overflow-x: scroll;
}

.ui-dialog .ui-dialog-title {
    font-size: 1.5em;
    font-weight: lighter;
    color: #333333;
}

.popup-form .formLabel {
    font-weight: lighter;
}

.popup-form .button-right {
    float: right;
    margin-left: 5px;
}

.popup-form .full-width {
    max-width: none;
    width: 70%;
}
/* Bootstrap Forms - End */

/* Error Indicators - Rename this! */
.CAMSWebErrMsg {
    color: #FF0000;
    font-weight: bold;
    font-size: 1.2em;
}

/* Action Panels (Panels revealing more options for records selected in grids. These normally use some default bootstrap styling alerts etc) */
.action-panel {
    display: block;
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

.paging-nav-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.row-item-hide {
    display: none !important;
}

/* Grid Paging */

.grid-view th.gridview-sortable:after {
    content: '\f0dc';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    margin: 0px 0px 0px 4px;
    text-decoration: none;
}

.gridview-sortAsc:after {
    content: '\f0de' !important;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    margin: 0px 0px 0px 4px;
    text-decoration: none;
}

.gridview-sortDesc:after {
    content: '\f0dd' !important;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    margin: 0px 0px 0px 4px;
    text-decoration: none;
}

.gridview-pageContainer {
    float: left;
}

.gridview-pageSize {
    float: right;
}

    .gridview-pageSize select {
        display: inline-block;
        width: auto;
        font-size: 0.8rem;
    }

.grid-cell.centered {
    text-align: center;
}

.pagination {
    margin: 0;
    margin-bottom: 4px;
}

.page-link {
    line-height: 1;
}

.myRoutesContainer {
    padding: 8px;
}

    .myRoutesContainer > div {
        padding-right: 4px;
        padding-left: 4px;
    }

        .myRoutesContainer > div > div {
            margin-bottom: 4px;
        }

            .myRoutesContainer > div > div > div {
                height: 180px;
            }

                .myRoutesContainer > div > div > div > div > div {
                    padding: 0 6px;
                }

    .myRoutesContainer span {
        font-size: 12px;
    }

    .myRoutesContainer h4 span {
        font-size: 16px;
    }

    .myRoutesContainer h4 {
        margin-top: 0px;
    }

        .myRoutesContainer h4 a {
            color: white;
        }

    .myRoutesContainer img {
        border-radius: 6px;
    }

/* Neat upload IE11 issue */
embed {
    opacity: 0.1 !important;
}

.form-validation-summary {
    font-weight: bold;
}

.clear-both {
    clear: both;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.text-align-right {
    text-align: right;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
}

/*     font-size: 4rem; */
h1 {
    font-size: 30px;
    font-weight: 900;
    margin: 0rem 0 0.8rem;
}

/*     font-size: 3.2rem; */
h2 {
    font-size: 25px;
    font-weight: 900;
    margin: 0rem 0 0.8rem;
}

/*     font-size: 2.5rem; */
h3 {
    font-size: 20px;
    font-weight: 900;
    margin: 0rem 0 0.8rem;
}

h4, h5, h6 {
    font-weight: 900;
}

.language-switch {
    display: none;
}

.outer-wrap {
    width: 988px;
    margin: auto;
    background-color: #ffffff;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;
}

.header {
    background-color: #1f683d;
    height: 110px;
}

.header-logo {
    padding-top: 24px;
    margin-left: 30px;
}

.user-details {
    float: right;
    font-size: 0.7em;
    color: #999999;
    text-align: right;
    line-height: 0.8em;
    width: 100%;
    line-height: 0.8em;
}

.main-wrap {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    clear: both;
    width: auto;
    min-height: 79vh;
    max-width: unset;
}

.page-content {
    float: right;
    width: 100%;
}

.sidebar-nav {
    width: 25%;
    float: left;
}

    .sidebar-nav .navbar-light, .sidebar-nav .navbar-collapse {
        background-color: transparent;
        border-color: transparent;
        border-radius: 0px;
        margin: 0px;
        padding: 0px;
        max-width: 100%;
    }

.navbar-nav .nav-item {
    float: none;
    width: 100%;
}

.navbar-nav .nav-link {
    padding: 5px;
}

.main-content {
    margin-left: 26%; /* Allow left navigation */
}

.user-details {
    float: right;
    font-size: 0.7em;
    color: #999999;
    text-align: right;
    line-height: 0.8em;
    width: 100%;
    line-height: 0.8em;
}

.map-wrapper {
    display: block;
    float: right;
    width: 100%;
}

/* Map Legend */
.map-legend {
    display: block;
    margin-bottom: 10px;
    margin-top: -2px;
    border: 1px;
    border-style: solid;
    border-color: black;
    padding: 0;
}

    .map-legend .legend-item {
        height: 2rem;
        color: #909090;
    }

        .map-legend .legend-item img {
            margin-right: 10px;
        }

    .map-legend hr {
        margin: 0px;
        border: 0;
        border-top: 1px solid #eee;
    }

.mapLegendBar {
    background-color: #535353;
    width: 100%;
    padding: 4px;
}

.map-legend-toggle {
    color: #fff;
}

    .map-legend-toggle:hover {
        color: #fff;
    }

.ESDMMap_MapLegend {
    margin: 10px;
}

.map-div {
    /* Height and width must be set on the html for OpenLayers to pick up the settings */
    position: relative;
    border: 1px solid #1F683D;
    width: 100%;
    height: 500px;
    background-color: #f9f9f9;
}

    .map-div .north-arrow {
        padding: 5px;
        position: absolute;
        bottom: 60px;
        left: 5px;
        z-index: 100;
    }

.marque-zoom-text {
    margin-top: 10px;
    display: block;
    width: 100%;
}

.map-license-text {
    float: right;
    font-size: 0.7em;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #999999;
    width: 100%;
}

.ol-full-screen {
    display: none;
}

.ol-attribution {
    display: none;
}

.user-control {
    background-color: #f9f9f9;
    width: 25%;
    display: block;
    clear: left;
    margin-top: 10px;
    padding: 5px;
}

    .user-control .control-button {
        width: 100%;
        white-space: normal;
    }

    .user-control .control-textbox {
        width: 100%;
    }

.footer {
    display: block;
    background-color: #1f683d;
    clear: both;
    color: #ffffff;
    height: 120px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #327B50;
}

    .footer .footer-site-information {
        margin-top: 20px;
    }

.version-control {
    clear: both;
    text-align: right;
    font-size: 11px;
    margin-top: 10px;
    display: block;
    width: 100%;
}

/* Grid views */
.footable > tbody > tr > td {
    padding: 2px !important; /* Override */
}

.footable > thead > tr > th {
    padding: 2px !important; /* Override */
}

.grid-view {
    width: 100%; /* This width and the td width may need to be adjusted depending on the client page  */
    text-align: center;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #666666;
}

    .grid-view th {
        background-color: #f9f9f9;
        border: 1px solid #cccccc;
        padding: 1px;
        margin: 1px;
        font-weight: bold !important;
        white-space: pre-line !important;
        text-align: left;
    }

    .grid-view td {
        border: 1px solid #ccc;
        padding: 1px;
        margin: 1px;
        text-align: left;
    }

    .grid-view a {
        color: #ffffff;
        text-decoration: underline;
    }

    .grid-view.footable-details a {
        color: #666666;
        text-decoration: none;
    }

    .grid-view.footable-details tr.selected {
        background-color: #FFFFFF;
        color: #666666;
    }

    .grid-view .oddRow {
        background-color: #EEE;
    }

    .grid-view .evenRow {
        background-color: #FFFFFF;
    }

    .grid-view tr:hover, .grid-view tr:focus {
        cursor: pointer;
        background-color: #FFFF99 !important;
    }

/* Work actions panel */
.task-panel {
    padding: 10px;
    margin-bottom: 10px;
    clear: both;
}

    .task-panel p {
        font-size: smaller;
        font-weight: 600;
    }

.show-all-tasks {
    margin: auto;
    width: 13em;
}

/* ESDM.CAMS.Forms.js - Popup Dialog Forms*/
.popup-form {
    width: 100%;
    overflow-x: hidden;
}

.hideOffScreen {
    position: absolute;
    left: -20000px;
}

.popup-form p {
    margin: 0px;
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    outline: none;
}

.popup-form h3 {
    font-weight: bold;
    margin-top: 1rem;
}

.popup-form .confirmation-title {
    font-weight: bold;
}

.popup-form.panel.show {
    display: block;
}

.popup-form.panel.hide {
    display: none;
    visibility: hidden;
}

.popup-form.modal.show {
    display: block;
    position: absolute;
    z-index: 50;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    top: 0;
    left: 0;
}

.popup-form .form-feedback, .form-feedback {
    border: 1px solid #000000;
    display: block;
    text-align: center;
    background-color: #f9f9f9;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    clear: both;
    margin-top: 10px;
    display: block;
    float: left;
    width: 100%;
}

    .popup-form .form-feedback.fail {
        border-color: #990000;
        background-color: #FFCCCC;
        color: #990000;
    }

    .popup-form .form-feedback.warning {
        border-color: #993300;
        background-color: #FFCC99;
        color: #993300;
    }

    .popup-form .form-feedback.success {
        border-color: #003300;
        background-color: #CCFFCC;
        color: #003300;
    }

.popup-form .button, .standard-button, a.standard-button {
    display: block;
    padding: 10px;
    background-color: #938B82;
    min-width: 90px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: none;
    margin-top: 10px;
    text-decoration: none;
}

    .popup-form .button:hover, .standard-button:hover, a.standard-button:hover {
        text-decoration: none;
        color: #ffffff;
        background-color: #2b592b;
    }

.popup-form .button {
    float: right;
    font-size: 0.81em;
}

    .popup-form .button.right {
        float: right;
    }

.popup-form .modal.hide {
    display: none;
    visibility: hidden;
}

.popup-form .validation-summary {
    border: 1px solid #000000;
    display: block;
    background-color: #f9f9f9;
    border-color: #FFDB4B;
    background-color: #FFFFDF;
    color: #FF5602;
    text-align: left;
    clear: both;
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 2px;
    margin-top: 12px;
    margin-bottom: 6px;
}




/* Overlay displayed when changing page in the navigation */
.esdm-page-blur {
    background-position: center center;
    width: 100%;
    background-color: #ffffff;
    moz-opacity: 0.5;
    khtml-opacity: .5;
    opacity: .5;
    filter: alpha(opacity=50);
    z-index: 120;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('../../Images/ESDMForms-ajax-loader.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Overlay displayed on form while data is loading */
.esdm-form-blur {
    width: 100%;
    background-color: #ffffff;
    moz-opacity: 0.5;
    khtml-opacity: .5;
    opacity: .5;
    filter: alpha(opacity=50);
    z-index: 120;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
/* Overlay image displayed on form while data is loading */
.esdm-form-rotator {
    background-image: url('../../Images/ESDMForms-ajax-loader.gif');
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    moz-opacity: 0.5;
    khtml-opacity: .5;
    opacity: .5;
    filter: alpha(opacity=50);
    float: right;
    overflow: visible;
    position: relative;
    z-index: 1000;
    height: 45px;
    width: 100%;
}

/* Login page */
.form-header {
    background-color: #f2f2f2;
}

    .form-header h1, .form-header h2, .form-header h3, .form-header h4, .form-header h5, .form-header h6 {
        margin: 0px;
        padding: 0px;
        padding-left: 9px;
        padding-top: 5px;
        padding-bottom: 7px;
    }

.form-wrapper {
    background-color: #f9f9f9;
    padding: 10px;
}

    .form-wrapper .default-button {
        min-width: 160px;
        width: 160px;
    }

    .form-wrapper .form-textbox {
        width: 25rem;
    }

        .form-wrapper .form-textbox.half {
            width: 13rem;
        }

        .form-wrapper .form-textbox.quarter {
            width: 7rem;
        }

    .form-wrapper .required-fields {
        font-weight: bold;
        font-size: 0.9em;
    }

    .form-wrapper .form-label {
        width: 10em;
        display: inline-block;
        font-weight: bold;
    }

        .form-wrapper .form-label.no-width {
            width: auto !important;
        }

        .form-wrapper .form-label.vtop {
            vertical-align: top;
        }

    .form-wrapper .error-message, .error-message {
        color: #ff3300;
        line-height: 0px;
        padding: 0;
        margin: 0;
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .form-wrapper .validation-message, .validation-message {
        font-weight: bold;
        font-size: 90%;
        color: #ff3300;
        margin-left: 2px;
    }

    .form-wrapper .validation-summary {
        border: 1px solid #000000;
        display: block;
        text-align: center;
        background-color: #f9f9f9;
        border-color: #FFDB4B;
        background-color: #FFFFDF;
        color: #FF5602;
        text-align: left;
        clear: both;
        font-weight: bold;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }

    .form-wrapper .instructions {
    }

.formElement {
    margin: 0 0 0.5em 0;
}

.form-footer {
    height: 12px;
}

/* Dialog forms */
/* Increase dialog form close button size */
.ui-dialog .ui-dialog-titlebar-close {
    width: 34px;
    margin: -8px 0 0 0;
    height: 28px;
}

/* Dialog form */
.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}

.ui-dialog .ui-dialog-titlebar-close {
    width: 34px;
    margin: -14px 0 0 0;
    height: 28px;
}

/* Dialog forms - Prevent scroll bars while dragging */
.ui-dialog .ui-dialog-content {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 92vh !important;
}

/* Layer switcher */
.layer-switcher {
    position: absolute;
    top: 5em;
    right: 0px;
    text-align: left;
}

    .layer-switcher label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 10px;
        font-weight: 600;
        margin-left: 5px;
    }

    .layer-switcher .panel {
        border: none;
        margin: 0;
        display: none;
        padding: 10px 60px 3px 0px;
        background-color: #eee;
        background-color: rgba(231, 231, 231, 0.95);
    }

    .layer-switcher.shown .panel {
        display: block;
    }

    .layer-switcher button {
        height: 30px;
        width: 30px;
        float: right;
        /*logo.png*/
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAB3ElEQVRIS+2SSy8DURiG+z/cVhIbISzEysLGos24VtpKWIhLJAhabbTVmlFTEmPhUmrd6UzNoFVLP0DcYlVaih/gL3zO4TDKZNIxXUh4k2f7Pt/5zmf6z6+JmxXrOP4cOP7SGLELmF+Tr0itdmZX4lTkKA+7x0+GiKbz4FqWLaRWOz4uQUWSOdUiPWAp2tokqdWOn5PqtlL3qkV6iKYfwRmWukmtdpDUFjnMqhbpAUvpjcNnUqsdtJLGUrx0J/0AY0sp6F08U2BOIbAmnRKVEk84YSnVIY2GjsBM58DM3L0RzMLUothGVErQejtLcUjb6KUjdPqb1MkKY0SlxMft1W7KN4BXbAQ8+CiDpO9CDBpgghaLPq4+is68Tf0TPkmZ9SKPC62k2RK4LZz6JyCpwyNA/YCs0C/BDBMbJColrrBIlUSK/tTujkNZV/KDcsQ4zbcSlRIft2+lmBv1Ij0gqW2WL5BW9KTAFYoPE5USL5doaA9eAxXMGMY+JxRIMeMhvrjjQlc+UGndf12PXr5KF9YPijuuaUZoqbIefCvQCx7Cv5o8IbXamWGFDvwfakV6wFLVQ1ILWq8Dr1etSA94cCfLD5Fa7XhXE001fRJU22TDTDIxO6n9z5+PyfQC8aRh3TYf2ZQAAAAASUVORK5CYII=');
        background-repeat: no-repeat;
        background-position: 2px;
        border: none;
        background-color: #7b98bc;
        background-color: rgba(0,60,136,.5);
    }

        .layer-switcher button:focus, .layer-switcher button:hover {
        }

    .layer-switcher ul {
        padding-left: 1em;
        list-style: none;
    }

    .layer-switcher li.group {
        padding-top: 5px;
    }

        .layer-switcher li.group > label {
            font-weight: bold;
        }

    .layer-switcher input {
        margin: 4px;
    }

        .layer-switcher input[type=checkbox] {
            /* Double-sized Checkboxes */
            -ms-transform: scale(2); /* IE */
            -moz-transform: scale(2); /* FF */
            -webkit-transform: scale(2); /* Safari and Chrome */
            -o-transform: scale(2); /* Opera */
            padding: 10px;
        }

/* Openlayers control */
.ol-control {
    background-color: #eee;
    background-color: rgba(231, 231, 231, 0.95);
}

    .ol-control:hover {
        background-color: #eee;
        background-color: rgba(231, 231, 231, 0.95);
    }

.ol-scale-line {
    background-color: #7b98bc;
    background-color: rgba(0,60,136,.5);
}
/* Zoom */
.ol-zoom {
    top: 5px;
    left: 5px;
    font-size: 20px;
}
/* Zoom slider */
.ol-zoomslider {
    top: 80px;
    left: 6px;
    font-size: 20px;
}

.ol-zoomslider-thumb {
    position: absolute;
    background: #7b98bc;
    background: rgba(0,60,136,.5);
    height: 10px;
    width: 30px;
}

/* Map Tools */
.tool-panel, .tool-panel:hover {
    display: inline-block;
    background-color: transparent;
    position: absolute;
    right: 0px;
    top: 0px;
}

    .tool-panel .olButton {
        display: block;
        float: left;
        height: 40px;
        width: 40px;
        background-color: #eee;
        text-align: center;
        padding: 2px;
        margin: 4px;
        border-color: #eee;
        border-style: solid;
        border-width: 3px;
        border-radius: 4px;
        box-shadow: 2px 2px 9px #000000;
    }

    .tool-panel .tool-button {
        background-position: center center;
        background-repeat: no-repeat;
        z-index: inherit;
    }

        .tool-panel .tool-button.disabled {
            z-index: 1000;
            background-color: lightgrey;
            opacity: 0.4;
            pointer-events: none;
        }

        .tool-panel .tool-button.select-item {
            background-image: url('../../Images/mapTools/select.png');
        }

        .tool-panel .tool-button.legal-orders-polygon {
            /*background-image: url('../../Images/mapTools/info.png');*/
        }

        .tool-panel .tool-button.legal-orders-line {
            /*background-image: url('../../Images/mapTools/info.png');*/
        }

        .tool-panel .tool-button.info {
            background-image: url('../../Images/mapTools/info.png');
        }

        .tool-panel .tool-button.add-furniture {
            background-image: url('../../Images/mapTools/button-infra.png');
        }

        .tool-panel .tool-button.add-issue {
            background-image: url('../../Images/mapTools/button-maint.png');
        }

        .tool-panel .tool-button.my-routes {
            background-image: url('../../Images/mapTools/MyRoutes.png');
        }

        .tool-panel .tool-button.add-surface {
            background-image: url('../../Images/mapTools/Surface.png');
        }

        .tool-panel .tool-button.survey-edit-issue {
            background-image: url('../../Images/mapTools/Edit-Issue.png');
        }

        .tool-panel .tool-button.survey-edit-furniture {
            background-image: url('../../Images/mapTools/Edit-Furniture.png');
        }

        .tool-panel .tool-button.add-tree {
            background-image: url('../../Images/mapTools/tree.png');
        }

        .tool-panel .tool-button.add-work {
            background-image: url('../../Images/mapTools/work.png');
        }

        .tool-panel .tool-button.add-issue-line {
            background-image: url('../../Images/mapTools/button-maint-line.png');
        }


        .tool-panel .tool-button.ItemActive.olButton.flash {
            border-color: #ffff00;
            -webkit-animation-name: flashButton;
            -moz-animation-name: flashButton;
            -ms-animation-name: flashButton;
            animation-name: flashButton;
            -webkit-animation-duration: 0.25s;
            -moz-animation-duration: 0.25s;
            -ms-animation-duration: 0.25s;
            animation-duration: 0.25s;
            -webkit-animation-iteration-count: 2;
            -moz-animation-iteration-count: 2;
            -ms-animation-iteration-count: 2;
            animation-iteration-count: 2;
            -webkit-animation-direction: alternate;
            -moz-animation-direction: alternate;
            -ms-animation-direction: alternate;
            animation-direction: alternate;
            -webkit-animation-timing-function: ease-in-out;
            -moz-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
        }


@-webkit-keyframes flashButton {
    to {
        width: 50px;
        height: 50px;
    }
}

@-moz-keyframes flashButton {
    to {
        width: 50px;
        height: 50px;
    }
}

@-ms-keyframes flashButton {
    to {
        width: 50px;
        height: 50px;
    }
}

@keyframes flashButton {
    to {
        width: 50px;
        height: 50px;
    }
}

.ol-attribution.ol-logo-only {
    display: none;
}

.ol-mouse-position {
    position: absolute;
    bottom: 5px;
    right: 5px;
    top: auto;
    background-color: #FFFFFF;
    font-size: 12px;
    padding: 3px;
    font-weight: bold;
}

.ol-scale-line {
    left: 5px;
    bottom: 5px;
}

/* Map Info Popups */
.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 11px;
    border-radius: 2px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    padding-top: 14px;
    z-index: 100;
    margin-right: 3px;
    font-size: 12px;
}

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 1px;
    right: 12px;
    cursor: pointer;
    color: red;
}

    .ol-popup-closer:after a:link, .ol-popup-closer:after a:active, .ol-popup-closer:after a:hover, .ol-popup-closer:after a:focus, .ol-popup-closer:after a:visited {
        text-decoration: none !important;
    }
/* Main ID for setting size etc */
#popup-content {
    min-width: 380px;
    max-height: 345px;
    overflow-x: hidden;
    overflow-y: auto;
}

    #popup-content a {
        text-decoration: none;
    }

.ol-popup-content.small {
    min-width: 220px;
    height: 30px;
}

.ol-popup-content p, .ol-popup-content p .label {
    font-size: small;
    margin: 0px;
    padding: 0px;
}

/* Dialog forms */
.formLabel {
    width: 10em !important;
    display: inline-block;
    font-weight: bold;
}

    .formLabel.no-width {
        width: auto !important;
    }

    .formLabel.vtop {
        vertical-align: top;
    }

/* Gazetteer Search */
#osGazSelector {
    width: 99.8%;
    font-size: 0.9em;
}

.search-option {
    display: flex;
    margin: 0.4rem 0;
}

    .search-option label {
        margin: 2px 6px;
        font-size: 0.9rem;
    }

.fa.fa-search, .fa.fa-arrow-right, .fa.fa-save {
    margin-right: 4px;
}

/*Language notification*/
.language-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 25%;
}

    .language-wrapper .language-text {
        margin: 2px 4px;
    }

    .language-wrapper .language-flag {
        border: #cccccc 1px solid;
    }

/* Map Popups */
.info-popup-data {
    margin-bottom: 5px;
}

    .info-popup-data table {
        width: 100%;
    }

    .info-popup-data td {
        margin: 0px;
        padding: 0px;
    }

    #popup-content h3.heading, .info-popup-data h3.heading {
        background-color: #000000;
        padding: 0px;
        color: #ffffff;
        padding-left: 2px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 1.1em;
        font-weight: bold;
        display: block;
        float: left;
        width: 100%;
    }

    #popup-content .label, .info-popup-data .label {
        font-weight: bold;
        width: 9em;
        font-size: 1.0em;
        color: #000000;
        display: inline-block;
        text-align: left;
    }

    #popup-content .data, .info-popup-data .data {
        font-size: 1.0em;
    }

    #popup-content .footer, .info-popup-data .footer {
        font-style: italic;
    }

#infoPopup_contentDiv {
    width: 292px !important;
    height: 190px !important;
    position: absolute !important;
    z-index: 1 !important;
}

.my-reported-fault-popup {
}

    .my-reported-fault-popup h3 {
        padding: 0px;
        margin: 0px;
        margin-bottom: 6px;
        font-size: 140% !important;
    }

    .my-reported-fault-popup .label {
        font-weight: bold;
        display: block;
        float: left;
        width: 9em;
        color: #000000;
        text-align: left;
    }

    .my-reported-fault-popup p {
        padding: 0px;
        margin: 0px;
        clear: both;
        min-height: 15px;
    }


.ol-rotate, .ol-rotate.ol-unselectable.ol-control.ol-hidden {
    position: absolute;
    left: 6px;
    top: 285px;
    display: block;
    visibility: visible !important;
    float: left;
    width: 35px;
    height: 35px;
    opacity: 1;
}

    .ol-rotate button {
        width: 30px;
        height: 30px;
        visibility: visible !important;
    }

.ol-compass {
    visibility: visible !important;
}

#pathLinkSelectStatusContainer {
    position: absolute;
    top: 0;
    right: 110px;
    background-color: rgba(0,0,0,0.6);
    display: none;
    padding: 2px;
    margin-left: 4px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    clear: both;
}

    #pathLinkSelectStatusContainer button {
        color: #000000;
        margin: 4px;
    }

    #pathLinkSelectStatusContainer div {
        margin-left: 5px;
        line-height: 15px;
    }

    #pathLinkSelectStatusContainer span {
        font-size: 12px;
        color: #FFFFFF;
        margin-right: 4px;
    }


.grid-view {
    margin-bottom: 2px;
}

    .grid-view tr.selected {
    }

.gridview-pageSize.form-group {
    margin-bottom: 0px;
}


/* Print pages / Reports */
body.print-page {
    background-color: #ffffff !important;
    background-image: none !important;
}

.print-page {
    width: 820px;
    margin: auto;
}

.print-button {
    background-position: center center;
    height: 24px;
    width: 24px;
    display: inline-block;
    background-image: url('../../Images/printer.png');
    background-repeat: no-repeat;
    margin-bottom: 10px;
    font-size: 0;
    padding: 3px;
    border-top: 1px solid #fafafa;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid #fafafa;
    background-color: #938B82;
    float: right;
    clear: none;
    padding: 18px;
    margin-top: 5px;
}

.formLabel.wide {
    width: 20em !important;
}

input[readonly] {
    cursor: not-allowed;
}

input[readonly] {
    background-color: #eee;
    opacity: 1;
}

/* Popup forms */
.ui-widget-header {
    border: none;
    background-color: transparent;
    background-image: none;
    color: #333333;
    font-weight: normal;
    font-size: 1.4em;
    padding-left: 14px !important;
    margin-bottom: 0px;
    padding-bottom: 0px !important;
}

.noty_message {
    text-align: left !important;
}

#printPDFMapModal .modal-dialog {
    width: 350px;
}

/* Admin Tools */
.admin-panel {
    display: block;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .admin-panel .row {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }


/* Track a problem */
/* Fix float */
.issueStatus p {
    float: none;
}

div.issue {
    display: block;
    float: left;
    width: 100%;
    background-color: #f2f2f2;
    padding: 10px;
    padding-bottom: 0;
}

div.issueStatus {
    display: block;
    float: left;
    width: 100%;
    background-color: #f2f2f2;
    padding: 10px;
    padding-top: 0;
    margin-bottom: 10px;
}

p.issue-status-feedback {
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 0;
}

.issue p span, .issueStatus p span, .issueData p span {
    width: 11em;
    display: inline-block;
    float: left;
    font-weight: bolder;
}

div#pnlIssueStatus {
    margin-top: 10px;
}

div#pnlFeedback {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Info popup templates */
td.data {
    width: 100%;
}

/* User control Alerts */
.user-control .alert {
    margin: 0px;
}

#popup_title {
    margin-top: -5px;
}

p.required-fields-message {
    padding: 0px;
    padding-top: 14px;
    display: inline-block;
    margin: 0px;
}

/* Form photo upload control */
.fileupload-expanded {
    height: 150px;
    background-color: #f2f2f2;
}

.file-upload-instructions {
    background-color: #ffffff;
    display: block;
    font-size: 0.9em;
    vertical-align: middle;
    line-height: 2em;
    padding-top: 3px;
    color: #000000;
}

@media(min-width:624px) {
    .file-upload-instructions {
        margin-left: -6px;
    }
}

.fileUploadTableContainer {
    height: auto;
    overflow-y: auto;
    background-color: #ffffff;
    max-height: 72vh; /* Max height before scroll bars */
}

.file-upload-control {
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    padding-bottom: 5%;
}

.multi-file-upload {
    display: block;
    border: none;
    overflow: hidden;
    min-height: 35px;
    background-color: #ffffff;
    display: inline-block;
    width: 100%;
    height: auto;
    min-height: 35px;
}

    .multi-file-upload body {
        background-color: #ffffff;
        background-image: none;
        height: auto;
        display: inline-block;
        width: 100%;
    }

    .multi-file-upload .files {
        font-size: 13px;
    }

/* Start - Bootstrap Forms */
p.form-instructions {
    margin: 5px 0px 10px 0px !important;
    padding: 0px;
}

p.form-sub-form-title, h3.form-sub-form-title {
    font-weight: lighter;
    margin: 0px 0px 6px 0px;
    background-color: #f9f9f9;
    padding: 2px;
}

.popup-form hr {
    margin-bottom: 0px;
}

.popup-form p.required-fields {
}

textarea {
    resize: none;
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {
    font-size: 1em;
}

.popup-form input[type=text], .popup-form textarea, .popup-form select {
    border-color: #d0d0d0;
}

.form-control {
    height: auto;
    border-radius: 0px;
    padding: 2px;
}

.col-form-label {
    font-weight: bold;
    padding-top: 0;
    padding-bottom: 0;
}

.popup-form .form-group.row {
    margin-top: 0;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 6px;
    color: #000000;
}

    .popup-form .form-group.row .form-control {
        color: #000000;
        background-color: #fdfdfd;
    }

.form-control-inline {
    max-width: 100%;
    width: auto;
    display: inline;
}

.hasDatepicker {
    max-width: 120px;
}

.form-group.row .CAMSWebErrMsg {
    color: #ff0000;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.1em;
    vertical-align: baseline;
    padding-left: 2px;
    padding-top: 5px;
    display: block;
    float: left;
}

.popup-form input:read-only, .popup-form input:disabled {
    background-color: #eeeeee !important;
}

.popup-form input[readonly].hasDatepicker {
    background-color: #fdfdfd !important;
    cursor: pointer;
}

.popup-form input[type=checkbox] {
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    margin-left: 7px;
    vertical-align: sub;
}

/* End - Bootstrap Forms */

/* Dialog forms */
.ui-dialog .ui-dialog-title {
    color: #000000 !important;
    padding: 0px;
    margin: 0px;
    font-size: 1.4em;
    margin-bottom: 7px;
}

.ui-dialog .ui-widget-content {
    color: #000000 !important;
}

.ui-dialog .ui-widget-header {
    border: 0px;
    background-image: none;
    background-color: #f9f9f9;
    color: #222222;
}

.ui-dialog .ui-corner-all {
    border-radius: 2px !important;
}

/* Grid filter controls */
.grid-filter {
    background-color: #f2f2f2;
    padding: 0px;
    margin: 0px;
}

    .grid-filter .filter-header {
        padding: 5px;
    }

    .grid-filter .filter-content {
        padding: 5px;
    }

    .grid-filter .filter-button-hidden {
        display: none;
    }

    .grid-filter .filter-header.collapsed {
        background-color: #f9f9f9;
    }

    .grid-filter .filter-header.expanded {
        background-color: #f9f9f9;
    }

    .grid-filter .filter-content.collapsed {
        display: none;
    }

    .grid-filter .filter-content.expanded {
    }

/*Accordions*/
.accordion {
    cursor: pointer;
    height: 2em;
    padding: 0.5em 0.5em;
    font-size: large;
}

    .accordion + * {
        display: none;
    }

    .accordion.expanded + * {
        display: block;
    }

    .accordion::before {
        content: '\f0fe';
        font-family: FontAwesome;
        background-color: #f9f9f9;
        margin-right: 0.5em;
    }

    .accordion.expanded::before {
        content: '\f146';
        font-family: FontAwesome;
    }

/*different cosmetic for the grid-filter accordions*/
.grid-filter .accordion {
    background-color: #f9f9f9;
}

    .grid-filter .accordion.expanded + * {
        background-color: #f9f9f9;
    }

    .grid-filter .accordion::before {
        content: '\f13a';
        font-family: FontAwesome;
    }

    .grid-filter .accordion.expanded::before {
        content: '\f139';
        font-family: FontAwesome;
    }

/*Multiselects*/
select[multiple] + .btn-group > .btn.multiselect {
    MIN-WIDTH: 18EM;
    width: 100%;
    white-space: normal;
}

.btn.multiselect {
    padding: 3px 6px;
    text-align: left;
}

.multiselect-container {
    min-width: max-content;
}

/*Screen reader*/
#skiptocontent {
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
    top: -10px;
}

/* Bootstrap Breakpoints */
/* Extra small devices (portrait phones, less than 34em) */
/* No media query since this is the default in Bootstrap */

/* XS */
#popup-content {
    min-width: 180px;
    max-height: 345px;
    /*height: 345px;*/ /* If we fix height autpoPan height is correct */
}


/* Small devices (and up) */
@media (min-width: 576px) {
    #popup-content {
        min-width: 200px;
        max-height: 345px;
    }
}

/* Small devices (and up) */
@media (min-width: 610px) {
    .main-content {
        margin-left: 27%;
    }
}
/*because IE11 doesn't respect the .sidebar-nav max-width, we have to set it on .navbar-nav too*/
@media screen and (min-width: 610px) and (-ms-high-contrast: active), screen and (min-width: 610px) and (-ms-high-contrast: none) {
    .navbar-nav {
        max-width: 180px;
    }
}

/* Medium devices (and up) */
@media (min-width: 768px) {
    #popup-content {
        min-width: 380px;
        max-height: 345px;
    }
}

/* Large devices (and up) */
@media (min-width: 992px) {
    #popup-content {
        min-width: 380px;
        max-height: 345px;
    }

    .main-content {
        margin-left: 26%;
    }
}
/*because IE11 doesn't respect the .sidebar-nav max-width, we have to set it on .navbar-nav too*/
@media screen and (min-width: 992px) and (-ms-high-contrast: active), screen and (min-width: 992px) and (-ms-high-contrast: none) {
    .navbar-nav {
        max-width: 240px;
    }
}

/* Extra large devices (and up) */
@media (min-width: 1200px) {
    .outer-wrap {
        width: 1200px;
    }

    .sidebar-nav {
        max-width: 240px;
    }

    .user-control {
        background-color: #f9f9f9;
        max-width: 240px;
    }

    .main-content {
        margin-left: 22%;
    }
}