main {
  display: flex;
  justify-content: center;
  width: min(calc(100% - 336px), calc(100% - 24vw - 56px));
  margin: 68px 0 100px max(336px, calc(24vw + 56px));
}

.search-section {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(calc(100% - 360px), calc(100% - 24vw - 80px));
  height: 80px;
  display: flex;
  background-color: var(--background);
  align-items: center;
  justify-content: space-between;
  padding: 0px 12px;
  box-shadow: 0px 0px 6px var(--shadow);
  z-index: 5;
}

.search-container {
  background-color: var(--highlight);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--shadow);
  z-index: 10;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: pointer;
}

.search-container img {
  height: 40px;
}

.search-bar {
  height: 48px;
  width: 100%;
  background-color: var(--button);
  padding: 0px 16px 0px 60px;
  border-radius: 40px 28px 28px 40px;
  border: solid var(--border-grey);
  outline: none;
}

.search-bar::placeholder {
  color: var(--support-text);
}

.search-bar:focus {
  box-shadow: 0 0 4px var(--light-shadow);
}

.trail-section {
  margin: 16px 16px 28px 16px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 0 6px var(--shadow);
  border-radius: 20px;
}

.trail-image-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  box-shadow: 0 0 6px var(--shadow);
  position: relative;
  border-radius: 20px;
}

.trail-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20%;
}

