/* Remove the webfont icon
.toolbar .tool.findme .icon:before {
    content: '';
} */

/* Add the moose!
.toolbar .tool.findme .icon {
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-image: url(./logo-mini.png);
} */


/* Adding icons for all custom tools */

.tool.search-Taxlots .icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toolbar .tool.search-Taxlots .icon:before {
	/* This is the "eye dropper" */
	content: "\f002";
}

.tool.search-Taxlots-simple .icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toolbar .tool.search-Taxlots-simple .icon:before {
	/* This is the "eye dropper" */
	content: "\f002";
}

.tool.search-Surveys .icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toolbar .tool.search-Surveys .icon:before {
	/* This is the "eye dropper" */
	content: "\f002";
}

.tool.search-Taxlots-list .icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toolbar .tool.search-Taxlots-list .icon:before {
	/* This is the "eye dropper" */
	content: "\f002";
}

.tool.select-taxlots .icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toolbar .tool.select-taxlots .icon:before {
	/* This is the "pointer" */
	content: "\f245";
}

.tool.select-surveys .icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toolbar .tool.select-surveys .icon:before {
	/* This is the "pointer" */
	content: "\f245";
}

.tool.select-sections .icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.toolbar .tool.select-sections .icon:before {
	/* This is the "pointer" */
	content: "\f245";
}

/* Finished adding all custom tools */

/* Slightly reduces margin between tools in toolbar */
.toolbar .tool {
  margin-right: 0px;
}

/* change the outline of the active tool in the toolbar  to be more easily seen in a bluish gray background */
.toolbar .tool.active {
  box-shadow: 0 0 1px 1px #000000;
}

/* Reduce font weight for tab titles as they are now buttons which have a higher weight   */
.tab {
  font-weight: 400;
}

/* Add custom css for the return_to_service in search and select tab results   */
.return_to_service {
  border: 1px solid black;
  margin-bottom: 0.25rem;
  padding: 4px;
  font-weight: 400;
  font-size: 15px;
}

/* Sets custom return_to_service to be red when hovering  */
.return_to_service:hover {
  color: #BB1000;
  border: 1px solid #BB1000;
}

/* change the outline of the sketch tools in the catalog while hovering to black from gray */
.layer .layer-tools .icon:hover {
  box-shadow: 0 0 1px 1px #000000;
}

/* decreases size of all group labels in catalog; default is greater than 15 - switched to more closely match spatialdata */
.group .group-label {
  font-size: 13px;
  line-height: 1.4;
}

/* Deviating a bit from the demo - switching to the caret icon and just adjusting things to that it's centered */
.group .group-label input[type="checkbox"]::before {
  display: flex;
  align-items: center;
  content: "\f0da";
  font-size: 20px;
}

/* adjusting transform-origin for 90 degree rotation of caret because I'm rotating a triangle, not a box; could also combine the rotation with an x and y translation - it still jumps a bit before rotating, not sure why but it isn't noticeable at 120ms - happens in demo too */
.group .group-label input[type="checkbox"]:checked {
  transform-origin: 50% 34%;
}  

/* remove top and bottom margin around radio buttons and checkboxes in catalog and other tabs */
input[type="radio"],
input[type="checkbox"] {
  margin-top: 0em;
  margin-bottom: 0em;
}

/* Make the checkboxes slightly more rounded, with a slightly thinner outline */
input[type="checkbox"] {
  border-radius: 25%;
  border: 0.1em solid currentColor;
}

/* returns the catalog checkmark icon to a basic checkbox with a white outline; hidden unless checked, that's placed over the box; before and after pseudo elements are used to insert content without needing html - i.e. insert the checkmark  */
input[type="checkbox"].layer-toggle.icon::before {
  content: "\f00c";
  font: normal normal normal 14px/1 FontAwesome;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: white;
  font-size: 16px;
}

/* overwrites geomoose css, adjusts placement of checked checkmarks to be centered in box; scale is set to 0 in geomoose.css for non-checked checkboxes, fontawesome icon has slightly different placement than geomoose unicode icon, and needs to be adjusted from the default  */
input[type="checkbox"].layer-toggle.icon:checked::before {
  transform: scale(1) translateY(-0.3em) translateX(-0.15em);
}

/* decreases size of all layer labels in catalog  */
.layer .layer-label {
  font-size: 12px;
  line-height: 1.4;
}

.layer .layer-label input[type="radio"] {
  font-size: 14px;
}

/* removes empty classes that still show in catalog legend */
.layer .catalog-legend {
  font-size: 0px;
}

