:root {
    /* Border radiuses */
    --border-radius-xs: 0.15rem;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 1rem;
    --border-radius-xxl: 1.25rem;
    --border-radius-xxxl: 1.5rem;
    --border-opacity: 1;
    /* Colours */
    --color-amber-100: #fff7ed;
    --color-amber-200: #fff3e5;
    --color-amber-300: #ffefdc;
    --color-amber-400: #ffe4c2;
    --color-amber-500: #ffd8a8;
    --color-amber-600: #ffc47d;
    --color-amber-700: #ffb152;
    --color-amber-800: #e69f49;
    --color-amber-900: #b37c39;
    --color-amber-rgb: 255, 177, 82;
    --color-blue-100: #eef8ff;
    --color-blue-200: #e6f5ff;
    --color-blue-300: #ddf2ff;
    --color-blue-400: #c4e8ff;
    --color-blue-500: #aaddff;
    --color-blue-600: #81cdff;
    --color-blue-700: #57bcff;
    --color-blue-800: #4ea9e6;
    --color-blue-900: #3d83b3;
    --color-blue-rgb: 87, 188, 255;
    --color-green-100: #f4fbf0;
    --color-green-200: #eef8ea;
    --color-green-300: #e9f6e2;
    --color-green-400: #d8efcd;
    --color-green-500: #c7e8b8;
    --color-green-600: #abdc94;
    --color-green-700: #8fd171;
    --color-green-800: #7eb863;
    --color-green-900: #5b8548;
    --color-green-rgb: 143, 209, 113;
    --color-grey-100: #f8f8f9;
    --color-grey-200: #f2f3f4;
    --color-grey-300: #e5e7e9;
    --color-grey-400: #d9dcde;
    --color-grey-500: #c0c4c8;
    --color-grey-600: #a7adb3;
    --color-grey-700: #68727d;
    --color-grey-800: #434f5d;
    --color-grey-900: #041527;
    --color-grey-rgb: 4, 21, 39;
    --color-red-100: #ffeef2;
    --color-red-200: #ffe6ec;
    --color-red-300: #ffdee6;
    --color-red-400: #ffc5d4;
    --color-red-500: #ffabc1;
    --color-red-600: #ff82a2;
    --color-red-700: #ff5983;
    --color-red-800: #e65076;
    --color-red-900: #b33e5b;
    --color-red-rgb: 204, 41, 82;
    --color-rose-100: #ffeeed;
    --color-rose-200: #ffe6e5;
    --color-rose-300: #fededc;
    --color-rose-400: #fdc5c2;
    --color-rose-500: #fcaca7;
    --color-rose-600: #fb847c;
    --color-rose-700: #fa5b50;
    --color-rose-800: #e05248;
    --color-rose-900: #ad3f37;
    --color-rose-rgb: 250, 91, 80;
    --color-rose-gradient-start: 243, 106, 98;
    --color-rose-gradient-end: 224, 110, 124;
    --color-rose-gradient-dark-start: 241, 76, 66;
    --color-rose-gradient-dark-end: 218, 82, 99;
    --color-purple-100: #f2f2ff;
    --color-purple-200: #ececff;
    --color-purple-300: #e5e6ff;
    --color-purple-400: #d2d3ff;
    --color-purple-500: #bebfff;
    --color-purple-600: #9ea0ff;
    --color-purple-700: #7e80ff;
    --color-purple-800: #7072e6;
    --color-purple-900: #5759b3;
    --color-purple-rgb: 126, 128, 255;
    --color-yellow-100: #fffbee;
    --color-yellow-200: #fff9e6;
    --color-yellow-300: #fff6de;
    --color-yellow-400: #fff0c5;
    --color-yellow-500: #ffe9ab;
    --color-yellow-600: #ffde82;
    --color-yellow-700: #ffd359;
    --color-yellow-800: #e6be50;
    --color-yellow-900: #b3943e;
    --color-yellow-rgb: 255, 211, 89;
    /* Font sizes */
    --font-size-xxxs: 0.825rem;
    --font-size-xxs: 0.825rem;
    --font-size-xs: 0.825rem;
    --font-size-sm: 0.825rem;
    --font-size-md: 0.825rem;
    --font-size-lg: 0.95rem;
    --font-size-xl: 0.825rem;
    --font-size-xxl: 0.825rem;
    --font-size-xxxl: 0.825rem;
    /* Font weights */
    --font-weight-light: 400;
    --font-weight-regular: 500;
    --font-weight-bold: 600;
    /* Default app settings */
    --app-background-color: var(--color-grey-100);
    --app-border-color: var(--color-grey-300);
    --app-border-color-rgb: 217, 220, 222;
    --app-button-accent-gradient-end: 224, 110, 124;
    --app-button-accent-gradient-end-highlight: 218, 82, 99;
    --app-button-accent-gradient-start: 243, 106, 98;
    --app-button-accent-gradient-start-highlight: 241, 76, 66;
    --app-button-default-color: var(--color-grey-900);
    --app-button-default-color-highlight: var(--color-grey-800);
    --app-button-default-color-rgb: 4, 21, 39;
    --app-color: var(--color-grey-800);
    --app-color-rgb: 104, 114, 125;
    --app-color-danger: var(--color-red-700);
    --app-color-danger-rgb: var(--color-red-rgb);
    --app-color-info: var(--color-purple-700);
    --app-color-info-rgb: var(--color-purple-rgb);
    --app-color-highlight: var(--color-grey-900);
    --app-color-primary: var(--color-grey-900);
    --app-color-primary-rgb: var(--color-grey-rgb);
    --app-color-secondary: var(--color-grey-700);
    --app-color-secondary-rgb: 104, 114, 125;
    --app-color-success: var(--color-green-700);
    --app-color-success-rgb: var(--color-green-rgb);
    --app-color-warning: var(--color-amber-700);
    --app-color-warning-rgb: var(--color-amber-rgb);
    --app-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --app-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --app-font-size: 0.875rem;
    --app-font-weight: 400;
    --app-line-height: 1.6;
    --app-spacing: 0.25rem;
    /* Default sidebar settings */
    --sidebar-background-color: #fff;
    --sidebar-background-color-highlight: var(--color-grey-100);
    --sidebar-border-color: var(--app-border-color);
    --sidebar-color: var(--color-grey-700);
    --sidebar-color-highlight: var(--color-grey-900);
    --sidebar-icon-stroke: var(--color-grey-700);
    --sidebar-icon-stroke-highlight: var(--color-grey-900);
    --sidebar-icon-fill: var(--color-grey-300);
}

/*
    ========================================
    Elements:
    ========================================
    Standard HTML elements
        – Figures
        – Formatting
        – Forms
        – Organisation
    ========================================
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

*::-moz-selection {
    background: var(--color-rose-400) !important;
    color: #fff;
}

*::-webkit-selection {
    background: var(--color-rose-400) !important;
    color: #fff;
}

*::selection {
    background: var(--color-rose-400) !important;
    color: #fff;
}

body,
html,
#root {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--app-background-color) !important;
    color: var(--app-color);
    font-family: var(--app-font-family) !important;
    font-size: var(--app-font-size) !important;
    font-weight: var(--app-font-weight) !important;
    line-height: var(--app-line-height) !important;
    margin: 0;
    opacity: 1 !important;
    overflow-y: scroll;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
}

body[data-sidebar-position="right"] {
    direction: rtl;
}

iframe {
    border: 0;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    html {
        overflow-x: hidden;
    }
}

/* =====
    Figures
===== */
figure {
    margin: 0 0 1rem;
}

figcaption {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    text-align: left;
}

img,
svg {
    vertical-align: middle;
}

progress {
    vertical-align: baseline;
}

/* =====
    Formatting
===== */
p {
    margin-bottom: 1rem;
    margin-top: 0;
}

abbr[title],
abbr[data-bs-original-title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}

b,
strong,
.strong {
    font-weight: var(--font-weight-bold);
}

em,
i {
    font-style: italic;
}

mark,
.mark {
    padding: 0.2em;
    background-color: var(--color-amber-100);
}

small,
.small {
    font-size: 80%;
}

sub,
sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
    Headings
*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--app-color-highlight);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

h1.h1-xl,
.h1-xl {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.25px;
}

h1.h1-lg,
.h1-lg {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.25px;
}

h1,
.h1 {
    font-size: 1.5rem;
    letter-spacing: -0.25px;
}

h2,
.h2 {
    font-size: 1.325rem;
    letter-spacing: -0.25px;
}

h3,
.h3 {
    font-size: 1.25rem;
    letter-spacing: -0.25px;
}

h4,
.h4 {
    font-size: 1.125rem;
}

h5,
.h5 {
    font-size: 1rem;
}

h6,
.h6 {
    font-size: var(--app-font-size);
}

@media (min-width: 640px) {

    h1.h1-xl,
    .h1-xl {
        font-size: 2.2rem;
    }
}

