@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");
: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;
  --h1: 1.5rem;
  --h2: 1.25rem;
  --h3: 1.125rem;
  --p: 1rem;
  --p2: 0.875rem;
  --p3: 0.75rem;
  --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;
  --bg-costom: hsl(225, 80%, 98%);
  --bg-dark: hsl(0, 0%, 90%);
  --bg: hsl(0, 0%, 95%);
  --bg-light: hsl(0, 0%, 100%);
  --bg-light1: hsl(0, 0%, 98%);
  --text: hsl(0, 0%, 5%);
  --muted: hsl(0, 0%, 70%);
  --bl: hsl(0, 0%, 70%);
  --bl1: hsl(0, 0%, 20%);
  --bl-light: hsl(0, 0%, 90%);
  --ba-bg1: hsl(233, 70%, 95%);
  --fc-bg1: hsl(233, 70%, 45%);
  --bg-costom1: hsl(0, 0%, 40%);
  --col-main: hsl(221,83%,53%);
  --col-main-bg: hsl(221,83%,95%);
  --col-main-bg-hover: hsl(221,83%,50%);
  --col-dg-bg: hsl(0,86%,97%);
  --col-dg-txt: hsl(358,78%,52%);
  --col-gn-bg: hsl(145,80%,97%);
  --col-gn-txt: hsl(145,80%,30%);
  --col-yl-bg: hsl(51,80%,97%);
  --col-yl-txt: hsl(51,80%,30%);
}

.clgreen {
  color: var(--col-gn-txt);
}

.clyellow {
  color: var(--col-yl-txt);
}

.cldark {
  color: var(--bg-dark);
}

.clbg {
  color: var(--bg);
}

.cllight {
  color: var(--bg-light);
}

.clmain {
  color: var(--col-main);
}

.clcostom1 {
  color: var(--bg-costom1);
}

.c_pointer {
  cursor: pointer;
}

.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);
}

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

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

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

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

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

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

.fcolormainfc {
  color: var(--fc-bg1);
}

.pd4 {
  padding: var(--sp4px);
}

.pd8 {
  padding: var(--sp8px);
}

.pd12 {
  padding: var(--sp12px);
}

.pd16 {
  padding: var(--sp16px);
}

.pd24 {
  padding: var(--sp24px);
}

.pd32 {
  padding: var(--sp32px);
}

.pdtop {
  padding-top: 2px;
}

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

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

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

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

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

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

.d_flex {
  display: flex;
}

.d_flex_row {
  flex-direction: row;
}

.d_flex_column {
  flex-direction: column;
}

.j_center {
  justify-content: center;
}

.a_center {
  align-items: center;
}

.d_none {
  display: none;
}

.o_none {
  opacity: 0;
}

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

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

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

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

.val_highlight {
  padding: var(--sp2px) var(--sp8px);
  border-radius: var(--sp4px);
  background-color: var(--col-main-bg);
}

.button_secondary {
  padding: var(--sp2px) var(--sp8px);
  border: 1px solid var(--bl);
  border-radius: var(--sp4px);
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  cursor: pointer;
}
.button_secondary:hover {
  background-color: var(--bg);
}

.button_second_main {
  all: unset;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--sp8px) var(--sp16px);
  border-radius: var(--sp8px);
  cursor: pointer;
  gap: var(--sp8px);
  border: 1.5px solid var(--col-main);
}
.button_second_main span {
  font-size: var(--p);
  color: var(--col-main);
  font-weight: 500;
}
.button_second_main:hover {
  background-color: var(--bg);
}
.button_second_main:hover span {
  color: var(--col-main-bg-hover);
}

.button_main {
  all: unset;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--sp8px) var(--sp16px);
  background-color: var(--col-main);
  border-radius: var(--sp8px);
  cursor: pointer;
  gap: var(--sp8px);
}
.button_main span {
  font-size: var(--p);
  color: var(--bg-light);
  font-weight: 500;
}
.button_main:hover {
  background-color: var(--col-main-bg-hover);
}

.button_main_sm {
  all: unset;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--sp4px) var(--sp8px);
  background-color: var(--col-main);
  border-radius: var(--sp4px);
  cursor: pointer;
}
.button_main_sm span {
  font-size: var(--p3);
  color: var(--bg-light);
  font-weight: 500;
}

