body{
    /* jquery is adding padding-right: 17px in-line which is messing with the page */
    padding-right: 0px !important;



    /* field tool panel width limits */
    --drg-field-tool-min-width: 300px;
    --drg-field-tool-max-width: 450px;
}

.file-review-button, .center-logo{
    display: flex;
    align-items: center;
    justify-content: center;
}

.drg-text-warn{
    color: var(--drg-warn-main);
}

.drg-button-warn, .btn.drg-button-warn:focus, .drg-button-warn:disabled, .uib-datepicker-popup .btn.btn-danger,
.uib-datepicker-popup .btn.btn-danger:focus{
    color: var(--drg-primary-main-text);
    background-color: var(--drg-warn-main);
    font-weight: bold;
}

.drg-button-warn:hover:not([disabled]), .uib-datepicker-popup .btn.btn-danger:hover{
    color: var(--drg-primary-main-text);
    background-color: var(--drg-warn-main-hover);
}

.drg-primary-theme-filter{
    filter: var(--drg-primary-main-filter);
}


.half-banner{
    width: 50%;
    margin: 0;
}

.banner-styling{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#side-tabs>.nav-tabs>li>a{
    /* Remove bootstrap border which causes weird sizing and is gray */
    border-radius: unset;
}

#side-tabs>.nav-tabs>li>a:hover{
    /* Remove bootstrap border which causes weird sizing and is gray */
    border: unset;
}

#side-tabs>.nav-tabs>li:not(.active)>a:hover{
    background-color: var(--drg-primary-lightest);
    color: var(--drg-primary-main);
}

#side-tabs>.nav-tabs>li.active>a{
    background-color: var(--drg-primary-main);
    color: var(--drg-primary-main-text);
}

ul.nav-tabs>li.active>a>.drg-primary-theme-filter, .active-queue-button > .drg-primary-theme-filter{
    filter: var(--drg-primary-main-text-filter);
}

.has-error .form-control{
    border-color: var(--drg-warn-main);
}

.has-error .form-control:focus{
    border-color: var(--drg-warn-main-hover);
}

.text-danger{
    color: var(--drg-warn-main);
}

.text-success{
    color: var(--drg-primary-main);
}

div.ui-grid .ui-grid-cell-contents a, .jrio-print .panel-heading, .jrio-print .panel-heading>label{
    cursor: pointer;
}

.noMovement{
    overflow: hidden;
    position: fixed;
    /* 
        Need width and height to make sure the body take up the entire screen
        It didn't always fill the entire screen on mobile devices while testing
    */
    width: 100%;
    height: 100%;
}

.bold{
    font-weight: bold;	
}

a{
    color: var(--drg-primary-main);	
}

a:hover{
    color: #666;
    text-decoration: none;
}

a:disabled{
    color: #666;
}

.tooltip{
    position: fixed;	
    z-index: 5050;
}

.centerText{
    text-align: center;
}

.navbar{
    margin-bottom: 0;
}

#full-navbar .navbar-header{
    /* This values is used in multiple other places (tabs-left style in new-styles.css, and windowResizeItems() in main.js */
    min-height: 70px;
}

#full-navbar .navbar-toggle{
    margin-top: 18px;
}

#smartSearch ul.dropdown-menu {
    max-height: 300px;
    overflow: auto;
    z-index: 5004;	/* always show on top of the left panel */
    max-width: 85vw;	/* don't overflow the screen on mobile */
}

#bottom-navbar{
    background-image: none;
    background-color: var(--drg-primary-main) !important;	
    margin: 0px -15px;
    padding: 8px 30px;
    display: flex;
    align-items: center;
}

.navbar.navbar-default #bottom-navbar {
    margin: 0px -20px;
}

#bottom-navbar h5{
    color: var(--drg-primary-main-text);
    font-weight: bold;
    font-size: 18px;
    margin: 0;
}

@media (max-width: 766.99px) {
    #bottom-navbar .navbar-form{
        margin-top: 0px;
        margin-bottom: 0px;
        border-width: 0px;
    }
}

.navbar-brand{
    font-size: 22px;
    padding: 2px;
}

.navbar-default .navbar-brand {
    color: #89b965;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #89b965;
}

/* used to reposition the viewsite navbar */
.viewsite-navbar{
    margin-top: -16px;
    min-height: 24px;
}
@media (max-width: 767.99px) {
    .viewsite-navbar{
        margin-top: -8px;
        min-height: 32px;
    }
}

#full-navbar .nav>li {
    margin-right: -5px;
    margin-left: -5px;
}

#full-navbar .nav>li>a {
    padding-top:0px;
    padding-bottom: 5px;
}

.icon {
    width:32px;
    height:32px;
}

.tool-icon{
    width: 16px;
    height: 16px;
}

.hide-overflow{
    overflow: hidden;
}

.font-size-18px{
    font-size: 18px;
}

.margin-top-10{
    margin-top: 10px;
}

#viewSite-tabList{
    float: right;
}
@media (max-width: 767.99px){
    #viewSite-tabList{
        float: left;
    }
}
#view-site-tabs-collapse{
    float:right;
}

#viewSite-modal-container button.close{
    margin-top: -10px;
}

@media(max-width: 991px){

    #viewSite-modal-container{
        width: 100%;
        --modalHeight: 100vh;
        --maxModal: unset;
        margin: auto;
    }
}

.viewsite-table-cell{
    /* height needed to have the cells match up correctly */
    min-height: 52px;
}

.break-long-words{
    /* breaks long words so they can be wrapped */
    word-wrap: break-word;
}

.preserve-newlines {
    white-space: pre-line;
}

#davey-logo{
    height: 35px;
    background-color: #FFFFFF;
    padding: 0 8px;
    margin: 0 5px;
}

#TK8-field-logo {
    position: fixed;
    bottom: 70px;
    right: 60px;
    opacity: .85;
    z-index: 4999;

    > img {
        max-height: 40px;
    }
}

.row{
    margin-left: inherit;
    margin-right: inherit;	
    /* height: 100%; */
    /* overflow: hidden; */
}

/* This class returns rows to their former glory, as Bootstrap always intended */
.fix-bootstrap-rows{
    margin-right: -15px;
    margin-left: -15px;
}

#mainOverview-modal .modal-content{
     height:100%;
     overflow: auto;
}

/*
Take off borders from all form elements in the showSite modal 3/20/17
*/

#showSite-modal {
    z-index:5003;
}

#showSite-modal form .col-md-6, #genericFormBody form .col-md-6{
    border: none;
}

.siteTabContent .col-md-6, .recordContent .col-md-6{
    border: 1px solid #ddd;
    padding: 5px 15px;
}

.siteDuplicateModal{
    z-index: 5006 !important;
}
.siteDuplicateBackdrop{
    z-index: 5005 !important;
}

.filterContent .col-md-6 {
    padding: 5px 15px;
}

.recordContent .iconContainer, .filterContent .iconContainer {
    /*This is so the icons will be centered inside the div*/
    display: table-cell;
    width: 80px;
    height: 90px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.recordContent .relatedSiteDiv {
    border: none;
    padding: 0px;
    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    height: 20px;
}

#collapseWorkRecord span {
    word-wrap: break-word;
    white-space: pre-wrap;
}

#quickFilter img {
    height: 45px;
}

.valuation-report-select{
    padding-right: 30vw;
}

.valuation-report-body{
    padding-left: 5vw;
}

.siteTabContent .row.odd{
    background-color: #f9f9f9;
}

.modal .form-group{
    margin-bottom: 0;	
}

.downloadLayerTable tr:hover {
    /*background: red;*/
    cursor: pointer;
}

#scrollToTop{
    position: fixed;
    bottom: 15px;
    right: 20px;
    background-color: rgba(255,255,255,0.5);
    padding: 10px;	
}

/* tabs for panels */
.tabs-left{
    position:absolute;
    left: 0;
    z-index: 5000;
    background-color:white;	
    height: calc(var(--availableHeight) - var(--navbarHeight));
    /* If you change this width you need to change the map_element padding left for div.olMap, and this value is used in windowResizeItems() in main.js */
    width: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tabs-left .nav-tabs {
    float: left;
    border-bottom: 0;
}

.tabs-left .nav-tabs li {
    float: none;
    margin: 0;
}

.tabs-left .nav-tabs li a {
    margin-right: 0;
    border: 0;
}

.tabs-left{
    -webkit-box-shadow: 3px 2px 5px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 2px 5px 1px rgba(0,0,0,0.25);
    box-shadow: 3px 2px 5px 1px rgba(0,0,0,0.25);
}

.tabs-left .nav-tabs {
    float: left;
    border-bottom: 0;
}

.tabs-left .nav-tabs li {
    float: none;
    margin: 0;
}

.tabs-left .nav-tabs li a {
    margin-right: 0;
    border: 0;
}

.tabs-left > ul.geoLocationTools {
    width: 45px;
}

#full-navbar div.navbar-header {
    width: 100vw;
    background-color: white;
}

