/*-----------------------------------------------*/
/*To keep this stylesheet clean, use BEM methodology. */

/*http://getbem.com/introduction/*/
/*-----------------------------------------------*/

:root {
  --haperen-color-primary: #203556;
  --haperen-color-secondary: #ebeef7;
  --haperen-color-accent: #ff0000;
  --haperen-color-success: #4bb543;
  --haperen-color-danger: #f32013;

  --haperen-color-muted--200: #f4f4f4;
  --haperen-color-muted--400: #ededed;
  --haperen-color-muted--500: #bebebe;
  --haperen-color-muted--600: #8e8e8e;

  --text-primary: #333;
  --text-secondary: #fff;
  --text-muted: var(--haperen-color-muted--600);

  --radius-sm: 0.9rem;
  --radius-md: 2rem;

  --margin-sm: 0.4rem;
  --margin-md: 1rem;
  --margin-lg: 1.3rem;
  --margin-xl: 1.6rem;

  --padding-sm: 0.7rem;
  --padding-md: 0.95rem;
  --padding-lg: 1.2rem;
  --padding-xl: 1.45rem;

  --animation-time-sm: 200ms;
  --animation-time-md: 400ms;
  --animation-time-lg: 800ms;

  --box-shadow-sm: 0 0.25em 0.375em rgba(50, 50, 93, 0.09), 0 0.063em 0.188em rgba(0, 0, 0, 0.08);
  --box-shadow-md: 0 0.063em 0.313em 0 rgba(0, 0, 0, 0.07), 0 0.438em 1.063em 0 rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 0.938em 2.188em rgba(50, 50, 93, 0.15), 0 0.313em 0.938em rgba(0, 0, 0, 0.1);
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h2 {
  font-weight: 500;
}

.haperen-heading.heading--1 {
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 700;
}

h3,
strong {
  font-weight: 600;
}

strong,
b,
label {
  color: var(--text-primary);
}

span.vr {
  border-left: 2px var(--haperen-color-muted--200) solid;
  display: inline-block !important;

  margin: 0 var(--margin-sm);

  height: 1rem;
  width: 0;
}

hr {
  border: unset;
  border-top: 2px var(--haperen-color-muted--200) solid;
  margin: var(--margin-md);
}

hr.hr--primary {
  border-top: 2px var(--haperen-color-primary) solid;
}

hr.hr--accent {
  border-top: 2px var(--haperen-color-accent) solid;
}

hr.hr--muted {
  border-top: 2px var(--haperen-color-muted--200) solid;
}

hr.hr--xl {
  width: 100%;
  margin: var(--margin-md) 0;
}

hr.hr--lg {
  width: 75%;
  margin: var(--margin-md) 0;
}

hr.hr--md {
  width: 50%;
  margin: var(--margin-md) 0;
}

hr.hr--sm {
  width: 25%;
  margin: var(--margin-md) 0;
}

hr.hr--xs {
  width: 12%;
  margin: var(--margin-md) 0;
}

hr.hr--2xs {
  width: 6%;
  margin: var(--margin-md) 0;
}

[class*='border--'] {
  --border-color: var(--text-primary);
  --border-width: 2px;
  --border-style: solid;

  border: var(--border-color) var(--border-width) var(--border-style);
}

.border--primary {
  --border-color: var(--haperen-color-primary);
}

.border--success {
  --border-color: var(--haperen-color-success);
}

.border--danger {
  --border-color: var(--haperen-color-danger);
}

[class*='bg--'] {
  --background: none;

  background: var(--background);
  position: relative;
}

[class*='bg--'].bg--outline:after,
[class*='bg--'].bg--outline:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
}

[class*='bg--'].bg--outline {
  background: #fff;
}

[class*='bg--'].bg--outline:after {
  border: 2px var(--background) solid;
}

[class*='bg--'].bg--outline:before {
  background: var(--background);
  opacity: 0.05;
}

.bg--primary {
  --background: var(--haperen-color-primary);
}

.bg--secondary {
  --background: var(--haperen-color-secondary);
}

.bg--success {
  --background: var(--haperen-color-success);
}

.bg--danger {
  --background: var(--haperen-color-danger);
}

.bg--white {
  --background: #fff;
}

.bg--muted {
  --background: var(--haperen-color-muted--200);
}

.radius--sm,
.radius--sm:before,
.radius--sm:after {
  border-radius: var(--radius-sm);
}

.radius--md,
.radius--md:before,
.radius--md:after {
  border-radius: var(--radius-md);
}

.shadow--sm {
  box-shadow: var(--box-shadow-sm);
}

.shadow--md {
  box-shadow: var(--box-shadow-md);
}

[class*='text--'] {
  --color: var(--text-primary);

  color: var(--color);
}

.text--primary {
  --color: var(--text-primary);
}

.text--success {
  --color: var(--haperen-color-success);
}

.text--danger {
  --color: var(--haperen-color-danger);
}

.text--muted {
  --color: var(--text-muted);
}

.text--strong {
  font-weight: 600;
}

.text--none {
  text-decoration: none;
}

.text--center {
  text-align: center;
}

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

.text--left {
  text-align: left;
}

.list-style--none {
  list-style: none;
}

.my--sm,
.m--sm {
  margin-top: var(--margin-sm);
  margin-bottom: var(--margin-sm);
}

.mx--sm,
.m--sm {
  margin-left: var(--margin-sm);
  margin-right: var(--margin-sm);
}

.my--md,
.m--md {
  margin-top: var(--margin-md);
  margin-bottom: var(--margin-md);
}

.mx--md,
.m--md {
  margin-left: var(--margin-md);
  margin-right: var(--margin-md);
}

.my--lg,
.m--lg {
  margin-top: var(--margin-lg);
  margin-bottom: var(--margin-lg);
}

.mx--lg,
.m--lg {
  margin-left: var(--margin-lg);
  margin-right: var(--margin-lg);
}

.my--xl,
.m--xl {
  margin-top: var(--margin-xl);
  margin-bottom: var(--margin-xl);
}

.mx--xl,
.m--xl {
  margin-left: var(--margin-xl);
  margin-right: var(--margin-xl);
}

.py--sm,
.p--sm {
  padding-top: var(--padding-sm);
  padding-bottom: var(--padding-sm);
}

.px--sm,
.p--sm {
  padding-left: var(--padding-sm);
  padding-right: var(--padding-sm);
}