.button_text {
  all: unset;
  display: flex;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: var(--sp8px);
  padding: var(--sp8px) var(--sp16px);
  border-radius: var(--sp8px);
  border: 1px solid var(--bl-light);
  background-color: var(--bg-light);
}
.button_text span {
  font-size: var(--p);
  color: var(--bg-costom1);
  font-weight: 500;
}
.button_text:hover {
  background-color: var(--bg);
}

.button_text_sm {
  all: unset;
  display: flex;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: var(--sp4px);
  padding: var(--sp4px) var(--sp8px);
  border-radius: var(--sp4px);
  border: 1px solid var(--bl-light);
  background-color: var(--bg-light);
}
.button_text_sm span {
  font-size: var(--p3);
  color: var(--bg-costom1);
  font-weight: 500;
}
.button_text_sm:hover {
  background-color: var(--bg);
}

.input_lg {
  border: 1px solid var(--bl);
  height: 48px;
  border-radius: var(--sp8px);
  padding: 0 var(--sp12px);
  background-color: var(--bg-light);
}
.input_lg input {
  display: flex;
  outline: none;
  border: none;
  resize: none;
  width: 100%;
  font-size: var(--p);
  font-family: "Poppins", sans-serif;
}

.input_main {
  border: 1px solid var(--bl);
  height: 38px;
  border-radius: var(--sp8px);
  padding: 0 var(--sp8px);
  background-color: var(--bg-light);
}
.input_main input {
  display: flex;
  outline: none;
  border: none;
  resize: none;
  width: 100%;
  font-size: var(--p2);
  font-family: "Poppins", sans-serif;
}

.input_sm {
  border: 1px solid var(--bl);
  height: 30px;
  border-radius: var(--sp8px);
  padding: 0 var(--sp8px);
  background-color: var(--bg-light);
}
.input_sm input {
  display: flex;
  outline: none;
  border: none;
  resize: none;
  width: 100%;
  font-size: var(--p3);
  font-family: "Poppins", sans-serif;
}

.input_textarea {
  border: 1px solid var(--bl);
  border-radius: var(--sp8px);
  padding: var(--sp8px) var(--sp12px);
  background-color: var(--bg-light);
}
.input_textarea .svgv1 {
  padding-top: var(--sp2px);
}
.input_textarea textarea {
  display: flex;
  outline: none;
  border: none;
  resize: none;
  width: 100%;
  font-size: var(--p);
  font-family: "Poppins", sans-serif;
}

.inpMsg {
  padding: var(--sp2px) 0;
}
.inpMsg span {
  font-size: var(--p3);
  display: flex;
}
.inpMsg .invalid {
  color: var(--col-dg-txt);
}
.inpMsg .valid {
  color: var(--col-gn-txt);
}

.messageBox {
  padding: var(--sp16px) var(--sp24px);
  border-radius: var(--sp8px);
  margin-bottom: var(--sp16px);
}
.messageBox span {
  text-align: center;
}

.danger {
  background-color: var(--col-dg-bg);
  border: 1px solid var(--col-dg-txt);
}
.danger span {
  color: var(--col-dg-txt);
}

.success {
  background-color: var(--col-gn-bg);
  border: 1px solid var(--col-gn-txt);
}
.success span {
  color: var(--col-gn-txt);
}

.warning {
  background-color: var(--col-yl-bg);
  border: 1px solid var(--col-yl-txt);
}
.warning span {
  color: var(--col-yl-txt);
}

button:disabled {
  cursor: not-allowed;
}
button:disabled .button_main {
  background-color: hsl(221, 83%, 70%);
}

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

.spinner_color_main {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid var(--col-main);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
}

.spinner_color_40 {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid var(--bg-costom1);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.radio_btn {
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--sp4px) var(--sp8px);
  border-radius: var(--sp8px);
}
.radio_btn span {
  color: var(--muted);
}

.radio_active {
  background-color: var(--col-main-bg);
}
.radio_active span {
  color: var(--col-main);
}

span[contenteditable=true] {
  all: unset; /* Removes all styles (including inherited) */
  display: inline; /* Restore inline behavior for span */
}/*# sourceMappingURL=root-app.css.map */