/* bc-bootstrap-skin.css -- Educare
   A Bootstrap 3 look and feel on top of Bootstrap 5: 14px type, the familiar blue,
   gradient + shadow depth on buttons, bold right-aligned form labels.  Adapted from
   the MyPlate skin.  Light and dark: the dark values of everything this file
   overrides are at the end.  Must load AFTER bootstrap.min.css -- the
   headers link it last so it also wins over plugin stylesheets.

   The second half is COMPATIBILITY: class names the Bootstrap 3 era code and the
   jQuery form-validator plugin still use, which Bootstrap 5 no longer styles. */

:root {
  --skin-primary:#337ab7;   --skin-primary-dark:#265a88;   --skin-primary-border:#245580;
  --skin-link:#337ab7;      --skin-link-hover:#23527c;
  --skin-nav-bg:#f5f5f5;    --skin-nav-text:#777777;       --skin-nav-active:#337ab7;
  --skin-cardhdr-top:#f5f5f5; --skin-cardhdr-bottom:#e8e8e8; --skin-cardhdr-border:#dddddd; --skin-cardhdr-text:#333333;
}

/* ============ type scale: back toward Bootstrap 3's 14px ============ */
body { font-size: 14px; line-height: 1.42857143; }
.btn, .form-control, .form-select, .input-group-text, .nav-link, .dropdown-item, .table, table { font-size: 14px; }
.btn-sm, .form-control-sm, .form-select-sm { font-size: 12px; }
.btn-lg, .form-control-lg { font-size: 18px; }
h1, .h1 { font-size: 32px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }
.page-header h1 { font-size: 30px; }
h1 small, h2 small, h3 small { font-size: 65%; font-weight: 400; color: #777; }

/* iOS Safari zooms the page when a focused field is under 16px */
@media (pointer: coarse) {
  .form-control, .form-select, .form-control-sm, .form-select-sm, input, textarea, select { font-size: 16px; }
}

/* ============ links ============ */
a { color: var(--skin-link); text-decoration: none; }
a:not(.btn):not(.nav-link):not(.dropdown-item):hover, a:not(.btn):not(.nav-link):not(.dropdown-item):focus { color: var(--skin-link-hover); text-decoration: underline; }

/* ============ form focus: the soft Bootstrap 3 glow ============ */
.form-control:focus, .form-select:focus {
  border-color: var(--skin-primary);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.5);
}

/* ============ buttons: gradients + shadows ============ */
.btn {
  border-radius: 4px;
  padding: 6px 12px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  background-repeat: repeat-x;
}
.btn:active, .btn.active { box-shadow: inset 0 3px 5px rgba(0,0,0,.125); }
.btn-sm { padding: 5px 10px; border-radius: 3px; }
.btn-lg { padding: 10px 16px; border-radius: 6px; }

.btn-primary { background-color:var(--skin-primary-dark); background-image: linear-gradient(to bottom, var(--skin-primary) 0, var(--skin-primary-dark) 100%); border-color:var(--skin-primary-border); }
.btn-primary:hover, .btn-primary:focus { background-color:var(--skin-primary-dark); background-position:0 -15px; border-color:var(--skin-primary-border); }
.btn.btn-primary:active, .btn.btn-primary.active { background-color:var(--skin-primary-dark); background-image:none; border-color:var(--skin-primary-border); }

