ca-components 2.1.152 → 2.1.161

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

@@ -1,1491 +0,0 @@
-@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;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}