.kt_image_preview {
  height: 100%;
  display: flex;

  > div {
    background-image: linear-gradient(
        45deg,
        var(--editorImagePreview-background) 25%,
        transparent 25%,
        transparent 75%,
        var(--editorImagePreview-background) 75%,
        var(--editorImagePreview-background)
      ),
      linear-gradient(
        45deg,
        var(--editorImagePreview-background) 25%,
        transparent 25%,
        transparent 75%,
        var(--editorImagePreview-background) 75%,
        var(--editorImagePreview-background)
      );
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: var(--editor-background);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    flex: 1;
    padding: 20px;
  }

  img {
    display: block;
    margin: 0 auto;
    flex-grow: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

.kt_video_preview {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.kt_video {
  max-width: 100%;
  max-height: 100%;
}

.error-page {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-direction: column;

  font-size: 12px;
  padding: 10px;

  height: 100%;
  width: 100%;

  user-select: none;

  & .icon {
    font-size: 40px !important;
    color: var(--kt-modalWarningIcon-foreground);
  }

  .description {
    width: 100%;
    margin-top: 4px;

    text-align: center;

    font-size: 14px;
  }

  & .action-wrapper {
    display: flex;
    width: 100%;
  }

  & .action-button {
    margin-top: 20px;
    font-size: 13px;
  }
}
