:root {
  --font-family--: "Inter", sans-serif;
  /* Base */
  --color-primary--: rgba(25, 50, 86, 1);
  --color-primary-bold--: rgba(34, 61, 100, 1);
  --color-text--: rgba(106, 116, 130, 1);
  --color-subtitle--: rgba(178, 182, 191, 1);
  --color-bg-gray--: rgba(247, 247, 248, 1);
  --color-border--: rgba(221, 224, 230, 1);
  --color-border-2--: rgba(202, 206, 214, 1);
  --color-badge--: rgba(198, 225, 237, 1);
  --color-grays-white--: rgba(255, 255, 255, 1);
  /* Error Colors */
  --error-25--: rgba(255, 251, 250, 1);
  --error-50--: #fef3f2;
  --error-200--: #fecdca;
  --error-300--: rgba(253, 162, 155, 1);
  --error-700--: rgba(180, 35, 24, 1);
  --error-600--: rgba(217, 45, 32, 1);
  /* Success Colors */
  --success-300--: rgba(117, 224, 167, 1);
  --success-25--: rgba(246, 254, 249, 1);
  --success-50--: #ecfdf3;
  --success-200--: #abefc6;
  --success-600--: rgba(7, 148, 85, 1);
  --success-700--: #067647;
  /* Warning Colors */
  --warning--: rgba(253, 204, 155, 1);
  --warning-25--: rgba(255, 253, 250, 1);
  /* Blue Colors */
  --blue-25--: rgba(246, 251, 247, 1);
  --blue-50--: #eff8ff;
  --blue-200--: #b2ddff;
  --blue-300--: rgba(84, 90, 201, 0.3);
  --blue-700--: #175cd3;
  /* Others */
  --child-green--: rgba(246, 251, 247, 1);
  --badge-green--: rgba(198, 237, 203, 1);
  --default-red--: rgba(255, 56, 60, 1);
  --filter-primary--: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(1190%) hue-rotate(173deg) brightness(97%) contrast(92%);
  --filter-green--: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(1959%) hue-rotate(120deg) brightness(98%) contrast(82%);
  --filter-blue--: brightness(0) saturate(100%) invert(31%) sepia(73%) saturate(7498%) hue-rotate(217deg) brightness(92%) contrast(82%);
  --filter-red--: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(2867%) hue-rotate(355deg) brightness(94%) contrast(83%);
  --filter-indigo--: brightness(0) saturate(100%) invert(26%) sepia(100%) saturate(1458%) hue-rotate(199deg) brightness(99%) contrast(94%);
}

body {
  font-family: var(--font-family--);
  background: var(--color-primary--);
  margin: 0;
  color: var(--color-text--);
  position: relative;
  overflow: hidden;
  font-size: 12px;
}
body * {
  font-family: var(--font-family--);
}

/**
  Common css
  */

/* Spinner Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.no-margin {
  margin: 0;
}

.no-margin-horizontal {
  margin-left: 0;
  margin-right: 0;
}

.no-padding {
  padding: 0;
}

.mx-700 {
  max-width: 700px;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.h-100-force {
  height: 100% !important;
}

.w-100-force {
  width: 100% !important;
}

.w-50 {
  width: 50%;
}

.min-w-30 {
  min-width: 30%;
}

.w-fit-content {
  width: fit-content;
}

.cursor-pointer {
  cursor: pointer;
}

.italic {
  font-style: italic;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-500-hover:hover {
  font-weight: 500;
  transition: all 0.15s ease;
}

.fw-600-hover:hover {
  font-weight: 600;
  transition: all 0.15s ease;
}

.fw-700-hover:hover {
  font-weight: 700;
  transition: all 0.15s ease;
}

.fs-10 {
  font-size: 10px;
}

.fs-11 {
  font-size: 11px;
}

.fs-12 {
  font-size: 12px;
}

.fs-13 {
  font-size: 13px;
}

.fs-14 {
  font-size: 14px;
}

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-22 {
  font-size: 22px;
}

.fs-24 {
  font-size: 24px;
}

.fs-28 {
  font-size: 28px;
}

.fs-32 {
  font-size: 32px;
}

.rotate-180 {
  transform: rotate(180deg);
}

.txt-align-center-important {
  text-align: center !important;
}

.txt-align-end {
  text-align: end;
}

.txt-align-start {
  text-align: start;
}

.relative {
  position: relative;
}

/* Flex & Grid*/