@media (max-width: 767.99px){
    #fullNavButtonList {
        display: flex;
        margin: 0px;
        margin-top: -12px;
    }

    #fullNavButtonList li{
        width: 50px;
        padding: 5px;
    }

    #fullNavButtonList li a{
        padding: 0px;
    }
}

/* --availableHeight is a css var set in main.js and reset when the window resizes based on window.innerHeight */
#nav-container {
    background-color: var(--drg-primary-main);
    position: fixed;
    bottom: 0px;
    left: 0px;
    max-height: calc(var(--availableHeight) - 45px);
    min-width: 320px;
    max-width: 510px;
    width: 100vw;
    z-index: 5001;
}

#bottom-bar {
    background-color: var(--drg-primary-main);
    position: fixed;
    bottom: 0px;
    height: 45px;
    width: 100vw;
}

#field-nav {
    position: relative;
    top: 0px;
    background-color: var(--drg-primary-main);
    width: 100%;
    height: 45px;
    z-index: 5000;
}

#field-nav.nav-tabs {
    border-bottom: 0;
}

#field-nav li a {
    color: var(--drg-primary-main-text);
    pointer-events: none;
}
#field-nav li.active a {
    color: black;
}
#field-nav li.active img {
    filter: var(--drg-primary-main-text);
}

#nav-layers {
    min-width: var(--drg-field-tool-min-width);
    max-width: var(--drg-field-tool-max-width);
    max-height: calc(var(--availableHeight) - 45px);
    margin: 0 auto;
    overflow-y: auto;
}

#nav-search {
    background-color: white;
    padding:5px;
    min-width: var(--drg-field-tool-min-width);
    max-width: var(--drg-field-tool-max-width);
    max-height: calc(var(--availableHeight) - 45px);
    margin: 0 auto;
    overflow-y: auto;
}

#nav-maptools {
    background-color: white;
    padding:0px;
    min-width: var(--drg-field-tool-min-width);
    max-width: var(--drg-field-tool-max-width);
    max-height: calc(var(--availableHeight) - 45px);
    margin: 0 auto;
    overflow-y: auto;
}

#nav-menu {
    background-color: white;
    height: 100px;
    max-height: calc(var(--availableHeight) - 45px);
    padding-bottom: 5px;
}

#nav-menu a {
    color:#333;
    cursor: pointer;
}

@media (min-height: 1080){
    #nav-layers, #nav-search, #nav-maptools, #nav-menu {
        max-height: 93vh;
    }
}

@media (max-width: 515px) {
    #nav-container span.nav-tab-text, #nav-container div.nav-tab-text {
        display:none;
    }
}

#customZoomButtons a#cancel-edit-button{
    background:#d9534f;
    cursor:pointer;
    z-index:4999;
    border-radius: 4px 4px 0 0;
    margin-top: 8px;
    margin-bottom: 0px;
    font-size: 18px;
    padding: 2px;
}

#customZoomButtons a#save-edit-button {
    background: var(--drg-primary-main);
    z-index: 4999;
    margin-top: 1px;
    border-radius: 0 0 4px 4px;
    font-size: 18px;
    padding: 2px;
}

#field-move-edit-container{
    position: fixed;
    bottom: 175px;
    right: 26px;
    opacity: .8;
    z-index: 4999;
}

#field-move-edit-container a#cancel-edit-button{
    background:#d9534f;
    cursor:pointer;
    z-index:4999;
    border-radius: 4px 4px 0 0;
    margin-top: 8px;
    margin-bottom: 0px;
    font-size: 22px;
    vertical-align: sub;
    padding: 9px;
}

#field-move-edit-container a#save-edit-button {
    background: var(--drg-primary-main);
    z-index: 4999;
    margin-top: 1px;
    border-radius: 0 0 4px 4px;
    font-size: 22px;
    vertical-align: sub;
    padding: 9px;
}

#field-move-edit-container a#cancel-edit-button span.glyphicons{
    color: #333;
    margin-bottom: 17px;
}

#field-move-edit-container a#save-edit-button span.glyphicons{
    color: #333;
}

#field-center-me{
    position: fixed;
    bottom: 110px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: 2px black;
    border-radius: 24px;
    background-color: #f5f5f5;
    opacity: .8;
    z-index: 4999;
}

#field-follow-me{
    position: fixed;
    bottom: 170px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: 2px black;
    border-radius: 24px;
    background-color: #f5f5f5;
    opacity: .8;
    z-index: 4999;
}

#field-anchor-me{
    position: fixed;
    bottom: 230px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: 2px black;
    border-radius: 24px;
    background-color: #f5f5f5;
    opacity: .8;
    z-index: 4999;
}

#field-center-me.active, #field-follow-me.active, #field-anchor-me.active{
    background-color: var(--drg-primary-main);
}

#field-center-me span, #field-follow-me span, #field-anchor-me span {
    font-size: 32px;
    color: #000;
    padding: 9px;
    opacity: 1;
}

/* This is to allow geo tools to appear toggled on/off */
.geoLocationTools > li.btn-davey, .geoLocationTools > li > a.btn-davey {
    -webkit-box-shadow: inset 0px 0px 20px rgba(7, 97, 11,.75);
       -moz-box-shadow: inset 0px 0px 20px rgba(7, 97, 11,.75);
            box-shadow: inset 0px 0px 20px rgba(7, 97, 11,.75);
  }

/* sliding panels */
.panel{
    /*max-height: 84%;*/
    overflow: auto;
    margin-bottom: 0;
}

#overall_benefits_panel div.panel{
    overflow: hidden;
}

.panel h3{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;	
}

.toolbox{
    width: 300px;
    position: absolute;
    top: var(--navbarHeight);
    left: 0;

    /* If you change this value need to change the value is used in windowResizeItems() in main.js */
    padding: 10px;
    z-index: 5000;
    background-color: #f8f8f8;
    /*resize: horizontal;*/
    overflow: auto;
    height: calc(var(--availableHeight) - var(--navbarHeight));
}

.toolbox.map-tools-toolbox{
    /* If you change this value need to change the value is used in windowResizeItems() in main.js */
    padding: 0px;
}

#tree_benefits{
    width: 450px;
    right: 0;	
}

#dashboard{
    width: 450px;
    right: 0;	
}

/* 
    Bootstrap "SM" screens are smaller than 992 px wide
    Using 991.99px handles sub-pixel widths
*/
@media (max-width: 989.99px) {
    .toolbox{
        top: var(--navbarHeight);
    }
    #map_search_panel {
        top: var(--navbarHeight);
    }
}

/* 
    JPO 04-01-2019
    600px is the height of the side tab buttons when all buttons are visible, including geolocation buttons, and header is displayed 
    when the height is less than or equal to that, it will hide all buttons that don't relate to the map:

    Admin Center, Report Builder, Data Transfer, Dashboard
*/
@media (min-height: 600.01px) {
    
    #geoLocationToolsOriginal {
        display: block;
    }

    .mapTabs {
        display: none !important;
    }

    .otherTabs {
        display: block !important;
    }

    #side-tabs {
        overflow: hidden;
    }
}

@media (max-height: 600px) {

    #geoLocationToolsOriginal {
        display: none;
    }

    .mapTabs {
        display: block !important;
    }

    .otherTabs {
        display: none !important;
    }

    #side-tabs {
        overflow: auto;
    }
} 

@media (max-height: 376px) and (min-aspect-ratio: 13/9) {
    nav.navbar-default {
        display: none;
    }

    .toolbox, #map_search_panel {
        top: 0 !important;
        height: 100% !important;
    }

    #mapElementSizeContainer {
        height: 100% !important;
    }

    .tabs-left {
        height: 100% !important;
    }
}

.map-wrapper {
    position: absolute;
    left: var(--map-left-position);
}

#layers-panel{
    top: auto;
    height: 100%;
    z-index: 1036;
}

