/* Bootstrap 5 CSS - Basic classes for demo */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; width: 100%; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; width: 100%; }
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }
.col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; padding: 0 15px; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 15px; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 0 15px; }
.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 15px; }
.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 0 15px; }
.col-lg-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }
.btn { display: inline-block; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 0.25rem; }
.btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; }
.btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; }
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; background-color: transparent; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-end { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.me-2 { margin-right: 0.5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.d-flex { display: flex; }
.d-block { display: block; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.w-100 { width: 100%; }
.bg-light { background-color: #f8f9fa; }
.bg-dark { background-color: #212529; }
.text-white { color: #fff; }
.text-white-50 { color: rgba(255, 255, 255, 0.5); }
.list-unstyled { list-style: none; padding-left: 0; }
.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }
.navbar-brand { padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-item { margin-bottom: 0; }
.nav-link { display: block; padding: 0.5rem 1rem; text-decoration: none; transition: color 0.15s ease-in-out; }
.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; cursor: pointer; }
.navbar-toggler:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25); }
.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.collapse:not(.show) { display: none; }
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.navbar-dark .navbar-brand { color: rgba(255, 255, 255, 0.9); }
.navbar-dark .nav-link { color: rgba(255, 255, 255, 0.55); }
.navbar-dark .nav-link.active { color: #fff; }
.navbar-expand-lg .navbar-nav { flex-direction: row; }
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }
.ms-auto { margin-left: auto; }
.form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; }
.form-group { margin-bottom: 1rem; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; }
.card-header { padding: 0.5rem 1rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.card-body { flex: 1 1 auto; padding: 1rem; }

@media (max-width: 768px) {
    .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8 { flex: 0 0 100%; max-width: 100%; }
    .text-end { text-align: left; }
    .navbar-expand-lg .navbar-nav { flex-direction: column; }
    .row { margin-left: 0; margin-right: 0; }
}

@media (max-width: 992px) {
    .col-lg-4, .col-lg-8, .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}