/*
 * Bootstrap 4 compatibility shim for Bootstrap 5.3.8.
 * Restores the Bootstrap 4.0.0 classes that Bootstrap 5 dropped but that markup
 * in IMUOnline still uses. Values copied from bootstrap-4.0.0/bootstrap.css.
 * Prefer the Bootstrap 5 equivalent (noted per rule) in new or touched markup.
 */

/* form-group -> use mb-3 */
.form-group {
    margin-bottom: 1rem;
}

/* form-row -> use row g-2 */
.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;
}

/* btn-block -> use w-100 (or d-grid wrapper) */
.btn-block {
    display: block;
    width: 100%;
}

.btn-block + .btn-block {
    margin-top: .5rem;
}

/* text-left / text-right -> use text-start / text-end */
.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* float-left / float-right -> use float-start / float-end */
.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

/* pl-* / pr-* / ml-* / mr-* -> use ps-* / pe-* / ms-* / me-* */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* sr-only -> use visually-hidden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

/* input-group-prepend / -append -> put the .input-group-text directly in .input-group */
.input-group-prepend,
.input-group-append {
    display: flex;
}

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

/* custom-select -> use form-select */
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
    background-size: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    appearance: none;
}

/* close -> use btn-close (Bootstrap 5 draws its own X; .close keeps the text glyph) */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}