.footer {
  border-top: 1px solid $gray-medium;
  height: auto;

  * {
    box-sizing: border-box;
  }

  &-container {
    background-color: $gray-light;
  }

  &-wrapper {
    margin: 0 auto;
    max-width: $screen-xxl;
    min-width: $screen-xs;
  }

  &-list {
    @include font-size($base-font-size);
    color: $black;
  }

  &-list-items {
    @include font-size($base-font-size - 2);
    a {
      color: $black;
      &:hover {
        color: $gray;
      }
    }
  }

  &-feedback {
    display: none;
  }

  &-copyright {
    @include font-size($base-font-size - 4);

    &-text {
      margin-top: 10px;
    }
  }

  &-store-icons {
    margin-top: 1.4rem;
    margin-left: -1rem;
  }

  &-download-app-text {
    display: none;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  &-social-media-wrapper {
    background-color: #192D50 !important;
  }

  &-social-media {
    max-width: 1658px;
    margin: 0 auto;
    background-color: #192D50 !important;
    display: flex;
    flex-direction: row;

    &-section {
      padding-bottom: 0.5rem;
      padding-top: 1.0rem;
    }

    &-text {
      color: #FFF;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    &-icons {
      margin-top: 0.25rem;
      margin-left: -0.1rem;

      > a {
        margin-right: 5px;
      }
    }
  }

  .unclickable-link {
    cursor: default !important;
  }

  .footer-inline-mb {
    display: inline;
  }

  .app-icon {
    float:right;

    svg {
      width: 135px;
      height: 40px;
    }

    &.google svg {
      height: 40px;
      width: 135px;
    }
  }
}

//Mobile Overrides
@media(max-width: $screen-md-max) {
  .footer .app-icon {
    margin-top: 10px;

    svg {
      width: 100px;
      height: 30px;
    }

    &.google svg {
      height: 30px;
      width: 103px;
    }
  }
}

@media(max-width: $screen-xs-max) {
  .footer {
    &-title {
      @include padding(15px 20px 15px 15px);
    }

    &-menu {
      border-bottom: 1px solid $gray-medium;
    }

    &-menu-title {
      @include padding(14px 0 14px 15px);
      cursor:pointer;
    }

    &-list {
      a {
        color: $black;
        &:hover {
          color: $gray;
        }
      }
    }

    &-list-items {
      display: none;
    }

    &-feedback {
      display: block;
      text-align: center;
      @include padding(10px 0);
    }

    &-copyright {
      @include padding(10px 15px 20px 15px);
    }

    .app-icon {
      float: none;
    }

    .footer-app-icons {
      text-align: center;
    }
  }

  .active {
    .dropdown-arrow {
      transform: rotate(-135deg);
    }

    .footer{
      &-menu-title {
        background-color: $gray-medium;
      }

      &-list {
        font-weight: $font-weight-semi-bold;
      }

      &-list-items {  
        display: block;
        @include padding(5px 0 10px 30px);
        background-color: $gray-medium;
        &:last-child {
          @include padding(5px 0 25px 30px);
        }
      }
    }
  }
}

// Tablet, Desktop Overrides
@media(min-width: $screen-sm) {
  .footer {
    &-container {
      @include padding (20px);
    }

    &-social-media-wrapper {
      @include padding (0 0 0 26px);
    }

    &-list {
      font-weight: $font-weight-semi-bold;
    }

    &-list-items {
      @include padding(10px 0 0 0);
    }

    &-copyright {
      @include padding(35px 0 0 0);
    }
  }
}

@media(max-width: $screen-sm) {

  .footer {
    &-store-icons {
      margin-top: 1.4rem;
    }

    &-store-icons {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
      margin-left: 0.5rem !important;
      padding: 0 !important;
    }

    &-download-app-text {
      display: block;
      align-self: flex-start;
      padding-left: 1rem;
      color: #FFF;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    &-social-media {
      flex-direction: column;

      &-section {
        padding-left: 1rem;
        padding-bottom: 0.6rem;
        padding-top: 1rem;
      }
    }
  }
}

// To Adjust Footer at the bottom - older templates
#container  {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#contentWrapper {
  flex: 1 0 auto;
}