/* Bootstrap 4 class names that Bootstrap 5 removed. The pages keep these names, because customers write XPaths
   and CSS selectors against them. This file gives each name its Bootstrap 4 look. It covers only the names that
   the site uses. Add a rule here when a page needs a new one. */

/* Spacing, alignment, font weight */
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-3 { margin-right: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-3 { padding-right: 1rem !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }

/* Screen reader text */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Buttons and forms */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.form-control-file { display: block; width: 100%; }

.custom-select {
    display: inline-block; width: 100%; padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem; line-height: 1.5; color: #212529; vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") right .75rem center / 16px 12px no-repeat;
    border: 1px solid #ced4da; border-radius: .375rem; appearance: none;
}
.custom-select-sm { padding-top: .25rem; padding-bottom: .25rem; padding-left: .5rem; font-size: .875rem; border-radius: .25rem; }

.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }
.custom-control-input { position: absolute; left: 0; z-index: 1; width: 1rem; height: 1.25rem; opacity: 1; }
.custom-control-label { margin-bottom: 0; vertical-align: top; }
.custom-file { position: relative; display: inline-block; width: 100%; margin-bottom: 0; }
.custom-file-input { position: relative; z-index: 2; width: 100%; margin: 0; }
.custom-file-label {
    position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem;
    overflow: hidden; line-height: 1.5; color: #495057; pointer-events: none; background-color: #fff;
    border: 1px solid #ced4da; border-radius: .375rem;
}

/* Close button of an alert or a modal */
.close {
    float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000;
    text-shadow: 0 1px 0 #fff; opacity: .5;
}
.close:hover { color: #000; text-decoration: none; opacity: .75; }
button.close { padding: 0; background-color: transparent; border: 0; appearance: none; }

/* Media object, table header, responsive embed */
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }
.thead-light th { color: #495057; background-color: #e9ecef; border-color: #dee2e6; }
.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { display: block; content: ""; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
    position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.embed-responsive-21by9::before { padding-top: 42.857143%; }

/* DataTables controls with the old class names (see wwwroot/js/datatables-compat.js) */
div.dataTables_wrapper div.dataTables_length label { font-weight: normal; text-align: left; white-space: nowrap; }
div.dataTables_wrapper div.dataTables_length select { width: auto; display: inline-block; margin: 0 .25em; }
div.dataTables_wrapper div.dataTables_filter { text-align: right; }
div.dataTables_wrapper div.dataTables_filter label { font-weight: normal; white-space: nowrap; text-align: left; }
div.dataTables_wrapper div.dataTables_filter input { margin-left: .5em; display: inline-block; width: auto; }
div.dataTables_wrapper div.dataTables_info { padding-top: .85em; }
div.dataTables_wrapper div.dataTables_paginate { margin: 0; white-space: nowrap; text-align: right; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 2px 0; white-space: nowrap; justify-content: flex-end; }

/* Bootstrap 4 columns were position: relative. Some pages place an element inside a column with position: absolute. */
.col, [class*="col-"] { position: relative; }

/* Badges: Bootstrap 4 left the text color alone, and the colored badges were named badge-*. */
.badge { --bs-badge-color: inherit; }
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-success { color: #fff; background-color: #28a745; }
.badge-danger { color: #fff; background-color: #dc3545; }

/* Bootstrap 4 underlined a link only on hover. Bootstrap 5 underlines every link. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Bootstrap 4 spacing and corners. Bootstrap 5 changed these defaults, and every page would look different.
   Bootstrap 5 reads these values from CSS variables, so the pages keep their Bootstrap 4 look without new markup. */
:root {
    --bs-border-radius: .25rem;
    --bs-border-radius-sm: .2rem;
    --bs-border-radius-lg: .3rem;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .row {
    --bs-gutter-x: 30px;
}
.card {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-cap-padding-y: .75rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-border-radius: .25rem;
    --bs-card-inner-border-radius: calc(.25rem - 1px);
}
.alert { --bs-alert-padding-y: .75rem; --bs-alert-padding-x: 1.25rem; --bs-alert-border-radius: .25rem; }
.list-group { --bs-list-group-item-padding-y: .75rem; --bs-list-group-item-padding-x: 1.25rem; --bs-list-group-border-radius: .25rem; }
.pagination { --bs-pagination-padding-y: .5rem; --bs-pagination-padding-x: .75rem; --bs-pagination-border-radius: .25rem; }
.btn { --bs-btn-border-radius: .25rem; }
.breadcrumb {
    --bs-breadcrumb-padding-x: 1rem;
    --bs-breadcrumb-padding-y: .75rem;
    --bs-breadcrumb-bg: #e9ecef;
    --bs-breadcrumb-border-radius: .25rem;
    --bs-breadcrumb-margin-bottom: 1rem;
}
.table > :not(caption) > * > * { padding: .75rem; }
.table-sm > :not(caption) > * > * { padding: .3rem; }