@media (min-width: 768px) {

    h1.h1-xl,
    .h1-xl {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {

    h1.h1-xl,
    .h1-xl {
        font-size: 2.5rem;
    }
}

@media (min-width: 1280px) {

    h1.h1-xl,
    .h1-xl {
        font-size: 2.75rem;
    }
}

/*
    Links
*/
a,
a:visited {
    color: var(--app-color-highlight);
    text-decoration: none;
}

a:active,
a:focus,
a:hover {
    color: var(--app-color);
    text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

/*
    Blocks
*/
address {
    font-style: normal;
    line-height: inherit;
    margin-bottom: 1rem;
}

blockquote {
    margin: 0 0 1rem;
}

code,
kbd,
pre,
samp {
    direction: ltr
        /* rtl:ignore */
    ;
    font-family: var(--app-font-family-monospace);
    font-size: 1em;
    unicode-bidi: bidi-override;
}

code {
    /*    font-size: 80%;*/
    color: var(--color-grey-900);
    font-weight: bold;
    word-wrap: break-word;
}

/*
a > code {
    color: inherit;
}
*/
kbd {
    background-color: var(--color-grey-900);
    border-radius: 0.1rem;
    font-size: 80%;
    color: #fff;
    padding: 0.2rem 0.4rem;
}

kbd kbd {
    font-size: 1em;
    font-weight: var(--font-weight-bold);
    padding: 0;
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: 80%;
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

/* =====
    Forms
===== */
/*
    Form organisation
*/
fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

legend {
    float: left;
    font-size: 1.5rem;
    line-height: inherit;
    margin-bottom: 0.5rem;
    padding: 0;
    width: 100%;
}

legend+* {
    clear: left;
}

label {
    display: inline-block;
}

/*
    Form inputs
*/
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

[type="radio"] {
    accent-color: var(--app-color-highlight);
}

output {
    display: inline-block;
}

select {
    text-transform: none;
    word-wrap: normal;
}

select:disabled {
    opacity: 1;
}

textarea {
    resize: vertical;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: textfield;
}

[list]::-webkit-calendar-picker-indicator {
    display: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: 0;
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

::-webkit-inner-spin-button {
    height: auto;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/*
    Form buttons
*/
button {
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
[role="button"] {
    cursor: pointer;
}

::file-selector-button {
    font: inherit;
}

/* =====
    Organisation
===== */
/*
    Horizontal rules
*/
hr {
    background-color: var(--app-border-color);
    border: 0;
    color: inherit;
    margin: 1rem 0;
}

hr:not([size]) {
    height: 1px;
}

/*
    Lists
*/
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

dl dt {
    font-weight: var(--font-weight-bold);
}

dl dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
}

ol,
ul {
    padding-left: 2rem;
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-bottom: 0;
}

/*
    Summaries
*/
summary {
    cursor: pointer;
    display: list-item;
}

/*
    Tables
*/
table {
    border-collapse: collapse;
    caption-side: bottom;
}

caption {
    color: var(--color-grey-600);
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    text-align: left;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

/*
    ========================================
    Objects:
    ========================================
    ...
    ========================================
*/
/*
    ========================================
    Media:
        – Icons
    ========================================
*/
.icon {
    fill: none;
    stroke: var(--app-color);
    stroke-linecap: round;
    stroke-width: 2.5px;
}



/* =====
    Square icons
===== */
.icon-square,
[class*="icon-square"] {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-lg);
    display: block;
    height: 2.625rem;
    margin-bottom: 0;
    max-height: 2.625rem;
    max-width: 2.625rem;
    min-height: 2.625rem;
    min-width: 2.625rem;
    object-fit: contain;
    padding: 0.625rem;
    text-align: center;
    width: 2.625rem;
}

.icon-square-md {
    height: 3.5rem;
    max-height: 3.5rem;
    max-width: 3.5rem;
    min-height: 3.5rem;
    min-width: 3.5rem;
    padding: 1rem;
    width: 3.5rem;
}

.icon-square-lg {
    height: 4rem;
    max-height: 4rem;
    max-width: 4rem;
    min-height: 4rem;
    min-width: 4rem;
    padding: 0.75rem;
    width: 4rem !important;
}

.icon-square svg,
figure[class*="icon-square"] svg {
    fill: transparent;
    stroke: var(--app-color);
    stroke-width: 1.75px;
}

.icon-square .fill,
figure[class*="icon-square"] .fill {
    fill: var(--color-grey-200) !important;
}

.icon-square.desaturated svg,
figure[class*="icon-square"].desaturated svg {
    stroke: var(--color-grey-500);
}

.icon-square.desaturated .fill,
figure[class*="icon-square"].desaturated .fill {
    fill: var(--app-background-color);
}

/*
    Customer icons
*/
.icon-customer {
    background-color: var(--color-grey-200);
    border-color: var(--color-grey-400);
    border-radius: var(--border-radius-lg);
    color: var(--color-grey-700);
    margin-top: 0;
}

.icon-customer.icon-customer-at-risk {
    background-color: var(--color-amber-200);
    border-color: var(--color-amber-400);
    color: var(--color-amber-700);
}

.icon-customer.icon-customer-best {
    background-color: var(--color-purple-200);
    border-color: var(--color-purple-400);
    color: var(--color-purple-700);
}

.icon-customer.icon-customer-lost {
    background-color: var(--color-red-200);
    border-color: var(--color-red-400);
    color: var(--color-red-700);
}

.icon-customer.icon-customer-new {
    background-color: var(--color-yellow-200);
    border-color: var(--color-yellow-400);
    color: var(--color-yellow-700);
}

.icon-customer.icon-customer-loyal {
    background-color: var(--color-blue-200);
    border-color: var(--color-blue-400);
    color: var(--color-blue-700);
}

.icon-customer.icon-customer-promising {
    background-color: var(--color-green-200);
    border-color: var(--color-green-400);
    color: var(--color-green-700);
}

.icon-customer span {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

/* =====
    Round icons
===== */
[class^="icon-round"] {
    background: var(--color-blue-text-2);
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
    height: 2.5rem;
    line-height: 2.5rem;
    min-height: 2.5rem;
    min-width: 2.5rem;
    text-align: center;
    width: 2.5rem;
}

[class^="icon-round-outline"] {
    background: transparent;
    border: 1px solid var(--app-border-color);
}

.icon-round-outline-amber {
    border: 1px solid var(--color-amber-border-2);
}

.icon-round-outline-amber svg {
    stroke: var(--color-amber-border-2);
}

/*
    ========================================
    Simple indicators:
        – Badges
        – Placeholders
        – Progress bars
        – Spinners
    ========================================
*/
.checked-item {
    margin: 0;
    padding-left: 1.5rem;
    position: relative;
}

.checked-item:not(.checked-item-empty)::before {
    /*        border: 1.5px solid var(--color-grey-600);*/
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23A7ADB3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cpolyline class='st0' points='12,5.2 6.5,10.8 4,8.2 '/%3E%3Ccircle class='st0' cx='8' cy='8' r='7.2'/%3E%3C/svg%3E");
    border-radius: 50%;
    display: block;
    height: 1rem;
    left: 0;
    padding: 0;
    position: absolute;
    stroke: red;
    top: 0.125rem;
    width: 1rem;
}

/* =====
    Badges
===== */
.badge {
    border-radius: 0.25rem;
    color: #fff;
    cursor: default;
    display: inline-block;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    line-height: 1rem;
    margin: 0 0.375rem;
    padding: 0 0.5rem;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.badge:empty {
    display: none;
}

.badge:first-of-type {
    margin-left: 0;
}

.badge:last-of-type {
    margin-right: 0;
}

/*
.badge + .badge {
    margin-left: 0;
}
*/
.badge.badge-primary {
    background-color: var(--color-grey-800) !important;
    border: 1px solid var(--color-grey-900) !important;
    color: var(--color-grey-100) !important;
}

.badge,
.badge.badge-tag,
.badge.badge-secondary {
    background-color: var(--color-grey-200) !important;
    border: 1px solid var(--color-grey-300) !important;
    color: var(--color-grey-700) !important;
}

.badge.badge-danger,
.badge.bg-danger {
    background-color: var(--color-danger-700) !important;
    border: 1px solid var(--color-danger-800) !important;
    color: var(--color-danger-100) !important;
}

.badge.badge-info,
.badge.bg-info {
    background-color: var(--color-info-700) !important;
    border: 1px solid var(--color-info-800) !important;
    color: var(--color-info-100) !important;
}

.badge.badge-success,
.badge.bg-success {
    background-color: var(--color-green-700) !important;
    border: 1px solid var(--color-green-800) !important;
    color: var(--color-green-100) !important;
}

.badge.badge-warning,
.badge.bg-warning {
    background-color: var(--color-amber-700) !important;
    border: 1px solid var(--color-amber-800) !important;
    color: var(--color-amber-100) !important;
}

/*
.badge-soft-primary {
    color: color-yiq(rgba(63, 128, 234, 0.175));
    background-color: rgba(63, 128, 234, 0.175);
    color: var(--app-color-highlight);
}
a.badge-soft-primary:hover, a.badge-soft-primary:focus {
    color: color-yiq(rgba(63, 128, 234, 0.175));
    background-color: rgba(24, 99, 222, 0.175);
}
a.badge-soft-primary:focus, a.badge-soft-primary.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(63, 128, 234, 0.5);
}
.badge-soft-secondary {
    color: color-yiq(rgba(73, 80, 87, 0.175));
    background-color: rgba(73, 80, 87, 0.175);
    color: var(--app-color);
}
a.badge-soft-secondary:hover, a.badge-soft-secondary:focus {
    color: color-yiq(rgba(73, 80, 87, 0.175));
    background-color: rgba(50, 55, 59, 0.175);
}
a.badge-soft-secondary:focus, a.badge-soft-secondary.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(73, 80, 87, 0.5);
}
.badge-soft-success {
    color: color-yiq(rgba(75, 191, 115, 0.175));
    background-color: rgba(75, 191, 115, 0.175);
    color: #4BBF73;
}
a.badge-soft-success:hover, a.badge-soft-success:focus {
    color: color-yiq(rgba(75, 191, 115, 0.175));
    background-color: rgba(56, 159, 92, 0.175);
}
a.badge-soft-success:focus, a.badge-soft-success.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(75, 191, 115, 0.5);
}
.badge-soft-info {
    color: color-yiq(rgba(var(--app-color-info-rgb), 0.175));
    background-color: rgba(var(--app-color-info-rgb), 0.175);
    color: var(--app-color-info);
}
a.badge-soft-info:hover, a.badge-soft-info:focus {
    color: color-yiq(rgba(var(--app-color-info-rgb), 0.175));
    background-color: rgba(24, 122, 163, 0.175);
}
a.badge-soft-info:focus, a.badge-soft-info.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(var(--app-color-info-rgb), 0.5);
}
.badge-soft-warning {
    color: color-yiq(rgba(var(--app-color-warning-rgb), 0.175));
    background-color: rgba(var(--app-color-warning-rgb), 0.175);
    color: var(--app-color-warning);
}
a.badge-soft-warning:hover, a.badge-soft-warning:focus {
    color: color-yiq(rgba(var(--app-color-warning-rgb), 0.175));
    background-color: rgba(221, 142, 32, 0.175);
}
a.badge-soft-warning:focus, a.badge-soft-warning.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(var(--app-color-warning-rgb), 0.5);
}
.badge-soft-danger {
    color: color-yiq(rgba(var(--app-color-danger-rgb), 0.175));
    background-color: rgba(var(--app-color-danger-rgb), 0.175);
    color: var(--app-color-danger);
}
a.badge-soft-danger:hover, a.badge-soft-danger:focus {
    color: color-yiq(rgba(var(--app-color-danger-rgb), 0.175));
    background-color: rgba(201, 48, 44, 0.175);
}
a.badge-soft-danger:focus, a.badge-soft-danger.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(var(--app-color-danger-rgb), 0.5);
}
.badge-soft-light {
    color: color-yiq(rgba(239, 242, 246, 0.175));
    background-color: rgba(239, 242, 246, 0.175);
    color: var(--app-border-color);
}
a.badge-soft-light:hover, a.badge-soft-light:focus {
    color: color-yiq(rgba(239, 242, 246, 0.175));
    background-color: rgba(207, 217, 227, 0.175);
}
a.badge-soft-light:focus, a.badge-soft-light.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(239, 242, 246, 0.5);
}
.badge-soft-dark {
    color: color-yiq(rgba(var(--color-grey-rgb), 0.175));
    background-color: rgba(var(--color-grey-rgb), 0.175);
    color: var(--app-color-highlight);
}
a.badge-soft-dark:hover, a.badge-soft-dark:focus {
    color: color-yiq(rgba(var(--color-grey-rgb), 0.175));
    background-color: rgba(var(--color-grey-rgb), 0.175);
}
a.badge-soft-dark:focus, a.badge-soft-dark.focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(41, 48, 66, 0.5);
}
.badge.rounded-pill {
    padding-right: 0.65em;
    padding-left: 0.65em;
}
*/
.badge svg+span {
    margin-left: 0.25rem;
}

/* =====
    Placeholders
===== */
.placeholder {
    background-color: var(--color-grey-400);
    border-radius: 0.4375rem;
    cursor: wait;
    display: inline-block;
    margin: 0.25rem 0;
    min-height: 0.75rem;
    opacity: 0.5;
    vertical-align: middle;
}

.placeholder-xs {
    min-height: 0.6em;
}

.placeholder-sm {
    min-height: 0.8em;
}

.placeholder-lg {
    min-height: 1.2em;
}

.placeholder-h1 {
    border-radius: 0.75rem;
    height: 1.5rem;
    margin: 0.25rem 0;
    max-width: 100%;
}

.placeholder.btn::before {
    display: inline-block;
    content: "";
}


.animate-spin {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/*
    Glowing placeholder
*/
.placeholder-glow .placeholder {
    -webkit-animation: placeholder-glow 2s ease-in-out infinite;
    animation: placeholder-glow 2s ease-in-out infinite;
}

@-webkit-keyframes placeholder-glow {
    50% {
        opacity: 0.2;
    }
}

@keyframes placeholder-glow {
    50% {
        opacity: 0.2;
    }
}

/*
    Waving placeholder
*/
.placeholder-wave {
    -webkit-mask-image: linear-gradient(130deg,
            #000 55%,
            rgba(0, 0, 0, 0.6) 75%,
            #000 95%);
    mask-image: linear-gradient(130deg,
            #000 55%,
            rgba(0, 0, 0, 0.6) 75%,
            #000 95%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-animation: placeholder-wave 2s linear infinite;
    animation: placeholder-wave 2s linear infinite;
}

@-webkit-keyframes placeholder-wave {
    100% {
        -webkit-mask-position: -200% 0%;
        mask-position: -200% 0%;
    }
}

@keyframes placeholder-wave {
    100% {
        -webkit-mask-position: -200% 0%;
        mask-position: -200% 0%;
    }
}

/* =====
    Progress bars
===== */
.progress {
    background-color: transparent;
    border-radius: 0.2rem;
    display: flex;
    font-size: 0.61875rem;
    height: 0.5rem;
    overflow: hidden;
    position: relative;
}

.progress::before {
    background-color: var(--color-grey-300);
    border-radius: 1px;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-1px);
    width: 100%;
}

.progress-bar {
    background-color: var(--color-blue-700);
    border-radius: 0.25rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: width 0.6s ease;
    white-space: nowrap;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes;
    animation: 1s linear infinite progress-bar-stripes;
}

@-webkit-keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar-animated {
        -webkit-animation: none;
        animation: none;
    }
}

.progress-bar-rail {
    background-color: var(--app-background-color);
    border-radius: 0.25rem;
    height: 0.5rem;
}

.progress-bar-rail .progress-bar {
    background-color: var(--app-color-success);
    border-radius: 1rem;
    height: 100%;
}

/* =====
    Spinners
===== */
.spinner-container.spinner-container-page {
    align-items: center;
    background: #fff;
    bottom: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

/*
    Spinning loader
*/
/*
.spinner-border {
    animation: none;
    border: none;
    height: 2rem;
    position: relative;
    width: 2rem;
}
    .spinner-border:not(.spinner-border-sm)::before {
        content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cg transform='translate(1021.482 42.814)'%3E%3Cg transform='translate(50.416 46.896)'%3E%3Cpath d='M-1048.9-70.4c0,0.6,0,1.2,0.2,1.7 c0.1,0.3,0.2,0.5,0.5,0.6c0.1,0.1,0.3,0.2,0.3,0.4c0.1,0.1,0.1,0.3,0.1,0.5c0,0.2-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.2-0.7,0.2 c-0.2,0-0.5-0.1-0.7-0.2c-0.5-0.3-0.9-0.7-1.1-1.2c-0.3-0.5-0.4-1.7-0.4-2.7l0-1.9v-5l-4.1,6.3c-0.1,0.1-0.2,0.2-0.4,0.3 c-0.1,0.1-0.3,0.1-0.5,0.1c-0.2,0-0.3,0-0.4-0.1c-0.2-0.1-0.3-0.2-0.4-0.3l-4.2-6.5v10.1c0,0.3-0.1,0.5-0.3,0.7 c-0.2,0.2-0.5,0.3-0.7,0.3c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.5-0.3-0.7v-13c0-0.6,0.5-1,1-1c0.2,0,0.3,0,0.5,0.1 c0.2,0.1,0.3,0.2,0.4,0.3l5.1,7.7l5.1-7.7c0.2-0.3,0.5-0.5,0.9-0.5c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7v8.1 L-1048.9-70.4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        height: 2rem;
        left: 0;
        position: absolute;
        top: 0;
        width: 2rem;
    }
    .spinner-border::after {
        -webkit-animation: 0.75s linear infinite spinning-circle;
        animation: 0.75s linear infinite spinner-border;
        border: 0.125rem solid var(--app-color-highlight);
        border-radius: 50%;
        border-right-color: transparent;
        content: '';
        display: inline-block;
        height: 2rem;
        vertical-align: -0.125em;
        width: 2rem;
    }
    .spinner-border-sm::after {
        border-color: currentColor;
        border-right-color: transparent;
        border-width: 0.125rem;
        height: 1rem;
        width: 1rem;
    }
@-webkit-keyframes spinning-circle {
    to {
        transform: rotate(360deg);
    }
}
@keyframes spinning-circle {
    to {
        transform: rotate(360deg);
    }
}
*/
.spinner-border {
    -webkit-animation: 0.75s linear infinite spinner-border;
    animation: 0.75s linear infinite spinner-border;
    border: 0.25em solid var(--app-color-highlight);
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: 2rem;
    vertical-align: -0.125em;
    width: 2rem;
}

.spinner-border-sm {
    border-color: currentColor;
    height: 1rem;
    width: 1rem;
}

@-webkit-keyframes spinner-border {
    to {
        transform: rotate(360deg)
            /* rtl:ignore */
        ;
    }
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg)
            /* rtl:ignore */
        ;
    }
}

/*
    Pulsing loader
*/
@-webkit-keyframes spinner-grow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.spinner-grow {
    -webkit-animation: 0.75s linear infinite spinner-grow;
    animation: 0.75s linear infinite spinner-grow;
    background-color: var(--app-color-highlight);
    border-radius: 50%;
    display: inline-block;
    height: 2rem;
    opacity: 0;
    width: 2rem;
    vertical-align: -0.125em;
}

.spinner-grow-sm {
    height: 1rem;
    width: 1rem;
}

@media (prefers-reduced-motion: reduce) {

    .spinner-border,
    .spinner-grow {
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
    }
}

/*
    ========================================
    Direction:
        – Steppers
    ========================================
*/
/* =====
    Steppers
===== */

.stepper {
    align-self: start;
    background: var(--app-background-color);
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    display: inline-flex;
    list-style-type: none;
    margin: 0;
    padding: 0.25rem;
    width: auto;
}

.stepper .stepper-step {
    color: var(--color-grey-600);
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.5rem;
    padding: 0.25rem;
    text-align: center;
    width: 2rem;
}

.stepper-step.selected {
    background: #fff;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    color: var(--app-color-highlight);
}


/*
    ========================================
    Simple actions:
        - Links
        - Buttons
            – Simple buttons
            – Button dropdowns
            – Button groups
    ========================================
*/
/* =====
    Links
===== */
.link,
.link:visited {
    text-decoration: underline;
}

.link:focus,
.link:hover {
    text-decoration: none;
}

.link>svg {
    margin: 0 0.25rem 0.125rem 0.25rem;
}

.link-danger,
.link-danger:visited,
.link-dark,
.link-dark:visited,
.link-inherit,
.link-inherit:visited,
.link-light,
.link-light:visited,
.link-primary,
.link-primary:visited .link-secondary,
.link-secondary:visited .link-success,
.link-success:visited .link-warning,
.link-warning:visited {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

.link-danger:focus,
.link-danger:hover,
.link-dark:focus,
.link-dark:hover,
.link-inherit:focus,
.link-inherit:hover,
.link-info:focus,
.link-info:hover,
.link-light:focus,
.link-light:hover,
.link-primary:focus,
.link-primary:hover,
.link-secondary:focus,
.link-secondary:hover,
.link-success:focus,
.link-success:hover,
.link-warning:focus,
.link-warning:hover {
    text-decoration: none;
}

.link-danger,
.link-danger:focus,
.link-danger:hover,
.link-danger:visited {
    color: var(--app-color-danger);
}

.link-dark,
.link-dark:focus,
.link-dark:hover,
.link-dark:visited {
    color: var(--app-color-highlight);
}

.link-info,
.link-info:focus,
.link-info:hover,
.link-info:visited {
    color: var(--app-color-info);
}

.link-inherit,
.link-inherit:focus,
.link-inherit:hover,
.link-inherit:visited {
    color: inherit;
}

.link-light,
.link-light:focus,
.link-light:hover,
.link-light:visited {
    color: var(--app-color);
}

.link-primary,
.link-primary:focus,
.link-primary:hover,
.link-primary:visited .link-secondary,
.link-secondary:focus,
.link-secondary:hover,
.link-secondary:visited {
    color: var(--app-color-highlight);
}

.link-success,
.link-success:focus,
.link-success:hover,
.link-success:visited {
    color: var(--app-color-success);
}

.link-warning,
.link-warning:focus,
.link-warning:hover,
.link-warning:visited {
    color: var(--app-color-warning);
}

/*
    Padded links
*/
.block-link,
.btn-link {
    align-items: center;
    border-radius: var(--border-radius-md);
    color: var(--app-color);
    display: flex;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    justify-content: space-between;
    padding: 1rem 0.5rem;
    transition: all ease-in 0.15s;
}

.block-link:focus,
.block-link:hover,
.btn-link:focus,
.btn-link:hover {
    color: var(--app-color-highlight);
    text-decoration: none;
    transition: all ease-in 0.15s;
}

.block-link {
    background: var(--color-grey-100);
    border: 1px solid var(--color-grey-400);
}

.block-link:focus,
.block-link:hover {
    background: var(--color-grey-200);
    border: 1px solid var(--color-grey-500);
}

/* =====
    Buttons
===== */
/*
    Simple buttons
*/
.btn,
.btn:visited {
    align-self: center;
    background-color: transparent;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    color: var(--color-grey-900);
    cursor: pointer;
    display: inline-block;
    font-size: 0.825rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.375rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
}

.btn:hover {
    background-color: var(--color-grey-200);
    border-color: var(--color-grey-400);
    color: var(--color-grey-900);
    text-decoration: none;
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.btn-check[disabled]+.btn,
.btn-check:disabled+.btn {
    pointer-events: none;
    filter: none;
    opacity: 0.65;
}

.btn-check:focus+.btn,
.btn:focus {
    box-shadow: none;
    outline: 0;
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: 0.65;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.btn-sm,
.btn-sm:visited,
.btn-group-sm>.btn,
.btn-group-sm>.btn:visited {
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xxs);
    line-height: 1.25rem;
    padding: 0.375rem 0.5rem;
}

.btn-lg,
.btn-lg:visited,
.btn-group-lg>.btn,
.btn-group-lg>.btn:visited {
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
    padding: 0.75rem 1rem;
}

/*
    Simple buttons: dark, primary and secondary
*/
.btn-dark,
.btn-dark:visited,
.btn-primary,
.btn-primary:visited,
.btn-secondary,
.btn-secondary:visited {
    background: var(--app-button-default-color);
    border-color: var(--app-button-default-color);
    color: #fff;
}

.btn-dark:hover,
.btn-primary:hover,
.btn-secondary:hover {
    background: var(--app-button-default-color-highlight);
    border-color: var(--app-button-default-color-highlight);
    color: #fff;
}

.btn-check:focus+.btn-dark,
.btn-dark:focus,
.btn-check:focus+.btn-primary,
.btn-primary:focus,
.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
    background-color: var(--app-button-default-color-highlight);
    border-color: var(--app-button-default-color-highlight);
    box-shadow: none;
    color: #fff;
}

.btn-check:checked+.btn-dark,
.btn-check:active+.btn-dark,
.btn-dark:active,
.btn-dark.active,
.show>.btn-dark.dropdown-toggle,
.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle,
.btn-check:checked+.btn-secondary,
.btn-check:active+.btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show>.btn-secondary.dropdown-toggle {
    background-color: var(--color-grey-800);
    border-color: var(--color-grey-800);
    color: #fff;
}

.btn-check:checked+.btn-dark:focus,
.btn-check:active+.btn-dark:focus,
.btn-dark:active:focus,
.btn-dark.active:focus,
.show>.btn-dark.dropdown-toggle:focus,
.btn-check:checked+.btn-primary:focus,
.btn-check:active+.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-check:checked+.btn-secondary:focus,
.btn-check:active+.btn-secondary:focus,
.btn-secondary:active:focus,
.btn-secondary.active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-dark:disabled,
.btn-dark.disabled,
.btn-primary:disabled,
.btn-primary.disabled,
.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: rgba(var(--app-button-default-color-rgb), 0.6);
    border-color: rgba(var(--app-button-default-color-rgb), 0.6);
    color: #fff;
}

.btn .badge {
    position: relative;
    top: -1px;
}

/*
    Simple buttons: gradient
*/
.btn.btn-highlight,
.page-header .btn-primary,
.page-header .btn-primary:visited {
    background: rgba(var(--app-button-accent-gradient-end), 1);
    background: linear-gradient(90deg,
            rgba(var(--app-button-accent-gradient-start), 1) 0%,
            rgba(var(--app-button-accent-gradient-end), 1) 100%);
    border-color: rgba(var(--app-button-accent-gradient-end), 1);
    color: #fff;
}

.btn.btn-highlight:hover,
.page-header .btn-primary:hover {
    background: rgba(var(--app-button-accent-gradient-end-highlight), 1);
    background: linear-gradient(90deg,
            rgba(var(--app-button-accent-gradient-end-highlight), 1) 0%,
            rgba(var(--app-button-accent-gradient-start-highlight), 1) 100%);
    border-color: rgba(var(--app-button-accent-gradient-end-highlight), 1);
    color: #fff;
}

.page-header .btn-check:focus+.btn-primary,
.page-header .btn-primary:focus {
    background: rgba(var(--app-button-accent-gradient-end-highlight), 1);
    background: linear-gradient(90deg,
            rgba(var(--app-button-accent-gradient-end-highlight), 1) 0%,
            rgba(var(--app-button-accent-gradient-start-highlight), 1) 100%);
    border-color: rgba(var(--app-button-accent-gradient-end-highlight), 1);
    box-shadow: none;
    color: #fff;
}

.page-header .btn-check:checked+.btn-primary,
.page-header .btn-check:active+.btn-primary,
.page-header .btn-primary:active,
.page-header .btn-primary.active,
.page-header .show>.btn-primary.dropdown-toggle {
    background: rgba(var(--app-button-accent-gradient-end-highlight), 1);
    background: linear-gradient(90deg,
            rgba(var(--app-button-accent-gradient-end-highlight), 1) 0%,
            rgba(var(--app-button-accent-gradient-start-highlight), 1) 100%);
    border-color: rgba(var(--app-button-accent-gradient-end-highlight), 1);
    color: #fff;
}

.page-header .btn-primary.dropdown-toggle-split {
    background: rgb(var(--app-button-accent-gradient-end));
}

.page-header .btn-primary.dropdown-toggle-split:hover {
    background: rgb(var(--app-button-accent-gradient-end-highlight));
}

.page-header .btn-check:checked+.btn-primary:focus,
.page-header .btn-check:active+.btn-primary:focus,
.page-header .btn-primary:active:focus,
.page-header .btn-primary.active:focus,
.page-header .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.page-header .btn-primary:disabled,
.page-header .btn-primary.disabled {
    background: rgba(var(--app-button-accent-gradient-end), 0.8);
    background: linear-gradient(90deg,
            rgba(var(--app-button-accent-gradient-end), 0.8) 0%,
            rgba(var(--app-button-accent-gradient-start), 0.8) 100%);
    border-color: rgba(var(--app-button-accent-gradient-end), 0.8);
    color: #fff;
}

/*
    Simple buttons: light, primary outline and secondary outline
*/
.btn-light,
.btn-light:visited,
.btn-outline-primary,
.btn-outline-primary:visited,
.btn-outline-secondary,
.btn-outline-secondary:visited {
    background-color: transparent;
    border-color: var(--app-border-color);
    color: var(--color-grey-900);
}

.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background-color: transparent;
    border-color: var(--color-grey-400);
    color: var(--color-grey-800) !important;
}

.btn-check:focus+.btn-light,
.btn-light:focus,
.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus,
.btn-check:focus+.btn-outline-secondary,
.btn-outline-secondary:focus {
    box-shadow: none;
}

.btn-check:checked+.btn-light,
.btn-check:active+.btn-light,
.btn-light:active,
.btn-light.active,
.btn-light.dropdown-toggle.show,
.btn-check:checked+.btn-outline-primary,
.btn-check:active+.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-check:checked+.btn-outline-secondary,
.btn-check:active+.btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show {
    background-color: transparent;
    border-color: var(--color-grey-400);
    box-shadow: none;
    color: var(--color-grey-800);
}

.btn-check:checked+.btn-light:focus,
.btn-check:active+.btn-light:focus,
.btn-light:active:focus,
.btn-light.active:focus,
.btn-light.dropdown-toggle.show:focus,
.btn-check:checked+.btn-outline-primary:focus,
.btn-check:active+.btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-check:checked+.btn-outline-secondary:focus,
.btn-check:active+.btn-outline-secondary:focus,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus {
    box-shadow: none;
}

.btn-light:disabled,
.btn-light.disabled,
.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    background-color: transparent;
    border-color: var(--color-grey-200);
    color: var(--app-color);
}

/*
    Simple buttons: danger and danger outline
*/
.btn-danger,
.btn-danger:visited {
    background-color: var(--app-color-danger);
    border-color: var(--app-color-danger);
    color: #fff;
}

.btn-danger:hover {
    background-color: var(--color-red-800);
    border-color: var(--color-red-800);
    color: #fff;
}

.btn-check:focus+.btn-danger,
.btn-danger:focus {
    background-color: var(--color-red-800);
    border-color: var(--color-red-800);
    box-shadow: none;
    color: #fff;
}

.btn-check:checked+.btn-danger,
.btn-check:active+.btn-danger,
.btn-danger:active,
.btn-danger.active,
.show>.btn-danger.dropdown-toggle {
    background-color: var(--color-red-800);
    border-color: var(--color-red-800);
    color: #fff;
}

.btn-check:checked+.btn-danger:focus,
.btn-check:active+.btn-danger:focus,
.btn-danger:active:focus,
.btn-danger.active:focus,
.show>.btn-danger.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-danger:disabled,
.btn-danger.disabled {
    background-color: var(--color-red-500);
    border-color: var(--color-red-500);
    color: #fff;
}

.btn-outline-danger,
.btn-outline-danger:visited {
    border-color: var(--app-color-danger);
    color: var(--app-color-danger);
}

.btn-outline-danger:hover {
    background-color: var(--app-color-danger);
    border-color: var(--app-color-danger);
    color: #fff;
}

.btn-check:focus+.btn-outline-danger,
.btn-outline-danger:focus {
    box-shadow: none;
}

.btn-check:checked+.btn-outline-danger,
.btn-check:active+.btn-outline-danger,
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger.dropdown-toggle.show {
    background-color: var(--app-color-danger);
    border-color: var(--app-color-danger);
    color: #fff;
}

.btn-check:checked+.btn-outline-danger:focus,
.btn-check:active+.btn-outline-danger:focus,
.btn-outline-danger:active:focus,
.btn-outline-danger.active:focus,
.btn-outline-danger.dropdown-toggle.show:focus {
    box-shadow: none;
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    background-color: transparent;
    color: var(--color-red-500);
}

/*
    Simple buttons: info and info outline
*/
.btn-info,
.btn-info:visited {
    background-color: var(--app-color-info);
    border-color: var(--app-color-info);
    color: #fff;
}

.btn-info:hover {
    background-color: var(--color-purple-800);
    border-color: var(--color-purple-800);
    color: #fff;
}

.btn-check:focus+.btn-info,
.btn-info:focus {
    background-color: var(--color-purple-800);
    border-color: var(--color-purple-800);
    box-shadow: none;
    color: #fff;
}

.btn-check:checked+.btn-info,
.btn-check:active+.btn-info,
.btn-info:active,
.btn-info.active,
.show>.btn-info.dropdown-toggle {
    background-color: var(--color-purple-800);
    border-color: var(--color-purple-800);
    color: #fff;
}

.btn-check:checked+.btn-info:focus,
.btn-check:active+.btn-info:focus,
.btn-info:active:focus,
.btn-info.active:focus,
.show>.btn-info.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-info:disabled,
.btn-info.disabled {
    background-color: var(--color-purple-500);
    border-color: var(--color-purple-500);
    color: #fff;
}

.btn-outline-info,
.btn-outline-info:visited {
    border-color: var(--app-color-info);
    color: var(--app-color-info);
}

.btn-outline-info:hover {
    background-color: var(--app-color-info);
    border-color: var(--app-color-info);
    color: #fff;
}

.btn-check:focus+.btn-outline-info,
.btn-outline-info:focus {
    box-shadow: none;
}

.btn-check:checked+.btn-outline-info,
.btn-check:active+.btn-outline-info,
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info.dropdown-toggle.show {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: #fff;
}

.btn-check:checked+.btn-outline-info:focus,
.btn-check:active+.btn-outline-info:focus,
.btn-outline-info:active:focus,
.btn-outline-info.active:focus,
.btn-outline-info.dropdown-toggle.show:focus {
    box-shadow: none;
}

.btn-outline-info:disabled,
.btn-outline-info.disabled {
    background-color: transparent;
    border-color: var(--color-purple-500);
}

/*
    Simple buttons: success and success outline
*/
.btn-success,
.btn-success:visited {
    background-color: var(--app-color-success);
    border-color: var(--app-color-success);
    color: #fff;
}

.btn-success:hover {
    background-color: var(--color-green-800);
    border-color: var(--color-green-800);
    color: #fff;
}

.btn-check:focus+.btn-success,
.btn-success:focus {
    background-color: var(--color-green-800);
    border-color: var(--color-green-800);
    box-shadow: none;
    color: #fff;
}

.btn-check:checked+.btn-success,
.btn-check:active+.btn-success,
.btn-success:active,
.btn-success.active,
.show>.btn-success.dropdown-toggle {
    background-color: var(--color-green-800);
    border-color: var(--color-green-800);
    color: #fff;
}

.btn-check:checked+.btn-success:focus,
.btn-check:active+.btn-success:focus,
.btn-success:active:focus,
.btn-success.active:focus,
.show>.btn-success.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-success:disabled,
.btn-success.disabled {
    background-color: var(--color-green-500);
    border-color: var(--color-green-500);
    color: #fff;
}

.btn-outline-success,
.btn-outline-success:visited {
    border-color: var(--app-color-success);
    color: var(--app-color-success);
}

.btn-outline-success:hover {
    background-color: var(--app-color-success);
    border-color: var(--app-color-success);
    color: #fff;
}

.btn-check:focus+.btn-outline-success,
.btn-outline-success:focus {
    box-shadow: none;
}

.btn-check:checked+.btn-outline-success,
.btn-check:active+.btn-outline-success,
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success.dropdown-toggle.show {
    background-color: var(--app-color-success);
    border-color: var(--app-color-success);
    color: #fff;
}

.btn-check:checked+.btn-outline-success:focus,
.btn-check:active+.btn-outline-success:focus,
.btn-outline-success:active:focus,
.btn-outline-success.active:focus,
.btn-outline-success.dropdown-toggle.show:focus {
    box-shadow: none;
}

.btn-outline-success:disabled,
.btn-outline-success.disabled {
    background-color: transparent;
    color: var(--color-green-500);
}

/*
    Simple buttons: upgrade
*/
.btn.btn-upgrade {
    background-color: var(--color-purple-700);
    border-radius: 0.25rem;
    color: #fff;
    font-weight: var(--font-weight-bold);
}

.btn.btn-upgrade:active,
.btn.btn-upgrade:focus,
.btn.btn-upgrade:hover {
    background-color: var(--color-purple-800);
    color: #fff;
    box-shadow: none;
}

.btn-upgrade img {
    filter: brightness(0) invert(1);
    margin-right: 6px;
}

/*
    Simple buttons: warning and warning outline
*/
.btn-warning,
.btn-warning:visited {
    background-color: var(--app-color-warning);
    border-color: var(--app-color-warning);
    color: #fff;
}

.btn-warning:hover {
    background-color: var(--color-amber-800);
    border-color: var(--color-amber-800);
    color: #fff;
}

.btn-check:focus+.btn-warning,
.btn-warning:focus {
    background-color: var(--color-amber-800);
    border-color: var(--color-amber-800);
    /*    box-shadow: 0 0 0 0.25rem var(--color-amber-300);*/
    color: #fff;
}

.btn-check:checked+.btn-warning,
.btn-check:active+.btn-warning,
.btn-warning:active,
.btn-warning.active,
.show>.btn-warning.dropdown-toggle {
    background-color: var(--color-amber-800);
    border-color: var(--color-amber-800);
    color: #fff;
}

.btn-check:checked+.btn-warning:focus,
.btn-check:active+.btn-warning:focus,
.btn-warning:active:focus,
.btn-warning.active:focus,
.show>.btn-warning.dropdown-toggle:focus {
    /*    box-shadow: 0 0 0 0.25rem var(--color-amber-200);*/
}

.btn-warning:disabled,
.btn-warning.disabled {
    background-color: var(--color-amber-500);
    border-color: var(--color-amber-500);
    color: #fff;
}

.btn-outline-warning,
.btn-outline-warning:visited {
    border-color: var(--app-color-warning);
    color: var(--app-color-warning);
}

.btn-outline-warning:hover {
    background-color: var(--app-color-warning);
    border-color: var(--app-color-warning);
    color: #fff;
}

.btn-check:focus+.btn-outline-warning,
.btn-outline-warning:focus {
    /*    box-shadow: 0 0 0 0.25rem var(--color-amber-300);*/
}

.btn-check:checked+.btn-outline-warning,
.btn-check:active+.btn-outline-warning,
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning.dropdown-toggle.show {
    background-color: var(--app-color-warning);
    border-color: var(--app-color-warning);
    color: #fff;
}

.btn-check:checked+.btn-outline-warning:focus,
.btn-check:active+.btn-outline-warning:focus,
.btn-outline-warning:active:focus,
.btn-outline-warning.active:focus,
.btn-outline-warning.dropdown-toggle.show:focus {
    /*    box-shadow: 0 0 0 0.25rem var(--color-amber-300);*/
}

.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
    background-color: transparent;
    color: var(--color-amber-500);
}

/*
    Dashed buttons
*/
[class^="btn-dashed-"],
[class^="btn-dashed-"]:visited {
    background: var(--color-grey-100) !important;
    border: 1px dashed var(--color-grey-400) !important;
    color: var(--color-grey-700) !important;
}

[class^="btn-dashed-"]:active,
[class^="btn-dashed-"]:focus,
[class^="btn-dashed-"]:hover {
    background: var(--color-grey-200) !important;
    border: 1px dashed var(--color-grey-500) !important;
    color: var(--color-grey-900) !important;
}

/*
    Button groups
*/
.btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.btn-toolbar .input-group {
    width: auto;
}

.btn-group,
.btn-group-vertical {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
    flex: 1 1 auto;
    position: relative;
}

.btn-group>.btn-check:checked+.btn,
.btn-group>.btn-check:focus+.btn,
.btn-group>.btn:hover,
.btn-group>.btn:focus,
.btn-group>.btn:active,
.btn-group>.btn.active,
.btn-group-vertical>.btn-check:checked+.btn,
.btn-group-vertical>.btn-check:focus+.btn,
.btn-group-vertical>.btn:hover,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn.active {
    z-index: 1;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child) {
    margin-left: -1px;
}

.btn-group>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group>.btn-group:not(:last-child)>.btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.btn-group>.btn:nth-child(n + 3),
.btn-group> :not(.btn-check)+.btn,
.btn-group>.btn-group:not(:first-child)>.btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.dropdown-toggle-split {
    padding-left: 0.525rem;
    padding-right: 0.525rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropend .dropdown-toggle-split::after {
    margin-left: 0;
}

.dropstart .dropdown-toggle-split::before {
    margin-right: 0;
}

.btn-sm+.dropdown-toggle-split,
.btn-group-sm>.btn+.dropdown-toggle-split {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.btn-lg+.dropdown-toggle-split,
.btn-group-lg>.btn+.dropdown-toggle-split {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.btn-group-vertical {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
    width: 100%;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child) {
    margin-top: -1px;
}

.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical>.btn-group:not(:last-child)>.btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group-vertical>.btn~.btn,
.btn-group-vertical>.btn-group:not(:first-child)>.btn {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

/*
    Icon buttons
*/
.btn-icon,
.btn-icon:visited {
    border-color: transparent;
    height: 2.625rem;
    max-height: 2.625rem;
    max-width: 2.625rem;
    padding: 0.5rem;
    width: 2.625rem;
}

.btn-icon svg {
    stroke: var(--app-color);
}

.btn-icon.active,
.btn-icon:focus,
.btn-icon:hover {
    background: var(--app-background-color);
    border-color: var(--app-border-color);
}

.btn-icon.active svg,
.btn-icon:focus svg,
.btn-icon:hover svg {
    stroke: var(--app-color-highlight);
}

.btn-icon[disabled]:hover {
    background: transparent;
    cursor: not-allowed;
}

.btn-icon[disabled] svg {
    stroke: var(--color-grey-500);
}

/*
    Close buttons
*/
.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    box-sizing: content-box;
    color: var(--app-color);
    height: 1em;
    opacity: 0.5;
    padding: 0.25em 0.25em;
    width: 1em;
}

.btn-close:hover {
    color: var(--app-color-highlight);
    opacity: 0.75;
    text-decoration: none;
}

.btn-close:focus {
    /*    box-shadow: 0 0 0 0.25rem rgba(63, 128, 234, 0.25);*/
    opacity: 1;
    outline: 0;
}

.btn-close:disabled,
.btn-close.disabled {
    opacity: 0.25;
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/*
    Placeholder buttons
*/
.btn-card-placeholder {
    align-items: center;
    background: transparent;
    border: 1px dashed var(--color-grey-400);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    font-weight: var(--font-weight-bold);
    height: 100%;
    justify-content: center;
    transition: all 0.1s ease-in;
    width: 100%;
}

.btn-card-placeholder figure {
    border: 2px solid var(--color-grey-300);
    border-radius: var(--border-radius-xl);
    height: 5rem;
    padding: 1.5rem;
    transition: all 0.1s ease-in;
    width: 5rem;
}

.btn-card-placeholder figure svg {
    stroke: var(--color-grey-400);
    transition: all 0.1s ease-in;
}

.btn-card-placeholder span {
    color: var(--color-grey-700);
    line-height: 1.375rem;
    transition: all 0.1s ease-in;
}

.btn-card-placeholder:hover {
    background: var(--color-grey-100);
    border: 1px dashed var(--color-grey-500);
    transition: all 0.1s ease-in;
}

.btn-card-placeholder:hover figure {
    border: 2px solid var(--color-grey-400);
    height: 5rem;
    padding: 1.5rem;
    transition: all 0.1s ease-in;
    width: 5rem;
}

.btn-card-placeholder:hover figure svg {
    stroke: var(--color-grey-500);
    transition: all 0.1s ease-in;
}

.btn-card-placeholder:hover span {
    color: var(--color-grey-900);
    transition: all 0.1s ease-in;
}

/*
    ========================================
    Menus:
        – Breadcrumbs
        – Progress
        – Side menus:
            – Icons
        – Top menus:
            – Pills
                – Icons
                – Badges
            – Tabs
                – Icons
                – Badges
            – Toggles
                – Icons
                – Steps
        – Pagination
    ========================================
*/
/* =====
    Breadcrumbs
===== */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 1rem;
    padding: 0 0;
}

.breadcrumb .breadcrumb-item.active {
    color: var(--color-grey-700);
}

.breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: 0.5rem;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--color-grey-600);
    content: "/";
    float: left;
    padding-right: 0.5rem;
}

.breadcrumb .breadcrumb-item a {
    color: var(--color-grey-900);
    font-weight: var(--font-weight-bold);
}

.breadcrumb .breadcrumb-item a:hover {
    color: var(--color-grey-900);
    text-decoration: none;
}

/* =====
    Progress menu
===== */
.progress-menu {
    align-self: center;
    display: inline-flex;
    flex-grow: 1;
    justify-content: center;
    list-style-type: none;
    margin: 0 auto;
    width: auto;
}

.progress-menu .progress-menu-item {
    align-items: center;
    display: flex;
}

.progress-menu .progress-menu-item:not(:last-child):after {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 6.4 10.8' style='enable-background:new 0 0 6.4 10.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23A7ADB3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg transform='translate(1.414 9.414) rotate(-90)'%3E%3Cpath id='chevron-down-2' class='st0' d='M0,0l4,4l4-4'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 0.625rem;
    margin: 0 1.5rem;
    width: 0.3125rem;
}

.progress-menu .progress-menu-item figure {
    border: 1.5px solid var(--color-grey-500);
    border-radius: 50%;
    font-weight: bold;
    height: 1.5rem;
    margin: 0 0.5rem 0 0;
    text-align: center;
    width: 1.5rem;
}

.progress-menu .progress-menu-item.selected figure {
    background: var(--color-grey-500);
    color: #fff;
}

.progress-menu .progress-menu-item.completed figure {
    border: 1.5px solid var(--color-grey-900);
    background: var(--color-grey-900);
    stroke: #fff;
}

.progress-menu .progress-menu-item h6 {
    margin-bottom: 0;
}

.progress-menu .progress-menu-item:not(.selected) h6 {
    color: var(--color-grey-500);
}

/* =====
    Pills
===== */
.pills .nav-item {
    margin-right: 0.5rem;
}

.pills .nav-item:last-child {
    margin-right: 0;
}

.pills .nav-item .nav-link {
    background-color: none;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    color: var(--app-color);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.125rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

.pills .nav-item .nav-link:active,
.pills .nav-item .nav-link:focus,
.pills .nav-item .nav-link:hover {
    background-color: var(--color-grey-100);
    border-color: var(--color-grey-400);
    color: var(--color-grey-900);
}

.pills .nav-item .nav-link.active {
    background-color: var(--color-grey-900);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 0 0.125rem var(--color-grey-900);
}

/* =====
    Tabs
===== */
.tabs .nav-item .nav-link {
    border-bottom: 3px solid transparent;
    color: var(--color-grey-600);
    font-weight: bold;
}

.tabs .nav-item .nav-link.active {
    border-bottom: 3px solid var(--color-purple-700);
    color: var(--color-grey-900);
}

/*
    ========================================
    Static containers:
        – Cards
            – Feature cards
            – Toggleable cards
    ========================================
*/
/* =====
    Cards
===== */
.card {
    background-clip: border-box;
    background-color: #fff;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 0 0.875rem 0 rgba(var(--color-grey-rgb), 0.05);
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    min-width: 0;
    position: relative;
    word-wrap: break-word;
}

.card .card-header {
    background-color: #fff;
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
    padding: 1.25rem 1.5rem 1rem;
}

.card .card-header:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.card .card-body {
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem;
}

.card .card-header .card-title,
.card .card-body .card-title {
    color: var(--app-color-highlight);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.card .card-subtitle {
    font-weight: 600;
    margin: 1.5rem -1.5rem 1rem -1.5rem;
    position: relative;
}

.card .card-subtitle:before {
    background: var(--app-border-color);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 9px;
    width: 100%;
}

.card .card-subtitle span {
    background: #fff;
    color: var(--color-grey-900);
    margin: 0 1rem;
    padding: 2px 0.5rem;
    position: relative;
    z-index: 1;
}

.card .card-img,
.card .card-img-top,
.card .card-img-bottom {
    height: auto;
    max-width: 100%;
}

.card .card-img-top {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.card .card-img-bottom {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.card .card-img-top+.card-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    margin-top: -1rem;
    padding-bottom: 0;
    padding-top: 0;
}

.card .card-img-top+.card-header .icon {
    background-color: inherit;
    margin-top: -1.5rem;
}

.card .card-table {
    margin-bottom: 0;
}

.card .card-table tr td:first-child,
.card .card-table tr th:first-child {
    padding-left: 1.25rem;
}

.card .card-table tr td:last-child,
.card .card-table tr th:last-child {
    padding-right: 1.25rem;
}

.card .card-footer {
    background-color: #fff;
    border-top: 0 solid transparent;
    padding: 0.75rem 1.5rem;
}

.card .card-footer:last-child {
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

@media all and (-ms-high-contrast: none) {

    .card .card-img,
    .card .card-img-top,
    .card .card-img-bottom {
        height: 100%;
    }
}

/*
.card.rounded-xl .card-footer:last-child {
    border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
}
.card.rounded-xxl .card-footer:last-child {
    border-radius: 0 0 var(--border-radius-xxl) var(--border-radius-xxl);
}
.card .card.rounded-xl .card-header:first-child {
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}
.card .card.rounded-xxl .card-header:first-child {
    border-radius: var(--border-radius-xxl) var(--border-radius-xxl) 0 0;
}
.card-header {
    border-bottom-width: 1px;
}
.card-actions a {
    color: var(--app-color);
    text-decoration: none;
}
.card-actions svg {
    width: 16px;
    height: 16px;
}
.card-actions .dropdown {
    line-height: 1.4;
}*/

/* =====
    Feature cards
===== */
.card.card-feature {
    /* TODO: Update HTML */
    align-content: center;
    margin-bottom: 0;
    padding: 1rem 0;
}

.card.card-feature .card-body {
    padding: 0.5rem 1.5rem;
    position: relative;
}

.card.card-feature .card-body::before {
    background-color: var(--color-grey-900);
    border-radius: 0 6px 6px 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 6px;
}

@media only screen and (min-width: 768px) {
    .card.card-feature {
        height: 100%;
    }
}

/* =====
    Toggleable cards
===== */
.card.card-togglable {
    /* TODO: Update HTML */
}

.card.card-togglable .icon-square {}

.card.card-togglable .icon-square svg {
    fill: transparent;
    stroke: var(--app-border-color);
    stroke-width: 2px;
}

.card.card-togglable.active .icon-square svg {
    stroke: var(--color-grey-800);
}

.card-togglable.active .icon-square-fill svg {
    fill: var(--color-grey-100);
    stroke: var(--color-grey-800);
}

.card.card-togglable :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    color: var(--color-grey-700);
}

.card-togglable.card-togglable-enabled :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6),
.card.card-togglable.active :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    color: var(--app-color-highlight);
}

.card.card-togglable p {
    color: var(--color-grey-600);
}

.card-togglable.card-togglable-enabled p,
.card.card-togglable.active p {
    color: var(--app-color);
}

.card.card-togglable .card-footer {
    align-items: center;
}

/*
    ========================================
    Messaging:
        – Substitute messages
        – Alert banners
        – Notifications
    ========================================
*/
/* =====
    Empty state
===== */
.empty-state {
    margin: 3rem auto;
    max-width: 20rem;
    text-align: center;
    width: 100%;
}

/* =====
    Alert banners
===== */
.alert {
    background-color: var(--color-grey-200);
    border-color: var(--app-border-color);
    border-radius: var(--border-radius-md);
    border-width: 1px;
    padding-left: 0rem;
    padding-right: 0.25rem;
}

.alert-flush {
    border-left-width: 0;
    border-radius: 0;
    border-right-width: 0;
}

.alert::before {
    background: var(--color-grey-500);
    border-radius: 0 0.25rem 0.25rem 0;
    bottom: 0.5rem;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0.5rem;
    width: 0.25rem;
}

.alert .alert-icon {
    background: none;
    padding: 0.75rem 0 0.75rem 1rem;
}

.alert .alert-icon svg {
    fill: transparent;
    height: 1.5rem;
    stroke: var(--app-color-highlight);
    stroke-width: 1.75px;
    width: 1.5rem;
}

.alert .alert-message {
    line-height: 1.125rem;
    padding: 1rem;
}

.alert.alert-danger {
    background: var(--color-red-200);
    border-color: var(--color-red-400);
}

.alert.alert-danger::before {
    background-color: var(--color-red-700);
}

.alert.alert-info {
    background: var(--color-purple-200);
    border-color: var(--color-purple-400);
}

.alert.alert-info::before {
    background-color: var(--color-purple-700);
}

.alert.alert-success {
    background: var(--color-green-200);
    border-color: var(--color-green-400);
}

.alert.alert-success::before {
    background-color: var(--color-green-700);
}

.alert.alert-warning {
    background: var(--color-amber-200);
    border-color: var(--color-amber-400);
}

.alert.alert-warning::before {
    background-color: var(--color-amber-700);
}

/* Page alert */
.alert-container {
    margin: -2rem -2rem 1.25rem -2rem;
}

.alert-container .alert {
    border-left-width: 0;
    border-radius: 0;
    border-right-width: 0;
    border-top-width: 0;
    margin-bottom: 0 !important;
}

.alert-container .alert .alert-message {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

/* =====
    Notifications
===== */
.tip {
    background-color: var(--color-purple-100);
    border: 1px solid var(--color-purple-500);
    border-radius: var(--border-radius-md);
    color: var(--app-color) !important;
    padding: 1.25rem;
}

.tip .tip-heading {
    align-items: center;
    display: flex;
}

.tip .tip-heading:is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0.25rem;
}

.tip .tip-heading .tip-icon {
    fill: none;
    min-width: 18px;
    stroke: var(--app-color);
    stroke-width: 1.75px;
    width: 18px;
}

@media only screen and (min-width: 768px) {
    .tip {
        padding: 1.25rem 1.5rem;
    }
}

/* =====
    Message
===== */
.message-container {
    background: linear-gradient(90deg, #d26788, #7b97ff);
    border-radius: 6px;
    padding: 0.25rem;
    position: relative;
}

.message-container::before {
    border-radius: 5px;
    border: 1px solid #fff;
    content: "";
    display: block;
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    z-index: 1;
}

.message-container .message {
    background: #fff;
    border-radius: 4px;
    padding: 1rem;
    position: relative;
    z-index: 5;
}

.message-container .message img {
    height: 2rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

/*
    ========================================
    Data presentation:
        – Charts
        – Lists
            – Data list
        – Tables
    ========================================
*/
/* =====
    Charts
===== */
.chart {
    margin: auto;
    position: relative;
    width: 100%;
    /*    min-height: 300px;*/
}

/*.chart-xs {
    min-height: 150px;
}
.chart-sm {
    min-height: 200px;
}
.chart-lg {
    min-height: 350px;
}
.chart-xl {
    min-height: 500px;
}
.chart canvas {
    max-width: 100%;
}*/
.chart .chart-content {
    position: relative;
}

.chart .chart-content .chart-heading {
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

.chart-legend .bullet {
    display: block;
    font-size: 2rem;
    height: 0.75rem;
    line-height: 1.125rem;
    margin-right: 0.25rem;
}

.chart-bar .bar-container {
    border-radius: 0.25rem;
}

.chart-bar .bar-container:hover {
    background-color: var(--app-background-color);
    transition: all 0.2s ease-in;
}

/* =====
    Data list
===== */
.data-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.data-list .data-item {
    border-bottom: 1px solid var(--app-border-color);
    padding: 1rem 1.25rem;
}

.data-list .data-item:last-child {
    border-bottom: none;
}

.data-list .data-item.disabled :is(a, h1, h2, h3, h4, h5, h6, p, span) {
    color: var(--color-grey-600);
}

.data-list .data-item.disabled .icon-square svg {
    stroke: var(--color-grey-400);
}

/* =====
    Table
===== */
.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--app-color);
    --bs-table-striped-bg: #fbfbfc;
    --bs-table-active-color: var(--app-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--app-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    border-color: var(--app-border-color);
    color: var(--app-color);
    margin-bottom: 1rem;
    vertical-align: top;
    width: 100%;
}

.table> :not(caption)>*>* {
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    padding: 0.75rem 0.75rem;
}

.table>thead {
    vertical-align: bottom;
}

.table>thead>tr>th:first-child {
    padding-left: 1.5rem;
}

.table>thead>tr>th:last-child {
    padding-right: 1.5rem;
}

.table>tbody {
    vertical-align: inherit;
}

.table>tbody>tr>td:first-child {
    padding-left: 1.5rem;
}

.table>tbody>tr>td:last-child {
    padding-right: 1.5rem;
}

.table> :not(:first-child) {
    border-top: 2px solid currentColor;
}

.caption-top {
    caption-side: top;
}

.table-sm> :not(caption)>*>* {
    padding: 0.3rem 0.3rem;
}

.table-bordered> :not(caption)>* {
    border-width: 1px 0;
}

.table-bordered> :not(caption)>*>* {
    border-width: 0 1px;
}

.table-borderless> :not(caption)>*>* {
    border-bottom-width: 0;
}

.table-borderless> :not(:first-child) {
    border-top-width: 0;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

.table-active {
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

.table-primary {
    --bs-table-bg: #d9e6fb;
    --bs-table-striped-bg: #cedbee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #c3cfe2;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c9d5e8;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #c3cfe2;
}

.table-secondary {
    --bs-table-bg: #dbdcdd;
    --bs-table-striped-bg: #d0d1d2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #c5c6c7;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #cbcccc;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #c5c6c7;
}

.table-success {
    --bs-table-bg: #dbf2e3;
    --bs-table-striped-bg: #d0e6d8;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #c5dacc;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #cbe0d2;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #c5dacc;
}

.table-info {
    --bs-table-bg: #d2ebf5;
    --bs-table-striped-bg: #c8dfe9;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bdd4dd;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c2d9e3;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bdd4dd;
}

.table-warning {
    --bs-table-bg: #faeddb;
    --bs-table-striped-bg: #eee1d0;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #e1d5c5;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e7dbcb;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #e1d5c5;
}

.table-danger {
    --bs-table-bg: #f7dddc;
    --bs-table-striped-bg: #ebd2d1;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dec7c6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e4cccc;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dec7c6;
}

.table-light {
    --bs-table-bg: var(--app-border-color);
    --bs-table-striped-bg: #e3e6ea;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #d7dadd;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #dde0e4;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #d7dadd;
}

.table-dark {
    --bs-table-bg: var(--app-color-highlight);
    --bs-table-striped-bg: var(--app-color);
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: var(--app-color);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: var(--app-color);
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: var(--color-grey-700);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1439.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====
    Timeline
===== */
.timeline {
    position: relative;
}

.timeline .timeline-item {
    display: flex;
    padding-bottom: 1.25rem;
    position: relative;
}

.timeline .timeline-item:not(:last-child):before {
    content: " ";
    background: var(--app-border-color);
    display: block;
    height: 100%;
    left: 1.25rem;
    position: absolute;
    width: 1px;
    z-index: 0;
}

/*
    ========================================
    Expandable containers:
        – Accordions
            – Feature cards
            – Toggleable cards
    ========================================
*/
/* =====
    Accordions
===== */
.accordion .accordion-button::after {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"><style type="text/css">.st0{fill:none;stroke:%23041527;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}</style><line class="st0" x1="12" y1="5" x2="12" y2="19"/><line class="st0" x1="5" y1="12" x2="19" y2="12"/></svg>') !important;
    transform: rotate(0deg) !important;
}

.accordion .accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"><style type="text/css">.st0{fill:none;stroke:%23041527;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}</style><line class="st0" x1="5" y1="12" x2="19" y2="12"/></svg>') !important;
    transform: rotate(180deg) !important;
}


/*
    Detached accordions
*/
.accordion.accordion-detached {
    border: none;
}

.accordion.accordion-detached>.accordion-item {
    background: transparent;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    margin-bottom: 0.375rem;
}

.accordion.accordion-detached>.accordion-item.selected {
    border: 1px solid var(--app-border-color);
    box-shadow: 0 0 0 0.125rem var(--app-color-highlight), var(--app-color-highlight) 0 0 1px inset;
}

.accordion.accordion-detached>.accordion-item>.accordion-header>.accordion-button {
    background: transparent;
    box-shadow: none;
    color: var(--color-grey-900);
    padding: 1rem;
}

.accordion.accordion-detached>.accordion-item>.accordion-header>.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.828' height='8.414' viewBox='0 0 14.828 8.414'%3E%3Cg id='chevron-down' transform='translate(1.414 1.414)'%3E%3Cpath id='chevron-down-2' data-name='chevron-down' d='M6,9l6,6,6-6' transform='translate(-6 -9)' fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: center;
    background-size: 1rem;
    content: "";
    display: inline-block;
}

.accordion.accordion-detached>.accordion-item>.accordion-collapse.collapsing,
.accordion.accordion-detached>.accordion-item>.accordion-collapse.show {
    background: transparent;
    border-top: 1px solid var(--app-border-color);
}

.accordion.accordion-detached>.accordion-item>.accordion-collapse>.accordion-body {
    padding: 0;
}

.accordion.accordion-detached>.accordion-item>.accordion-collapse>.accordion-body>.accordion-content {
    padding: 1.25rem 1rem;
}

/*
    Additional settings
*/
.accordion.accordion-additional-options {
    background-color: var(--app-background-color);
    /*    border-top: 1px solid var(--app-border-color) !important;*/
    border-radius: var(--border-radius-md);
    display: block;
}

.accordion.accordion-additional-options>.accordion-item {
    background: var(--color--grey-100);
}

.accordion.accordion-additional-options>.accordion-item.selected {
    background: var(--color--grey-200);
    border: 2px solid var(--app-color-highlight);
}

.accordion.accordion-additional-options>.accordion-item>.accordion-header {
    position: relative;
}

.accordion.accordion-additional-options>.accordion-item>.accordion-header>.accordion-button {
    /*                background-color: var(--app-background-color);*/
    box-shadow: none;
    padding: 1rem;
}

.accordion.accordion-additional-options>.accordion-item>.accordion-header>.accordion-button::after {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"><style type="text/css">.st0{fill:none;stroke:%23041527;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}</style><line class="st0" x1="12" y1="5" x2="12" y2="19"/><line class="st0" x1="5" y1="12" x2="19" y2="12"/></svg>');
    transform: rotate(0deg);
}

.accordion.accordion-additional-options>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"><style type="text/css">.st0{fill:none;stroke:%23041527;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}</style><line class="st0" x1="5" y1="12" x2="19" y2="12"/></svg>');
    transform: rotate(180deg);
}

.accordion.accordion-additional-options>.accordion-item>.accordion-collapse {
    padding: 0 0.25rem 0.25rem;
}

.accordion.accordion-additional-options>.accordion-item>.accordion-collapse>.accordion-body {
    background: #fff;
    border: 1px solid var(--color-grey-300);
    border-radius: var(--border-radius-md);
    padding: 1rem 0.75rem;
}

/*
    Additional settings: Checkboxes
*/
.accordion.accordion-additional-options-selectable>.accordion-item>.accordion-header>.accordion-button {
    padding: 0;
}

.accordion.accordion-additional-options-selectable>.accordion-item>.accordion-header>.accordion-button::after {
    display: none;
}

.accordion.accordion-additional-options-selectable>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)::after {
    display: none;
}

.accordion.accordion-additional-options-selectable>.accordion-item>.accordion-header>.accordion-button .form-check-label {
    cursor: pointer;
    padding: 1rem;
}

.accordion.accordion-additional-options-selectable>.accordion-item>.accordion-header>.accordion-button .form-check-input {
    margin: 1px 0.5rem 0 0;
}

/*
    ========================================
    Openable containers:
        – Modals [Bootstrap component]
    ========================================
*/
/* =====
    Popups
===== */
.sweet-alert {
    z-index: 90050 !important;
}

/* =====
    Modals
===== */
.modal-backdrop {
    background-color: #000;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 90020;
}

.modal-backdrop~.modal-backdrop {
    z-index: 90031;
}

.modal {
    display: none;
    height: 100%;
    left: 0;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 90030;
}

.modal~.modal {
    z-index: 90032;
}

.modal .modal-dialog {
    margin: 0.5rem;
    pointer-events: none;
    position: relative;
    width: auto;
}

.modal .modal-dialog .modal-content {
    background-clip: padding-box;
    background-color: #fff;
    border: 0 solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    display: flex;
    flex-direction: column;
    outline: 0;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

.modal .modal-dialog .modal-content .modal-header {
    align-items: center;
    border-bottom: 1px solid var(--app-border-color);
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    padding: 1rem 1rem;
}

.modal .modal-dialog .modal-content .modal-header .btn-close {
    margin: -0.5rem -0.5rem -0.5rem auto;
    padding: 0.5rem 0.5rem;
}

.modal .modal-dialog .modal-content .modal-header .modal-title {
    line-height: 1.625;
    margin-bottom: 0;
}

.modal .modal-dialog .modal-content .modal-body {
    flex: 1 1 auto;
    padding: 1rem;
    position: relative;
}

.modal .modal-dialog .modal-content .modal-footer {
    align-items: center;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    border-top: 1px solid var(--app-border-color);
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0.75rem;
}

.modal .modal-dialog .modal-content .modal-footer>* {
    margin: 0.25rem;
}

/*
    Fade modal
*/
.modal-backdrop.fade {
    opacity: 0;
}

.modal.fade .modal-dialog {
    transform: translate(0, -50px);
    transition: transform 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

/*
    Open modal
*/
.modal-backdrop.show {
    opacity: 0.5;
}

.modal.show .modal-dialog {
    transform: none;
}

/*
    Static modal
*/
.modal.modal-static .modal-dialog {
    transform: scale(1.02);
}

/*
    Scrollable modal dialog
*/
.modal .modal-dialog.modal-dialog-scrollable {
    height: calc(100% - 1rem);
}

.modal .modal-dialog.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}

.modal .modal-dialog.modal-dialog-scrollable .modal-content .modal-body {
    overflow-y: auto;
}

/*
    Centered modal dialog
*/
.modal .modal-dialog-centered {
    align-items: center;
    display: flex;
    min-height: calc(100% - 1rem);
}

/*
    Full screen modal dialog
*/
.modal .modal-dialog.modal-fullscreen {
    height: 100%;
    margin: 0;
    max-width: none;
    width: 100vw;
}

.modal .modal-dialog.modal-fullscreen .modal-content {
    border: 0;
    border-radius: 0;
    height: 100%;
}

.modal .modal-dialog.modal-fullscreen .modal-header {
    border-radius: 0;
    padding: 1rem 2.5rem 1rem 2rem;
}

/* TODO: use custom class */
.modal .modal-dialog.modal-fullscreen .modal-header .form-control {
    font-size: 1.5rem;
    font-weight: 600;
    border: none !important;
    height: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

.modal .modal-dialog.modal-fullscreen .modal-header .form-control:active,
.modal .modal-dialog.modal-fullscreen .modal-header .form-control:focus {
    border: none;
    box-shadow: none;
}

.modal .modal-dialog.modal-fullscreen .modal-header .form-control::placeholder {
    color: var(--color-grey-600);
}

.modal .modal-dialog.modal-fullscreen .modal-body {
    overflow-y: auto;
    padding: 2rem;
}

.modal .modal-dialog.modal-fullscreen .modal-footer {
    border-radius: 0;
    padding: 1.25rem 5rem;
}

@media (min-width: 576px) {
    .modal .modal-dialog {
        margin: 1.75rem auto;
        max-width: 600px;
    }

    .modal .modal-dialog.modal-dialog-scrollable {
        height: calc(100% - 3.5rem);
    }

    .modal .modal-dialog.modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

    .modal .modal-dialog.modal-sm {
        max-width: 400px;
    }
}

@media (min-width: 992px) {

    .modal .modal-dialog.modal-lg,
    .modal .modal-dialog.modal-xl {
        max-width: 900px;
    }
}

@media (min-width: 1200px) {
    .modal .modal-dialog.modal-xl {
        max-width: 1140px;
    }
}

@media (max-width: 575.98px) {
    .modal .modal-dialog.modal-fullscreen-sm-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw;
    }

    .modal .modal-dialog.modal-fullscreen-sm-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%;
    }

    .modal .modal-dialog.modal-fullscreen-sm-down .modal-content .modal-header {
        border-radius: 0;
    }

    .modal .modal-dialog.modal-fullscreen-sm-down .modal-content .modal-body {
        overflow-y: auto;
    }

    .modal .modal-dialog.modal-fullscreen-sm-down .modal-content .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 767.98px) {
    .modal .modal-dialog.modal-fullscreen-md-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw;
    }

    .modal .modal-dialog.modal-fullscreen-md-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%;
    }

    .modal .modal-dialog.modal-fullscreen-md-down .modal-content .modal-header {
        border-radius: 0;
    }

    .modal .modal-dialog.modal-fullscreen-md-down .modal-content .modal-body {
        overflow-y: auto;
    }

    .modal .modal-dialog.modal-fullscreen-md-down .modal-content .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 991.98px) {
    .modal .modal-dialog.modal-fullscreen-lg-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw;
    }

    .modal .modal-dialog.modal-fullscreen-lg-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%;
    }

    .modal .modal-dialog.modal-fullscreen-lg-down .modal-content .modal-header {
        border-radius: 0;
    }

    .modal .modal-dialog.modal-fullscreen-lg-down .modal-content .modal-body {
        overflow-y: auto;
    }

    .modal .modal-dialog.modal-fullscreen-lg-down .modal-content .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 1199.98px) {
    .modal .modal-dialog.modal-fullscreen-xl-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw;
    }

    .modal .modal-dialog.modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal .modal-dialog.modal-fullscreen-xl-down .modal-content .modal-header {
        border-radius: 0;
    }

    .modal .modal-dialog.modal-fullscreen-xl-down .modal-content .modal-body {
        overflow-y: auto;
    }

    .modal .modal-dialog.modal-fullscreen-xl-down .modal-content .modal-footer {
        border-radius: 0;
    }
}

@media (max-width: 1439.98px) {
    .modal .modal-dialog.modal-fullscreen-xxl-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw;
    }

    .modal .modal-dialog.modal-fullscreen-xxl-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%;
    }

    .modal .modal-dialog.modal-fullscreen-xxl-down .modal-content .modal-header {
        border-radius: 0;
    }

    .modal .modal-dialog.modal-fullscreen-xxl-down .modal-content .modal-body {
        overflow-y: auto;
    }

    .modal .modal-dialog.modal-fullscreen-xxl-down .modal-content .modal-footer {
        border-radius: 0;
    }
}

.modal-portal .modal-dialog {
    height: calc(100% - 56px);
    max-height: 700px !important;
}

.modal-portal .modal-dialog .modal-content {
    height: 100%;
}

/* =====
    Popover
===== */
.popover {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid var(--app-border-color);
    border-radius: 0.3rem;
    display: block;
    font-family: var(--app-font-sans-serif);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    left: 0
        /* rtl:ignore */
    ;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.625;
    max-width: 276px;
    position: absolute;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    top: 0;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    word-wrap: break-word;
    z-index: 90035;
}

.popover .popover-arrow {
    display: block;
    height: 0.5rem;
    position: absolute;
    width: 1rem;
}

.popover .popover-arrow::before,
.popover .popover-arrow::after {
    border-color: transparent;
    border-style: solid;
    content: "";
    display: block;
    position: absolute;
}

.popover .popover-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    font-size: 0.825rem;
    color: var(--app-color-highlight);
    background-color: #fff;
    border-bottom: 1px solid var(--app-border-color);
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.popover .popover-header:empty {
    display: none;
}

.popover .popover-body {
    color: var(--app-color);
    padding: 1rem 1rem;
}

.popover-trigger {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.25rem;
}

.popover-trigger:active,
.popover-trigger:hover {
    background: var(--app-background-color);
    border-color: var(--app-border-color);
    transition: all 0.1s ease-in;
}

/*
    BS
*/
.bs-popover-top>.popover-arrow,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow {
    bottom: calc(-0.5rem - 1px);
}

.bs-popover-top>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before {
    bottom: 0;
    border-width: 0.5rem 0.5rem 0;
    border-top-color: var(--app-border-color);
}

.bs-popover-top>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
    bottom: 1px;
    border-width: 0.5rem 0.5rem 0;
    border-top-color: #fff;
}

