/* =============================================================================
   BASE / RESET
   ============================================================================= */

body {
}

blockquote {
    font-style: italic;
    padding-left: 30px;
    margin: 1em 0;
    border-left: 4px solid #EDEDED;
}


/* =============================================================================
   SCROLLBARS
   ============================================================================= */

div::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.overflow-y-scroll::-webkit-scrollbar {
    width: 0.3rem;
}

.overflow-y-scroll::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-tertiary-darken);
    border-radius: 0.3rem;
}


/* =============================================================================
   TYPOGRAPHY / TEXT UTILITIES
   ============================================================================= */

.font-size-09 h1,
.font-size-09 h2,
.font-size-09 h3,
.font-size-09 h4,
.font-size-09 h5,
.font-size-09 h6,
.font-size-09 p {
    font-size: 0.9em;
}

.no-wrap {
    white-space: nowrap;
}

.text-transform-none {
    text-transform: none !important;
}

.word-wrap-break {
    word-break: break-word;
}

.word-wrap-break-all {
    word-break: break-all;
}

.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-black  { color: black; }

.mud-markdown-error {
    white-space: normal !important;
}


/* =============================================================================
   LAYOUT / SIZING UTILITIES
   ============================================================================= */

.height-100p     { height: 100%; }
.height-100vh    { height: 100vh; }
.height-400p     { height: 400px; }
.min-height-400p { min-height: 400px; }

.width-100p { width: 100%; }
.width300   { width: 300px; }

.m-100px { max-width: 100px !important; }
.m-80px  { max-width: 80px !important; }

.resource-min-width { min-width: 250px !important; }
.caption-min-width  { text-align: left; min-width: 120px; }
.numeric-min-width  { width: 40%; }

.custom-btn-width     { width: 79px; }
.custom-btn-height-40 { height: 40px; }


/* =============================================================================
   STICKY / POSITIONED UTILITIES
   ============================================================================= */