.filter-button{
    float: left;
    margin: 5px;
}
.filter-container.active{
    background-color: blue;
    border-radius: 5px;
}

.tileClose{
    float: right;
    margin-bottom: 5px;	
}

/* search box */
#map_search_panel {
    width: 450px;
    height: calc(var(--availableHeight) - var(--navbarHeight));
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: var(--navbarHeight);
    background-color: #f8f8f8;
    padding: 10px;	
    margin-bottom: 0;
    /*resize: horizontal;*/
}

ul:not(.relatedSitesList)>.list-group-item:hover:not(.active), .nav-pills>li:not(.active)>a:hover, #gridTypeList>li[role="presentation"]:not(.active)>a:hover,
.print-tabs.nav-tabs>li:not(.active)>a:hover{
    background-color: var(--drg-primary-lightest);
    box-shadow: inset 0 0 0 2px var(--drg-primary-main);
}

.nav-pills>li:not(.active)>a.text-danger:hover{
    background-color: var(--drg-warn-lightest);
    box-shadow: inset 0 0 0 2px var(--drg-warn-main);
}

ul:not(.relatedSitesList)>.list-group-item, .nav-pills>li>a, #gridTypeList>li[role="presentation"]>a, .print-tabs.nav-tabs>li>a{
    font-weight: bold;
    color: var(--drg-primary-main);
}

.nav-pills>li>a.text-danger{
    color: var(--drg-warn-main);
}

ul:not(.relatedSitesList)>.list-group-item.active, ul:not(.relatedSitesList)>.list-group-item.active:hover, .nav-pills>li.active>a, .nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover, #gridTypeList>li[role="presentation"].active>a, #gridTypeList>li[role="presentation"].active>a:hover,
.print-tabs.nav-tabs>li.active>a, .print-tabs.nav-tabs>li.active>a:hover{
    background-image: none;
    background-color: var(--drg-primary-main);
    border-color: #97c176;

    color: var(--drg-primary-main-text);
}

ul:not(.relatedSitesList)>.list-group-item:hover{
    cursor: pointer;
}

ul.relatedSitesList>.list-group-item, ul.relatedSitesList>.list-group-item.active{
    color: var(--drg-dark-contrast);
}

ul:not(.relatedSitesList)>.list-group-item .bold {
    font-weight: bolder;
}

#accordionRelatedSites .list-group-item.active, #accordionRelatedSites .list-group-item.active:hover{
    background-color: var(--drg-primary-main);
    text-shadow:0 1px 0 #f4f4f4;
}

.attr-range{
    width: 200px;
    margin-top: 5px;
    margin-left: 70px;
}

div.well{
    overflow: auto;
}

.chosen-drop .chosen-results {
    max-height: 200px;
    z-index: 5004;
}

.chosen-container-multi .chosen-choices {
    max-height: 200px; /* seems like a good "not too big, not too small" height. */
    overflow-y: auto;
}

.regularInputs .searchPanelInputHeader {
    width: 300px; /* This is used to align the header with the regular sized inputs in the search panel */
}

.longerInputs .searchPanelInputHeader {
    width: 350px; /* This is used to align the header with the larger sized inputs in the search panel */
}

/*select2*/
.select2-container {
    z-index: 5004;
}

li.select2-selection__choice p{
    float: left !important;
    margin-right: 3px !important;
}

li.select2-results__option[aria-selected=true] {
    display: none;
}

#map_search_box .regularInputs input{
    width: 300px;
}

#map_search_box .regularInputs textarea{
    width: 300px;
    resize: vertical;
}

#map_search_box .longerInputs input{
    width: 350px;
}

#map_search_box .longerInputs textarea{
    width: 350px;
    resize: vertical;
}

#map_search_box .search-date{
    /* overwrite above input style (only updates the date fields)*/
    width: 260px !important;
}

#map_search_box ul.nav li{
    font-size: 16px;
}

#search-button-box.fieldVersion {
    position: fixed;
    left: 35px;
    min-width: var(--drg-field-tool-min-width);
    max-width: var(--drg-field-tool-max-width);
    padding-bottom: 5px;
    padding-top: 5px;
    border-top: 1px solid #e3e3e3;
    background-color: #f8f8f8;
    z-index: 2;
}

@media (max-width: 479px ){
    #map_search_panel {
        width: 400px;
    }

    #map_search_box div.chosen-container {
        /* needs important to overwrite chosen style */
        width: 200px !important;
    }

    #map_search_box #siteFilter input {
        width: 200px;
    }

    #map_search_box #siteFilter textarea {
        width: 200px;
    }

    #map_search_box #siteFilter .search-date {
        width: 160px !important;
    }

    #map_search_box div.searchPanelInputHeader {
        width: 200px;
    }

    #search-button-box.fieldVersion {
        width:100%;
        left: 0;
    }
}

/* site grid */
#site_grid_panel{
    width: -webkit-calc(100% - 45px);
    width:    -moz-calc(100% - 450px);
    width:         calc(100% - 45px);

    max-height: 100%;
    overflow: auto;
    position: absolute;
    bottom: 0;
    left: 45px;
    z-index: 4999;
    background-color: #f8f8f8;
    padding: 10px;	
    margin-bottom: 0;
    flex-direction: column;
}

#site_grid_panel .panel-heading{
    padding: 0 !important;
}

/* gridMenuOpen and gridMenuClosed are used to give the grid container div it's styles via ng-class checking to see if the menuPanel is open or closed */
.gridMenuClosed {
    width:100%;
    max-width:100%;
    flex-direction: column;
}

.gridMenuOpen {
    width:Calc(100% - 200px);
    max-width:Calc(100% - 200px);
    flex-direction:column;
}

#site-ui-grid .grid{
    width:100%;
}

.geog-list-ui-grid {
    height: 100%;
}

/* this value is the height of the grid and tabs from the top of the container */
#site_grid_panel .tab-pane, #site_grid_panel_popup .tab-pane{
    padding-top: 5px;
}

#site_grid_panel .grid_icon, #site_grid_panel_popup .grid_icon{
    padding-top: 5px;
    display: block;
    text-align: center;
}

/* This specifically overrides the normal bootstrap panel-body padding: 15px for the site_grid_panel */
#grid-panel-contents {
    padding: 2px;
}

/* this is used to override bootstraps defaults of 15px */
.grid-panel-div {
    padding-left: 5px;
    padding-right: 5px;
}

.no-left-right-padding {
    padding-left: 0px;
    padding-right: 0px;
}

/* 
    Overrides ui-grid bootstrap defaults
    Used to make the pagination bar not look like it's floating over the grid
*/
.ui-grid-pager-panel{
    background:white;
    bottom:-1px;
}

/* Stops ui grid from scrolling too fast */
.ui-grid-viewport {
    overflow-anchor: none;
}

/* class to give elements the pointer style cursor */
 .pointer-cursor {
    cursor: pointer;
}

/* resizing */
#site_grid_panel .resizer { 
    width: 100%;
    height: 10px;
    position:absolute;
    right: 0;
    top: 0;
    cursor: n-resize;
    background-color: gray;
}

.gridTabsSpacing {
    margin-top: 5px;
    padding-right: 5px;
}

.grid-menu-panel {
    overflow-y: auto;
    min-width: 200px;
    width: 200px;
}

/* height of the grid when it is hidden */
.hiddenGridPanel {
    height: 50px !important;
}

/*
    Super specific as to ONLY affect the Sites, Calls, Work and Work Orders Grids buttons.
    This overrides some bootstrap CSS that makes the margin-left: -1 on any ".btn-group .btn+.btn,
        .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group" elements.
    The original CSS doesn't look right in this use case.
*/
.gridMenu.btn-group button.btn {
    margin-left: 0px;
}

/* remove the default bootstrap rounding on buttons */
.btn-square {
    border-radius: 0px;
}

/*Loader*/
.grid-msg-overlay {
    position: absolute;
    top: 135px;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.grid-msg-overlay .msg {
    opacity: 1;
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 50%;
    background-color: #eee;
    border-radius: 4px;
    border: 1px solid #555;
    text-align: center;
    font-size: 24px;
    display: table;
}
.grid-msg-overlay .msg span {
    display: table-cell;
    vertical-align: middle;
}

/* div to cover map while resizing site grid panel */
#over_map_element{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;	
    
    display: none;
}

