/* Design: see new-design-php/docs/design-system.md + page-patterns.md */
:root {
    --hp-text-white: var(--hp-color-white);
    --hp-text-white-50: rgba(var(--hp-color-white-rgb), .5);
    --hp-text-muted: rgba(var(--hp-color-white-rgb), .5);
    --hp-text-secondary: rgba(var(--hp-color-white-rgb), .6);
    --hp-text-danger: var(--hp-color-danger-text);
    --hp-text-success: var(--hp-color-success-text);
    --hp-text-warning: var(--hp-color-warning-soft);
    --hp-text-info: var(--hp-color-info-text);
    --hp-text-dark: var(--hp-color-ink-strong);
    --hp-text-light: rgba(var(--hp-color-white-rgb), .9);
    --hp-text-body: rgba(var(--hp-color-white-rgb), .78);
    --hp-text-black-50: rgba(var(--hp-color-black-rgb), .5);
    --hp-bg-primary: var(--hp-color-accent);
    --hp-bg-secondary: rgba(var(--hp-color-white-rgb), .12);
    --hp-bg-success: var(--hp-color-success);
    --hp-bg-danger: var(--hp-color-danger);
    --hp-bg-warning: var(--hp-color-warning);
    --hp-bg-info: var(--hp-color-info);
    --hp-bg-light: rgba(var(--hp-color-white-rgb), .92);
    --hp-bg-dark: var(--hp-color-canvas);
    --hp-bg-white: var(--hp-color-white);
    --hp-bg-body: var(--hp-color-canvas);
    --hp-border-secondary: rgba(var(--hp-color-white-rgb), .2);
    --hp-border-white: rgba(var(--hp-color-white-rgb), .6);
    --hp-border-danger: var(--hp-color-danger);
    --hp-border-success: var(--hp-color-success);
    --hp-border-warning: var(--hp-color-warning);
    --hp-border-info: var(--hp-color-info);
    --hp-border-dark: var(--hp-color-ink-strong);
    --hp-border-light: rgba(var(--hp-color-white-rgb), .4);
    --hp-border-transparent: transparent;
}

/* ==========================================================================
   Hotpic base.css — Bootstrap-compatible subset (no Bootstrap CSS loaded)
   ========================================================================== */

/* ---------- reset & helpers ---------- */

/* ---------- base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.5; color: var(--hp-color-white); background-color: var(--hp-color-canvas); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 600; line-height: 1.2; color: var(--hp-color-white); }
p { margin-top: 0; margin-bottom: 1rem; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hp-color-white); }
img, svg { vertical-align: middle; }
img { max-width: 100%; height: auto; }
ul, ol { margin-top: 0; }
button { font-family: inherit; }
.table, table { border-collapse: collapse; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--hp-color-border-on-glass); opacity: 1; }

/* ---------- grid ---------- */
.container, .container-fluid { width: 100%; padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem); margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5); }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.g-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--hp-color-white); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; user-select: none; border: 1px solid transparent; border-radius: .375rem; background-color: transparent; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; }
.btn:hover { color: var(--hp-color-white); }
.btn:disabled, .btn.disabled { pointer-events: none; opacity: .65; }
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .5rem; }
.btn-light { background: rgba(var(--hp-color-white-rgb), .92) !important; border-color: rgba(var(--hp-color-white-rgb), .92) !important; color: var(--hp-color-canvas-soft) !important; }
.btn-light:hover { background: var(--hp-color-white) !important; }
.btn-white { background: var(--hp-color-white) !important; border-color: var(--hp-color-white) !important; color: var(--hp-color-canvas-soft) !important; }
.btn-secondary { background: rgba(var(--hp-color-white-rgb), .08) !important; border-color: var(--hp-color-border-on-glass) !important; color: var(--hp-color-white) !important; }
.btn-dark { background: rgba(var(--hp-color-black-rgb), .55) !important; border-color: var(--hp-color-border-on-glass) !important; color: var(--hp-color-white) !important; }
.btn-primary { background: var(--hp-color-accent) !important; border-color: var(--hp-color-accent) !important; color: var(--hp-color-white) !important; }
.btn-danger { background: var(--hp-color-danger) !important; border-color: var(--hp-color-danger) !important; color: var(--hp-color-white) !important; }
.btn-outline-light { background: transparent !important; border-color: rgba(var(--hp-color-white-rgb), .4) !important; color: var(--hp-color-white) !important; }
.btn-outline-secondary, .btn-outline-primary { background: transparent !important; border-color: rgba(var(--hp-color-white-rgb), .18) !important; color: rgba(var(--hp-color-white-rgb), .8) !important; }
.btn-group, .btn-group-vertical { display: inline-flex; vertical-align: middle; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: .375rem 0 0 .375rem; }
.btn-group > .btn:last-child { border-radius: 0 .375rem .375rem 0; }
.btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: .25em; color: var(--hp-color-white); background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: .375rem; opacity: .6; cursor: pointer; }
.btn-close:hover { opacity: 1; }
.btn-close-white { filter: invert(1); }

/* ---------- forms ---------- */
.form-control, .form-select { display: block; width: 100%; padding: .5rem .85rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--hp-color-white); background-color: rgba(var(--hp-color-white-rgb), .04); border: 1px solid var(--hp-color-border-on-glass); border-radius: .5rem; transition: border-color .15s, box-shadow .15s; appearance: none; }
.form-control:focus, .form-select:focus { outline: 0; border-color: rgba(var(--hp-color-accent-rgb), .8); box-shadow: 0 0 0 3px rgba(var(--hp-color-accent-rgb), .2); }
.form-control::placeholder { color: rgba(var(--hp-color-white-rgb), .35); }
.form-control-sm { padding: .25rem .5rem; font-size: .875rem; }
.form-control-lg { padding: .65rem 1rem; font-size: 1.05rem; }
.form-select { padding-right: 2rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
.form-label { margin-bottom: .5rem; display: inline-block; }
.form-text { margin-top: .25rem; font-size: .875em; }
.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: .125rem; }
.form-check .form-check-input { float: left; margin-left: -1.5em; }
.form-check-input { width: 1em; height: 1em; margin-top: .25em; vertical-align: top; background-color: rgba(var(--hp-color-white-rgb), .08); border: 1px solid rgba(var(--hp-color-white-rgb), .22); border-radius: .25em; appearance: none; cursor: pointer; }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--hp-color-accent); border-color: var(--hp-color-accent); }
.form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-label { cursor: pointer; }
.form-switch .form-check-input { width: 2em; border-radius: 2em; background-position: left center; }
.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-text { display: flex; align-items: center; padding: .5rem .85rem; font-size: 1rem; color: rgba(var(--hp-color-white-rgb), .6); background: rgba(var(--hp-color-white-rgb), .04); border: 1px solid var(--hp-color-border-on-glass); border-radius: .5rem; }
.input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---------- cards ---------- */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background: rgba(var(--hp-color-white-rgb), .03); border: 1px solid var(--hp-color-border-soft); border-radius: .75rem; }
.card-body { flex: 1 1 auto; padding: 1rem; }
.card-header { padding: .75rem 1rem; margin-bottom: 0; background: rgba(var(--hp-color-white-rgb), .03); border-bottom: 1px solid var(--hp-color-border-soft); }
.card-footer { padding: .75rem 1rem; background: rgba(var(--hp-color-white-rgb), .03); border-top: 1px solid var(--hp-color-border-soft); }
.card-title { margin-bottom: .5rem; }
.card-text:last-child { margin-bottom: 0; }