.sticky-top {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

.sticky-bottom {
    position: absolute;
    bottom: 0;
    left: 52px;
    right: 0;
    top: unset !important;
    margin: 4px;
    z-index: 20;
}

.alert-sticky-top {
    position: sticky;
    top: 0;
}

.alert-sticky-bottom {
    position: sticky;
    bottom: 0;
}

.alert-sticky-top.mud-alert-text-error,
.alert-sticky-bottom.mud-alert-text-error {
    background-color: rgb(252, 243, 242);
}

.alert-sticky-top.mud-alert-text-warning,
.alert-sticky-bottom.mud-alert-text-warning {
    background-color: rgb(251, 245, 242);
}


/* =============================================================================
   VISIBILITY UTILITIES
   ============================================================================= */

.visible-on-hover {
    visibility: hidden;
}

.mud-table-row:hover .visible-on-hover,
.cursor-pointer:hover .visible-on-hover,
.visible-on-hover-activator:hover .visible-on-hover,
.visible-on-hover:hover {
    visibility: visible;
}

.faded-out {
    opacity: 0.6;
}


/* =============================================================================
   ANIMATIONS / KEYFRAMES
   ============================================================================= */

/* Assistant bounce */
.assistant-bounce:first-of-type {
    animation: assistant-bounce 1s infinite;
    transition: none;
}

@keyframes assistant-bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* Assistant slide down */
.assistant-slide-down {
    animation: assistant-slide-down 1s;
}

@keyframes assistant-slide-down {
    0% {
        transform: translateY(-50%);
        opacity: 0;
        margin-top: -20px;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        margin-top: 0;
    }
}

/* Shake / hit-here */
.hithere {
    animation: hithere 1.5s ease infinite;
}

@keyframes hithere {
    30%      { transform: scale(1.1); }
    40%, 60% { transform: rotate(-8deg) scale(1.1); }
    50%      { transform: rotate(8deg) scale(1.1); }
    70%      { transform: rotate(0deg) scale(1.1); }
    100%     { transform: scale(1); }
}

/* Bounce (alert icon) */
.bounce { animation: alert-bounce-icon-anim 2s ease infinite; }

@keyframes alert-bounce-icon-anim {
    70%  { transform: translateY(0%); }
    80%  { transform: translateY(-15%); }
    90%  { transform: translateY(0%); }
    95%  { transform: translateY(-7%); }
    97%  { transform: translateY(0%); }
    99%  { transform: translateY(-3%); }
    100% { transform: translateY(0); }
}

/* Rotation */
@keyframes rotating {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.rotate-Intermittent {
    animation: rotating 1s linear infinite;
}


/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */

fieldset:not(.mud-input-outlined-border) {
    padding: 1em;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Align outlined input label: Codebeam does not inherit global dense styles */
.mud-input-label-outlined {
    transform: translate(14px, 12px) scale(1);
}

.mud-input-root-outlined {
    padding-top: 11.5px !important;
    padding-bottom: 11.5px !important;
}

.hide-adornment .mud-input-adornment { display: none; }

.mud-input-adornment-end-extended {
    padding-left: 8px;
    padding-right: 8px;
}

/* Force the input container inline when parent is inline */
.mud-input-control.d-inline > .mud-input-control-input-container {
    display: inline-block;
}

.select-input-reason { max-width: 230px; }

.select-input-reason div div {
    white-space: nowrap;
    display: block;
    overflow: hidden;
}

.select-reason, .text-reason { margin: unset !important; }

.custom-adornment-text .mud-input-adornment-text {
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    height: 25px;
    margin-left: 10px;
    margin-right: -14px;
    color: var(--mud-palette-success-text);
    --mud-ripple-color: var(--mud-palette-success-text);
    background-color: var(--mud-palette-primary);
    padding: 8px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mud-default-borderradius);
}

.enum-select-icon-medium .mud-icon-size-medium {
    display: flex !important;
    height: unset;
}


/* =============================================================================
   BUTTONS
   ============================================================================= */

.mud-button {
    padding: 8px 15px;
}

.mud-button-outlined {
    border-width: 2px !important;
    background: var(--mud-palette-surface);
}

.default-filled-btn {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-radius: var(--mud-default-borderradius) !important;
}


/* =============================================================================
   ICONS
   ============================================================================= */

.mud-svg-icon {
    vertical-align: middle;
}

.fi,
.fi.mud-icon-size-medium {
    height: 20px;
    width: 27px;
}

.fi.mud-icon-size-small {
    height: 16px;
    width: 21px;
}

.fi.mud-icon-size-large {
    height: 30px;
    width: 40px;
}


/* =============================================================================
   ALERTS
   ============================================================================= */

.mud-alert-text-success {
    border: 1px solid var(--mud-palette-success-darken);
}

.mud-alert-text-warning {
    border: 1px solid var(--mud-palette-warning-darken);
}

.mud-alert-text-error {
    border: 1px solid var(--mud-palette-error-darken);
}

.banner .mud-alert-message { padding: 4px 0 !important; }
.banner .mud-alert-icon    { padding: 4px 0 !important; }


/* =============================================================================
   BADGES
   ============================================================================= */

.mud-badge.mud-badge-bordered {
    border-width: 1px !important;
}

.small-badge .mud-icon-badge {
    font-size: 10px !important;
}

.small-badge {
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 3px 3px !important;
}


/* =============================================================================
   POPOVERS / TOOLTIPS
   ============================================================================= */

.mud-popover-bordered {
    border-left: 4px solid var(--mud-palette-primary);
}

.mud-popover-bordered.mud-popover-tooltip:after {
    border-color: var(--mud-palette-primary) transparent transparent transparent;
    margin-right: 3px;
}

.mud-popover-short > div {
    overflow-y: auto !important;
    max-height: 500px !important;
}

div.mud-popover-short > div::-webkit-scrollbar {
    width: 5px;
}

.mud-popover-tooltip:after {
    content: "";
    position: absolute;
    border-width: 6px;
    border-style: solid;
    border-color: transparent;
    border-top-color: inherit;
    border-color: var(--mud-palette-surface) transparent transparent transparent;
}

.mud-popover-tooltip.mud-popover-anchor-bottom-left.mud-popover-top-left:after {
    bottom: 100%;
    left: 15px;
    transform: rotate(180deg);
}

.mud-popover-tooltip.mud-popover-anchor-center-right.mud-popover-top-left {
    margin-top: -20px;
}

.mud-popover-tooltip.mud-popover-anchor-center-right.mud-popover-top-left:after {
    right: 100%;
    top: 15px;
    transform: rotate(90deg);
}

.mud-popover.width-auto {
    max-width: unset !important;
    width: auto;
}


/* =============================================================================
   NAVIGATION
   ============================================================================= */

.mud-nav-item:hover:not(.disable-link):not(.active),
.mud-nav-item:hover:not(.disable-link):not(.active) svg {
    color: var(--mud-palette-primary) !important;
}

/* Nested items */
.disable-link > a.mud-nav-link {
    pointer-events: none;
    cursor: default;
}

.disable-link > a.mud-nav-link:hover {
    color: inherit;
    background: none !important;
}

.disable-link > a.mud-nav-link .mud-nav-link {
    pointer-events: auto;
}

.navigation-level-1 .mud-nav-link-text {
    padding-inline-start: 14px;
}


/* =============================================================================
   SELECT / LIST
   ============================================================================= */

.mud-list-item-extended .mud-list-subheader-extended {
    color: var(--mud-palette-text-secondary);
    font-weight: bold;
}

.mud-list-item-extended {
    cursor: pointer;
    font-size: 1rem;
}

/* Force default colours when default applied over coloured chip (in MudSelectExtended) */
.mud-chip-filled.mud-chip-color-default {
    color: var(--mud-palette-text-primary) !important;
    background-color: var(--mud-palette-action-disabled-background) !important;
    --mud-ripple-opacity: var(--mud-ripple-opacity-secondary) !important;
}


/* =============================================================================
   EXPANSION PANELS
   ============================================================================= */

.mud-expand-panels-subtle .mud-expand-panel,
.mud-expand-panels-subtle .mud-expand-panel.mud-panel-expanded {
    margin: 0;
}

.mud-expand-panel,
.mud-expand-panel.mud-panel-expanded {
    margin-top: 8px;
}

.mud-expand-panel:not(.mud-expand-panels-subtle > .mud-expand-panel) {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

.mud-expand-secondary {
    background-color: var(--mud-palette-background);
}

.mud-expand-secondary:first-child {
    margin-top: 0;
}


/* =============================================================================
   DIVIDERS
   ============================================================================= */

.mud-divider-vertical.mud-divider-middle {
    margin: 0.7em 0;
}

.mud-divider.mud-divider-subtle {
    opacity: 0.6;
}

.underline {
    border-bottom: 1px solid #d3d3d3;
}

/* Horizontal divider with centred text */
.divider-text {
    overflow: hidden;
    text-align: center;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    flex: none;
}

.divider-text.light {
    color: var(--mud-palette-lines-inputs);
}

.divider-text::before,
.divider-text::after {
    background-color: var(--mud-palette-lines-inputs);
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.divider-text::before {
    right: 0.5em;
    margin-left: -50%;
}

.divider-text::after {
    left: 0.5em;
    margin-right: -50%;
}


/* =============================================================================
   BREADCRUMBS
   ============================================================================= */

.mud-breadcrumb-item {
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
}

.mud-breadcrumb-item.mud-disabled {
    text-decoration: unset;
}


/* =============================================================================
   TABLES / DATA GRID
   ============================================================================= */

.mud-table.mud-table-hide-toolbar .mud-table-toolbar {
    display: none !important;
}

.hide-toolbar .mud-toolbar {
    display: none;
}

.toolbar-d-none .mud-toolbar { display: none !important; }

.table-dense .editable.mud-table-cell { padding: 4px !important; }
.table-dense .editable.mud-table-cell * { font-size: 14px !important; }

.mud-data-grid-columns-panel {
    left: unset !important;
    max-width: 400px !important;
    right: 0;
    margin-right: 40px;
}

/* Grid column colour groups */
.col-colour .grid-group-A { background-color: #E9F4F87F; }
.col-colour .grid-group-B { background-color: #EEE9F87F; }
.col-colour .grid-group-C { background-color: #F8F6E97F; }
.col-colour .grid-group-D { background-color: #EAF8E97F; }
.col-colour .grid-group-E { background-color: #F8E9E97F; }
.col-colour .grid-group-F { background-color: rgba(224, 242, 241, 0.5); }

.dark-theme .col-colour .grid-group-A { background-color: #2D3A3E7F; }
.dark-theme .col-colour .grid-group-B { background-color: #38313E7F; }
.dark-theme .col-colour .grid-group-C { background-color: #3E3D2D7F; }
.dark-theme .col-colour .grid-group-D { background-color: #2E3E2D7F; }
.dark-theme .col-colour .grid-group-E { background-color: #3E2D2D7F; }
.dark-theme .col-colour .grid-group-F { background-color: rgba(30, 52, 50, 0.5); }

.row-colour .primary   { background-color: rgba(89, 74, 226, 0.6) !important; }
.row-colour .secondary { background-color: rgba(156, 39, 176, 0.6) !important; }
.row-colour .success   { background-color: rgba(76, 175, 80, 0.6) !important; }
.row-colour .info      { background-color: rgba(33, 150, 243, 0.6) !important; }
.row-colour .warning   { background-color: rgba(255, 152, 0, 0.6) !important; }
.row-colour .error     { background-color: rgba(244, 67, 54, 0.6) !important; }
.row-colour .dark      { background-color: rgba(66, 66, 66, 0.6) !important; }

/* Quantitative / qualitative cell colours */
.cell-quant { background: var(--mud-palette-primary); }
.cell-quant * { color: var(--mud-palette-secondary) !important; }
.cell-qual { background: var(--mud-palette-secondary); }
.cell-qual * { color: var(--mud-palette-primary) !important; }

/*Added !important for overriding bg-color of odd row in grid*/
.pink.lighten-3, .pink.lighten-3 td { background-color: #f48fb1 !important; }

.custom-toolbar .mud-toolbar-gutters { padding-left: unset !important; }


/*Campaign Table / Fixes for blinking table */
.campaign-table {
    height: calc(100vh - 50px) !important;
    overflow: hidden;
}
.campaign-table .mud-table-container {
    height: calc(100vh - 50px) !important;
    overflow-y: scroll;
}

/* =============================================================================
   DATA LIST
   ============================================================================= */

.data-list .mud-list-item,
.data-list .mud-list-item-extended {
    padding-top: 0;
    padding-bottom: 0;
}

.data-list .mud-list-item-text,
.data-list .mud-list-item-text-extended {
    padding-top: 0;
    padding-bottom: 0;
    margin: 1px;
}

.data-list .mud-list-item-text > p,
.data-list .mud-list-item-text-extended > p {
    font-size: 0.9em;
}


/* =============================================================================
   DIALOGS
   ============================================================================= */

.split-scrollable-dialog {
    max-height: 70vh;
}

.split-scrollable-dialog .mud-splitter-content {
    max-height: 65vh;
    overflow-y: auto;
}

.split-scrollable-dialog.split-scrollable-dialog__grey-1 .mud-splitter .mud-splitter-content:nth-child(2),
.split-scrollable-dialog.split-scrollable-dialog__grey-2 .mud-splitter .mud-splitter-content:nth-child(3) {
    background: var(--mud-palette-background-gray);
    border-radius: var(--mud-default-borderradius)
}

.split-scrollable-dialog.split-scrollable-dialog__mist-1 .mud-splitter .mud-splitter-content:nth-child(2),
.split-scrollable-dialog.split-scrollable-dialog__mist-2 .mud-splitter .mud-splitter-content:nth-child(3) {
    background: var(--mud-palette-background);
    border-radius: var(--mud-default-borderradius);
}

.candidate-dialog .mud-dialog-actions { justify-content: flex-start !important; }


/* =============================================================================
   LAYOUT — MUD LAYOUT / OVERLAYS
   ============================================================================= */

.mud-layout-full-screen .mud-main-content {
    padding: 0 !important;
    margin: 0 !important;
}

.mud-layout-full-screen .full-screen-hidden {
    display: none !important;
}

.mud-overlay.overlay-blur {
    backdrop-filter: blur(0.75px);
}


/* =============================================================================
   HEADER / APP BAR
   ============================================================================= */

/* Search in header */
.header-search .mud-select {
    max-width: 200px;
}

.header-search .mud-input,
.header-search .mud-input:focus,
.header-search .mud-input:hover {
    background: var(--mud-palette-background-gray);
    margin-bottom: 10px;
    border-radius: 40px;
}

.header-search fieldset {
    border: none !important;
}

.header-search input {
    padding: 2px !important;
}

/* Notice bar */
.notice-app-bar {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 25;
    top: 56px;
    flex-direction: row;
    height: 30px;
    width: 100vw;
    background: rgba(50, 153, 255, 1);
}

.notice-app-bar * { color: white; }
.notice-message   { font-size: 9pt; }
.notice-date      { height: 22px !important; }

.notice-feedback .mud-icon-root.mud-svg-icon { font-size: 11pt; }

.notice-message a {
    text-decoration: underline;
    font-size: 9pt;
    color: var(--mud-palette-appbar-text) !important;
}

.notice-feedback {
    height: 25px;
    font-size: 9pt;
}


/* =============================================================================
   SIDE MENU / DRAWER
   ============================================================================= */

.mud-main-content,
aside {
    --mud-drawer-width-left: 300px;
}

aside .mud-drawer-content .side-menu{
    height: 100%;
    overflow-y: auto;
}

.mud-drawer--closed .side-menu .mud-nav-link .mud-nav-link-expand-icon {
    margin-left: -5px;
}


/* =============================================================================
   STATUS BUTTONS (Tracker)
   ============================================================================= */

.status-buttons .mud-button {
    margin: 0 2px;
    font-weight: 600;
    border-width: 2px;
}

.status-buttons .mud-button:hover {
    border-width: 2px;
}

.status-buttons .mud-button.light-outline {
    border-width: 1px;
}

.status-buttons .button-dropdown-options {
    border-radius: 3px;
    padding: 3px;
}


/* =============================================================================
   CHANGE STATUS BUTTONS (Rewards)
   ============================================================================= */

.change-status-buttons .mud-button,
.change-status-buttons .mud-menu {
    height: 100%;
}

.change-status-buttons-list .mud-tooltip-inline {
    display: contents;
}


/* =============================================================================
   DROPDOWN (Custom hover dropdown)
   ============================================================================= */

.button-dropdown-options {
    position: relative;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 0 3px 3px 0;
    display: inline-block;
}

.button-dropdown-options-body {
    display: none;
    position: absolute;
    right: 0px;
    min-width: 200px;
    top: 100%;
    bottom: auto;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.button-dropdown-options:hover .button-dropdown-options-body {
    display: block;
}

.button-dropdown-options:hover .button-dropdown-options-body.flip {
    top: auto;
    bottom: 100%;
}


/* =============================================================================
   VISUAL AUTHENTICATED OVERLAY
   ============================================================================= */

.visual-authenticated button {
    cursor: not-allowed !important;
}

.visual-authenticated {
    position: relative;
}

.visual-authenticated:after {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(200, 200, 200, 0.75);
    cursor: not-allowed;
    text-align: center;
    font-weight: bold;
    color: #000;
}

.visual-authenticated__low:after    { background-color: rgba(200, 200, 200, 0.25); }
.visual-authenticated__medium:after { background-color: rgba(200, 200, 200, 0.5); }


/* =============================================================================
   ATOMIC UPDATES
   ============================================================================= */

.atomic-update__Success:after,
.atomic-update__InProgress:after,
.atomic-update__Error:after {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    left: -15px;
    top: 10px;
    background-position: center;
    background-size: contain;
}

.atomic-update__Success:after {
    background-image: url(/img/Icons/AtomicUpdate_Success.gif);
}

.atomic-update__InProgress:after {
    background-image: url(/img/Icons/AtomicUpdate_InProgress.gif);
}

.atomic-update__Error:after {
    background-image: url(/img/Icons/AtomicUpdate_Error.gif);
}


/* =============================================================================
   BLOCKQUOTES (Coloured variants)
   ============================================================================= */

blockquote.blockquote-Error,
blockquote.blockquote-Warning,
blockquote.blockquote-Info,
blockquote.blockquote-Success,
blockquote.blockquote-Normal {
    border-left: 4px solid var(--mud-palette-error);
    background-color: var(--mud-palette-background);
    padding: 0.5em 0.8em;
    margin: 1em 0;
    border-radius: var(--mud-default-borderradius);
}

blockquote.blockquote-Warning { border-left-color: var(--mud-palette-warning); }
blockquote.blockquote-Info    { border-left-color: var(--mud-palette-info); }
blockquote.blockquote-Success { border-left-color: var(--mud-palette-success); }
blockquote.blockquote-Normal  { border-left-color: var(--mud-palette-text-secondary); }


/* =============================================================================
   TIMELINE
   ============================================================================= */

/* Custom timeline content width */
.phase-timeline.mud-timeline-vertical.mud-timeline-position-alternate::before {
    left: calc(40% - 1px);
}

.phase-timeline.mud-timeline-vertical .mud-timeline-item .mud-timeline-item-content {
    max-width: calc(40% - 48px);
}

.phase-timeline.mud-timeline-vertical .mud-timeline-item .mud-timeline-item-opposite {
    max-width: calc(60% - 48px);
}


/* =============================================================================
   CAMPAIGNS / DISTRIBUTION
   ============================================================================= */

.distribution-dialog {
    height: 75vh;
    overflow-y: auto;
    max-width: calc(100% - 40px) !important;
}

.distribution-panel {
    height: calc(75vh - 180px);
    max-width: 100% !important;
    overflow-y: scroll;
}


/* =============================================================================
   COMMENTS
   ============================================================================= */

.comment-menu {
    min-width: 430px;
    max-height: 650px;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    display: flex;
}

.comment-menu > div {
    width: 100%;
}

.inline-comment-avatar {
    width: 30px !important;
    height: 30px !important;
}

.inline-comment-action {
    display: flex;
    gap: 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 22px;
}

.inline-comment-btn-add {
    bottom: 0;
    right: 0;
    height: 22px;
}


/* =============================================================================
   REQUEST APPROVAL
   ============================================================================= */

.request-approval-inline-wrapper {
    position: relative;
    display: inline-block;
}

.request-approval-button {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
}


/* =============================================================================
   AUTOMATION RULES
   ============================================================================= */

.automation-rule-container {
    height: calc(85vh - 160px);
    overflow-y: auto;
}


/* =============================================================================
   AUTOCOMPLETE
   ============================================================================= */

.autocomplete-root {
    position: relative;
}

.autocomplete-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    z-index: 1500;
    border-radius: 14px;
}

.autocomplete-chip {
    margin: 4px;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}


/* =============================================================================
   MATERIAL CARD
   ============================================================================= */

.material-card .material-card-header {
    background: var(--mud-palette-primary);
    color: white;
}


/* =============================================================================
   LEFT BORDER ACCENT
   ============================================================================= */

.left-border::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--mud-palette-primary);
}

.mud-paper:not(.mud-paper-square).left-border::after {
    border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);
}

/* =============================================================================
   THIRD-PARTY INTEGRATIONS
   ============================================================================= */

/* Marker.io feedback widget */
.marker-app iframe#feedback-button {
    max-height: 32px !important;
    max-width: 130px !important;
}

/* Zauber RTE */
.zauber-rte { overflow: unset !important; }

/* Latest activity */
.latest-activity-btn utc-to-local, .humanize-date {
    font-size: smaller;
}

.default-filled-btn {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

.bg-surface {
    background-color: var(--mud-palette-surface);
}

.bg-background {
    background: var(--mud-palette-background) !important;
}