/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 02 2025 | 21:39:05 */
/* ---------- Base table styling (common) ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1;
  line-height: 1.4;
  color: #222;
  box-sizing: border-box;
}

/* ---------- Bordered table ---------- */
.table-bordered th,
.table-bordered td {
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}


.table-bordered thead th,.table th {
  background: #ccc;
  font-weight: 600;
  position: sticky; /* optional sticky header */
  top: 0;
  z-index: 2;
}

/* small visual niceties */
.table-bordered tbody tr:nth-child(odd) {
  background: rgba(0,0,0,0.01);
}
.table-bordered tbody tr:hover {
  background: rgba(0,0,0,0.03);
}

/* Compact / small variant */
.table-sm td, .table-sm th {
  padding: 0.35rem 0.5rem;
}

/* ---------- Responsive approach 1: horizontal scroll ---------- */
/* Wrap your table with a block-level container (see HTML example). */
.table-responsive {
  width: 100%;
  overflow-x: auto;         /* allows horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  border-radius: 6px;      /* optional */
  background-clip: padding-box;
}

/* allow the table to have a minimum width so it scrolls horizontally */
.table-responsive .table {
  min-width: 640px; /* tweak to match expected columns */
}

/* optional: show subtle shadow when horizontally scrollable */
.table-responsive:after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
}

/* ---------- Responsive approach 2: stacked cards on small screens ---------- */
/* Use this if you want each row to become a labeled card on narrow screens */
.table-responsive--stacked .table {
  border: 0;
}

@media (max-width: 720px) {
  .table-responsive--stacked .table,
  .table-responsive--stacked thead,
  .table-responsive--stacked tbody,
  .table-responsive--stacked th,
  .table-responsive--stacked td,
  .table-responsive--stacked tr {
    display: block;
    width: 100%;
  }

  .table-responsive--stacked thead {
    display: none; /* hide original header */
  }

  .table-responsive--stacked tbody tr {
    margin: 0 0 0.75rem 0;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 0.5rem;
    background: #fff;
  }

  .table-responsive--stacked td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-bottom: 1px dashed rgba(0,0,0,0.04);
  }

  /* label for each cell — taken from data-label attribute (see HTML) */
  .table-responsive--stacked td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-weight: 600;
    padding-right: 0.6rem;
    color: #444;
  }

  .table-responsive--stacked td:last-child { border-bottom: 0; }
}

 /* Main Container Styling: Centered content with a card effect */
        #content-container {
            max-width: 800px; /* Optimal reading width */
            margin: 40px auto; /* Center the container with vertical spacing */
            padding: 24px 32px;
            background: #fff; /* White content background */
            border-radius: 16px; /* Soft rounded corners */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Professional shadow */
        }

        /* Headings Styling for Visual Hierarchy */
        h2 {
            font-size: 1.75rem; /* Larger headings */
            font-weight: 800;
            color: #1f2937; /* Darker heading color */
            margin-top: 3rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid #e5e7eb; /* Subtle separator line */
            padding-bottom: 10px;
        }

        h3 {
            font-size: 1.35rem;
            font-weight: 700;
            color: #374151;
            margin-top: 2rem;
            margin-bottom: 0.75rem;
        }

        p, ul {
            margin-bottom: 1.25rem;
        }

        ul {
            padding-left: 25px;
            list-style-type: disc;
        }
        
        li {
            margin-bottom: 8px;
        }

        /* Link Styling (A tag that may remain from original cleanup) */
        a {
            color: #2563eb; /* Primary blue link color */
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease-in-out;
        }

        a:hover {
            color: #1e40af; /* Darker blue on hover */
            text-decoration: underline;
        }

        /* Responsive adjustments for mobile view */
        @media (max-width: 768px) {
            #content-container {
                margin: 0;
                padding: 15px;
                border-radius: 0; 
                box-shadow: none; /* Full width mobile */
            }
            h2 {
                font-size: 1.5rem;
                margin-top: 2.5rem;
            }
        }