.py--md,
.p--md {
  padding-top: var(--padding-md);
  padding-bottom: var(--padding-md);
}

.px--md,
.p--md {
  padding-left: var(--padding-md);
  padding-right: var(--padding-md);
}

.py--lg,
.p--lg {
  padding-top: var(--padding-lg);
  padding-bottom: var(--padding-lg);
}

.px--lg,
.p--lg {
  padding-left: var(--padding-lg);
  padding-right: var(--padding-lg);
}

.py--xl,
.p--xl {
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-xl);
}

.px--xl,
.p--xl {
  padding-left: var(--padding-xl);
  padding-right: var(--padding-xl);
}

.ml--left {
  margin-left: auto;
}

.mr--right {
  margin-right: auto;
}

.mx--center {
  margin-left: auto;
  margin-right: auto;
}

/* ICONS */

span.haperen-icon {
  width: 24px;
  height: 24px;
  display: inline-block !important;
  vertical-align: middle;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mask-repeat: no-repeat;

  --background: var(--text-primary);

  -webkit-mask-image: var(--url);
  mask-image: var(--url);
  background: var(--background);
}

span.haperen-icon.icon--primary {
  --background: var(--text-primary);
}

span.haperen-icon.icon--secondary {
  --background: var(--text-secondary);
}

span.haperen-icon.icon--accent {
  --background: var(--haperen-color-primary);
}

span.haperen-icon.icon--muted {
  --background: var(--text-muted);
}

span.haperen-icon.icon--success {
  --background: var(--haperen-color-success);
}

span.haperen-icon.icon--danger {
  --background: var(--haperen-color-danger);
}

span.haperen-icon.icon--xs {
  width: 12px;
  height: 12px;
}

span.haperen-icon.icon--sm {
  width: 18px;
  height: 18px;
}

.haperen-icon {
  --url: url('/catalog/view/theme/default/image/svg/file.svg');
}

.haperen-icon.icon-ic-thumbs-up {
  --url: url('/catalog/view/theme/default/image/svg/thumbs-up-regular.svg');
}

.haperen-icon.icon-ics-thumbs-up {
  --url: url('/catalog/view/theme/default/image/svg/thumbs-up-solid.svg');
}

.haperen-icon.icon-ic-comment {
  --url: url('/catalog/view/theme/default/image/svg/comment.svg');
}

.haperen-icon.icon-ic-arrow-up,
.haperen-icon.icon-ic-arrow-right,
.haperen-icon.icon-ic-arrow-left {
  --url: url('/catalog/view/theme/default/image/svg/arrow-up.svg');
}

.haperen-icon.icon-ic-arrow-right {
  transform: rotate(90deg);
}

.haperen-icon.icon-ic-arrow-left {
  transform: rotate(-90deg);
}

.haperen-icon.icon-ic-chevron-right {
  --url: url('/catalog/view/theme/default/image/svg/chevron-right.svg');
}

.haperen-icon.icon-ic-chevron-left {
  --url: url('/catalog/view/theme/default/image/svg/chevron-left.svg');
}

.haperen-icon.icon-ic-file {
  --url: url('/catalog/view/theme/default/image/svg/file.svg');
}

.haperen-icon.icon-ic-tachometer-alt {
  --url: url('/catalog/view/theme/default/image/svg/tachometer-alt.svg');
}

.haperen-icon.icon-ic-stopwatch {
  --url: url('/catalog/view/theme/default/image/svg/stopwatch.svg');
}

.haperen-icon.icon-ic-shopping-cart {
  --url: url('/catalog/view/theme/default/image/svg/shopping-cart.svg');
}

.haperen-icon.icon-ic-share-alt {
  --url: url('/catalog/view/theme/default/image/svg/share-alt.svg');
}

.haperen-icon.icon-ic-search {
  --url: url('/catalog/view/theme/default/image/svg/search.svg');
}

.haperen-icon.icon-ic-lightbulb {
  --url: url('/catalog/view/theme/default/image/svg/lightbulb.svg');
}

.haperen-icon.icon-ic-info-square {
  --url: url('/catalog/view/theme/default/image/svg/info-square.svg');
}

.haperen-icon.icon-ic-images {
  --url: url('/catalog/view/theme/default/image/svg/images.svg');
}

.haperen-icon.icon-ic-forklift {
  --url: url('/catalog/view/theme/default/image/svg/forklift.svg');
}

.haperen-icon.icon-ic-engine-warning {
  --url: url('/catalog/view/theme/default/image/svg/engine-warning.svg');
}

.haperen-icon.icon-ic-edit {
  --url: url('/catalog/view/theme/default/image/svg/edit.svg');
}

.haperen-icon.icon-ic-comments-alt {
  --url: url('/catalog/view/theme/default/image/svg/comments-alt.svg');
}

.haperen-icon.icon-ic-coins {
  --url: url('/catalog/view/theme/default/image/svg/coins.svg');
}

.haperen-icon.icon-ic-clipboard-list-check {
  --url: url('/catalog/view/theme/default/image/svg/clipboard-list-check.svg');
}

.haperen-icon.icon-ic-calendar-check {
  --url: url('/catalog/view/theme/default/image/svg/calendar-check.svg');
}

.haperen-icon.icon-ic-calculator-alt {
  --url: url('/catalog/view/theme/default/image/svg/calculator-alt.svg');
}

.haperen-icon.icon-ic-bus-school {
  --url: url('/catalog/view/theme/default/image/svg/bus-school.svg');
}

.haperen-icon.icon-ic-th-large {
  --url: url('/catalog/view/theme/default/image/svg/th-large.svg');
}

.haperen-icon.icon-ic-calculator {
  --url: url('/catalog/view/theme/default/image/svg/calculator.svg');
}

.haperen-icon.icon-ic-checklist-check {
  --url: url('/catalog/view/theme/default/image/svg/checklist-check.svg');
}

.haperen-icon.icon-ic-drawpad {
  --url: url('/catalog/view/theme/default/image/svg/drawpad.svg');
}

.haperen-icon.icon-ic-messages {
  --url: url('/catalog/view/theme/default/image/svg/messages.svg');
}

.haperen-icon.icon-ic-square-round-info {
  --url: url('/catalog/view/theme/default/image/svg/square-round-info.svg');
}

.haperen-icon.icon-ic-tachometer {
  --url: url('/catalog/view/theme/default/image/svg/tachometer.svg');
}

