/* boot.css (main defs, override some bootstrap stuff and add a few utilities) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --active-fg: #f00;
    --bi-fg: #0044cf;
    --bold-fg: #bf0000;
    --body-bg: #fff;
    --body-fg: #001550;
    --body-padding-bottom: 0;
    --border-default:1px solid #ddd;
    --btn-wide-width: 110px;
    --bullet-fg: #0044cf;
    --footer-bg:#cbe7ff60;
    --footer-border:#ccc;
    --footer-fg:#444;
    --form-border-disabled:#a1a1a1;
    --form-border:#1f8fff;
    --form-fg:#003870;
    --form-focus:#eaecff;
    --h1-border:#9c9c9c;
    --h1-fg:#003cab;
    --h2-fg:#0044cf;
    --label-fg:#0043d1;
    --link-fg-focus:#e00d0d;
    --link-fg-hover:#2c81ff;
    --link-fg:#005cbf;
    --main-padding-bottom: 0;
    --main-padding-left: 0;
    --main-padding-right: 0;
    --main-padding-top: 0;
    --text-danger-fg: #bf0000;
}

/* main pieces */
html {
    position: relative;
    min-height: 100%;
    height: 100%;
    font-size: 16px;
}

body {
    background-color: var(--body-bg);
    color: var(--body-fg);
    font-family: "Inter", "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    line-height: 1.60;
    margin: 0;
    min-height: 100%;
    padding-bottom: var(--body-padding-bottom);
    position:relative;
}

main {
    padding-bottom: var(--main-padding-bottom);
    padding-left: var(--main-padding-left);
    padding-right: var(--main-padding-right);
    padding-top: var(--main-padding-top);
}

/* footer */
footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.75rem;
    clear: both;
    color: var(--footer-fg);
    font-size: 0.85rem;
    letter-spacing: 0.025rem;
    width: 100%;
    text-align: center;
    border-top: 1px solid var(--footer-border);
    margin: 0;
    background-color: var(--footer-bg);
}

/* containers */
.container-xs, .container-sm, .container-md, .container-lg, .container-xl {
    margin-left: auto;
    margin-right: auto;;
}

.container-xs {max-width:496px}
.container-sm {max-width:576px}
.container-md {max-width:768px}
.container-lg {max-width:992px}
.container-xl {max-width:1140px}

.mw-10 {min-width: 10%}
.mw-15 {min-width: 15%}
.mw-25 {min-width: 25%}
.mw-50 {min-width: 50%}
.mw-75 {min-width: 75%}

.mwa-100 {min-width:100px}
.mwa-120 {min-width:120px}
.mwa-130 {min-width:130px}

.mh-100 {min-height: 100px}
.mh-125 {min-height: 125px}
.mh-150 {min-height: 150px}
.mh-175 {min-height: 175px}
.mh-200 {min-height: 200px}

.ls-1 {letter-spacing: 1px}
.ls-2 {letter-spacing: 2px}

/* grids */
.grid-2, .grid-auto-58 {
    display:grid;
    gap:6px;
  }

.grid-2 {
    grid-template-columns: 140px auto;
}

.grid-auto-58 {
    align-items: center;
    grid-template-columns: auto 58px;
}

/* form stuff */
label {
    color: var(--label-fg);
    font-size: 1rem;
    margin-bottom: 0;
    display: block;
}

.form-control {
    color:var(--form-fg);
    border:1px solid var(--form-border);
}

.form-control:focus {
    color: var(--form-fg);
    background-color: var(--form-focus);
    border-color: var(--form-border);
    box-shadow: none;
    outline: none !important;
}

.form-control:disabled {
    background-color: var(--form-focus);
    opacity: 0.75;
    border-color: var(--form-border-disabled);
}

/* misc */
a.active {
    color: var(--active-fg) !important;
}

.alert {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 0.5rem;
}

b,strong {
    color: var(--bold-fg);
    font-weight:500;
}

ul li {
    margin-bottom: 0.5rem;
}

ul.tight li {
    margin-bottom: 1px;
}

ul li::marker {
    color: var(--bullet-fg);
}

.text-danger {
    color: var(--text-danger-fg) !important
}

.py-6a {
    padding-bottom: 6px;
    padding-top: 6px;
}

.row {
    --bs-gutter-x:2rem;
}

.smaller {font-size:90%}

.cursor-pointer {cursor: pointer}

.bi {color:var(--bi-fg)}
.bi-sm {font-size:1.5rem}
.bi-md {font-size:3.0rem}
.bi-lg {font-size:4.0rem}
.btn .bi {
    color: inherit;
    margin-right: 5px;
}

.btn-wide {
    min-width: var(--btn-wide-width);
}