.exam {
  #up {
    bottom: 90px;
    right: 30px;
  }
  
  // SurveyMonkey container
  .smcx-widget {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;

    .smcx-iframe-container {
      width: 100%;
      max-width: 100%;
    }
  }

  .intro-block {

  }

  .exam-pagination {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .exam-content {
    margin-top: 128px;
    margin-bottom: 128px;

    .question-title {
      margin-top: 80px;
      margin-bottom: 40px;
    }

    .question-text {
      color: $text_primary;
      margin-bottom: 10px;
    }
  }

  .fixed-footer {
    padding: 0 1rem;

    .footer-text {
      font-size: 0.8rem;
    }

    .row {
      height: 100%;
      display: flex;
      align-items: center;

      button.outlined {
        white-space: nowrap;
      }
    }

    button.exam-finished {
      background-color: white;
    }

    span.exam-finished {
      button.disabled {
        background-color: #b3b2b2 !important;
      }
    }

    button.disabled {
      border: 2px #b3b2b2 solid;
    }

    i.exam-finished {
      color: $zim_green
    }
  }

  button {
    &.exam-next {
      .preloader-wrapper {
        position: absolute;
        width: 20px;
        height: 20px;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
      }
    }
  }
}

.exam-result {
  .exam-medal {
    position: absolute;
    top: 0;
    right: 96px;

    img {
      width: auto;
      max-height: 400px;
    }

    svg {
      fill: $text_inverse;

      path,
      polygon {
        fill: $text_inverse;
      }
    }

    @media only screen and (max-width: 1250px) {
      right: 0px;

      img {
        max-height: 210px;
      }
    }

    @media only screen and (max-width: 450px) {
      img {
        display: none;
      }
    }
  }

  .exam-container {
    height: 100%;
    margin-top: -$nav_height;

    display: flex;
    flex-flow: column;

    .exam-content {
      flex: 1 1 auto;
    }

    .exam-footer {
      flex: 0 1 128px;

      .row {
        height: 100%;
        margin: 0 10%;

        button.outlined {
          color: $zim_green;
          border: 2px $zim_green solid;
        }
      }
    }
  }

  h1 {
    color: $text_inverse;
  }

  h3 {
    color: $text_inverse;
  }

  @media only screen and (max-width: 992px) {
    h1 {
      margin-top: 100px;
    }
  }
}