/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
.visually-hidden {
    position: absolute !important;
    margin: 0 0 0 -9999px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    line-height: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

/* Log Pile Circle Animation */
.effort__graph {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto .5rem;
  border-radius: 50%;
  flex-direction: column;
}

.effort__graph svg {
 display:block;
 position:absolute;
 z-index:5;
 top:0;
 left:0;
 width:100%;
 height:100%;
 transform:rotate(270deg)
}
.effort__graph svg .effort-graph-path {
 -webkit-animation-delay:3s;
 animation-delay:3s;
 -webkit-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-timing-function:ease-out;
 animation-timing-function:ease-out;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards
}
svg .effort-graph-path {
  stroke-dasharray: 629;
   stroke-dashoffset: 629;
}
@-webkit-keyframes dash {
 to {
  stroke-dashoffset: 0
 }
}
@keyframes dash {
 to {
  stroke-dashoffset: 0
 }
}

/* Log Pile Map CSS */
.log-map {
    position: relative;
    margin-top: 90px;
}

.log-map-svg {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -90px;
    z-index: 1;
}

.map-details {
    position: absolute;
    top: 2em;
    right: 40px;
    background: white;
    max-height: 720px;
    margin: auto 0;
    width: 318px;
}

.map-details h3 {
    background-color: #B7C200;
    padding: 10px 10px;
    color: white;
    margin: 0;
    font-size: 2em;
    font-weight: 600;
}

.map-details .map-details__search {
    padding: 5px 10px;
}

.map-details .map-details__habitats,.map-details .map-details__sightings {
    margin: 5px 10px;
    padding: 5px 10px 20px;
}

.map-details h4 {
    font-size: 1.3em;
    position: relative;
    margin-bottom: 15px;
    margin-top: 0;
    color: black;
    font-weight: 600;
}

.map-details h4:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #B3B3B3;
}

.map-details__search input.search-region {
    border-radius: 100px;
    background-color: #F3F3F3;
    border-color: #C9C9C9;
}

.map-details__habitats {
    background-color: #F3F3F3;
    border-top: 5px solid white;
}

.map-details__habitats .habitat-row {
    display: flex;
    text-align: center;
}

.map-details__habitats .habitat {
    text-align: center;
    width: 33.333%;
}

.map-details__habitats .habitat__inner {
    border-radius: 100%;
    height: 74px;
    width: 74px;
    margin: 0 auto;
}

.map-details__habitats .habitat-pyramid .habitat__inner {
    border: 7px solid #B7C200;
}
.map-details__habitats .habitat-logs .habitat__inner {
    border: 7px solid #C68861;
}
.map-details__habitats .habitat-stumps .habitat__inner {
    border: 7px solid #5C4434;
}

.map-details__habitats .habitat-pyramid .effort__graph span {
    color: #B7C200;
}
.map-details__habitats .habitat-logs .effort__graph span {
    color: #C68861;
}
.map-details__habitats .habitat-stumps .effort__graph span {
    color: #5C4434;
}

.map-details__habitats .habitat .habitat__description {
  display: inline-block;
  line-height: 16px;
}

.map-details__habitats .effort__graph img {
  margin-top: -6px;
  height: 15px;
  margin-bottom: 4px;
}

.map-details__habitats .effort__graph span {
    display: block;
    font-size: 1.75em;
    line-height: 22px;
}

.map-details__habitats .habitats-mapped {
    text-align: center;
    border-top: 1px solid #B3B3B3;
    border-bottom: 1px solid #B3B3B3;
    margin: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-details__habitats .habitats-mapped .habitats-mapped__amount {
    font-size: 3.375em;
    line-height: 1.4em;
    margin-right: 10px;
}

.map-details__habitats .habitats-mapped .habitats-mapped__description {
    font-size: 1em;
    line-height: 1.1em;
    font-weight: bold;
	text-align: left;
}

.map-details__sightings {
    background-color: #F3F3F3;
    border-top: 5px solid white;
}

.map-details__sightings ul {
    border-bottom: 1px solid #B3B3B3;
    padding: 8px 15px 8px;
}

.map-details__habitats .habitats-filtered {
	display: none;
}

.map-details__habitats .habitats-filtered label,
.map-details__sightings label {
    margin: 0;
    width: 100%;
    padding: 10px 25px 10px 0;
    background-image: url('/wp-content/themes/hello-theme-child-master/assets/img/filter-by.svg');
    background-repeat: no-repeat;
    background-position: center right;
}

.sighting-toggle-wrap {
  display: flex;
  align-content: space-between;
  border-bottom: 1px solid #B3B3B3;
  padding-bottom: 5px;
}

.sighting-toggle-wrap h4 {
  flex-grow: 1;
  margin-bottom: 0;
}

.sighting-toggle-wrap h4 img {
  top: 4px;
  position: relative;
}

.sighting-toggle-wrap h4:after {
  display: none;
}

div.sighting-toggle {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

div.sighting-toggle span {
	font-size: 0.9em;
	color: black;
	font-weight: bold;
}

.toggle-switch {
  --transition-length: 200ms;
  --transition: cubic-bezier(0.76, 0.08, 0.54, 1.4);
  --size-height: 1.5em;
  --size-width: 2em;
  --size-gap: 0.2em;
  --size-focus: var(--size-gap);
  --size-shadow: var(--size-gap);
  appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  width: var(--size-width);
  height: var(--size-height);
  border-radius: calc(var(--size-height) / 2);
  background: rgba(0,0,0,0.2);
}

.toggle-switch.oversize {
  --size-width: 2.2em;
  --size-height: 0.5em;
  --size-gap: -0.2em;
  --size-focus: 0.22em;
  --size-shadow: 0.2em;
  font-size: 1.1em;
}

.toggle-switch:checked {
  background: #D4DA7B;
}

.toggle-switch:hover {
  background: rgba(0,0,0,0.4);
}

.toggle-switch:after {
  content: '';
  position: absolute;
  top: var(--size-gap);
  left: var(--size-gap);
  bottom: var(--size-gap);
  width: calc(var(--size-height) - (var(--size-gap) * 2));
  border-radius: 50%;
  background: #B7C200;
  transition:
    left var(--transition-length) var(--transition),
    background var(--transition-length) var(--transition);
}

.toggle-switch:checked::after {
  left: calc(var(--size-width) - var(--size-height) + var(--size-gap));
  background: #B7C200;
}

@media only screen and (max-width: 1100px) {
  .map-details {
    top: 5em;
  }
}

@media only screen and (max-width: 768px) {
    #map {
      max-height: 60vh;
    }

    .log-map {
        display: flex;
        flex-direction: column
    }

    .map-details {
     position: relative;
     width: 100%;
     right: auto;
     left: auto;
     top: auto;
    }

    .log-map-svg {
      top: -110px;
    }
}

@media only screen and (max-width: 576px) {
  .log-map {
    margin-top: 0;
  }

  .log-map-svg {
    width: 200px;
    top: -50px;
  }
}




/* Due to custom styling, hide the marker number from showing on the map */
.cluster > div {
  display: none;
}




/* lifted from PTES.org */
.white-bordered {
  background:#ffffff;
  border-top:2px dotted #d6d6d6;
  border-bottom:2px dotted #d6d6d6;
}

.stag-count {
  font-size: 20px;
  font-family: 'Duplicate Slab';
  font-weight: 600;
  padding:2% 3% 0 3%;
  display: flex;
  align-items: center;
}

  .stag-count span {
    color:#b7c200;
    font-size:1.75em !important;
    font-weight:normal !important;
    display:inline-block;
    margin-right:10px;
  }