.flex {
  display: flex;
}

.flex-force {
  display: flex !important;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: start;
}

.align-items-end {
  align-items: end;
}

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

.justify-end {
  justify-content: end;
}

.justify-center {
  justify-content: center;
}

/* Grid */
.grid {
  display: grid;
}

.grid-auto-fit-30 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
}

.grid-cols-1 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-right-270 {
  display: grid;
  grid-template-columns: 1fr minmax(270px, 300px);
}

/* End Grid */

.gap-5 {
  gap: 5px;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.gap-20 {
  gap: 20px;
}

.gap-15 {
  gap: 15px;
}

.gap-20 {
  gap: 20px;
}

.gap-30 {
  gap: 30px;
}

.gap-40 {
  gap: 40px;
}

/* Margin */

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}
/* End Margin */

/* img */

.icon img.tiny {
  height: 14px;
}

.icon img.small {
  height: 17px;
}

.icon img.medium {
  height: 20px;
}

.icon img.big {
  height: 40px;
}

.icon img.large {
  height: 50px;
}

/* End img */

/* Background */

.bg-accent {
  background-color: var(--color-accent--);
}

.bg-primary {
  background-color: var(--color-primary--);
}

.bg-grays-white {
  background-color: var(--color-grays-white--);
}

.bg-soft {
  background-color: var(--color-soft--);
}

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

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

.text-white {
  color: var(--color-grays-white--);
}

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

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

.text-primary-hover:hover {
  color: var(--color-primary--);
}

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

.text-danger {
  color: rgba(236, 62, 62, 1);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-270 {
  transform: rotate(270deg);
}
.underline {
  text-decoration: underline;
}

a:link,
a:visited,
a:hover,
a:active,
a {
  text-decoration: none;
  color: var(--color-text--);
}
a.text-primary {
  color: var(--color-primary--);
}
a.underline {
  text-decoration: underline;
}
a.no-decoration {
  text-decoration: none !important;
}

a.text-accent {
  color: var(--color-accent--) !important;
}
a.hover-primary:hover {
  color: var(--color-primary--) !important;
}

li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

hr {
  margin: initial;
  border-top: 0px solid var(--color-border--);
}

hr.hr-2 {
  border-top: 1px solid rgba(202, 206, 214, 1);
}


hr.hr-3 {
  margin: initial;
  border-top: 0px solid var(--color-border--);
}

.star-rating {
  width: 20px;
  height: 20px;
}

.star-rating.empty {
  opacity: 0.2;
}

.badge {
  display: inline-block;
  width: fit-content;
  padding: 3px 6px;
  background-color: var(--color-grays-white--);
  border: 1px solid var(--color-border--);
  border-radius: 6px;
  font-style: normal;
}

.badge-chain {
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--color-border-2--);
  min-height: 18px;
  height: 22px;
  width: fit-content;
  display: flex;
  overflow: hidden;
}

