/* Default Styling */

.example {
    margin: 0 auto;
}

:root{
  --primary: #173300;
  --warning: #f7a307;
  --light: #fcfdfe;
    --tblr-primary: #0054a6;
}

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

/**
Form help
 */
 .form-help {
    display: inline-flex;
    font-weight: var(--tblr-font-weight-bold);
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.75rem;
    color: var(--light);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: var(--warning);
    border-radius: 100rem;
    transition: background-color 0.3s, color 0.3s;
  }
  @media (prefers-reduced-motion: reduce) {
    .form-help {
      transition: none;
    }
  }
  .form-help:hover, .form-help[aria-describedby] {
    color: #ffffff;
    background: var(--tblr-primary);
  }

  /* Custom Borders */
  .border-gray{
    border-color:#bebebe;
  }

  /* Alerts */
  /* .alert-warning{

    border-color: #FFB200;
    background-color: #FCC737;
    color: blueviolet;
    } */

    .alert-warning {
        border-color: #FFB200;
        background-color: hsla(45, 96%, 60%, 0.6); /* 70% opacity */
        color: #000;}

        .btn-close {
            color: blueviolet;
            opacity: 1; /* Ensure full visibility for the close button */
        }


        .form-control {
            border-color: #d6d6d6c7; /* Custom border color */
            box-shadow: #585858 0px 0px 4px -2px; /* /* Custom shadow color */
        }

        .card {
            border-color: #d6d6d6c7; /* Custom border color for cards */
            box-shadow: #585858 0px 0px 6px -3px; /* /* Custom shadow color */
        }

/* Base Alert */
.alert {
    position: relative;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0.5rem 0 0 0.5rem;
    background-color: currentColor;
}


/* =========================
   INFO
========================= */
.alert-info {
    color: #00adcf;
    background-color: #e7f5f8;

    border-color: #b6e1ea;
}

/* =========================
   SUCCESS
========================= */
.alert-success {
    color: #479d00;
    background-color: #e6f4ea;
    border-color: #b0e0ca;
}

/* =========================
   WARNING
========================= */
.alert-warning {
    color: #664d03;
    background-color: #fff4e5;
    border-color: #ffda9e;
}

/* =========================
   DANGER / ERROR
========================= */
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f1aeb5;
}

/* =========================
   DARK MODE SUPPORT
========================= */
@media (color-scheme: dark) {
    .alert {
        color: #e5e7eb;
        background-color: #1f2933;
        border-color: #374151;
    }

    .alert-info {
        color: #67e8f9;
        background-color: rgba(14, 165, 233, 0.12);
        border-color: rgba(14, 165, 233, 0.35);
    }

    .alert-success {
        color: #86efac;
        background-color: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.35);
    }

    .alert-warning {
        color: #fde68a;
        background-color: rgba(234, 179, 8, 0.12);
        border-color: rgba(234, 179, 8, 0.35);
    }

    .alert-danger {
        color: #fca5a5;
        background-color: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.35);
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}

table th,
table td thead th {
    border: 1px solid #f9f9f9;
    padding: 8px;
}

table tr {
    border-bottom: 1px solid #dee2e6;
}