.modal-lg.modal-90 {
    width: 90%;
    --modalHeight: min(calc(var(--availableHeight) - 50px), 94vh);
    --maxModal: 94vh;
    height: var(--modalHeight);
    max-height: var(--maxModal);
    margin: 3vh auto;
    overflow: auto;
    overflow-x: hidden;
}

#rvr-modal .modal-lg.modal-90 {
    width: 90%;
    margin: 3vh auto;
    overflow-x: hidden;
}

#rvr-modal .tab-content{
    height:80vh;
    overflow-y:auto;
}

#rvr-menu-nav {
    max-height:80vh;
    overflow-y:auto;
}

#adminModal .modal-lg.modal-90 {
    width: 90%;
    margin: 3vh auto;
    overflow-x: hidden;
}

#navigation-panel, #admin-grid-container {
    max-height: 80vh;
    overflow-y: auto;
}

#genericForm-modal {
    z-index: 5001;
}

/*The worder form should not get this applied, everything else should, this is accomplished by ...addClass('worder-body') */
/* Reason for this is the chosen-select dropdown will appear underneath the footer  */
#genericForm-modal .modal-body:not(.worder-body), 
#addSite-modal .modal-body:not(.worder-body){
    /* do not scroll the modal */
    max-height: 75vh; /* Generic has a full footer with buttons and should be around 75vh */
    overflow-y: auto !important;
    overflow-x: hidden;
}
#showSite-modal .modal-body{
    max-height: 82vh;
    overflow-x: hidden;
}


/*
https://stackoverflow.com/questions/17638804/can-i-use-media-in-an-if-else-kind-of-way
*/

/* The body does scroll for small screens */
@media not all and (min-width: 992px) {
    #showSite-modal .modal-body{
        overflow-y: auto;
    }
    #showSite-modal .modal-body.edit-mode{
        max-height: 78vh;
    }
}

@media not all and (min-width: 1280px) {
    #showSite-modal .modal-body.work-tab{
        overflow-y: auto;
    }
}

/* For larger screens this will be applied */
@media (min-width: 992px) {
    #showSite-modal .modal-body{
        /* The body does NOT scroll for large screens */
        overflow-y: hidden;
    }
    #showSite-modal .modal-body .modal-body-scroller{
        /* DO allow internal portions of modal to scroll */
        /* This allows ~5vh off of the VH max-height of the modal-body for the padding, etc within the modal-body */
        max-height: 79vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #showSite-modal .tab-max .modal-body .modal-body-scroller{
        /* Needed to account for padding from modal body */
        max-height: calc(var(--maxHeight) - 30px);
    }

    #showSite-modal .modal-body .modal-body-scroller.edit-mode{
        /* This subtracts 8 VH from the body-scroller when the footer / submit buttons are shown */
        max-height: calc(var(--maxHeight) - 85px);
    }
}

.modal-body-scroll-valuation {
    max-height: 54vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.valuation-input{
    width: 64px;
}

.valuation-input-reference{
    width: 128px;
}

.valuation-input-percent{
    width: 48px;
}

/* add gray background and a little bottom padding to right side of view site modal */
.background-gray{
    background-color: #f2f2f2;
    padding-bottom: 10px;
}

#bsModal {
    z-index: 9000;
}
.popup-img {
    float: left;
    height: 100px;
    max-width: 160px;
    margin-right: 10px;
    border: 1px solid #84a669;
}

.ui-dialog {
    z-index: 5001;
}

#popupDialog{
    font-size: 0.8em;
}

.ui-dialog .ui-dialog-titlebar-close {
    width:19px;
    height:18px;
}

/* our own button class */
.btn-davey, .btn-davey:disabled, .uib-datepicker-popup .btn.btn-success, .btn-reverse-davey.active-queue-button, .btn-reverse-davey.active-queue-button:focus {
    color: var(--drg-primary-main-text);
    background-color: var(--drg-primary-main);
    font-weight: bold;
}

.input-group-addon.btn-davey {
    color: var(--drg-primary-main);
    background-color: var(--drg-primary-lightest);
    border-color: var(--drg-primary-main);
}

.btn.btn-davey:focus, .uib-datepicker-popup .btn.btn-success:focus {
    color: var(--drg-primary-main-text);
}

.btn-davey:hover:not([disabled]), #site-grid-popout-button.btn-davey:hover, #site-grid-slider-button.btn-davey:hover,
#grid-menu-toggle-button > .btn-davey:hover, .uib-datepicker-popup .btn.btn-success:hover {
    background-color: var(--drg-primary-main-hover);
    color: var(--drg-primary-main-text);
}

/* our own button class - reverse */
.btn-reverse-davey, .btn-reverse-davey:focus, .btn-reverse-davey[disabled] {
    background-color: var(--drg-primary-main-text);
    color: var(--drg-primary-main);
    border-color: #ccc;
    font-weight: bold;
}

.btn-reverse-davey:hover:not([disabled], .active-queue-button) {
    color: var(--drg-primary-main);
    background-color: var(--drg-primary-lightest);
}

.btn-reverse-davey:hover:not([disabled], .active-queue-button) > .drg-primary-theme-filter{
    filter: var(--drg-primary-main-filter);
}

/* our own button class - outline */
.btn-outline-davey {
    color: var(--drg-primary-main);
    border-color: var(--drg-primary-main);
}

.btn-outline-davey:hover {
    background-color: var(--drg-primary-main-hover);
}

.btn-outline-davey:active,.btn-outline-davey.active {
    color: var(--drg-primary-main);
    border-color: var(--drg-primary-main);
    -webkit-box-shadow:0 0 0 2px rgba(114,140,95,.5);
    box-shadow:0 0 0 2px rgba(114,140,95,.5)
}

.toggle-active {
    background: greenyellow;
}

/* modals */

.pagination>li>a, .pagination>li>span{
    color: var(--drg-primary-main);
}

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover{
    color: var(--drg-primary-main);
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
    background-color: var(--drg-primary-main);
    border-color: var(--drg-primary-main);
}

#osx-modal-data .nav-tabs{
    margin-bottom: 10px;	
}

/* remove the sorting icon from the first row of a scrolling datatable */
.dataTables_scrollBody table.dataTable thead tr th:after{
    content: ' ';	
}

fieldset{
    min-height: 90px !important;	
}


.popover-title span {
    display:block;
    float: left;
    width: 236px;
}

.btn-primary {
    /*background-image: linear-gradient(to bottom,#78B749 0,#568830 100%);
    background-image: -webkit-linear-gradient(top,#78B749 0,#568830 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#78B749), to(#568830));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff78b749', endColorstr='#ff568830', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;*/
    border-color: #54852F;
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #91B874;
    border-color: #54852F;
}

.btn-primary.active, .btn-primary:active {
    background-color: #568830;
    border-color: #54852F;
}

.arAttribute {
    float: left;
}

.arCondition {
    float: left;
    position: relative;
}


#arAddReport:focus {
    outline: none;
}

#arAddReportModal {
    top: 40px;
    z-index: 5006;
    -webkit-transform: none;
    transform: none;
}

.ar-fade {
    -webkit-transition: opacity 5.4s linear, none;
    -moz-transition: opacity 5.4s linear, none;
    -ms-transition: opacity 5.4s linear, none;
    -o-transition: opacity 5.4s linear, none;
    transition: opacity 5.4s linear, none;
}

div#arAddReportModal.modal.fade, div#arReportModal.modal.fade.in {
    /*top: 40px;*/
    -webkit-transform: none;
    transform: none;
}

.zindex-modal-update {
    z-index: 5004 !important;
}

#calendarModal, #homepageModal, #rvr-modal {
    z-index: 5002;
}

#arReportModal {
    z-index: 5003;
}

.btn.btn-davey.active, .btn.btn-davey:active {
    /*-webkit-box-shadow: 0px 3px 5px 0px rbga(0,0,0,.25) inset;
    box-shadow: 0px 3px 5px 0px rbga(0,0,0,.25) inset;*/
    -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.25);
    box-shadow:inset 0 3px 5px rgba(0,0,0,.25)
}

.ui-select-bootstrap .ui-select-match-text { display: inline-block; text-overflow: ellipsis; overflow: hidden; }
.ui-select-bootstrap .ui-select-match-text.pull-left { float: none !important; }
.ui-select-bootstrap .ui-select-choices-row.active>a { background-color: var(--drg-primary-main-hover); }

.arCondition .form-group, .arAttribute .form-group {
    margin-bottom: 5px;
}

