*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }

body { min-height: 100dvh; }

/*** ---------- Buttons ---------- ***/
.btn-group-lg>.btn, .btn-lg {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-size: 1rem;
}

/*** ---------- Breadcrumbs ---------- ***/
.pm-breadcrumb { font-size: 14px; padding: 16px; list-style: none; margin: 0; display: flex; align-items: center; overflow: clip; white-space: nowrap; column-gap: 10px; }
.pm-breadcrumb li a { color: var(--bs-body-color); opacity: .5; text-decoration: none; }

@media (min-width: 992px) {
    .pm-breadcrumb { padding: 16px 24px; }
}

/*** ---------- Forms ---------- ***/
.form-control { padding: .65rem 1.25rem; background-color: #fff; }
.form-control:focus { background-color: #fff; }

.form-control.form-control-sm { padding: .25rem .5rem; }

.form-select { padding: .65rem 1.25rem; background-color: #fff; }
.form-select:focus { background-color: #fff; }
.form-select-sm { padding: .35rem 1rem; }

.form-label { font-weight: 500; }

.input-group .btn { display: inline-flex; align-items: center; }

.input-group-text:has(+ .form-control-sm) { font-size: 13px; }

.pm-backdrop { opacity: 0;  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.2); z-index: 955;  transition: opacity .25s ease-in-out; }
.pm-backdrop.is-active { opacity: 1; }

.form-check-input--button { position: absolute; left: -999rem; opacity: 0; }
.form-check-input--button + .form-check-label { display: flex; align-items: center; column-gap: .75rem; cursor: pointer; width: 100%; border: var(--bs-border-width) solid var(--bs-border-color); background-color: #fff; padding: 1rem; border-radius: var(--bs-border-radius); }
.form-check-input--button + .form-check-label::before { content: ''; display: inline-block; width: 1em; height: 1em; min-width: 1em; border-radius: 50%; border: var(--bs-border-width) solid var(--bs-border-color); background-image: var(--bs-form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: con1in; }
.form-check-input--button:checked + .form-check-label::before { --bs-form-check-bg-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"); background-color: var(--bs-primary); border-color: var(--bs-primary); }

.form-image { --border-width: 2px; --border-color: var(--bs-border-color); width: 160px; height: 160px; border: var(--border-width) dashed var(--border-color); border-radius: var(--bs-border-radius); padding: 10px; position: relative; }
.form-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.form-image #delete-image { font-size: 14px; cursor: pointer; position: absolute; top: 10px; left: 10px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background-color: var(--bs-red); }

/*** ---------- Cards ---------- ***/
.card .card-footer { background-color: var(--bs-card-bg); }

/*** ---------- Tables ---------- ***/
table { font-size: 13px; }

/*** ---------- Alerts ---------- ***/
.alert-wrapper { position: fixed; top: 0; right: 0; left: 0; z-index: 9999; transition: opacity .25s ease-in-out; padding: 16px; pointer-events: none; }


@media (min-width: 992px) {
    .alert-wrapper { left: 250px; padding: 24px; }
    body.page-nieuwe-klant .alert-wrapper { left: 0; } 
}

/*** ---------- Comments list ---------- ***/
#comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
#comment-list .comment { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 80%; }
#comment-list .comment + .comment { margin-top: 2em; }
#comment-list .comment .comment-text { width: 100%; padding: 1.25rem; background-color: #fff; }
#comment-list .comment .comment-text > * { margin: 0; }
#comment-list .comment .comment-text > * + * { margin-top: 1em; }

/*** ---------- Tabs ---------- ***/
.tab-pane-title { font-size: 1.4rem; display: block; padding: 2rem 0 1rem 0; font-weight: 600; }

/*** ---------- Quantity ---------- ***/
.quantity { display: flex; column-gap: 5px; }
.quantity .input-group { flex-wrap: nowrap; }
.quantity .input-group input { width: 84px!important; }
.quantity .input-group .input-group-text { font-size: 13px; padding: .375rem .5rem; min-width: 61px; }
.quantity .btn { padding: 0; min-width: 31px; width: 31px; display: inline-grid; place-items: center; }