/* ---------- alerts ---------- */
.alert { position: relative; padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--hp-color-border); border-radius: .75rem; }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.1rem 1rem; }
.alert-info { background: rgba(var(--hp-color-accent-rgb), .1); }
.alert-warning { background: rgba(var(--hp-color-warning-rgb), .1); }
.alert-danger { background: rgba(var(--hp-color-danger-rgb), .1); }
.alert-success { background: rgba(var(--hp-color-success-rgb), .1); }
.alert-primary { background: rgba(var(--hp-color-accent-rgb), .1); }
.alert-secondary, .alert-light, .alert-dark { background: rgba(var(--hp-color-white-rgb), .05); }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: .35em .65em; font-size: .75em; font-weight: 600; line-height: 1; color: var(--hp-color-white); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .375rem; }
.badge.bg-dark, .bg-dark.badge { background: rgba(var(--hp-color-white-rgb), .08) !important; }
.bg-primary { background: var(--hp-color-accent) !important; }
.bg-secondary { background: var(--hp-color-border-strong) !important; }
.bg-danger { background: var(--hp-color-danger) !important; }
.bg-success { background: var(--hp-color-success) !important; }
.bg-white { background: var(--hp-color-white) !important; }
.bg-black { background: var(--hp-color-black) !important; }
.bg-dark { background-color: var(--hp-color-canvas) !important; }
.bg-light { background: rgba(var(--hp-color-white-rgb), .92) !important; }
.bg-opacity-10 { --bs-bg-opacity: .1; }
.bg-opacity-25 { --bs-bg-opacity: .25; }
.bg-opacity-50 { --bs-bg-opacity: .5; }
.bg-opacity-75 { --bs-bg-opacity: .75; }
/* the .bg-* colour utilities below consume --bs-bg-opacity, so combining
   e.g. .bg-dark.bg-opacity-50 produces a real translucent overlay */

/* ---------- tables ---------- */
.table { width: 100%; margin-bottom: 1rem; color: rgba(var(--hp-color-white-rgb), .78); vertical-align: top; border-color: var(--hp-color-border-soft); }
.table > :not(caption) > * > * { padding: .6rem .75rem; background-color: transparent; border-bottom: 1px solid var(--hp-color-border-soft); }
.table-hover > tbody > tr:hover > * { background: rgba(var(--hp-color-white-rgb), .04) !important; }
.table-responsive { overflow-x: auto; }

/* ---------- pagination ---------- */
.pagination { display: flex; padding-left: 0; list-style: none; margin: 0; gap: 4px; }
.page-item { list-style: none; }
.page-link { display: block; padding: .45rem .75rem; color: rgba(var(--hp-color-white-rgb), .8); text-decoration: none; background: rgba(var(--hp-color-white-rgb), .04); border: 1px solid var(--hp-color-border); border-radius: .5rem; cursor: pointer; }
.page-link:hover { background: rgba(var(--hp-color-white-rgb), .08); color: var(--hp-color-white); }
.page-item.active .page-link { background: var(--hp-color-accent); border-color: var(--hp-color-accent); color: var(--hp-color-white); }
.page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* ---------- nav ---------- */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { display: block; padding: .5rem 1rem; color: rgba(var(--hp-color-white-rgb), .7); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav-link:hover { color: var(--hp-color-white); }
.nav-tabs { border-bottom: 1px solid var(--hp-color-border); }
.nav-tabs .nav-link { margin-bottom: -1px; border: 1px solid transparent; border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.nav-tabs .nav-link.active { color: var(--hp-color-white); background: rgba(var(--hp-color-white-rgb), .06); border-color: var(--hp-color-border) var(--hp-color-border) transparent; }
.nav-pills .nav-link { border-radius: .5rem; }
.nav-pills .nav-link.active { background: var(--hp-color-accent); color: var(--hp-color-white); }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* ---------- dropdown ---------- */
.dropdown, .dropup, .dropend, .dropstart { position: relative; }
.dropdown-toggle::after { display: inline-block; margin-left: .35em; vertical-align: .2em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }
.dropdown-toggle:empty::after { margin-left: 0; }
.dropdown-menu { position: absolute; z-index: 1000; display: none; min-width: 10rem; padding: .5rem 0; margin: 0; font-size: 1rem; color: var(--hp-color-white); text-align: left; list-style: none; background: var(--hp-color-surface); border: 1px solid var(--hp-color-border); border-radius: .75rem; box-shadow: 0 16px 40px rgba(var(--hp-color-black-rgb), .5); }
.dropdown-menu.show { display: block; }
.dropdown-item { display: block; width: 100%; padding: .45rem 1rem; clear: both; font-weight: 400; color: rgba(var(--hp-color-white-rgb), .8); text-align: inherit; text-decoration: none; white-space: nowrap; background: none; border: 0; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--hp-color-accent-rgb), .16); color: var(--hp-color-white); }
.dropdown-divider { height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid var(--hp-color-border); }
.dropdown-header { display: block; padding: .5rem 1rem; font-size: .875rem; color: rgba(var(--hp-color-white-rgb), .5); }

/* ---------- modal (Bootstrap JS drives .show / .modal-open) ---------- */
.modal { position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal.show { display: block; }
.modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; }
.modal.fade .modal-dialog { transition: transform .3s ease-out; transform: translate(0, -50px); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
.modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); content: ""; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: var(--hp-color-surface); border: 1px solid var(--hp-color-border-on-glass); border-radius: 1rem; outline: 0; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: var(--hp-color-black); }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .72; }
.modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--hp-color-border); }
.modal-header .btn-close { padding: .5rem; margin: -.5rem -.5rem -.5rem auto; }
.modal-title { margin-bottom: 0; line-height: 1.5; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
.modal-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: .75rem; border-top: 1px solid var(--hp-color-border); }
body.modal-open { overflow: hidden; }
@media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } .modal-dialog-centered::before { height: calc(100vh - 3.5rem); } }
@media (min-width: 992px) { .modal-lg { max-width: 800px; } .modal-xl { max-width: 1140px; } }