/* secondary == the old Bootstrap 3 "default" button (light) */
.btn-secondary {
  color:#333; text-shadow:0 1px 0 #fff;
  background-color:#e0e0e0; background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); border-color:#ccc;
}
.btn-secondary:hover, .btn-secondary:focus { color:#333; background-color:#e0e0e0; background-position:0 -15px; border-color:#adadad; }
/* needs (0,3,0) specificity to beat Bootstrap 5's own :active rule */
.btn.btn-secondary:active, .btn.btn-secondary.active { color:#333; background-color:#d4d4d4; background-image:none; border-color:#adadad; }

.btn-success { background-color:#419641; background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%); border-color:#3e8f3e; }
.btn-success:hover, .btn-success:focus { background-color:#419641; background-position:0 -15px; }
.btn.btn-success:active, .btn.btn-success.active { background-color:#419641; background-image:none; }
.btn-info { color:#fff; background-color:#2aabd2; background-image: linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%); border-color:#28a4c9; }
.btn-info:hover, .btn-info:focus { color:#fff; background-color:#2aabd2; background-position:0 -15px; }
.btn.btn-info:active, .btn.btn-info.active { color:#fff; background-color:#2aabd2; background-image:none; }
.btn-warning { color:#fff; background-color:#eb9316; background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%); border-color:#e38d13; }
.btn-warning:hover, .btn-warning:focus { color:#fff; background-color:#eb9316; background-position:0 -15px; }
.btn.btn-warning:active, .btn.btn-warning.active { color:#fff; background-color:#eb9316; background-image:none; }
.btn-danger { background-color:#c12e2a; background-image: linear-gradient(to bottom,#d9534f 0,#c12e2a 100%); border-color:#b92c28; }
.btn-danger:hover, .btn-danger:focus { background-color:#c12e2a; background-position:0 -15px; }
.btn.btn-danger:active, .btn.btn-danger.active { background-color:#c12e2a; background-image:none; }

.btn-link { color:var(--skin-link); text-shadow:none; box-shadow:none; background-image:none; }
.btn-link:hover, .btn-link:focus { color:var(--skin-link-hover); }

/* ============ cards (the old panels) ============ */
.card { box-shadow: 0 1px 1px rgba(0,0,0,.05); margin-bottom: 20px; }
.card-header {
  background-image: linear-gradient(to bottom, var(--skin-cardhdr-top) 0, var(--skin-cardhdr-bottom) 100%);
  border-bottom: 1px solid var(--skin-cardhdr-border);
  color: var(--skin-cardhdr-text);
  font-weight: 500;
}

/* ============ navbar (the old navbar-default) ============ */
.navbar.bg-light { background-color: var(--skin-nav-bg) !important; border-bottom: 1px solid #e7e7e7; }
.navbar.bg-light .nav-link { color: var(--skin-nav-text); }
.navbar.bg-light .nav-link:hover, .navbar.bg-light .nav-link:focus, .navbar.bg-light .nav-link.active { color: var(--skin-nav-active); }
.navbar-brand { font-size: 18px; color: var(--skin-nav-text); }
/* the staff menus are long (Utilities has 25+ entries): scroll inside the menu, not the page */
.navbar .dropdown-menu { max-height: 80vh; overflow-y: auto; }
.dropdown-menu { box-shadow: 0 6px 12px rgba(0,0,0,.175); }
.dropdown-header { font-size: 12px; color: #777; }
.badge { box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }

/* ============ tables: Bootstrap 3 cell padding, no forced white cell background ============ */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: 8px; }
.table-sm > :not(caption) > * > * { padding: 5px; }

/* ============ forms: bold labels, right-aligned beside their field on wide screens ============ */
label { font-weight: 700; margin-bottom: 5px; }
.form-check-label { font-weight: 400; }
.col-form-label { padding-top: 7px; margin-bottom: 0; }
@media (min-width: 768px) {
  .row > label.col-form-label { text-align: right; }
}
.form-control-plaintext { padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; }

/* =====================================================================
   COMPATIBILITY with Bootstrap 3 era markup and the jQuery form validator
   ===================================================================== */

/* .hidden was Bootstrap 3's display:none helper */
.hidden { display: none !important; }

/* <span class="input-group-btn"> wrappers: Bootstrap 5 wants the button as a direct
   child of .input-group; "contents" makes the wrapper disappear for layout */
.input-group-btn { display: contents; }

/* 1000hz bootstrap-validator toggles these on the closest .form-group */
.form-group.has-error .form-control, .form-group.has-error .form-select { border-color: #a94442; }
.form-group.has-error label, .form-group.has-error .form-text, .form-group.has-error .with-errors { color: #a94442; }
.form-group.has-success .form-control, .form-group.has-success .form-select { border-color: #3c763d; }
.btn.disabled, .btn:disabled { cursor: not-allowed; }

/* muted text: the Bootstrap 3 grey */
.text-muted { color: #777 !important; }

/* Bootstrap 3 printed the URL after every link; Bootstrap 5 does not -- keep it that way
   on pick lists, packing slips and receipts even if a plugin stylesheet tries */
@media print {
  a[href]:after { content: none !important; }
  .navbar, .footer { display: none !important; }
  body { margin-bottom: 0; }
  body > .container { padding-top: 0; }
}


/* =====================================================================
   DARK  (data-bs-theme="dark" on <html>: My Account -> Appearance, or the device's
   own setting for "Auto" and for visitors).  Bootstrap 5.3 recolors its own
   components; this block gives the dark value of what the skin overrides above,
   and of the few hard-coded light colors in page styles.  Printing is always light
   (the headers switch the theme back for the printer).
   ===================================================================== */
[data-bs-theme=dark] {
  --skin-primary:#3d8bd0;   --skin-primary-dark:#2e6da4;   --skin-primary-border:#2a6496;
  --skin-link:#6cb2eb;      --skin-link-hover:#9ccaf2;
  --skin-nav-bg:#2b3035;    --skin-nav-text:#c5c9cd;       --skin-nav-active:#ffffff;
  --skin-cardhdr-top:#343a40; --skin-cardhdr-bottom:#2b3035; --skin-cardhdr-border:#495057; --skin-cardhdr-text:#dee2e6;
}
[data-bs-theme=dark] .btn-secondary {
  color:#e9ecef; text-shadow:0 -1px 0 rgba(0,0,0,.3);
  background-color:#495057; background-image: linear-gradient(to bottom,#5c636a 0,#495057 100%); border-color:#3d4348;
}
[data-bs-theme=dark] .btn-secondary:hover, [data-bs-theme=dark] .btn-secondary:focus { color:#fff; background-color:#495057; background-position:0 -15px; border-color:#343a40; }
[data-bs-theme=dark] .btn.btn-secondary:active, [data-bs-theme=dark] .btn.btn-secondary.active { color:#fff; background-color:#3d4348; background-image:none; border-color:#343a40; }
[data-bs-theme=dark] .navbar.bg-light { border-bottom-color:#495057; }
[data-bs-theme=dark] .navbar-brand { color: var(--skin-nav-text); }
[data-bs-theme=dark] .footer { background-color:#2b3035; }
[data-bs-theme=dark] .dropdown-header, [data-bs-theme=dark] h1 small, [data-bs-theme=dark] h2 small, [data-bs-theme=dark] h3 small { color:#9aa0a6; }
[data-bs-theme=dark] .text-muted { color:#9aa0a6 !important; }
[data-bs-theme=dark] .dropdown-menu { box-shadow: 0 6px 12px rgba(0,0,0,.6); }
[data-bs-theme=dark] .form-group.has-error .form-control, [data-bs-theme=dark] .form-group.has-error .form-select { border-color:#ea868f; }
[data-bs-theme=dark] .form-group.has-error label, [data-bs-theme=dark] .form-group.has-error .form-text, [data-bs-theme=dark] .form-group.has-error .with-errors { color:#ea868f; }
[data-bs-theme=dark] .form-group.has-success .form-control, [data-bs-theme=dark] .form-group.has-success .form-select { border-color:#75b798; }
/* the named colors pages use (header styles, bc-framework.css) */
[data-bs-theme=dark] .red, [data-bs-theme=dark] .redSmaller { color:#ff7b72; }
[data-bs-theme=dark] .green, [data-bs-theme=dark] .greenSmaller, [data-bs-theme=dark] .quarterDisplay { color:#5dd879; }
[data-bs-theme=dark] .blue { color:#6cb2eb; }
[data-bs-theme=dark] .grey, [data-bs-theme=dark] .hint, [data-bs-theme=dark] .silver { color:#9aa0a6; }
/* a signature is black ink: its pad stays paper-white */
[data-bs-theme=dark] .signature-pad--body canvas, [data-bs-theme=dark] canvas.signature-pad { background-color:#fff; }
/* an element that paints its own LIGHT background inline keeps dark text on it */
[data-bs-theme=dark] [style*="background-color:yellow"], [data-bs-theme=dark] [style*="background-color: yellow"],
[data-bs-theme=dark] [style*="background-color:white"], [data-bs-theme=dark] [style*="background-color: white"],
[data-bs-theme=dark] [style*="background-color:silver"], [data-bs-theme=dark] [style*="background:#fff"], [data-bs-theme=dark] [style*="background:#eee"],
[data-bs-theme=dark] [style*="background:#f5f5f5"], [data-bs-theme=dark] [style*="background:#feffff"],
[data-bs-theme=dark] [style*="background-color:#f"], [data-bs-theme=dark] [style*="background-color:#e"], [data-bs-theme=dark] [style*="background-color:#d"] { color:#212529; }
/* The HTML editor stays paper-white on purpose -- what it edits is an email, and email is light -- so everything in it
   keeps DARK text.  (Without this the page's light dark-mode text color was inherited onto the white sheet.) */
[data-bs-theme=dark] .jodit-container:not(.jodit_inline),
[data-bs-theme=dark] .jodit-container:not(.jodit_inline) .jodit-workplace,
[data-bs-theme=dark] .jodit-container:not(.jodit_inline) .jodit-wysiwyg,
[data-bs-theme=dark] .jodit-container .jodit-source,
[data-bs-theme=dark] .jodit-container .jodit-source textarea,
[data-bs-theme=dark] .jodit-container .jodit-source__mirror { color:#212529; background-color:#fff; }
[data-bs-theme=dark] .jodit-container .jodit-wysiwyg a { color:#337ab7; }
[data-bs-theme=dark] .jodit-container .jodit-placeholder { color:#6c757d; }
[data-bs-theme=dark] .jodit-popup, [data-bs-theme=dark] .jodit-dialog__panel { color:#212529; }
/* third-party widgets that stay light (select2) keep their own dark text */
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme=dark] .select2-container--default .select2-results__option { color:#212529; }
[data-bs-theme=dark] .select2-container--default .select2-results__option--highlighted[aria-selected] { color:#fff; }