.bs-popover-end>.popover-arrow,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow {
    left: calc(-0.5rem - 1px);
    width: 0.5rem;
    height: 1rem;
}

.bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before {
    left: 0;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-right-color: var(--app-border-color);
}

.bs-popover-end>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after {
    left: 1px;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-right-color: #fff;
}

.bs-popover-bottom>.popover-arrow,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow {
    top: calc(-0.5rem - 1px);
}

.bs-popover-bottom>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before {
    top: 0;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    border-bottom-color: var(--app-border-color);
}

.bs-popover-bottom>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
    top: 1px;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 1rem;
    margin-left: -0.5rem;
    content: "";
    border-bottom: 1px solid #fff;
}

.bs-popover-start>.popover-arrow,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow {
    right: calc(-0.5rem - 1px);
    width: 0.5rem;
    height: 1rem;
}

.bs-popover-start>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before {
    right: 0;
    border-width: 0.5rem 0 0.5rem 0.5rem;
    border-left-color: var(--app-border-color);
}

.bs-popover-start>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after {
    right: 1px;
    border-width: 0.5rem 0 0.5rem 0.5rem;
    border-left-color: #fff;
}

/* =====
    Slideout
===== */
.offcanvas-backdrop {
    background-color: #000;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 90020;
}

