carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/document-preview/document-preview.component.scss

@@ -0,0 +1,1115 @@
+@use "variables" as *;
+@use "bootstrap/scss/bootstrap";
+
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+  background-color: white;
+  font-family:
+    "Montserrat",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+figure,
+pre {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Remove default list styles on ul, ol */
+ul,
+ol {
+  padding-left: 1.5rem;
+  list-style-position: outside;
+}
+
+/* Link styles */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Remove outline for focus on mouse users, but keep it for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.document-image {
+  height: 140px;
+  margin: auto;
+  object-fit: cover;
+  box-shadow: 0 0 4px #00000026;
+  max-width: 140px;
+}
+
+.document-image-container {
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.badge-tag-container {
+  position: absolute;
+  bottom: 0;
+}
+
+.badges {
+  display: flex;
+  gap: 2px; // ? Some designs use 4px gaps
+
+  /* &:first-child {
+    margin-bottom: 2px;
+  } */
+
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.file-type {
+  text-transform: uppercase;
+}
+
+.badge {
+  font-size: 11px;
+  font-weight: 800;
+  color: white;
+  line-height: 14px;
+  padding: 2px 4px;
+  border-radius: 1px;
+  transition: opacity 0.2s ease-in-out;
+  text-align: center;
+  background-color: #91919166; // TODO: Change to proper colors once merged with main
+  transition: background-color 0.2s ease-in-out;
+}
+
+.tag {
+  @extend .badge;
+
+  font-weight: 700;
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 2px !important;
+}
+
+.category-tag {
+  @extend .tag;
+}
+
+.user-tag {
+  @extend .tag;
+  background-color: $color-blue-500-40 !important;
+}
+
+.pdf {
+  background-color: $color-pdf-opacity;
+}
+
+.video {
+  background-color: $color-video-opacity;
+}
+
+.image {
+  background-color: $color-image-opacity;
+}
+
+svg-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.document {
+  height: 178px;
+  width: 148px;
+  padding: 4px;
+  background-color: $color-surface-input-neutral;
+  border-radius: 2px;
+  position: relative;
+  opacity: 1;
+  cursor: pointer;
+
+  &.has-expired {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  &:hover:not(.noTouch) {
+    background-color: $color-surface-input-neutral-hover;
+    .badge {
+      background-color: $color-icon-base-neutral;
+    }
+
+    .user-tag {
+      background-color: $color-blue-300 !important;
+    }
+    .pdf {
+      background-color: $color-pdf;
+    }
+
+    .video {
+      background-color: $color-video;
+    }
+
+    .image {
+      background-color: $color-image;
+    }
+
+    .document-actions {
+      opacity: 1;
+    }
+  }
+}
+
+.document-name {
+  width: 140px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  background-color: #eeeeee;
+  margin-top: 4px;
+
+  .file-name {
+    color: $color-text-base-content;
+    background-color: $color-surface-input-neutral;
+    font-size: 14px;
+    border-radius: 1px;
+    line-height: 18px;
+    padding: 4px 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+
+    transition: background-color 0.3s ease;
+    &:hover {
+      background-color: #ffffff;
+      cursor: text;
+    }
+  }
+}
+
+.noTagOption {
+  .label {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+}
+
+.file-size {
+  font-weight: 600;
+}
+
+.icon {
+  width: 30px;
+  height: 30px;
+  padding: 6px;
+}
+
+.document-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 140px;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.document-actions-container {
+  background-color: $color-black-200-90;
+  border-radius: 1px;
+  display: flex;
+
+  &:last-child {
+    margin-left: auto;
+  }
+}
+
+.document-actions-button {
+  background-color: transparent;
+  border: none;
+  height: 30px;
+  width: 30px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  color: #dadada;
+  outline: none;
+
+  &.tagIcon {
+    background-color: $color-text-base-heading !important;
+    color: #ffffff;
+    border-radius: 1px;
+  }
+
+  &:hover {
+    color: #ffffff;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.delete-modal {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  bottom: 0;
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  opacity: 0;
+  height: 140px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  gap: 20px;
+  justify-content: center;
+
+  .delete-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .delete-header .delete-header-text {
+    text-align: center;
+    padding-top: 18px;
+    padding-left: 12px;
+    padding-right: 12px;
+    font-size: 14px !important;
+    font-weight: 500;
+    line-height: 18px;
+    color: $color-text-base-heading;
+  }
+}
+
+.document.delete-modal-large {
+  .document-image-container {
+    background-color: $color-surface-input-neutral !important;
+  }
+  .document-image {
+    opacity: 0.1;
+  }
+  .badges {
+    opacity: 0;
+  }
+
+  .document-actions-container {
+    opacity: 0;
+  }
+
+  .delete-modal {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    z-index: 10;
+  }
+}
+
+.document.noTouch {
+  pointer-events: none;
+  background-color: $color-surface-input-neutral-hover !important;
+
+  /*  > *:not(.delete-modal) {
+    opacity: 0.5;
+  } */
+  .document-image {
+    opacity: 0.1;
+  }
+  .badges {
+    opacity: 0;
+  }
+
+  .document-actions-container {
+    opacity: 0;
+  }
+
+  .delete-modal {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    z-index: 10;
+  }
+}
+
+.document.buttonsVisibility {
+  .document-actions {
+    opacity: 1;
+  }
+
+  &.drawerMode {
+    .document-actions {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+  }
+}
+
+.modal-buttons {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  gap: 4px;
+}
+.modal-buttons button {
+  border-radius: 2px;
+  font-weight: 500;
+  padding: 4px;
+  width: 100%;
+  vertical-align: middle;
+  color: $color-text-base-inverse;
+  cursor: pointer;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 11px;
+  line-height: 14px;
+}
+
+.delete-button {
+  background-color: $color-text-base-negative;
+  transition: background-color 0.3s ease;
+  &:hover {
+    background-color: $color-surface-input-negative-focus;
+  }
+}
+.cancel-button {
+  background-color: $color-inverse-icon-base-disable;
+  transition: background-color 0.3s ease;
+  &:hover {
+    background-color: $color-inverse-surface-input-neutral;
+  }
+}
+
+//Tag Popover
+.tag-popover {
+  border-radius: 3px;
+  padding: 4px;
+  background-color: $color-black-500 !important;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+  width: 196px;
+
+  .dropdown-list {
+    max-height: 244px !important;
+    overflow-y: auto;
+    user-select: none;
+
+    .tag-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      margin-bottom: 4px;
+      padding-bottom: 2px;
+      cursor: pointer;
+
+      .header {
+        display: flex;
+        padding: 4px 6px 4px 4px;
+        width: 100%;
+        place-items: center;
+        justify-content: space-between;
+        gap: 6px;
+
+        .tag-header-text {
+          color: $color-icon-base-disable;
+          font-size: 11px;
+          font-weight: 700;
+          line-height: 18px;
+        }
+
+        .minus-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 14px;
+          height: 14px;
+          color: $color-text-base-content-subtle;
+        }
+      }
+
+      .divider {
+        width: 100%;
+        height: 1px;
+        background-color: #424242;
+      }
+    }
+
+    .tag-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      .tag-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        padding: 4px;
+        border-radius: 2px;
+        padding: 4px 6px 4px 4px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: $color-inverse-surface-input-neutral;
+        }
+
+        .tag-text {
+          color: $color-text-base-inverse;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 18px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        .checkmark-icon {
+          display: none;
+          align-items: center;
+          justify-content: center;
+          width: 14px;
+          height: 14px;
+          color: $color-inverse-icon-base-positive;
+        }
+      }
+
+      .selectedDesign {
+        .tag-text {
+          width: 156px;
+        }
+        .checkmark-icon {
+          display: flex;
+        }
+        span {
+          font-weight: 700;
+        }
+      }
+    }
+
+    &::-webkit-scrollbar {
+      background-color: $color-text-base-content;
+      border-radius: 0 3px 3px 0;
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #919191;
+      width: 2px;
+      border: 2px solid $color-text-base-content;
+      border-radius: 3px;
+    }
+  }
+}
+
+//Large View
+.large-view {
+  &.document {
+    width: 100%;
+    max-width: 100%;
+    min-width: 302px;
+    aspect-ratio: 1 / 1;
+    height: auto;
+    min-height: 302px;
+    background-color: $color-text-base-inverse;
+    box-shadow: 0 0 4px #00000026;
+    position: relative;
+    border-radius: 3px;
+    padding: 4px;
+    transition:
+      background-color 0.2s ease,
+      opacity 0.2s ease;
+
+    &:hover:not(.noTouch) {
+      background-color: $color-white-50;
+      .document-image-container {
+        background-color: $color-surface-input-neutral;
+      }
+      .document-actions {
+        opacity: 1;
+      }
+      .document-image-container .badge-tag-container .badges .tag {
+        background-color: $color-icon-base-positive;
+        opacity: 1;
+      }
+    }
+
+    .document-name {
+      background-color: $color-icon-base-inverse !important;
+      border-radius: 2px;
+      box-shadow: 0px 0px 2px 0px #00000026;
+      width: auto;
+      height: 26px;
+      position: absolute;
+      bottom: 8px;
+      left: 8px;
+      right: 8px;
+
+      .file-name {
+        background-color: $color-icon-base-inverse;
+        color: $color-text-base-content;
+        &:hover {
+          background-color: $color-icon-base-inverse;
+          cursor: text;
+        }
+      }
+    }
+  }
+
+  .document-image-container {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    transition: background-color 0.2s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+
+    .document-image {
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      box-shadow: 0px 0px 4px 0px #00000026;
+    }
+
+    .badge-tag-container {
+      width: 100%;
+      height: 100%;
+      .badges:first-child {
+        position: absolute;
+        left: 4px;
+        gap: 4px;
+        margin-top: 4px;
+      }
+
+      .tag {
+        background-color: $color-blue-500-40;
+        position: static;
+        max-width: unset !important;
+      }
+
+      .new-tag {
+        background-color: $color-green-300;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 14px;
+        color: $color-text-base-inverse;
+        padding: 2px 4px;
+        border-radius: 1px;
+        text-transform: uppercase;
+        position: static;
+      }
+
+      .bottomTags {
+        position: absolute;
+        gap: 4px;
+        left: 4px;
+        bottom: 34px;
+      }
+    }
+  }
+
+  .document-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+
+    .document-actions-container {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      margin-right: 8px;
+
+      .delete {
+        transition: color 0.2s ease-in-out;
+        &:hover {
+          .icon {
+            color: $color-red-100;
+          }
+        }
+      }
+    }
+  }
+
+  .delete-modal {
+    height: 100%;
+    width: 100%;
+    gap: 0;
+
+    .delete-header .delete-header-text {
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 18px;
+      color: $color-text-base-heading;
+      padding: 0;
+      width: 167px;
+    }
+
+    .modal-buttons {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      margin-top: 38px;
+
+      .delete-button,
+      .cancel-button {
+        text-transform: none;
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 20px;
+        padding: 6px;
+        width: 150px;
+      }
+    }
+  }
+}
+
+//CDL Details Mode-------------------------------------------------------->
+
+.cdl-details-mode {
+  width: аuto !important;
+  height: auto !important;
+  background-color: transparent !important;
+  transition: background-color 0.3s ease-in-out !important;
+  display: flex !important;
+  flex-direction: column !important;
+  flex: 1 !important;
+  overflow: hidden !important;
+
+  &.document-portrait {
+    aspect-ratio: 1 / 1;
+  }
+
+  &.document-landscape:not(.multiple-details-docs) {
+    aspect-ratio: 3 / 2;
+    .document-image-container {
+      .document-image {
+        height: 100% !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        max-height: 100% !important;
+        object-fit: cover !important;
+      }
+    }
+  }
+
+  &:not(.document-portrait):not(.document-landscape) {
+    aspect-ratio: 3 / 2;
+  }
+
+  .document-image-container {
+    width: 100% !important;
+    height: 100% !important;
+    flex: 1 !important;
+    min-height: 0 !important;
+    max-height: 408px !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+
+    .document-image {
+      height: auto !important;
+      width: auto !important;
+      max-width: 100% !important;
+      max-height: 100% !important;
+      margin: 0 !important;
+      object-fit: contain !important;
+      box-shadow: 0px 0px 4px 0px #00000026;
+    }
+  }
+
+  .document-actions {
+    display: flex;
+    align-items: center;
+    justify-content: end !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    position: absolute !important;
+    top: 4px !important;
+    left: unset !important;
+    right: 4px !important;
+    transition: opacity 0.3s ease-in-out !important;
+
+    .label,
+    .delete {
+      display: none !important;
+    }
+  }
+
+  .badge-tag-container {
+    position: absolute !important;
+    bottom: 28px !important;
+    left: 0px !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    transition: opacity 0.3s ease-in-out !important;
+  }
+  .document-name {
+    position: absolute !important;
+    bottom: 4px !important;
+    left: 4px !important;
+    right: 4px !important;
+    width: auto !important;
+    border-radius: 1px;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    transition: opacity 0.3s ease-in-out !important;
+    background-color: #ffffffb2 !important;
+
+    &:has(.input) {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+  }
+
+  &.multiple-details-docs {
+    &.document-portrait,
+    &.document-landscape,
+    &:not(.document-portrait):not(.document-landscape) {
+      aspect-ratio: 1 / 1 !important;
+    }
+
+    &.document-portrait {
+      .document-image-container {
+        .document-image {
+          height: 100% !important;
+          width: auto !important;
+          object-fit: contain !important;
+        }
+      }
+    }
+
+    &.document-landscape {
+      .document-image-container {
+        .document-image {
+          height: auto !important;
+          width: 100% !important;
+          object-fit: cover !important;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background-color: $color-surface-input-neutral !important;
+    .document-name:not(.input) {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+      .file-name {
+        box-shadow: 0px 0px 2px 0px #00000026;
+        color: $color-black-700 !important;
+        background-color: $color-white-70 !important;
+      }
+    }
+    .badge-tag-container {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+
+    .document-actions {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+  }
+}
+
+//Drawer Mode-------------------------------------------------------->
+.drawerMode {
+  width: 194px !important;
+  height: 194px !important;
+  background-color: transparent !important;
+  .document-image-container {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+
+    .document-image {
+      width: auto !important;
+      height: auto !important;
+      max-width: 186px !important;
+      max-height: 186px !important;
+      object-fit: contain !important;
+      margin: 0 !important;
+      box-shadow: 0px 0px 2px 0px #00000026 !important;
+      display: block !important;
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      -moz-user-select: none !important;
+      -ms-user-select: none !important;
+    }
+
+    .badge-tag-container {
+      position: absolute !important;
+      bottom: 28px !important;
+      left: 0 !important;
+      right: 0 !important;
+    }
+
+    .badges {
+      .user-tag {
+        background-color: $color-blue-300 !important;
+        margin-bottom: 1px !important;
+      }
+      .category-tag {
+        background-color: $color-black-100 !important;
+        margin-bottom: 1px !important;
+      }
+      .tag:not(.user-tag):not(.category-tag) {
+        display: none !important;
+      }
+      &:has(.file-type) {
+        opacity: 0 !important;
+        pointer-events: none !important;
+        transition: opacity 0.2s ease-in-out !important;
+      }
+      &:has(.user-tag),
+      &:has(.category-tag) {
+        position: absolute !important;
+        bottom: -28px !important;
+        border-radius: 1px;
+        transition: bottom 0.1s ease-in-out !important;
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+
+  .document-name {
+    position: absolute !important;
+    bottom: 4px !important;
+    left: 4px !important;
+    right: 4px !important;
+    width: auto !important;
+    border-radius: 1px;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    transition: opacity 0.1s ease-in-out !important;
+    background-color: #ffffffb2 !important;
+    box-shadow: 0px 0px 2px 0px #00000026;
+
+    &.editing,
+    &:has(.input) {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+  }
+
+  .document-actions {
+    width: 100% !important;
+    position: absolute !important;
+    top: 4px !important;
+    left: 0 !important;
+    right: 0 !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: flex-start !important;
+  }
+
+  .document-actions-container {
+    &.label {
+      margin-left: 4px !important;
+    }
+    &:not(.label) {
+      margin-right: 4px !important;
+    }
+  }
+
+  &:hover:not(.noTouch):not(.buttonsVisibility) {
+    background-color: $color-surface-input-neutral !important;
+
+    .document-name:not(.input) {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+      .file-name {
+        box-shadow: 0px 0px 2px 0px #00000026;
+        color: $color-black-700 !important;
+        background-color: $color-white-70 !important;
+      }
+    }
+    .document-actions {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+    .document-name {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+    .document-image-container {
+      .badges {
+        .category-tag,
+        .user-tag {
+          margin-bottom: 2px !important;
+        }
+        &:has(.file-type) {
+          opacity: 1 !important;
+          pointer-events: auto !important;
+        }
+        &:has(.user-tag),
+        &:has(.category-tag) {
+          position: absolute !important;
+          bottom: 20px !important;
+        }
+      }
+    }
+  }
+}
+
+//Cover Details Mode------------------------------------------------->
+.is-cover-details {
+  width: 100% !important;
+  height: 100% !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+
+  &.has-expired-cover-details {
+    cursor: default;
+    pointer-events: none;
+
+    .document-image-container {
+      .document-image {
+        filter: grayscale(100%);
+      }
+    }
+  }
+
+  .document-image-container {
+    width: 100% !important;
+    height: auto !important;
+    max-height: 416px !important;
+
+    .document-image {
+      height: 100% !important;
+      max-width: 100% !important;
+      width: 100% !important;
+      object-fit: contain !important;
+      border-radius: 2px;
+
+      &.expired-image {
+        filter: grayscale(100%) opacity(50%);
+      }
+    }
+  }
+
+  .document-name,
+  .badge-tag-container {
+    display: none !important;
+  }
+
+  .document-actions {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    position: absolute !important;
+    top: 4px !important;
+    left: unset !important;
+    right: 4px !important;
+    transition: opacity 0.3s ease-in-out !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: end !important;
+
+    .label,
+    .delete {
+      display: none !important;
+    }
+  }
+
+  &:hover {
+    .document-actions {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+    }
+  }
+}
+
+//Has Expired
+/* .document.has-expired {
+  opacity: 0.4;
+  pointer-events: none;
+} */