.chosen-single.form-control, .chosen-container-active.chosen-with-drop .chosen-single.form-control {
    width: 100% !important;
    background: #fff;
}

.add-geog-list-value {
    width: 100%;
    background: #fff;
}

#arSaveReport:focus {
    outline: none;
}

#reports-menu-nav :last-child {
    margin-bottom: 5px;
}

#arApp > accordion > div.panel-group {
    margin-bottom: 5px;
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
    background-color: white;
    border-color: darkgray;
    color: black;
    white-space: normal;
    word-break: break-word;
    text-align: left;
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item:focus {
    background-color: var(--drg-primary-main-hover);
    /* border-color: darkgray; */
    color: white;
}

.chosen-container .chosen-results li.highlighted {
    background-image: none;
    background-color: var(--drg-primary-main-hover);
}

.modal-backdrop {
    position: fixed;
}

.clear-float {
    clear: both;
}

div.tab-pane > div.dataTables_wrapper > div.clear {
    clear: both;
}
div.tab-pane > div.dataTables_wrapper > div.dataTables_length {
    float: left;
}
div.tab-pane > div.dataTables_wrapper > div.dataTables_filter {
    float: right;
}

div#arFacilities .input-group-addon strong, div#arPermissions .input-group-addon strong, div#arFocus .input-group-addon strong, div#arDefaultMapFilter .input-group-addon strong {
    color: black;
    /* font-weight: normal; */
}

div.DTTT {
    margin-bottom: 0.5em; float: right;
}

div.dataTables_wrapper {
    clear: both;
}

.dataTables_paginate .pagination .paginate_button, .dataTables_paginate .pagination .paginate_button.disabled {
    padding: 0;
    margin-left: 0;
    border: 0;
}

.save-successful {
    background: rbga(0,0,0,0.75);
    font-size: 5em;
    color: var(--drg-primary-main);
}

#arFacilities .input-group-addon.h4, #arPermissions .input-group-addon.h4, #arFocus .input-group-addon.h4, #arDefaultMapFilter .input-group-addon.h4 {
    background: #f5f5f5;
}

.dataTables_wrapper>.dataTables_scroll>.dataTables_scrollBody>table {
    margin: 0;
}

table.dataTable thead .sorting_asc, table.dataTable thead .sorting, table.dataTable thead .sorting_desc {
    background-image: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active, .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    border: none;
    outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button a {
    outline: none;
}

.dataTables_paginate > ul.pagination {
    display: flex;
    align-items: center;
}

.grid .ui-grid-top-panel {
    background: #f5f5f5;
}

#adminModal .modal-content {
    overflow: auto;
}

#rvr-modal .modal-content {
    min-height: 100%;
}

#adminApp .admin-panel .admin-panel-header h1 {
    margin-top: 5px;
}

#adminApp .admin-panel .button-container {
    margin: 10px 0px;
}

#adminApp .admin-panel .button-container label{
    margin: 0px 10px;
}

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

#adminApp #edit-user-panel .userActionsWrapper a {
    margin: 5px 20px 5px 0px;
    display: inline-block;
}

#admin-group-edit-buttons {
    padding: 0;
    padding-top: 4em;
}
#admin-group-edit-buttons button {
    margin-left: 5px;
}
#admin-group-edit-left-right {
    /*margin-top: 4em;*/
    margin: 2.5em 10em 0em;
    width: 10em;
}

#admin-group-edit-left-right button {
    margin-left: 5px;
}

#edit-group-name {
    min-width:25vh;
}


.admin-group-list {
    min-height: 12em;
    margin-bottom: 10px;
}

#adminModal .modal-content {
    min-height: 15em;
    height: 100%;
}

#showSite-modal .modal-content {
    min-height: 100%;
}

.admin-panel-body {
    min-height: 15em;
}
.admin-panel-buttons {
    margin-bottom: 20px;
}
#adminModal .grid {
    min-height: 65vh;
}

#invalid-rule-warning {
    width: 100%;
    height: 5em;
    border-radius: 5px;
    padding: 5px;
}
#invalid-rule-warning ul {
    list-style: none;
}

span.alert-danger.material-icons {
    background-color: initial;
}

.value-used-filters-reports {
    margin-top: 15px;
}

.x2-glyphicon {font-size: 2em;}

@media all and (max-width: 991.99px){
    .sm-x2-glyphicon {font-size: 2em;}
}

/* This class and animation keyframes allow a glyphicon to rotate clockwise */
.glyphicon-spin {
  animation: spin 1000ms infinite linear;
}
@keyframes spin {
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

@media all and (max-width: 767.99px){
    #adminApp #adminNavigation {margin-bottom: 30px;}
}

@media all and (min-width: 768px){
    #adminApp #adminNavigation {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }
}

/* NEW ICONS */
@font-face {
  font-family: 'icomoon';
  src:  url('icomoon/fonts/icomoon.eot?pjcff2');
  src:  url('icomoon/fonts/icomoon.eot?pjcff2#iefix') format('embedded-opentype'),
    url('icomoon/fonts/icomoon.ttf?pjcff2') format('truetype'),
    url('icomoon/fonts/icomoon.woff?pjcff2') format('woff'),
    url('icomoon/fonts/icomoon.svg?pjcff2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Bootstrap additional icons */
.icon-tools:before {
  content: "\e902";
}
.icon-screwdriver:before {
  content: "\e903";
}
.icon-cone2:before {
  content: "\e905";
}
.icon-leaf:before {
  content: "\f06c";
}
.icon-map-o:before {
  content: "\f278";
}
.icon-map:before {
  content: "\f279";
}
.icon-pie-chart:before {
  content: "\e906";
}
.icon-tools2:before {
  content: "\e907";
}
.icon-traffic-cone:before {
  content: "\e908";
}
.icon-tree:before {
  content: "\e909";
}
.icon-chainsaw-1:before {
  content: "\e901";
}
.icon-chainsaw-2:before {
  content: "\e900";
}
.icon-cone:before {
  content: "\e904";
}
.icon-wrench:before {
  content: "\e991";
}
.icon-hammer:before {
  content: "\e996";
}
.icon-hamburger-skinny:before{
    content: "\e90a";
}
.icon-chainsaw-add:before{
    content: "\e90b";
}
.icon-call-add:before{
    content: "\e90c";
}
.icon-call:before{
    content: "\e90d";
}
.icon-stamp:before {
    content: "\e90e";
}
.icon-globalEdit:before{
    content: "\e90f";
}
.icon-grid-upload {
    width: 29px;
}
.icon-grid-upload-button {
    padding: 4px 8px;
    margin-left: -0.5px !important;
}
.larger { 
    font-size: 150%;
}
/* used to make all the grid button align on all screen sizes */
.grid-menu-icon {
    height:40px;
}
.viewSite-viewRecord .btn-add-record {
    width: 100%;
    margin-bottom: 10px;
}

/*May not need now with chosen-select*/
.editRecordForm select {
    height: 34px;
    border-radius: 4px;
    max-width: 100%;
}

.editRecordForm .addNewCallerToggle .select2-container {
    /* vertically centers the select (as compared to the button)*/
    margin-top: 3px;
}

.editFormContainer input[type='radio']{
    margin-top:7px;
    margin-bottom:7px;
}

.editRecordForm input[type="checkbox"] {
    vertical-align:middle;
    margin: 5px;
}
.editRecordForm input[type="radio"], .editRecordForm input[type="checkbox"] {
    margin-top: 0px;
    height:20px;
    width:20px;
}
.editRecordForm .radio-left{
    display: inline-block;
    vertical-align: middle;
}
.editRecordForm .radio-right{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 30px);
}

#printOptionsForm .radio-left{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
#printOptionsForm .radio-left-div{
    height: 25px;
}
.editRecordForm .twoInOne {
    display: inline-block;
    width: 49%;
}
.editRecordForm .buttonAndInput {
    display: inline-block;
}
.editRecordForm .btn.buttonAndInput {
    float: right;
}
/* Restrict text area horizontal resizing */
.editRecordForm textarea, #alterSiteAppContainer textarea{
    resize: vertical;
}
#benefitsDetails {
    padding: 0 20px;
}

#overall_benefits_box hr {
    box-shadow: 0px 0px 1px 1px lightgrey;
}

#measure-length.active, #measure-area.active {
    color: #337ab7;
}

div#PrintMenu {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.printFormSpan{
    vertical-align: top;
    font-size: 14px;
}