.offcanvas-backdrop.fade {
    opacity: 0;
}

.offcanvas-backdrop.show {
    opacity: 0.5;
}

.offcanvas {
    background-color: #fff;
    background-clip: padding-box;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    outline: 0;
    position: fixed;
    transition: transform 0.3s ease-in-out;
    visibility: hidden;
    z-index: 90025;
}

.offcanvas-start {
    border-right: 0 solid rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    transform: translateX(-100%);
    width: 400px;
}

.offcanvas-end {
    border-left: 1px solid var(--app-border-color);
    border-top-left-radius: 0.5rem;
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%) !important;
    right: 0;
    top: 0;
    transform: translateX(100%);
    width: 400px;
}

.offcanvas-top {
    border-bottom: 0 solid rgba(0, 0, 0, 0.2);
    height: 30vh;
    left: 0;
    max-height: 100%;
    right: 0;
    top: 0;
    transform: translateY(-100%);
}

.offcanvas-bottom {
    border-top: 0 solid rgba(0, 0, 0, 0.2);
    height: 30vh;
    left: 0;
    max-height: 100%;
    right: 0;
    transform: translateY(100%);
}

.offcanvas.show {
    transform: none;
}

.offcanvas .offcanvas-header {
    align-items: center;
    border-bottom: 1px solid var(--app-border-color);
    display: flex;
    justify-content: space-between;
    min-height: 4rem;
    padding: 1rem 1rem;
}

