.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well-lg {
    padding: 24px;
    border-radius: 6px;
}

.well-sm {
    padding: 9px;
    border-radius: 3px;
}

.has-error .form-label,
.has-error .form-text,
.has-error .form-check-label {
    color: #a94442;
}

/* BS3 gave .checkbox/.radio wrappers 10px vertical margins; BS5's .form-check
   has none, so checkboxes hug the element above them. The .form-inline block
   below still zeroes this inside inline forms, as in BS3. */
.form-check {
    margin-top: 10px;
    margin-bottom: 10px;
}

.has-error .form-control {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .form-control:focus {
    border-color: #843534;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}

.card.border-primary > .card-header {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

@media (min-width: 768px) {
    .form-inline .mb-3 {
        display: inline-block;
        /* BS5's .mb-3 utility is !important, so this must be too. */
        margin-bottom: 0 !important;
        vertical-align: middle;
    }
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    /* Align the button on the same middle line as the input (BS5 buttons
       default to baseline, which drops them below the inline-block field). */
    .form-inline .btn {
        vertical-align: middle;
    }
    .form-inline .form-label {
        margin-bottom: 0;
        vertical-align: middle;
    }
    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle;
    }
    .form-inline .input-group .input-group-text,
    .form-inline .input-group .form-control {
        width: auto;
    }
    .form-inline .form-check {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }
}

:root {
    --bs-primary: #337ab7;
    --bs-primary-rgb: 51, 122, 183;
    --bs-success: #5cb85c;
    --bs-success-rgb: 92, 184, 92;
    --bs-info: #5bc0de;
    --bs-info-rgb: 91, 192, 222;
    --bs-warning: #f0ad4e;
    --bs-warning-rgb: 240, 173, 78;
    --bs-danger: #d9534f;
    --bs-danger-rgb: 217, 83, 79;

    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #333;
    --bs-body-color-rgb: 51, 51, 51;

    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c;
    --bs-link-hover-color-rgb: 35, 82, 124;

    --bs-border-radius: 4px;
}

a {
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: underline;
}
.nav-link:hover,
.nav-link:focus,
.navbar-brand:hover,
.navbar-brand:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.btn:hover,
.btn:focus,
.page-link:hover,
.page-link:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
    text-decoration: none;
}

h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    line-height: 1.1;
}

.row,
.container,
.container-fluid {
    --bs-gutter-x: 30px;
}

@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 990px; } }
@media (min-width: 1200px) { .container { max-width: 1190px; } }
@media (min-width: 1400px) { .container { max-width: 1190px; } }

.modal { --bs-modal-width: 600px; }
@media (min-width: 768px) {
    .modal-md, .modal-lg { --bs-modal-width: 720px; }
}
@media (min-width: 992px) {
    .modal-md, .modal-lg { --bs-modal-width: 950px; }
}
@media (min-width: 1200px) {
    .modal-md { --bs-modal-width: 1150px; }
    .modal-lg { --bs-modal-width: 90%; }
}

