@import 'footer';
@import 'header';
@import 'sidebar';
@import 'tabs';
div.logo {
  color: transparent;
}

es-app, es-portal {
  display: block;
  width: 100%;
  height: 100vh;
}

#container {
  height: calc(100% - 65px);
  .columns {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

#container main {
  margin-top: 0;
}

#container es-portal-header {
  position: relative;
}

.container {
  width: 100%;
}

main {
  @include tablet {
    padding: 0 $column-gap;
  }
}

main.columns {
  @include desktop {
    margin-top: 0;
  }
  display: block;
  background: $base;
  min-height: calc(100% - 65px - 110px);
  margin: 65px 0 0;
  &.columns:not(:last-child) {
    margin-bottom: 0;
  }
}

.media-content {
  overflow: hidden; // FIXME: Needed for IE11 cross sell images on policy page, need to investigate why
  .multi-offers {
    @media screen and (min-width: 768px) {
      .content {
        min-height: 140px;
      }
    }
  } // Custom amends for icon offer(s)
  .offer-icon {
    border: 1px solid $primary;
    border-radius: 8px;
    min-height: 370px;
    .icon-container {
      background: $primary;
      .image {
        fill: $white;
      }
    }
  }
}

h2.policy-number {
  font-family: $family-primary;
  color: $primary !important;
}

#back-to-top {
  padding: 18px 18px 24px;
  position: fixed;
  opacity: 1;
  bottom: 12px;
  transition: bottom .5s, opacity .5s;
  right: 12px;
  border-radius: 3px;
  z-index: 5;
  &.hide-scroll {
    opacity: 0;
    bottom: -100px;
  }
}

#scroll-container header.card-header {
  width: 100%;
}

.card.documents {
  box-shadow: none;
  border-bottom: 1px solid $grey-lighter;
  margin-bottom: 1rem;
  .card-header {
    background-color: $primary;
    i, p {
      margin-bottom: 0;
      color: $white;
    }
  }
  .card-content {
    @include mobile {
      padding: 1.5rem .75rem;
    }
  }
}

// Icon colors
.icon-car, .icon-buildings, .icon-multicar, .icon-travel {
  fill: $primary;
  color: $white;
}

// Accident Support
.accident-support {
  .has-text-link {
    color: $secondary !important;
  }
  @include mobile {
    background-position: calc(100% + 60px) 20px;
    background-size: auto 126px;
    .columns:first-child .column {
      min-height: 132px;
    }
  }
  background-repeat: no-repeat;
  background-position: calc(100% + 80px);
  background-size: auto 160px;
  min-height: 192px;
}
