/* Breakpoints */
/* Breakpoints */
/* Breakpoints */
/* Breakpoints */
/* Breakpoints */

/* Special card sizing for extra narrow screens */
@media screen and (max-width: 315px) {
  .my-card {
    width: 265px !important;
    min-width: 265px !important;
  }
  .card-track-inner {
    padding-left: calc(50% - 132px) !important;
  }
}

@media screen and (max-width: 350px) {
  h5 {
    font-size: 1.3rem !important;
  }
}

@media screen and (max-width: 575px) {
  #main-form #detect-location,
  #main-form #clear-filters {
    padding: 6px 5px;
  }

  button.cat-btn.active {
    transform: scale(1.1);
  }
  #scrl2 {
    padding: 16px 5px;
  }
  .filter-display {
    width: 94vw;
    left: calc(50vw - 47vw);
    z-index: 900;
  }
  .dummy-card {
    width: 0px !important;
    min-width: 0px !important;
  }
  /* when directions list is open */
  .directionsToggle.border-bottom .directionsCaret {
    width: 20px;
  }
  .map-track #directions-panel.directionsShow {
    width: 170px;
  }
}

@media screen and (max-width: 991px) {
  h5 {
    font-size: 1.5rem;
  }
  .cat-btn {
    padding: 8px 5px !important;
  }
  #scrl4::-webkit-scrollbar:horizontal {
    -webkit-appearance: none;
    height: 0px;
  }
  #scrl4::-webkit-scrollbar-thumb {
    -webkit-appearance: none;
  }
  #scrl4::-webkit-scrollbar-thumb:hover {
    -webkit-appearance: none;
  }
  .map-routing div i {
    font-size: 1.5em;
  }
  .map-routing .drive,
  .map-routing .bike,
  .map-routing .walk,
  .map-routing .home,
  .map-routing .reset {
    width: 29px;
    height: 29px;
  }
  .walkHorizontal {
    transform: translate(45px, -46px);
  }
  .bikeHorizontal {
    transform: translate(90px, -90px);
  }
  .homeHorizontal {
    transform: translate(135px, -134px);
  }
  .resetHorizontal {
    transform: translate(180px, -178px);
  }
  .directions-col {
    top: 45px;
  }
  .map-track #directions-panel.directionsShow {
    height: 200px;
    font-size: small;
  }
  .map-track #directions-panel.directionsShow .directionsToggle {
    font-size: x-small;
  }
  #directions-text ol {
    padding-inline-start: 20px;
  }
  .clipboardHorizontal {
    transform: translate(50px, -45px);
  }
  /* map fullscreen btn */
  .mapboxgl-ctrl-group button {
    width: 29px !important;
    height: 29px !important;
  }
  .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
    transform: scale(1);
  }

  .map-toggle {
    top: -36px;
    height: 29px;
    width: 29px;
    font-size: 10px;
  }

  .toggle-on-map {
    top: 100px;
    right: 10px;
  }

  .toggleCards {
    top: 55px;
    height: 29px;
    width: 29px;
    font-size: 12px;
  }
}

@media screen and (min-width: 576px) and (max-width: 991px) {
  #main-form #detect-location,
  #main-form #clear-filters {
    padding: 6px 8px;
  }
  .cat-btn {
    font-size: 0.8rem !important;
  }
  .filter-display {
    width: 50vw;
    left: calc(50vw - 25vw);
  }
  /* moving filter display for screen too small to put in navbar*/
  .filter-display {
    position: fixed;
  }
  /* no padding needed for filter display. cards can grow.*/
  .padtop-card-filter-d {
    padding-top: 0px !important;
  }
  .map-track #directions-panel.directionsShow {
    width: 225px;
  }
}

/* landscape on phones */
@media screen and (orientation: landscape) and (max-width: 991px) and (max-height: 576px) {
  body {
    padding-top: 0px !important;
  }
  .navbar {
    display: none;
  }
  .display-1-k {
    font-size: 14vh;
  }
  .display-2-k {
    font-size: 5vh;
  }
  .hero-animation,
  .main-form-div,
  .card-map-zone,
  #scrl2,
  #scrl3 {
    height: 100vh;
  }
  #main-interface {
    height: 100vh;
  }
  .card-map-zone {
    grid-template-rows: auto 50vh;
  }
  .sidebar-toggle-btn {
    font-size: 7vh;
    top: 35vh;
  }
  .pulse-outline-mobile {
    animation: greenGlowPulseulse 0.6s ease-in 5;
  }
  .filter-display {
    display: none !important;
  }
  .padtop-card-filter-d {
    padding-top: 0px !important;
  }
  .card-track {
    padding-top: 5px;
  }
  .card-track-inner {
    padding-left: calc(50% - 125px) !important;
  }
  .my-card {
    width: 250px;
    min-width: 250px;
  }
}