.haperen-icon.icon-ic-truck {
  --url: url('/catalog/view/theme/default/image/svg/truck.svg');
}

.haperen-icon.icon-ic-wheelbarrel {
  --url: url('/catalog/view/theme/default/image/svg/wheelbarrel.svg');
}

.haperen-icon.icon-ic-minus {
  --url: url('/catalog/view/theme/default/image/svg/minus.svg');
}

.haperen-icon.icon-ic-plus {
  --url: url('/catalog/view/theme/default/image/svg/plus.svg');
}

.haperen-icon.icon-ic-trash-alt {
  --url: url('/catalog/view/theme/default/image/svg/trash-alt.svg');
}

.haperen-icon.icon-ic-clock {
  --url: url('/catalog/view/theme/default/image/svg/clock.svg');
}

.haperen-icon.icon-ic-thunderstorm {
  --url: url('/catalog/view/theme/default/image/svg/thunderstorm.svg');
}

.haperen-icon.icon-ic-m2 {
  --url: url('/catalog/view/theme/default/image/svg/m2.svg');
}

.haperen-icon.icon-ic-m1 {
  --url: url('/catalog/view/theme/default/image/svg/m1.svg');
}

.haperen-icon.icon-ic-uur {
  --url: url('/catalog/view/theme/default/image/svg/uur.svg');
}

.haperen-icon.icon-ic-file-times {
  --url: url('/catalog/view/theme/default/image/svg/file-times.svg');
}

.haperen-icon.icon-ic-file-check {
  --url: url('/catalog/view/theme/default/image/svg/file-check.svg');
}

.haperen-icon.icon-ic-times {
  --url: url('/catalog/view/theme/default/image/svg/times.svg');
}

.haperen-icon.icon-ic-trash {
  --url: url('/catalog/view/theme/default/image/svg/trash.svg');
}

.haperen-icon.icon-ic-inbox-in {
  --url: url('/catalog/view/theme/default/image/svg/inbox-in.svg');
}

.haperen-icon.icon-ic-envelope-open {
  --url: url('/catalog/view/theme/default/image/svg/envelope-open.svg');
}

.haperen-icon.icon-ic-send {
  --url: url('/catalog/view/theme/default/image/svg/send.svg');
}

.haperen-icon.icon-ic-check-circle {
  --url: url('/catalog/view/theme/default/image/svg/check-circle.svg');
}

.haperen-icon.icon-ic-sync {
  --url: url('/catalog/view/theme/default/image/svg/sync.svg');
}

.haperen-icon.icon-ic-circle {
  --url: url('/catalog/view/theme/default/image/svg/circle.svg');
}

.haperen-icon.icon-ic-times-circle {
  --url: url('/catalog/view/theme/default/image/svg/times-circle.svg');
}

.haperen-icon.icon-ic-archive {
  --url: url('/catalog/view/theme/default/image/svg/archive.svg');
}

.haperen-icon.icon-ic-eye-slash {
  --url: url('/catalog/view/theme/default/image/svg/eye-slash.svg');
}

.haperen-icon.icon-ic-eye {
  --url: url('/catalog/view/theme/default/image/svg/eye.svg');
}

/* BUTTONS */

.haperen-btn {
  -moz-transition: box-shadow ease-in-out 200ms, background-color ease-in-out 100ms;
  -webkit-transition: box-shadow ease-in-out 200ms, background-color ease-in-out 100ms;
  -o-transition: box-shadow ease-in-out 200ms, background-color ease-in-out 100ms;
  transition: box-shadow ease-in-out 200ms, background-color ease-in-out 100ms;

  border: unset;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-weight: 600;
  line-height: 100%;
  box-sizing: content-box;

  height: 14px;
  font-size: 14px;

  --background: #fff;
  --background--hover: var(--background);
  --color: var(--text-primary);
  --color--hover: var(--color);
  --box-shadow: none;
  --box-shadow--hover: none;
  --padding: var(--padding-lg);
  --border-radius: 1px;
}

.haperen-btn,
.haperen-btn:before,
.haperen-btn:after {
  background: var(--background);
  color: var(--color);
  box-shadow: var(--box-shadow);
  padding: var(--padding);
  border-radius: var(--border-radius);
}

.haperen-btn:not([disabled]):hover,
.haperen-btn:not([disabled]):hover:after {
  cursor: pointer;

  color: var(--color--hover);

  box-shadow: var(--box-shadow--hover);
  background: var(--background--hover);
}

.haperen-btn:not([disabled]):hover > span.haperen-icon {
  background: var(--color--hover);
}

.haperen-btn:focus {
  outline: none;
}

.haperen-btn.btn--primary {
  --background: var(--haperen-color-secondary);
  --background--hover: var(--haperen-color-primary);
  --color: var(--haperen-color-primary);
  --color--hover: var(--haperen-color-secondary);
}

.haperen-btn.btn--secondary {
  --background: var(--haperen-color-primary);
  --background--hover: var(--haperen-color-secondary);
  --color: var(--haperen-color-secondary);
  --color--hover: var(--haperen-color-primary);
}

.haperen-btn.btn--success {
  --background: var(--haperen-color-success);
  --background--hover: var(--text-secondary);
  --color: var(--text-secondary);
  --color--hover: var(--haperen-color-success);
}

.haperen-btn.btn--danger {
  --background: var(--haperen-color-danger);
  --background--hover: var(--text-secondary);
  --color: var(--text-secondary);
  --color--hover: var(--haperen-color-danger);
}

.haperen-btn.btn--outline {
  --background: #fff;
  --background--hover: var(--background);
  --color: var(--haperen-color-primary);
  --color--hover: var(--color);

  --box-shadow: inset 0 0 0 2px var(--haperen-color-secondary);
  --box-shadow--hover: var(--box-shadow);
}

.haperen-btn[disabled] {
  --background: #a9a9a9;
}

.haperen-btn > span.haperen-icon {
  background: var(--color);
}

.haperen-btn.btn--select:before,
.haperen-btn.btn--select:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.haperen-btn.btn--select:after {
  border: 1px var(--haperen-color-muted--200) solid;
  box-shadow: var(--box-shadow);
}

.haperen-btn.btn--select:hover:after {
  -moz-transition: box-shadow ease-in-out 200ms;
  -webkit-transition: box-shadow ease-in-out 200ms;
  -o-transition: box-shadow ease-in-out 200ms;
  transition: box-shadow ease-in-out 200ms;
}