/* ---------- toast ---------- */
.toast-container { position: fixed; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: 100%; pointer-events: none; }
.toast { width: 350px; max-width: 100%; font-size: .875rem; color: var(--hp-color-white); background: rgba(var(--hp-color-overlay-soft-rgb), .98); border: 1px solid var(--hp-color-border-on-glass); border-radius: .75rem; box-shadow: 0 16px 40px rgba(var(--hp-color-black-rgb), .5); pointer-events: auto; }
.toast:not(.show) { display: none; }
.toast-header { display: flex; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--hp-color-border); border-top-left-radius: .75rem; border-top-right-radius: .75rem; }
.toast-body { padding: .75rem; word-wrap: break-word; }

/* ---------- collapse ---------- */
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }
.collapse.show { display: block; }

/* ---------- spinner / progress ---------- */
.spinner-border { display: inline-block; width: 2rem; height: 2rem; vertical-align: -.125em; border: .25em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }
@keyframes spinner-border { to { transform: rotate(360deg); } }
.spinner-grow { display: inline-block; width: 2rem; height: 2rem; vertical-align: -.125em; border-radius: 50%; background-color: currentColor; animation: spinner-grow .75s linear infinite; opacity: 0; }
@keyframes spinner-grow { 0% { transform: scale(0); } 50% { opacity: 1; } }
.progress { display: flex; height: 1rem; overflow: hidden; font-size: .75rem; background: rgba(var(--hp-color-white-rgb), .08); border-radius: 999px; }
.progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: var(--hp-color-white); text-align: center; white-space: nowrap; background: var(--hp-color-accent); transition: width .6s ease; }

/* ---------- list group / breadcrumb ---------- */
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: .75rem; }
.list-group-item { position: relative; display: block; padding: .6rem 1rem; color: rgba(var(--hp-color-white-rgb), .8); background: rgba(var(--hp-color-white-rgb), .03); border: 1px solid var(--hp-color-border-soft); }
.list-group-item + .list-group-item { border-top-width: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: 1rem; list-style: none; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 .5rem; color: rgba(var(--hp-color-white-rgb), .4); }

/* ---------- misc ---------- */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.clearfix::after { display: block; clear: both; content: ""; }
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.visually-hidden { 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; }
@keyframes fade { transition: opacity .15s linear; }
.carousel { position: relative; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-item { position: relative; display: none; width: 100%; }
.carousel-item.active { display: block; }
.carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 15%; color: var(--hp-color-white); }
.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }

/* ---------- grid ---------- */
.col-1 { flex: 0 0 auto; width: 8.3333%; }
.col-2 { flex: 0 0 auto; width: 16.6667%; }
.col-3 { flex: 0 0 auto; width: 25.0000%; }
.col-4 { flex: 0 0 auto; width: 33.3333%; }
.col-5 { flex: 0 0 auto; width: 41.6667%; }
.col-6 { flex: 0 0 auto; width: 50.0000%; }
.col-7 { flex: 0 0 auto; width: 58.3333%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; }
.col-9 { flex: 0 0 auto; width: 75.0000%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100.0000%; }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 auto; width: 8.3333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25.0000%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50.0000%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75.0000%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100.0000%; }
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
}
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 auto; width: 8.3333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-md-3 { flex: 0 0 auto; width: 25.0000%; }
  .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6 { flex: 0 0 auto; width: 50.0000%; }
  .col-md-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9 { flex: 0 0 auto; width: 75.0000%; }
  .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-md-12 { flex: 0 0 auto; width: 100.0000%; }
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
}
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 auto; width: 8.3333%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50.0000%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75.0000%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100.0000%; }
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
}
@media (min-width: 1200px) {
  .col-xl-1 { flex: 0 0 auto; width: 8.3333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25.0000%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50.0000%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75.0000%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100.0000%; }
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
}
@media (min-width: 1400px) {
  .col-xxl-1 { flex: 0 0 auto; width: 8.3333%; }
  .col-xxl-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-xxl-3 { flex: 0 0 auto; width: 25.0000%; }
  .col-xxl-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-xxl-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-xxl-6 { flex: 0 0 auto; width: 50.0000%; }
  .col-xxl-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-xxl-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-xxl-9 { flex: 0 0 auto; width: 75.0000%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100.0000%; }
  .col-xxl { flex: 1 0 0%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
}

/* ---------- spacing ---------- */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
@media (min-width: 576px) {
  .m-sm-0 { margin: 0 !important; }
  .m-sm-1 { margin: 0.25rem !important; }
  .m-sm-2 { margin: 0.5rem !important; }
  .m-sm-3 { margin: 1rem !important; }
  .m-sm-4 { margin: 1.5rem !important; }
  .m-sm-5 { margin: 3rem !important; }
  .mt-sm-0 { margin-top: 0 !important; }
  .mt-sm-1 { margin-top: 0.25rem !important; }
  .mt-sm-2 { margin-top: 0.5rem !important; }
  .mt-sm-3 { margin-top: 1rem !important; }
  .mt-sm-4 { margin-top: 1.5rem !important; }
  .mt-sm-5 { margin-top: 3rem !important; }
  .mb-sm-0 { margin-bottom: 0 !important; }
  .mb-sm-1 { margin-bottom: 0.25rem !important; }
  .mb-sm-2 { margin-bottom: 0.5rem !important; }
  .mb-sm-3 { margin-bottom: 1rem !important; }
  .mb-sm-4 { margin-bottom: 1.5rem !important; }
  .mb-sm-5 { margin-bottom: 3rem !important; }
  .ms-sm-0 { margin-left: 0 !important; }
  .ms-sm-1 { margin-left: 0.25rem !important; }
  .ms-sm-2 { margin-left: 0.5rem !important; }
  .ms-sm-3 { margin-left: 1rem !important; }
  .ms-sm-4 { margin-left: 1.5rem !important; }
  .ms-sm-5 { margin-left: 3rem !important; }
  .me-sm-0 { margin-right: 0 !important; }
  .me-sm-1 { margin-right: 0.25rem !important; }
  .me-sm-2 { margin-right: 0.5rem !important; }
  .me-sm-3 { margin-right: 1rem !important; }
  .me-sm-4 { margin-right: 1.5rem !important; }
  .me-sm-5 { margin-right: 3rem !important; }
  .mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-sm-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-sm-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-sm-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-sm-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-sm-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
  .p-sm-0 { padding: 0 !important; }
  .p-sm-1 { padding: 0.25rem !important; }
  .p-sm-2 { padding: 0.5rem !important; }
  .p-sm-3 { padding: 1rem !important; }
  .p-sm-4 { padding: 1.5rem !important; }
  .p-sm-5 { padding: 3rem !important; }
  .pt-sm-0 { padding-top: 0 !important; }
  .pt-sm-1 { padding-top: 0.25rem !important; }
  .pt-sm-2 { padding-top: 0.5rem !important; }
  .pt-sm-3 { padding-top: 1rem !important; }
  .pt-sm-4 { padding-top: 1.5rem !important; }
  .pt-sm-5 { padding-top: 3rem !important; }
  .pb-sm-0 { padding-bottom: 0 !important; }
  .pb-sm-1 { padding-bottom: 0.25rem !important; }
  .pb-sm-2 { padding-bottom: 0.5rem !important; }
  .pb-sm-3 { padding-bottom: 1rem !important; }
  .pb-sm-4 { padding-bottom: 1.5rem !important; }
  .pb-sm-5 { padding-bottom: 3rem !important; }
  .ps-sm-0 { padding-left: 0 !important; }
  .ps-sm-1 { padding-left: 0.25rem !important; }
  .ps-sm-2 { padding-left: 0.5rem !important; }
  .ps-sm-3 { padding-left: 1rem !important; }
  .ps-sm-4 { padding-left: 1.5rem !important; }
  .ps-sm-5 { padding-left: 3rem !important; }
  .pe-sm-0 { padding-right: 0 !important; }
  .pe-sm-1 { padding-right: 0.25rem !important; }
  .pe-sm-2 { padding-right: 0.5rem !important; }
  .pe-sm-3 { padding-right: 1rem !important; }
  .pe-sm-4 { padding-right: 1.5rem !important; }
  .pe-sm-5 { padding-right: 3rem !important; }
  .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-sm-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-sm-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-sm-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-sm-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
}
@media (min-width: 768px) {
  .m-md-0 { margin: 0 !important; }
  .m-md-1 { margin: 0.25rem !important; }
  .m-md-2 { margin: 0.5rem !important; }
  .m-md-3 { margin: 1rem !important; }
  .m-md-4 { margin: 1.5rem !important; }
  .m-md-5 { margin: 3rem !important; }
  .mt-md-0 { margin-top: 0 !important; }
  .mt-md-1 { margin-top: 0.25rem !important; }
  .mt-md-2 { margin-top: 0.5rem !important; }
  .mt-md-3 { margin-top: 1rem !important; }
  .mt-md-4 { margin-top: 1.5rem !important; }
  .mt-md-5 { margin-top: 3rem !important; }
  .mb-md-0 { margin-bottom: 0 !important; }
  .mb-md-1 { margin-bottom: 0.25rem !important; }
  .mb-md-2 { margin-bottom: 0.5rem !important; }
  .mb-md-3 { margin-bottom: 1rem !important; }
  .mb-md-4 { margin-bottom: 1.5rem !important; }
  .mb-md-5 { margin-bottom: 3rem !important; }
  .ms-md-0 { margin-left: 0 !important; }
  .ms-md-1 { margin-left: 0.25rem !important; }
  .ms-md-2 { margin-left: 0.5rem !important; }
  .ms-md-3 { margin-left: 1rem !important; }
  .ms-md-4 { margin-left: 1.5rem !important; }
  .ms-md-5 { margin-left: 3rem !important; }
  .me-md-0 { margin-right: 0 !important; }
  .me-md-1 { margin-right: 0.25rem !important; }
  .me-md-2 { margin-right: 0.5rem !important; }
  .me-md-3 { margin-right: 1rem !important; }
  .me-md-4 { margin-right: 1.5rem !important; }
  .me-md-5 { margin-right: 3rem !important; }
  .mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-md-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-md-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-md-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-md-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-md-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
  .p-md-0 { padding: 0 !important; }
  .p-md-1 { padding: 0.25rem !important; }
  .p-md-2 { padding: 0.5rem !important; }
  .p-md-3 { padding: 1rem !important; }
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }
  .pt-md-0 { padding-top: 0 !important; }
  .pt-md-1 { padding-top: 0.25rem !important; }
  .pt-md-2 { padding-top: 0.5rem !important; }
  .pt-md-3 { padding-top: 1rem !important; }
  .pt-md-4 { padding-top: 1.5rem !important; }
  .pt-md-5 { padding-top: 3rem !important; }
  .pb-md-0 { padding-bottom: 0 !important; }
  .pb-md-1 { padding-bottom: 0.25rem !important; }
  .pb-md-2 { padding-bottom: 0.5rem !important; }
  .pb-md-3 { padding-bottom: 1rem !important; }
  .pb-md-4 { padding-bottom: 1.5rem !important; }
  .pb-md-5 { padding-bottom: 3rem !important; }
  .ps-md-0 { padding-left: 0 !important; }
  .ps-md-1 { padding-left: 0.25rem !important; }
  .ps-md-2 { padding-left: 0.5rem !important; }
  .ps-md-3 { padding-left: 1rem !important; }
  .ps-md-4 { padding-left: 1.5rem !important; }
  .ps-md-5 { padding-left: 3rem !important; }
  .pe-md-0 { padding-right: 0 !important; }
  .pe-md-1 { padding-right: 0.25rem !important; }
  .pe-md-2 { padding-right: 0.5rem !important; }
  .pe-md-3 { padding-right: 1rem !important; }
  .pe-md-4 { padding-right: 1.5rem !important; }
  .pe-md-5 { padding-right: 3rem !important; }
  .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-md-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-md-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-md-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-md-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
}
@media (min-width: 992px) {
  .m-lg-0 { margin: 0 !important; }
  .m-lg-1 { margin: 0.25rem !important; }
  .m-lg-2 { margin: 0.5rem !important; }
  .m-lg-3 { margin: 1rem !important; }
  .m-lg-4 { margin: 1.5rem !important; }
  .m-lg-5 { margin: 3rem !important; }
  .mt-lg-0 { margin-top: 0 !important; }
  .mt-lg-1 { margin-top: 0.25rem !important; }
  .mt-lg-2 { margin-top: 0.5rem !important; }
  .mt-lg-3 { margin-top: 1rem !important; }
  .mt-lg-4 { margin-top: 1.5rem !important; }
  .mt-lg-5 { margin-top: 3rem !important; }
  .mb-lg-0 { margin-bottom: 0 !important; }
  .mb-lg-1 { margin-bottom: 0.25rem !important; }
  .mb-lg-2 { margin-bottom: 0.5rem !important; }
  .mb-lg-3 { margin-bottom: 1rem !important; }
  .mb-lg-4 { margin-bottom: 1.5rem !important; }
  .mb-lg-5 { margin-bottom: 3rem !important; }
  .ms-lg-0 { margin-left: 0 !important; }
  .ms-lg-1 { margin-left: 0.25rem !important; }
  .ms-lg-2 { margin-left: 0.5rem !important; }
  .ms-lg-3 { margin-left: 1rem !important; }
  .ms-lg-4 { margin-left: 1.5rem !important; }
  .ms-lg-5 { margin-left: 3rem !important; }
  .me-lg-0 { margin-right: 0 !important; }
  .me-lg-1 { margin-right: 0.25rem !important; }
  .me-lg-2 { margin-right: 0.5rem !important; }
  .me-lg-3 { margin-right: 1rem !important; }
  .me-lg-4 { margin-right: 1.5rem !important; }
  .me-lg-5 { margin-right: 3rem !important; }
  .mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-lg-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-lg-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-lg-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-lg-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-lg-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
  .p-lg-0 { padding: 0 !important; }
  .p-lg-1 { padding: 0.25rem !important; }
  .p-lg-2 { padding: 0.5rem !important; }
  .p-lg-3 { padding: 1rem !important; }
  .p-lg-4 { padding: 1.5rem !important; }
  .p-lg-5 { padding: 3rem !important; }
  .pt-lg-0 { padding-top: 0 !important; }
  .pt-lg-1 { padding-top: 0.25rem !important; }
  .pt-lg-2 { padding-top: 0.5rem !important; }
  .pt-lg-3 { padding-top: 1rem !important; }
  .pt-lg-4 { padding-top: 1.5rem !important; }
  .pt-lg-5 { padding-top: 3rem !important; }
  .pb-lg-0 { padding-bottom: 0 !important; }
  .pb-lg-1 { padding-bottom: 0.25rem !important; }
  .pb-lg-2 { padding-bottom: 0.5rem !important; }
  .pb-lg-3 { padding-bottom: 1rem !important; }
  .pb-lg-4 { padding-bottom: 1.5rem !important; }
  .pb-lg-5 { padding-bottom: 3rem !important; }
  .ps-lg-0 { padding-left: 0 !important; }
  .ps-lg-1 { padding-left: 0.25rem !important; }
  .ps-lg-2 { padding-left: 0.5rem !important; }
  .ps-lg-3 { padding-left: 1rem !important; }
  .ps-lg-4 { padding-left: 1.5rem !important; }
  .ps-lg-5 { padding-left: 3rem !important; }
  .pe-lg-0 { padding-right: 0 !important; }
  .pe-lg-1 { padding-right: 0.25rem !important; }
  .pe-lg-2 { padding-right: 0.5rem !important; }
  .pe-lg-3 { padding-right: 1rem !important; }
  .pe-lg-4 { padding-right: 1.5rem !important; }
  .pe-lg-5 { padding-right: 3rem !important; }
  .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-lg-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-lg-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-lg-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-lg-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-lg-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
}
@media (min-width: 1200px) {
  .m-xl-0 { margin: 0 !important; }
  .m-xl-1 { margin: 0.25rem !important; }
  .m-xl-2 { margin: 0.5rem !important; }
  .m-xl-3 { margin: 1rem !important; }
  .m-xl-4 { margin: 1.5rem !important; }
  .m-xl-5 { margin: 3rem !important; }
  .mt-xl-0 { margin-top: 0 !important; }
  .mt-xl-1 { margin-top: 0.25rem !important; }
  .mt-xl-2 { margin-top: 0.5rem !important; }
  .mt-xl-3 { margin-top: 1rem !important; }
  .mt-xl-4 { margin-top: 1.5rem !important; }
  .mt-xl-5 { margin-top: 3rem !important; }
  .mb-xl-0 { margin-bottom: 0 !important; }
  .mb-xl-1 { margin-bottom: 0.25rem !important; }
  .mb-xl-2 { margin-bottom: 0.5rem !important; }
  .mb-xl-3 { margin-bottom: 1rem !important; }
  .mb-xl-4 { margin-bottom: 1.5rem !important; }
  .mb-xl-5 { margin-bottom: 3rem !important; }
  .ms-xl-0 { margin-left: 0 !important; }
  .ms-xl-1 { margin-left: 0.25rem !important; }
  .ms-xl-2 { margin-left: 0.5rem !important; }
  .ms-xl-3 { margin-left: 1rem !important; }
  .ms-xl-4 { margin-left: 1.5rem !important; }
  .ms-xl-5 { margin-left: 3rem !important; }
  .me-xl-0 { margin-right: 0 !important; }
  .me-xl-1 { margin-right: 0.25rem !important; }
  .me-xl-2 { margin-right: 0.5rem !important; }
  .me-xl-3 { margin-right: 1rem !important; }
  .me-xl-4 { margin-right: 1.5rem !important; }
  .me-xl-5 { margin-right: 3rem !important; }
  .mx-xl-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-xl-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-xl-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-xl-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-xl-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-xl-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
  .p-xl-0 { padding: 0 !important; }
  .p-xl-1 { padding: 0.25rem !important; }
  .p-xl-2 { padding: 0.5rem !important; }
  .p-xl-3 { padding: 1rem !important; }
  .p-xl-4 { padding: 1.5rem !important; }
  .p-xl-5 { padding: 3rem !important; }
  .pt-xl-0 { padding-top: 0 !important; }
  .pt-xl-1 { padding-top: 0.25rem !important; }
  .pt-xl-2 { padding-top: 0.5rem !important; }
  .pt-xl-3 { padding-top: 1rem !important; }
  .pt-xl-4 { padding-top: 1.5rem !important; }
  .pt-xl-5 { padding-top: 3rem !important; }
  .pb-xl-0 { padding-bottom: 0 !important; }
  .pb-xl-1 { padding-bottom: 0.25rem !important; }
  .pb-xl-2 { padding-bottom: 0.5rem !important; }
  .pb-xl-3 { padding-bottom: 1rem !important; }
  .pb-xl-4 { padding-bottom: 1.5rem !important; }
  .pb-xl-5 { padding-bottom: 3rem !important; }
  .ps-xl-0 { padding-left: 0 !important; }
  .ps-xl-1 { padding-left: 0.25rem !important; }
  .ps-xl-2 { padding-left: 0.5rem !important; }
  .ps-xl-3 { padding-left: 1rem !important; }
  .ps-xl-4 { padding-left: 1.5rem !important; }
  .ps-xl-5 { padding-left: 3rem !important; }
  .pe-xl-0 { padding-right: 0 !important; }
  .pe-xl-1 { padding-right: 0.25rem !important; }
  .pe-xl-2 { padding-right: 0.5rem !important; }
  .pe-xl-3 { padding-right: 1rem !important; }
  .pe-xl-4 { padding-right: 1.5rem !important; }
  .pe-xl-5 { padding-right: 3rem !important; }
  .px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-xl-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-xl-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-xl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-xl-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-xl-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
}
@media (min-width: 1400px) {
  .m-xxl-0 { margin: 0 !important; }
  .m-xxl-1 { margin: 0.25rem !important; }
  .m-xxl-2 { margin: 0.5rem !important; }
  .m-xxl-3 { margin: 1rem !important; }
  .m-xxl-4 { margin: 1.5rem !important; }
  .m-xxl-5 { margin: 3rem !important; }
  .mt-xxl-0 { margin-top: 0 !important; }
  .mt-xxl-1 { margin-top: 0.25rem !important; }
  .mt-xxl-2 { margin-top: 0.5rem !important; }
  .mt-xxl-3 { margin-top: 1rem !important; }
  .mt-xxl-4 { margin-top: 1.5rem !important; }
  .mt-xxl-5 { margin-top: 3rem !important; }
  .mb-xxl-0 { margin-bottom: 0 !important; }
  .mb-xxl-1 { margin-bottom: 0.25rem !important; }
  .mb-xxl-2 { margin-bottom: 0.5rem !important; }
  .mb-xxl-3 { margin-bottom: 1rem !important; }
  .mb-xxl-4 { margin-bottom: 1.5rem !important; }
  .mb-xxl-5 { margin-bottom: 3rem !important; }
  .ms-xxl-0 { margin-left: 0 !important; }
  .ms-xxl-1 { margin-left: 0.25rem !important; }
  .ms-xxl-2 { margin-left: 0.5rem !important; }
  .ms-xxl-3 { margin-left: 1rem !important; }
  .ms-xxl-4 { margin-left: 1.5rem !important; }
  .ms-xxl-5 { margin-left: 3rem !important; }
  .me-xxl-0 { margin-right: 0 !important; }
  .me-xxl-1 { margin-right: 0.25rem !important; }
  .me-xxl-2 { margin-right: 0.5rem !important; }
  .me-xxl-3 { margin-right: 1rem !important; }
  .me-xxl-4 { margin-right: 1.5rem !important; }
  .me-xxl-5 { margin-right: 3rem !important; }
  .mx-xxl-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-xxl-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-xxl-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-xxl-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-xxl-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-xxl-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
  .p-xxl-0 { padding: 0 !important; }
  .p-xxl-1 { padding: 0.25rem !important; }
  .p-xxl-2 { padding: 0.5rem !important; }
  .p-xxl-3 { padding: 1rem !important; }
  .p-xxl-4 { padding: 1.5rem !important; }
  .p-xxl-5 { padding: 3rem !important; }
  .pt-xxl-0 { padding-top: 0 !important; }
  .pt-xxl-1 { padding-top: 0.25rem !important; }
  .pt-xxl-2 { padding-top: 0.5rem !important; }
  .pt-xxl-3 { padding-top: 1rem !important; }
  .pt-xxl-4 { padding-top: 1.5rem !important; }
  .pt-xxl-5 { padding-top: 3rem !important; }
  .pb-xxl-0 { padding-bottom: 0 !important; }
  .pb-xxl-1 { padding-bottom: 0.25rem !important; }
  .pb-xxl-2 { padding-bottom: 0.5rem !important; }
  .pb-xxl-3 { padding-bottom: 1rem !important; }
  .pb-xxl-4 { padding-bottom: 1.5rem !important; }
  .pb-xxl-5 { padding-bottom: 3rem !important; }
  .ps-xxl-0 { padding-left: 0 !important; }
  .ps-xxl-1 { padding-left: 0.25rem !important; }
  .ps-xxl-2 { padding-left: 0.5rem !important; }
  .ps-xxl-3 { padding-left: 1rem !important; }
  .ps-xxl-4 { padding-left: 1.5rem !important; }
  .ps-xxl-5 { padding-left: 3rem !important; }
  .pe-xxl-0 { padding-right: 0 !important; }
  .pe-xxl-1 { padding-right: 0.25rem !important; }
  .pe-xxl-2 { padding-right: 0.5rem !important; }
  .pe-xxl-3 { padding-right: 1rem !important; }
  .pe-xxl-4 { padding-right: 1.5rem !important; }
  .pe-xxl-5 { padding-right: 3rem !important; }
  .px-xxl-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-xxl-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-xxl-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-xxl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-xxl-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-xxl-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
}

