@import "./campaignCommon.scss";

.summary-header {
  @include typography-text-heading-l;
  font-size: 2.25rem;
  margin-bottom: 1.5rem !important;
  color: var(--digitv2-lightTheme-primary-2);
}
.date-field-container {
  display: grid;
  grid-template-columns: 20rem 20rem;
  grid-gap: 1.5rem;
  width: 70%;
  padding-top: 0.3rem;
  margin-top: 0rem;
}
.date-field {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
}
.campaign-type {
  margin-top: 0.8rem;
  margin-right: 5rem;
  padding-bottom: 1.2rem;
  font-weight: bold;
}
.name-container {
  margin-top: 0.8rem;
  margin-right: 4rem;
  font-weight: bold;
  text-wrap: nowrap;
}
.beneficiary-type {
  margin-right: 5.4rem;
  font-weight: bold;
}
.campaign-dates {
  display: flex;
  font-weight: bold;
}
.mandatory-date {
  color: var(--digitv2-lightTheme-error-v2) !important;
  font-size: 1rem;
  font-weight: 700;
}
.description-type {
  margin-top: 0rem;
  margin-bottom: 0rem;
}
.name-description {
  margin: 0rem;
  color: var(--digitv2-lightTheme-text-color-secondary);
}
.dates-description {
  margin: 0rem;
  color: var(--digitv2-lightTheme-text-color-secondary);
}
.selecting-boundary-div {
  padding-top: 0.5rem;
  .label-field-pair {
    margin-bottom: 1.5rem;
  }
}
.campaign-table {
  border-collapse: collapse;
  border-color: transparent;
  border-width: 0rem 1.5rem;
  tbody {
    tr:hover {
      td {
        background: rgba(#f47738, 0.12);
        cursor: pointer;
      }
    }
  }
}
.info-points {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.infoClass {
  margin-bottom: 1.5rem;
}
.headerWrapperClassName {
  display: none;
}
.whoLogo {
  margin-top: -1rem;
  margin-bottom: -1rem;
}

.digit-popup-wrapper {
  &.popUpClass {
    width: 50rem;

    .popUpFooter {
      .digit-popup-footer-buttons {
        margin-left: 0px;
        width: 100%;

        button {
          flex: 1;
        }
      }
    }
  }
}
.timeline-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setup-campaign {
  .digit-success {
    z-index: 1000;
  }
}
.digit-error {
  z-index: 900;
}
.timeline-user {
  display: flex;
  justify-content: space-between;
}
.upcoming-timeline {
  .timeline-label {
    color: #b1b4b6;
  }
}
.container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: stretch;
}
.stepper-card {
  height: 37rem;
  padding-top: 0rem;
}
.stepper-subheader {
  color: var(--digitv2-lightTheme-header-sidenav);
}
.container-full {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: stretch;
  height: 100%;
}
.name-container-label {
  .label-field-wrapper {
    width: -webkit-fill-available;
  }
}
.label-field-grid {
  display: grid;
  grid-template-columns: 20rem 20rem 20rem;
  gap: 2rem;

  .update-date-labelField {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;

    .update-label {
      display: flex;

      p {
        margin: 0;
        margin-bottom: 1rem;
      }

      .mandatory-date {
        margin-top: -0.25rem;
      }
    }
  }

  .digit-button-primary {
    align-self: flex-end;
  }
}

.hierarchy-boundary-heading {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: "Roboto Condensed", sans-serif;
}

.hierarchy-boundary-sub-heading {
  width: 20rem;
  margin-top: 0.6rem;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
}

.hierarchy-boundary-sub-heading2 {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
}
.campaign-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-container1 {
  width: 100%;
}
.campaign-tag {
  .digit-tag-text {
    color: #0057bd !important;
  }
  background-color: #eff8ff !important;
  border-color: #0057bd !important;
}
.digit-popup-wrapper.dataMapping {
  .digit-popup-children-wrap {
    overflow: visible;
  }
}
.dataMappingCard {
  overflow-y: scroll;
  margin-top: 0rem;
}
.dataMappingDropdown {
  min-width: 13rem !important;
}
.data-mapping-filter-switch {
  float: right;
  margin-right: 0rem;
  margin-bottom: 0rem;
}
.digit-label-field-pair.multiselect-label-field {
  > div:nth-of-type(1) {
    width: 69%;
  }
}

.date-style {
  max-width: 37.5rem;
  display: flex;
  gap: 1rem;
}

.app-preview {
  display: flex;
  width: 29rem;
  height: calc(100vh - 22rem);

  overflow-y: auto;
  border: 1px solid var(--digitv2-lightTheme-primary);
  border-radius: 1rem;
  background-color: white;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  margin: 5px auto; /* updated margin since we added page no */
  font-family: Arial, sans-serif;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #d6d5d4 #fafafa; /* Firefox */

  &::-webkit-scrollbar {
    width: 5px;
    background: #fafafa;
  }

  &::-webkit-scrollbar-thumb {
    background: #d6d5d4;
    border-radius: 8px;
    min-height: 40px;
  }

  &::-webkit-scrollbar-track {
    background: #fafafa;
    border-radius: 8px;
  }

  &::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  .digit-card-component {
    height: max-content;

    .digit-description {
      .digit-card-text {
        margin-bottom: 0rem;
      }
    }
  }

  .digit-card-header {
    color: #0b4b66;
    font-size: 2rem;
    font-weight: 700;
  }

  .digit-card-text {
    color: #787878;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 137%;
  }

  .app-card {
    gap: 0.5rem;
    box-shadow: none;
    border-style: none;
    padding: 1rem;
    overflow-y: auto !important;
    overflow-y: overlay !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d6d5d4 transparent !important;

    &::-webkit-scrollbar {
      width: 8px !important;
      background: transparent !important;
    }

    &::-webkit-scrollbar-track {
      background: transparent !important;
    }

    &::-webkit-scrollbar-thumb {
      background: #d6d5d4 !important;
      border-radius: 4px !important;
    }
  }
}
.app-card {
  flex-direction: column;
  display: flex;
  gap: 0.5rem;
  box-shadow: none;
  border-style: none;
  padding: 1rem;

  .digit-card-header {
    font-size: 2rem;
  }
}

// ===============================================
// Template Field Wrapper Styles (Mobile Preview)
// ===============================================

.template-field-wrapper {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  transition: all 0.2s ease;
  display: flex;

  &.selected {
    border-color: #C84C0E;
    background-color: #C84C0E08;
  }

  &.menuCardIconTemplate{
    width: fit-content;
  }

  .app-config-summary-card-fieldpair{
    .digit-viewcard-label{
      width: 100% !important;
    }
  }
}

.template-field-fallback {
  background: #fafafa;
  color: #999;
  font-style: italic;
  border: 1px dashed #ccc;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.app-card.template-layout-card {
  overflow-y: auto !important;
  overflow-y: overlay !important;
  scrollbar-width: thin !important;
  scrollbar-color: #d6d5d4 transparent !important;

  &::-webkit-scrollbar {
    width: 8px !important;
    background: transparent !important;
  }

  &::-webkit-scrollbar-track {
    background: transparent !important;
  }

  &::-webkit-scrollbar-thumb {
    background: #d6d5d4 !important;
    border-radius: 4px !important;
  }
}
.app-preview-card {
  overflow-y: auto !important;
  overflow-y: overlay !important;
  scrollbar-width: thin !important;
  scrollbar-color: #d6d5d4 transparent !important; /* thumb color, track color */

  &::-webkit-scrollbar {
    width: 8px !important;
    background: transparent !important;
  }

  &::-webkit-scrollbar-track {
    background: transparent !important; /* track background - transparent */
  }

  &::-webkit-scrollbar-thumb {
    background: #d6d5d4 !important; /* thumb color */
    border-radius: 4px !important;
  }
}
.mobile-bezel-outerWrapper {
  margin: 0.5rem 0;
}

.app-config-tag-page-fixed {
  position: fixed;
  top: 15rem;
  left: 67rem;
  color: var(--digitv2-lightTheme-primary-2);
  font-family: var(--digitv2-fontFamily-rc);
  font-weight: 700;
}
.mobile-top {
  background-color: var(--digitv2-lightTheme-header-sidenav);
  height: 4rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  color: var(--digitv2-lightTheme-paper);
  font-size: 1.5rem;
  font-weight: var(--digitv2-fontWeight-bold);
  width: 100%;
  /* Full width */
  box-sizing: border-box;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.app-config-field-wrapper{
  width: 100%;
}
.appConfiglabelField {
  position: relative;
  padding: 0.75rem;
  background-color: #eee;
  border: 1px solid #d6d5d4;
  border-radius: 0.5rem;
}
.appConfiglabelField.selected {
  background-color: #f477381a;
  border: 1px solid var(--digitv2-lightTheme-primary);
}
.appConfig-flow-stepper {
  margin-top: 2rem;
}
.app-config-add-section {
  margin-inline: auto;
  margin-top: 2rem;
  margin-bottom: 5rem;
}
.appConfigScreenCard {
  margin-bottom: 2rem;
}
.appConfiglabelField-label {
  width: 25rem;
  margin-bottom: 0.5rem;
}
.app-config-actionBar {
  z-index: 9999;
}

.digit-popup-wrapper.custom-pop-up-mapping {
  max-width: 35rem;

  .digit-popup-footer {
    padding-top: 0 !important;

    .digit-popup-footer-buttons {
      width: 100% !important;
      display: grid;
      grid-template-columns: 1fr 1fr;

      .digit-button-secondary {
        width: 100%;
      }

      .digit-button-primary {
        width: 100%;
      }
    }
  }

  .digit-popup-children-wrap {
    padding-top: 0 !important;
    overflow: visible;
  }
}
.rdt_TableBody {
  border: 1px solid #ccc !important;
  width: 100% !important;
}
.rdt_Table {
  width: 100% !important;
}
.campaign-header-style {
  color: var(--digitv2-lightTheme-primary-2);
  font-size: 2.5rem;
}
.campaign-header-module-style {
  color: var(--digitv2-lightTheme-primary-2);
  font-size: 2.5rem;
  margin-bottom: 1rem !important;
}
.SubHeadingClass {
  color: var(--digitv2-lightTheme-text-color-secondary);
  font-weight: 400;
  font-size: 1rem;
}
.date-header {
  width: 100% !important;
  color: var(--digitv2-lightTheme-primary-2);
  font-weight: 700;
  font-size: 40px;
  padding-bottom: 0.5rem;
}
.descStyle {
  font-family: "Roboto";
  font-weight: 500;
  font-size: 20px;
  color: var(--digitv2-lightTheme-primary);
  text-align: center;
  font-style: Medium;
  .disabledText {
    color: #c5c5c5;
  }
}
.containerStyle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
@media (max-width: 1200px) {
  .containerStyle {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .containerStyle {
    grid-template-columns: 1fr;
  }
}

.cardStyle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 158px;
  border: 1.5px solid var(--digitv2-lightTheme-primary);
  border-radius: 12px;
  cursor: pointer;
  flex-direction: column;
  text-align: center;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  background-color: #ffffff;
  gap: 24px;
  padding: 24px;
  box-shadow: 0px 2px 7px 0px #00000026;

  svg {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
  }
}
.cardStyle:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.disabledCard {
  cursor: not-allowed;
  border: 1.5px solid #c5c5c5;
  .descStyle {
    color: #c5c5c5;
  }
  svg {
    fill: var(--digitv2-lightTheme-text-color-secondary);
  }
}

.app-config-radio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.create-campaign-card {
  gap: 0;
  grid-gap: 0;
}
.details-heading {
  display: flex;
  justify-content: space-between;
}
.icon-heading {
  gap: 1rem;
  display: flex;
  align-items: center;
}
.detail-desc {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--digitv2-lightTheme-text-color-secondary);
}
.dates {
  margin-top: 0.5rem;
  color: var(--digitv2-lightTheme-text-color-secondary);
  font-family: var(--digitv2-fontFamily-sans);
  font-size: var(--digitv2-fontSize-heading-s);
}
.detail-header {
  font-size: var(--digitv2-fontSize-heading-m);
  color: var(--digitv2-lightTheme-primary-2);
  font-family: "roboto";
}
.details-desc {
  color: var(--digitv2-lightTheme-text-color-secondary);
  font-family: var(--digitv2-fontFamily-sans);
  font-size: var(--digitv2-fontSize-heading-s);
}
.campaign-details-header {
  display: flex;
  justify-content: space-between;
}
.campaign-view-tag {
  margin-left: 1rem;
  height: fit-content;
}

.module-card {
  /* width: 21rem; */ /* Removed fixed width so grid 1fr can control card sizing */
  height: 20rem;
  border: 1px;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.modules-container {
  /* display: flex; */ /* Switched from flex to grid to eliminate right-side gap */
  /* flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  padding-left: 0rem;
  padding: 1rem;
  padding-left: 0rem;
}

.modules-feature-container {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1rem;
}
.campaign-module-button {
  width: auto;
}
.date-selection {
  width: 100% !important;
}
.beneficiary-selection-label {
  margin-bottom: 0rem;
}
.selected-card {
  border: 2px solid #f47738;
  background-color: #fef1e4;
  position: relative;
}
.selected-header {
  color: var(--digitv2-lightTheme-primary);
}

.hcm-app-features {
  .digit-toggle-toolbar {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    max-width: 90%;
    > *:first-child label {
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
    }
    > *:last-child label {
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
    }
  }
}

.digit-toggle-toolbar {
  &.app-config-tab {
    width: 10rem;
    top: 15rem;
    position: fixed;
    .toggle-option-container {
      .digit-toggle-btn-wrap {
        height: 7.5rem;
      }
    }
    > *:first-child label {
      border-top-left-radius: 0.5rem;
    }
    > *:last-child label {
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
    }
  }
}
.module-description {
  flex-grow: 1;
  margin: 0 0 1rem 0;
  font-family: var(--digitv2-fontFamily-sans);
  font-size: var(--digitv2-fontSize-heading-s);
  color: var(--digitv2-lightTheme-text-color-secondary);
  overflow-wrap: break-word;
}
.name-container-popUp {
  margin-top: 0.8rem;
  font-weight: bold;
  text-wrap: nowrap;
  width: 33%;
}
.date-container-popUp {
  margin-top: 0.8rem;
  font-weight: bold;
  text-wrap: nowrap;
  width: 33%;
}
.pop-display {
  display: flex;
  margin-top: 1.5rem;
}
.popUp-header {
  margin-bottom: 1.5rem;
}
.end-date-container-popUp {
  margin-top: 0.8rem;
  font-weight: bold;
  text-wrap: nowrap;
  width: 33%;
}

.app-config-version-tags {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: fit-content;
  padding: 0;
  margin: 0;
  margin-left: 54rem;
  margin-bottom: -3.5rem;
  color: var(--digitv2-lightTheme-primary-2);
  font-family: var(--digitv2-fontFamily-rc);
  font-size: var(--digitv2-fontSize-heading-s);
  font-weight: 700;

  .app-config-placeholder-version-tag {
    width: 30%;
  }
  .app-config-version-tag {
    width: 40%;
  }
}

.version-tag {
  .digit-tag-text {
    font-size: 0.75rem;
  }
}

.logic-rule-number {
  word-break: break-word;
  white-space: normal;
  font-family: var(--digitv2-fontFamily-sans);
  font-style: var(--digitv2-fontStyle-normal);
  font-weight: var(--digitv2-fontWeight-regular);
  color: var(--digitv2-lightTheme-text-color-secondary);
  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: var(--digitv2-fontSize-body-xs-mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: var(--digitv2-fontSize-body-xs-tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: var(--digitv2-fontSize-body-xs-desktop);
  }
}
.content-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}

.content-group.no-border {
  border-bottom: none;
  padding-bottom: 0rem;
  margin-bottom: 0rem;
}

.content-icon {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: contain;
  margin-top: 4px;
  flex-shrink: 0;
}

.content-text-block {
  display: flex;
  flex-direction: column;
}

.content-bold-text {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 4px;
  color: var(--digitv2-lightTheme-primary-2);
}

.content-regular-text {
  font-size: var(--digitv2-fontSize-heading-s);
  color: var(--digitv2-lightTheme-text-color-secondary);
}

/* Fallback text group */
.text-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.bold-text {
  font-weight: bold;
  margin: 0;
}

.regular-text {
  margin: 0;
}

.paragraph-text {
  margin-bottom: 12px;
}

.image-block {
  margin: 10px 0;
}

.responsive-image {
  max-width: 100%;
  height: auto;
}

.list-block {
  padding-left: 20px;
  margin-bottom: 12px;
}
.campaign-requirements-heading {
  .digit-popup-icon-header-container {
    .digit-popup-heading-subheading-wrap {
      .digit-popup-heading {
        color: var(--digitv2-lightTheme-primary-2);
      }
    }
  }
}

.cycleBold {
  font-weight: 700;
}

.feature-container {
  display: flex;
}
.app-config {
  width: auto;
}

.QR-pop-up {
  width: fit-content;
}
.app-config-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 24rem;
  margin-left: unquote("min(10%, 12rem)");
  gap: 2rem;
  width: fit-content;
  align-items: flex-end;
}
.feature-container {
  display: flex;
}
.app-config {
  width: auto;
  margin-top: 1rem;
  .toggle-option-container {
    height: 7.5rem;
  }
}
.progress-popup {
  .digit-popup-close {
    display: none !important;
  }
}
.update-boundary-header {
  color: var(--digitv2-lightTheme-primary-2);
  font-size: var(--digitv2-fontSize-heading-xl-desktop);
  white-space: nowrap;
}
.select-boundary {
  color: var(--digitv2-lightTheme-primary-2) !important;
}
.select-boundary-screen-heading ,
.cycle-configuration-heading,
.add-new-resource{
  font-family: var(--digitv2-fontFamily-rc);
  font-weight: var(--digitv2-fontWeight-bold);
  font-style: Bold;
  font-size: var(--digitv2-fontSize-heading-xl-desktop);
  color: var(--digitv2-lightTheme-primary-2) !important;
}

.appConfigLabelField-toggleVisibility {
  position: absolute;
  cursor: pointer;
  top: 1rem;
  right: 1rem;
}
.dynamic-image-component {
  max-width: 100%;
  margin-bottom: -2.5rem;
}
.start-header {
  color: var(--digitv2-lightTheme-primary-2) !important;
}
.digit-loader-new.Overlayloader.loader-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.deliveries-pop-module {
  max-width: fit-content;
}
.campaign-name-container {
  display: ruby !important;
}
.campaign-name-code {
  margin-left: 0.5rem !important;
}
.clonecampaign-popup-field {
  .label-container {
    font-weight: 700;
  }
}
.digit-loader-new.center {
  justify-content: center;
  align-self: start;
  width: 100%;
}

.details-heading {
  .campaign-home-card-header{
    font-family: "Roboto";
    font-weight: var(--digitv2-fontWeight-bold);
    font-style: Bold;
    font-size: var(--digitv2-fontSize-heading-m-desktop);
    display: flex;
    align-items: center;
  }
}
.digit-campaign-home-card {
  display: flex;
  justify-content: flex-start;
  min-width: 31.25rem;
  max-width: 100%;
  flex: 1;
  border: 0.094rem solid #d6d5d4;
  border-radius: 0.75rem;
  cursor: pointer;
  flex-direction: column;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  gap: 1rem;
  padding: 1rem;
  box-shadow: 0rem 0.125rem 0.25rem 0rem #C84C0E26;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;

  &:hover {
    transform: translateY(-12px);
    border: 0.094rem solid var(--Primary-1, #C84C0E);
    box-shadow: 0rem 0.125rem 0.419rem 0rem #00000033;
  }

  .digit-campaign-home-icon {
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: #FBEEE8;
  }

  svg {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
  }

  .digit-campaign-home-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .digit-campaign-home-text-header {
      font-family: var(--digitv2-fontFamily-sans);
      font-weight: var(--digitv2-fontWeight-bold);
      font-style: Bold;
      font-size: 1.5rem;
      color: var(--digitv2-lightTheme-primary-2);

    }

    .digit-campaign-home-text-description {
      font-family: var(--digitv2-fontFamily-sans);
      font-weight: var(--digitv2-fontWeight-regular);
      font-style: Regular;
      font-size: 0.875rem;
      color: var(--digitv2-lightTheme-text-secondary);

    }
  }

  .digit-campaign-home-card-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #F5F2F2;
    padding: 0.5rem;
    border-radius: 0.5rem;

    svg {
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
    }

    .digit-campaign-home-card-count-text {
      font-family: "Roboto";
      font-weight: var(--digitv2-fontWeight-bold);
      font-style: Bold;
      font-size: 0.875rem;
      color: #0B4B66
    }
  }
}

.digit-nested-category:not(:first-child) {
  margin-top: 0rem;
}

.language-button-container {
  button {
    border-radius: 0.5rem;
  }
}

.digit-campaign-home-card-wrapper {
  background-color: transparent;
  box-shadow: none;
  gap: 1.5rem;
  padding: 0rem;
}

.employeeCard {
  border-radius: 0.75rem;
}

.digit-button-primary,
.digit-button-secondary {
  &.small {
    h2 {
      line-height: normal;
    }
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

.campaign-name-validation-container {
  width: 100%;
  padding: 1rem;
  background-color: #f7fafc;
  border: 1px solid #d6d5d4;
  border-radius: 0.5rem;

  .validation-header {
    margin-bottom: 1rem;

    .validation-title {
      font-family: var(--digitv2-fontFamily-sans);
      font-weight: var(--digitv2-fontWeight-bold);
      font-size: 1rem;
      color: var(--digitv2-lightTheme-primary-2);
    }
  }

  .validation-rules-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .validation-rule-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0rem;
    transition: all 0.2s ease-in-out;

    .validation-icon {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .validation-text {
      font-family: var(--digitv2-fontFamily-sans);
      font-size: 0.875rem;
      line-height: 1.4;
      color: var(--digitv2-lightTheme-text-color-secondary);
      transition: color 0.2s ease-in-out;
    }

    &.rule-valid {
      .validation-icon svg {
        fill: #00703C;
      }
      .validation-text {
        color: #00703C;
      }
    }

    &.rule-invalid {
      .validation-icon svg {
        fill: #D4351C;
      }
      .validation-text {
        color: #D4351C;
        font-weight: var(--digitv2-fontWeight-bold);
      }
    }

    &.rule-neutral {
      .validation-icon svg {
        fill: #787878;
      }
      .validation-text {
        color: var(--digitv2-lightTheme-text-color-secondary);
      }
    }
  }

  .validation-success-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(0, 112, 60, 0.1);
    border-radius: 0.5rem;
    margin-top: 1rem;

    svg {
      flex-shrink: 0;
    }

    .success-text {
      font-family: var(--digitv2-fontFamily-sans);
      font-size: 0.875rem;
      font-weight: 500;
      color: #00703C;
    }
  }
}

@media (max-width: 768px) {
  .campaign-name-validation-container {
    padding: 0.75rem;

    .validation-rule-item {
      padding: 0.375rem 0;

      .validation-text {
        font-size: 0.8125rem;
      }
    }

    .validation-success-banner {
      padding: 0.5rem 0.75rem;

      .success-text {
        font-size: 0.8125rem;
      }
    }
  }
}
.digit-infobanner-wrap .additional-elements-column .individualElement {
  .digit-button-secondary {
    &.alert-card-error-button {
      .icon-label-container {
        h2 {
          color: var(--digitv2-lightTheme-primary) !important;
        }
      }
    }
  }
}

.digit-popup-footer{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.select-hierarchy-campaign-selection-cards-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;

  .select-hierarchy-campaign-selection-card {
    border-radius: 16px;
    cursor: pointer;
    background-color: #FFFFFF;
    transition: background-color 0.15s ease;
    min-height: 300px;
    box-shadow: 0px 2px 7px 0px #00000026;


    .select-hierarchy-campaign-selection-card-name-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .select-hierarchy-campaign-selection-card-name {
      font-family: var(--digitv2-fontFamily-sans);
      font-style: var(--digitv2-fontStyle-normal);
      font-weight: var(--digitv2-fontWeight-bold);
      color: #0B4B66;

      @media (max-aspect-ratio: 9/16) {
        /* Media query for mobile */
        font-size: var(--digitv2-fontSize-heading-m-mobile);
      }

      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        font-size: var(--digitv2-fontSize-heading-m-tablet);
      }

      @media (min-aspect-ratio: 3/4) {
        /* Media query for desktop */
        font-size: var(--digitv2-fontSize-heading-m-desktop);
      }
    }

    &:active {
      border: none !important;
    }

    &:hover {
      box-shadow: 0px 2px 7.6px 0px #00000033;
      background-color: #FEEFE7;
      border: 2px solid #C84C0E;
    }

    &.selected {
      background-color: #BAD6C9;
      border: 2px solid #00703C;
      box-shadow: 0px 2px 7px 0px #00000026;
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
      box-shadow: none;
    }
  }
}

.select-hierarchy-campaign-selection-card-level-wrap {
  display: flex;
  border: 1px solid #D6D5D4;
  border-radius: 6px;
  overflow: hidden;
  height: 38px;
  background-color: #FAFAFA;
}

.select-hierarchy-campaign-selection-card-level-name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-right: 1px solid #D6D5D4;
  color: #787878;
  min-width: 44px;
  flex-shrink: 0;
  font-family: var(--digitv2-fontFamily-sans);
  font-style: var(--digitv2-fontStyle-normal);
  font-weight: var(--digitv2-fontWeight-bold);

  @media (max-aspect-ratio: 9/16) {
    font-size: var(--digitv2-fontSize-heading-s-mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    font-size: var(--digitv2-fontSize-heading-s-tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    font-size: var(--digitv2-fontSize-heading-s-desktop);
  }
}

.select-hierarchy-campaign-selection-card-level-name-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  flex: 1;
  color: #0B4B66;
  font-family: var(--digitv2-fontFamily-sans);
  font-style: var(--digitv2-fontStyle-normal);
  font-weight: var(--digitv2-fontWeight-regular);

  @media (max-aspect-ratio: 9/16) {
    font-size: var(--digitv2-fontSize-body-s-mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    font-size: var(--digitv2-fontSize-body-s-tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    font-size: var(--digitv2-fontSize-body-s-desktop);
  }
}

.select-hierarchy-search-wrap {
  width: 100%;
  max-width: 37.5rem;
  .select-hierarchy-search-label {
    font-family: var(--digitv2-fontFamily-sans);
    font-weight: var(--digitv2-fontWeight-regular);
    font-size: 1rem;
    color: #363636;
  }
}

.select-hierarchy-view-more-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.hierarchy-view-all-levels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.digit-popup-wrapper.hierarchy-view-all-popup {
  width: 23rem;
  .digit-popup-heading{
    margin-right: 48px;
    line-height: 1 !important;
  }
}

.reports-configuration {
  &__heading {
    font-family: var(--digitv2-fontFamily-rc);
    font-weight: var(--digitv2-fontWeight-bold);
    font-style: Bold;
    font-size: var(--digitv2-fontSize-heading-xl-desktop);
    color: var(--digitv2-lightTheme-primary-2) !important;
  }

  &__description {
    margin: 0rem;
    color: var(--digitv2-lightTheme-text-color-secondary);
  }

  &__count {
    font-weight: 700;
    font-size: 0.875rem;
  }

  &__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  &__checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &--disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__not-applicable {
    font-size: 0.75rem;
    color: var(--digitv2-lightTheme-text-secondary);
    font-style: italic;
  }

  &__frequency-card {
    padding: 0rem;
  }

  &__frequency-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    flex-wrap: wrap;

    &--bordered {
      border-bottom: 1px solid var(--digitv2-lightTheme-generic-divider);
    }
  }

  &__frequency-row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  &__frequency-row-label {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
  }

  &__frequency-row-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;

    .reports-frequency-dropdown {
      min-width: 20rem;
      margin-bottom: 0rem;
    }
  }

  &__custom-dates {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
  }
}

.digit-frequency-selection-filter{
  .digit-multiselectdropdown-wrap{
    margin: 0rem;
  }

  .digit-tag-container{
    margin-bottom: 0rem;
  }
}

.reports-configuration__custom-dates{
  margin: 0rem;

  .digit-header-content{
    &.label{
      width: 100% !important;
    }
  }
}

.map-users-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: 2.5rem;
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.16);
  display: flex;
  justify-content: flex-start;
  z-index: 500;
}

.select-hierarchy-step-card{
  background-color: transparent !important;
  box-shadow: none !important;
}

.select-hierarchy-step-card-header-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .date-selection{
    line-height: normal;
  }
}

.hierarchy-change-popup{
  max-width: 35% !important;
  .digit-popup-alert-heading{
    color: #0B4B66 !important;
  }
  .digit-popup-children-wrap{
    padding: 0px !important;
    display: none;
  }
}

.setup-campaign {
  .digit-field {
    &.select-hierarchy-search-bar-field {
      margin-bottom: 1rem !important;
    }
  }
}

.select-hierarchy-search-bar {
  .digit-cursor-pointer {
    right: 8px !important;
  }
}

.validation-alert-card {
  margin: 0rem !important;
  .icon-label-container{
    height: unset;
    min-height: unset;
  }
}