tango-app-ui-manage-tickets 3.7.0-beta.58 → 3.7.0-beta.60

package/src/lib/components/ticket-footfall-new/ticket-footfall-new.component.scss

@@ -0,0 +1,1208 @@
+.card-header,
+.header {
+  color: var(--Gray-900, #101828);
+  font-size: 20px !important;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 27px;
+}
+
+.sub-header {
+  color: var(--Gray-700, #344054);
+  font-size: 14px !important;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.ellipse1 {
+  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);
+}
+
+.card-title-foot {
+  color: var(--Gray-800, #1D2939) !important;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.card-title-label {
+  color: var(--Gray-800, #1D2939) !important;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.card-title-value {
+  color: var(--Gray-800, #1D2939) !important;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 28px;
+}
+
+input[type='checkbox'] {
+  width: 16px !important;
+  height: 16px !important;
+  margin: -2px 5px -2px;
+  border-radius: 4px !important;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  outline: 1px solid var(--gray-600, #D0D5DD) !important;
+  box-shadow: none;
+  font-size: 0.5em;
+  text-align: center;
+  line-height: 1em;
+  background: white;
+}
+
+input[type='checkbox'] {
+  outline: 1px solid var(--primary-600, #00A3FF) !important;
+  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.5em;
+  padding-left: 3px;
+  padding-top: 10px;
+  padding-right: 0px;
+}
+
+.rotate {
+  rotate: 180deg;
+  transition: 1s;
+}
+
+.border-selectall {
+  border-radius: 6px;
+  border-bottom: 1px solid var(--Gray-200, #EAECF0);
+  background: #F9FAFB;
+  padding: 8px 12px;
+}
+
+.border-selectall1 {
+  border-radius: 6px !important;
+  background: var(--White, #FFF) !important;
+  padding: 8px 2px;
+}
+
+.border-totalfootfall {
+  border-radius: 12px;
+  padding: 4px;
+  border: 1px solid var(--Gray-300, #D0D5DD);
+  background: var(--White, #FFF);
+}
+
+.vl {
+  border-left: 2px solid #000;
+  height: 50px;
+}
+
+.duplicate-head {
+  color: var(--Gray-700, #344054);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.img-border {
+  border-radius: 5px !important;
+  border: 2px solid var(--Gray-300, #D0D5DD);
+}
+
+.desc-title {
+  color: var(--Gray-900, #101828);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.desc-value {
+  color: var(--Gray-900, #475467);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 10px;
+}
+
+.img-border {
+  overflow: hidden;
+  position: relative;
+}
+
+.btn-resize {
+  font-size: 13px !important;
+  height: 29px !important;
+  line-height: 11px !important;
+  padding: 1px !important;
+}
+
+.absolute {
+  top: 5px;
+  right: 5px;
+  z-index: 2;
+}
+
+.absolute1 {
+  top: 5px;
+  left: 8px;
+  z-index: 2;
+}
+
+.img-src {
+  width: 25%;
+  height: 20%
+}
+
+.backButtonright {
+  border-radius: 1000px !important;
+  background: var(--text-primary, #FFF) !important;
+  padding: 12px !important;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
+  box-shadow: 0px 8.727px 11.636px -2.909px rgba(16, 24, 40, 0.08), 0px 2.909px 4.364px -1.455px rgba(16, 24, 40, 0.03) !important;
+  position: absolute;
+  top: 30px;
+  right: -10px;
+  z-index: 0;
+}
+
+.backButtonleft {
+  border-radius: 1000px !important;
+  background: #FFF;
+  padding: 14px !important;
+  border: var(--Gray-300, #D0D5DD);
+  box-shadow: 0px 8.727px 11.636px -2.909px rgba(16, 24, 40, 0.08), 0px 2.909px 4.364px -1.455px rgba(16, 24, 40, 0.03);
+  position: absolute;
+  top: 30px;
+  left: -20px;
+  z-index: 5;
+}
+
+.select-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  /* Ensure it takes the same width as select */
+}
+
+.placeholder-overlay {
+  position: absolute;
+  color: var(--Gray-500, #667085);
+  font-family: "Inter";
+  font-size: 16px !important;
+  font-style: normal;
+  font-weight: 400;
+  top: 10px;
+  /* Adjust to align text with select component */
+  left: 15px;
+  /* Adjust for horizontal alignment */
+  pointer-events: none;
+  /* Allows interaction with select even if overlay is visible */
+  font-size: 1.1rem;
+  z-index: 1;
+}
+
+.card-title {
+  color: var(--Black, #101828) !important;
+  font-size: 20px !important;
+  font-weight: 700 !important;
+  line-height: 30px;
+}
+
+.card-title-sub-header {
+  color: var(--Black, #101828);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 30px;
+}
+
+.separator.separator-dashed {
+  border-bottom-style: double !important;
+}
+
+.border-1 {
+  border-radius: 4px !important;
+  border: 1px solid var(--Gray-300, #D0D5DD) !important;
+  // box-shadow: 0 0 0 2.291px #475467 !important;
+}
+
+.store-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.store-item-active {
+  background: #EAF8FF;
+  /* Light blue for active */
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  color: var(--Gray-700, #344054);
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.left .active-text {
+  overflow: hidden;
+  color: var(--Primary-700, #EAF8FF);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+
+.badge-active {
+  border-radius: 16px;
+  background: var(--Primary-50, #EAF8FF);
+  color: var(--Primary-700, #009BF3);
+  text-align: center;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  mix-blend-mode: multiply;
+}
+
+.badge-normal {
+  color: var(--Gray-700, #344054);
+  text-align: center;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+
+  border-radius: 16px;
+  background: var(--Gray-100, #F2F4F7);
+}
+
+.bg-light-primary {
+  background: #F6FCFF !important;
+}
+
+.card-layer {
+  gap: 16px !important;
+  opacity: 1 !important;
+  padding: 16px !important;
+  border-radius: 16px !important;
+  border-width: 1px !important;
+  background: #FFFFFF;
+  border: 1px solid #EAECF0 !important;
+}
+
+.ticket-container {
+  width: 100%;
+  background: #fff;
+  border-radius: 12px;
+  padding: 0;
+  font-family: "Inter", sans-serif;
+}
+
+.ticket-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  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.4) 0%, rgba(69, 187, 254, 0.2) 100%), #F2F4F7;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+  padding: 16px 20px;
+  font-weight: 600;
+}
+
+.footfall-value {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px;
+  letter-spacing: 0%;
+  vertical-align: middle;
+  color: #101828;
+
+}
+
+
+.issue-date {
+  font-size: 14px;
+  color: #666;
+}
+
+.timeline {
+  width: 1.5px;
+  height: 15px;
+  background: #D0D5DD;
+  margin-left: 33px;
+}
+
+.timeline-new {
+  width: 1px;
+  height: 70px;
+  background: #D0D5DD;
+  margin-left: 30px;
+  font-weight: 600;
+}
+
+.revision-card {
+  background: #fff;
+  border: 1px solid #eaeaea;
+  border-radius: 12px;
+  padding: 0px 20px;
+  // margin: 12px 2px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  // margin-bottom: 15px;
+}
+
+.avatar {
+  width: 42px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 15px;
+  font-size: 14px;
+  color: #1D2939;
+  font-weight: 600;
+}
+
+.user-name {
+  font-size: 13px;
+  color: #555;
+}
+
+.user-email {
+  font-size: 12px;
+  color: #888;
+  margin-top: 2px;
+}
+
+.values-row {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.value-block {
+  min-width: 90px;
+  margin: 10px 0;
+}
+
+.value {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.label {
+  font-size: 14px;
+  color: #1D2939;
+  margin-top: 3px;
+}
+
+/* Accuracy colors + arrows */
+.accuracy {
+  font-size: 18px !important;
+}
+
+.accuracy.up {
+  color: #00A3FF;
+}
+
+.accuracy.down {
+  color: #00A3FF;
+}
+
+.footfall-label {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  vertical-align: middle;
+  color: #344054 !important;
+
+}
+
+.duplicate-layer {
+  gap: 10px;
+  opacity: 1;
+  padding: 16px;
+  border-bottom-width: 1px;
+  border-bottom: 1px solid #F2F4F7;
+  background: #FFFFFF;
+
+}
+
+.layer-approved {
+  border-color: #A6F4C5 !important;
+  /* green border */
+  box-shadow: 0px 0px 0px 2.29px #A6F4C5;
+
+}
+
+/* REJECTED (Red) */
+.layer-rejected {
+  border-color: #FDA29B !important;
+  /* red border */
+  box-shadow: 0px 0px 0px 2.29px #FDA29B;
+
+}
+
+.layers {
+  border-radius: 8px;
+  border-width: 1px;
+  opacity: 1;
+  border: 1px solid #EAECF0;
+  background: #FCFCFD;
+  margin: 12px;
+}
+
+// .btn-primary{
+//   font-size: 13px !important;
+//   padding: 5px 15px !important;
+// }
+
+
+.accordion-header {
+  cursor: pointer;
+}
+
+svg.rotated {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
+.accordion-body {
+  animation: fadeIn 0.25s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ellipsis-underline {
+  max-width: 120px;
+  /* adjust as per design */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: underline;
+  /* underline full text */
+  cursor: pointer;
+  display: inline-block;
+}
+
+table td {
+  line-height: 14px !important;
+}
+
+
+.btn-filter {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  text-transform: capitalize;
+  color: #344054;
+
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, .1);
+}
+
+.filter-card {
+  position: absolute; // or fixed on right side
+  // top: 70px;
+  right: 0px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px 20px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
+  font-size: 13px;
+}
+
+.border-primary-layers {
+  opacity: 1;
+  gap: 12px;
+  padding-bottom: 16px;
+  background: #EAF8FF;
+  border-radius: 8px !important;
+
+  .label-title {
+    opacity: 1;
+    gap: 10px;
+    padding: 8px;
+    border-bottom-right-radius: 8px !important;
+    background: #DAF1FF;
+
+    font-weight: 500 !important;
+    font-size: 18px !important;
+    line-height: 28px !important;
+    letter-spacing: 0%;
+    color: #000000 !important;
+
+  }
+
+  .label-desc {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 28px;
+    letter-spacing: 0%;
+    color: #008EDF !important;
+
+  }
+}
+
+
+.comment-thread {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding-left: 0;
+  /* no border-left */
+}
+
+.comment-thread .avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.comment-thread::before {
+  left: 20px;
+}
+
+/* vertical line */
+.comment-thread::before {
+  content: "";
+  position: absolute;
+  left: 24px;
+  /* ~ center of avatar (tweak based on avatar size) */
+  top: 50px;
+  bottom: 0;
+  width: 1.5px;
+  background-color: #e5e5e5;
+}
+
+/* first item: line starts from middle of avatar (no line above) */
+.comment-thread:first-child::before {
+  top: 30%;
+}
+
+/* last item: line ends at middle of avatar (no line below) */
+.comment-thread:last-child::before {
+  bottom: 20%;
+}
+
+/* make avatar a perfect circle */
+.comment-thread .avatar {
+  width: 48px;
+  /* adjust to your design */
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.comment-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.tango-card {
+  width: 175px;
+  border-radius: 8px;
+  border: 1px solid #e5e5e5;
+  overflow: hidden;
+  background: #fff;
+  // cursor: pointer;
+}
+
+.tango-image {
+  height: 80px;
+  background-size: cover;
+  background-position: center;
+}
+
+.tango-meta {
+  padding: 6px 8px;
+}
+
+.more-card {
+  background: rgba(0, 0, 0, 0.03);
+  font-weight: 600;
+}
+
+.status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-left: 4px;
+}
+
+.status-approve {
+  background: #22c55e;
+  /* green */
+}
+
+.status-reject {
+  background: #ef4444;
+  /* red */
+}
+
+/* page content stays as usual */
+.page-content {
+  padding: 16px;
+}
+
+/* dark-ish transparent background behind card */
+.filter-backdrop {
+  position: fixed;
+  inset: 0;
+  /* top:0 right:0 bottom:0 left:0 */
+  background: rgba(15, 23, 42, 0.25);
+  z-index: 998;
+}
+
+/* container where your filter card (child) is shown */
+.filter-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* centers the card */
+  z-index: 999;
+  /* above backdrop */
+}
+
+/* row */
+.store-item-active {
+  background-color: #EAF8FF;
+}
+
+.store-item {
+  padding: 8px 10px;
+  border-radius: 6px;
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  gap: 12px;
+  opacity: 1;
+}
+
+/* left text */
+.ticket-id {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  color: #1D2939;
+}
+
+.store-name {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  color: #667085;
+}
+
+/* right badge */
+.perc-badge {
+  font-size: 12px;
+  min-width: 48px;
+  text-align: center;
+}
+
+.perc-badge-normal {
+  background-color: #f3f3f3;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  text-align: center;
+  color: #344054;
+}
+
+.perc-badge-active {
+  background-color: #d9ecff;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  text-align: center;
+  color: #009BF3;
+}
+
+.border-selectall {
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: #f7f7f7;
+  /* or whatever you use */
+}
+
+.reviewer-label {
+  font-size: 12px;
+  color: #808080;
+}
+
+.sort-arrow {
+  font-size: 10px;
+  line-height: 1;
+}
+
+.modal-title {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: 0%;
+  color: #1D2939;
+
+}
+
+.test-appvalue {
+  color: #1D2939;
+
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0%;
+
+}
+
+
+.light-primary {
+  background: #eaf8ff !important;
+}
+
+.nav-item .nav-link.active {
+  border: none;
+  border-radius: 6px;
+  background: var(--Primary-50, #EAF8FF);
+  padding: 8px 12px;
+}
+
+.revision-card-approve-closed {
+  /* example: remove bottom radius */
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.ticket-actions-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.icon-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 999px;
+}
+
+.ticket-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin-top: 4px;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
+  min-width: 160px;
+  overflow: hidden;
+  /* so rounded corners clip children */
+  z-index: 1000;
+}
+
+.ticket-menu-item {
+  padding: 8px 16px;
+  font-size: 13px;
+  color: #111827;
+  border-bottom: 1px solid #f3f4f6;
+  cursor: pointer;
+}
+
+.ticket-menu-item:last-child {
+  border-bottom: none;
+}
+
+
+.revision-card-approve {
+  /* example: added bottom radius */
+  border-top: none !important;
+  border: 1px solid #eaeaea !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-left-radius: 12px !important;
+  border-bottom-right-radius: 12px !important;
+}
+
+input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  outline: 1px solid var(--primary-600, #dddddd) !important;
+  background-color: var(--primary-50, #e9e9ea);
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: 0%;
+  color: #1D2939;
+}
+
+.back-ground {
+  background-color: #F9FAFB;
+}
+
+.card-title1 {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 28px;
+  letter-spacing: 0%;
+  color: #1D2939;
+}
+
+.card-sub {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  color: #475467;
+}
+
+.acc-issue {
+  background-color: #EAF8FF;
+}
+
+
+
+.accuracy-panel {
+  background: #eaf6ff;
+  /* pale-blue background */
+  border: 1px solid #d6eefc;
+  /* subtle border */
+  border-radius: 8px;
+  padding: 18px;
+  margin-bottom: 3px;
+}
+
+.accuracy-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.info-line {
+  color: #1f6fb3;
+  margin-bottom: 14px;
+  font-size: 0.95rem;
+}
+
+.form-small {
+  max-width: 400px;
+}
+
+.add-btn {
+  margin-top: 8px;
+}
+
+.panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin-top: 18px;
+}
+
+/* small pill badge look */
+.badge-light-blue {
+  background: rgba(255, 255, 255, 0.85);
+  color: #0d6efd;
+  font-weight: 600;
+}
+
+.daterangepicker {
+  display: block !important;
+  top: 153.85px !important;
+  left: 900px !important;
+  right: 0px;
+}
+
+.form-control {
+  color: var(--Gray-700, #344054) !important;
+  font-size: 14px !important;
+  font-weight: 600;
+  line-height: 20px;
+  text-transform: capitalize;
+}
+
+::ng-deep .applyBtn {
+  display: none !important;
+}
+
+
+
+::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: 365px !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;
+  }
+
+  .md-drppicker table th,
+  .md-drppicker 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;
+  }
+
+  .md-drppicker table th {
+    border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+    background: transparent;
+    color: var(--Gray-700, #344054) !important;
+    text-align: center;
+    font-size: 16px;
+    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 td.available.invalid-date {
+  //     text-decoration: line-through;
+  //     pointer-events: none;
+  //     color: darkgray;
+  // }
+
+  // .md-drppicker td.available.today {
+  //     /* Styles for today if it's valid */
+  //     text-decoration: unset; /* No line-through */
+  //     pointer-events: auto; /* Enable pointer events */
+  //     color: unset; /* Default color */
+  // }
+
+  // .md-drppicker td.available.today.invalid-date {
+  //     /* Styles for today if it's invalid */
+  //     text-decoration: line-through; /* Line-through to indicate invalid */
+  //     pointer-events: none; /* Disable interaction */
+  //     color: darkgray; /* Gray color to indicate invalid */
+  // }
+  .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;
+  }
+}
+
+.custom-table thead tr {
+  background: var(--Gray-50, #F9FAFB) !important;
+  font-size: 12px !important;
+  text-align: start !important;
+}
+
+.more-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.75);
+  z-index: 1;
+}
+
+.more-wrapper {
+  position: relative;
+  z-index: 2;
+  color: #000;
+}
+
+.tango-card.more-card {
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+/* white/blur overlay to make background light */
+.tango-card.more-card .more-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.75);
+  /* adjust opacity as you like */
+}
+
+/* bring the +N text above overlay */
+.tango-card.more-card .more-text {
+  position: relative;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+
+.images-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1050;
+}
+
+.images-modal {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px 20px;
+  max-width: 1000px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.text-underline {
+  text-decoration: underline;
+}