:root {
  /* Primary Brand Colors */
  --primary-green: rgba(0, 153, 76, 1);
  --secondary-green: rgba(34, 170, 100, 1);

  /* Gold Accent */
  --gold: rgba(255, 204, 0, 1);
  --gold-50: rgba(255, 204, 0, 0.5);
  --gold-dark: rgba(180, 130, 0, 1);
  --gold-dark-50: rgba(180, 130, 0, 0.5);

  /* Neutral Colors */
  --white: rgba(255, 255, 255, 1);
  --white-10: rgba(255, 255, 255, 0.1);
  --light-gray: rgba(245, 245, 245, 1);
}

/* COLORS */

.dd-bg-primary-green {
  background-color: var(--primary-green);
}
.dd-bg-gold-dark {
  background-color: var(--gold-dark);
}
.dd-bg-gold {
  background-color: var(--gold);
}
.dd-bg-gold-50 {
  background-color: var(--gold-50);
}
.dd-bg-gold-dark-50 {
  background-color: var(--gold-dark-50);
}

/* BGI */

.bg-main {
  background-image: url("../img/css_img/css_bg_1.png"); /* path to your image */
  background-size: cover; /* makes image fill the container */
  background-position: center; /* centers the image */
  background-repeat: no-repeat; /* prevents tiling */
}

/* TEXT */
.dd-font-var {
  text-transform: capitalize;
  font-variant: small-caps;
}

/* body {
  background-color: #f6f7f9;
}

.bg-main {
  background-image: none;
  background-color: #f6f7f9;
} */

.card {
  border-radius: 1rem;
}

.table th {
  white-space: nowrap;
}

.navbar {
  backdrop-filter: blur(8px);
}

dialog::backdrop {
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Semi-transparent dark background */
  backdrop-filter: blur(5px); /* Apply blur effect */
}
dialog {
  /* padding: 20px; */
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  background: var(--white-10);
  border-radius: 8px;
}



/* =========================================================
   DD TABLE V3 - Reusable themed table system
   ========================================================= */

.dd-table-v3 {
  --dd-table-border: #000;
  --dd-table-head-bg: rgba(0, 0, 0, 0.05);
  --dd-table-head-text: #000;
  --dd-table-body-bg: rgba(255, 255, 255, 0.25);
  --dd-table-row-text: #000;
  --dd-table-alt-bg: rgba(0, 0, 0, 0.04);
  --dd-table-hover-bg: rgba(0, 0, 0, 0.08);

  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--dd-table-border) !important;
}

.dd_table_headings-v3 {
  background-color: var(--dd-table-head-bg);
  color: var(--dd-table-head-text);
  text-transform: capitalize;
  font-variant: small-caps;
  text-align: center;
  border: 1px solid var(--dd-table-border) !important;
}

.dd_table_body-v3 {
  background-color: var(--dd-table-body-bg);
  color: var(--dd-table-row-text);
}

.dd_table_headings-v3 > tr > th,
.dd_table_row-v3 > td {
  padding: 0.5em 0.25em;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--dd-table-border) !important;
}

.dd_table_row-v3 {
  padding: 0.45em;
}

.dd_table_body-v3 .dd_table_row-v3:nth-child(even) {
  background-color: var(--dd-table-alt-bg);
}

.dd_table_body-v3 .dd_table_row-v3:hover {
  background-color: var(--dd-table-hover-bg);
}

/* THEMES */

.dd-table-v3--main {
  --dd-table-border: var(--clr-main-v2);
  --dd-table-head-bg: var(--clr-main-v2);
  --dd-table-head-text: var(--clr-wht);
  --dd-table-body-bg: var(--clr-wht);
  --dd-table-row-text: var(--clr-main-v2);
  --dd-table-alt-bg: var(--clr-main-v2-10);
  --dd-table-hover-bg: var(--clr-sub-v2-20);
}

.dd-table-v3--sub {
  --dd-table-border: var(--clr-sub-v2);
  --dd-table-head-bg: var(--clr-sub-v2);
  --dd-table-head-text: var(--clr-wht);
  --dd-table-body-bg: var(--clr-wht);
  --dd-table-row-text: var(--clr-main-v2);
  --dd-table-alt-bg: var(--clr-sub-v2-10);
  --dd-table-hover-bg: var(--clr-sub-v2-20);
}

