.bs-callout {
  margin: 20px 0;
  padding: 20px;
  border-left: 3px solid #eee;
}

.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
  font-weight:600;
}
.bs-callout h4 i {
  margin-right: 10px;
  font-weight:normal;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}

.bs-callout code {
  background-color: #fff;
  border-radius: 3px;
}

.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #d9534f;
}

.bs-callout.bs-callout-danger h4 {
  color: #d9534f;
}

.bs-callout-default {
  background-color: #DEDEDE;
  border-color: #CCC;
}

.bs-callout.bs-callout-default h4 {
  color: #666;
}
.bs-callout.compact {

  padding-top:10px;
}
.bs-callout.compact:first-of-type {
  margin-top:0px;
}
.bs-callout-warning {
  background-color: #fcf8f2;
  border-color: #f0ad4e;
}

.bs-callout.bs-callout-warning h4 {
  color: #f0ad4e;
}

.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}

.bs-callout.bs-callout-info h4 {
  color: #5bc0de;
}

.bs-callout-success {
  background-color: #F2F9F0;
  border-color: #468847;
}

.bs-callout.bs-callout-success h4 {
  color: #468847;
}

.bs-callout-minor {
  color: rgba(0,0,0,0.5);
}
.bs-callout-minor h4 {
  font-size: 1.3em;
}

/* ------------------------------------------------------------------
   Dark mode (TailAdmin skin): translucent tinted backgrounds and
   accent borders/headings from the theme tokens, so callouts read
   correctly on dark surfaces.
   ------------------------------------------------------------------ */
body.theme-tailadmin.theme-dark .bs-callout {
  border-left-color: var(--tt-border-strong, #344054);
}
body.theme-tailadmin.theme-dark .bs-callout code {
  background-color: var(--tt-card, #18202f);
}
body.theme-tailadmin.theme-dark .bs-callout-danger {
  background-color: var(--tt-error-50, rgba(240, 68, 56, 0.14));
  border-color: var(--tt-error-500, #f04438);
}
body.theme-tailadmin.theme-dark .bs-callout.bs-callout-danger h4 {
  color: var(--tt-error-500, #f04438);
}
body.theme-tailadmin.theme-dark .bs-callout-warning {
  background-color: var(--tt-warning-50, rgba(247, 144, 9, 0.14));
  border-color: var(--tt-warning-500, #f79009);
}
body.theme-tailadmin.theme-dark .bs-callout.bs-callout-warning h4 {
  color: var(--tt-warning-500, #f79009);
}
body.theme-tailadmin.theme-dark .bs-callout-info {
  background-color: var(--tt-info-50, rgba(11, 165, 236, 0.14));
  border-color: var(--tt-info-500, #0ba5ec);
}
body.theme-tailadmin.theme-dark .bs-callout.bs-callout-info h4 {
  color: var(--tt-info-500, #0ba5ec);
}
body.theme-tailadmin.theme-dark .bs-callout-success {
  background-color: var(--tt-success-50, rgba(18, 183, 106, 0.14));
  border-color: var(--tt-success-500, #12b76a);
}
body.theme-tailadmin.theme-dark .bs-callout.bs-callout-success h4 {
  color: var(--tt-success-500, #12b76a);
}
body.theme-tailadmin.theme-dark .bs-callout-default {
  background-color: var(--tt-bg-subtle, rgba(255, 255, 255, 0.04));
  border-color: var(--tt-border-strong, #344054);
}
body.theme-tailadmin.theme-dark .bs-callout.bs-callout-default h4 {
  color: var(--tt-heading, #f9fafb);
}
body.theme-tailadmin.theme-dark .bs-callout-minor {
  color: rgba(255, 255, 255, 0.5);
}