/* ---------- display ---------- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-grid { display: grid !important; }
  .d-sm-table { display: table !important; }
  .d-sm-table-row { display: table-row !important; }
  .d-sm-table-cell { display: table-cell !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-grid { display: grid !important; }
  .d-md-table { display: table !important; }
  .d-md-table-row { display: table-row !important; }
  .d-md-table-cell { display: table-cell !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-grid { display: grid !important; }
  .d-lg-table { display: table !important; }
  .d-lg-table-row { display: table-row !important; }
  .d-lg-table-cell { display: table-cell !important; }
}
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
  .d-xl-grid { display: grid !important; }
  .d-xl-table { display: table !important; }
  .d-xl-table-row { display: table-row !important; }
  .d-xl-table-cell { display: table-cell !important; }
}
@media (min-width: 1400px) {
  .d-xxl-none { display: none !important; }
  .d-xxl-block { display: block !important; }
  .d-xxl-inline-block { display: inline-block !important; }
  .d-xxl-inline { display: inline !important; }
  .d-xxl-flex { display: flex !important; }
  .d-xxl-inline-flex { display: inline-flex !important; }
  .d-xxl-grid { display: grid !important; }
  .d-xxl-table { display: table !important; }
  .d-xxl-table-row { display: table-row !important; }
  .d-xxl-table-cell { display: table-cell !important; }
}

/* ---------- flex ---------- */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.align-items-start { align-items: flex-start !important; }
.align-self-start { align-self: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-self-end { align-self: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-self-center { align-self: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-self-baseline { align-self: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-stretch { align-self: stretch !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
@media (min-width: 576px) {
  .justify-content-sm-start { justify-content: flex-start !important; }
  .justify-content-sm-end { justify-content: flex-end !important; }
  .justify-content-sm-center { justify-content: center !important; }
  .justify-content-sm-between { justify-content: space-between !important; }
  .justify-content-sm-around { justify-content: space-around !important; }
  .align-items-sm-start { align-items: flex-start !important; }
  .align-items-sm-end { align-items: flex-end !important; }
  .align-items-sm-center { align-items: center !important; }
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-nowrap { flex-wrap: nowrap !important; }
  .flex-sm-wrap { flex-wrap: wrap !important; }
}
@media (min-width: 768px) {
  .justify-content-md-start { justify-content: flex-start !important; }
  .justify-content-md-end { justify-content: flex-end !important; }
  .justify-content-md-center { justify-content: center !important; }
  .justify-content-md-between { justify-content: space-between !important; }
  .justify-content-md-around { justify-content: space-around !important; }
  .align-items-md-start { align-items: flex-start !important; }
  .align-items-md-end { align-items: flex-end !important; }
  .align-items-md-center { align-items: center !important; }
  .flex-md-row { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
  .flex-md-nowrap { flex-wrap: nowrap !important; }
  .flex-md-wrap { flex-wrap: wrap !important; }
}
@media (min-width: 992px) {
  .justify-content-lg-start { justify-content: flex-start !important; }
  .justify-content-lg-end { justify-content: flex-end !important; }
  .justify-content-lg-center { justify-content: center !important; }
  .justify-content-lg-between { justify-content: space-between !important; }
  .justify-content-lg-around { justify-content: space-around !important; }
  .align-items-lg-start { align-items: flex-start !important; }
  .align-items-lg-end { align-items: flex-end !important; }
  .align-items-lg-center { align-items: center !important; }
  .flex-lg-row { flex-direction: row !important; }
  .flex-lg-column { flex-direction: column !important; }
  .flex-lg-nowrap { flex-wrap: nowrap !important; }
  .flex-lg-wrap { flex-wrap: wrap !important; }
}
@media (min-width: 1200px) {
  .justify-content-xl-start { justify-content: flex-start !important; }
  .justify-content-xl-end { justify-content: flex-end !important; }
  .justify-content-xl-center { justify-content: center !important; }
  .justify-content-xl-between { justify-content: space-between !important; }
  .justify-content-xl-around { justify-content: space-around !important; }
  .align-items-xl-start { align-items: flex-start !important; }
  .align-items-xl-end { align-items: flex-end !important; }
  .align-items-xl-center { align-items: center !important; }
  .flex-xl-row { flex-direction: row !important; }
  .flex-xl-column { flex-direction: column !important; }
  .flex-xl-nowrap { flex-wrap: nowrap !important; }
  .flex-xl-wrap { flex-wrap: wrap !important; }
}
@media (min-width: 1400px) {
  .justify-content-xxl-start { justify-content: flex-start !important; }
  .justify-content-xxl-end { justify-content: flex-end !important; }
  .justify-content-xxl-center { justify-content: center !important; }
  .justify-content-xxl-between { justify-content: space-between !important; }
  .justify-content-xxl-around { justify-content: space-around !important; }
  .align-items-xxl-start { align-items: flex-start !important; }
  .align-items-xxl-end { align-items: flex-end !important; }
  .align-items-xxl-center { align-items: center !important; }
  .flex-xxl-row { flex-direction: row !important; }
  .flex-xxl-column { flex-direction: column !important; }
  .flex-xxl-nowrap { flex-wrap: nowrap !important; }
  .flex-xxl-wrap { flex-wrap: wrap !important; }
}

/* ---------- position ---------- */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0% !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0% !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }
.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }

/* ---------- sizing ---------- */
.w-25 { width: 25% !important; }
.h-25 { height: 25% !important; }
.w-50 { width: 50% !important; }
.h-50 { height: 50% !important; }
.w-75 { width: 75% !important; }
.h-75 { height: 75% !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.w-auto { width: auto !important; }
.h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
.min-vh-100 { min-height: 100vh !important; }
.min-vw-100 { min-width: 100vw !important; }
.vh-100 { height: 100vh !important; }
.vw-100 { width: 100vw !important; }
.img-fluid { max-width: 100%; height: auto; }

/* ---------- text / colors ---------- */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-white { color: var(--hp-text-white, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-white-50 { color: var(--hp-text-white-50, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-muted { color: var(--hp-text-muted, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-secondary { color: var(--hp-text-secondary, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-danger { color: var(--hp-text-danger, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-success { color: var(--hp-text-success, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-warning { color: var(--hp-text-warning, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-info { color: var(--hp-text-info, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-dark { color: var(--hp-text-dark, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-light { color: var(--hp-text-light, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-body { color: var(--hp-text-body, rgba(var(--hp-color-white-rgb), .75)) !important; }
.text-black-50 { color: var(--hp-text-black-50, rgba(var(--hp-color-white-rgb), .75)) !important; }
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: 800 !important; }
.fs-1 { font-size: 1 !important; }
.fs-sm { font-size: 0.875em !important; }
.fs-base { font-size: 1em !important; }
.fs-lg { font-size: 1.25em !important; }
.small { font-size: 0.8em; }
.align-text-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.bg-primary { background-color: rgba(var(--hp-color-accent-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-secondary { background-color: var(--hp-bg-secondary) !important; }
.bg-success { background-color: rgba(var(--hp-color-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-danger { background-color: rgba(var(--hp-color-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-warning { background-color: rgba(var(--hp-color-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-info { background-color: rgba(var(--hp-color-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-light { background-color: var(--hp-bg-light) !important; }
.bg-dark { background-color: rgba(var(--hp-color-canvas-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-white { background-color: rgba(var(--hp-color-white-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-black { background-color: rgba(var(--hp-color-black-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-body { background-color: var(--hp-bg-body) !important; }
.bg-transparent { background-color: transparent !important; }
.opacity-0 { opacity: 0.0 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1.0 !important; }

/* ---------- borders / shadows ---------- */
.border { border: 1px solid var(--hp-color-border-on-glass) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--hp-color-border-on-glass) !important; }
.border-top-0 { border-top: 0 !important; }
.border-bottom { border-bottom: 1px solid var(--hp-color-border-on-glass) !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-start { border-start: 1px solid var(--hp-color-border-on-glass) !important; }
.border-start-0 { border-start: 0 !important; }
.border-end { border-end: 1px solid var(--hp-color-border-on-glass) !important; }
.border-end-0 { border-end: 0 !important; }
.border-secondary { border-color: var(--hp-border-secondary, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-white { border-color: var(--hp-border-white, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-danger { border-color: var(--hp-border-danger, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-success { border-color: var(--hp-border-success, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-warning { border-color: var(--hp-border-warning, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-info { border-color: var(--hp-border-info, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-dark { border-color: var(--hp-border-dark, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-light { border-color: var(--hp-border-light, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-transparent { border-color: var(--hp-border-transparent, rgba(var(--hp-color-white-rgb), .2)) !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: .25rem !important; }
.rounded-2 { border-radius: .5rem !important; }
.rounded-3 { border-radius: 1rem !important; }
.rounded-4 { border-radius: 1.5rem !important; }
.rounded-5 { border-radius: 3rem !important; }
.rounded { border-radius: .375rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 999px !important; }
.rounded-top { border-radius: .375rem .375rem 0 0 !important; }
.rounded-bottom { border-radius: 0 0 .375rem .375rem !important; }
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 6px 16px rgba(var(--hp-color-black-rgb), .25) !important; }
.shadow { box-shadow: 0 12px 30px rgba(var(--hp-color-black-rgb), .35) !important; }
.shadow-lg { box-shadow: 0 22px 50px rgba(var(--hp-color-black-rgb), .45) !important; }

/* ---------- extras used by Hotpic pages ---------- */
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.pe-auto { pointer-events: auto !important; }
.pe-none { pointer-events: none !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-fit-cover { object-fit: cover !important; }
.object-fit-contain { object-fit: contain !important; }
.object-fit-fill { object-fit: fill !important; }
.object-fit-none { object-fit: none !important; }
.img-thumbnail { padding: .25rem; background: rgba(var(--hp-color-white-rgb), .04); border: 1px solid var(--hp-color-border-on-glass); border-radius: .5rem; max-width: 100%; height: auto; }
.btn-link { font-weight: 400; color: var(--hp-color-accent-soft); text-decoration: underline; background: none; border: 0; }
.table-dark { color: rgba(var(--hp-color-white-rgb), .8); border-color: var(--hp-color-border); background: transparent; }
.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }
.table-sm > :not(caption) > * > * { padding: .3rem .5rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(var(--hp-color-white-rgb), .02); }
.border-opacity-10 { border-color: var(--hp-color-border) !important; }
.border-opacity-25 { border-color: rgba(var(--hp-color-white-rgb), .25) !important; }
.border-opacity-50 { border-color: rgba(var(--hp-color-white-rgb), .5) !important; }
.rounded-4 { border-radius: 1.5rem !important; }
.rounded-5 { border-radius: 3rem !important; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }
.d-grid { display: grid !important; }
.cursor-pointer { cursor: pointer !important; }
.user-select-none { user-select: none !important; }
.text-body { color: rgba(var(--hp-color-white-rgb), .78) !important; }
/* bootstrap JS helpers */
[data-bs-toggle="tooltip"], [data-bs-toggle="popover"] { cursor: pointer; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.fade:not(.show) { opacity: 0; }
.collapse { visibility: visible; }
/* ---------- navbar (used by the site header) ---------- */
.navbar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}
.navbar > .container,
.navbar > .container-fluid {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.navbar-brand { display: inline-flex; align-items: center; padding: 0; margin-right: 1rem; font-size: 1.25rem; white-space: nowrap; }
.navbar-nav { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; gap: .25rem; }
.navbar-collapse { display: flex; flex-basis: auto; flex-grow: 1; align-items: center; }
.navbar-toggler { padding: .25rem .5rem; font-size: 1.25rem; line-height: 1; background: transparent; border: 1px solid var(--hp-color-border-on-glass); border-radius: .5rem; color: var(--hp-color-white); cursor: pointer; }
.navbar .navbar-brand img { max-height: 44px; width: auto; }
.header .navbar { display: flex; align-items: center; justify-content: space-between; }

/* ---------- inline SVG icons (hp_icon / Lucide) ---------- */
.hp-icon  {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.hp-icon.is-liked {
    color: var(--hp-color-accent);
    fill: var(--hp-color-accent);
}

/* icon + label rhythm inside pill buttons */
.btn > .hp-icon + span,
.hp-i-actions .hp-icon + span,
.hp-album-actions .hp-icon + span {
    margin-left: 2px;
}



/* ==========================================================================
   Lucide icon sizing / placement per component
   (hp_icon() SVG markup; components that used to size <img> icons)
   ========================================================================== */
/* bottom nav (mobile + tiktok) */
.nav__link .hp-icon {
    display: block;
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    padding: 4px 0;
    color: var(--hp-color-white);
    filter: brightness(0) invert(1);
    opacity: 0.4;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.nav__item.is-active > .nav__link .hp-icon {
    opacity: 1;
    animation: hp-nav-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.nav__link:active .hp-icon {
    transform: scale(0.88);
}

.nav__item--upload .nav__link .hp-icon {
    position: absolute;
    top: 4px;
    left: calc(50% - 12px);
    width: 24px;
    height: 24px;
    padding: 0;
    box-sizing: border-box;
    opacity: 1;
    z-index: 1;
}

/* header icon buttons */
.header__iconbtn .hp-icon {
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

/* feed cards */
.fd-card__action .hp-icon { width: 14px; height: 14px; }
.fd-card__badge .hp-icon { width: 11px; height: 11px; }
.fd-card__tag .hp-icon { width: 11px; height: 11px; }
.fd-card__meta .hp-icon { width: 12px; height: 12px; }

/* album / image detail actions */
.hp-album-actions .btn .hp-icon,
.hp-album-tools .btn .hp-icon,
.hp-i-actions .btn .hp-icon {
    width: 17px;
    height: 17px;
    opacity: 0.8;
}
.hp-album-tags .btn .hp-icon { width: 14px; height: 14px; opacity: 0.8; }
.hp-album-meta .hp-icon { width: 16px; height: 16px; opacity: 0.7; }

/* video rail + filter */
.interaction_icon__hcYZ3 .hp-icon { width: 20px; height: 20px; }
.filter-btn .hp-icon { width: 16px; height: 16px; }

/* generic small chips */
.icon-background .hp-icon,
.icon-background.btn .hp-icon { width: 14px; height: 14px; }
/* ==========================================================================
   Dark scrollbars everywhere (page + modal + dropdowns + textareas).
   Without color-scheme the native scrollbar renders light/white on dark UI,
   which is what appeared when the Sort & filter modal opened.
   ========================================================================== */
:root {
    color-scheme: dark;
}

html {
    scrollbar-color: rgba(255, 255, 255, 0.22) #0b0b0d;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0b0b0d;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

::-webkit-scrollbar-corner {
    background: #0b0b0d;
}