@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body, #app-container {
  overflow: hidden;
  position: fixed;
  width: 100vw;
  margin: 0;
  top: 0;
  bottom: 0; }
.country .CustomLegend__layer-title {
  margin: 0;
  padding: 0.25rem;
  font-weight: normal;
  color: #545454;
  font-size: 16px;
  text-align: center; }
  .country .CustomLegend__layer-title #CustomLegendSubTitle {
    color: #aeaeae;
    font-size: 14px; }

.country #CustomLegend__list {
  margin: 0.5rem 25px 0.25rem 25px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25); }

.country .CustomLegend__item {
  height: 25px;
  width: 50px;
  padding: 0.25rem;
  color: #fff;
  border: 1px solid; }
#app-container .country .esri-popup__header {
  position: absolute;
  right: 0; }

#app-container .country .esri-popup__actions {
  display: none; }

#app-container .country .esri-popup--aligned-bottom-right .esri-popup__content,
#app-container .country .esri-popup--aligned-bottom-center .esri-popup__content,
#app-container .country .esri-popup--aligned-bottom-left .esri-popup__content {
  margin-bottom: 0; }

#app-container .country .esri-popup__main-container-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 12px 15px; }
  #app-container .country .esri-popup__main-container-title:before {
    background: #ff6f19;
    border-radius: 50%;
    content: '';
    display: block;
    min-width: 15px;
    min-height: 15px;
    max-width: 15px;
    max-height: 15px;
    margin-right: .5rem; }

#app-container .habitats .esri-popup__actions,
#app-container .habitats .esri-popup__feature-menu-button {
  display: none; }

#app-container .habitats .esri-popup__pointer-direction {
  background-color: #323232; }

#app-container .habitats .esri-feature__content-element {
  border-top: 1px solid #444; }

#app-container .habitats .esri-popup__header [aria-label="Close"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 26px;
  height: 26px;
  margin: 7px 0 0 0;
  border-radius: 50%; }
  #app-container .habitats .esri-popup__header [aria-label="Close"] .esri-icon-close {
    color: #000; }

#app-container .habitats .esri-popup__header-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 12px 15px; }
  #app-container .habitats .esri-popup__header-title:before {
    border-radius: 50%;
    content: '';
    display: block;
    min-width: 15px;
    min-height: 15px;
    max-width: 15px;
    max-height: 15px;
    margin-right: .5rem; }

#app-container .habitats .habitats-title__icon {
  content: '';
  display: block;
  min-width: 15px;
  min-height: 15px;
  max-width: 15px;
  max-height: 15px;
  margin-right: .5rem; }
  #app-container .habitats .habitats-title__icon.point {
    border-radius: 50%; }

#app-container .habitats .esri-popup .esri-popup__main-container {
  background-color: #323232; }

#app-container .habitats .esri-popup .esri-popup__main-container,
#app-container .habitats .esri-popup .esri-widget__table {
  color: #fff; }

#app-container .habitats .esri-popup .esri-widget__table tr th {
  font-size: 14px;
  font-weight: bold; }

#app-container .habitats .esri-popup .esri-widget__table tr td {
  font-size: 14px;
  padding: 0.35em 0.7em; }

#app-container .habitats .esri-popup__feature-buttons {
  font-size: 14px;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  margin: 0;
  color: #000000; }
  #app-container .habitats .esri-popup__feature-buttons .esri-popup__icon {
    color: #000000; }

#app-container .esri-popup__button--dock {
  display: none; }

#app-container .esri-popup__button {
  padding: 12px 3px; }

#app-container .esri-popup__main-container {
  max-width: 320px; }

#app-container .esri-popup__content {
  margin-left: 0;
  margin-right: 0;
  width: 100%; }

#app-container #EsriPopup {
  font-family: 'Open Sans', sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-left: 5px solid;
  color: #919191; }

#app-container .EsriPopup__mainTitle {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 0; }

#app-container .EsriPopup__subTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  color: #aeaeae; }
  #app-container .EsriPopup__subTitle .horizontal-line {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-right: 0.5rem; }
    #app-container .EsriPopup__subTitle .horizontal-line hr {
      margin: 0; }

#app-container .EsriPopup__year-loaction {
  padding-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

#app-container .EsriPopup__year,
#app-container .EsriPopup__country {
  font-size: 16px;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

#app-container .EsriPopup__year {
  padding-right: 1rem; }

