@import url("./assets/theme.css");
@import url("./assets/sccoreui.css");
@import url("./assets/sccoreicons.css");
@import url("./assets/flex.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");

:root {
  --fw-600: 600;
  --fw-400: 400;
  --fs-24: 24px;
  --fs-18: 18px;
  --fs-16: 16px;
  --lh: 24px;
  --fs-14: 14px;
  --grey-bg: #101828;
  --border-none: border-none;
}

// @font-face {
//   font-family: "Lato";
//   src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
// }

// @font-face {
//   font-family: "Lato-600";
//   font-weight: 600;
//   src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
// }

// * {
//   padding: 0;
//   margin: 0;
// }

body {
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--lh);
  padding: 0;
  margin: 0;
}

code {
  font-family: "Lato", sans-serif;
}

h1 {
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
}

h2 {
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
}

h3 {
  font-size: var(--fs-16);
  font-weight: var(--fw-400);
}

.p-multiselect {
  .p-multiselect-header {
    .p-multiselect-close {
      display: none !important;
    }
  }
  .p-multiselect-items {
    .p-multiselect-item {
      border-radius: 4px !important;
    }
  }
}

.p-multiselect-items-wrapper {
  .p-multiselect-item.p-highlight {
    &::after {
      content: url("../assets/png/checkmark_icon.png");
      position: absolute;
      top: 48%;
      right: 8px;
      transform: translateY(-50%);
    }
  }
}

// ============= custom progress steps ===============  //

.progress-container {
  isolation: isolate;

  &::before {
    content: "";
    background-color: var(--gray-200);
    position: absolute;
    z-index: -1;
  }

  &.horizontal::before {
    height: 2px;
    width: 100%;
    top: 11%;
  }

  &.vertical::before {
    height: 100%;
    width: 2px;
    left: 5%;
    top: 0;
  }
}

.progressbar {
  z-index: -1;
  transition: all 0.6s ease;

  &.horizontal {
    left: 0;
    height: 2px;
    top: 11%;
  }

  &.vertical {
    width: 2px;
    left: 5%;
    top: 0;
  }
}

.progress-step-item {
  &.horizontal {
    // transform: translateX(10%);

    &:nth-of-type(1) {
      transform: translateX(-50%);
    }

    &:last-child {
      transform: translateX(50%);
    }
  }

  &.vertical {
    transform: translateY(50%);

    &:nth-of-type(1) {
      transform: translateY(-5%);
    }

    &:last-child {
      transform: translateY(100%);
    }
  }
}