.offcanvas .offcanvas-header .btn-close {
    margin-bottom: -0.5rem;
    margin-right: -0.5rem;
    margin-top: -0.5rem;
    padding: 0.5rem 0.5rem;
}

.offcanvas .offcanvas-header .offcanvas-title {
    line-height: 1.625;
    margin-bottom: 0;
}

.offcanvas .offcanvas-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas {
        transition: none;
    }
}

/*
    ========================================
    Data input:
        – Inputs
            – Choices
        – Input groups
    ========================================
*/
.fieldset {
    border: 1px solid var(--app-border-color);
    border-radius: 0.375rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    padding: 1.25rem 1rem;
    position: relative;
}

.fieldset-label {
    background: #fff;
    color: var(--app-color-highlight);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    padding: 0.25rem;
    position: absolute;
    top: 0;
    transform: translate(-0.25rem, -50%);
}

.form-label {
    color: var(--color-grey-700);
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
}

.form-error {
    color: var(--app-color-danger);
    display: block;
    font-size: 0.75rem;
    margin: 0.325rem 0;
}

.form-hint {
    align-items: start;
    color: var(--color-grey-700);
    display: flex;
    font-size: 0.75rem;
    margin-top: 0.75rem;
    stroke: var(--color-grey-700);
}

.form-hint svg {
    margin-right: 0.25rem;
    margin-top: 0.21875rem;
    min-height: 0.75rem;
    min-width: 0.75rem;
}

/* =====
    Basic inputs
===== */
/*
    Input fields
*/
input.form-control {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    min-height: 2.5rem;
}

input.form-control:active:hover {
    border: 1px solid var(--color-grey-400) !important;
}

input.form-control:active,
input.form-control:focus,
input.form-control:-internal-autofill-selected,
.form-search:active,
.form-search:focus,
.form-search:-internal-autofill-selected,
select.form-select:active,
select.form-select:focus,
select.form-select:-internal-autofill-selected {
    border: 1px solid var(--app-border-color);
    box-shadow: 0 0 0 0.125rem var(--app-color-highlight),
        var(--app-color-highlight) 0 0 1px inset;
}

input.form-control.form-control-uneditable,
input.form-control.form-control-uneditable:active,
input.form-control.form-control-uneditable:focus {
    background-color: #fff;
    box-shadow: none;
    cursor: text;
}

input.form-control.form-control-xl {
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    padding: 1rem;
}

/*
    Search fields
*/
.input-group.input-group-search {
    position: relative;
}

.form-search {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    min-height: 2.5rem;
}

.form-search:hover {
    border: 1px solid var(--color-grey-400) !important;
}

.input-group.input-group-search .form-search {
    border-radius: var(--border-radius-sm) !important;
    padding-right: 2.5rem;
}

.input-group.input-group-search .form-control.form-search::placeholder {
    color: var(--color-grey-600);
}

.input-group.input-group-search .btn.btn-search {
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm) !important;
    height: 2rem;
    margin: 0 !important;
    padding: 0.375rem;
    position: absolute;
    right: 0.25rem;
    width: 2rem;
    z-index: 5;
}

.input-group.input-group-search .btn.btn-search:hover {
    background: var(--color-grey-100);
    border-color: var(--app-border-color);
}

.input-group.input-group-search .btn.btn-search svg {
    display: block;
}

/*
    Selects
*/
select.form-select {
    background-color: #fff;
    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='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 0.75rem;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    line-height: 38px;
    min-height: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

select.form-select:hover {
    border: 1px solid var(--color-grey-400) !important;
    cursor: pointer;
}

/*
    Multiselects
*/
.basic-multi-select .select__control {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    min-height: 2.5rem;
}

.basic-multi-select .select__control:hover {
    border: 1px solid var(--color-grey-400);
    cursor: pointer;
}

.basic-multi-select .select__control:active,
.basic-multi-select .select__control:focus,
.basic-multi-select .select__control--is-focused,
.basic-multi-select .select__control--menu-is-open {
    border: 1px solid var(--app-border-color);
    box-shadow: 0 0 0 0.125rem var(--app-color-highlight),
        var(--app-color-highlight) 0 0 1px inset;
}

.basic-multi-select .select__placeholder {
    color: var(--color-grey-600);
}

.basic-multi-select .select__indicators {
    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='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1rem 0.75rem;
    padding: 0;
    min-width: 2rem;
}

.basic-multi-select .select__indicator-separator,
.basic-multi-select .select__indicator,
.basic-multi-select .select__indicator svg {
    display: none;
    padding: 0;
}

/*
    Checkboxes and radio buttons
*/
.form-check-input {
    margin-top: 0.25rem;
}

.form-check-input:focus {
    border-color: var(--color-grey-400);
    box-shadow: 0 0 0 0.25rem var(--app-background-color);
}

.checkbox-button,
.radio-button {
    display: block;
    height: 100%;
    position: relative;
}

.checkbox-button input[type="checkbox"],
.radio-button input[type="radio"] {
    position: absolute;
    right: 0.75rem;
    top: 0.9rem;
}

.checkbox-button .checkbox-button-container,
.radio-button .radio-button-container {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    display: block;
    height: 100%;
    padding: 0.75rem;
}

.checkbox-button input[type="checkbox"]:checked+.checkbox-button-container,
.radio-button input[type="radio"]:checked+.radio-button-container {
    border: 1px solid var(--app-border-color);
    box-shadow: 0 0 0 0.125rem var(--app-color-highlight),
        var(--app-color-highlight) 0 0 1px inset;
}

.checkbox-button .checkbox-button-container .icon,
.radio-button .radio-button-container .icon {
    margin-bottom: 0.75rem;
    margin-left: 0;
}

.checkbox-button .checkbox-button-banner,
.radio-button .radio-button-banner {
    margin: 0 -0.375rem 0.5rem;
}

.checkbox-button .checkbox-button-banner svg,
.radio-button .radio-button-banner svg {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    width: 100%;
}

.checkbox-button input[type="radio"]:checked+.checkbox-button-container .checkbox-button-banner svg,
.radio-button input[type="radio"]:checked+.radio-button-container .radio-button-banner svg {
    background: var(--app-background-color);
    border: 1px solid var(--app-border-color);
}

.checkbox-button .checkbox-button-banner svg .image-stroke,
.radio-button .radio-button-banner svg .image-stroke {
    fill: transparent;
    stroke: var(--color-grey-300);
    stroke-width: 6;
}

.checkbox-button .checkbox-button-banner svg .image-fill,
.radio-button .radio-button-banner svg .image-fill {
    fill: var(--color-grey-300);
    stroke: none;
}

.checkbox-button input[type="radio"]:checked+.checkbox-button-container .checkbox-button-banner svg .image-stroke,
.radio-button input[type="radio"]:checked+.radio-button-container .radio-button-banner svg .image-stroke {
    stroke: var(--color-grey-400);
}

.checkbox-button input[type="radio"]:checked+.checkbox-button-container .checkbox-button-banner svg .image-fill,
.radio-button input[type="radio"]:checked+.radio-button-container .radio-button-banner svg .image-fill {
    fill: var(--color-grey-400);
}

.checkbox-button .checkbox-button-container .hidden-unselected,
.radio-button .radio-button-container .hidden-unselected {
    display: none;
}

.checkbox-button input[type="radio"]:checked+.checkbox-button-container .hidden-selected,
.radio-button input[type="radio"]:checked+.radio-button-container .hidden-selected {
    display: none;
}

.checkbox-button input[type="radio"]:checked+.checkbox-button-container .hidden-unselected,
.radio-button input[type="radio"]:checked+.radio-button-container .hidden-unselected {
    display: block;
}

.radio-button {
    display: block;
    height: 100%;
    position: relative;
}

.radio-button input[type="radio"] {
    position: absolute;
    right: 0.75rem;
    top: 0.9rem;
}

.radio-button .radio-button-container {
    border: 1px solid var(--color-grey-300);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    display: block;
    height: 100%;
    padding: 0.75rem;
}

.radio-button input[type="radio"]:checked+.radio-button-container {
    border: 1px solid var(--app-border-color);
    box-shadow: 0 0 0 0.125rem var(--app-color-highlight),
        var(--app-color-highlight) 0 0 1px inset;
}

.radio-button .radio-button-container .icon {
    margin-bottom: 0.75rem;
    margin-left: 0;
}

.radio-button .radio-button-banner {
    margin: 0 -0.375rem 0.5rem;
}

.radio-button .radio-button-banner svg {
    border: 1px solid var(--color-grey-300);
    border-radius: var(--border-radius-md);
    width: 100%;
}

.radio-button input[type="radio"]:checked+.radio-button-container .radio-button-banner svg {
    background: var(--color-grey-100);
    border: 1px solid var(--color-grey-300);
}

.radio-button .radio-button-banner svg .image-stroke {
    fill: transparent;
    stroke: var(--color-grey-300);
    stroke-width: 6;
}

.radio-button .radio-button-banner svg .image-fill {
    fill: var(--color-grey-300);
    stroke: none;
}

.radio-button input[type="radio"]:checked+.radio-button-container .radio-button-banner svg .image-stroke {
    stroke: var(--color-grey-400);
}

.radio-button input[type="radio"]:checked+.radio-button-container .radio-button-banner svg .image-fill {
    fill: var(--color-grey-400);
}

.radio-button .radio-button-container .hidden-unselected {
    display: none;
}

.radio-button input[type="radio"]:checked+.radio-button-container .hidden-selected {
    display: none;
}

.radio-button input[type="radio"]:checked+.radio-button-container .hidden-unselected {
    display: block;
}

/*
    Toggles
*/
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgb(206, 212, 218)'/%3E%3C/svg%3E") !important;
    border: 1px solid var(--app-border-color);
}