.dd-table-v3--dark {
  --dd-table-border: var(--clr-blk);
  --dd-table-head-bg: var(--clr-blk-90);
  --dd-table-head-text: var(--clr-wht);
  --dd-table-body-bg: var(--clr-wht);
  --dd-table-row-text: var(--clr-blk);
  --dd-table-alt-bg: var(--clr-blk-10);
  --dd-table-hover-bg: var(--clr-blk-20);
}

.dd-table-v3--light {
  --dd-table-border: var(--clr-blk-20);
  --dd-table-head-bg: var(--clr-wht-80);
  --dd-table-head-text: var(--clr-main-v2);
  --dd-table-body-bg: var(--clr-wht);
  --dd-table-row-text: var(--clr-blk);
  --dd-table-alt-bg: rgba(0, 0, 0, 0.03);
  --dd-table-hover-bg: rgba(0, 0, 0, 0.07);
}

.dd-table-v3--pharma {
  --dd-table-border: var(--clr-pharma-main);
  --dd-table-head-bg: var(--clr-pharma-main);
  --dd-table-head-text: var(--clr-wht);
  --dd-table-body-bg: var(--clr-wht);
  --dd-table-row-text: var(--clr-pharma-main);
  --dd-table-alt-bg: var(--clr-pharma-main-10);
  --dd-table-hover-bg: var(--clr-pharma-main-20);
}

.dd-table-v3--success {
  --dd-table-border: #198754;
  --dd-table-head-bg: #198754;
  --dd-table-head-text: #fff;
  --dd-table-body-bg: #fff;
  --dd-table-row-text: #0f5132;
  --dd-table-alt-bg: rgba(25, 135, 84, 0.08);
  --dd-table-hover-bg: rgba(25, 135, 84, 0.16);
}

.dd-table-v3--warning {
  --dd-table-border: #ffc107;
  --dd-table-head-bg: #ffc107;
  --dd-table-head-text: #000;
  --dd-table-body-bg: #fff;
  --dd-table-row-text: #664d03;
  --dd-table-alt-bg: rgba(255, 193, 7, 0.12);
  --dd-table-hover-bg: rgba(255, 193, 7, 0.25);
}

.dd-table-v3--danger {
  --dd-table-border: #dc3545;
  --dd-table-head-bg: #dc3545;
  --dd-table-head-text: #fff;
  --dd-table-body-bg: #fff;
  --dd-table-row-text: #842029;
  --dd-table-alt-bg: rgba(220, 53, 69, 0.08);
  --dd-table-hover-bg: rgba(220, 53, 69, 0.16);
}

/* MOBILE SUPPORT */

.dd_responsive_title-v3 {
  display: none;
}

@media (max-width: 715px) {
  .dd_table_headings-v3 {
    display: none;
  }

  .dd_table_body-v3 {
    border: 1px solid var(--dd-table-border);
  }

  .dd_table_row-v3 {
    display: block;
    margin-bottom: 0.5em;
    border: 1px solid var(--dd-table-border);
  }

  .dd_table_row-v3 > td {
    display: block;
    padding: 0.5em;
    border: 1px solid var(--dd-table-border) !important;
  }

  .dd_responsive_title-v3 {
    display: block;
    text-align: start;
    text-transform: capitalize;
    font-weight: bold;
    font-variant: small-caps;
    border-bottom: 1px dashed var(--dd-table-border);
    margin-bottom: 0.25em;
  }
}

/* PRINT */

@media print {
  .dd-table-v3,
  .dd_table_headings-v3,
  .dd_table_body-v3,
  .dd_table_row-v3,
  .dd_table_headings-v3 > tr > th,
  .dd_table_row-v3 > td {
    border-color: #000 !important;
    color: #000 !important;
    background: #fff !important;
  }

  .dd-table-v3 {
    border-collapse: collapse;
    width: 100%;
  }

  .dd-no-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}