@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
::-webkit-scrollbar {
  width: 8px; /* Width of vertical scrollbar */
  height: 8px; /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Track color */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #d3d1cb; /* Scroll handle color */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #B3B3B3; /* Handle color on hover */
}

/* Chrome, Safari, Edge */
.ph_dark::-webkit-input-placeholder {
  color: hsl(0, 0%, 60%);
  opacity: 1;
}

/* Firefox 19+ */
.ph_dark::-moz-placeholder {
  color: hsl(0, 0%, 60%);
  opacity: 1;
}

/* Chrome, Safari, Edge */
.ph_light::-webkit-input-placeholder {
  color: #e1e1e0;
  opacity: 1;
}

/* Firefox 19+ */
.ph_light::-moz-placeholder {
  color: #e1e1e0;
  opacity: 1;
}

:root {
  /* For Chrome, Safari, Edge, and Opera */
}
:root input[type=number]::-webkit-inner-spin-button,
:root input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:root {
  font-family: "Poppins", sans-serif;
  --hh: 2rem;
  --h1: 1.5rem;
  --h2: 1.25rem;
  --h3: 1.125rem;
  --p: 1rem;
  --p2: 0.875rem;
  --p3: 0.75rem;
  --fw300: 300;
  --fw400: 400;
  --fw500: 500;
  --fw600: 600;
  --fw700: 700;
  --sp2px: 0.125rem;
  --sp4px: 0.25rem;
  --sp8px: 0.5rem;
  --sp12px: 0.75rem;
  --sp16px: 1rem;
  --sp24px: 1.5rem;
  --sp32px: 2rem;
  --text: hsl(0, 0%, 17%);
  --parag: hsl(0, 0%, 25%);
  --s1-text: hsl(0, 0%, 35%);
  --s2-text: hsl(0, 0%, 45%);
  --muted: hsl(0, 0%, 60%);
  --col-bg-dark: hsl(0, 0%, 97%);
  --col-bg: hsl(0, 0%, 96%);
  --col-bg-light: hsl(0, 0%, 100%);
  --col-active-dark: hsl(0, 0%, 90%);
  --col-active: hsl(0, 0%, 93%);
  --col-active-light: hsl(0, 0%, 94%);
  --col-stroke: hsl(0, 0%, 85%);
  --col-greentext-pri: #2a533c;
  --col-green-bg-light: rgba(0, 96, 38, .157);
  --col-defaulttext-pri: #2c2c2b;
  --col-def-bg-light: rgba(42, 28, 0, .07);
  --col-graytext-pri: #494846;
  --col-gry-bg-light: rgba(28, 19, 1, .11);
  --col-browntext-pri: #584437;
  --col-brw-bg-light: rgba(127, 51, 0, .157);
  --col-orangetext-pri: #6a4222;
  --col-org-bg-light: rgba(196, 88, 0, .204);
  --col-yellowtext-pri: #655121;
  --col-ylw-bg-light: rgba(209, 156, 0, .282);
  --col-bluetext-pri: #264a72;
  --col-blu-bg-light: rgba(0, 118, 217, .204);
  --col-purpletext-pri: #553b69;
  --col-prl-bg-light: rgba(92, 0, 163, .14);
  --col-pinktext-pri: #68354e;
  --col-pnk-bg-light: rgba(183, 0, 78, .153);
  --col-redtext-pri: #6d3531;
  --col-red-bg-light: rgba(206, 24, 0, .165);
}

.unsetAll {
  all: unset;
}

.c_pointer {
  cursor: pointer;
}

.d_none {
  display: none;
}

.o_none {
  opacity: 0;
}

.col_text {
  color: var(--text);
}

.col_parag {
  color: var(--parag);
}

.col_s1_text {
  color: var(--s1-text);
}

.col_s2_text {
  color: var(--s2-text);
}

.col_muted {
  color: var(--muted);
}

.svg_stroke_text {
  stroke: var(--text);
}

.svg_stroke_parag {
  stroke: var(--parag);
}

.svg_stroke_s1_text {
  stroke: var(--s1-text);
}

.svg_stroke_s2_text {
  stroke: var(--s2-text);
}

.svg_stroke_muted {
  stroke: var(--muted);
}

