/******* Variables *******/
:root, [data-bs-theme=light] {
    --btn-success-color: #0DB02B;
    --primary-color: #ec6608;
    --primary-color-rgb: 236, 102, 8;
    --primary-dark-color: #c2560a;
    --primary-light-color: #f7a368;
    --divider-color: #f4f1ef;
    --background-color: #f4f3f1;
    --nav-link-color: #333;
    --primary-font-color: #544e48;
    --card-border-color: #e3e6f0;
    --red-degrees: 0deg;
    --green-degrees: 0deg;
    --yellow-degrees: 0deg;
    --role-badge-color: 236, 102, 8;
    --role-wa-color: 248, 89, 225;
    --role-fm-color: 71, 204, 66;
    --role-bo-color: 53, 165, 248;
    --role-boa-color: 109, 125, 248;
    --role-ad-color: 0, 0, 255;
    --role-co-color: 255, 154, 99;
    --role-cm-color: 248, 220, 94;
    --role-ws-color: 201, 49, 248;
    --role-ko-color: 255, 39, 83;
    --role-hy-color: 64, 224, 208;
    --role-icj-color: 224, 171, 64;
    --role-in-color: 184, 180, 119;
    --role-br-color: 201, 120, 103;
    --bs-body-font-weight: 400;
    --bs-body-color: #544e48;
    --bs-scroll-height: 100vh;
}
/******* Colors *******/
[data-theme=dark] {
    --bs-body-color: rgba(255, 255, 255, 0.5019607843) !important;
}
.bg-primary {
    background-color: rgba(var(--primary-color-rgb), var(--bs-bg-opacity)) !important;
}
.link-primary {
    color: var(--primary-color) !important;
}
.link-primary:hover {
    color: var(--primary-dark-color) !important;
}
.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-dark-color);
    --bs-btn-hover-border-color: var(--primary-dark-color);
    --bs-btn-active-bg: var(--primary-dark-color);
    --bs-btn-active-border-color: var(--primary-dark-color);
    --bs-btn-disabled-bg: var(--primary-light-color);
    --bs-btn-disabled-border-color: var(--primary-light-color);
}
.btn-transition,
.badge-transition,
.btn-status,
.badge-status {
    background-color: rgba(var(--bs-bg-color-rgb), var(--bs-bg-opacity)) !important;
    color: rgba(var(--bs-bg-color-rgb), var(--bs-text-opacity)) !important;
    border: 1px solid rgb(var(--bs-bg-color-rgb)) !important;
}
[data-theme=dark] table {
    --bs-table-bg: #131920 !important;
    --bs-table-border-color: #1b232d !important;
}
/******* Form elements *******/
.ui-datepicker {
    z-index: 9999 !important;
}
.checkbox-md {
    width: 1.3rem !important;
    height: 1.3rem !important;
    margin-top: 0.1rem !important;
}
.checkbox-lg {
    width: 1.55rem !important;
    height: 1.55rem !important;
    margin-top: 0 !important;
}
.checkbox-xl {
    width: 1.85rem !important;
    height: 1.85rem !important;
    margin-top: -0.2rem !important;
}
/* tomSelectJS */
.ts-control > input {
    min-width: 1rem !important;
}
.form-floating .ts-control {
    padding-top: 1.7rem;
}
.ts-dropdown {
    min-width: 300px;
}
.ts-dropdown .optgroup .option {
    padding-left: 2rem !important;
}
.ts-dropdown .active:not(.selected), .ts-dropdown .active.create {
    background-color: var(--bs-gray-200);
}
.ts-dropdown .selected {
    background-color: var(--bs-link-color);
    color: var(--bs-white);
}
.ts-dropdown .active.selected {
    background-color: var(--bs-link-hover-color);
}
.ts-dropdown .option[aria-disabled="true"], .ts-dropdown .option[disabled="true"] {
    display: none !important;
}
.ts-wrapper.form-control.multi.has-items, .ts-wrapper.form-select.multi.has-items {
    padding: 0 15px !important;
}
.ts-wrapper {
    min-height: 55px;
}
.ts-wrapper .ts-control {
    padding: 16px 15px;
}
.ts-dropdown-content {
    max-height: 300px;
}
.form-floating .ts-control {
    padding-top: 26px;
    padding-bottom: 6px;
}
.ts-wrapper .ts-control div.clear-button {
    right: 1.7rem !important;
    font-size: 2rem;
    top: 38%;
    font-weight: 300;
}
.ts-wrapper.multi .ts-control > div.item {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    border-radius: 0.2rem;
    padding: 0.2rem 0.5rem;
}
[data-theme=dark] .ts-wrapper.multi .ts-control > div.item {
    background-color: rgba(var(--bs-primary-rgb), 0.9) !important;
}
.ts-wrapper.multi .ts-control > div.active {
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
}
.ts-wrapper div.item[data-value=""] {
    color: var(--bs-secondary-color);
}
.ts-wrapper.mw-150 {
    min-width: 150px;
}
.ts-n-items {
    position: absolute;
    right: 35px;
    margin-right: 0 !important;
    cursor: pointer;
    border: 1px solid var(--primary) !important;
    background: var(--light) !important;
    min-width: 1.6em;
    color: var(--primary) !important;
}
[data-theme=dark] .form-control {
    background-color: #1b232d !important;
}
[data-theme=dark] .ts-dropdown .active:not(.selected), [data-theme=dark] .ts-dropdown .active.create {
    color: #000;
}
/******* Tables *******/
tr.subrow td,
tr.subrow th {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
[data-theme=dark] tr.subrow td,
[data-theme=dark] tr.subrow th {
    background-color: #131920;
    color: #fff;
}

tr.table-danger td {
    background-color: var(--bs-table-bg) !important;
}

th a.sortable,
th a.asc,
th a.desc {
    color:inherit;
    text-decoration: none;
}

th a.asc,
th a.desc {
    color: var(--bs-primary);
}

/******* Components *******/
/* Card */
.card.clickable {
    transition: transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
}

.card.clickable:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* Avatar */
.avatar {
    width: 42px;
    height: 42px;
    position: relative;
}
avatar.avatar-sm {
    width: 35px;
    height: 35px;
}
.avatar.avatar-xl {
    width: 150px;
    height: 150px;
}
.avatar img {
    width: 100%;
}
.badge-avatar {
    background-color: rgb(var(--badge-color)) !important;
}
.avatar:not(.avatar-br)::after {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border: 2px solid var(--bs-white);
    border-radius: 100%;
    background-color: rgb(var(--badge-color));
}
[data-theme=dark] .avatar:not(.avatar-br)::after {
    border-color: #1b232d !important;
}
.avatar.avatar-xl:not(.avatar-br)::after {
    width: 30px;
    height: 30px;
    border-width: 4px;
}
.avatar-wa {
    --badge-color: var(--role-wa-color);
}
.avatar-fm {
    --badge-color: var(--role-fm-color);
}
.avatar-bo {
    --badge-color: var(--role-bo-color);
}
.avatar-boa {
    --badge-color: var(--role-boa-color);
}
.avatar-ad {
    --badge-color: var(--role-ad-color);
}
.avatar-co {
    --badge-color: var(--role-co-color);
}
.avatar-cm {
    --badge-color: var(--role-cm-color);
}
.avatar-ws {
    --badge-color: var(--role-ws-color);
}
.avatar-ko {
    --badge-color: var(--role-ko-color);
}
.avatar-hy {
    --badge-color: var(--role-hy-color);
}
.avatar-icj {
    --badge-color: var(--role-icj-color);
}
.avatar-in {
    --badge-color: var(--role-in-color);
}
/* Dropdown */
.dropdown-menu {
    z-index: 3000;
}
.dropdown-menu.show {
    z-index: 1099;
}
/* Clickable */
.clickable {
    transform: rotate(0);
}
.clickable input, .clickable a:not(.stretched-link), .clickable .dropdown, .clickable .custom-switch, .clickable *[data-bs-toggle="tooltip"], .clickable *[data-bs-toggle="popover"] {
    z-index: 2;
    position: relative;
}
/* Tooltip */
/* Voor een tooltip die meerdere velden onder elkaar toont. De regelovergangen
   komen uit het title-attribuut als "\n", dus zonder data-bs-html en daarmee
   zonder dat tekst van een gebruiker als HTML wordt uitgevoerd. */
.tooltip-multiline {
    --bs-tooltip-max-width: 320px;
}
.tooltip-multiline .tooltip-inner {
    white-space: pre-line;
    text-align: left;
}
/* Collapse */
[data-bs-toggle="collapse"] {
    cursor: pointer;
}
/* listgroup */
.list-group {
    --bs-list-group-active-border-color: var(--primary-color);
    --bs-list-group-active-bg: transparent;
    --bs-list-group-bg: transparent;
    --bs-list-group-active-color: var(--bs-emphasis-color);
}
.list-group-item a {
    color: var(--bs-list-group-color);
}
.list-group-item.active a {
    color: var(--primary-dark-color);
}

/* Toast */
.toast {
    --bs-toast-max-width: 500px;
    --bs-toast-padding-x: 1rem;
    --bs-toast-padding-y: 1rem;
    --bs-toast-font-size: 1rem;
}

/******* Elements *******/
/* Sidebar */
.homestudios-icon {
    color: var(--primary-color) !important;
    position: relative;
}
.homestudios-icon::after {
    display: block;
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    top: 50%;
    left: 50%;
    background-size: contain;
    transform: translate(-50%, -50%);
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%23EC660B%22%20d%3D%22M18%201.11c.04%200%20.08.01.12.03l14.43%208.33c.07.04.12.12.12.2v16.66c0%20.08-.04.16-.12.2l-14.43%208.33c-.04.02-.08.03-.12.03s-.08-.01-.12-.03L3.45%2026.53a.24.24%200%200%201-.12-.2V9.67c0-.08.04-.16.12-.2l14.43-8.33c.04-.02.08-.03.12-.03M18%20.1c-.21%200-.43.06-.62.17L2.95%208.6c-.38.22-.62.63-.62%201.07v16.66c0%20.44.24.85.62%201.07l14.43%208.33c.19.11.4.17.62.17s.43-.06.62-.17l14.43-8.33c.38-.22.62-.63.62-1.07V9.67c0-.44-.24-.85-.62-1.07L18.62.27C18.43.16%2018.21.1%2018%20.1z%22%2F%3E%3C%2Fsvg%3E);
}
/* Customerflow */
#customerFlow::before {
    display: block;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 42px;
    border: 1px dashed var(--bs-secondary);
}
#customerFlow .step::after {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    line-height: 40px;
}
#customerFlow .step.loading::after, #customerFlow .step-group:not(.group) .step.loading::after {
    content: "";
    background-color: var(--bs-secondary);
    animation: placeholder-glow 2s ease-in-out infinite;
}
#customerFlow .step.completed::after, #customerFlow .group .step.completed::after {
    content: 'check';
    background-color: var(--bs-success);
}
#customerFlow .step.pending::after, #customerFlow .group .step.pending::after {
    content: 'pause';
    background-color: var(--bs-warning);
}
#customerFlow .group .step.in-progress::after {
    background-color: var(--bs-secondary);
}
#customerFlow .step.failed::after {
    content: 'exclamation';
    background-color: var(--bs-danger);
}
#customerFlow .step.in-progress::after {
    content: '';
}
#customerFlow .group .step::after {
    background: conic-gradient(var(--bs-danger) var(--red-degrees), var(--bs-warning) var(--red-degrees) var(--yellow-degrees), var(--bs-success) var(--yellow-degrees) var(--green-degrees), var(--bs-gray-600) var(--green-degrees) 360deg);
    border-radius: 50%;
    content: "";
}
.step {
    padding-left: 45px;
    position: relative;
    border-radius: var(--bs-card-border-radius);
}
.step::after {
    display: block;
    text-align: center;
    color: #FFF;
    line-height: 40px;
    position: absolute;
    height: 40px;
    left: 31px;
    top: 10px;
    width: 40px;
    transform: translateX(-50%);
    background-color: var(--bs-secondary);
    border-radius: 100%;
}
#customerFlow .step-container {
    scroll-margin-top: 75px;
}
#customerFlow .step-container:last-child .step::before {
    bottom: 50%;
    position: absolute;
}
#customerFlow .pie {
    width: 40px;
    height: 40px;
    position: relative;
    border-radius: 50%;
}
ul.customerFlowHelp {
    list-style: none;
}
ul.customerFlowHelp > li::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 5px;
    border-radius: 100%;
    transform: translate(-50%, 12%);
}
ul.customerFlowHelp > li.pending::before {
    background-color: var(--bs-warning);
}
ul.customerFlowHelp > li.failed::before {
    background-color: var(--bs-danger);
}
/* Conditions collection */
.condition-collection {
    position: relative;
}
.condition-collection + .condition-collection {
    margin-top: 5em;
}
.condition-collection + .condition-collection::before {
    content: '';
    position: absolute;
    left: 2em;
    top: -5em;
    height: 5em;
    /* same as margin top */
    width: 0.5em;
    background-color: var(--bs-info);
    opacity: 50%;
}
.condition-collection + .condition-collection::after {
    content: 'OF';
    position: absolute;
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
    line-height: 1;
    padding: .25em .6em .25em .6em;
    color: #FFF;
    top: -2.75em;
    left: 0.635em;
    width: auto;
    height: auto;
    border-radius: 16rem;
    background-color: var(--bs-info);
}
.condition {
    position: relative;
}
.condition + .condition {
    margin-top: 2em;
}
.condition + .condition::after {
    content: 'EN';
    position: absolute;
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 0.75em;
    line-height: 1;
    padding: .25em .6em .25em .6em;
    color: #FFF;
    top: -2.1em;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 16rem;
    background-color: var(--bs-info);
    z-index: 10;
}
/* Sensitive */
.sensitive {
    filter: blur(5px);
    transition: 0.1s;
}
.sensitive.disabled {
    filter: none !important;
}
/* Notification */
#notification-button .count {
    top: -15px;
    right: -5px;
    width: 17px;
    height: 17px;
    line-height: 17px;
    position: absolute;
    border-radius: 50%;
    display: inline-block;
    color: #fff;
    background-color: #e74c3c;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
}
tr.subrow td,
tr.subrow th {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
}
[data-theme=dark] tr.subrow td,
[data-theme=dark] tr.subrow th {
    background-color: #131920 !important;
    color: #fff;
}
.notification-rule {
    border-bottom: 1px dashed var(--bs-border-color);
    padding:1rem;
}