.form-switch .form-check-input:active,
.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem var(--color-grey-200);
}

.form-switch .form-check-input:checked {
    background-color: var(--app-color-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgb(255, 255, 255)'/%3E%3C/svg%3E") !important;
    border: 1px solid var(--app-color-success);
}

.form-switch .form-check-input:checked:active,
.form-switch .form-check-input:checked:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgb(255, 255, 255)'/%3E%3C/svg%3E") !important;
    box-shadow: 0 0 0 0.25rem var(--color-green-300);
}

/*
    Range selector
*/
.opacity-selector {
    display: flex;
}

.opacity-selector .opacity-selector-preview-container {
    background-image: linear-gradient(45deg,
            var(--color-grey-bg-1) 25%,
            transparent 25%),
        linear-gradient(-45deg, var(--color-grey-bg-1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--color-grey-bg-1) 75%),
        linear-gradient(-45deg, transparent 75%, var(--color-grey-bg-1) 75%);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-size: 1.25rem 1.25rem;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    height: 3.625rem;
    margin: 0 0.5rem 0 0;
    overflow: hidden;
    position: relative;
    width: 3.625rem;
}

.opacity-selector .opacity-selector-preview-container .opacity-selector-preview {
    bottom: 0;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.opacity-selector .opacity-selector-input {
    flex-grow: 1;
}

/*
    Colour selector
*/
.color-selector {
    align-items: center;
    background-color: var(--app-background-color);
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    color: var(--app-color-highlight);
    cursor: pointer;
    display: flex;
    padding: 0.5rem;
}

.color-selector::after {
    border-bottom: 1.5px solid var(--color-grey-600);
    border-left: 1.5px solid var(--color-grey-600);
    content: "";
    display: inline-block;
    height: 0.4rem;
    margin: 0.5rem;
    transform: rotate(-45deg);
    width: 0.4rem;
}

.color-selector .color-selector-input {
    background: transparent;
    border: none;
    display: inline;
    height: 1.25rem;
    margin-right: 0.5rem;
    min-height: 1.25rem;
    min-width: 1.25rem;
    padding: 0;
    width: 1.25rem;
}

.color-selector .color-selector-label {
    flex-grow: 1;
    font-size: var(--font-size-sm);
}

/*
    Image upload
*/
.img-upload,
.image-upload {
    align-items: center;
    background-image: linear-gradient(45deg, var(--color-grey-bg-1) 25%, transparent 25%), linear-gradient(-45deg, var(--color-grey-bg-1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-grey-bg-1) 75%), linear-gradient(-45deg, transparent 75%, var(--color-grey-bg-1) 75%);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-size: 20px 20px;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    justify-content: start;
    margin-bottom: 0.25rem;
    overflow: hidden;
    padding: 0.5rem;
}

input[type="file"].form-control {
    line-height: 30px;
}

/* =====
    Floating label inputs
===== */
/*
    Floating label inputs
*/
.form-group-floating .form-control {
    padding-right: 58px !important;
}

.form-floating .form-control,
.form-floating .form-select,
.form-floating .custom-dropdown button {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
}

.form-floating .form-control:hover,
.form-floating .form-select:hover,
.form-floating .custom-dropdown button:hover {
    border: 1px solid var(--color-grey-400) !important;
    cursor: pointer;
}

.form-floating .form-control:active,
.form-floating .form-control:focus,
.form-floating .form-select:active,
.form-floating .form-select:focus,
.form-floating .custom-dropdown button:active,
.form-floating .custom-dropdown button:focus {
    border: 1px solid var(--app-border-color);
    box-shadow: 0 0 0 0.125rem var(--app-color-highlight),
        var(--app-color-highlight) 0 0 1px inset;
}

.form-floating .custom-dropdown {
    padding: 0;
}

.form-floating .custom-dropdown button {
    font-weight: 400;
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem 0.7rem;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating .custom-dropdown button+.dropdown-menu {
    width: 100%;
}

.form-floating .custom-dropdown button::after {
    display: none;
}

.form-floating .custom-dropdown::after {
    display: block;
    content: "";
    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='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding: 0;
    min-width: 2rem;
    height: 2rem;
    position: absolute;
    right: 0.25rem;
    top: 0.8125rem;
}

.form-floating .custom-dropdown+label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.7rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating.input-group .input-group-text {
    border-bottom-right-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    line-height: 1.25;
    padding-bottom: 0.625rem;
    padding-top: 1.625rem;
    position: relative;
}

.form-floating.input-group .input-group-text.input-group-text-copyable {
    padding-right: 3.875rem;
}

.form-floating.input-group .input-group-text .input-text-group-btn {
    background: var(--color-grey-300);
    border-radius: var(--border-radius-sm);
    height: 2.625rem;
    padding: 0.5rem;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    width: 2.625rem;
}

.form-floating.input-group .input-group-text .input-text-group-btn svg {
    stroke: var(--color-grey-700);
}

.tip .form-floating.input-group .input-group-text {
    background: var(--color-purple-300);
    border-color: var(--color-purple-500);
}

.tip .form-floating.input-group .input-group-text .input-text-group-btn {
    background: var(--color-purple-300);
}

.tip .form-floating.input-group .input-group-text .input-text-group-btn svg {
    stroke: var(--color-grey-900);
}

.form-floating.input-group label {
    z-index: 5;
}

/*
    Floating label multiselects
*/
.form-floating-multiselect {
    position: relative;
}

.form-floating-multiselect label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.7rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating-multiselect .select__control {
    border: 1px solid var(--app-border-color);
    padding-left: 0.7rem;
    padding-right: 2.1rem;
    padding-top: 1.625rem;
    padding-bottom: 0.375rem;
}

.form-floating-multiselect .select__value-container {
    margin: -0.125rem -0.125rem 0;
    min-height: 1.625rem;
    padding: 0;
}

.form-floating-multiselect .select__indicator-separator {
    display: none;
}

.form-floating-multiselect .select__indicator {
    padding: 0;
}

.form-floating-multiselect .select__menu {
    z-index: 2;
}

.form-floating-multiselect .select__multi-value {
    background-color: var(--color-grey-100);
    border: 1px solid var(--color-grey-300);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
}

.form-floating-multiselect .select__menu svg,
.form-floating-multiselect .select__multi-value svg {
    border-radius: 3px !important;
}

.form-floating-multiselect .select__multi-value__label {
    border-right: 1px solid var(--color-grey-300);
    color: var(--app-color);
    font-size: 0.65625rem;
    line-height: 18px;
    padding: 0 0.5rem;
}

.form-floating-multiselect .basic-multi-select .select__indicators {
    height: 2rem;
    position: absolute;
    right: 0.25rem;
    top: 0.8125rem;
}

.form-floating-multiselect .basic-multi-select .select__placeholder {
    margin: 0.125rem;
    min-height: 1.375rem;
}

.form-floating-multiselect .basic-multi-select .select__input-container {
    margin: 0;
    min-height: 1.625rem;
    padding: 0;
}

.form-floating-multiselect .basic-multi-select .select__input {
    line-height: 1.25rem;
}

/*
    ========================================
    App structure:
    ========================================
    The reusable components that form the app's shell
        – Sidebar
        – Main
            – Topbar
            – Page
            – Footer
    ========================================
*/
/* =====
    Sidebar
===== */
.sidebar {
    background: var(--sidebar-background-color);
    border-right: 1px solid var(--sidebar-border-color);
    position: relative;
    border-top-right-radius: var(--border-radius-lg);
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%) !important;
    direction: ltr;
    max-width: 17.5rem;
    min-width: 17.5rem;
    transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
        margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
    z-index: 1;
}

.sidebar .sidebar-content {
    background: transparent;
    transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
        margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
}

body[data-sidebar-behavior="sticky"] .sidebar .sidebar-content {
    height: 100vh;
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

body[data-sidebar-behavior="sticky"] .sidebar .ps {
    overflow-y: hidden;
}

body[data-sidebar-position="right"] .simplebar-track.simplebar-vertical {
    left: 0;
    right: auto;
}

.sidebar .sidebar-brand-container {
    display: block;
    position: relative;
}

.sidebar .sidebar-brand-container_marsello {
    height: 4rem;
    padding: 1.625rem 1.5rem 1.375rem 1.5rem;
}

.sidebar .sidebar-brand-container_lightspeed {
    height: 4rem;
    padding: 1rem 1.375rem 1.125rem 1.375rem;
}

.sidebar .sidebar-brand {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0;
    text-align: center;
}

.sidebar .sidebar-brand:focus {
    outline: 0;
}

.sidebar .sidebar-brand-container_lightspeed .sidebar-brand {
    height: 1.875rem;
}

.sidebar .sidebar-brand-container_marsello .sidebar-brand {
    height: 1rem;
}

.sidebar .sidebar-brand-container_lightspeed .sidebar-icon {
    fill: #e81c1c;
}

.sidebar .sidebar-brand-container_lightspeed .sidebar-icon+g {
    fill: #fff;
}

.sidebar .sidebar-section {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar .sidebar-item {
    display: block;
    position: relative;
    width: 100%;
}

.sidebar .sidebar-heading {
    color: var(--sidebar-color-highlight);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.125rem;
    padding: 0.75rem 1.375rem 0.125rem 1.375rem;
}

.sidebar .sidebar-link {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    color: var(--sidebar-color);
    cursor: pointer;
    display: flex;
    font-weight: 500;
    line-height: 1.25rem;
    margin: 0 0.75rem 0.125rem 0.75rem;
    outline: 0;
    padding: 0.375rem 0.5625rem;
    position: relative;
    text-decoration: none;
    transition: color 75ms ease-in-out;
}

.sidebar .sidebar-link:hover,
.sidebar .sidebar-link.active,
.sidebar .sidebar-link[aria-expanded="true"],
.sidebar .sidebar-section_selected .sidebar-toggle-link {
    color: var(--sidebar-color-highlight);
}

.sidebar .sidebar-link.active,
.sidebar .sidebar-section_selected .sidebar-toggle-link {
    background: var(--sidebar-background-color-highlight);
    border: 1px solid var(--sidebar-border-color);
}

.sidebar .sidebar-link:focus {
    outline: 0;
}

.sidebar .sidebar-link>* {
    color: var(--sidebar-color);
}

.sidebar .sidebar-link:hover>*,
.sidebar .sidebar-link.active>*,
.sidebar .sidebar-link[aria-expanded="true"]>*,
.sidebar .sidebar-section_selected .sidebar-toggle-link>* {
    color: var(--sidebar-color-highlight);
    font-weight: var(--font-weight-bold);
}

.sidebar .sidebar-icon {
    height: 1.25rem;
    margin-right: 0.75rem;
    max-width: 1.25rem;
    min-width: 1.25rem;
    width: 1.25rem;
}

.sidebar .sidebar-icon .icon-path,
.sidebar .sidebar-icon .icon-path_has-fill {
    fill: none;
    stroke: var(--sidebar-icon-stroke);
    stroke-width: 1.75px;
}

.sidebar .sidebar-link:hover .sidebar-icon .icon-path,
.sidebar .sidebar-link.active .sidebar-icon .icon-path,
.sidebar .sidebar-section_selected .sidebar-toggle-link .sidebar-icon .icon-path,
.sidebar:not(.sidebar_compressed) .sidebar-link[aria-expanded="true"] .sidebar-icon .icon-path,
.sidebar.sidebar_compressed:hover .sidebar-link[aria-expanded="true"] .sidebar-icon .icon-path {
    stroke: var(--sidebar-icon-stroke-highlight);
}

.sidebar .sidebar-link:hover .sidebar-icon .icon-path_has-fill,
.sidebar .sidebar-link.active .sidebar-icon .icon-path_has-fill,
.sidebar .sidebar-section_selected .sidebar-toggle-link .sidebar-icon .icon-path_has-fill,
.sidebar:not(.sidebar_compressed) .sidebar-link[aria-expanded="true"] .sidebar-icon .icon-path_has-fill,
.sidebar.sidebar_compressed:hover .sidebar-link[aria-expanded="true"] .sidebar-icon .icon-path_has-fill {
    fill: var(--sidebar-icon-fill);
}

.sidebar .sidebar-toggle-link:before {
    color: var(--sidebar-color);
    content: " ";
    border: solid;
    border-width: 0 0.1rem 0.1rem 0;
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 0.75rem;
    top: 0.675rem;
    transform: rotate(45deg);
    transition: all 0.2s ease-out;
}

.sidebar .sidebar-toggle-link:hover:before,
.sidebar .sidebar-link[aria-expanded="true"]:before {
    color: var(--sidebar-color-highlight);
}

.sidebar .sidebar-link[aria-expanded="true"]:before {
    top: 0.875rem;
    transform: rotate(-135deg);
}

.sidebar .sidebar-badge {
    background: var(--sidebar-background-color-highlight) !important;
    border: 1px solid var(--sidebar-border-color) !important;
    color: var(--sidebar-color) !important;
    margin-right: 0;
}

.sidebar .sidebar-subheading {
    color: var(--sidebar-color-highlight);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.125rem;
    padding: 0.75rem 1.25rem 0.25rem 1.25rem;
}

.sidebar .sidebar-list {
    border-left: 1px solid var(--sidebar-border-color);
    margin-bottom: 0;
    margin-left: 2rem;
    padding: 0;
}

.sidebar .sidebar-list .sidebar-link {
    justify-content: space-between;
    margin-left: 0.5rem;
    padding: 0.375rem 0.6875rem;
}

@media (max-width: 992px) {
    body:not([data-sidebar-position="right"]) .sidebar_compressed {
        margin-left: -17.5rem;
    }

    body[data-sidebar-position="right"] .sidebar_compressed {
        margin-right: -17.5rem;
    }
}

@media (min-width: 992px) {
    .sidebar_compressed:hover {
        position: fixed;
        max-width: 17.5rem;
        min-width: 17.5rem;
        z-index: 999;
    }

    .sidebar_compressed:not(:hover) {
        max-width: 4rem;
        min-width: 4rem;
    }

    .sidebar_compressed:not(:hover) .sidebar-brand-container_marsello::before {
        border: 2px solid var(--color-grey-900);
        border-radius: 50%;
        content: "";
        display: block;
        height: 2rem;
        left: 1rem;
        position: absolute;
        top: 1.15rem;
        width: 2rem;
    }

    .sidebar_compressed:not(:hover) .sidebar-icon+g,
    .sidebar_compressed:not(:hover) .sidebar-heading,
    .sidebar_compressed:not(:hover) .sidebar-icon+.sidebar-label,
    .sidebar_compressed:not(:hover) .sidebar-toggle-link:before,
    .sidebar_compressed:not(:hover) .sidebar-list {
        display: none;
    }

    .sidebar_compressed:not(:hover) .sidebar-icon {
        margin-right: 0;
    }
}

/* =====
    Main
===== */
.main {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
        margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
    width: 100%;
}

@media (max-width: 767.98px) {
    .main {
        overflow-y: hidden;
    }
}

.main .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
        margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
    width: 100%;
}

@media (min-width: 992px) {
    .sidebar_compressed:hover+.main::before {
        content: "";
        display: block;
        height: 1px;
        max-width: 4rem;
        min-width: 4rem;
    }
}

/*
    Topbar
*/
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--app-border-color);
    box-shadow: none;
    max-height: 64px;
    padding: 0.75rem 2rem 0.75rem 0.75rem;
}

.topbar .sidebar-toggle {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    color: var(--app-color);
    cursor: pointer;
    display: block;
    fill: none;
    height: 2.5rem;
    margin: 0;
    padding: 0.625rem;
    stroke: var(--app-color);
    stroke-width: 1.75px;
    width: 2.5rem;
}

.topbar .sidebar-toggle:hover {
    background: var(--app-background-color);
    border-color: var(--app-border-color);
    fill: none;
    stroke: var(--app-color-highlight);
}

.topbar .dropdown-toggle {
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-regular);
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.topbar .dropdown-toggle:hover {
    border: 1px solid var(--color-grey-400);
}

.topbar .user-menu {
    z-index: 90010;
}

/*
    Page content
*/
.content {
    padding: 2rem 1.5rem;
}

@media only screen and (min-width: 768px) {
    .content {
        padding: 2rem;
    }
}

/*
    Page footer
*/
.page-footer {
    border-top: 1px solid var(--app-border-color);
    color: var(--color-grey-600);
    display: flex;
    line-height: 1.125rem;
    padding: 1.9375rem 2rem;
    /*    width: calc(100vw - 64px);*/
}

@media only screen and (min-width: 769px) {
    /*    .page-content {
        width: auto;
    }*/

    /*    .page-footer {
        width: auto;
    }*/
}