/*added to allow disabled buttons to still show tooltips*/
.tooltip-wrapper {
    display: inline-block; /* display: block works as well */
}
.tooltip-wrapper .btn[disabled] {
    /* don't let button block mouse events from reaching wrapper */
    pointer-events: none;
}
.tooltip-wrapper.disabled {
    /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
    cursor: not-allowed;
}
.custom-disabled {
    cursor: not-allowed;
    color: #dddddd !important;
    border: none;
}

#workOrderContractContainer label {
    min-width: 120px;
}

#workOrderContractContainer input[type='number'], #workOrderContractContainer input[type='date'] {
    display: inline-block;
    width: 300px;
    /*width: calc(100% - 140px);*/
}
#workOrderContractContainer .worderTime {
    width: 148px !important;
}

#rules-edit-dropdown {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#editWork-rules {
    margin-bottom:10px;
}

.hidden-work-comments{
    display:none;
}

div.ui-grid-cell.ng-scope.bg-danger {
    background-color: #f2dede;
}

.view-only {
    background-color: #dcdcdc;
}

/* This is for the status button group */
.flex-parent-row {
    display: flex;
    display: -ms-flex;
    flex-flow: row;
}
.flex-child-default{
    flex: 1 1 auto;
}
.pass-flex{
    display:flex;
    display:-ms-flexbox;
    flex-grow: 1;
}

.ms-flex {
    display:flex;
    display:-ms-flexbox;
}
.modal-flex {
    display:flex;
    display:-ms-flexbox;
    height:90%;
}
.modal-container-flex {
    display:flex;
    display:-ms-flexbox;
    flex-flow:column;
    height:100%
}
.modal-body-flex {
    flex: auto;
    overflow-y:scroll;
}
#edit-permissions-panel>.modal-body>*>* {
    clear:left;
    float:left;
}
.edit-permissions-panel {
    z-index: 5005 !important;
}
.radiobtn-davey {
    background-color:#dfdfdf;
    color:black;
}
.radiobtn-davey.active,.radiobtn-davey.focus,.radiobtn-davey:active,.radiobtn-davey:focus,.open>.dropdown-toggle.radiobtn-davey {
    background-color: var(--drg-primary-main)!important;
    color: var(--drg-primary-main-text)!important;
}
.radiobtn-davey:hover:not([disabled]) {
    background-color:var(--drg-primary-main-hover) !important;
    color: white;
}
.arselect.ng-invalid.ng-touched {
    border-color: red;
}

.tabbed{
  float : left;
  width : 100%;
}

.tabbed > input{
  display : none;
}

.tabbed > section > h1{
  float       : left;
  box-sizing  : border-box;
  margin      : 0;
  padding     : 0.5em 0.5em 0;
  overflow    : hidden;
  font-size   : 1.25em;
  font-weight : normal;
}

.tabbed > input:first-child + section > h1{
  padding-left : 1em;
}

.tabbed > section > h1 > label{
  margin-top: -0.15em;
  display                 : block;
  padding                 : 0.25em 0.50em;
  border                  : 1px solid #ddd;
  border-bottom           : none;
  border-top-left-radius  : 6px;
  border-top-right-radius : 6px;
  box-shadow              : 0 0 0.5em rgba(0,0,0,0.0625);
  background              : #fff;
  cursor                  : pointer;
     -moz-user-select     : none;
      -ms-user-select     : none;
  -webkit-user-select     : none;
    user-select			  :	none;
}

.tabbed > section > div{
  position      : relative;
  z-index       : 1;
  float         : right;
  box-sizing    : border-box;
  width         : 100%;
  margin        : 2.5em 0 0 -100%;
  padding       : 0.5em 0.75em;
  border        : 1px solid #ddd;
  border-radius : 4px;
  box-shadow    : 0 0 0.5em rgba(0,25,0,0.0625);
  background    : #fff;
}

.tabbed > input:checked + section > h1{
  position : relative;
  z-index  : 20;
}

.tabbed > input:not(:checked) + section > div{
  display : none;
}

.tabbed > input:checked + section > h1 > label{
    border-top: 2px solid var(--drg-primary-main);
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
    height: 100%;
}
#sites.active, #calls.active, #works.active, #workorders.active {
    flex:auto; display: flex; flex-direction:column
}

/* Makes the basemap labels prettier*/
#cust-layers label {
    font-weight: normal;
    padding-left: 5px;
    cursor: pointer;
}

/* 
This was added to pad the map such that the Google logo is visible / not buried under the left toolbar / bottom grid bar 
This is initial padding, it gets changed / recalculated whenever panel/grid moves or window resizes
*/
div#mapElementSizeContainer {
    padding-bottom: 45px;
    padding-left:  45px;
    background-color: var(--drg-primary-main);
    width: var(--availableCanvasWidth);
    height: calc(var(--availableHeight) - var(--navbarHeight));
}

#map_element {
    height: 100%;
    width: 100%;
}
/* MessageBoxModal needs to be on top of other items */
.message-box-window {
    z-index: 5007;
}
/* DeleteModal needs to be on top of other items */
#deleteModal {
    z-index: 5005;
}

div#overall_benefits_panel>div.panel-body{
    padding:10px;
}

button.benefitsHeader, button.benefitsHeader:focus {
    /* styles button to fit the div */
    width: 100%;
    /* makes button match other accordions style*/
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    /*removes focus (blue) outline*/
    outline: none;
}

.benefitsCard{
    /* shift div up 1 to line it up with the button */
    margin-top: -1px;
}

.benefitsDiv{
    /* padding to make text look nicer woithin div */
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* adds border to benefits panel*/
    background-color: #f5f5f5;
    border: #ddd;
    border-style: solid;
    border-width: thin;
    /* lines up the bottom border with the top of the next div */
    margin-bottom: -1px;
}

.benefitsRefresh {
    float: right;
    padding: 1px 6px;
    margin: -2px 6px 0px 0px;
}

.flexDiv, #file-review-toolbar.flexDiv{
    display: flex;
}

.alignCenter{
    align-self: center;
}

.fontSize1-25{
    font-size: 1.25em;
}

.fontSize1-7{
    font-size: 1.7em;
}

.loaderContainer {
    background-color: rgba(0,0,0,0.5);
    height: 150px;
    margin-left: -75px;
    margin-top: -75px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    z-index:99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* used to set type 8 attribute photos to a max height of 65 in the viewsite */
img.type8photo{
    max-height: 65px;
}

/* sets padding to line buttonsdivs up with h3 div on siteview */
.siteViewHeaderButtonDiv {
    padding: 11px;
}

#loginButtonsList a {
    padding: 0px;
    margin-left:12px;
    margin-right:12px;
    margin-bottom: 10px;
    font-size: 25px;
}

#user_pass {
    margin-top: 5px;
}

#wholeLoginBox {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.half-login {
    width: 50%;
}
#daveyLoginForm.half-login {
    padding-right: 5px;
}
#daveyLoginForm.half-login .modal-footer {
    padding: 0;
    margin-top: 7.5px;
}
#daveyLoginForm.half-login button{
    width: 100%;
    margin: 0;
    margin-bottom: 5px;
}

.full-login {
    width: 100%;
}

.separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    flex: 1 1 0%;
    margin: 0 15px;
}

.separator-line {
    width: 2px;
    background: #ccc;
    padding: 0;
    margin: 0 5px;
    height: calc(50% - calc(1.5em + 2px));
    flex: 1;
}
.separator-text {
    font-size: 1.5em;
    border: #ccc 2px solid;
    border-radius: 50%;
    color: #ccc;
    width: calc(1.5em + 7.5px);
    text-align: center;
    height: calc(1.5em + 7.5px);
    vertical-align: middle;
    display: inline-block;
}

#SSOLoginOptions {
    padding-left: 5px;
    display: flex;
    flex-direction: column;
}
#SSOLoginOptions a {
    display: inline-block;
    margin-bottom: 5px;
}

.left-margin-auto {
    margin-left: auto;
}

.right-margin-auto {
    margin-right: auto;
}

.max-width-100 {
    max-width: 100%;
}

.clear-both {
    clear: both;
}

/* View site left panel css*/
#documentbuttons {
    height:20px;
}

.carousel-indicators {
    bottom: 0px;
}

.carousel-indicators li{
    box-shadow: 0 0 3px black;
}

.carousel-indicators li.active{
    background-color: lightgray;
}

.carousel-inner .item {
    height: 351px;
}

