tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/eye-test-audit/eye-test-audit/settings-audit/settings-audit.component.scss

@@ -0,0 +1,721 @@
+.header-card {
+  border-radius: 6px;
+  border-bottom: 2px solid var(--Gray-200, #EAECF0);
+  background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F2F4F7;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+  color: var(--Black, #101828);
+  font-size: 18px;
+  line-height: 32px;
+}
+
+.text-card {
+  color: var(--Black, #101828);
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.bg-light-primary {
+  border-bottom: 1px solid var(--Primary-100, #DAF1FF) !important;
+  background: var(--Primary-25, #F6FCFF) !important;
+}
+
+.sub-title {
+  color: var(--Gray-500, #667085);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.video-position {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.btn-success {
+  border: 1px solid var(--Success-700, #027A48) !important;
+  background: var(--Success-700, #027A48) !important;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+}
+
+.btn.btn-success:hover:not(.btn-active),
+.btn.btn-success:active:not(.btn-active) {
+  border: 1px solid var(--Success-700, #027A48) !important;
+  background: var(--Success-700, #027A48) !important;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+
+}
+
+table {
+  tr {
+    vertical-align: middle;
+
+    td {
+      color: var(--Gray-500, #667085);
+      font-size: 14px !important;
+      font-weight: 500;
+      line-height: 20px;
+    }
+  }
+}
+
+.custom-dropdown {
+  position: relative;
+  width: 100%;
+  padding: 10px 16px;
+  cursor: pointer;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  border: 1px solid var(--Gray-300, #D0D5DD);
+  background: var(--Gray-50, #F9FAFB);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.dropdown-content {
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  border-radius: 6px;
+  width: 100%;
+  background: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+}
+
+.dropdown-content1 {
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 0;
+  border-radius: 6px;
+  width: 100%;
+  background: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+}
+
+.scroll-container {
+  display: flex;
+  width: 100%;
+
+  .item {
+    width: 100%;
+    text-align: start;
+  }
+
+  .items:hover,
+  .tems.focus,
+  .items.active {
+    background: var(--Gray-50, #F9FAFB);
+  }
+}
+
+.label {
+  position: absolute;
+  top: -25%;
+  color: var(--Gray-700, #344054);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.scroll-section {
+  width: 50%;
+  height: 200px;
+  overflow-y: auto;
+  text-align: center;
+  border-right: 1px solid #ddd;
+}
+
+.scroll-section:last-child {
+  border-right: none;
+}
+
+.scroll-section div {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.scroll-section div.selected {
+  background: #007bff;
+  color: white;
+}
+
+.bg-primary {
+  border-radius: 8px;
+  border: 1px solid var(--Primary-600, #00A3FF) !important;
+  background: var(--Primary-600, #00A3FF) !important;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.bg-danger {
+  background: var(--Primary-500, #D92D20) !important;
+}
+
+.text-primary {
+  color: var(--Primary-700, #009BF3) !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  line-height: 18px !important;
+}
+
+.text-primary1 {
+  color: var(--Primary-700, #009BF3) !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  line-height: 18px !important;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  overflow: hidden;
+}
+
+/* Truncate column with ellipsis when too long */
+.rm-truncate {
+  display: inline-block;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+@media (max-width: 768px) {
+  .rm-truncate {
+    max-width: 120px;
+  }
+}
+
+.text-select {
+  color: var(--Gray-500, #667085) !important;
+  font-size: 14.56px !important;
+  font-weight: 400;
+  line-height: 21.84px !important;
+}
+
+.custom-tooltip-content {
+  font-size: 12px !important;
+  text-align: left !important;
+}
+
+::ng-deep .tooltip-inner {
+  max-width: 500px !important;
+  white-space: normal;
+}
+
+.test-dark1 {
+  color: var(--Success-700, #027A48) !important;
+  text-align: center;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  line-height: 18px;
+}
+
+.engage-text {
+  color: var(--Primary-700, #009BF3) !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  line-height: 20px;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+  text-transform: capitalize;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.h-auto {
+  height: 400px !important;
+  object-fit: fill;
+}
+
+@media (min-width:1920px) and (max-width:2119px) {
+
+  .h-500px {
+    height: 600px !important;
+  }
+
+  .h-auto {
+    height: 400px !important;
+    object-fit: fill;
+  }
+}
+
+@media (min-width:1720px) and (max-width:1900px) {
+
+  .h-auto {
+    height: 400px !important;
+    object-fit: fill;
+  }
+}
+
+@media (min-width:2120px) and (max-width:2800px) {
+
+  .h-auto {
+    height: 520px !important;
+    object-fit: fill;
+  }
+}
+
+@media (min-width:1330px) and (max-width:1500px) {
+
+
+  .h-auto {
+    height: 370px !important;
+    object-fit: fill;
+  }
+}
+
+.ts700px {
+  min-height: auto !important;
+  max-height: 700px !important;
+}
+
+.title-head {
+  color: var(--Gray-700, #101828);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.rotate {
+  rotate: 180deg;
+  transition: 1s;
+}
+
+#chartdiv {
+  width: 100%;
+  height: 240px;
+}
+
+.sankey-container,
+#sankeyChart {
+  width: 100%;
+  height: 600px;
+  overflow-x: auto;
+}
+
+.btn-resize {
+  font-size: 13px !important;
+  height: 29px !important;
+  line-height: 11px !important;
+  padding: 3px !important;
+}
+
+.filter-label {
+  color: var(--Gray-500, #667085) !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  text-transform: capitalize;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.filter-icon {
+  cursor: pointer;
+}
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  /* Adjust this based on your design */
+}
+
+.dropdown-header {
+  cursor: pointer;
+  width: 100%;
+  /* Adjust based on need */
+}
+
+.form-control {
+  color: var(--Gray-700, #344054) !important;
+  font-size: 14px !important;
+  font-weight: 600;
+  line-height: 20px;
+  // text-transform: capitalize;
+  width: 100%;
+  /* Ensures input takes full width */
+  box-sizing: border-box;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  z-index: 1000;
+  max-height: 230px;
+  overflow-y: auto;
+  display: block;
+  box-sizing: border-box;
+  padding: 10px 5px;
+}
+
+.dropdown-item {
+  padding: 6px 0px;
+}
+
+.dropdown-item:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown-item input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.custom-dropdown-menu {
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.custom-dropdown-item {
+  display: flex;
+  align-items: center;
+
+}
+
+.custom-dropdown-item input {
+  margin-left: 10px;
+}
+
+.dropdown2 {
+  position: absolute;
+  top: 70px;
+  // right: 14.5%;
+  min-width: 270px !important;
+
+  .dropdown-title {
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+
+    span {
+      color: var(--Gray-700, #344054);
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+    }
+  }
+}
+
+// ::ng-deep .dropdown2{
+//     z-index: 1 !important;
+// }
+.form-check-label {
+  color: var(--Gray-700, #344054) !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+input[type='checkbox'] {
+  width: 16px !important;
+  height: 16px !important;
+  margin: 0px 5px;
+  border-radius: 4px !important;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  outline: 1px solid var(--gray-300, #D0D5DD);
+  box-shadow: none;
+  font-size: 0.8em;
+  text-align: center;
+  line-height: 1em;
+  background: white;
+}
+
+input[type='checkbox']:checked {
+  outline: 1px solid var(--primary-600, #00A3FF);
+  background-color: var(--primary-50, #EAF8FF);
+}
+
+input[type='checkbox']:checked:after {
+  content: '';
+  transform: rotate(45deg);
+  border-bottom: 2px solid #00A3FF;
+  border-right: 2px solid #00A3FF;
+  display: inline-block;
+  width: 0.2em;
+  padding-left: 0px;
+  padding-top: 9px;
+  padding-right: 4px;
+}
+
+.chip {
+  border-radius: 20px;
+  margin: 10px 0px 10px 10px;
+  padding: 3px 10px;
+  border-radius: 16px;
+  background: var(--Gray-100, #F2F4F7);
+  color: var(--Gray-700, #344054);
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 35px;
+}
+
+.border-2 {
+  border: 1px solid var(--bs-gray-300) !important;
+  border-radius: 0.475rem !important;
+}
+
+:host::ng-deep {
+  .md-drppicker .btn {
+    line-height: 10px !important;
+  }
+
+  .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+    display: none;
+  }
+
+  .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+    top: 65px !important;
+    left: -470px !important;
+    height: 400px !important;
+  }
+
+  .md-drppicker .btn {
+    border-radius: 8px !important;
+    border: 1px solid var(--Primary-600, #00A3FF) !important;
+    background: var(--Primary-600, #00A3FF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    color: var(--White, #FFF) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    line-height: 20px;
+    text-transform: capitalize;
+  }
+
+  .md-drppicker .ranges ul li button {
+    padding: 12px 16px;
+    width: 160px;
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .md-drppicker td.active,
+  .md-drppicker td.active:hover {
+    background-color: #029cf4 !important;
+    border-radius: 20px !important;
+    color: var(--White, #FFF) !important;
+    text-align: center !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    line-height: 20px;
+  }
+
+  .md-drppicker.ltr .ranges {
+    float: left;
+    margin-top: 10px !important;
+  }
+
+  .md-drppicker td.in-range {
+    background: var(--Primary-50, #EAF8FF);
+  }
+
+  .md-drppicker .ranges ul li button.active {
+    background: var(--Primary-50, #EAF8FF) !important;
+    border-radius: 8px !important;
+    color: var(--Primary-700, #009BF3);
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    line-height: 20px !important;
+  }
+
+  table th,
+  table td {
+    width: 40px !important;
+    height: 40px !important;
+    padding: 10px 8px !important;
+  }
+
+  .md-drppicker td.available.prev,
+  .md-drppicker th.available.prev {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+    background-repeat: no-repeat !important;
+    background-size: 0.5em !important;
+    background-position: center !important;
+  }
+
+  .md-drppicker td.available.next,
+  .md-drppicker th.available.next {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+    background-repeat: no-repeat !important;
+    background-size: 0.5em !important;
+    background-position: center !important;
+  }
+
+  table th {
+    border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+    background: transparent !important;
+    color: var(--Gray-700, #344054) !important;
+    // text-align: center;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    line-height: 24px;
+  }
+
+  .md-drppicker td.available.invalid-date {
+    text-decoration: line-through;
+    pointer-events: none;
+    color: darkgray;
+  }
+
+  .md-drppicker td.available.today:not(.invalid-date) {
+    text-decoration: unset;
+    pointer-events: unset;
+    color: unset;
+  }
+
+  .md-drppicker .btn.btn-default {
+    border-radius: 8px !important;
+    border: 1px solid var(--Gray-300, #D0D5DD) !important;
+    background: var(--White, #FFF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    color: var(--Gray-700, #344054) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    line-height: 20px;
+    text-transform: capitalize;
+    margin-right: 10px !important;
+  }
+
+    table th,
+    table td {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 10px 8px !important;
+    }
+
+    .md-drppicker td.available.prev,
+    .md-drppicker th.available.prev {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    .md-drppicker td.available.next,
+    .md-drppicker th.available.next {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    table th {
+        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+        background: transparent !important;
+        color: var(--Gray-700, #344054) !important;
+        text-align: center;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px;
+    }
+    .md-drppicker td.available.invalid-date {
+        text-decoration: line-through;
+        pointer-events: none;
+        color: darkgray;
+    }
+
+    .md-drppicker td.available.today:not(.invalid-date) {
+        text-decoration: unset;
+        pointer-events: unset;
+        color: unset;
+    }
+        .md-drppicker .btn.btn-default {
+            border-radius: 8px !important;
+            border: 1px solid var(--Gray-300, #D0D5DD) !important;
+            background: var(--White, #FFF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--Gray-700, #344054) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+            margin-right:10px !important;
+        }
+        .md-drppicker td.available.invalid-date  {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+          }
+          
+          .md-drppicker td.available.today:not(.invalid-date)   {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+          }
+        }
+        table {
+      
+          th,
+          td {
+            height: 44px !important;
+            // padding: 12px 24px !important;
+            gap: 12px;
+            align-self: stretch;
+          }
+      
+          th {
+            border-bottom: 1px solid var(--Gray-200, #EAECF0) !important;
+            background: var(--Gray-50, #F9FAFB) !important;
+            color: var(--Gray-500, #667085) !important;
+            font-size: 12px !important;
+            font-weight: 500 !important;
+            line-height: 18px;
+          }
+      
+          // td {
+          //     color: var(--Gray-900, #667085);
+          //     font-size: 14px !important;
+          //     font-weight: 500 !important;
+          //     line-height: 20px;
+          // }
+        }
+      
+        .bottom-border td {
+          border-bottom: 1px solid var(--Gray-200, #EAECF0) !important;
+        }
+      
+        table {
+          tr {
+            vertical-align: middle;
+      
+            td {
+              color: var(--Gray-900, #667085);
+              font-size: 14px !important;
+              font-weight: 500 !important;
+              line-height: 20px;
+            }
+          }
+        }