/*
    ========================================
    Page structure:
    ========================================
    The reusable components that form the page's shell
        –
    ========================================
*/
.header {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.header .header-heading {
    font-weight: var(--font-weight-bold);
    margin: 0.75rem 0.5rem 0.75rem 0;
}

.header .header-description {
    margin-bottom: 1rem;
    order: 2;
    width: 100%;
}

.header .header-buttons {
    align-items: center;
    display: flex;
    flex-grow: 1 !important;
    order: 3;
    width: 100%;
}

.header .header-buttons>.btn,
.header .header-buttons>.link {
    margin: 0 0.375rem;
    white-space: nowrap;
}

.header .header-buttons>.btn:first-child {
    margin-left: 0;
}

.header .header-buttons>.btn:last-child {
    margin-right: 0;
}

@media only screen and (min-width: 769px) {
    .header {}

    .header .header-heading {
        min-height: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header .header-description {
        margin-bottom: 0;
        order: 3;
    }

    .header .header-buttons {
        justify-content: flex-end;
        order: 2;
        width: auto;
    }
}

/* =====
    Default page
===== */
.page-header {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header .page-heading {
    font-weight: var(--font-weight-bold);
    margin: 0.75rem 0.5rem 0.75rem 0;
}

.page-header .page-description {
    margin-bottom: 1rem;
    order: 2;
    width: 100%;
}

.page-header .page-buttons {
    align-items: center;
    display: flex;
    flex-grow: 1 !important;
    order: 3;
    width: 100%;
}

.page-header .page-buttons>.btn,
.page-header .page-buttons>.link {
    margin: 0 0.5rem;
    white-space: nowrap;
}

.page-header .page-buttons>.btn:first-child,
.page-header .page-buttons>.link:first-child {
    margin-left: 0;
}

.page-header .page-buttons>.btn:last-child,
.page-header .page-buttons>.link:last-child {
    margin-right: 0;
}

@media only screen and (min-width: 769px) {
    .page-header .page-heading {
        min-height: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-header .page-description {
        margin-bottom: 0;
        order: 3;
    }

    .page-header .page-buttons {
        justify-content: end;
        order: 2;
        width: auto;
    }
}

/* =====
    Home page
===== */
.home-page {
    display: flex;
    flex-wrap: wrap;
}

.home-page-aside {
    width: 100%;
}

@media (min-width: 992px) {
    .home-page {
        flex-wrap: nowrap;
    }

    .home-page-aside {
        max-width: 20.375rem;
        min-width: 20.375rem;
        width: 20.375rem;
    }
}

/* =====
    Design page
===== */
.design-page {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 9.5625rem);
    margin: -2rem;
    padding: 0;
    position: relative;
}

.design-page .alert-container {
    margin: 0;
}

.design-page .alert-container .alert {
    margin-bottom: 0;
}

.design-page .alert-container .alert .alert-icon {
    padding-left: 1.875rem;
}

.design-page .alert-container .alert .alert-message {
    padding-right: 1.75rem;
}

.design-page .design-page-main {
    flex: 1 1 0;
    min-height: 0;
}

.design-page .design-page-main .design-page-subheader {
    align-items: center;
    border-bottom: 1px solid var(--app-border-color);
    display: flex;
    height: 4.5rem;
    justify-content: space-between;
    padding: 1.25rem 1rem;
}

.design-page-header h1 {
    text-overflow: ellipsis;
}

.design-page .design-page-main .design-page-content {
    height: 100%;
    overflow-y: scroll;
    padding: 1rem;
}

.design-page .design-page-main .design-page-subheader+.design-page-content {
    height: calc(100% - 4.5rem);
}

.design-page .design-page-main .design-page-content .page-header {
    padding: 0.5rem 1rem 0 1rem;
}

.design-page .design-page-footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid var(--color-grey-border-1);
    bottom: -5.5625rem;
    display: flex;
    height: 5.5625rem;
    justify-content: end;
    -webkit-justify-content: flex-end;
    padding: 1rem 4.75rem 1rem 1.5rem;
    position: absolute;
    width: 100%;
}

.design-page .design-page-footer>* {
    margin: 0 0.25rem;
}

.design-page .design-page-footer>*:last-child {
    margin-right: 0;
}

/*
    Design page frame
*/
.frame {
    background-color: var(--app-background-color);
    border: 1px solid var(--app-border-color);
    border-radius: 1rem;
    box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.02);
    height: 100%;
    overflow: hidden;
    position: relative;
    background-image: radial-gradient(circle at 1px 1px, var(--color-grey-500) 1px, transparent 0);
    background-size: 2rem 2rem;
    background-position-x: center;
    background-position-y: center;
}

.frame .frame-toolbar-container {
    padding: 0;
    position: sticky;
    width: 100%;
    z-index: 10;
}

.frame .frame-toolbar-container .frame-toolbar {
    align-items: center;
    background: var(--color-grey-bg-2);
    box-shadow: 0 0 0 1px var(--color-grey-border-1);
    display: flex;
    height: 3.875rem;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    z-index: 10;
}

.frame .frame-toolbar-container .frame-toolbar .frame-toolbar-controls {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: start;
}

.frame .frame-portal {
    height: calc(100% - 62px);
    position: relative;
}

.frame .frame-portal .portal-iframe-container {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.frame .frame-portal .portal-iframe-container .portal-iframe {
    background: none;
    border: none;
    display: block;
    height: 700px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    z-index: 90000;
}

.frame .frame-portal .portal-iframe-container.online-portal-iframe-container .portal-iframe {
    height: 100%;
    left: 0;
    top: 0;
    transform: translate(0, 0);
    width: 100%;
}

@media (max-height: 1100px) {
    .frame .frame-portal .portal-iframe-container .portal-iframe {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: scale(0.8) translate(-250px, -437.5px);
        transform-origin: center center;
    }

    .frame .frame-portal .portal-iframe-container.online-portal-iframe-container .portal-iframe {
        height: 135%;
        left: -17.5%;
        position: absolute;
        top: -17.5%;
        transform: scale(0.74) translate(0, 0);
        width: 135%;
    }
}

@media (max-height: 900px) {
    .frame .frame-portal .portal-iframe-container .portal-iframe {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: scale(0.8) translate(-250px, -437.5px);
        transform-origin: center center;
    }

    .frame .frame-portal .portal-iframe-container.online-portal-iframe-container .portal-iframe {
        height: 156.25%;
        left: -28.125%;
        position: absolute;
        top: -28.125%;
        transform: scale(0.64) translate(0, 0);
        width: 156.25%;
    }
}

/*
    Mobile container
*/
.mobile-container {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.mobile-container .mobile {
    aspect-ratio: 9 / 18;
    height: 700px;
    overflow: hidden;
    position: relative;
}

.mobile-container .mobile .mobile-image {
    background-color: var(--app-background-color);
    background-image: url("../../../..//src/assets/img/iphone-frame.svg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    position: absolute;
    width: 100%;
}

.mobile-container .mobile .mobile-screen {
    font-family: Helvetica, sans-serif;
    position: absolute;
    width: 100%;
    padding: 76px 35px 0px;
}

.mobile-container .mobile .mobile-screen .mobile-topbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    width: 100%;
}

.mobile-container .mobile .mobile-screen .mobile-topbar>* {
    color: rgb(29, 29, 31);
    fill: rgb(29, 29, 31);
    font-weight: bold;
}

@media (max-height: 892px) {
    .mobile-container {
        transform: scale(0.8);
    }
}

/*
    Tablet container
*/
.tablet-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    transform-origin: center center;
    width: 100%;
}

.tablet {
    background: var(--color-grey-100);
    border: 4px solid var(--color-grey-200);
    border-radius: 60px;
    box-shadow: 0 0 0 0.125rem var(--color-grey-400), #fff 0 0 1px inset;
    height: 932px;
    padding: 52px;
    position: relative;
    transform-origin: center center;
    width: 1292px;
    max-height: 932px;
    max-width: 1292px;
    min-height: 932px;
    min-width: 1292px;
}

.tablet::after {
    background: #000;
    border-radius: 0.375rem;
    bottom: 4rem;
    content: "";
    height: 0.375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 20rem;
    position: absolute;
}

.tablet-screen {
    border-radius: 24px;
    height: 820px;
    position: absolute;
    width: 1180px;
}

/* =====
    Edit page
===== */
.edit-page-header {
    background: #fff;
    border-bottom: 1px solid var(--app-border-color);
    box-shadow: 0 0 2rem 0 rgb(41 48 66 / 10%);
    height: 8.75rem;
}

.edit-page-header .edit-page-navbar {
    align-items: center;
    border-bottom: 1px solid var(--app-border-color);
    display: flex;
    height: 4rem;
    justify-content: space-between;
    padding: 0.75rem 2rem;
}

.edit-page-header .edit-page-heading {
    align-items: center;
    display: flex;
    height: 4.5rem;
    line-height: 2rem;
    padding: 1.25rem 2rem;
}

.edit-page-brand {
    height: 2.5rem;
    margin-right: 1rem;
    width: 2.5rem;
}

.edit-page-header .edit-page-heading h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-page-footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid var(--app-border-color);
    bottom: 0;
    display: flex;
    height: 4rem;
    justify-content: end;
    padding: 0.75rem 2rem;
    position: fixed;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .edit-page-header .edit-page-heading {
        /*        height: 4.625rem;*/
        /*padding: 1.5rem 2rem;*/
    }

    .edit-page-header .edit-page-heading h1 {
        /*            font-size: 1.65rem !important;*/
    }
}

/* =====
    Editor page – Deprecated
===== */
.editor-navbar {
    background: #fff;
    border-bottom: 1px solid var(--app-border-color);
    box-shadow: none;
}

.navbar-brand {
    padding-bottom: 0;
    padding-top: 0;
}

/*
    ========================================
    Page specific components:
    ========================================
    The components that are used on a specific page
        –
    ========================================
*/

/* =====
    Apple pass
===== */
.apple-pass {
    border-radius: 0.75rem;
    padding: 0;
}

.apple-pass-placeholder {
    align-items: center;
    background: #f2f2f2;
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    padding: 8rem 0rem;
    width: 100%;
}

.apple-pass span {
    display: block;
    font-size: 1rem !important;
    font-weight: bold;
    line-height: 1.125rem;
}

.apple-pass label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    line-height: 0.75rem;
    text-transform: uppercase;
}

.apple-pass .apple-pass-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    width: 100%;
}

.apple-pass .apple-pass-header .apple-pass-heading {
    display: block;
    font-size: 1rem !important;
    font-weight: bold;
    margin: 0 0.5rem;
    word-break: break-all;
}

.apple-pass .apple-pass-banner {
    aspect-ratio: 4/1;
}

.apple-pass .apple-pass-banner img {
    height: 100%;
    width: 100%;
}

.apple-pass .apple-pass-customer-details {
    display: flex;
    padding: 1rem 0.75rem 2rem;
}

.apple-pass .apple-pass-barcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    width: 100%;
}

.apple-pass .apple-pass-barcode img {
    background: #fff;
    margin: auto;
    max-width: 90%;
    padding: 0.625rem;
}

/*
    Editable content
*/
.editable {
    font-size: inherit !important;
}

.editable-container {
    display: inline-block;
    position: relative;
    text-decoration: inherit;
}

.editable-container .editable-actions {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8ee;
    border-radius: 4px;
    box-shadow: 0 0 0.875rem 0 #000 !important;
    color: var(--app-color);
    display: flex;
    font-family: "Poppins", sans-serif;
    font-size: var(--app-font-size);
    justify-content: space-between;
    padding: 4px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(-100%);
    z-index: 10;
}

.editable-container .editable-actions .editable-limit {
    background: var(--app-background-color);
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-xs);
    color: var(--app-color);
    font-size: 0.75rem;
    line-height: 1.25rem;
    padding: 0.25rem;
}

.editable-container .editable-actions .editable-limit.editable-limit-exceeded {
    background: var(--color-red-200);
    border-color: var(--color-red-600);
    color: var(--color-red-800);
}

.editable-container .editable-actions .btn {
    border: 1px solid var(--app-border-color) !important;
    border-radius: 0.25rem !important;
    min-height: 26px !important;
    min-width: 26px !important;
    padding: 5px;
}

.editable-container .editable-actions .btn:active,
.editable-container .editable-actions .btn:focus,
.editable-container .editable-actions .btn:hover {
    background: var(--app-background-color);
}

.editable-container .editable-actions .btn svg {
    margin: auto;
}

.editable-container .editable-actions select {
    background: #fff;
    border: 1px solid #e2e8ee;
    border-radius: 4px;
    color: #041527;
    font-size: 12px;
    height: 28px;
    line-height: 20px;
    padding: 0px 16px 0 6px;
    text-align: start;
}

.editable-container .editable-actions select:hover {
    border-color: #d9dcde;
    border-radius: 4px;
}

.editable-container .editable-actions select:active,
.editable-container .editable-actions select:focus {
    background: #fff;
    border: 1px solid #e2e8ee;
    box-shadow: 0 0 0 0.125rem #041527, #041527 0 0 1px inset;
    color: #041527;
    outline: none;
}

.editable-container .editable-actions .dropdown-item {
    line-height: 16px;
}

.editable-container .editable {
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: block;
    text-decoration: inherit;
}

.editable-container .editable.editing {
    border: 1px dashed var(--app-border-color);
    color: var(--app-color) !important;
    opacity: 100% !important;
    resize: none;
    text-decoration: none;
    text-align: inherit;
    width: 100%;
}

/* =====
    Signup page
===== */
.signup-page {
    background: #fff;
    color: var(--app-color);
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.signup-page.lightspeed {
    color: #000;
}

.signup-page.lightspeed * {
    font-family: Helvetica, sans-serif;
}

.signup-page h1,
.signup-page .h1 {
    color: var(--app-color-highlight);
    font-size: 38px;
    letter-spacing: -0.5px;
}

.signup-page .btn-primary {
    background-color: var(--app-color-highlight);
    border-color: var(--app-color-highlight);
}

.signup-page .btn-primary:hover {
    background-color: var(--color-grey-800);
}

.signup-page .btn-primary:focus {
    outline: none;
}

.signup-page-form {
    flex-grow: 1;
    position: relative;
}

.signup-page-main {
    max-height: 100vh;
    padding-bottom: 109px;
    overflow-y: scroll;
}

.signup-page-container {
    margin: auto;
    max-width: 34rem;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
}

.signup-page-logo {
    display: block;
    margin-bottom: 3rem;
    margin-top: 4.5rem;
}

.signup-page form footer {
    background: #fff;
    border-top: 1px solid var(--app-border-color);
    bottom: 0;
    padding: 1.25rem 0 2rem;
    position: absolute;
    width: 100%;
}

.signup-page-image-container {
    padding: 1.25rem 1.25rem 1.25rem 0;
    position: relative;
    width: calc((100vh - 40px) / 1.25 + 20px);
}

.signup-page-image-shape {
    filter: url("#filter");
    height: 100%;
    width: 100%;
}

.signup-page-image {
    background: var(--app-color-highlight);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}

.signup-page-image-1 {
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 30% 100%, 30% 78%, 0 78%, 0 42%, 30% 42%, 30% 0%);
}

.signup-page-image-2 {
    clip-path: polygon(0% 0%, 70% 0%, 70% 22%, 100% 22%, 100% 65%, 40% 65%, 40% 100%, 0 100%, 0% 0%);
}

.signup-page-image-3 {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 75% 75%, 0 75%);
}

.signup-page-image * {
    color: #fff;
}

.signup-page-image-filter {
    height: 0px;
    position: absolute;
    visibility: hidden;
    width: 0px;
}

.signup-page-subscription {
    border-color: var(--app-color) !important;
    bottom: 30%;
    left: 50%;
    margin: auto;
    max-width: 34rem;
    padding: 0 2rem;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
}

.signup-page-subscription .signup-page-check {
    background: var(--app-color-highlight);
    border-radius: 50%;
    height: 16px;
    margin-right: 4px;
    padding: 2px;
    stroke: #fff;
    stroke-width: 2px;
    width: 16px;
}

.signup-page-subscription .signup-billing-details {
    background-color: var(--app-color);
    border: 1px solid var(--app-color);
    border-radius: 8px;
    margin-top: 1rem;
}

.signup-page-subscription .signup-billing-details-header {
    border-bottom: 1px solid var(--app-color);
    padding: 1.25rem 1rem 0.5rem;
}

.signup-page-subscription .signup-billing-details-content {
    font-size: 0.75rem;
    padding: 0 0.5rem;
}

.signup-page-subscription .signup-billing-details-subtotal {
    background-color: #343c63;
    border: 1px solid var(--app-color);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.signup-page-subscription .signup-billing-details-total {
    background-color: #404870;
    border: 1px solid var(--app-color);
    border-radius: 6px;
}

div[class^="signup-page-component"] {
    position: absolute;
}

.signup-page-component-insight-1 {
    bottom: 1.25rem;
    height: calc(((100% - 40px) / 100 * 22) - 12px);
    left: 0;
    width: calc(((100% - 20px) / 100 * 30) - 12px);
}

.signup-page-component-setting-1 {
    left: 0;
    height: calc(((100% - 40px) / 100 * 42) - 12px);
    top: 1.25rem;
    width: calc(((100% - 20px) / 100 * 30) - 12px);
}

.signup-page-component-setting-1::before {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    content: "";
    display: block;
    left: -0.75rem;
    height: 10rem;
    position: absolute;
    right: -0.75rem;
    top: -0.75rem;
    z-index: 2;
}

.signup-page-component-insight-2 {
    height: calc(((100% - 40px) / 100 * 22) - 12px);
    right: 1.25rem;
    top: 1.25rem;
    width: calc(((100% - 20px) / 100 * 30) - 12px);
}

.signup-page-component-setting-2 {
    bottom: 1.25rem;
    height: calc(((100% - 40px) / 100 * 35) - 12px);
    right: 1.25rem;
    width: calc(((100% - 20px) / 100 * 60) - 12px);
}

.signup-page-component-setting-2::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    bottom: -0.75rem;
    content: "";
    display: block;
    left: -0.75rem;
    height: 8rem;
    position: absolute;
    right: -0.75rem;
    z-index: 2;
}

.signup-page-component-quote {
    bottom: 1.25rem;
    height: calc(((100% - 40px) / 100 * 25) - 12px);
    left: 0;
    width: calc(((100% - 20px) / 100 * 75) - 12px);
}

.signup-page-component-card {
    border: 1px solid var(--app-border-color);
    border-radius: 1.5rem;
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 10%) !important;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.signup-page-component-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}

.signup-page-component-setting-2 .signup-page-component-image {
    background-size: cover;
}