/* declaring sketch tool size so .catalog-legend doesn't decrease sketch tools font size */
.layer .legend-html {
  font-size: 11px;
  line-height: 1.6;
}

/* reduces font size for results tab and grid */
table {
  font-size: 0.7em;
}

/* Removed padding around header for any individual select or search tab result, also removed left padding after adding it to the icons */
.search-result {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

/* Reduces font size of values in results header     */
.service-manager .results-info .results-info-item .value {
  font-size: 1.25em;
}

/* Adjust results header - sets width to 50% so identify items fit page, doesn't cause select or search to overflow */
.service-manager .results-info .results-info-item {
  margin: 1px;
  width: 50%;
}

/* Reduce font weight for clear/buffer/zoom to results headers as they are now buttons which have a higher weight */
.service-manager .results-info .results-info-item .label {
  font-weight: 400;
}

/* created div in mapbook.xml for disclaimer in identify results, manually reduced font size, decreased gap between lines */
.service-manager .disclaimer {
  font-size: 0.9em;
  line-height: 105%;
}

/* overwrite padding around results in grid and tab, add border below cells, adjusts line height */
th,
td {
  padding: 1px 1px;
  border-bottom: 1px solid #E1E1E1;
  line-height: 1.6;
 }

 /* adjusting size of first column in table to specifically set smaller width */
 .gm-grid table th:first-child, .gm-grid table td:first-child {
  width: 50px;
  text-align: center;
}

/* adjusting css for table headers */
.gm-grid table th {
  border: 0px solid #ddd;
  padding: 2px 2px;
  font-size: 0.9375em;
  font-weight: 600;
  width: 100px;
  text-align: center;
}

/* adjusting css for table rows - manually setting width to reduce constant grid resizing */
.gm-grid table td {
  border: 1px solid #ddd;
  padding: 2px 2px;
  width: 100px;
  text-align: center;
}

/* sets size of grid toolbar and placement of items within it; remove padding that was added */
.gm-grid .toolbar {
  height: 20px;
  padding: 0px;
}

/* Reduces size of buffer/zoomTo/delete icons in grid results */
.gm-grid table td .icon {
  font-size: 12px;
}

/*  Overwrite size and padding of save min/max grid icons to make them look more naturally placed, add display flex so they're centered vertically */
.gm-grid .toolbar .icon {
  padding: 0px 7px;
  font-size: 14px;
}

/* specifying catalog padding - removing the catalog search also removed some padding and made things look odd */
.catalog {
  padding-top: 5px;
  padding-left: 5px;
}

/* adjusts settings of all service titles (i.e. select/identify/search) */
.service-manager .service-form .settings-header {
  text-align: center;
  background-color:transparent;
  font-size: 1.5625em;
  font-weight: 300;
  letter-spacing: -.0625rem;
}

 /* adjusts text within any modal that comes from gm-grid - i.e. the filter text that no longer has a specific div class to target - it used to be the same checkbox class as the Select None or All header */
.gm-grid .modal-body {
  font-size: 0.8em;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.02rem;
}

/* Specifically adds a bottom border to Select None header which is a second level child of the modal-body */
.gm-grid .modal-body div > div.checkbox {
  border-bottom: 1px solid #E1E1E1;
}

/* adds a bottom border to the third level div in the grid modal-body which corresponds to the individual filter attributes that no longer have a checkbox class to target; targeting specific level to avoid adding multiple borders due to the nested divs */
.gm-grid .modal-body div > div > div {
  border-bottom: 1px solid #E1E1E1;
}

/* targets checkboxes within grid filter - makes them slightly bolder, padding prevents them from desizing when attributes overrun space   */
.gm-grid .modal-body input[type="checkbox"] {
  font-weight: 800;
  padding: 5px;
  margin-right: 10px;
}

/* same adjustments previously made to catalog checkboxes, making to grid filter checkboxes, targetting specifically to avoid other things coded as checkboxes, like catalog chevrons and favorites - switches styling to fontawesome checkmark */
.gm-grid .modal-body input[type="checkbox"]::before {
  content: "\f00c";
  font: normal normal normal 14px/1 FontAwesome;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: white;
  font-size: 16px;
}

/* sets checked checkboxes to display checkmark, overwrited geomoose.css due to different placesment of fontawesome checkmark */
.gm-grid .modal-body input[type="checkbox"]:checked::before {
  transform: scale(1) translateY(-0.3em) translateX(-0.15em);
}

/* Decrease icon size in grid filter, add margin or it gets cutoff*/
.modal-body .icon {
  font-size: 16px;
  margin-left: 1px;
  border-width: 0;
}

/* Adjusts labels for services (search/identify/select) - Using parameter, search field names   */
.service-manager .service-inputs label {
  font-size: 0.9375rem;
  margin-top: 1px;
  font-weight: bold;
  line-height: 1.6;
}

/* Minor adjustments to helpText in any search (i.e. simple search), sets width to match that of search boxes */
.service-manager .service-inputs div.helper-text {
  font-size: 0.75em;
  margin-top: 5px;
  width: 90%;
}

/* overwriting other large gap around horizontal rule in tab results - adding no margin on top so that highlight changes when crossing line; added small margin on bottom so that you can differentiate between rule and zoom to taxlot */
 hr {
   margin-top: 0rem;
   margin-bottom: 0.25rem;
   border-top: 1px solid #333333E0;
   }


/* Uses same px width as demo, but adjusts the tab toggler slightly so that it's offset to the right 10px from tabs */
@media screen and (min-width: 500px) {
    #tabs {
        min-width: 350px;
    }

    .tab-toggler {
        left: 360px;
    }
}