.carousel-document {
    width:320px;
    height:320px;
}

.carousel-loader {
    width: 100%;
}

.active-doc {
    border: solid 3px var(--drg-primary-main);
}

#siteMapDiv {
    height: 275px;
}

#streetViewDiv {
    height: 275px;
}

#previewImage {
    width:100px;
    border: 1px solid #84a669;
    margin-top: 15px;
}

.mapLoader {
    width: 150px;
    height: 150px;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.status-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 1px solid;
    display: inline-block;
}

/* positions the status dot in the work order table tabs */
.status-dot-wrapper-worder {
    padding-top:10px;
    padding-left: 0px;
    padding-right: 20px;
}

.status-dot-wrapper-wrecord {
    padding-top:30px;
}

.bg-green {
    background-color:#00b050;
}

.bg-red {
    background-color:#ff0000;
}

.bg-yellow {
    background-color:#ffff00;
}

.bg-blue {
    background-color:#0070c0;
}

.bg-silver {
    background-color:silver;
}

.bg-davey-green {
    background-color:var(--drg-primary-main);
}
/* End view site left panel css*/

.btn-group-vertical>label.worderPrintCheckbox {
    display: flex;
    justify-content: space-between;
}
/* 9 and 3 are artbitrary numbes to allow the color swatch to fit nicely inside the ui grid cell and have nicer corners */
.colorSwatch {
    padding: 9px;
    border-radius: 3px;
}

/*
    Needed for multi Select on Cross-Layer Search 'Specify Layer' field
    loads as being only 10px and will change to the length of the form when clicked or another field is clicked.
*/
div#crossLayerMultiSelect div input.ui-select-search {
    width: 100% !important;
}

.whiteText {
    color: white;
}
.lightGreyText {
    color: #d3d3d3;
}

.panel-heading.warningPanelHeader {
    background-color: var(--drg-warn-main);
    color: var(--drg-primary-main-text);
}

#missingRequired {
    overflow-y: auto;
    max-height:100px;
}

/*
    JQuery UI Datepicker Style updates
*/
#ui-datepicker-div {
    position: absolute !important;
}

.datepickerHeight{
    height:34px; /* height set to 34px to match bootstrap form-control style for input elements*/
}

/* overwrite the default sizes for the select dropdown to be the width of the parent*/
.multiselect-parent {
    width: 100%;
}

.multiselect-parent .dropdown-toggle {
    width: 100%;
}

.multiselect-parent .dropdown-menu {
    width: 100%;
}

/* overwrites the default value for the width of the page number select on the site grid */
.ui-grid-pager-row-count-picker select {
    width: 100px;
}

/* Fixes a flickering issue on the tooltip when hovering over the google pie chart on the dashboard*/
svg[aria-label="A chart."] > g > g:last-child { 
    pointer-events: none 
}

.gridMultiSelectFilter{
    width:95% ;
}

.gridMultiSelectFilter li.ui-select-match-item {
    font-size: 12px;
    width: 100%;
}

.printMenuHeight{
    height:32px;
}

.selectedReport{
    background-color: rgba(var(--drg-primary-main-as-rgb), 0.57) !important;
}

#search-button-box {
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid #e3e3e3;
    background-color: #f8f8f8;
    z-index: 2;
    width: 435px;
    margin-bottom: 0;
}

#nav-layers-li img {
    filter: var(--drg-primary-main-text-filter);
}

#nav-search-li #search-button-box {
    position: relative;
    bottom: 0;
    left: 0;
    padding-bottom: 10px;
    padding-top: 20px;
    border-top: 1px solid #e3e3e3;
    background-color: #f8f8f8;
}

#cross-facility-search-button-box {
    position: fixed;
    bottom: -5px;
    left: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    border-top: 1px solid #e3e3e3;
    background-color: #f8f8f8;
    z-index: 2;
}

#cross-facility-search-button-box.fieldVersion {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-top: 1px solid #e3e3e3;
    background-color: #f8f8f8;
    z-index: 2;
}

#nav-search-li #cross-facility-search-button-box {
    position: inherit;
    bottom: -15px;
    left: 0;
    padding-bottom: 10px;
    padding-top: 20px;
    border-top: 1px solid #e3e3e3;
    background-color: #f8f8f8;
    z-index: 2;
}

.tab-content-bottom-margin {
    margin-bottom:50px;
}

#cross_facility_search_panel_body, #combined_search_panel_body {
    margin-bottom:100px;
}

.dd-select, .dd-container {
    width: 100% !important;
    background-color: transparent !important;
    border: none;
}

.dd-options {
    overflow-y: auto;
    max-height: 270px;
    position: fixed;
}

label.dd-option-text {
    line-height: 0px !important;
    display: inline !important;
}

.dd-option {
    overflow: auto;
}

label.dd-selected-text {
    line-height: 0px !important;
    display: inline !important;
}

.dd-selected {
    color: #000;
    min-height: 55px;
}

#currentlySelectedSites {
    padding-left: 15px;
    padding-bottom: 5px;
    display: none;
}

.showOnSelection {
    display: block;
}

.hideOnSelection {
    display: none;
}

.width50 {
    width: 50%;
}

.widthFull {
    width: 100%;
}

.inlineDisplay {
    display: inline;
}

#quickFiltersContainer{
    padding: 20px;
    border: 1px solid #e3e3e3;
}

.quickFiltersContainer{
    padding: 20px;
    border: 1px solid #e3e3e3;
}

.quickFiltersContainerLarger{
    padding: 20px;
    padding-bottom: 50px;
    border: 1px solid #e3e3e3;
}

.quickFilterWell {
    max-height:200px;
    overflow-x:hidden;
    margin-bottom:0px;
}

.margin-left-auto {
    margin-left: auto;
}

.margin-right-auto {
    margin-right: auto;
}

#alterSiteAppContainer ul.dropdown-menu {
    max-height: 282px;
    overflow: auto;
}

.primary-contrast{
    color: var(--drg-primary-main-text);
}

#print-menu-tab .panel.panel-default{
    cursor: pointer;
    width: 100%;
    text-align: center;
}

#print-menu-tab .panel-heading{
    padding:2px 15px;
}

#print-menu-tab .panel-heading click-trap div {
    float: right;
    vertical-align:top;
}

#print-menu-tab .panel-heading click-trap div span{
    font-size: 8px;
}

#print-menu-tab .panel-body{
    overflow-y: auto;
    max-height: calc(59vh);
}

#print-menu-tab .panel-body hr{
    margin-top: 10px;
    margin-bottom: 10px;
}

#print-menu-tab .panel-body.sub-report{
    overflow-y: auto;
    max-height: calc(59vh);
    padding: 5px;
}

/*Chart Modal Styles*/

#chart-box-modal .modal-dialog {
    width: 90%;
    height: 94vh;
    max-height: 94vh;
    margin: 3vh 5.5vw;
    overflow-x: hidden;
    overflow-y: hidden;
} 

#chart-box-modal .modal-body {
    height: 85vh;
    width: 87vw;
}

#chart-box-highchart {
    height: 100%;
    width: 100%;
}

.work-record-form-textarea {
    resize: vertical;
    min-height: 40px;
    max-height: 300px;
}

#addWork-loadLast{
    width: 100%;
}

.gridFilter-datepicker-container, .gridFilter-timepicker-container{
    z-index:0;
    margin:0 0 5px 0;
}

.gridFilter-datepicker-input, .gridFilter-timepicker-input{
    height: 25px;
}

.gridFilter-datepicker-button, .gridFilter-timepicker-button{
    width:25px;
    height:25px;
    padding:3px 5px;
}

#customZoomButtons {
    display:none;
    z-index:1039;
}

#customZoomButtons > a {
    cursor: pointer;
}

#customZoomButtonsAlterSite {
    z-index:1;
    left: 90% !important;
}

.jrio-print {
    max-height: calc(90% - 60px);
    overflow-y: auto;
}

.quickFilterModal, .rulesModal, .printModal {
    z-index: 5005 !important;
}

.quickFilterBackdrop, .rulesBackdrop, .printBackdrop {
    z-index: 5004 !important;
}

.adminConfirmationModal {
    z-index: 5007 !important;
}

.adminConfirmationBackdrop {
    z-index: 5006 !important;
}

#security .form-group, #update-security-form-div .form-group {
    margin-top: 10px;
}

.processParameters {
    max-height: 35vh;
    overflow-y: auto;
}
.ui-select-bootstrap>.ui-select-match>.btn {
    height: 100%;
    min-height: 34px;
}

