:root {
    /* Light Blue */
    --light-blue-primary: #00A3E0;
    --light-blue-shade-1: #33B5E5; /* Assuming gradient shades from the image */
    --light-blue-shade-2: #66C7EA;
    --light-blue-shade-3: #99D9EF;
    --light-blue-shade-4: #CCEBFF;
  
    /* Matte Silver */
    --matte-silver-primary: #56595F;
    --matte-silver-shade-1: #6E7379; /* Assuming gradient shades from the image */
    --matte-silver-shade-2: #868D93;
    --matte-silver-shade-3: #9EA7AD;
    --matte-silver-shade-4: #B6C1C7;
  
    /* Text Gray */
    --text-gray-primary: #212529;
    --text-gray-shade-1: #3A3D42; /* Assuming gradient shades from the image */
    --text-gray-shade-2: #53565B;
    --text-gray-shade-3: #6C6F74;
    --text-gray-shade-4: #85888D;
  
    /* Additional Colors */
    --avery-sw900-light-blue: #00A3E0; /* Using same as light blue primary */
    --3m-1080-matte-silver-m21: #56595F; /* Using same as matte silver primary */
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--light-blue-primary);
  }

  h3 {
    font-size: 1.35rem;
    color: var(--text-gray-primary);
    font-weight: 400;
    letter-spacing: 2px;
    width: 100%;
}

    p, a, li, span {
        font-family: 'OpenSans', sans-serif;
        font-weight: 400;
        color: var(--text-gray-shade-1);
    }

    .address-input-form input {
    margin: 10px;
    border: 1px solid var(--matte-silver-shade-2);
    padding: 5px 10px;
    border-radius: 5px;
}

.view-toggle button {
  /* Styling for the toggle buttons */
  padding: 13px;
  background-color: var(--matte-silver-shade-2);
  color: white;
  border: none;
  cursor: pointer;
  margin: 0;
}

.view-toggle button.active {
  background: linear-gradient(to top, #005374, #00a0e0);
}

.view-toggle {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: fit-content;
  z-index: 1;
}

button#showListViewBtn {
  border-radius: 10px 0px 0px 10px;
}

button#showMapViewBtn {
  border-radius: 0px 10px 10px 0px;
}
.view-toggle button:focus {
  outline: none;
}

h3.contact-name {
  font-size: 20px;
}

.location-card-header h3 {
  font-size: 20px;
}

@media (min-width: 1200px) {

  .view-toggle{
    display: none;
  }
}