.badge-chain .badge {
  height: 100%;
  border-radius: unset;
  border: unset;
  padding: 0;
  padding-left: 11px;
  padding-right: 11px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.badge-chain .badge:not(:first-child) {
  border-left: 1px solid var(--color-border-2--);
}

.badge.badge-litle {
  padding: 1px 6px;
}

.badge.full-green {
  border-color: rgba(42, 162, 112, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(42, 162, 112, 1) !important;
}

.badge.badge-green {
  border-color: rgba(42, 162, 112, 0.3) !important;
  color: rgb(42, 162, 112) !important;
  background-color: rgb(236, 253, 243) !important;
}

.badge.badge-orange {
  border-color: rgba(224, 96, 61, 0.3) !important;
  color: rgb(224, 96, 61) !important;
  background-color: rgb(254, 246, 238) !important;
}

.badge.badge-red {
  border-color: rgba(162, 42, 42, 0.3) !important;
  color: rgba(162, 42, 42, 1) !important;
  background-color: rgba(253, 236, 236, 1) !important;
}

.badge.badge-blue {
  border-color: rgba(84, 166, 201, 0.3) !important;
  background-color: rgb(240, 249, 255) !important;
  color: rgb(84, 166, 201) !important;
}

.badge.badge-indigo {
  border-color: #B2DDFF !important;
  background-color: #EFF8FF !important;
  color: #175CD3 !important;
}

.badge.badge-purple {
  border-color: rgba(126, 83, 235, 0.3) !important;
  background-color: rgb(244, 243, 255) !important;
  color: rgb(126, 83, 235) !important;
}

/* Badge Status */

.badge.available_color_green,
.badge.status-accept {
  border-color: rgba(42, 162, 112, 0.3) !important;
  color: rgb(42, 162, 112) !important;
  background-color: rgb(236, 253, 243) !important;
}

.badge.available_color_tobeconfirmed_known {
  border-color: rgba(245, 136, 47, 0.3) !important;
  color: rgba(245, 136, 47, 1) !important;
  background-color: rgba(255, 243, 233, 1) !important;
}

.badge.available_color_requested {
  border-color: rgba(126, 83, 235, 0.3) !important;
  background-color: rgba(244, 243, 255, 1) !important;
  color: rgb(126, 83, 235) !important;
}

.badge.available_color_unavailable {
  border-color: rgba(201, 84, 84, 0.3) !important;
  color: rgba(162, 42, 42, 1) !important;
  background-color: rgba(253, 236, 236, 1) !important;
}

.badge.available_color_partiatllyavailable {
  border-color: rgba(255, 227, 150, 1) !important;
  color: #bf9912 !important;
  background-color: rgba(255, 250, 235, 1) !important;
}

.badge.available_color_tobeconfirmed_incognito {
  border-color: rgba(204, 85, 0, 0.3) !important;
  color: rgba(204, 85, 0, 1) !important;
  background-color: rgba(254, 246, 238, 1) !important;
}

.badge.buy_now {
  border-color: rgba(84, 166, 201, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(84, 166, 201, 1) !important;
}

.badge.request_availible {
  border-color: rgba(230, 221, 254, 1) !important;
  color: var(--color-primary--) !important;
  background-color: rgba(230, 221, 254, 1) !important;
}

.badge.requested_2 {
  border-color: rgba(198, 225, 237, 1) !important;
  color: var(--color-primary--) !important;
  background-color: rgba(198, 225, 237, 1) !important;
}

.badge.badge-yellow-2,
.badge.status-mark {
  border-color: rgba(181, 150, 26, 0.3) !important;
  background-color: rgba(253, 252, 236, 1) !important;
  color: rgba(181, 150, 26, 1) !important;
}

/* Badge Status Inverse */
.badge.available_color_green_inverse {
  border-color: rgba(42, 162, 112, 0.3) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(42, 162, 112, 1) !important;
}

.badge.available_color_tobeconfirmed_known_inverse {
  border-color: rgba(245, 136, 47, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(245, 136, 47, 1) !important;
}

.badge.available_color_requested_inverse {
  border-color: rgba(126, 83, 235, 0.3) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(126, 83, 235, 1) !important;
}

.badge.available_color_unavailable_inverse {
  border-color: rgba(236, 62, 62, 0.3) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(236, 62, 62, 1) !important;
}

.badge.available_color_partiatllyavailable_inverse {
  border-color: rgba(233, 192, 47, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(233, 192, 47, 1) !important;
}

.badge.available_color_tobeconfirmed_incognito_inverse {
  border-color: rgba(224, 96, 61, 0.3) !important;
  color: rgba(255, 255, 255, 1) !important;
  background-color: rgba(204, 85, 0, 1) !important;
}

.badge.qtydeliveredoverflow {
  border-color: var(--blue-200--) !important;
  color: var(--blue-700--) !important;
  background-color: var(--blue-50--) !important;
}

.badge.qtydeliveredall {
  border-color: var(--success-200--) !important;
  color: var(--success-700--) !important;
  background-color: var(--success-50--) !important;
}

.badge.qtydeliveredoverless {
  border-color: var(--error-200--) !important;
  color: var(--error-700--) !important;
  background-color: var(--error-50--) !important;
}

/* End badge */

/* Note */

.note {
  display: flex;
  gap: 6px;
  border-radius: 6px;
  padding: 9px 10px;
  background-color: rgba(246, 251, 247, 1);
  border: 1px solid var(--badge-green--);
  width: fit-content;
}

/* End Note */

.btn-clear {
  font-family: "Inter", sans-serif;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Iconcolor */
.iconcolor-blue {
  filter: invert(84%) sepia(58%) saturate(4593%) hue-rotate(168deg)
    brightness(85%) contrast(84%);
}

.iconcolor-purple {
  filter: invert(59%) sepia(13%) saturate(7468%) hue-rotate(218deg)
    brightness(102%) contrast(101%);
}

.iconcolor-orange {
  filter: invert(86%) sepia(6%) saturate(7482%) hue-rotate(309deg)
    brightness(102%) contrast(102%);
}

.iconcolor-red {
  filter: invert(37%) sepia(31%) saturate(5047%) hue-rotate(340deg)
    brightness(98%) contrast(88%);
}

.iconcolor-trash-grey {
  filter: invert(89%) sepia(11%) saturate(183%) hue-rotate(184deg)
    brightness(82%) contrast(87%);
}

.iconcolor-trash-grey:hover {
  filter: invert(27%) sepia(30%) saturate(7002%) hue-rotate(341deg)
    brightness(101%) contrast(98%);
}

.iconcolor-primary {
  filter: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(1190%)
    hue-rotate(173deg) brightness(97%) contrast(92%);
}

/* Button With Icon */

.btn-with-icon {
  font-family: "Inter", sans-serif;
  padding: 8px 10px;
  border-radius: 5px;
  color: var(--color-grays-white--);
  background-color: var(--color-accent--);
  border-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: all 0.15s ease;
}

.btn-with-icon:hover {
  background-color: var(--color-button-hover--);
}

.btn-long {
  font-family: "Inter", sans-serif;
  padding: 10px 14px 10px 12px;
  min-width: unset;
  max-height: 36px;
  width: max-content;
}

.btn-big {
  padding: 11px 30px !important;
  max-height: 36px !important;
  box-sizing: border-box;
}

.btn-small {
  padding: 6px 16px;
  border-radius: 6px;
  background-color: var(--color-accent--);
  border: none;
  color: var(--color-grays-white--);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: unset;
  width: max-content;
  transition: all 0.15s ease;
}

.btn-small:hover {
  background-color: var(--color-button-hover--);
}

.btn-tiny {
  padding: 6px 12px;
  border-radius: 6px;
  background-color: var(--color-accent--);
  border: none;
  color: var(--color-grays-white--);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: unset;
  width: max-content;
  height: fit-content;
  transition: all 0.15s ease;
}

.btn-tiny:hover {
  background-color: var(--color-button-hover--);
}

.btn-long span {
  width: max-content;
}

.btn-blue {
  background-color: rgba(84, 166, 201, 1) !important;
  transition: all 0.15s ease;
}

.btn-blue:hover {
  background-color: rgb(72, 143, 173) !important;
}

.btn-blue-2 {
  background-color: #017ab7 !important;
  color: #ffffff !important;
  border: 1px solid #dde0e6;
  box-shadow: 0px 1px 2px 0px #0000000d;
}

.btn-blue-2:hover {
  background-color: #025b87 !important;
}

.btn-primary {
  background-color: var(--color-primary--) !important;
  transition: all 0.15s ease;
}

.btn-primary:hover {
  background-color: rgb(11, 24, 41) !important;
}

.btn-accent {
  background-color: var(--color-accent--) !important;
  transition: all 0.15s ease;
}

.btn-accent:hover {
  background-color: var(--color-button-hover--) !important;
}

.btn-fit {
  font-family: "Inter", sans-serif;
  padding: 10px 14px 10px 14px;
  max-height: 36px;
  width: max-content;
}

.btn-with-icon:hover {
  cursor: pointer;
}

.btn-with-icon .icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.btn-with-icon .icon img.small {
  height: 17px;
}

.btn-with-icon .icon img.tiny {
  height: 14px;
}

/* Btn-normal */
.btn-normal {
  font-family: "Inter", sans-serif;
  padding: 8px 12px;
  border-radius: 5px;
  color: var(--color-grays-white--);
  background-color: var(--color-accent--);
  border-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-small span,
.btn-tiny span,
.btn-long span,
.btn-big span,
.btn-with-icon span,
.btn-normal span,
.btn-fit span {
  font-family: var(--font-family--);
  font-weight: 500;
}

.btn-small,
.btn-tiny,
.btn-long,
.btn-big,
.btn-with-icon,
.btn-normal,
.btn-fit {
  font-family: var(--font-family--);
  font-weight: 500;
}

/* btn collor */

.btn-normal:hover {
  background-color: var(--color-button-hover--);
}

.btn-normal.bg-green,
.btn-green {
  background-color: rgba(42, 162, 112, 1);
}

.btn-normal.bg-green:hover,
.btn-green:hover {
  background-color: rgb(38, 145, 100);
}

.btn-green-soft {
  background-color: rgba(233, 250, 246, 1);
  border: 1px solid rgba(169, 200, 192, 1);
  color: rgba(25, 121, 91, 1);
}

.btn-green-soft:hover {
  background-color: rgba(42, 162, 112, 1);
  color: var(--color-grays-white--);
}

.btn-danger {
  background-color: rgba(236, 34, 31, 1);
}

.btn-danger:hover {
  background-color: rgb(199, 28, 25);
}

.btn-danger-soft {
  background-color: rgba(255, 225, 225, 1);
}

.btn-danger-soft:hover {
  background-color: rgba(236, 62, 62, 1);
}

.btn-danger-soft span {
  color: rgba(236, 62, 62, 1);
}

.btn-danger-soft:hover span {
  color: rgba(255, 255, 255, 1);
}

.btn-danger-dark {
  background-color: rgb(166 38 36);
}

.btn-danger-dark:hover {
  background-color: rgb(139, 31, 29);
}

.btn-white {
  background-color: #ffffff !important;
  border: 1px solid #dde0e6 !important;
}

.btn-white:hover {
  background-color: #f6f6f6 !important;
}

.btn-grey {
  background-color: rgba(247, 247, 248, 1) !important;
  border: 1px solid rgba(221, 224, 230, 1) !important;
}

.btn-grey:hover {
  background-color: rgb(228, 228, 233) !important;
}

.btn-grey-2 {
  background-color: #efeff4 !important;
}

.btn-grey-2:hover {
  background-color: #e3e3e5 !important;
}

/* Overlay */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: transparent;
}

/* Notification Message */
.notification-message {
  display: flex;
  position: fixed;
  flex-direction: row;
  justify-content: space-between;
  gap: 26px;
  padding: 15px;
  padding-right: 50px;
  border-radius: 12px;
  max-width: 430px;
  box-sizing: border-box;
  bottom: 40px;
  right: 35px;
  transform: translateX(120%);
  opacity: 0;
  transition:
    transform 700ms ease,
    opacity 700ms ease;
  z-index: 9999;
}

.notification-message.show {
  transform: translateX(0);
  opacity: 1;
}

.notification-message .text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-message .close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

.notification-message .icon-close {
  width: 20px;
  transform: rotate(45deg);
}

.notification-message.error-message {
  border: 1px solid var(--error-300--);
  background-color: var(--error-25--);
  color: var(--error-700--);
}

.notification-message .dismiss {
  color: var(--error-600--);
}

.notification-message.error-message .icon-close {
  filter: invert(44%) sepia(83%) saturate(5207%) hue-rotate(343deg)
    brightness(100%) contrast(89%);
}

.notification-message.success-message {
  border: 1px solid var(--success-300--);
  background-color: var(--success-25--);
  color: var(--success-600--);
}

.notification-message.success-message .dismiss {
  color: var(--success-600--);
}

.notification-message.success-message .icon-close {
  filter: invert(54%) sepia(65%) saturate(526%) hue-rotate(100deg)
    brightness(90%) contrast(93%);
}

/* Modal confirm Message */
.card-status {
  display: flex;
  flex-direction: row;
  padding: 16px;
  gap: 16px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.card-status img.icon {
  width: 40px;
  height: 40px;
}

.card-status .message {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-status.yellow {
  background-color: rgba(255, 253, 250, 1);
  color: rgba(216, 154, 61, 1);
  border: 1px solid rgba(253, 204, 155, 1)
}

.card-status.danger {
  border: 1px solid var(--error-300--);
  background-color: var(--error-25--);
  color: var(--error-700--);
}

.card-status.blue {
  border: 1px solid rgba(84, 90, 201, 0.3);
  background-color: rgba(240, 245, 255, 1);
  color: rgba(84, 90, 201, 1);
}


/* Label value */
.label-value-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.label-value-container .item {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Bulk Action */

.bulk-action .action-nav {
  position: absolute;
  display: none;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--color-border--);
  background-color: var(--color-grays-white--);
  gap: 3px;
  border-radius: 6px;
  min-width: 129px;
  right: 10px;
  z-index: 1;
}

.bulk-action.active .action-nav {
  display: flex;
}

.bulk-action.active .action-nav {
  right: 0;
  top: 40px;
  min-width: 119px;
}

.bulk-action.active .action-nav>span {
  text-align: start;
  display: flex;
  min-width: max-content;
}

.bulk-action.active .bulk-action-overlay {
  cursor: not-allowed;
  background-color: var(--color-subtitle--);
  color: var(--color-grays-white--);
}

.bulk-action.disabled button {
  cursor: not-allowed;
  background-color: var(--color-subtitle--);
  color: var(--color-grays-white--);
}

.bulk-action .action-nav span {
  padding: 6px 7px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--color-primary--);
}

.bulk-action .action-nav span:hover {
  background-color: var(--color-hover--);
}

.bulk-action .action-nav.action-nav-2 {
  min-width: 151px;
  right: -12px;
}

.bulk-action .action-nav.action-nav-2 span:hover img {
  filter: var(--filter-accent--);
}

.bulk-action .action-nav.action-nav-2 span {
  font-size: 11px;
}

/* End Bulk Action */

/* Pre for Debug */
pre.debug {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  border-radius: 8px;

  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;

  white-space: pre-wrap;
  word-wrap: break-word;
  /* overflow-x: auto; */

  border: 1px solid #333;
  width: 100%;
}

pre.debug.debug-rendered {
  white-space: normal;
  tab-size: 4;
}

pre.debug .debug-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

pre.debug .debug-children .debug-children {
  margin-left: 5px;
  padding-left: 16px;
  border-left: 1px dashed #3a3a3a;
}

pre.debug .debug-entry {
  margin: 0;
  padding: 0;
}

pre.debug .debug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 1px 0;
}

pre.debug .debug-row:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

pre.debug .debug-toggle {
  flex: none;
  width: 14px;
  margin-left: -20px;
  padding: 0;
  border: 0;
  background: none;
  color: #6a9955;
  font-size: 10px;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
}

pre.debug .debug-toggle:hover {
  color: #9cdcfe;
}

pre.debug .debug-key {
  color: #9cdcfe;
}

pre.debug .debug-arrow {
  color: #808080;
}

pre.debug .debug-type {
  color: #569cd6;
}

pre.debug .debug-bracket {
  color: #808080;
}

pre.debug .debug-value {
  white-space: pre-wrap;
  word-break: break-word;
}

pre.debug .debug-string {
  color: #ce9178;
}

pre.debug .debug-number {
  color: #b5cea8;
}

pre.debug .debug-empty {
  color: #6d6d6d;
  font-style: italic;
  cursor: help;
}

pre.debug .debug-summary {
  display: none;
  color: #808080;
}

pre.debug .debug-entry.collapsed > .debug-row > .debug-summary {
  display: inline;
}

pre.debug .debug-entry.collapsed > .debug-children,
pre.debug .debug-entry.collapsed > .debug-row-close {
  display: none;
}

pre.debug .debug-root > .debug-entry > .debug-row > .debug-toggle {
  margin-left: 0;
}

pre.debug .debug-root > .debug-entry > .debug-children {
  margin-left: 0;
  padding-left: 20px;
  border-left: 0;
}

/* Modal popup */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 50, 86, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 9998;
}
.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -80%) scale(0.95);
  width: 600px;
  padding: 30px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
  z-index: 9999;
}
.modal-container.is-open,
.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.modal-container.is-open {
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-container .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 9999;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}

.modal-dialog {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-column {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.modal-footer {
  display: flex;
  gap: 15px;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
}

/* End Common Css */