#app-container .EsriPopup__year-value {
  white-space: nowrap; }

#app-container .EsriPopup__value {
  font-size: 1.5rem;
  margin: 0; }

.protected_area_near_urban_growth [aria-label="Close"],
.protected_area_near_urban_growth .esri-popup__feature-buttons,
.protected_area_near_urban_growth .esri-popup__header-title:before,
.select_protected_areas_near_urban_growth [aria-label="Close"],
.select_protected_areas_near_urban_growth .esri-popup__feature-buttons,
.select_protected_areas_near_urban_growth .esri-popup__header-title:before {
  background-color: #77f0bc; }

.urban_threatened_species [aria-label="Close"],
.urban_threatened_species .esri-popup__feature-buttons,
.urban_threatened_species .esri-popup__header-title:before,
.select_urban_threatened_species [aria-label="Close"],
.select_urban_threatened_species .esri-popup__feature-buttons,
.select_urban_threatened_species .esri-popup__header-title:before {
  background-color: #ff6e2c; }

.protected_area_near_urban_areas [aria-label="Close"],
.protected_area_near_urban_areas .esri-popup__feature-buttons,
.protected_area_near_urban_areas .esri-popup__header-title:before,
.select_protected_area_near_urban_areas [aria-label="Close"],
.select_protected_area_near_urban_areas .esri-popup__feature-buttons,
.select_protected_area_near_urban_areas .esri-popup__header-title:before {
  background-color: #d6e048; }

.esri-zoom .esri-widget--button [class^="esri-icon"] {
  font-weight: bold; }

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

.container {
  height: 100%;
  width: 100%; }

.hidden {
  display: none; }

.pointer {
  cursor: pointer; }

.container.country {
  background-color: #dff7ff; }

.container.habitats {
  background-color: #232227; }
  .container.habitats .esri-zoom .esri-widget--button {
    background-color: #323232; }
    .container.habitats .esri-zoom .esri-widget--button [class^="esri-icon"] {
      color: #fff; }
#CustomLegend.habitats .CustomLegend__layer-title {
  margin: 0;
  font-weight: normal;
  color: #545454;
  font-size: 16px;
  text-align: center; }
  #CustomLegend.habitats .CustomLegend__layer-title #CustomLegendSubTitle {
    color: #aeaeae;
    font-size: 14px; }

#CustomLegend.habitats #CustomLegend__list {
  display: grid;
  grid-template-columns: calc(115px + 1rem + 14px) calc(115px + 1rem + 14px) calc(115px + 1rem + 14px);
  grid-gap: 0.5rem;
  padding: 0.5rem 0;
  margin: 0;
  list-style-type: none; }

#CustomLegend.habitats .CustomLegend__item {
  color: #fff;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: .25rem 0; }
  #CustomLegend.habitats .CustomLegend__item svg {
    min-width: 20px;
    margin-right: 10px; }
  #CustomLegend.habitats .CustomLegend__item .icon__container {
    margin-right: 10px; }
    #CustomLegend.habitats .CustomLegend__item .icon__container.square {
      padding: 3px; }
    #CustomLegend.habitats .CustomLegend__item .icon__container .icon.square {
      min-width: 14px;
      height: 14px; }
  #CustomLegend.habitats .CustomLegend__item .label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }

@media screen and (max-width: 550px) {
  #CustomLegend.habitats {
    width: 320px; }
    #CustomLegend.habitats #CustomLegendTitle {
      margin: 0.75rem 0 0.5rem 0; }
    #CustomLegend.habitats #CustomLegend__list {
      grid-template-columns: calc(115px + 1rem + 14px) calc(115px + 1rem + 14px);
      padding: 0.5rem; }
    #CustomLegend.habitats .toggle-arrow {
      top: auto;
      bottom: 1rem; } }

#HabitatsColorRamp__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (max-width: 550px) {
    #HabitatsColorRamp__container {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      padding: 0 0.5rem; } }

.HabitatsColorRamp {
  padding: 0 0 0.5rem 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }
  .HabitatsColorRamp svg {
    margin-right: 10px;
    background-color: #3f3f41; }

.HabitatsColorRamp__labels {
  padding: 0 .25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.HabitatsColorRamp__labels-item {
  color: #fff;
  font-size: 12px;
  line-height: 12px; }

.dj_trident7 #HabitatsColorRamp__container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .dj_trident7 #HabitatsColorRamp__container .HabitatsColorRamp {
    min-height: 70px; }
#CustomLegend {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 1rem;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 65px;
  padding: 0 0.5rem 0 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 1s ease;
  transition: all 1s ease; }
  @media screen and (max-width: 550px) {
    #CustomLegend {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 65vw;
      padding: 0 0.25rem; }
      #CustomLegend .CustomLegend__layer-title {
        padding: 0.5rem 0.5rem 0 0.5rem; } }