.haperen-btn.btn--select.active {
  --box-shadow: none;
  --box-shadow--hover: none;
}

.haperen-btn.btn--select,
.haperen-btn.btn--select:before,
.haperen-btn.btn--select.active:after {
  --background: none;
}

.haperen-btn.btn--select.active:before {
  --background: var(--haperen-color-accent);
  opacity: 0.05;
}

.haperen-btn.btn--select.active:after,
.haperen-btn.btn--select.active:hover:after {
  border: 2px var(--haperen-color-accent) solid;
  box-shadow: none;
}

.haperen-btn.btn--xl {
  --padding: var(--padding-xl);
}

.haperen-btn.btn--lg {
  --padding: var(--padding-lg);
}

.haperen-btn.btn--md {
  --padding: var(--padding-md);
}

.haperen-btn.btn--sm {
  --padding: var(--padding-sm);
}

.haperen-btn.btn--round:after,
.haperen-btn.btn--round:before,
.haperen-btn.btn--round {
  --border-radius: 50%;

  aspect-ratio: 1/1;
}

.haperen-btn.btn--lg > span.haperen-icon,
.haperen-btn.btn--md > span.haperen-icon,
.haperen-btn.btn--sm > span.haperen-icon {
  width: 14px;
  height: 14px;

  margin: 0 var(--margin-sm);
}

.haperen-btn.btn--round > span.haperen-icon {
  margin: 0;
}

.haperen-btn-group {
  display: inline-flex;
  column-gap: var(--padding-md);
}

/* IMAGES */

.haperen-img-container {
  display: inline-block;
  position: relative;
  margin: var(--margin-lg) 0;
}

.haperen-img-container.no-gutters {
  margin: 0;
}

img.haperen-img {
  border-radius: var(--radius-sm);
  display: inline-block;
  border: 2px var(--haperen-color-muted--200) solid;
}

img.haperen-img.img--xs {
  width: 50px;
  height: 50px;
}

img.haperen-img.img--sm {
  width: 100px;
  height: 100px;
}

img.haperen-img.img--md {
  width: 150px;
  height: 150px;
}

img.haperen-img.img--lg {
  width: 300px;
  height: 300px;
}

img.haperen-img.img--round {
  border-radius: 50%;
}

.haperen-img-container > .img__text-href {
  position: absolute;
  cursor: pointer;
  text-decoration: underline;
  right: -100%;
  bottom: calc(50% - 0.5rem);
}

.haperen-img-container > img.haperen-img + .img__btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.haperen-img-container > img.haperen-img.img--round + .img__btn {
  bottom: 0.5rem;
  right: 0.5rem;
}

/* INPUTS */

.haperen-form-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: var(--margin-lg) var(--margin-md) var(--margin-xl) 0;
}

.haperen-form-group.form-group--full {
  margin: var(--margin-lg) 0 var(--margin-xl) 0;
}

.haperen-form-label {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;

  font-weight: 700;
  font-size: 1.61rem;
  margin-bottom: var(--margin-sm);
  flex: 1 1 100%;
}

.haperen-form-label.form-label--is-required:after {
  content: '*';
  color: var(--haperen-color-danger);
}

.haperen-form-description {
  flex: 1 1 100%;
  margin: var(--margin-sm) 0;
}

.haperen-form-group.form--inline {
  align-items: center;
  gap: var(--margin-lg);
}

.haperen-form-group.form--inline .haperen-form-label {
  flex: 0 1;
}

.haperen-form-group .haperen-form-control {
  flex: 1 1 100%;
  margin: var(--margin-sm) 0;
}

.haperen-form-control {
  --color: var(--text-primary);
  --color--accent: var(--haperen-color-accent);
  --box-shadow: var(--box-shadow-sm);
  --box-shadow--hover: var(--box-shadow-md);
  --padding: var(--padding-md) var(--padding-lg);
  --margin: var(--margin-sm) 0;
  --border-radius: 1px;
  --border: 1px var(--haperen-color-muted--200) solid;
  --outline: none;
}

input.haperen-form-control:after,
select.haperen-form-control:after,
textarea.haperen-form-control:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}

input.haperen-form-control,
select.haperen-form-control,
textarea.haperen-form-control {
  appearance: unset;

  width: 100%;

  padding: var(--padding);
  margin: var(--margin);
  box-shadow: var(--box-shadow);
  color: var(--color);
  border-radius: var(--border-radius);
  border: var(--border);
  outline: var(--outline);

  -moz-transition: box-shadow 200ms ease-out;
  -webkit-transition: box-shadow 200ms ease-out;
  -o-transition: box-shadow 200ms ease-out;
  transition: box-shadow 200ms ease-out;
}

.haperen-form-group.form--inline .haperen-form-control,
.haperen-form-group.form--inline .haperen-form-control.form-switch + .haperen-form-description {
  flex: 1 1;
}

input.haperen-form-control:hover,
select.haperen-form-control:hover,
textarea.haperen-form-control:hover {
  --box-shadow: var(--box-shadow--hover);
}

input.haperen-form-control:focus,
textarea.haperen-form-control:focus {
  --outline: 2px var(--color--accent) solid;
  --box-shadow: none;
}

input.haperen-form-control:placeholder-shown.form-control--is-invalid,
input.haperen-form-control:placeholder-shown.form-control--is-invalid:hover,
select.haperen-form-control:placeholder-shown.form-control--is-invalid,
select.haperen-form-control:placeholder-shown.form-control--is-invalid:hover,
textarea.haperen-form-control:placeholder-shown.form-control--is-invalid,
textarea.haperen-form-control:placeholder-shown.form-control--is-invalid:hover {
  --outline: 2px var(--haperen-color-danger) solid;
  --box-shadow: none;
}

input.haperen-form-control::-webkit-outer-spin-button,
input.haperen-form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.haperen-form-control[type='number'] {
  -moz-appearance: textfield;
}

input.haperen-form-control.haperen-icon {
  --size: 22px 22px;

  background-image: var(--url);
  background-position: center right var(--padding-lg);
  background-repeat: no-repeat;
  background-size: var(--size);
}

input.haperen-form-control.haperen-icon.icon--xs {
  --size: auto 8px;
}

