/*
 * Compatibility helpers for legacy Bootstrap 4 markup running on Bootstrap 5.
 * New templates should use Bootstrap 5 utilities and data-bs-* attributes.
 */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !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; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.float-left,
.pull-left { float: left !important; }
.float-right,
.pull-right { float: right !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }

@media (min-width: 576px) {
    .ml-sm-0 { margin-left: 0 !important; }
    .ml-sm-1 { margin-left: .25rem !important; }
    .ml-sm-2 { margin-left: .5rem !important; }
    .ml-sm-3 { margin-left: 1rem !important; }
    .ml-sm-4 { margin-left: 1.5rem !important; }
    .ml-sm-5 { margin-left: 3rem !important; }
    .ml-sm-auto { margin-left: auto !important; }
    .mr-sm-0 { margin-right: 0 !important; }
    .mr-sm-1 { margin-right: .25rem !important; }
    .mr-sm-2 { margin-right: .5rem !important; }
    .mr-sm-3 { margin-right: 1rem !important; }
    .mr-sm-4 { margin-right: 1.5rem !important; }
    .mr-sm-5 { margin-right: 3rem !important; }
    .mr-sm-auto { margin-right: auto !important; }
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}

@media (min-width: 768px) {
    .ml-md-0 { margin-left: 0 !important; }
    .ml-md-1 { margin-left: .25rem !important; }
    .ml-md-2 { margin-left: .5rem !important; }
    .ml-md-3 { margin-left: 1rem !important; }
    .ml-md-4 { margin-left: 1.5rem !important; }
    .ml-md-5 { margin-left: 3rem !important; }
    .ml-md-auto { margin-left: auto !important; }
    .mr-md-0 { margin-right: 0 !important; }
    .mr-md-1 { margin-right: .25rem !important; }
    .mr-md-2 { margin-right: .5rem !important; }
    .mr-md-3 { margin-right: 1rem !important; }
    .mr-md-4 { margin-right: 1.5rem !important; }
    .mr-md-5 { margin-right: 3rem !important; }
    .mr-md-auto { margin-right: auto !important; }
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
}

@media (min-width: 992px) {
    .ml-lg-0 { margin-left: 0 !important; }
    .ml-lg-1 { margin-left: .25rem !important; }
    .ml-lg-2 { margin-left: .5rem !important; }
    .ml-lg-3 { margin-left: 1rem !important; }
    .ml-lg-4 { margin-left: 1.5rem !important; }
    .ml-lg-5 { margin-left: 3rem !important; }
    .ml-lg-auto { margin-left: auto !important; }
    .mr-lg-0 { margin-right: 0 !important; }
    .mr-lg-1 { margin-right: .25rem !important; }
    .mr-lg-2 { margin-right: .5rem !important; }
    .mr-lg-3 { margin-right: 1rem !important; }
    .mr-lg-4 { margin-right: 1.5rem !important; }
    .mr-lg-5 { margin-right: 3rem !important; }
    .mr-lg-auto { margin-right: auto !important; }
    .text-lg-left { text-align: left !important; }
    .text-lg-right { text-align: right !important; }
}

@media (min-width: 1200px) {
    .ml-xl-0 { margin-left: 0 !important; }
    .ml-xl-1 { margin-left: .25rem !important; }
    .ml-xl-2 { margin-left: .5rem !important; }
    .ml-xl-3 { margin-left: 1rem !important; }
    .ml-xl-4 { margin-left: 1.5rem !important; }
    .ml-xl-5 { margin-left: 3rem !important; }
    .ml-xl-auto { margin-left: auto !important; }
    .mr-xl-0 { margin-right: 0 !important; }
    .mr-xl-1 { margin-right: .25rem !important; }
    .mr-xl-2 { margin-right: .5rem !important; }
    .mr-xl-3 { margin-right: 1rem !important; }
    .mr-xl-4 { margin-right: 1.5rem !important; }
    .mr-xl-5 { margin-right: 3rem !important; }
    .mr-xl-auto { margin-right: auto !important; }
    .text-xl-left { text-align: left !important; }
    .text-xl-right { text-align: right !important; }
}

.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-group { margin-bottom: 1rem; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.btn-block { display: block; width: 100%; }
.input-group-prepend,
.input-group-append { display: flex; }
.input-group-prepend { margin-right: -1px; }
.input-group-append { margin-left: -1px; }
.input-group-prepend .btn,
.input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append .btn,
.input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.badge-primary { color: #fff; background-color: var(--bs-primary); }
.badge-secondary { color: #fff; background-color: var(--bs-secondary); }
.badge-success { color: #fff; background-color: var(--bs-success); }
.badge-danger { color: #fff; background-color: var(--bs-danger); }
.badge-warning { color: #212529; background-color: var(--bs-warning); }
.badge-info { color: #000; background-color: var(--bs-info); }
.badge-light { color: #212529; background-color: var(--bs-light); }
.badge-dark { color: #fff; background-color: var(--bs-dark); }

.close {
    float: right;
    padding: 0;
    border: 0;
    color: #000;
    background: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    text-shadow: 0 1px 0 #fff;
}

.close:hover { color: #000; text-decoration: none; opacity: .75; }

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.custom-control-inline { display: inline-flex; margin-right: 1rem; }
.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

.custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; }
.custom-control-label::before,
.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
}

.custom-control-label::before { border: 1px solid #adb5bd; background-color: #fff; }
.custom-checkbox .custom-control-label::before { border-radius: .25rem; }
.custom-radio .custom-control-label::before { border-radius: 50%; }
.custom-control-input:checked ~ .custom-control-label::before { border-color: var(--bs-primary); background-color: var(--bs-primary); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background: center / 50% 50% no-repeat url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75 3.59 5.465 1.353 3.335.25 4.493l3.52 3.35L7.75 1.63z'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    border-radius: 50%;
    background: #fff;
    transform: scale(.45);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.custom-control-input:disabled ~ .custom-control-label { color: #6c757d; }

.custom-switch { padding-left: 2.25rem; }
.custom-switch .custom-control-label::before { left: -2.25rem; width: 1.75rem; border-radius: .5rem; }
.custom-switch .custom-control-label::after {
    top: calc(.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    border-radius: .5rem;
    background: #adb5bd;
    transition: transform .15s ease-in-out;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background: #fff; transform: translateX(.75rem); }

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

.custom-file { position: relative; display: inline-block; width: 100%; height: calc(1.5em + .75rem + 2px); }
.custom-file-input { position: relative; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; }
.custom-file-label {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #fff;
    color: #495057;
}
.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: .375rem .75rem;
    border-left: inherit;
    border-radius: 0 .25rem .25rem 0;
    background-color: #e9ecef;
    content: "Browse";
}

.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }
.card-deck { display: flex; flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }
.card-deck > .card { flex: 1 0 0%; margin-right: 15px; margin-bottom: 15px; margin-left: 15px; }
.jumbotron { margin-bottom: 2rem; padding: 2rem 1rem; border-radius: .3rem; background-color: #e9ecef; }
.dropdown-menu-left { right: auto; left: 0; }
.dropdown-menu-right { right: 0; left: auto; }
.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 embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-responsive-21by9::before { padding-top: 42.857143%; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before { padding-top: 75%; }
.embed-responsive-1by1::before { padding-top: 100%; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-only-focusable:active,
.sr-only-focusable:focus { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