.trail-image-container::after {
  box-shadow: inset 10px 1px 20px var(--shadow);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.trail-text {
  margin-left: 10px;
  padding: 20px;
}

.upper-trail {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upper-trail-text {
  display: flex;
  align-items: baseline;
  margin: 10px 0px 16px 0px;
  font-weight: 600;
  flex-wrap: wrap;
}

.trail-section h2 {
  font-size: 24px;
  margin: 0 10px 0 0;
}

.trail-location {
  margin: 0;
  color: var(--support-text);
}

.trail-menu-group {
  position: relative;
}

.filter-menu-group {
  position: absolute;
  bottom: 2px;
  right: 16px;
}

.trail-menu, .filter-menu {
  position: absolute;
  top: 40px;
  right: 14px;
  padding: 0px;
  background-color: var(--support-text);
  border-radius: 6px;
  display: none;
  z-index: 2;
}

.filter-menu {
  position: fixed;
  display: flex;
  bottom: auto;
  top: 56px;
  left: 0px;
  height: calc(100vh - 190px);
  height: calc(100dvh - 190px);
  overflow-y: scroll;
  z-index: 10;
  background-color: var(--background);
  width: 24vw;
  min-width: 280px;
  padding: 20px 32px 180px 24px;
  flex-direction: column;
  box-shadow: 0 0 6px var(--shadow);
}

.filter-menu input, .filter-menu input:focus {
  accent-color: var(--highlight);
}

.filter-menu h2 {
  margin: 0;
  font-size: 22px;
}

.filter-menu h3, .filter-menu > label {
  font-size: 18px;
  margin: 24px 0 8px 0;
  font-weight: 600;
}

.filter-menu select {
  border: 1px solid var(--unselected-toggle);
  border-radius: 4px;
  padding: 4px;
}

.filter-menu .checkbox-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 4px;
}

.filter-slider {
  margin-bottom: 12px;
}

.filter-menu .range-text {
  text-align: end;
}

.noUi-target {
  height: 12px;
  border: none;
  background-color: var(--unselected-toggle);
  border-radius: 20px;
}

.noUi-connect {
  background-color: var(--highlight);
}

.noUi-handle::before, .noUi-handle::after {
  display: none;
}

.noUi-handle {
  border-radius: 50%;
  width: 24px !important;
  height: 24px !important;
  top: -4px;
}

.slider-row {
  display: block;
}

.submit-section {
  position: fixed;
  bottom: 0px;
  height: 40px;
  left: 0px;
  z-index: 12;
  background-color: var(--background);
  width: calc(24vw + 16px);
  min-width: 296px;
  padding: 12px 20px 28px 20px;
  display: flex;
  justify-content: space-between;
}

.default-submit, .update-submit {
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.default-submit {
  color: var(--link);
  background-color: var(--background);
}

.update-submit {
  border-radius: 8px;
  background-color: var(--highlight);
  color: var(--white-text);
}

.trail-menu p {
  padding: 8px 10px;
  margin: 0px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.trail-menu p:hover {
  background-color: var(--goal-group-mobile);
}

.trail-menu-group > img, .filter-menu-group > img {
  height: 28px;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  transition: box-shadow 0.3s;
}

.filter-menu-group > img {
  height: 36px !important;
  z-index: 11;
  position: relative;
  margin: 12px 0;
  filter: invert(var(--image));
  display: none;
}

img.create-trail {
  position: fixed;
  top: 10px;
  right: 68px;
  z-index: 1001;
  height: 32px;
  display: flex;
  cursor: pointer;
  filter: invert(var(--image));
  transition: box-shadow 0.3s, opacity 0.3s;
  border-radius: 50%;
  padding: 4px;
}

img.create-trail:hover {
  box-shadow: 0 0 6px var(--light-shadow);
}

.active .create-trail {
  opacity: 0;
}

img.create-guest {
  right: 198px;
}

.trail-menu p:nth-child(3) {
  color: var(--danger);
}

.trail-menu-group > img:hover, .filter-menu-group > img:hover {
  box-shadow: 0px 0px 3px var(--shadow);
}

.trail-menu img, .filter-menu img {
  height: 24px;
  margin-right: 12px;
}

.trail-menu-group:hover .trail-menu {
  display: block;
}

.trail-info {
  display: flex;
  width: auto;
  align-items: center;
  color: var(--login-support-text);
}

.trail-info p {
  display: flex;
  align-items: center;
  margin: 0 24px 0 0;
  font-size: 15px;
}

.trail-info p:last-child {
  margin: 0;
}

.trail-info img {
  height: 18px;
}

img.no-trails {
  height: 100px;
}

h2.no-trails {
  text-align: center;
  margin: 0 40px;
}

section.no-trails {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 40px;
}

@media (max-width: 1000px) {
  main {
    margin-left: 0;
    width: 100%;
  }

  .filter-menu {
    display: none;
  }

  .submit-section {
    display: none;
  }

  .filter-menu-group:hover .filter-menu, .filter-menu-group:hover .submit-section, .filter-menu-shown, .submit-section-shown {
    display: flex;
  }

  .filter-menu, .submit-section {
    position: absolute;
    bottom: 68px;
    top: auto;
    right: -4px;
    left: auto;
  }

  .filter-menu {
    height: 380px;
    padding: 20px 32px 80px 24px;
  }

  .submit-section {
    height: 40px;
    width: 296px;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 0 6px var(--shadow);
  }

  .search-section {
    width: calc(100% - 24px);
    margin-left: 0;
  }

  .filter-menu-group > img {
    display: inline;
  }
}

@media (max-width: 720px) {
  header {
    justify-content: flex-start;
  }

  .middle {
    display: none;
  }

  .menu {
    display: block;
  }

  .off-screen-menu {
    display: flex;
  }

  .off-screen-menu {
    font-size: 20px;
    padding-top: 70px;
  }

  .nav-link {
    padding: 8px 12px;
  }

  .profile-menu-group {
    position: fixed;
    right: 18px;
  }

  .menu-element {
    padding: 0px 8px;
  }

  .first-right-menu::after {
    bottom: 60px;
  }

  .left-menu .logo {
    margin-top: -4px;
  }

  .logo {
    display: none;
  }

  .logo-mobile {
    display: block;
    margin-left: 20px;
  }

  body.active .overlay {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 640px) {
  main {
    display: block;
  }

  .search-section {
    height: 72px;
    padding-top: 16px;
    align-items: baseline;
  }

  .filter-menu-group {
    bottom: 14px;
  }

  .search-container {
    height: 40px;
    width: 40px;
  }

  .search-container img {
    height: 32px;
  }

  .search-bar {
    height: 38px;
    border-radius: 20px 14px 14px 20px;
  }

  .trail-section {
    display: block;
    box-shadow: none;
  }

  .trail-text {
    padding: 8px;
  }
}

@media (max-width: 496px) {
  img.create-guest {
    right: 112px;
  }
}

@media (max-width: 480px) {
  .upper-trail-text {
    display: flex;
    white-space: normal;
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .filter-menu, .submit-section {
    position: fixed;
    right: 8px;
    left: 8px;
    bottom: 56px;
    width: auto;
  }

  img.create-guest {
    display: none;
  }
}