@media screen and (max-width: 550px) {
  #CustomLegend .toggle-arrow {
    position: absolute;
    right: .5rem;
    top: calc(50% - (22px / 2)); }
  #CustomLegend #CustomLegend__container {
    padding-top: 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
    #CustomLegend #CustomLegend__container #CustomLegend__list,
    #CustomLegend #CustomLegend__container #CustomLegend__labels {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
    #CustomLegend #CustomLegend__container #CustomLegend__list {
      padding: 0;
      margin: 0.5rem 1rem 1.75rem 1rem; }
    #CustomLegend #CustomLegend__container .CustomLegend__labels-item {
      white-space: nowrap;
      text-align: left;
      height: 25px; } }

#CustomLegend.habitats {
  border-radius: 0;
  background-color: #323232;
  padding: 0 0.5rem 0 1rem;
  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.12), 0 6px 6px 0 rgba(0, 0, 0, 0.24);
          box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.12), 0 6px 6px 0 rgba(0, 0, 0, 0.24); }
  #CustomLegend.habitats #CustomLegendTitle {
    color: #fff;
    padding: 0 1rem 0 0.5rem; }

#CustomLegendToggleButton.habitats {
  color: #fff;
  background-color: #323232; }

.toggle-arrow {
  width: 26px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxNCAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMiAybDEwIDktMTAgOSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+"); }

#CustomLegendToggleButton {
  outline: none;
  position: absolute;
  cursor: pointer;
  top: 2rem;
  right: 15px;
  border: none;
  background: #ffffff;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  font-size: 16px;
  color: #545454;
  width: 100px;
  height: 36px;
  border-radius: 18px; }

#CustomLegend__labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 0.5rem; }

.CustomLegend__labels-item {
  width: 50px;
  text-align: center;
  font-size: 12px;
  color: #545454;
  font-weight: 500; }

#CustomLegendToggleButton,
.mapview-container {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400; }

.mapview-container {
  height: 100%;
  width: 100%; }
  .mapview-container .mapview {
    height: 100%;
    width: 100%; }
    .mapview-container .mapview > div:first-child {
      height: 100%;
      width: 100%; }
    .mapview-container .mapview .esri-legend {
      padding: 12px 0;
      min-width: 180px;
      max-width: 350px; }

#UserEvents {
  background-color: #fff;
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 0.65rem 0.5rem;
  font-size: 12px;
  width: 250px; }
  #UserEvents h3 {
    margin: 0 0 0.5rem 0; }
  #UserEvents table {
    width: 100%; }
    #UserEvents table tr:nth-child(odd) {
      background-color: rgba(76, 76, 76, 0.1); }
    #UserEvents table td {
      padding: 0.25rem; }
    #UserEvents table td:first-child {
      padding-right: 0.75rem;
      width: 90px; }

#WebmapLayersLegend__wraper {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin: auto;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
  @media screen and (max-width: 550px) {
    #WebmapLayersLegend__wraper {
      height: 54px; } }

#WebmapLayersLegend {
  display: inline-block;
  background-color: #fff; }
  @media screen and (max-width: 550px) {
    #WebmapLayersLegend {
      width: 100vw; }
      #WebmapLayersLegend .label {
        display: none; }
      #WebmapLayersLegend .WebmapLayersLegend__list-item {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1; } }
  @media screen and (min-width: 551px) {
    #WebmapLayersLegend .WebmapLayersLegend__list-item {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      max-width: 220px;
      width: 25vw; } }

#WebmapLayersLegend__list {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none; }

.WebmapLayersLegend__list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #545454;
  cursor: pointer;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 2px solid #fbfbfb; }
  .WebmapLayersLegend__list-item .icon {
    width: 100%;
    height: 50px;
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; }
  .WebmapLayersLegend__list-item .label {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    min-height: 55px;
    color: #545454;
    font-size: 16px;
    padding: 0.5rem;
    display: block;
    background: #fbfbfb;
    text-align: center; }