input.haperen-form-control.haperen-icon.icon--sm {
  --size: auto 12px;
}

select.haperen-form-control {
  padding-right: -10px;
  cursor: pointer;
  background: url('/catalog/view/theme/default/image/svg/chevron-down-outline.svg') no-repeat right;
  background-size: 50px 60%;
}

textarea.haperen-form-control {
  resize: none;
}

.haperen-form-group.form--inline .haperen-form-control.form-switch {
  flex: 0 1;
}

.haperen-form-control.form-check {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: content-box;

  --size: 17px;

  line-height: 2.24rem;
  min-height: 2.24rem;

  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 100%;
  z-index: 10;

  margin: var(--margin);
  padding: var(--padding);
  padding-left: calc(var(--padding-md) + var(--size) + var(--padding-md));
}

.haperen-form-control.form-check.check--inline {
  width: auto;
  margin-right: var(--margin-lg);
}

.haperen-form-control.form-check > input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.haperen-form-control.form-check > span > span,
.haperen-form-control.form-check > span > span:after {
  border-radius: 50%;
}

.haperen-form-control.form-check > span > span {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;

  position: absolute;
  left: var(--padding-md);
  top: calc(50% - 0.91rem - 1px);
  width: var(--size);
  height: var(--size);
  border: 1px var(--haperen-color-muted--500) solid;
}

.haperen-form-control.form-check > span > span.check__icon.haperen-icon {
  width: 24px;
  height: 24px;
  background-color: var(--haperen-color-muted--600);

  border-radius: unset;
  border: unset;
}

.haperen-form-control.form-check > span {
  color: var(--text-muted);
  font-size: 1.54rem;
}

.haperen-form-control.form-check.check--clickable > span > span {
  z-index: 12;
}

.haperen-form-control.form-check.check--clickable > span > span ~ * {
  z-index: 11;
  position: relative;
}

.haperen-form-control.form-check > span:before,
.haperen-form-control.form-check > span:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}

.haperen-form-control.form-check > span:before {
  box-shadow: var(--box-shadow);
  border: var(--border);

  -moz-transition: box-shadow 200ms ease-out;
  -webkit-transition: box-shadow 200ms ease-out;
  -o-transition: box-shadow 200ms ease-out;
  transition: box-shadow 200ms ease-out;
}

.haperen-form-control.form-check > span:hover:before {
  --box-shadow: var(--box-shadow--hover);
}

.haperen-form-control.form-check > input:checked ~ span {
  color: var(--color);
}

.haperen-form-control.form-check > input:checked ~ span > span,
.haperen-form-control.form-check > input:checked ~ span > span.check__icon.haperen-icon {
  background-color: var(--haperen-color-accent);
}

.haperen-form-control.form-check > input:checked ~ span > span {
  border: 1px var(--color--accent) solid;
}

.haperen-form-control.form-check > input:checked ~ span:before {
  border: 2px var(--color--accent) solid;
  box-shadow: none;
}

.haperen-form-control.form-check > input:checked ~ span:after {
  background: var(--color--accent);
  opacity: 0.05;
}

.haperen-form-control.form-check.form-control--is-invalid > span:before {
  border: 2px var(--haperen-color-danger) solid;
  box-shadow: none;
}

.haperen-form-control.form-check.form-control--is-invalid > span:after {
  background: var(--haperen-color-danger);
  opacity: 0.05;
}

.haperen-form-control.form-check > input:checked ~ span > span:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(var(--size) - 10px);
  height: calc(var(--size) - 10px);
  background: #fff;
}

.haperen-form-control.form-check > input:checked ~ span > span.check__icon.haperen-icon:after {
  all: unset;
}

.haperen-form-control.form-switch {
  display: inline-block;
  position: relative;
  padding-left: 3.25rem;
  cursor: pointer;
  user-select: none;
  height: 1rem;

  margin: var(--margin);
}

.haperen-form-control.form-switch > input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.haperen-form-control.form-switch > div {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;

  position: absolute;
  top: -50%;
  left: 0;
  height: 1.75rem;
  width: 3.25rem;
  border-radius: var(--radius-md);
  background-color: var(--haperen-color-muted--200);
  border: 1px var(--haperen-color-muted--600) solid;
  -moz-transition: background-color 150ms ease-in, border 150ms ease-in;
  -webkit-transition: background-color 150ms ease-in, border 150ms ease-in;
  -o-transition: background-color 150ms ease-in, border 150ms ease-in;
  transition: background-color 150ms ease-in, border 150ms ease-in;
}

.haperen-form-control.form-switch > div:after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 6px;
  top: 5px;
  width: calc(1.75rem - 10px);
  height: calc(1.75rem - 10px);
  border-radius: 50%;
  border: 1px var(--haperen-color-muted--600) solid;
  box-shadow: 0 0 0 1px var(--haperen-color-muted--600);
  background: var(--text-secondary);
  -moz-transition: left 150ms ease-in, border 150ms ease-in;
  -webkit-transition: left 150ms ease-in, border 150ms ease-in;
  -o-transition: left 150ms ease-in, border 150ms ease-in;
  transition: left 150ms ease-in, border 150ms ease-in;
}

.haperen-form-control.form-switch > input[disabled] ~ div {
  cursor: not-allowed;
  opacity: 0.5;
}

.haperen-form-control.form-switch > input[type='checkbox']:checked ~ div {
  border: 1px var(--color--accent) solid;
  background: var(--color--accent);
}

.haperen-form-control.form-switch > input[type='checkbox']:checked ~ div:after {
  border: 1px var(--text-secondary) solid;
  left: calc((3.25rem - 6px) - (1.75rem - 10px));
}

.haperen-form-control.file-upload > .file-upload__drop-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  text-align: center;

  row-gap: var(--padding-lg);

  padding: calc(var(--padding-xl) * 2);
  border: 2px var(--haperen-color-muted--500) dashed;
  border-radius: var(--border-radius);
}

.haperen-form-control.file-upload > .file-upload__drop-container > .drop__icon {
  height: 4rem;
  width: 4rem;
}

