base.scss

.push-response-banner {
  font-family: inherit;
  line-height: 1.7em;
  height: auto;
  max-height: calc(100vh / 3);
  box-sizing: border-box; max-height: calc(100vh / 3);
  overflow: hidden;
  position: fixed;
  z-index: 10000;

  .push-response-right-column-container {
    width: 100%;
    position: relative;
  }

  .push-response-content-container {
    display: flex;
  }

  .push-response-image-container {
    max-width: 30%;
    width: 30%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;

    img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: -9999px;
      bottom: -9999px;
      left: -9999px;
      right: -9999px;
      margin: auto;
    }
  }

  .push-response-message-container {
    box-sizing: border-box;
    overflow-y: auto;
    word-wrap: break-word;
    width: 100%;
  }

  .push-response-buttons-container {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    width: 100%;

    .push-response-button {
      background-color: #EEEEEE;
      border: 0 rgba(0,0,0,0);
      cursor: pointer;
      display: inline-block;
      line-height: 200%;
      padding: 0 1em;
      height: 100%;
    }
    .push-response-button:hover {
      background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
    }
    .push-response-button-ok {
      margin-right: 0.5em;
    }
    .push-response-button-cancel {
      margin-left: 0.5em;
    }
  }
}

.push-response-banner-preview {
  position: relative;
}


@media (min-width: 768px) {
  .push-response-banner {
    width: calc(100vw / 3);
  }
}
@media (max-width: 768px) {
  .push-response-banner {
    width: 100%; left: 0 !important;
  }
}