.fs12px {
  font-size: var(--p3);
}

.fs14px {
  font-size: var(--p2);
}

.fs16px {
  font-size: var(--p);
}

.fs18px {
  font-size: var(--h3);
}

.fs20px {
  font-size: var(--h2);
}

.fs24px {
  font-size: var(--h1);
}

.fs32px {
  font-size: var(--hh);
}

.fwlight {
  font-weight: var(--fw300);
}

.fwregular {
  font-weight: var(--fw400);
}

.fwmedium {
  font-weight: var(--fw500);
}

.fwsemibold {
  font-weight: var(--fw600);
}

.fwbold {
  font-weight: var(--fw700);
}

.d_flex {
  display: flex;
}

.d_flex_row {
  flex-direction: row;
}

.d_flex_column {
  flex-direction: column;
}

.j_center {
  justify-content: center;
}

.j_between {
  justify-content: space-between;
}

.a_center {
  align-items: center;
}

.lh100 {
  line-height: 100%;
}

.lh1p5 {
  line-height: 1.5;
}

.lh1p5 {
  line-height: 1.2;
}

.bl_left {
  border-left: 1px solid var(--col-stroke);
}

.gp4 {
  gap: var(--sp4px);
}

.gp8 {
  gap: var(--sp8px);
}

.gp12 {
  gap: var(--sp12px);
}

.gp16 {
  gap: var(--sp16px);
}

.gp24 {
  gap: var(--sp24px);
}

.gp32 {
  gap: var(--sp32px);
}

.div_sp2px {
  height: var(--sp2px);
  width: var(--sp2px);
}

.div_sp4px {
  height: var(--sp4px);
  width: var(--sp4px);
}

.div_sp8px {
  height: var(--sp8px);
  width: var(--sp8px);
}

.div_sp12px {
  height: var(--sp12px);
  width: var(--sp12px);
}

.div_sp16px {
  height: var(--sp16px);
  width: var(--sp16px);
}

.div_sp24px {
  height: var(--sp24px);
  width: var(--sp24px);
}

.align_right {
  text-align: right;
}

.section_title .icon_cont1 {
  transform: translateY(6px);
}
.section_title span {
  font-size: var(--hh);
  color: var(--text);
  line-height: 1.2;
  font-weight: 600;
}
.section_title textarea {
  all: unset;
  font-size: var(--hh);
  color: var(--text);
  line-height: 1.2;
  font-weight: 600;
  field-sizing: content;
  overflow: hidden;
  padding: var(--sp4px) 0;
  word-break: break-all;
  width: 100%;
}

.section_description {
  width: 60%;
}
.section_description textarea {
  all: unset;
  font-size: var(--p2);
  color: var(--parag);
  line-height: 1.2;
  font-weight: 400;
  field-sizing: content;
  overflow: hidden;
  padding: var(--sp4px) 0;
  word-break: break-all;
}

.pageTitle {
  display: flex;
  flex-direction: column;
  padding: 0 var(--sp8px);
}
.pageTitle .svg_cont {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
}
.pageTitle textarea {
  all: unset;
  font-size: var(--hh);
  color: var(--text);
  line-height: 1.2;
  font-weight: 600;
  field-sizing: content;
  overflow: hidden;
  padding: var(--sp4px) 0;
  word-break: break-all;
}

.pageDesc {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  width: 70%;
}
.pageDesc textarea {
  all: unset;
  font-size: var(--p2);
  color: var(--parag);
  line-height: 1.5;
  font-weight: 400;
  field-sizing: content;
  overflow: hidden;
  padding: var(--sp4px) 0;
  word-break: break-all;
}

.section_nav button {
  all: unset;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp8px);
  border-radius: var(--sp8px);
  padding: 0 var(--sp8px);
  cursor: pointer;
}
.section_nav button .svg_cont {
  display: flex;
}
.section_nav button .svg_cont svg {
  stroke: var(--s1-text);
}
.section_nav button span {
  font-size: var(--p2);
  color: var(--s2-text);
  font-weight: 600;
}
.section_nav button:hover {
  background-color: var(--col-active);
}
.section_nav .active {
  background-color: var(--col-active-light);
}
.section_nav .active .svg_cont svg {
  stroke: var(--text);
}
.section_nav .active span {
  color: var(--text);
}

