@import '../settings/variables';

.c-survey-popup {
  position: absolute;
  right: $margin-big;
  width: 23.8125rem;
  margin-top: 0.75rem;
  background-color: #ffffff;
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: 0px 0.2666rem 0.9375rem rgba(0, 0, 0, 0.08);
  z-index: $layer-tooltip;

  &--hidden {
    visibility: hidden;
  }

  &__background {
    position: absolute;
    background: url('/assets/images/survey-popup-background.png') no-repeat;
    background-position: center -90px;
    width: 100%;
    height: 298px;
  }

  &__headline {
    font-family: $font-maersk-headline;
    font-weight: $font-weight-normal;
    font-size: 1.25em;
    line-height: 1.2em;
    color: #00233d;
  }

  &__paragraph {
    font-family: $font-maersk-text;
    font-weight: $font-weight-normal;
    font-size: 0.875em;
    line-height: 1.5714em;
    color: #00233d;
  }

  &__caption {
    font-family: $font-maersk-text;
    font-weight: $font-weight-normal;
    font-size: 0.75em;
    line-height: 1.4em;
    color: #6c7f8d;
  }

  &__separator {
    border: 0;
    border-top: 1px solid #e3e8ec;
  }

  &__content {
    padding: 0 2em 1.5625em 2em;
  }
}