ca-components 2.1.142 → 2.1.151

package/lib/components/ca-upload-files/components/ca-upload-file/ca-upload-file.component.scss

@@ -0,0 +1,1491 @@
+@import 'scss/font-family.scss';
+@import 'theme/variables.scss';
+
+
+::ng-deep.pdf_viewer {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.ta-upload-file-container {
+  width: 148px;
+  height: 178px;
+  border-radius: 2px;
+  grid-template-rows: 160px 1fr;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  overflow: hidden;
+
+  &.modal {
+    background-color: $ta-light-grey-4;
+  }
+
+  &:hover,
+  &.keep_open {
+    transition: transform 0.3s ease-in-out;
+    background-color: $ta-light-grey-4;
+
+    .ta-upload-file-header-review {
+
+      .ta-upload-action-download-review,
+      .ta-upload-file-action-leftside .ta-upload-action-mark-incorrect,
+      .ta-upload-action-mark-correct {
+        opacity: 1 !important;
+        pointer-events: all !important;
+      }
+    }
+  }
+
+  &.applicant_review {
+    overflow: visible;
+
+    .ta-upload-file-header-review {
+      .ta-upload-action-mark-incorrect {
+        opacity: 1 !important;
+        pointer-events: all !important;
+      }
+    }
+  }
+
+  &.annotation_hover {
+    .ta-upload-file-header-review {
+      .ta-upload-action-download-review {
+        opacity: 0 !important;
+        pointer-events: none !important;
+      }
+    }
+  }
+
+  &.applicant_feedback {
+    overflow: visible;
+
+    .ta-upload-file-header {
+      .ta-upload-file-action-rightside {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .ta-upload-action-feedback-incorrect-mark {
+        opacity: 1 !important;
+        pointer-events: all !important;
+      }
+    }
+
+    &:hover {
+      .ta-upload-file-header {
+
+        .ta-upload-file-action-leftside,
+        .ta-upload-file-action-rightside {
+          opacity: 1 !important;
+          pointer-events: all !important;
+        }
+      }
+    }
+  }
+
+  // ----------------- File Header Actions Review ----------
+  .ta-upload-file-header-review {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 140px;
+    height: 30px;
+    z-index: 10;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    // Review Actions
+    .ta-upload-action-download-review,
+    .ta-upload-action-mark-incorrect,
+    .ta-upload-action-mark-correct {
+      width: 30px;
+      height: 30px;
+      line-height: 15px;
+      background-color: rgb(108, 108, 108, 0.9);
+      border-radius: 1px;
+      position: absolute;
+      right: 0px;
+      transition: transform 0.3s ease-in-out;
+      cursor: pointer;
+      opacity: 0;
+      pointer-events: none;
+
+      svg {
+        height: 18px;
+        width: 18px;
+
+        path {
+          fill: $bw-9;
+        }
+      }
+
+      &:hover {
+        background-color: $bw6-2;
+
+        svg {
+          path {
+            fill: $white-2;
+          }
+        }
+      }
+    }
+
+    .ta-upload-action-mark-incorrect {
+      right: 4px;
+
+      svg {
+        height: 24px;
+        width: 24px;
+
+        rect {
+          fill: transparent !important;
+        }
+      }
+
+      &.incorrect {
+        background-color: $ta-red-2;
+
+        svg {
+          path {
+            fill: $white-2;
+          }
+        }
+      }
+    }
+
+    .ta-upload-action-mark-correct {
+      right: 4px;
+    }
+
+    .review-feedback-container {
+      position: absolute;
+      left: 170px;
+      top: 8px;
+    }
+  }
+
+  //------------------ File Header Actions ------------------
+  .ta-upload-file-header {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 100%;
+    height: 30px;
+    z-index: 10;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    // No Review Actions
+    .ta-upload-file-action-leftside {
+      opacity: 0;
+      width: 30px;
+      margin-left: 8px;
+      height: 30px;
+      border-radius: 1px;
+      background-color: rgb(108, 108, 108, 0.9);
+      text-align: center;
+      padding: 6px;
+      cursor: pointer;
+      transition: transform 0.1s ease-in-out;
+
+      &:focus {
+        transition: transform 0.1s ease-in-out;
+        opacity: 1 !important;
+      }
+
+      .ta-upload-action-tag {
+        width: 100%;
+        height: 100%;
+
+        svg {
+          display: flex;
+          height: 18px;
+          width: 18px;
+
+          path {
+            fill: $bw-9;
+          }
+        }
+
+        &:hover {
+          transition: transform 0.1s ease-in-out;
+
+          svg {
+            path {
+              fill: $white-2;
+            }
+          }
+        }
+      }
+
+      &.active {
+        transition: transform 0.1s ease-in-out;
+        background-color: $ta-black;
+
+        .ta-upload-action-tag {
+          svg {
+            path {
+              fill: $white-2;
+            }
+          }
+        }
+      }
+
+      &.no-action-tag {
+        opacity: 0;
+        visibility: none;
+        pointer-events: none !important;
+      }
+    }
+
+    .ta-upload-file-action-rightside {
+      padding: 6px;
+      gap: 12px;
+      width: 60px;
+      height: 30px;
+      text-align: center;
+      border-radius: 1px;
+      background-color: rgb(108, 108, 108, 0.9);
+      cursor: pointer;
+
+      &.vertical-mode {
+        display: block;
+        width: 30px;
+        height: 90px;
+      }
+
+      .ta-upload-action-download,
+      .ta-upload-action-delete,
+      .ta-upload-action-tag {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 30px;
+
+        line-height: 15px;
+
+        svg {
+          height: 18px;
+          width: 18px;
+
+          path {
+            fill: $bw-9;
+          }
+        }
+
+        &:hover {
+          transition: transform 0.3s ease-in-out;
+
+          svg {
+            path {
+              fill: $white-2;
+            }
+          }
+        }
+
+        &.active {
+          transition: transform 0.1s ease-in-out;
+          background-color: $ta-black;
+
+          svg {
+            path {
+              fill: $white-2;
+            }
+          }
+        }
+
+        &.no-action-tag {
+          opacity: 0;
+          height: 0;
+          padding: 0;
+          pointer-events: none !important;
+        }
+      }
+
+      &.feedback-mode {
+        position: relative;
+        left: 15px;
+      }
+
+      &.small {
+        width: 30px;
+        height: 30px;
+      }
+    }
+
+    .ta-upload-action-feedback-incorrect-mark {
+      width: 30px;
+      height: 30px;
+      border-radius: 2px;
+      border-radius: 2px;
+      background-color: rgb(239, 83, 80, 0.9);
+      cursor: pointer;
+      transition: transform 0.3s ease-in-out;
+      opacity: 0;
+      pointer-events: none;
+
+      svg-icon {
+        width: 18px;
+        height: 24px;
+      }
+
+      &:hover {
+        background-color: $ta-red-2;
+      }
+    }
+  }
+
+  //------------------ File Content ------------------
+  .ta-upload-file-content {
+    overflow: hidden;
+    width: 140px;
+    height: 140px;
+    margin: 4px;
+    position: relative;
+
+    .ng2-pdf-viewer-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: transparent !important;
+      width: 160px !important;
+      height: 160px !important;
+      border-radius: 1px !important;
+      top: 4px !important;
+      -webkit-user-select: none !important;
+      -moz-user-select: none !important;
+      -ms-user-select: none !important;
+      user-select: none !important;
+      z-index: 2;
+
+      .canvasWrapper {
+        box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+      }
+
+      .textLayer span,
+      .textLayer input,
+      .textLayer textarea,
+      .annotationLayer section,
+      .annotationLayer section input,
+      .annotationLayer section textarea {
+        background-image: none !important;
+        pointer-events: none !important;
+        user-select: none !important;
+        cursor: default !important;
+      }
+
+      .canvasWrapper,
+      .pdfViewer,
+      .pdfViewer .page,
+      canvas {
+        width: 160px !important;
+        max-height: 160px !important;
+        margin: 0 !important;
+        border-radius: 1px !important;
+
+        &:not(:first-child) {
+          opacity: 0;
+          height: 0 !important;
+        }
+      }
+
+      .pdfViewer {
+        box-shadow: 0px 0px 4px rgb(0 0 0 / 15%);
+      }
+    }
+
+    .image_main_holder {
+      height: 148px;
+
+      .spinner {
+        position: absolute;
+      }
+
+      .ta-upload-file-image {
+        max-width: 160px;
+        max-height: 157px;
+        object-fit: fill;
+        border-radius: 1px;
+        vertical-align: middle;
+        -webkit-user-select: none !important;
+        -moz-user-select: none !important;
+        -ms-user-select: none !important;
+        user-select: none !important;
+        box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+        z-index: 2;
+
+        &.details_image {
+          left: 49%;
+          max-width: 276px;
+          max-height: 276px;
+        }
+      }
+
+      &.company-details-pdf {
+        width: 378px;
+        height: 378px;
+
+        .ta-upload-file-image {
+          max-width: 378px;
+          max-height: 378px;
+        }
+      }
+
+      &.todo-details {
+        height: 186px;
+        width: 186px;
+      }
+
+      &.table-details {
+        margin-top: 4px;
+        width: 192px;
+        height: 188px;
+
+        .ta-upload-file-image {
+          max-width: 192px;
+          max-height: 188px;
+        }
+      }
+
+      &.driver-card-pdf {
+        margin-top: 4px;
+        width: 408px;
+        height: 408px;
+
+        .ta-upload-file-image {
+          max-width: 408px;
+          max-height: 408px;
+        }
+      }
+
+      &.driver-details-pdf {
+        margin-top: 4px;
+        width: 308px;
+        height: 306px;
+
+        .ta-upload-file-image {
+          max-width: 308px;
+          max-height: 306px;
+        }
+      }
+
+      &.company-documents {
+        height: 289px;
+        width: 294px;
+        margin-top: 4px;
+
+        .ta-upload-file-image {
+          max-width: 294px;
+          max-height: 294px;
+        }
+      }
+    }
+
+    .ta-upload-file-number-of-pages {
+      font-weight: 600 !important;
+      position: absolute;
+      bottom: -4px;
+      left: 0px;
+      font-size: 11px;
+      height: 18px;
+      text-align: center;
+      padding: 2px 6px;
+      border-radius: 2px;
+      background-color: rgba(108, 108, 108, 0.9);
+      color: $white-2;
+      font-size: 11px;
+      line-height: 15px;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    .ta-upload-file-tag {
+      font-weight: 700 !important;
+      max-width: 100%;
+      height: 18px;
+      border-radius: 1px;
+      background-color: $ta-blue-21;
+      color: $white-2;
+      font-size: 11px;
+      bottom: 20px;
+      position: absolute;
+      left: 0px;
+      padding: 2px 4px;
+      opacity: 1;
+      -webkit-user-select: none !important;
+      user-select: none !important;
+      z-index: 10;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      &.tagRemoving {
+        opacity: 0;
+      }
+
+      span {
+        line-height: 14px;
+      }
+
+      &.no-tag {
+        background-color: rgb(145, 145, 145) !important;
+      }
+
+      &:hover {
+        transition: transform 0.3s ease-in-out;
+        cursor: auto !important;
+      }
+    }
+
+    //-------------- Driver Details Single PDF
+
+    &.driver-details-pdf,
+    &.driver-card-pdf,
+    &.landscape-details-view,
+    &.todo-details,
+    &.company-details-pdf,
+    &.modals,
+    &.table-details,
+    &.company-documents {
+      position: relative;
+
+      ::ng-deep .ng2-pdf-viewer-container {
+        box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+        overflow: hidden !important;
+      }
+
+      .ng2-pdf-viewer-container {
+        overflow: visible !important;
+        background-color: transparent !important;
+        border-radius: 1px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          margin: 0 !important;
+          border-radius: 1px !important;
+          width: auto !important;
+
+          &:not(:first-child) {
+            opacity: 0;
+            height: 0 !important;
+          }
+        }
+      }
+    }
+
+    &.driver-details-pdf {
+      width: 312px;
+      height: 312px;
+
+      .ng2-pdf-viewer-container {
+        width: 304px !important;
+        height: 304px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          max-width: 304px !important;
+          max-height: 304px !important;
+          min-width: 229px;
+        }
+      }
+    }
+
+    &.company-documents {
+      width: 302px;
+      height: 332px;
+
+      .ng2-pdf-viewer-container {
+        width: 294px !important;
+        height: 294px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          max-width: 294px !important;
+          max-height: 294px !important;
+          min-width: 228px;
+        }
+      }
+    }
+
+    &.modals {
+      width: 140px;
+      cursor: pointer;
+      height: 148px;
+
+      ::ng-deep .ng2-pdf-viewer-container {
+        right: 20px;
+        width: 100px;
+        box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+        overflow: hidden !important;
+      }
+
+      .ng2-pdf-viewer-container {
+        box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+        width: 159px !important;
+        height: 156px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+          max-width: 156px !important;
+          max-height: 156px !important;
+          min-width: 120px;
+        }
+      }
+    }
+
+    &.driver-card-pdf {
+      width: 416px;
+      height: 416px;
+
+      .ng2-pdf-viewer-container {
+        width: 408px !important;
+        height: 408px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          max-width: 408px !important;
+          max-height: 408px !important;
+          min-width: 314px;
+        }
+      }
+    }
+
+    &.landscape-details-view {
+      width: 312px;
+      max-height: 200px;
+      bottom: 4px;
+
+      .ng2-pdf-viewer-container {
+        overflow: hidden !important;
+        width: 304px !important;
+        max-height: 192px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          overflow: hidden !important;
+          max-width: 304px !important;
+          max-height: 192px !important;
+          min-width: 304px;
+        }
+      }
+    }
+
+    &.todo-details {
+      height: 186px;
+      left: 21px;
+
+      .ng2-pdf-viewer-container {
+        overflow: hidden !important;
+        width: 186px !important;
+        height: 186px !important;
+        border-radius: 1px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          overflow: hidden !important;
+          max-width: 186px !important;
+          max-height: 186px !important;
+          min-width: 150px;
+        }
+      }
+    }
+
+    &.table-details {
+      width: 200px;
+      height: 200px;
+
+      .ng2-pdf-viewer-container {
+        overflow: hidden !important;
+        width: 192px !important;
+        height: 192px !important;
+        border-radius: 1px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          overflow: hidden !important;
+          max-width: 192px !important;
+          max-height: 192px !important;
+          min-width: 150px;
+        }
+      }
+    }
+
+    &.company-details-pdf {
+      width: 378px;
+      height: 378px;
+
+      .ng2-pdf-viewer-container {
+        overflow: hidden !important;
+        width: 370px !important;
+        height: 370px !important;
+        border-radius: 1px !important;
+
+        .canvasWrapper,
+        .pdfViewer,
+        .pdfViewer .page,
+        canvas {
+          max-width: 370px !important;
+          max-height: 370px !important;
+          min-width: 229px;
+        }
+      }
+    }
+  }
+
+  .ta-upload-file-delete-template {
+    position: absolute;
+    gap: 4px;
+    border-radius: 2px;
+    top: 0;
+    left: 0;
+    padding: 4px;
+    z-index: 20;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(243, 243, 243, 0.9);
+
+    .ta-upload-file-delete-text {
+      font-weight: 500 !important;
+      font-size: 14px;
+      line-height: 18px;
+      color: $ta-black;
+      width: 116px;
+      word-wrap: break-word;
+      text-align: center;
+      margin: 18px 12px 20px;
+
+      &::-moz-selection {
+        background-color: rgb(108, 108, 108, 0.2) !important;
+        color: $bw6-2 !important;
+      }
+
+      &::selection {
+        background-color: rgb(108, 108, 108, 0.2) !important;
+        color: $bw6-2 !important;
+      }
+    }
+
+    .ta-upload-file-btn {
+      font-weight: 700 !important;
+      width: 140px;
+      height: 22px;
+      border-radius: 2px;
+      background-color: $white-2;
+      color: $bw6-2;
+      font-size: 11px;
+      line-height: 14px;
+      text-align: center;
+      cursor: pointer;
+      padding: 4px 0px;
+      user-select: none;
+
+      &-delete {
+        color: $ta-red-11; //izmenjeno
+
+        &:hover {
+          background-color: $ta-red-11 !important;
+          color: $white-2;
+          transition: transform 0.3s ease-in-out;
+        }
+      }
+
+      &-cancel {
+        &:hover {
+          background-color: $bw6-2 !important;
+          color: $white-2;
+          transition: transform 0.3s ease-in-out;
+        }
+      }
+    }
+
+    &.company-documents {
+      background-color: rgba(255, 255, 255, 0.9);
+
+      .ta-upload-file-btn {
+        background-color: rgb(243, 243, 243);
+      }
+    }
+  }
+
+  //------------------ File Footer Actions ------------------
+  .ta-upload-file-footer {
+    position: relative;
+    height: 26px;
+    width: 180px;
+    z-index: 30;
+
+    p {
+      margin: 0;
+    }
+
+    &.edit-mode {
+      padding: 0px !important;
+    }
+
+    input {
+      padding: 4px !important;
+    }
+
+    .footer_info {
+      position: absolute;
+      left: 4px;
+      bottom: 30px;
+
+      .ta-upload-file-ext {
+        font-weight: 900 !important;
+        width: 32px;
+        height: 18px;
+        text-align: center;
+        border-radius: 1px;
+        margin-right: 4px;
+        font-size: 11px;
+        color: $white-2;
+        line-height: 18px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        text-transform: uppercase;
+
+        &-jpg,
+        &-jpeg,
+        &-png {
+          background: #f89b2e66;
+
+          &:hover {
+            background-color: $ta-yellow-1;
+          }
+        }
+
+        &-mp4,
+        &-mov,
+        &-avi {
+          background: #9E47EC66;
+
+          &:hover {
+            background-color: $purple-3;
+          }
+        }
+
+        &-pdf {
+          background-color: $ta-red-20;
+
+          &:hover {
+            background-color: $ta-red-10;
+          }
+        }
+
+        &:hover {
+          transition: transform 0.3s ease-in-out;
+          cursor: auto !important;
+        }
+      }
+    }
+
+    .document_info_hold {
+      padding: 2px 6px;
+      background-color: #91919166 !important;
+      color: $white-2;
+      border-radius: 1px;
+
+      font-size: 11px;
+      font-weight: 700 !important;
+      line-height: 14px;
+
+      user-select: none;
+
+      .file_size {
+        font-weight: 500 !important;
+
+        &.has_pages {
+          margin-left: 3px;
+        }
+      }
+    }
+
+    .ta-upload-file-name {
+      flex: 1;
+      font-size: 14px;
+      color: #6c6c6c;
+      max-width: 161px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 100%;
+      height: 100%;
+      padding: 4px;
+      line-height: 18px;
+
+      &::-moz-selection {
+        background-color: rgb(108, 108, 108, 0.2) !important;
+        color: $bw6-2 !important;
+      }
+
+      &::selection {
+        background-color: rgb(108, 108, 108, 0.2) !important;
+        color: $bw6-2 !important;
+      }
+
+      &.details_title {
+        max-width: 100%;
+      }
+
+      &.todo_title {
+        max-width: 192px;
+      }
+    }
+  }
+
+  &:hover,
+  &.keep_open {
+    transition: transform 0.3s ease-in-out;
+  }
+
+  // --------------------- Custom Classes ---------------------
+  &.driver-details-pdf,
+  &.driver-card-pdf,
+  &.landscape-details-view,
+  &.todo-details,
+  &.company-details-pdf,
+  &.modals,
+  &.table-details,
+  &.company-documents {
+    .ta-upload-file-footer {
+      opacity: 0;
+      border-radius: 2px;
+      cursor: default;
+      transition: 0.1s transform ease-in-out;
+
+      .footer_info {
+        left: 0 !important;
+      }
+    }
+
+    .ta-upload-file-tag {
+      opacity: 0;
+      transition: 0.1s transform ease-in-out;
+    }
+
+    .ta-upload-file-footer {
+      opacity: 0;
+
+      .ta-upload-file-name {
+        background-color: rgba(255, 255, 255, 0.7) !important;
+        transition: 0.1s transform ease-in-out;
+
+        &:hover {
+          transition: 0.1s transform ease-in-out;
+          background-color: rgba(255, 255, 255, 0.9) !important;
+        }
+      }
+
+      .footer_info {
+        .ta-upload-file-ext {
+
+          &-jpg,
+          &-jpeg,
+          &-png {
+            background-color: #ffb74d80;
+
+            &:hover {
+              background-color: #ffb74de6;
+            }
+          }
+
+          &-pdf {
+            background-color: #ef535080;
+
+            &:hover {
+              background-color: #ef5350e6;
+            }
+          }
+        }
+
+        .document_info_hold {
+          transition: 0.1s transform ease-in-out;
+          padding: 2px 6px;
+          background-color: $dark-3;
+          color: $white-2;
+          border-radius: 1px;
+
+          font-size: 11px;
+          font-weight: 700 !important;
+          line-height: 14px;
+
+          user-select: none;
+
+          .file_size {
+            font-weight: 500 !important;
+
+            &.has_pages {
+              margin-left: 3px;
+            }
+          }
+        }
+      }
+    }
+
+    .ta-upload-file-tag {
+      opacity: 0;
+      transition: 0.1s transform ease-in-out;
+      background-color: $ta-blue-21;
+
+      &:hover {
+        transition: 0.1s transform ease-in-out;
+        background-color: $ta-blue-13;
+      }
+
+      &.default {
+        background-color: #42424280;
+
+        &:hover {
+          transition: 0.1s transform ease-in-out;
+          background-color: #424242e6;
+        }
+      }
+    }
+
+    &:hover {
+      .ta-upload-file-footer {
+        opacity: 1;
+        border-radius: 1px;
+      }
+
+      .ta-upload-file-tag {
+        opacity: 1;
+      }
+    }
+
+    &.table-details {
+      .ta-upload-file-tag {
+        opacity: 1 !important;
+        bottom: 8px !important;
+      }
+
+      &:hover {
+        .ta-upload-file-tag {
+          bottom: 56px !important;
+        }
+      }
+    }
+  }
+
+  &.modals,
+  &.company-documents,
+  &.keep_open_modals {
+    background-color: $bw2 !important;
+
+    .ta-upload-file-footer {
+      opacity: 1;
+
+      .ta-upload-file-name {
+        background-color: transparent !important;
+        transition: 0.1s transform ease-in-out;
+        cursor: pointer;
+      }
+    }
+
+    &:hover {
+      background-color: #dadadada !important;
+
+      .ta-upload-file-ext-jpg,
+      .ta-upload-file-ext-jpeg,
+      .ta-upload-file-ext-png {
+        background-color: $ta-yellow-1 !important;
+      }
+
+      .ta-upload-file-ext-avi,
+      .ta-upload-file-ext-mp4,
+      .ta-upload-file-ext-mov {
+        background-color: $purple-3 !important;
+      }
+
+      .document_info_hold {
+        background-color: $muted !important;
+      }
+
+      .ta-upload-file-tag {
+        background-color: $ta-blue-13 !important;
+      }
+
+      .ta-upload-file-ext-pdf {
+        background-color: $ta-red-10 !important;
+      }
+
+      .ta-upload-file-footer {
+        .ta-upload-file-name {
+          transition: 0.1s transform ease-in-out;
+          background-color: $bw2 !important;
+
+          &:hover {
+            background-color: $bw2 !important;
+          }
+        }
+      }
+    }
+
+    .ta-upload-file-tag {
+      opacity: 1;
+    }
+  }
+
+  &.keep_open_modals {
+    background-color: #dadadada !important;
+
+    .ta-upload-file-footer {
+      .ta-upload-file-name {
+        transition: 0.1s transform ease-in-out;
+        background-color: $bw2 !important;
+
+        &:hover {
+          background-color: $white-2 !important;
+        }
+      }
+    }
+  }
+
+  &.company-documents {
+    .ta-upload-file-footer {
+      opacity: 1;
+
+      .ta-upload-file-name {
+        background-color: $bw2 !important;
+      }
+    }
+  }
+
+  &.driver-details-pdf {
+    width: 312px;
+    height: 312px;
+    grid-template-rows: 312px;
+
+    .ta-upload-file-footer {
+      bottom: 37px;
+      right: -4px;
+
+      width: 304px;
+    }
+
+    .ta-upload-file-tag {
+      bottom: 56px;
+    }
+
+    .ta-upload-file-delete-template {
+      width: 304px;
+      height: 304px;
+    }
+  }
+
+  &.company-documents {
+    width: 302px;
+    height: 332px;
+    grid-template-rows: 332px;
+
+    background-color: $bw-9 !important;
+
+    &:hover {
+      background-color: $ta-light-grey-6 !important;
+    }
+
+    .ta-upload-file-footer {
+      bottom: 37px;
+      right: -4px;
+
+      width: 294px;
+
+      .ta-upload-file-name {
+        max-width: 294px;
+      }
+    }
+
+    .ta-upload-file-tag {
+      top: 4px;
+    }
+
+    .ta-upload-file-delete-template {
+      width: 302px;
+      height: 332px;
+    }
+  }
+
+  &.modals {
+    //container
+    width: 148px;
+    height: 100%;
+
+    .ta-upload-file-footer {
+      right: -4px;
+      bottom: 4px;
+      width: 140px;
+    }
+
+    .ta-upload-file-tag {
+      bottom: 56px;
+    }
+  }
+
+  &.driver-card-pdf {
+    width: 416px;
+    height: 416px;
+    grid-template-rows: 416px;
+
+    .ta-upload-file-footer {
+      bottom: 37px;
+      right: -4px;
+
+      width: 408px;
+
+      .ta-upload-file-name {
+        max-width: 408px;
+      }
+    }
+
+    .ta-upload-file-tag {
+      bottom: 56px;
+    }
+
+    .ta-upload-file-delete-template {
+      width: 420px;
+      height: 420px;
+    }
+  }
+
+  &.landscape-details-view {
+    width: 312px;
+    max-height: 200px;
+    min-height: 200px;
+    grid-template-rows: 200px;
+    overflow: visible;
+
+    .ta-upload-file-footer {
+      bottom: 37px;
+      right: -4px;
+
+      width: 304px;
+    }
+
+    .ta-upload-file-tag {
+      opacity: 0;
+      bottom: 31px;
+    }
+
+    .ta-upload-file-delete-template {
+      width: 304px;
+      min-height: 192px;
+    }
+  }
+
+  &.todo-details {
+    width: 194px;
+    height: 194px;
+    grid-template-rows: 194px;
+
+    .ta-upload-file-footer {
+      box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+      bottom: 32px;
+      left: 4px;
+      width: 186px;
+    }
+
+    .ta-upload-file-tag {
+      bottom: 56px;
+    }
+
+    .ta-upload-file-delete-template {
+      width: 192px;
+      height: 192px;
+    }
+  }
+
+  &.table-details {
+    width: 200px;
+    height: 200px;
+    grid-template-rows: 200px;
+
+    .ta-upload-file-footer {
+      bottom: 37px;
+      right: -4px;
+
+      width: 192px;
+
+      .ta-upload-file-name {
+        max-width: 192px;
+      }
+    }
+
+    .ta-upload-file-tag {
+      bottom: 56px;
+    }
+
+    .ta-upload-file-delete-template {
+      width: 192px;
+      height: 192px;
+    }
+  }
+
+  &.company-details-pdf {
+    width: 378px;
+    height: 378px;
+    grid-template-rows: 378px;
+
+    .ta-upload-file-footer {
+      bottom: 37px;
+      right: -4px;
+
+      width: 370px;
+    }
+
+    .ta-upload-file-tag {
+      bottom: 56px;
+    }
+
+    .ta-upload-file-delete-template {
+      width: 370px;
+      height: 370px;
+    }
+  }
+
+  &.keep_open {
+    .ta-upload-file-footer {
+      opacity: 1;
+      border-radius: 1px;
+    }
+
+    .ta-upload-file-tag {
+      opacity: 1;
+    }
+  }
+}
+
+.tags_main_holder {
+  z-index: 100 !important;
+  width: 196px;
+  background-color: $ta-black-2;
+  border-radius: 3px;
+  box-shadow: 0 0 4px rgb(0, 0, 0, 0.15);
+  cursor: pointer;
+
+  .remove_tag_holder {
+    padding: 6px;
+    border-radius: 2px;
+
+    &:hover {
+      background-color: $ta-black-3;
+    }
+
+    .remove_tag {
+      color: $ta-red;
+      font-weight: 700 !important;
+      font-size: 11px;
+      line-height: 14px;
+    }
+  }
+
+  .remove_tag_border_holder {
+    width: 100%;
+    padding: 0px 4px;
+    margin: 4px 0px;
+
+    .remove_tag_border {
+      width: 100%;
+      height: 1px;
+
+      background-color: $ta-light-grey-2;
+    }
+  }
+
+  .tags_inner_holder {
+    z-index: 100;
+    height: 26px;
+    margin: 2px 0px;
+    padding-left: 4px;
+    border-radius: 2px;
+
+    &.firstRow {
+      margin-top: 0;
+    }
+
+    &.lastRow {
+      margin-bottom: 0;
+    }
+
+    .tag_options_holder {
+      padding-right: 6px;
+
+      width: 100%;
+      height: 100%;
+
+      .tag_name {
+        flex: 1;
+        font-size: 14px;
+        line-height: 18px;
+        color: $white-2;
+
+        &.checked {
+          font-weight: 700 !important;
+        }
+      }
+
+      .checked_icon {
+        opacity: 0;
+        margin-left: 4px;
+
+        &.shown {
+          opacity: 1;
+        }
+
+        svg-icon {
+          svg {
+            display: flex;
+
+            path {
+              fill: $bc1;
+            }
+          }
+        }
+      }
+    }
+
+    &:hover {
+      background-color: $ta-black-3;
+
+      .tag_options_holder {
+        .checked_icon {
+          svg-icon {
+            svg {
+              path {
+                fill: $primary;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}