/* Homestudios AI */
@property --ai-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.ai-icon {
    transform: rotate(90deg);
    background: conic-gradient(from var(--ai-angle), #7B2FFF, #0099FF, #00D4C8, #FF2D78, #EC6608, #7B2FFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ai-rotate 3s linear infinite;
}

@keyframes ai-rotate {
    from { --ai-angle: 0deg; }
    to   { --ai-angle: 360deg; }
}

/****** ANIMATIONS ******/
@keyframes spin {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}
/******* OTHER ******/
.spin {
    animation: spin 1s linear infinite;
}
.calendar-button {
    cursor: pointer;
}
.sticky-offset {
    top: 60px;
    z-index: 11 !important;
}
.stretched-link {
    cursor: pointer;
}
[data-theme=dark] .messagecenter, [data-theme=dark] .messagecenter h3, [data-theme=dark] .messagecenter h5, [data-theme=dark] .messagecenter p, [data-theme=dark] .conversationmessage-documentslink.btn {
    color: #475569 !important;
}
[data-theme=dark] .input-group-text {
    background-color: #1b232d !important;
    border-color: rgba(255, 255, 255, 0.1490196078) !important;
}
/******* table without on each cell a set of classes ******/
.default-table-area .table-responsive .table.table-less-classes td,
.default-table-area .table-responsive .table.table-less-classes th {
    font-size: 16px;
    font-weight: 500;
}
.default-table-area .table-responsive .table.table-less-classes thead tr {
    background-color: #e7effd;
}
.default-table-area .table-responsive .table.table-less-classes tbody td:not(:first-child) {
    /** applies text-body to all td except first one **/
    --bs-text-opacity: 1;
    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity));
}
.default-table-area .table-responsive .table.table-less-classes tbody td:first-child {
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity));
}
[data-theme=dark] .default-table-area .table-responsive .table.table-less-classes tbody td:first-child {
    color: #fff;
}
.default-table-area .table-responsive .table.table-less-classes .th-inner {
    padding: 0 !important;
}
.default-table-area .table-responsive .table.table-less-classes tr:last-child td {
    border: none;
}
table[data-click-to-select] tbody tr {
    cursor: pointer;
}
/******* OTHER ******/

.redactor-modal-box, .redactor-dropdown {
    z-index: 1056 !important;
}

.redactor-modal-body .checkbox input[type=checkbox] {
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
}

.accordion-button.accordion-toggle-icon-only,
.accordion-button.accordion-toggle-icon-only:not(.collapsed) {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23919aa3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%286, 48.4, 97.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    box-shadow: none;
    border: none;
}

.form-switch {
    cursor: pointer;
}
.menu-vertical .menu-sub .menu-item.after-sub-menu .menu-link:has(.menu-icon),
.menu-vertical .menu-sub .menu-item.after-sub-menu.open .menu-link:has(.menu-icon) {
    padding-left: 18px;
}

.menu-vertical .menu-sub .menu-item.after-sub-menu .menu-link:has(.menu-icon)::before,
.menu-vertical .menu-sub .menu-item.after-sub-menu.open .menu-link:has(.menu-icon)::before {
    display: none;
}
.form-switch {
    cursor: pointer;
}