.modal-image-preview-wrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.56);
  z-index: 10002;

  #image-preview-container {
    position: relative;
    left: 40vw;
    width: 60vw;
    height: 100vh;
    background: rgba(255,255,255,1);
    // padding: 0 24px 0 24px;
    overflow-y: auto;
    // font-family: 'proxima-nova';

    .image-preview-header {
      display: inline-flex;
      width: 100%;
      padding: 16px 24px;
      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
      margin-bottom: 6px;
      height: 56px;
      align-items: center;
      .heading-title {
        font-size: 20px;
        line-height: 24px;
        font-weight: 600;
        width: 97%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        &:first-letter{
          text-transform: capitalize;
        }
      }
      .close-image-preview{
        cursor: pointer;
      }
    }

    #image-preview-content {
      padding: 0 0px 0 24px;
    }
  }
}

.show-image-preview {
  visibility: visible;
  opacity: 1;
  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
}
.hide-image-preview {
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s;
}