/* removes the border so that it's less noticeable at high zoom and so that it matches the focus border, preventing the icon from moving when navigating to it */
button.tab-toggler {
  border: none;
}

/* Not 100% happy with the result as the outline isn't 100% centered, and the white background still peeks out a bit at high zoom, but any attempts to center it made the background much worse, and attempts to hide the background at higher zooms made it not cover the entire arrow - though I declare it significantly better than before */
/* removes the border, adds a black solid outline that's offset from the icon itself, with rounded corners */
button.tab-toggler:focus-visible {
  outline-color: black;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 7px;
  border-radius: 5px;
  border: none;
}


/* Adding header div and setting color */
#header {
  background: #C9D8DE;
}

/* reduce padding in footer, add some other settings copied from old skeleton.css */
#footer {
  padding: 1px;
  font-size: 0.9375em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 
}


/* reduce font-size of coordinate display to 85%  */
#coordinate-display {
  font-size: 0.85em;
}

/* reduce size/padding/width of select box in jump-to-extent in footer  */
#jump-to-extent select {
  height: 20px;
  width: 140px;
  padding: 1px 1px;
  font-size: 0.85em;
}

/* Adjusts version logo and number in footer */
#version {
  font-size: 0.85em;
  padding-top: 0px;
}

/* Adjusts disclaimer in footer (not the one in identify results) */
#disclaimer {
  font-size: 0.85em;
  padding-top: 0px;
  font-weight: bold;
  padding-left: 12px;
}

/* adding toolbar within header div; absolutely positioned relative to parent - may no longer be necessary due to changes in underlying css */
#toolbar {
  bottom: 0;
  left: 0;
  font-weight: bold;
}

/* Set css for title in header - referenced in index.html   */
#Title {
  color: black;
  font-weight: bold;
  padding-left: 12px;
  padding-top: 8px;
  padding-bottom: 2px;
  font-size: 22px;
  line-height: 1.2em;
}

/* Set css for links in header - referenced in index.html  */
#Links {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 10px;
  padding-top: 3px;
  color: black;
}

/* create an id for the horizonal rule in the select and search results, set it to no padding so that highlight starts and ends at rule */
#tab-hr {
  padding-top: 0px;
}

/* decreases sketch tools icon size */
.layer .layer-tools .icon {
  font-size: 16px;
}

/* sets color for unvisited links - links from results, links in header, etc... */
a:link {
  color: #3344dd;
}

/* sets color for visited links - links from results, links in header, etc... */
a:visited {
    color: #844384;
}

/* sets color for hovering links - links from results, links in header, etc... */
a:hover {
    color: #BB1000;
}

/* moves service go button further to the right - no longer as impactful due to changes to geomoose css */
.service-manager .tab-controls .go-button {
  float: right;
  padding-right: 20px;
}

/* moves service close button further to the left - no longer as impactful due to changes to geomoose css */
.service-manager .tab-controls .close-button {
  float: left;
  padding-left: 10px;
}




/* Custom additions that were originally in skeleton.css */
/* Adjusts input boxes (search boxes, jumptoextent, buffer drop-downs, buffer measure input, sketch boxes; doesn't impact any input that doesn't have a type, like the print map title, as I couldn't overwrite them without overwriting sketch color picker) - increases height, adds padding, sets rounded edges, changes border, adjust sizing to include the padding and border in the width and height */
/* NOTE - could also append :focus to adjust settings for focus, but we're using the default settings currently */
input[type="text"],
input[type="number"],
input[class="measure"],
select {
  height: 38px;
  padding: 6px 10px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-sizing: border-box;
}