.haperen-form-control.file-upload > .file-upload__preview-container {
  margin: var(--margin-lg) 0;
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview {
  display: grid;
  grid-template: auto / auto 1fr auto;
  align-items: center;

  padding: var(--padding);
  margin: var(--margin);
  box-shadow: var(--box-shadow);
  border: var(--border);
  border-radius: var(--border-radius);
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview > .preview__details {
  line-height: 1.2rem;
  overflow-x: auto;
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview > .preview__details > .preview__error-message,
.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview > .preview__details > .preview__filename {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview > .preview__details > .preview__error-message {
  color: var(--haperen-color-danger);
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview > .preview__delete:hover {
  cursor: pointer;
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview > .preview__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: 0;

  border-radius: var(--border);
  background-color: var(--color--accent);
  opacity: 0.05;

  transition: width 100ms ease-in-out, max-width 500ms ease-in-out;
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview.dz-processing:not(.dz-complete) > .preview__progress {
  max-width: 100%;
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview.dz-complete > .preview__progress {
  max-width: 0;
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview > [class*='preview__icon'] {
  display: none !important;
  margin-right: var(--margin-md);
}

.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview.dz-complete.dz-success > .preview__icon-success.haperen-icon,
.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview.dz-complete.dz-error > .preview__icon-error.haperen-icon,
.haperen-form-control.file-upload > .file-upload__preview-container > .file-upload__preview:not(.dz-complete) > .preview__icon-processing.haperen-icon {
  display: block !important;
}

.haperen-form-control.signature {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  text-align: center;
  height: 250px;

  row-gap: var(--padding-lg);

  padding: calc(var(--padding-xl) * 2);
  background-color: var(--haperen-color-muted--400);
  border-radius: var(--border-radius);
}

.haperen-form-control.signature:after {
  content: '';
  width: 100%;
  padding-top: var(--padding-md);
  border-bottom: 1px var(--haperen-color-muted--500) solid;
}

.haperen-form-control.signature > .signature__icon {
  height: 4rem;
  width: 4rem;
}

.haperen-form-control.signature > .signature__clear {
  position: absolute;
  top: calc(var(--padding-lg) * 2);
  right: calc(var(--padding-xl) * 2);

  z-index: 12;
  cursor: pointer;
}

.haperen-form-control.signature > .signature__description {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;

  color: var(--text-muted);
}

.haperen-form-control.signature > .signature__icon,
.haperen-form-control.signature > .signature__description {
  transition: 200ms opacity ease-in-out;
}

.haperen-form-control.signature.signature--is-drawn > .signature__icon,
.haperen-form-control.signature.signature--is-drawn > .signature__description {
  opacity: 0;
}

.haperen-form-control.signature > canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* MENUS */

ul.haperen-link-list {
  padding: 0;
  list-style: none;
  max-width: 100%;

  border-radius: 1px;

  -moz-transition: max-width 200ms ease-in-out, max-height 200ms ease-in-out;
  -webkit-transition: max-width 200ms ease-in-out, max-height 200ms ease-in-out;
  -o-transition: max-width 200ms ease-in-out, max-height 200ms ease-in-out;
  transition: max-width 200ms ease-in-out, max-height 200ms ease-in-out;
}

ul.haperen-link-list.link-list--inline {
  display: flex;
  padding: 0 var(--padding-sm);
  border-radius: 1px;
}

ul.haperen-link-list.link-list--muted {
  background: var(--haperen-color-muted--200);
}

ul.haperen-link-list.link-list--inline > [class*='--left'] {
  margin-right: auto;
  display: inline-block;
}

ul.haperen-link-list.link-list--inline > [class*='--right'] {
  margin-left: auto;
  display: inline-block;
}

ul.haperen-link-list.link-list--inline > li.haperen-link-item > a > span.haperen-icon:only-child {
  margin: 0;
}

li.haperen-link-item {
  border-radius: 1px;
  margin: var(--margin-sm) 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  line-height: 1rem;

  --background: none;
  --background--hover: var(--haperen-color-muted--200);
  --background--active: var(--background--hover);
  --background--outline: var(--background);
  --color: var(--text-muted);
  --color--hover: var(--text-primary);
  --color--active: var(--color--hover);
  --color--outline: var(--color--hover);
  --box-shadow: none;
  --box-shadow--hover: none;
  --box-shadow--active: var(--box-shadow--hover);
  --padding: var(--padding-md) var(--padding-lg);

  background: var(--background);
  box-shadow: var(--box-shadow);
}

li.haperen-link-item,
li.haperen-link-item:before,
li.haperen-link-item:after {
  -moz-transition: background-color 200ms ease-in-out, border 200ms ease-in-out, box-shadow 200ms ease-in-out;
  -webkit-transition: background-color 200ms ease-in-out, border 200ms ease-in-out, box-shadow 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out, border 200ms ease-in-out, box-shadow 200ms ease-in-out;
  transition: background-color 200ms ease-in-out, border 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

li.haperen-link-item > a {
  padding: var(--padding);
  text-decoration: none;
  color: var(--color);
  display: inline-block;
  flex: 1;
  line-height: 100%;
  user-select: none;

  -moz-transition: color 200ms ease-in-out;
  -webkit-transition: color 200ms ease-in-out;
  -o-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out;
}

li.haperen-link-item[data-toggle='sidebar'] {
  display: none;
}

li.haperen-link-item.active {
  --color: var(--color--active) !important;
  --background: var(--background--active) !important;
  --box-shadow: var(--box-shadow--active) !important;
}

li.haperen-link-item > a > span.haperen-icon {
  background: var(--color);
  margin-right: var(--margin-md);

  -moz-transition: transform 200ms ease-in-out, background-color 200ms ease-in-out;
  -webkit-transition: transform 200ms ease-in-out, background-color 200ms ease-in-out;
  -o-transition: transform 200ms ease-in-out, background-color 200ms ease-in-out;
  transition: transform 200ms ease-in-out, background-color 200ms ease-in-out;
}

li.haperen-link-item.link-item--shadow {
  --box-shadow: var(--box-shadow-sm);
  --box-shadow--hover: var(--box-shadow-md);
  --box-shadow--active: none;
}

li.haperen-link-item.link-item--primary {
  --color: var(--text-secondary);
  --background: var(--haperen-color-primary);
}

li.haperen-link-item.link-item--success {
  --color: var(--text-secondary);
  --background: var(--haperen-color-success);
}

li.haperen-link-item.link-item--danger {
  --color: var(--text-secondary);
  --background: var(--haperen-color-danger);
}

li.haperen-link-item.link-item--muted {
  --color: var(--haperen-color-muted--600);
  --background: var(--background--hover);
}

li.haperen-link-item:hover {
  cursor: pointer;

  --color: var(--color--hover);
  --background: var(--background--hover);
  --box-shadow: var(--box-shadow--hover);
}

li.haperen-link-item.link-item--muted.link-item--alternate:nth-child(odd) {
  --background: var(--background--hover);
}

li.haperen-link-item.link-item--muted.link-item--alternate:nth-child(even) {
  --background: var(--haperen-color-muted--400);
  --background--hover: var(--haperen-color-muted--400);
}

li.haperen-link-item.link-item--outline:after,
li.haperen-link-item.link-item--outline:before {
  border-radius: var(--radius-md);

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
}

li.haperen-link-item.link-item--outline:before {
  background: var(--background--outline);
  opacity: 0.05;
}

li.haperen-link-item.link-item--outline:after {
  border: 2px var(--background--outline) solid;
}

li.haperen-link-item:not(.active):not(:hover).link-item--outline {
  --color: var(--color--outline);
  background: #fff;
}

/* PANELS */

.haperen-panel {
  border-radius: 1px;

  font-size: 14px;
}

.haperen-panel p {
  margin: var(--margin-md) 0;
}

.haperen-panel a {
  color: var(--text-primary);
}

.haperen-panel > .panel__title {
  background: var(--haperen-color-muted--400);
  padding: var(--padding-lg);
}

.haperen-panel > .panel__title:first-child {
  border-radius: 1px 1px 0 0;
}

.haperen-panel > .panel__title > h2,
.haperen-panel > .panel__title > h3,
.haperen-panel > .panel__title > h4 {
  margin: var(--margin-sm);
}

.haperen-panel > .panel__title > [class*='--left'] {
  margin-right: auto;
  display: inline-block;
}

.haperen-panel > .panel__title > [class*='--right'] {
  margin-left: auto;
  display: inline-block;
}

.haperen-panel > .panel__body {
  display: grid;
  grid-template: auto / auto;
  padding: var(--padding-xl);
  background-color: #fff;
}

.haperen-panel.panel--sidebar > .panel__body {
  grid-template: auto / 2fr 5fr;
  column-gap: 1rem;
  -o-transition: grid-template 200ms ease-in-out;
  -webkit-transition: grid-template 200ms ease-in-out;
  -moz-transition: grid-template 200ms ease-in-out;
  transition: grid-template 200ms ease-in-out;
}

.haperen-panel > .panel__body:last-child {
  border-radius: 0 0 1px 1px;
}

.haperen-panel > .panel__body:only-child {
  border-radius: 1px;
}

.haperen-panel [class^='panel__'] {
  position: relative;
}

.haperen-panel [class*='--with-footer'] {
  padding-bottom: calc(50px + var(--margin-md)) !important;
}

.haperen-panel [class*='--with-header'] {
  padding-top: calc(50px + var(--margin-md)) !important;
}

.haperen-panel [class*='--footer-full'],
.haperen-panel [class*='--header-full'],
.haperen-panel [class*='--footer-center'],
.haperen-panel [class*='--footer-right'],
.haperen-panel [class*='--footer-left'],
.haperen-panel [class*='--header-center'],
.haperen-panel [class*='--header-right'],
.haperen-panel [class*='--header-left'] {
  position: absolute;
  z-index: 15;
}

.haperen-panel [class*='--sticky'] {
  position: sticky;
  margin: var(--margin-md) 0;
  top: var(--margin-sm) !important;
}

.haperen-panel [class*='--header-'][class*='--sticky'] {
  top: var(--margin-sm) !important;

  animation: var(--animation-time-md) slideInDown ease-in-out forwards;
}

.haperen-panel [class*='--footer-'][class*='--sticky'] {
  bottom: calc(var(--margin-xl) * 4) !important;

  animation: var(--animation-time-md) slideInUp ease-in-out forwards;
}

.haperen-panel [class*='--header-full'],
.haperen-panel [class*='--header-center'],
.haperen-panel [class*='--header-right'],
.haperen-panel [class*='--header-left'] {
  top: 0;
}

.haperen-panel [class*='--footer-full'],
.haperen-panel [class*='--footer-center'],
.haperen-panel [class*='--footer-right'],
.haperen-panel [class*='--footer-left'] {
  bottom: var(--margin-md);
}

.haperen-panel [class*='--footer-full'],
.haperen-panel [class*='--header-full'],
.haperen-panel [class*='--footer-left'],
.haperen-panel [class*='--header-left'] {
  left: var(--margin-md);
}

.haperen-panel [class*='--footer-full'],
.haperen-panel [class*='--header-full'],
.haperen-panel [class*='--footer-right'],
.haperen-panel [class*='--header-right'] {
  right: var(--margin-md);
}

.haperen-panel [class*='--footer-center'],
.haperen-panel [class*='--header-center'] {
  transform: translateX(-50%);
  left: calc(50%);
}

.haperen-panel.panel--sidebar > .panel__body > .panel__sidebar,
.haperen-panel > .panel__body > .panel__content {
  grid-row: 1;
  background-color: #fff;
}

.haperen-panel.panel--sidebar > .panel__body > .panel__content {
  grid-column: 2 / 3;
  padding: 0 0 0 var(--padding-lg);
}

.haperen-panel.panel--sidebar > .panel__body > .panel__sidebar {
  grid-column: 1 / 2;
  z-index: 20;
  border-right: 2px var(--haperen-color-muted--200) solid;
  -o-transition: max-width 200ms ease-in-out;
  -webkit-transition: max-width 200ms ease-in-out;
  -moz-transition: max-width 200ms ease-in-out;
  transition: max-width 200ms ease-in-out;
  padding: 0 var(--padding-lg) 0 0;
}

.haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--muted {
  border: 0;
  margin: calc(var(--padding-xl) * -1);
  margin-right: calc((var(--padding-xl) * -1) + 1rem);
  padding: var(--padding-xl);
  background-color: var(--haperen-color-muted--400);
}

.haperen-panel.panel--sidebar > .panel__body:last-child > .panel__sidebar:first-child {
  border-radius: 0 0 0 1px;
}

.haperen-panel.panel--sidebar > .panel__body:only-child > .panel__sidebar:first-child {
  border-radius: 1px 0 0 1px;
}

.haperen-panel.panel--sidebar > .panel__body > .panel__sidebar > ul.haperen-link-list {
  overflow: hidden;
}

/* TABS */

.haperen-tab-content {
  display: none;
  position: relative;
  height: 100%;

  animation: var(--animation-time-md) fadeIn ease-in-out forwards;
}

.haperen-tab-content.active {
  display: block;
}

/* ALERTS */

.swal2-container > .swal2-popup {
  border-radius: 1px;
  box-shadow: var(--box-shadow-md);
  padding: 0;
  width: auto;
}

.swal2-container > .swal2-popup > .swal2-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0;

  font-size: 1.5rem;
}

.swal2-container > .swal2-popup > .swal2-content::-webkit-scrollbar {
  display: none;
}

.swal2-container > .swal2-popup > .swal2-actions > .swal2-confirm.swal2-styled {
  background-color: var(--haperen-color-accent);
  color: var(--text-secondary);
}

.swal2-container > .swal2-popup > .swal2-actions > .swal2-cancel.swal2-styled {
  background-color: var(--haperen-color-muted--200);
  color: var(--haperen-color-primary);
  border: 2px var(--haperen-color-primary) solid;
}

.swal2-container > .swal2-popup > .swal2-actions > .swal2-styled {
  box-shadow: none;
  padding: var(--padding-md);
  border-radius: 1px;
  font-weight: 600;
}

.haperen-alert {
  --background: var(--haperen-color-muted--400);
  --color: var(--text-primary);
  --border-radius: var(--radius-sm);

  padding: var(--padding-xl);
  color: var(--color);
  position: relative;
  font-weight: 600;
}

.haperen-alert,
.haperen-alert:after,
.haperen-alert:before {
  border-radius: 1px;
}

.haperen-alert:after,
.haperen-alert:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.haperen-alert:after {
  border: 2px var(--background) solid;
}

.haperen-alert:before {
  background: var(--background);
  opacity: 0.05;
}

.haperen-alert.alert--info {
  --background: var(--haperen-color-muted--400);
}

.haperen-alert.alert--primary {
  --background: var(--haperen-color-primary);
}

.haperen-alert.alert--success {
  --background: var(--haperen-color-success);
}

.haperen-alert.alert--danger {
  --background: var(--haperen-color-danger);
}

/* TRANSITIONS */

.haperen-animation.animation-fade-in {
  animation: var(--animation-time-lg) fadeIn ease-in-out forwards;
}

.haperen-animation.animation-slide-in-down {
  animation: var(--animation-time-lg) slideInDown ease-in-out forwards;
}

.haperen-animation.animation-slide-out-down {
  animation: var(--animation-time-lg) slideOutDown ease-in-out forwards;
}

@media screen and (max-width: 992px) {
  /* PANELS */
  .haperen-panel.panel--sidebar > .panel__body > .panel__content {
    grid-column: 1 / 4;
    margin-left: calc(45px + 2px + var(--padding-lg));
  }

  .haperen-panel.panel--sidebar > .panel__body:only-child > .panel__sidebar.sidebar--muted:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--md-horizontal {
    padding: 0;
    border: unset;
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--md-horizontal,
  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--muted {
    grid-column: 1 / -1;
    grid-row: span 2;
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--muted {
    padding: calc(var(--padding-lg) * 2) var(--padding-lg);
    margin-right: calc(var(--padding-xl) * -1);
    margin-bottom: var(--padding-xl);
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--md-horizontal ~ .panel__content,
  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--muted ~ .panel__content {
    grid-column: 1 / -1;
    grid-row: span 2;

    margin-left: 0;
    padding-left: 0;
  }

  .haperen-panel.panel--sidebar > .panel__body {
    grid-template: auto / calc(45px + 2px + var(--padding-lg)) 0 1fr;
    column-gap: 0;
  }

  .haperen-panel.panel--sidebar:not(.open) > .panel__body > .panel__sidebar:not(.sidebar--md-horizontal) > ul.haperen-link-list {
    max-width: 45px;
  }

  .haperen-panel.panel--sidebar:not(.open) > .panel__body > .panel__sidebar.sidebar--md-horizontal > ul.haperen-link-list {
    max-height: 45px;
  }

  .haperen-panel.panel--sidebar.open > .panel__body > .panel__sidebar.sidebar--md-horizontal > ul.haperen-link-list {
    max-height: 100%;
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar.sidebar--md-horizontal > ul.haperen-link-list {
    margin: 0;
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar > ul.haperen-link-list > li.haperen-link-item[data-toggle='sidebar'] {
    display: list-item;
  }

  .haperen-panel.panel--sidebar:not(.open) > .panel__body > .panel__sidebar.sidebar--md-horizontal > ul.haperen-link-list > li.haperen-link-item[data-toggle='sidebar'] > a.haperen-tab-link > span.icon-ic-chevron-right {
    transform: rotate(0);
  }

  .haperen-panel.panel--sidebar.open > .panel__body > .panel__sidebar.sidebar--md-horizontal > ul.haperen-link-list > li.haperen-link-item[data-toggle='sidebar'] > a.haperen-tab-link > span.icon-ic-chevron-right {
    transform: rotate(-180deg);
  }

  .haperen-panel.panel--sidebar.open > .panel__body > .panel__sidebar:not(.sidebar--md-horizontal) > ul.haperen-link-list > li.haperen-link-item[data-toggle='sidebar'] > a.haperen-tab-link > span.icon-ic-chevron-right {
    transform: rotate(90deg);
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar > ul.haperen-link-list > li.haperen-link-item > a {
    padding: var(--padding-md);
  }

  .haperen-panel.panel--sidebar > .panel__body > .panel__sidebar > ul.haperen-link-list {
    white-space: nowrap;
  }

  li.haperen-link-item.link-item--md-icon {
    max-width: 45px;
  }

  li.haperen-link-item.link-item--md-icon > a {
    overflow-x: hidden;
    white-space: nowrap;
    padding: var(--padding-md);
    font-size: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  /* PANELS */
  .haperen-panel.panel--sidebar.open > .panel__body {
    grid-template: auto / 40% 0 1fr;
  }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
  /* PANELS */
  .haperen-panel.panel--sidebar.open > .panel__body {
    grid-template: auto / 70% 0 1fr;
  }
}

@media screen and (max-width: 576px) {
  /* PANELS */
  .haperen-panel.panel--sidebar.open > .panel__body {
    grid-template: auto / 100% 0 1fr;
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}