.action_btn button {
  all: unset;
  height: 32px;
  width: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-items: center;
  justify-content: center;
  border-radius: var(--sp8px);
  cursor: pointer;
}
.action_btn button .svg_cont {
  display: flex;
}
.action_btn button:hover {
  background-color: var(--col-active);
}
.action_btn input {
  all: unset;
  display: flex;
  height: 32px;
  align-items: center;
  font-size: var(--p3);
  color: var(--text);
}

.main_btn1 .new_button {
  background-color: #2783de;
  height: 32px;
  padding: 0 var(--sp8px) 0 var(--sp8px);
  border-radius: var(--sp8px) 0 0 var(--sp8px);
  cursor: pointer;
}
.main_btn1 .new_button span {
  color: white;
  font-size: var(--p2);
  font-weight: 500;
  line-height: 1.5;
}
.main_btn1 .new_button:hover {
  background-color: #1C6CBA;
}
.main_btn1 .vertLine {
  height: 100%;
  width: 0.5px;
  background-color: #1C6CBA;
}
.main_btn1 .dropdown_templates {
  background-color: #2783de;
  height: 32px;
  padding: 0 var(--sp4px) 0 var(--sp4px);
  border-radius: 0 var(--sp8px) var(--sp8px) 0;
  cursor: pointer;
}
.main_btn1 .dropdown_templates:hover {
  background-color: #1C6CBA;
}

.main_btn button {
  all: unset;
  background-color: #2783de;
  height: 32px;
  border-radius: var(--sp8px);
  padding: 0 var(--sp12px);
  cursor: pointer;
}
.main_btn button span {
  color: white;
  font-size: var(--p2);
  font-weight: 500;
  line-height: 1.2;
}
.main_btn button:hover {
  background-color: #1C6CBA;
}
.main_btn .new_button {
  all: unset;
  background-color: #2783de;
  height: 32px;
}
.main_btn .new_button span {
  color: white;
  font-size: var(--p2);
  font-weight: 500;
  line-height: 1.5;
}
.main_btn .new_button:hover {
  background-color: #1C6CBA;
}

.filters {
  flex-wrap: wrap;
  border-top: 0.5px solid var(--col-stroke);
  padding-top: var(--sp16px);
}
.filters .filter {
  display: flex;
  flex-direction: row;
  height: var(--sp24px);
  align-items: center;
  background-color: #e7f3fb;
  border-radius: var(--sp8px);
  cursor: pointer;
}
.filters .filter .svg_cont {
  display: flex;
}
.filters .filter .svg_fill svg {
  fill: #2783de;
}
.filters .filter .svg_stroke svg {
  stroke: #2783de;
}
.filters .filter .property {
  display: flex;
  align-items: center;
}
.filters .filter .property span {
  font-size: var(--p3);
  font-weight: 600;
  color: #2783de;
}
.filters .filter .property_value {
  display: flex;
  align-items: center;
}
.filters .filter .property_value span {
  font-size: var(--p3);
  font-weight: 400;
  color: #2783de;
}
.filters .filter .leading_svg_cont {
  display: flex;
}
.filters .filter .leading_svg_cont svg {
  stroke: #2783de;
}
.filters .filter:hover {
  background-color: #D3E9F8;
}
.filters .add_filter_button button {
  all: unset;
  height: var(--sp24px);
  border-radius: var(--sp8px);
  display: flex;
  flex-direction: row;
  gap: var(--sp4px);
  align-items: center;
  padding: 0 var(--sp4px);
  cursor: pointer;
}
.filters .add_filter_button button .svg_cont {
  display: flex;
}
.filters .add_filter_button button .svg_cont svg {
  stroke: var(--muted);
}
.filters .add_filter_button button span {
  font-size: var(--p2);
  color: var(--muted);
}
.filters .add_filter_button button:hover {
  background-color: var(--col-active);
}

/* Spinner styling */
.spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.dot {
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
  animation: jump 0.6s infinite ease-in-out;
}

/* Delay each dot for staggered effect */
.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Jump animation */
@keyframes jump {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-2px);
  }
}/*# sourceMappingURL=root-app.css.map */