#customProcess #cp-loadingOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
}

#customProcess #cp-loadingImage {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

.ui-grid-cell-contents-break {
    padding: 5px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow-y: auto;
   height: 100%;
   word-break: break-all;
 }

 .unassigned-data-checkbox {
     padding-left: 10px;
     color: #A6A6A6;
 }
 
 .grid-button-size {
     width: 25px;
     height: 25px;
 }
 
 .add-alert-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/glyphicons/bell-white.svg");
    background-repeat: no-repeat;
}

.remove-alert-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/glyphicons/bell-off-white.svg");
    background-repeat: no-repeat;
}

.add-alert-icon:hover {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/glyphicons/bell.svg");
    background-repeat: no-repeat;
}

.remove-alert-icon:hover {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/glyphicons/bell-off.svg");
    background-repeat: no-repeat;
}

.home-check-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/glyphicons/home-check-white.svg");
    background-repeat: no-repeat;
}

.home-check-icon:hover {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/glyphicons/home-check-grey.svg");
    background-repeat: no-repeat;
}

.center-glyphicon{
    line-height: unset;
}

.grid-button-adjusted-padding{
    padding: 6px 10px;
}

.hidden-radio-button{
    visibility: hidden;
    width: 0px !important;
}

.hidden-attribute-container {
    display: none;
}
@media only screen and (max-width: 479px) {
    #headerRow>.col-xs-4{
        width: 50%;
    }

    #viewSiteHeader{
        display:none;
    }
    #editRecord-work-worktab .col-xs-6{
        width: 100%;
    }
    #editRecord-work-worktab .col-xs-3, #editRecord-work-worktab .col-xs-4{
        width: 50%;
    }
    #loadLastButton.col-xs-offset-3{
        margin-left: 0%;
    }
    [id^='work-comment-'] > .col-xs-12{
        padding-left: 0px;
    }
    #work-record-body .col-xs-6{
        width: 100%;
    }
    #work-record-body .col-xs-3, #work-record-body .col-xs-4{
        width: 50%;
    }
    /* This targets ui-selects so that selections do not overflow */
    .ui-select-container.ui-select-bootstrap .ui-select-match-text{
        overflow-x: hidden;
        text-overflow: ellipsis;
        float: left !important;
    }
}
.show-custom-process-param{
    padding-bottom: 25px;
}

.hide-custom-process-param{
    padding-bottom: 0px;
}

input.hideWorkRecords{
    margin: 0px 0px 20px 5px;
}

.glyphicon-base-white{
    /* actual color: #FFFFFF */
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(349deg) brightness(102%) contrast(101%);
}

a:hover .glyphicon-base-white{
    /* actual color: #333333*/
    filter: brightness(0) saturate(100%) invert(9%) sepia(34%) saturate(0%) hue-rotate(160deg) brightness(107%) contrast(77%);
}
.popover-alter{
    margin: 0px 10px;
}#layers-table-wrapper{
    width: 100%;
    overflow: auto;
    max-height: 80vh;
    min-height: 230px;
}

#layers-table-wrapper table{
    border-collapse: separate;
}

#layers-table-wrapper table th, #layers-table-wrapper table td{
    border: 1px #DDD solid;
}

#layers-table-wrapper table td{
    text-align: center;
    vertical-align: middle;
}

#layers-table-wrapper thead th{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    background: #FFF;
    top: 0;
    min-width: 100px;
}

#layers-table-wrapper th:first-child{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    position: sticky;
    left: 0;
    z-index: 2;
}
#layers-table-wrapper thead th:first-child{
    z-index: 5;
}
#layers-table-wrapper tbody tr:nth-child(odd) th:first-child{
    background: #F9F9F9;
}
#layers-table-wrapper tbody tr:nth-child(even) th:first-child{
    background: #FFFFFF;
}
.flex-panel-column{
    display: flex;
    flex-direction: column;

}
.flex-panel-column > .flex-panel-column-body{
    overflow-y: auto;
}
.info-popover{
    min-width: 365px;
}
.pop-info{
    z-index: 10;
}
.no-display{
    display: none;
}

.large-icon{
    font-size: 30px;
}
li > a.large-icon-padding{
    padding: 5px;
}

.disclaimerSmall{
    line-height: 1;
    font-size: 10px;
}

.user-groups-grid .ui-grid-header-cell {
    height: 90px;
}
.button-container-bottom {
    position: sticky;
    bottom: 0;
    background-color: white;
}
.padding-top-15 {
    padding-top: 15px;
}

.user-form-scrollable-container {
    max-height: 70%;
    overflow: auto;
    padding-right: 25px;
}

/* Adjustments for angular overlays */
.cdk-overlay-container{
    z-index: 5001;
}

/* Adjustments for angular overlays */
.cdk-overlay-container ~ .cdk-overlay-container{
    z-index: 5500;
}


#viewSite-modal-container .tab-max .modal-body.viewSite-viewRecord{
    height: calc(var(--maxHeight) - 15px);
}

#viewSite-modal-container .tab-max .modal-body.viewSite-viewRecord.allow-buttons.edit-mode{
    /* Extra Offset for when bottom buttons are present */
    height: calc(var(--maxHeight) - 70px);
}

.tab-max {
    --maxHeight: calc(var(--modalHeight) - 160px);
    max-height: var(--maxHeight);
}

#viewSite-modal-container .tab-max .modal-body{
    max-height: var(--maxHeight);
}

@media (min-width: 768px){
    .tab-max {
        --maxHeight: calc(var(--modalHeight) - 95px);
    }    
}
.clip-text{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.new-work-tab-icon{
    margin-bottom: -20px;
}
.radio-button-padding {
    padding-left: 5px;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #ddd;
}

.flex-column {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    align-items: flex-start;
    padding: 5px;
}

.flex-column:last-of-type {
    border-left: 1px solid #ddd;
}

.flex-half-column {
    display: flex;
    flex-direction: column;
    flex-basis: 25%;
    align-items: flex-start;
    padding: 5px;
}

.flex-half-column:last-of-type {
    border-right: 1px solid #ddd;
}

.flex-meta-column {
    display: flex;
    flex-direction: column;
    flex-basis: 35%;
    align-items: flex-start;
    padding: 5px;
    border-left: 1px solid #ddd;
}

.flex-icon-column {
    display: flex;
    flex-direction: column;
    flex-basis: 15%;
    align-items: flex-start;
    align-self: flex-end;
    padding: 5px;
}

#photoManip{
    display: flex;
    justify-content: center;
    margin-bottom: -35px;
}

.type8-max-width {
    max-width: 42vw;
    display: inline-block;
    text-overflow: ellipsis;
}

@media (min-width: 450px){
    .type8-max-width{
        max-width: 67vw;
    }
}

@media (min-width: 821px){
    .type8-max-width{
        max-width: 19vw;
    }
}

.excel-download-disable-color {
    color: gray;
    background-color: lightgray;
    opacity: 0.5;
}

.warning-note {
    color: red;
}

img[id^='excel-downloader-loader-'] {
    height: 20px;
    width: 20px;
}

#queueSummary-totalCount {
    margin: 15px;
}

.modal-form .form-group{
    margin-bottom: 10px;
}

#queue-subscriptions-container-MD td {
    max-width:100px;
    word-wrap:break-word;
}

div.loader-background{
    width: 150px;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-content{
    display: flex;
    justify-content: center;
    align-items: center;
}

.drg-progress-bar {
    margin: 5px 0;
    display: block;
}

.loader-background.loader-margin {
    margin: 25px auto;
}

#restore-archive-button {
    display: none;
}

.color-row{
    display: flex;
    align-items: center;
}

.color-row label{
    margin-right: 5px;
}

.view-site-inactive-value {
    color: gray;
    font-style: italic;
}

.sync-direction {
    margin-top: 20px;
    margin-bottom: 25px;
}

.attribute-error,.message-error {
    color: red;
}

.message-success {
    color: green;
}

#greehillLidarViewerContainer {
    height: 275px;
}

#greehillLidarPlaceholderContainer {
    height: 20px;
    position: relative;
}

#greehillLidarPlaceholderMessage {
    display: block;
}

#fullscreenLidarButton {
    display: block;
    position: absolute;
    right: 35px;
    margin-top: 20px;
}

#greehillLidarViewer {
    display: block;
    height: 100%;
    width: 100%;
}