/* portrait on phones */
@media screen and (orientation: portrait) and (max-width: 576px) and (max-height: 991px) {
  header {
    background-color: var(--light);
    opacity: 0.95;
    border-radius: 10px;
    padding: 10px 2px;
    border: black 1px solid;
  }
  .sidebar-toggle-btn {
    left: -5px;
    top: 26vh;
  }
  .my-card {
    width: 320px;
    min-width: 320px;
  }
  .card-track-inner {
    padding-left: calc(50% - 160px);
  }
  .sidebar-toggle-btn {
    font-size: 3.5vh;
  }
  .pulse-outline-mobile {
    animation: greenGlowPulseulse 0.6s ease-in 5;
  }
  .filter-display {
    display: none !important;
  }
  .padtop-card-filter-d {
    padding-top: 0px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .filter-display {
    height: 25px;
    width: 40vw;
    left: calc(50vw - 20vw);
  }
}

@media screen and (min-width: 1200px) {
  .mr-card {
    margin-right: 60px;
  }
  .filter-display {
    width: 34vw;
    left: calc(50vw - 17vw);
  }
  .hero-lead {
    max-width: 140%;
  }
  .my-card {
    width: 50%;
  }
  .card-track-inner {
    padding-left: calc(50% - 16.6%);
  }
}

@media screen and (min-width: 1450px) {
  .control-panel {
    max-width: 32vw;
  }
  .filter-display {
    position: fixed;
    width: 24vw;
    left: calc(50vw - 12vw);
  }
  .padtop-card-filter-d {
    padding-top: 0px !important;
  }
  .hero-lead {
    max-width: 90%;
  }
  .form-check,
  .switch-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media screen and (min-width: 1725px) {
  #main-form h5 {
    font-size: 24px;
  }
  .control-panel {
    max-width: 27vw;
  }
  .hero-lead {
    max-width: 100%;
  }
  .sidebar-toggle-btn {
    font-size: 3.5vh;
  }
}

@media screen and (min-width: 1800px) {
  .cat-btn {
    font-size: large;
  }
  label {
    font-size: large;
  }
  #main-form h5 {
    font-size: 1.9rem;
    margin-block-end: 0.5rem;
    margin-block-start: 1rem;
  }
  .control-panel {
    max-width: 25vw;
  }
}

@media (hover: hover) and (pointer: fine) {
  #detect-location:hover,
  #clear-filters:hover {
    color: rgb(98, 98, 255);
  }
  form label:not(.no-hover):hover {
    color: white;
  }
  .form-check:hover,
  .switch-wrapper:not(.no-hover-bg):hover {
    background: #422424;
  }
  .first-letter:hover {
    background-color: var(--primary) !important;
  }
  .cat-btn:hover {
    background-color: var(--primary) !important;
    transform: scale(1.3);
    font-weight: 900 !important;
  }
  .sidebar-toggle-btn:hover,
  .mapboxgl-popup-content .detailsBtn:hover,
  .hover-green:hover {
    color: var(--my-green) !important;
  }
  .my-card button:hover,
  #mission-choices a:hover {
    background-color: var(--my-green) !important;
  }
  .my-card button.mission-btn:hover,
  #mission-choices a:hover {
    color: var(--my-info) !important;
  }
  .my-card li a:hover {
    color: white;
  }
  .map-routing .drive:hover,
  .map-routing .walk:hover,
  .map-routing .bike:hover,
  .map-routing .home:hover,
  .map-routing .reset:hover,
  .hover-orange:hover {
    color: var(--warning);
    transition: 0.4s;
  }
  .map-toggle:hover,
  .toggleCards:hover,
  button.mapboxgl-ctrl-fullscreen:hover {
    background-color: var(--warning) !important;
    transition: 0.4s;
    transform: scale(1.1);
    border-radius: 5px;
  }
  .hoverOpaque:hover {
    background-color: black;
  }
  .hoverBgWhite:hover {
    background-color: whitesmoke;
  }
  .hoverBgLight:hover {
    background-color: var(--light);
  }
}