.signup-page-main {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.signup-page-main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

@media only screen and (max-width: 1080px) {
    .signup-page-image-container {
        display: none;
    }
}

/* =====
    POS prompts page
===== */
.ls-image-container {
    background: #f4f2f5;
    border: 1px solid var(--app-border-color);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    min-height: 340px;
    cursor: default;
    padding: 0.5rem;
}

.ls-image-container-bottom {
    justify-content: end;
}

.ls-image-container-top {
    justify-content: start;
}

.ls-image {
    opacity: 0.35;
    width: 100%;
}

.card-togglable-enabled .ls-image {
    opacity: 1;
}

.ls-prompt {
    background: #fff;
    border: 1px solid #e8e5e8;
    border-radius: var(--border-radius-md);
    font-size: 0.75rem;
    position: relative;
}

.ls-prompt-bottom {
    margin-bottom: 0.5rem;
}

.ls-prompt-top {
    margin-top: 0.5rem;
}

.ls-prompt-pointer {
    display: block;
    height: 0.5rem;
    left: 50%;
    position: absolute;
    transform: translate(-0.5rem);
    width: 1rem;
}

.ls-prompt-bottom .ls-prompt-pointer {
    bottom: calc(-0.5rem - 1px);
}

.ls-prompt-top .ls-prompt-pointer {
    top: calc(-0.5rem - 1px);
}

.ls-prompt-pointer::after,
.ls-prompt-pointer::before {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.ls-prompt-bottom .ls-prompt-pointer::after {
    border-top-color: #fff;
    border-width: 0.5rem 0.5rem 0;
    bottom: 1px;
}

.ls-prompt-bottom .ls-prompt-pointer::before {
    border-top-color: #e8e5e8;
    border-width: 0.5rem 0.5rem 0;
    bottom: 0;
}

.ls-prompt-top .ls-prompt-pointer::after {
    border-bottom-color: #e8e5e8;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    top: 1px;
}

.ls-prompt-top .ls-prompt-pointer::before {
    border-bottom-color: #e8e5e8;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    top: 0;
}

.ls-prompt-header {
    background-color: #e8e5e8;
    border-bottom: 1px solid #e8e5e8;
    color: #28252a;
    padding: 0.25rem 0.75rem;
}

.ls-prompt-content {
    padding: 0.75rem 0.75rem 0 0.75rem;
}

.ls-prompt .ls-prompt-title {
    color: #28252a !important;
    margin-bottom: 0.5rem;
}

.ls-prompt .ls-prompt-message {
    color: #28252a !important;
    margin-bottom: 0.5rem;
}

.ls-prompt-footer {
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 0 0.75rem 0.75rem;
}

.ls-btn {
    border-radius: var(--border-radius-sm);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1rem;
    padding: 0.5rem 0.75rem;
}

.ls-btn-lg {
    align-items: center;
    background-color: #adacae;
    border-radius: var(--border-radius-sm);
    color: #fff;
    display: flex;
    font-size: 1.125rem;
    font-weight: bold;
    justify-content: space-between;
    line-height: 1.5rem;
    padding: 0.5rem 0.75rem;
}

.ls-btn-purple {
    background-color: #3f32f5;
    margin-left: 0.5rem;
    opacity: 0.6;
}

.ls-btn-blue {
    background-color: #32577d;
    opacity: 0.3;
}

.ls-btn-disabled {
    background-color: #adacae;
}

.ls-btn-blue .ls-placeholder,
.ls-btn-purple .ls-placeholder {
    opacity: 0.6;
}

.ls-card {
    align-items: center;
    background: #fff;
    border: 1px solid #e8e5e8;
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.ls-card-image {
    background-color: #e8e5e8;
    border-radius: 0.25rem;
    display: block;
    font-weight: bold;
    height: 2rem;
    text-align: center;
    width: 2rem;
}

.ls-card-details {
    display: block;
    flex-grow: 1;
    margin: 0 0.5rem;
}

.ls-card .ls-placeholder {
    margin: 0.375rem 0;
}

.ls-trash-icon {
    stroke: #32577d;
}

.ls-field {
    border: 1px solid #e8e5e8;
    border-radius: 0.25rem;
    display: block;
    height: 2rem;
    margin-bottom: 0.5rem;
}

.ls-list {
    margin-bottom: 0.5rem;
}

.ls-list-item {
    align-items: center;
    display: flex;
    padding: 0.25rem 0;
}

.ls-radio {
    border: 1px solid #e8e5e8;
    border-radius: 50%;
    display: block;
    height: 1rem;
    margin: 0 0.5rem;
    width: 1rem;
}

.ls-placeholder {
    background-color: #e8e5e8;
    border-radius: 0.25rem;
    display: block;
    height: 0.5rem;
}

/*
    ========================================
    Deprecated
    ========================================
*/
/* ========= Old Widget ========= */
.editor-section .layout-plain .layout-thumbnail {
    background-image: url("../img/widget/PlainGrey.svg");
}

.editor-section .layout-plain.active .layout-thumbnail {
    background-image: url("../img/widget/PlainBlue.svg");
}

.editor-section .layout-toppanel .layout-thumbnail {
    background-image: url("../img/widget/TopPanelGrey.svg");
}

.editor-section .layout-toppanel.active .layout-thumbnail {
    background-image: url("../img/widget/TopPanelBlue.svg");
}

.editor-section .layout-transparentbg .layout-thumbnail {
    background-image: url("../img/widget/TransparentGrey.svg");
}

.editor-section .layout-transparentbg.active .layout-thumbnail {
    background-image: url("../img/widget/TransparentBlue.svg");
}

.editor-section .layout-border .layout-thumbnail {
    background-image: url("../img/widget/BorderPanelGrey.svg");
}

.editor-section .layout-border.active .layout-thumbnail {
    background-image: url("../img/widget/BorderPanelBlue.svg");
}

.editor-section .layout-sidepanel .layout-thumbnail {
    background-image: url("../img/widget/SidePanelGrey.svg");
}

.editor-section .layout-sidepanel.active .layout-thumbnail {
    background-image: url("../img/widget/SidePanelBlue.svg");
}

.editor-section .layout-bgpanel .layout-thumbnail {
    background-image: url("../img/widget/BackgroundPanelGrey.svg");
}

.editor-section .layout-bgpanel.active .layout-thumbnail {
    background-image: url("../img/widget/BackgroundPanelBlue.svg");
}

/* ========= Old Widget ========= */

/* Large Switch Input */
.custom-switch-lg .form-check-input {
    height: 1.25rem;
    width: 2.5rem;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImN1c3RvbS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSxVQUFVO0FBQ2QiLCJmaWxlIjoiY3VzdG9tLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zaWRlYmFyLWJyYW5kIHN2Z3tcclxuICAgIHdpZHRoOjEwMCU7XHJcbn0iXX0= */

.connect-arrow {
    background-image: url("/Content/assets/grey-join-arrow.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 75px;
    position: relative;
    cursor: pointer;
}

.connect-arrow-new {
    height: 75px;
    position: relative;
    cursor: pointer;
}

.add-flow-block .add-flow-block-circle {
    border: 2px solid var(--app-color);
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 2px;
    border-radius: 20px;
    background: #fff;
    position: absolute;
    top: 22px;
    left: 50%;
    margin-left: -15px;
    transition: all 0.2s linear;
}

.automation-wrapper {
    position: relative;
    height: 70vh;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.automation-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: var(--app-background-color);
}

.node-wrapper {
    position: absolute;
}

.node-wrapper .float-end.mr-10:hover {
    cursor: pointer;
}

.node {
    height: 140px;
}

.end-node {
    width: 60px;
    height: 24px;
    background: var(--color-grey-600) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    position: absolute;
}

.node-action-more:hover {
    cursor: pointer;
}

.connect-split-arrow-wrapper {
    width: 100%;
    height: 75px;
    position: absolute;
}

.connect-arrow-left {
    position: absolute;
    cursor: pointer;
    right: 215px;
}

.connect-arrow-right {
    position: absolute;
    cursor: pointer;
    left: 215px;
}

.node-wrapper-left {
    position: absolute;
    height: auto;
    width: auto;
}

.node-wrapper-right {
    position: absolute;
    height: auto;
    width: auto;
}

.action-group {
    border: 1px solid var(--app-border-color);
    border-radius: 4px;
    position: relative;
}

.split-notification {
    border: 1px solid var(--app-border-color);
    border-radius: 4px;
    background-color: var(--app-background-color);
    font-size: 12pt;
}

.action-group-title {
    background-color: white;
    position: absolute;
    top: -12px;
    left: 14px;
}

.action-item {
    border: 1px solid var(--app-border-color);
    border-radius: 4px;
}

.action-item h4,
.action-item p {
    color: #6c757dbf !important;
}

.action-item.selected {
    border: 1px solid #396bdf;
    border-radius: 4px;
}

.action-item.selected h4 {
    color: #495057 !important;
}

.action-item.selected p {
    color: #6c757d !important;
}

.action-item:hover {
    cursor: pointer;
}

.split-delete-selection-box {
    border: 1px solid #dfe6ec;
    border-radius: 4px;
}

.split-delete-selection-box.selected {
    border: 1px solid #396bdf;
}

.split-delete-selection-box:hover {
    cursor: pointer;
}

.split-delete-selection-box-header {
    display: block;
    text-align: right;
    height: 20px;
    width: 100%;
}

.split-delete-selection-box-header input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.split-delete-selection-box-icon {
    display: block;
    height: 50px;
    width: 50px;
}

.btnAddAction {
    height: 60px;
    width: 100px;
    margin: 0px 10px;
}

.winback-trigger-settings {
    padding: 20px;
}

.winback-trigger-settings span {
    display: inline;
    width: auto;
}

.winback-trigger-settings input {
    width: 120px;
    display: inline;
}

.winback-trigger-settings select {
    width: 140px;
    display: inline;
}

.iframe-container-preview {
    position: relative;
    display: block;
    height: 629px;
    padding: 0px;
    overflow: auto;
    margin-bottom: 4px;
    cursor: pointer;
    background-color: rgb(246, 248, 249);
}

.iframe-preview-email {
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    --zoom: 0.81;
    --mobile-width: 350px;
    border-radius: 4px;
    height: max(1020px, calc(429px / var(--zoom)));
    width: calc(100% / var(--zoom));
    border: 2px solid rgb(246, 248, 249);
    transform: scale(var(--zoom));
    transform-origin: 0px 0px;
    pointer-events: none;
    background-color: rgb(255, 255, 255);
}

.iframe-preview-mobile {
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    --zoom: 0.81;
    --mobile-width: 350px;
    margin-left: calc((100% - var(--mobile-width) * var(--zoom)) / 2);
    border-radius: 8px;
    height: max(954px, calc(429px / var(--zoom)));
    width: var(--mobile-width);
    border: 2px solid rgb(246, 248, 249);
    transform: scale(var(--zoom));
    transform-origin: 0px 0px;
    pointer-events: none;
    background-color: rgb(255, 255, 255);
}

.dotted-line-bottom {
    border-bottom: dotted 1px var(--app-border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.p-20 {
    padding: 20px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.dropdown-toggle-split.btn-light {
    border-left: solid 1px var(--app-border-color);
}

.dropdown-toggle-split.btn {
    max-width: 2rem;
}

.dropdown-toggle-split.btn-primary,
.page-header .dropdown-toggle-split.btn-primary {
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    margin-left: 0 !important;
}

.btn-light,
.btn-light:hover {
    border: solid 1px var(--app-border-color);
}

.notification-preview-card {
    height: 400px;
    border: solid 1px var(--app-border-color);
}

.notification-card-body {
    margin-top: 0px;
    border-top: solid 1px var(--color-grey-500);
}

.notification-card-body iframe {
    transform: scale(0.85);
}

.email-builder-discount-block {
    border: 1px dashed rgb(0, 0, 0, 0.2);
    margin: 10px 0px;
}

.p-10 {
    padding: 10px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.smsPreviewCreditsAvailable {
    margin-top: 10px;
    text-align: left;
    padding: 10px;
    width: 100%;
    background-color: var(--color-amber-100);
    font-size: smaller;
}

/* ========== Form input styles to remove some green validation ========== */
/* FORM.CONTROL */
.was-validated .prevent-validation.form-control:valid,
.prevent-validation.form-control.is-valid {
    padding: 0.375rem 0.75rem;
    border-color: var(--color-grey-500);
    background-image: none;
}

.was-validated .prevent-validation.form-control:invalid,
.prevent-validation.form-control.is-invalid {
    padding: 0.375rem 0.75rem;
    border-color: var(--color-grey-500);
    background-image: none;
}

.was-validated .prevent-validation.form-select:valid,
.prevent-validation.form-select.is-valid {
    border-color: var(--color-grey-500);
}

.errorShadow,
.was-validated .boxShadowCustom.form-control:invalid:focus,
.boxShadowCustom.form-control:invalid:focus {
    box-shadow: 0 0 0 0.25rem rgb(217 83 79 / 25%) !important;
}

.validShadow,
.was-validated .boxShadowCustom.form-control:valid:focus,
.boxShadowCustom.form-control:valid:focus {
    box-shadow: 0 0 0 0.25rem rgb(63 128 234 / 25%) !important;
}

.errorStyle {
    display: flex;
    align-items: center;
    border: 1px solid var(--app-color-danger);
    border-radius: 0.25rem;
}

.validStyle {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-grey-500);
    border-radius: 0.2rem;
}

/* FORM.CHECKBOX */
.was-validated .prevent-validation.form-check .form-check-input:valid:checked,
.prevent-validation.form-check .form-check-input.is-valid:checked,
.prevent-validation.form-check .form-check-input:checked {
    background-color: var(--app-color-success);
    border-color: var(--app-color-success);
    box-shadow: none;
}

.was-validated .prevent-validation.form-check .form-check-input:valid,
.prevent-validation.form-check .form-check-input.is-valid,
.was-validated .prevent-validation.form-check .form-check-input,
.prevent-validation.form-check .form-check-input {
    background-color: white;
    border-color: var(--color-grey-500);
    box-shadow: none;
}

.was-validated .prevent-validation.form-check .form-check-input:focus,
.prevent-validation.form-check .form-check-input:focus,
.was-validated .prevent-validation.form-control:focus,
.prevent-validation.form-control:focus,
.was-validated .prevent-validation.form-select:focus,
.prevent-validation.form-select:focus {
    box-shadow: 0 0 0 0.25rem rgb(206 212 218 / 25%);
}

.was-validated .prevent-validation.form-check .form-check-input:valid:focus,
.prevent-validation.form-check .form-check-input.is-valid:focus,
.was-validated .prevent-validation.form-control:valid:focus,
.prevent-validation.form-control.is-valid:focus,
.was-validated .prevent-validation.form-select:valid:focus,
.prevent-validation.form-select.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgb(63 128 234 / 25%);
}

/* FORM.CHECKBOX Label */
.was-validated .prevent-validation.form-check .form-check-label,
.prevent-validation.form-check .form-check-label {
    color: var(--bs-body-color);
}

/* ========== Switch custom padding fix ========== */
.noPadding .form-check-input {
    padding: 0 !important;
    margin: 0 !important;
}

/* ========== Tier name pill centering ========== */
.tierNamePillBadge {
    color: black;
    padding: 0.5rem;
    margin-right: 0.2rem;
    text-align: center;
}

/* ========== Currency symbol box styles ==========*/
.dollarBox {
    border: none;
    border-right: 1px solid var(--color-grey-500);
    border-radius: 0;
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
    min-height: 2.5rem;
    padding-top: 5px;
}

.percentBox {
    border: none;
    border-right: 1px solid var(--color-grey-500);
    border-radius: 0;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    min-height: 2.5rem;
    padding-top: 5px;
}

.showCurrencySymbol {
    display: block;
    padding-top: 8px;
}

.hideCurrencySymbol {
    display: none;
}

.max-width-300 {
    max-width: 300px;
}

.max-width-1100 {
    max-width: 1100px;
}

/* ========== Width issues on inputs ========== */
.fullWidthAlways {
    max-width: 100% !important;
    width: 100% !important;
}

/*
.sidebar-link-not-active {
  color: #6c757d !important;
}

.sidebar-item-not-active .sidebar-link-not-active {
  color: #495057 !important;
}

.sidebar-item-not-active .sidebar-link-not-active svg {
  color: #495057 !important;
}

.sidebar-item-not-active .sidebar-link-not-active:hover {
  color: #568fed !important;
}

.sidebar-item-not-active:hover {
  color: #568fed !important;
}

.sidebar-link-not-active:hover svg {
  color: #568fed !important;
}
*/

.font-20 {
    font-size: 20px !important;
}

.font-25 {
    font-size: 25px !important;
}

/*#external-events {
  z-index: 2;

  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  overflow-y: scroll;
}

#external-events .fc-event {
  margin: 1em 0;
  cursor: move;
}
*/
.width-rem-18 {
    width: 18rem;
}

.modal-media {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 550px;
    max-height: 550px;
    min-height: 90px;
    transition: transform 0.3s ease-out;
}

.cursor-grab {
    cursor: grab;
}

.modal-media-wrapper {
    padding: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--app-color-highlight);
    /* border-radius: 3px 3px 0 0; */
}

.list-thumbnail-sm {
    float: left;
    margin-right: 10px;
    width: 40px;
    height: 50px;
    object-fit: cover;
}

.gallery-media-list-item-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.gallery-media-list-item-img-unsplash {
    width: 200px;
    height: 130px;
    object-fit: cover;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.uploadcare--widget__button,
.uploadcare--widget__dragndrop-area,
.uploadcare--progress,
.uploadcare--widget__text {
    display: none;
}

.uploadcare--powered-by,
.uploadcare--powered-by__link {
    display: none;
}

.shorten-post-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.p-t-10 {
    padding-top: 10px !important;
}

.gray-icon-button {
    color: var(--grey-color-800) !important;
}

.filled {
    fill: currentColor;
}

/* ========== Support widget ========= */
/* TODO: Get rid of this */
.sidebar .sidebar-footer {
    background: #ffffff;
    border-top: 1px solid var(--app-border-color);
    bottom: 0;
    height: 54.45px;
    width: 260px;
    padding: 12px;
    position: fixed;
}

.m-helpButton {
    align-items: center;
    background-color: #a654d6;
    border: 1px solid #9c4fc9;
    border-radius: 24px;
    box-shadow: 0px 0px 32px #0000000d;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    font-size: 15.2px;
    font-weight: var(--font-weight-bold);
    min-height: 48px;
    transition: all ease-in 0.2s;
}

.m-helpButton:active,
.m-helpButton:focus,
.m-helpButton:hover {
    background-color: #9c4fc9;
    color: #ffffff;
    text-decoration: none;
}

.m-helpButton--sml {
    bottom: 10px;
    left: 10px;
    position: fixed;
    z-index: 10;
}

.m-helpButton .m-helpButton__icon {
    background-color: rgba(255, 255, 255, 0.075);
    border-radius: 50%;
    color: #ffffff;
    margin: 1px;
    margin-right: 16px;
    min-height: 44px;
    padding: 12px;
    width: 44px;
}

.m-helpButton--sml .m-helpButton__icon {
    background-color: transparent;
    margin-right: 1px;
    min-height: 44px;
    width: 44px;
}

img.white-rocket {
    filter: brightness(0) invert(1);
}

span.pro-badge {
    font-size: small;
    top: -10px;
    position: relative;
    background-color: #a654d6 !important;
}

span.pro-badge-nav {
    background-color: #a654d6 !important;
}

/*.btn-outline-primary-1{border:solid 1px #3F80EA !important; color:#3F80EA; background-color:white; }
.btn-outline-primary-1:hover{border:solid 1px #3F80EA !important; background-color:#3F80EA; color:white }*/

.m-icon-lg {
    border: 1px solid #dee6ed;
    border-radius: 0.5rem;
    margin: 0;
    padding: 1rem;
}

.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    border-color: var(--color-grey-300);
}

.custom-date-label {
    top: 0px !important;
    font-size: var(--bs-body-font-size) !important;
    color: var(--app-color) !important;
}

.customer-display-user-code {
    letter-spacing: 0.2rem;
}

.customer-display-user-code::placeholder {
    letter-spacing: normal;
}

.replace-image {
    cursor: pointer;
    transition: filter 0.3s ease;
}

.replace-image:hover {
    filter: brightness(80%);
}