@media (max-width: 767.98px) {
    .modal-dialog { max-width: none; }
}
.modal-header, .modal-body, .modal-footer { padding: 15px; }
.modal-header { border-bottom: 1px solid #e5e5e5; }
.modal-footer { border-top: 1px solid #e5e5e5; }
.modal-title  { margin: 0; line-height: 1.42857143; }

.btn {
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.42857143;
    --bs-btn-border-radius: 4px;
    /* BS3 set this explicitly; without it a .btn on a <p> (icon buttons in
       table cells) keeps the reboot's 1rem paragraph margin and inflates rows. */
    margin-bottom: 0;
}
.btn-sm {
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 10px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}

.btn-xs {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}

/* .btn-default also matched: it survives in legacy pre-rendered HTML (e.g.
   statistics pages stored on S3 before the migration) that is served as-is. */
.btn-outline-secondary,
.btn-default {
    --bs-btn-color: #333;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-color: #333;
    --bs-btn-active-bg: #d4d4d4;
    --bs-btn-active-border-color: #8c8c8c;
    --bs-btn-disabled-color: #333;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #ccc;
}
.btn-primary { --bs-btn-bg: #337ab7; --bs-btn-border-color: #2e6da4; --bs-btn-hover-bg: #286090; --bs-btn-hover-border-color: #204d74; --bs-btn-active-bg: #204d74; --bs-btn-active-border-color: #122b40; }
.btn-success { --bs-btn-bg: #5cb85c; --bs-btn-border-color: #4cae4c; --bs-btn-hover-bg: #449d44; --bs-btn-hover-border-color: #398439; --bs-btn-active-bg: #398439; --bs-btn-active-border-color: #255625; }
.btn-info    { --bs-btn-color: #fff; --bs-btn-bg: #5bc0de; --bs-btn-border-color: #46b8da; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #31b0d5; --bs-btn-hover-border-color: #269abc; --bs-btn-active-color: #fff; --bs-btn-active-bg: #269abc; --bs-btn-active-border-color: #1b6d85; --bs-btn-disabled-color: #fff; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-bg: #f0ad4e; --bs-btn-border-color: #eea236; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ec971f; --bs-btn-hover-border-color: #d58512; --bs-btn-active-color: #fff; --bs-btn-active-bg: #d58512; --bs-btn-active-border-color: #985f0d; }
.btn-danger  { --bs-btn-bg: #d9534f; --bs-btn-border-color: #d43f3a; --bs-btn-hover-bg: #c9302c; --bs-btn-hover-border-color: #ac2925; --bs-btn-active-bg: #ac2925; --bs-btn-active-border-color: #761c19; }

.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* Let multi-line fields grow to their `rows` (BS3 shipped this override; the
   fixed .form-control height above would otherwise collapse them to one line). */
textarea.form-control {
    height: auto;
}
.form-control::placeholder {
    color: #999;
    opacity: 1;
}
/* BS3 styled <select> through .form-control, so dropdowns matched text inputs.
   BS5 moved them to .form-select with its own larger padding/font, which made
   them taller than every neighbouring input. Bring them back in line. */
.form-select:not(.form-select-sm, .form-select-lg) {
    height: 34px;
    padding: 6px 24px 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-position: right 8px center;
    background-size: 12px 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* List-style selects (multiple / size>1) render their options inline, so the
   fixed height above would clip them. */
.form-select[multiple],
.form-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 12px;
}

.form-label {
    margin-bottom: 5px;
    font-weight: 700;
}

.form-text {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 100%;
    color: #737373;
}

.input-group-text {
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* BS5 fades a .btn only via the :disabled pseudo-class (form controls) and the
   .disabled class; BS3 also faded the [disabled] attribute, which templates set
   on <a class="btn"> (e.g. delete buttons that must be blocked). Restore it so
   those anchors look disabled and stop responding to clicks. */
.btn[disabled] {
    opacity: 0.65;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* BS3 tables were transparent so they blended into the card/well behind them;
   BS5 defaults .table to solid white (--bs-table-bg). Restore transparency —
   the contextual row classes below still set their own backgrounds. */
/* BS3 table cells had no colour of their own and inherited the page text colour
   (myclub_v3.css sets body { color: #555 }). BS5 paints every cell explicitly
   with --bs-table-color, which defaults to --bs-emphasis-color (#000) — not
   --bs-body-color — so all table text turned pure black. Restore inheritance
   rather than hard-coding a value, so a colour set on the <table> or <tr>
   still reaches the cells the way it did in BS3. */
.table {
    --bs-table-bg: transparent;
    /* BS3 drew every table border in #ddd regardless of the row's colour; BS5
       derives it from --bs-border-color (#dee2e6) and per-variant shades. */
    --bs-table-border-color: #ddd;
    --bs-table-color: inherit;
    --bs-table-striped-color: inherit;
    --bs-table-active-color: inherit;
    --bs-table-hover-color: inherit;
}
/* Contextual row backgrounds. BS3 named these .active/.success/.info/.warning/
   .danger on the <tr>; BS5 renamed them .table-*. Support both on one rule so
   legacy/cached table markup (e.g. stored statistics HTML) keeps its colours. */
.table-active,  .table > tbody > tr.active,  .table > tbody > tr > td.active  { --bs-table-bg: #f5f5f5; }
.table-success, .table > tbody > tr.success, .table > tbody > tr > td.success { --bs-table-bg: #dff0d8; }
.table-info,    .table > tbody > tr.info,    .table > tbody > tr > td.info    { --bs-table-bg: #d9edf7; }
.table-warning, .table > tbody > tr.warning, .table > tbody > tr > td.warning { --bs-table-bg: #fcf8e3; }
.table-danger,  .table > tbody > tr.danger,  .table > tbody > tr > td.danger  { --bs-table-bg: #f2dede; }
/* BS5's contextual variants also hard-code #000 text and a border shaded to
   match the row; BS3 left contextual rows at the inherited page colour and the
   plain #ddd border, so a coloured row read as one block instead of a stack of
   outlined bands. */
.table-primary, .table-secondary, .table-success, .table-info,
.table-warning, .table-danger, .table-light, .table-active {
    --bs-table-border-color: #ddd;
    --bs-table-color: inherit;
    --bs-table-striped-color: inherit;
    --bs-table-active-color: inherit;
    --bs-table-hover-color: inherit;
}
/* A contextual colour should fill the row uniformly, so cancel any striped
   overlay on it (BS5's --bs-table-bg-type and the DataTables box-shadow stripe),
   as in BS3. */
.table-active > *,  .table-success > *, .table-info > *, .table-warning > *, .table-danger > *,
.table > tbody > tr.active > *,  .table > tbody > tr.success > *, .table > tbody > tr.info > *,
.table > tbody > tr.warning > *, .table > tbody > tr.danger > * {
    --bs-table-bg-type: transparent;
    box-shadow: none !important;
}
/* Same for contextual classes on individual cells (td.table-danger, or legacy
   td.danger in stored HTML) — BS5 paints the stripe as an inset box-shadow on
   each odd-row cell, which would cover the cell's own colour. The td selectors
   out-rank .table-striped > tbody > tr:nth-of-type(odd) > *. */
.table > tbody > tr > td.table-active, .table > tbody > tr > td.table-success,
.table > tbody > tr > td.table-info, .table > tbody > tr > td.table-warning,
.table > tbody > tr > td.table-danger,
.table > tbody > tr > td.active, .table > tbody > tr > td.success,
.table > tbody > tr > td.info, .table > tbody > tr > td.warning,
.table > tbody > tr > td.danger {
    --bs-table-bg-type: transparent;
    box-shadow: none !important;
}
.table > :not(caption) > * > * { padding: 8px; }
.table-sm > :not(caption) > * > * { padding: 5px; }
/* BS3 separated rows with a border-top on each cell; BS5 uses border-bottom,
   which draws an extra line under the last row (and drops the one above the
   first). .table-bordered's own border-width rules out-rank this. */
.table > :not(caption) > * > * {
    border-top-width: var(--bs-border-width);
    border-bottom-width: 0;
}
/* BS3 gave the header a heavier 2px rule and no line above the first row. */
.table > thead > tr > th,
.table > thead > tr > td {
    border-bottom: 2px solid var(--bs-table-border-color);
}
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

.badge {
    --bs-badge-padding-x: 0.6em;
    --bs-badge-padding-y: 0.2em;
    --bs-badge-font-size: 75%;
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: 0.25em;
    line-height: 1;
    vertical-align: baseline;
    /* BS3 default .badge (count badge) was grey; BS5 leaves .badge colorless.
       Colored variants win: .text-bg-*/.bg-* are !important, app classes
       (.act_badge, .giro_badge, .filter-*) load later. */
    color: #fff;
    background-color: #777;
}
/* BS3 bare count badges were pills (10px); BS3 labels (now .badge.text-bg-*)
   keep the 0.25em radius set above. */
.badge:not([class*="text-bg-"]) {
    --bs-badge-border-radius: 10px;
}
/* BS3 inverted badge colors inside buttons: near-black on btn-default (now
   btn-outline-secondary), white with button-colored text on colored buttons. */
.btn .badge {
    position: relative;
    top: -1px;
}
.btn-outline-secondary .badge,
.btn-default .badge {
    color: #fff;
    background-color: #333;
}
.btn-primary .badge { color: #337ab7; background-color: #fff; }
.btn-success .badge { color: #5cb85c; background-color: #fff; }
.btn-info .badge { color: #5bc0de; background-color: #fff; }
.btn-warning .badge { color: #f0ad4e; background-color: #fff; }
.btn-danger .badge { color: #d9534f; background-color: #fff; }
.text-bg-secondary { color: #fff !important; background-color: #777 !important; }
.text-bg-primary   { color: #fff !important; background-color: #337ab7 !important; }
.text-bg-success   { color: #fff !important; background-color: #5cb85c !important; }
.text-bg-info      { color: #fff !important; background-color: #5bc0de !important; }
.text-bg-warning   { color: #fff !important; background-color: #f0ad4e !important; }
.text-bg-danger    { color: #fff !important; background-color: #d9534f !important; }

.card {
    --bs-card-border-radius: 4px;
    --bs-card-border-color: #ddd;
    --bs-card-spacer-x: 15px;
    --bs-card-spacer-y: 15px;
    --bs-card-cap-padding-x: 15px;
    --bs-card-cap-padding-y: 10px;
    --bs-card-cap-bg: #f5f5f5;
    --bs-card-cap-color: #333;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
/* BS3 .panel-title > a inherited the heading colour (panels are now cards);
   BS5 leaves the anchor link-blue. */
.card-title > a {
    color: inherit;
}
/* BS3 .panel-title had no margin; BS5 .card-title adds 0.5rem bottom margin,
   which makes a heading-only card-header taller at the bottom than the top. */
.card-header .card-title {
    margin-bottom: 0;
}

.navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-nav-link-padding-x: 15px;
    min-height: 50px;
    margin-bottom: 20px;
}
/* The mobile area selectors are `float: left` divs, which BS5's flex container
   ignores — its `justify-content: space-between` then spread them across the
   bar. BS3 packed them at the left with the toggler floated right. */
.navbar > .container {
    justify-content: flex-start;
}
.navbar > .container > .navbar-toggler {
    margin-left: auto;
}
.navbar-nav {
    --bs-nav-link-padding-y: 15px;
    --bs-nav-link-padding-x: 15px;
    /* BS3 floated the nav items, so each one kept its intrinsic width and the
       ones that didn't fit dropped to a new row. BS5's flex nav shrinks them
       instead, which wraps the label mid-text ("Mina / sidor"). Wrap whole
       items, never the text inside one. */
    flex-wrap: wrap;
}
.navbar-nav .nav-link {
    white-space: nowrap;
}
/* BS3 .btn was white-space: nowrap; BS5 dropped it, so the area-selector
   buttons ("Välj grupp") break across two lines when the navbar gets tight. */
.navbar .btn {
    white-space: nowrap;
}
.nav-tabs {
    --bs-nav-link-padding-y: 10px;
    --bs-nav-link-padding-x: 15px;
    --bs-nav-tabs-border-radius: 4px 4px 0 0;
}
.nav-tabs .nav-link.active {
    color: #555;
    background-color: #fff;
    border-color: #ddd #ddd transparent;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: #337ab7;
}
.nav-pills .nav-link { border-radius: 4px; }

.pagination {
    --bs-pagination-color: #337ab7;
    --bs-pagination-hover-color: #23527c;
    --bs-pagination-focus-color: #23527c;
    --bs-pagination-active-bg: #337ab7;
    --bs-pagination-active-border-color: #337ab7;
}

.dropdown-menu {
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-color: #333;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
    --bs-dropdown-border-radius: 4px;
    --bs-dropdown-link-color: #333;
    --bs-dropdown-link-hover-color: #262626;
    --bs-dropdown-link-hover-bg: #f5f5f5;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #337ab7;
    --bs-dropdown-item-padding-y: 3px;
    --bs-dropdown-item-padding-x: 20px;
}
.dropdown-header {
    font-size: 12px;
    color: #777;
}

/* BS3 styled every <a> directly inside .dropdown-menu via a descendant selector;
   BS5 only styles .dropdown-item. Reproduce BS3 behavior for menu links that were
   not given the .dropdown-item class (e.g. the member-search "Send" menu). */
.dropdown-menu > li > a:not(.dropdown-item) {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-menu > li > a:not(.dropdown-item):hover,
.dropdown-menu > li > a:not(.dropdown-item):focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
    text-decoration: none;
}
.dropdown-menu > li.active > a:not(.dropdown-item),
.dropdown-menu > li > a.active:not(.dropdown-item) {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-menu > li.disabled > a:not(.dropdown-item),
.dropdown-menu > li > a.disabled:not(.dropdown-item) {
    color: #777;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}

.jumbotron {
    padding: 30px 15px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
    border-radius: 6px;
}
@media (min-width: 768px) {
    .jumbotron { padding: 48px 60px; }
    .jumbotron h1 { font-size: 63px; }
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.thumbnail > img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.thumbnail .caption { padding: 9px; color: #333; }

.progress { height: 20px; margin-bottom: 20px; border-radius: 4px; }
.progress-bar { --bs-progress-bar-bg: #337ab7; font-size: 12px; line-height: 20px; }

/* BS3 zeroed an alert's paragraph margins (and spaced stacked ones by 5px);
   BS5 keeps the default 1rem, which inflates the box height and pushes single
   line content to the top instead of centring it (e.g. the member-card feature
   toggles). Restore the BS3 behaviour. */
.alert > p,
.alert > ul {
    margin-bottom: 0;
}
.alert > p + p {
    margin-top: 5px;
}

/* BS3's default .breadcrumb was a light-grey rounded box; BS5's is a flat,
   transparent strip. Restore the box (desktop; the mobile size override lives in
   myclub_v3.css) and the BS3 divider/active colours. */
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #ccc;
}
.breadcrumb-item.active {
    color: #777;
}

/* BS3 dropdown menus had a drop shadow; BS5's have only a border, which makes
   them (and the multiselect menus built on them) read as flat. Restore it. */
.dropdown-menu {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

/* BS3 greyed both disabled AND readonly form controls; BS5 only greys
   :disabled and leaves readonly white. Match BS3 (#eeeeee) for both. */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: #eee;
    opacity: 1;
}