:root {
    --pdbi-base-900: #141C25;
    --pdbi-base-800: #1A232D;
    --pdbi-base-700: #344051;
    --pdbi-base-600: #414E62;
    --pdbi-base-500: #637083;
    --pdbi-base-400: #97A1AF;
    --pdbi-base-300: #CED2DA;
    --pdbi-base-200: #E4E7EC;
    --pdbi-base-100: #F2F4F7;
    --pdbi-base-50: #F2F4F7;
    --pdbi-base-0: white;
    
    --pdbi-primary-900: #214037;
    --pdbi-primary-800: #244B42;
    --pdbi-primary-700: #285D4F;
    --pdbi-primary-600: #2E7361;
    --pdbi-primary-500: #3C9078;
    --pdbi-primary-400: #56AB91;
    --pdbi-primary-300: #80C8AF;
    --pdbi-primary-200: #B0DFCE;
    --pdbi-primary-100: #D8EFE6;
    --pdbi-primary-50: #F3FAF7;

    --pdbi-success-500: #10B978;

    --pdbi-danger: #FF4D4D;
    --pdbi-danger-hover: #fd6565;

    --pdbi-info: #0BA5EC;
    --pdbi-info-hover: #30b6f4;
}

.text-truncate-1,
.text-truncate-2,
.text-truncate-3,
.text-truncate-4,
.text-truncate-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em;
}

.custom-select {
    color: gray;
}

.custom-select option {
    color: black;
}

.custom-select option:first-child {
    color: gray;
}

.text-truncate-1 { -webkit-line-clamp: 1; max-height: calc(1.5em * 1); }
.text-truncate-2 { -webkit-line-clamp: 2; max-height: calc(1.5em * 2); }
.text-truncate-3 { -webkit-line-clamp: 3; max-height: calc(1.5em * 3); }
.text-truncate-4 { -webkit-line-clamp: 4; max-height: calc(1.5em * 4); }
.text-truncate-5 { -webkit-line-clamp: 5; max-height: calc(1.5em * 5); }


.ff-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* .ff-jakarta {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
} */

.ms-10px {
    margin-left: 10px !important;
}

.ms-12px {
    margin-left: 12px !important;
}

.ms-14px {
    margin-left: 14px !important;
}

.ms-16px {
    margin-left: 16px !important;
}

.ms-18px {
    margin-left: 18px !important;
}

.ms-20px {
    margin-left: 20px !important;
}

.ms-22px {
    margin-left: 22px !important;
}

.ms-24px {
    margin-left: 24px !important;
}

.ms-26px {
    margin-left: 26px !important;
}

.ms-28px {
    margin-left: 28px !important;
}

.ms-30px {
    margin-left: 30px !important;
}

.me-10px {
    margin-right: 10px !important;
}

.me-12px {
    margin-right: 12px !important;
}

.me-14px {
    margin-right: 14px !important;
}

.me-16px {
    margin-right: 16px !important;
}

.me-18px {
    margin-right: 18px !important;
}

.me-20px {
    margin-right: 20px !important;
}

.me-22px {
    margin-right: 22px !important;
}

.me-24px {
    margin-right: 24px !important;
}

.me-26px {
    margin-right: 26px !important;
}

.me-28px {
    margin-right: 28px !important;
}

.me-30px {
    margin-right: 30px !important;
}

/* Margin Top Utilities */
.mt-10px { margin-top: 10px !important; }
.mt-12px { margin-top: 12px !important; }
.mt-14px { margin-top: 14px !important; }
.mt-16px { margin-top: 16px !important; }
.mt-18px { margin-top: 18px !important; }
.mt-20px { margin-top: 20px !important; }
.mt-22px { margin-top: 22px !important; }
.mt-24px { margin-top: 24px !important; }
.mt-26px { margin-top: 26px !important; }
.mt-28px { margin-top: 28px !important; }
.mt-30px { margin-top: 30px !important; }

