html, body {
    font-family: Inter, sans-serif;
}

@supports (font-variation-settings: normal) {
    html, body {
        font-family: 'Inter var', sans-serif;
    }
}

label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.fullheight {
    position: relative;
    height: 100%;
}

.custom-task-color-0 {
    background-color: #959595;
}

.custom-task-color-1 {
    background-color: #6c9bff;
}

.custom-task-color-2 {
    background-color: #4796CE;
}

.custom-task-color-3 {
    background-color: #CE4776;
}

.custom-task-color-4 {
    background-color: #CE5B47;
}

.custom-task-color-5 {
    background-color: #ffa049;
}

.custom-task-color-6 {
    background-color: #9F47CE;
}

.custom-task {
    max-height: 48px;
    height: 100%;
    display: block;
    overflow: hidden;
}

.custom-task-wrapper {
    padding: 8px;
    color: #fff;
}

.custom-task-wrapper > * {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-task-img-wrapper {
    float: left;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 8px;
    background-color: #fff;
    overflow: hidden;
}

.custom-task-img {
    width: 32px;
}

.custom-task-title {
    font-weight: 600;
    font-size: 13px;
}

.custom-task-row {
    font-size: 11px;
}

.custom-task-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 4px;
    background: rgba(0, 0, 0, .3);
}

.dx-gantt .dx-row {
    height: 63px;
}

.custom-task-envelope-wrapper {
    position: absolute;
    top: 0;
    right: 4px;
}

.custom-task-envelope {
    width: 18px;
}

.errorRow {
    background-color: #fc5c65;
}

.warningRow {
    background-color: #f6b93b;
}

.white {
    color: #fff !important;
    font-weight: bold !important;
}

.dx-gantt-sel {
    display: none;
}

.dx-gantt-selectedTask {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.spinner {
    border: 16px solid silver;
    border-top: 16px solid #009ee2;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

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

    100% {
        transform: rotate(360deg)
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.myRich {
    height: 850px !important;
}

iframe {
    display: block;
}

.show-pointer {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    list-style-type: none;
}

.content-fullheight .dxbl-tabs-content-panel {
    height: calc(100% - 42px) !important;
}

.content-fullheight {
    height: 100%;
}

.bg-color-1 {
    background-color: #ffe0e0 !important;
}

.bg-color-2 {
    background-color: #ffe0b3 !important;
}

.bg-color-3 {
    background-color: #f5f5b8 !important;
}

.bg-color-4 {
    background-color: #cbed9a !important;
}

.bg-color-5 {
    background-color: #b2edb8 !important;
}

.bg-color-6 {
    background-color: #b2edd0 !important;
}

.bg-color-7 {
    background-color: #b2ede6 !important;
}

.bg-color-8 {
    background-color: #b2d6ed !important;
}

.bg-color-9 {
    background-color: #b2b9ed !important;
}

.bg-color-10 {
    background-color: #d0b2ed !important;
}

.color-1 {
    color: #af5858 !important;
}

.color-2 {
    color: #b28b56 !important;
}

.color-3 {
    color: #b0b04c !important;
}

.color-4 {
    color: #6f9436 !important;
}

.color-5 {
    color: #3c9446 !important;
}

.color-6 {
    color: #339163 !important;
}

.color-7 {
    color: #398c82 !important;
}

.color-8 {
    color: #3a7093 !important;
}

.color-9 {
    color: #394391 !important;
}

.color-10 {
    color: #73439f !important;
}

#mouse-tooltip {
    position: absolute;
    z-index: 10000;
    display: none;
}

.workload-row-tooltip {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    grid-template-areas: "img name";
    background-color: var(--bs-body-bg);
    gap: 0.5rem;
    padding: 0.5rem;
}

.workload-row-tooltip .employee-image {
    grid-area: img;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

.workload-row-tooltip .employee-name {
    grid-area: name;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    line-height: 1rem;
}

.workload-row {
    cursor: grab;
}

.workload-day {
    cursor: pointer;
}

.vh-80 {
    height: 80vh;
}

.text-bg-teal {
    background: #20C997;
    color: var(--bs-body-bg);
}

.text-bg-indigo {
    background: #6610F2;
    color: var(--bs-body-bg);
}

.text-bg-orange {
    background: #FD7E14;
    color: var(--bs-body-bg);
}

.text-bg-cyan {
    background: #0DCAF0;
    color: var(--bs-body-bg);
}

.text-teal {
    color: #20C997;
}

.text-indigo {
    color: #6610F2;
}

.text-orange {
    color: #FD7E14;
}

.text-cyan {
    color: #0DCAF0;
}

.fs-smaller {
    font-size: 0.85rem;
}

*:focus {
    outline: none;
}

.editor-mention {
    color: var(--bs-primary);
}

.preserve-whitespace {
    white-space: break-spaces;
}

.icon-list {
    max-height: 320px; /* 2-3 rows should be visible  */

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}

.form-control {
    font-size: 0.875rem;
}

.customer-details {
    height: calc(100% - 56px) !important;
}

.addresses-list {
    width: 488px;
}

.pill-circle {
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.account-search-list {
    height: inherit !important;
}

.sortable-list-bucket {
    min-width: 30rem;
    width: 30rem;
}

.master {
    height: calc(100% - 3.5rem) !important;
}

.custom-rich-edit {
    height: 50vh !important;
    width: 500px;
    min-width: 100% !important;
}

.master-detail {
    width: 300px !important;
    padding-left: 1rem;
}

.kanban-ticket-buckets {
    height: calc(100% - 6rem) !important;
}

.custom-rich-edit {
    height: 50vh !important;
    width: 500px;
    min-width: 100% !important;
}

.master-detail {
    height: 65vh;
    padding: 0;
}

.variable-section {
    height: 80vh !important;
    width: 20rem;
    min-width: 100% !important;
    margin-top: 0.5rem;
}

.treeview-item, .listbox-item {
    padding: 4px 8px 4px 8px;
    font-size: 0.75rem;
    font-weight: 400;
    height: 1.5rem;
    gap: 4px;
    align-content: center;
    display: flex;
    background-color: var(--bs-secondary-bg);
    border: none;
    border-radius: var(--bs-border-radius-pill);

}

.group-name {
    pointer-events: none;
    cursor: default;
}

#variableTreeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-indent {
    display: none;
}

/*#variableTreeview .dxbl-btn.dxbl-disabled, .dxbl-btn:disabled {*/
/*    display: none;*/
/*}*/

#variableTreeview .dxbl-expandable-container {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    padding-bottom: 0.75rem;
}


.custom-tooltip {
    position: absolute;
    z-index: 1080;
    min-width: 10ch;
    max-width: 50ch;
    line-height: 1.5rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--bs-body-color);
    color: var(--bs-white);
    text-align: center;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.mail-template-list {
    max-width: 488px;
}

.mail-template-tree {
    width: 450px;
}

#variableTreeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-indent {
    display: none;
}

/*#variableTreeview .dxbl-btn.dxbl-disabled, .dxbl-btn:disabled {*/
/*    display: none;*/
/*}*/

#variableTreeview .dxbl-expandable-container {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    padding-bottom: 0.75rem;
}

/*.dxbl-btn.dxbl-btn-outline-secondary {*/
/*    display: none;*/
/*}*/


.border-separated > div {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.border-separated > *:last-child {
    border-bottom: none;
}