/* adjusts button settings (Cancel/Okay/Close/Clear measure features/return_to_service when not overwritten) */
button {
  background-color: transparent;
  border: 1px solid #a09999;
  font-weight: 600;
  box-sizing: border-box;
}

/* globally set hover color for buttons, overwriting the lighter gray */
button:hover {
  color: #BB1000;
  border-color: #BB1000;
}

/* After switching tab result icons to buttons, remove padding and border that's inherent to buttons - search-result includes selections and searches   */
div.search-result button {
  padding: 0;
  border: none;
}

/* Overwrite default 0.5em right margin, make icons symmetrical     */
div.search-result button .icon {
  margin-right: 0.25em;
  margin-left: 0.25em;
}

/* After switching grid result icons to buttons, remove padding and border that's inherent to buttons  */
.gm-grid table td button {
  padding: 0;
  border: none;
}

/* Overwrite default 0.5em right margin, make icons symmetrical     */
.gm-grid table td button .icon {
  margin-right: 0.25em;
  margin-left: 0.25em;
}

/* Adjust outline for grid - it's focusable so the outline should show when focused; important flag is needed or else table virtuoso settings take precedent */
[data-test-id="virtuoso-scroller"]:focus-visible {
  outline: solid !important;
  outline-width: 2px !important;
}

/* set hover color for icons that weren't caught by button (results header icons; grid header icons) */
.icon:hover {
  color: #BB1000;
}

/* Specifically add favorite icon highlight on hover that was being overwritten by geomoose.css for checkbox favorite input type */
.layer .favorite.icon:hover {
  color: #BB1000;
}

/* add highlight on hover for radio buttons not caught by .icon - units in measure; also change to the pointer cursor so it matches any other clickable element */
input[type="radio"]:hover {
  color: #BB1000;
  cursor: pointer;
}

/* set checkboxes to highlight and have a cursor icon change on hover - this already worked for most checkboxes (due to icon:hover) but wasn't being honored for grid filter checkboxes */
input[type="checkbox"]:hover {
  color: #BB1000;
  cursor: pointer;
}

/* Overwrite height and width of fill of radio buttons - reduced slightly from demo (which looked slightly asymmetrical - can still look odd at times due to browser rendering) */
input[type="radio"]::before {
  width: 0.45em;
  height: 0.45em;
}

/* Set tab toggler that close/opens the tab to highlight on hover */
.tab-toggler-icon:hover {
  color: #BB1000;
}

/* Cancel/Close buttons not impacted by button:hover, specifically adjusting color on hover for the second modal-footer (any modal with two buttons) for the first child (which is the Close/Cancel buttons)  */
.modal-footer.two .button-parent:nth-child(1) button:hover {
  color:#BB1000;
  text-decoration: underline;
  border-color: #BB1000;
}

/* Lighten background color of green modal to improve hover contrast */
.modal-footer .button-parent button {
  background-color: #C0E0BE;
}

/* Underline Close/Cancel/Okay buttons from modals on hover */
.modal-footer .button-parent button:hover {
  text-decoration: underline;
  border-color: #BB1000;
}

/* Lighten background color of green modal to improve hover contrast */
.modal-footer.two .button-parent:nth-child(2) button {
  background-color: #C0E0BE;
}

/* Underline Close/Cancel/Okay buttons from modals on hover */
.modal-footer.two .button-parent:nth-child(2) button:hover {
  text-decoration: underline;
}

/* Adjust background of clear measure features button */
.service-manager .measure-tool .clear-parent button {
  background-color: #C0E0BE;
}


/* Adjust print and sketch labels - places them on new line, sets them to bold, adds more of a margin  */
label {
  display: block;
  margin-bottom: .25rem;
  margin-top: .5rem;
  font-weight: 600;
}

/* Code for custom spinning Loading indicator */

/* Adding a container so that I can overlay two loaders on top of each other so that they're spinning on the same track rather than one inside the other - this removes the wobble from the spinner */
.loader_container {
  display: grid;
}

#loader_blue, #loader_green {
  grid-column: 1;
  grid-row: 1;
}

 #loader_blue {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  margin-bottom: 10px;
  margin:auto;
  margin-top: 20px;
}

#loader_green {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border-bottom: 4px solid #8BAB7E;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  margin-bottom: 10px;
  margin:auto;
  margin-top: 20px;
}

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

#loading-message {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}

#loader-text {
  font-family: sans-serif;
  text-align: center;
  padding-top: 20px;
  font-weight: bold;
 }