/* Margin Bottom Utilities */
.mb-10px { margin-bottom: 10px !important; }
.mb-12px { margin-bottom: 12px !important; }
.mb-14px { margin-bottom: 14px !important; }
.mb-16px { margin-bottom: 16px !important; }
.mb-18px { margin-bottom: 18px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-22px { margin-bottom: 22px !important; }
.mb-24px { margin-bottom: 24px !important; }
.mb-26px { margin-bottom: 26px !important; }
.mb-28px { margin-bottom: 28px !important; }
.mb-30px { margin-bottom: 30px !important; }

/* Padding X (left + right) */
.px-10px { padding-left: 10px !important; padding-right: 10px !important; }
.px-12px { padding-left: 12px !important; padding-right: 12px !important; }
.px-14px { padding-left: 14px !important; padding-right: 14px !important; }
.px-16px { padding-left: 16px !important; padding-right: 16px !important; }
.px-18px { padding-left: 18px !important; padding-right: 18px !important; }
.px-20px { padding-left: 20px !important; padding-right: 20px !important; }
.px-22px { padding-left: 22px !important; padding-right: 22px !important; }
.px-24px { padding-left: 24px !important; padding-right: 24px !important; }
.px-26px { padding-left: 26px !important; padding-right: 26px !important; }
.px-28px { padding-left: 28px !important; padding-right: 28px !important; }
.px-30px { padding-left: 30px !important; padding-right: 30px !important; }
.px-32px { padding-left: 32px !important; padding-right: 32px !important; }
.px-34px { padding-left: 34px !important; padding-right: 34px !important; }
.px-36px { padding-left: 36px !important; padding-right: 36px !important; }
.px-38px { padding-left: 38px !important; padding-right: 38px !important; }
.px-40px { padding-left: 40px !important; padding-right: 40px !important; }

/* Padding Y (top + bottom) */
.py-10px { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-12px { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-14px { padding-top: 14px !important; padding-bottom: 14px !important; }
.py-16px { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-18px { padding-top: 18px !important; padding-bottom: 18px !important; }
.py-20px { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-22px { padding-top: 22px !important; padding-bottom: 22px !important; }
.py-24px { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-26px { padding-top: 26px !important; padding-bottom: 26px !important; }
.py-28px { padding-top: 28px !important; padding-bottom: 28px !important; }
.py-30px { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-32px { padding-top: 32px !important; padding-bottom: 32px !important; }
.py-34px { padding-top: 34px !important; padding-bottom: 34px !important; }
.py-36px { padding-top: 36px !important; padding-bottom: 36px !important; }
.py-38px { padding-top: 38px !important; padding-bottom: 38px !important; }
.py-40px { padding-top: 40px !important; padding-bottom: 40px !important; }


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

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

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

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

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

.fz-20px {
    font-size: 20px;
}

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

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

.fz-26px {
    font-size: 26px;
}

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

.fz-30px {
    font-size: 30px;
}

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

.fz-34px {
    font-size: 34px;
}

.fz-36px {
    font-size: 36px;
}

.fz-40px {
    font-size: 40px;
}

.icon-16px {
    width: 16px !important;
    height: 16px !important;
}

.icon-17px {
    width: 17px !important;
    height: 17px !important;
}

.icon-18px {
    width: 18px !important;
    height: 18px !important;
}

.icon-19px {
    width: 19px !important;
    height: 19px !important;
}

.icon-20px {
    width: 20px !important;
    height: 20px !important;
}

.icon-21px {
    width: 21px !important;
    height: 21px !important;
}

.icon-22px {
    width: 22px !important;
    height: 22px !important;
}

.icon-23px {
    width: 23px !important;
    height: 23px !important;
}

.icon-24px {
    width: 24px !important;
    height: 24px !important;
}

.icon-25px {
    width: 25px !important;
    height: 25px !important;
}

.icon-26px {
    width: 26px !important;
    height: 26px !important;
}

.icon-27px {
    width: 27px !important;
    height: 27px !important;
}

.icon-28px {
    width: 28px !important;
    height: 28px !important;
}

.icon-29px {
    width: 29px !important;
    height: 29px !important;
}

.icon-30px {
    width: 30px !important;
    height: 30px !important;
}

.icon-31px {
    width: 31px !important;
    height: 31px !important;
}

.icon-32px {
    width: 32px !important;
    height: 32px !important;
}

.icon-33px {
    width: 33px !important;
    height: 33px !important;
}

.icon-34px {
    width: 34px !important;
    height: 34px !important;
}

.icon-35px {
    width: 35px !important;
    height: 35px !important;
}

.icon-36px {
    width: 36px !important;
    height: 36px !important;
}

.icon-37px {
    width: 37px !important;
    height: 37px !important;
}

.icon-38px {
    width: 38px !important;
    height: 38px !important;
}

.icon-39px {
    width: 39px !important;
    height: 39px !important;
}

.icon-40px {
    width: 40px !important;
    height: 40px !important;
}

.rounded-10px {
    border-radius: 10px !important;
}

.rounded-12px {
    border-radius: 12px !important;
}

.rounded-14px {
    border-radius: 14px !important;
}

.rounded-16px {
    border-radius: 16px !important;
}

.rounded-18px {
    border-radius: 18px !important;
}

.rounded-20px {
    border-radius: 20px !important;
}

.rounded-22px {
    border-radius: 22px !important;
}

.rounded-24px {
    border-radius: 24px !important;
}

.rounded-26px {
    border-radius: 26px !important;
}

.rounded-28px {
    border-radius: 28px !important;
}

.rounded-30px {
    border-radius: 30px !important;
}

.rounded-32px {
    border-radius: 32px !important;
}

.rounded-34px {
    border-radius: 34px !important;
}

.rounded-36px {
    border-radius: 36px !important;
}

.rounded-38px {
    border-radius: 38px !important;
}

.rounded-40px {
    border-radius: 40px !important;
}

.h-10px {
  height: 10px !important;
}

.h-12px {
  height: 12px !important;
}

.h-14px {
  height: 14px !important;
}

.h-16px {
  height: 16px !important;
}

.h-18px {
  height: 18px !important;
}

.h-20px {
  height: 20px !important;
}

.h-22px {
  height: 22px !important;
}

.h-24px {
  height: 24px !important;
}

.h-26px {
  height: 26px !important;
}

.h-28px {
  height: 28px !important;
}

.h-30px {
  height: 30px !important;
}

.h-32px {
  height: 32px !important;
}

.h-34px {
  height: 34px !important;
}

.h-36px {
  height: 36px !important;
}

.h-38px {
  height: 38px !important;
}

.h-40px {
  height: 40px !important;
}

.no-caret::after {
    display: none !important;
}
  
@keyframes placeholderShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.placeholder-glow {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: #e0e0e0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: placeholderShimmer 1.2s infinite;
  border-radius: 4px !important;
  opacity: 1;
}

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