@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

@import "../imports/spiceloader.css";
@import "./imports/spiceeditor.css";
@import "../imports/spicecalendar.css";
@import "../imports/spicemaps.css";
@import "../imports/spicehtmltext.css";
@import "./imports/spicecdk.css";
@import "./imports/spicetables.css";
@import "./imports/spicescrollbar.css";
@import "../imports/spicetimeline.css";
@import "./imports/spicepagebuilder.css";
@import "../imports/bpmn.css";
@import "../imports/spiceanimations.css";

:root {
    --color-white: white;
    --color-grey-1: #fafafa;
    --color-grey-3: #f3f3f3;
    --color-gray-4: #ecebea;
    --color-grey-5: #dddbda;
    --color-grey-7: #aaaaaa;
    --color-grey-9: #706e6b;
    --color-grey-13: #080707;
    --brand-background-primary: #fafaf9;
    --brand-primary: #f72121;
    --brand-primary-active: #b3191e;
    --brand-primary-transparent: rgba(155, 155, 155, .1);
    --brand-accessible: #f72121;
    --brand-accessible-active: #b3191e;
    --brand-header-contrast-cool: #a61419;
    --brand-text-link: #1f1f1f;
    --color-background-inverse: #751b1e;
    --color-border-inverse: #751b1e;
    --color-background-success: #4bca81;
    --color-background-success-dark: #04844b;
    --color-text-link-active: #222;
    --color-progressbar_item-completed: #080707;
    --color-background-alt-inverse: #002D31;
    --color-border-brand: #f72121;
    --slds-c-button-brand-color-background: #f72121;
    --slds-c-button-brand-color-border: var(--color-grey-5);
    --slds-c-button-neutral-color-background-hover: #f72121;
    --slds-c-button-color-background-hover: #f72121;
    --slds-c-button-brand-color-border-hover: #ffffff;
    --slds-c-button-brand-color-background-active: #f72121;
    --slds-c-button-brand-color-border-active: #ffffff;
    --slds-c-button-brand-color-background-hover: #f72121;
    --sds-c-input-shadow-focus: 0 0 3px #f72121;
    --sds-c-textarea-shadow-focus: 0 0 3px #f72121;
    --slds-c-input-color-border: #c9c9c9;
    --slds-c-select-color-border: #c9c9c9;
    --slds-g-color-border-base-4: var(--slds-g-color-border-base-1);
    --slds-c-select-shadow-focus: 0 0 3px #f72121;
    --slds-c-button-text-color-hover: #ffffff;
    --slds-c-toast-text-color: #ffffff;
    --sds-c-icon-color-foreground: #ffffff;
    --slds-c-slider-track-color-background: #f72121;
    --spice-alert-color-error: #ea001e;
    --spice-alert-color-info: #0176d3;
    --spice-alert-color-warning: #fe9339;
    --spice-alert-color-success: #2e844a;
    --spice-alert-color-custom: #86367A;
    --slds-c-textarea-color-border-focus: var(--color-border-brand);
    --slds-g-color-brand-base-60: var(--color-border-brand);
    --slds-c-checkbox-mark-color-foreground: var(--brand-primary);
    --slds-c-checkbox-shadow: var(--brand-primary);
    --slds-c-checkbox-shadow-focus: var(--brand-primary);
    --slds-c-button-shadow-focus: var(--color-grey-9);
    --slds-g-color-brand-base-50: var(--color-border-brand);
    --slds-c-input-text-color: #000000;
    --slds-c-input-text-color-focus: #000000;
    --slds-g-shadow-outline-focus-1: 0 0 3px var(--brand-primary);
    --slds-c-radio-mark-color-foreground: var(--brand-primary);
    --slds-c-radio-shadow-focus: 0 0 3px var(--brand-primary);
    --slds-c-slider-thumb-color-foreground: var(--brand-primary);
    --slds-c-slider-thumb-color-foreground-active: var(--color-grey-9);
    --slds-c-slider-thumb-color-foreground-focus: var(--color-grey-9);
    --slds-c-slider-thumb-color-foreground-hover: var(--color-grey-7);
}

html {
    font-family: 'Titillium Web', sans-serif;
    background-color: var(--color-grey-1);
}

a {
    color: var(--brand-text-link);
}

/* hide spin buttons in number fields */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    display: none;
}

/* Keeps the <input> elements of the login form unchanged (white) also when its values are autofilled by the browser. */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

/* Separator / horizontal line at the beginning of a timeline activity. */
.spiceActivitiyTimelineHeader::before {
    position: absolute;
    right: 0;
    top: 50%;
    left: 160px;
    margin-top: -1px;
    border-bottom: 1px solid rgb(216, 221, 230);
    content: ' ';
}

/* strombo: ??? */
.spice-fieldbody {
    /*padding: 5px 0*/;
    min-height: 29px;
}

/* Keep fields when in display mode in the same size as when in edit mode. */
.spice-fieldminheight {
    /*padding: 5px 0*/;
    min-height: 34px;
}

/* filter panel: position it to the right side and overlay the record list. */
object-listview-filter-panel {
    right: 0;
    z-index: 90;
}

/* filter panel: expand it to the full height of the record list and give it a shadow on the left side to differentiate it from the record list in the background. */
object-listview-filter-panel .slds-panel {
    height: 100%; /* strombo: height does nothing because overwritten by inline style */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .40)
}

/* aggregates panel: position it to the right side and overlay the record list. */
object-listview-aggregates-panel {
    right: 0;
    z-index: 90;
}

/* aggregates panel: expand it to the full height of the record list and give it a shadow on the left side to differentiate it from the record list in the background. */
object-listview-aggregates-panel .slds-panel {
    height: 100%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .40)
}

/* in non-tabbed navigation menu: horizontal arrangement of text and icon. */
global-navigation-menu-item li.slds-dropdown-trigger, global-navigation-menu-more li.slds-dropdown-trigger {
    display: flex;
}

/* SLDS OVERRIDES */

/* animate icon on collapsible tab */
/* ToDo: replace by angular animation */
.slds-section__title-action-icon {
    transition: 0.5s;
}

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

.slds-text-linethrough{
    text-decoration: line-through;
}

/* a 1 pixel gap between tab and bold horizontal line. */
.slds-context-bar__item:before {
    bottom: 1px;
}

/* a red border for the invalid input fields. */
.slds-box--border.slds-has-error, .slds-box_border.slds-has-error {
    background-color: #fff;
    border-color: #c23934;
    box-shadow: #c23934 0 0 0 1px inset;
    background-clip: padding-box;
}

/* strombo: ??? */
.slds-context-bar__dropdown-trigger .slds-dropdown:before {
    background-color: transparent;
}

/* background color of vertical navigation/menu items */
/* strombo: ??? ... original slds is brand-primary-transparent, not #ddd */
.slds-nav-vertical__item.slds-is-active:before, .slds-nav-vertical__item:hover:before {
    background: #ddd;
}

/* capitalize first letter in buttons */
.slds-button span {
    display: inline-block;
}
.slds-button span::first-letter {
    text-transform: capitalize;
}

.slds-button:hover .slds-button__icon{
    fill: var(--color-white);
}

/* align text justified */
/* not a slds class, but related to slds classes slds-text-align_left, slds-text-align_center or slds-text-align_right */
.slds-text-align_justify, .slds-text-align--justify {
    text-align: justify;
}

/* maximize element height to 100 % */
/* not a slds class, but related to slds class slds-size_full */
.slds-height_full {
    height: 100%;
}

/* helper styles for absolute elements */
.slds-is-absolute__top {
    position: absolute;
    top: 0;
}

.slds-is-absolute__bottom {
    position: absolute;
    bottom: 0;
}

/* for illustrations */
.slds-illustration .slds-illustration__stroke-primary {
    stroke: #aaa;
}
.slds-illustration .slds-illustration__fill-primary {
    fill: #bbb;
}
.slds-illustration .slds-illustration__stroke-secondary {
    stroke: #ccc;
}
.slds-illustration .slds-illustration__fill-secondary {
    fill: #eee;
}

/* override for the input icon group */
.slds-input__icon-group_right {
    top: .5rem;
}

/* desktop view only starting from medium width */
@media (min-width: 48em){
    .spice-medium-height-full {
        height: 100%;
    }
}

/* mobile view small */
@media (max-width: 48em) {
    /* responsive tables reduce padding */
    .slds-max-medium-table--stacked-horizontal tr > td:first-child,
    .slds-max-medium-table_stacked-horizontal tr > td:first-child,
    .slds-max-medium-table--stacked-horizontal td,
    .slds-max-medium-table_stacked-horizontal td,
    .slds-max-medium-table--stacked-horizontal tr > td:last-child,
    .slds-max-medium-table_stacked-horizontal tr > td:last-child {
        padding: .5em;
    }

    .slds-global-header__item {
        padding: 0 .5rem;
    }

    .slds-global-header.slds-p-left_medium {
        padding-left: .5rem;
    }

    .slds-global-header__item:has(global-user) {
        padding-left: 0;
    }

    .slds-tabs_path__item, .spice-stage-items-container, .spice-stage-sum-container {
        min-width: 17rem;
    }
}

/* in tabbed navigation: emphasize the active sub tab */
.slds-sub-tabs__item.slds-active, .slds-sub-tabs__item.slds-is-open {
    background: rgba(155, 155, 155, .1) !important;
}

/* makes the placeholder of a <input> or <select> field distinguishable from the value(s) */
::placeholder {
    font-style: italic;
    opacity: 1; /* for firefox, because all placeholders in firefox have an opacity value applied to them */
}

/* spicetags */
.spice-taglist li {
    display: inline;
}
.spice-taglist {
    margin: 0 -0.5rem -0.5rem 0;
}
.spice-taglist span.slds-badge {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
}

/* position an element vertically centered */
.spice-vertically-centered {
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

/* in tabbed navigation: make tab width suitable to the content (text and dropdown button) */
.slds-context-bar__item_tab {
    width: initial;
}

/* tree items: stronger emphasis and left border in contrast color (instead brand primary) */
.slds-tree [role=treeitem][aria-selected=true] > .slds-tree__item {
    background: var(--color-gray-4);
    box-shadow: var(--color-border-brand) 4px 0 0 inset;
}
/* set indovodual paddings for the tree */
[aria-level="1"]>.slds-tree__item{padding-left:0rem}
[aria-level="2"]>.slds-tree__item{padding-left:1rem}
[aria-level="3"]>.slds-tree__item{padding-left:2rem}
[aria-level="4"]>.slds-tree__item{padding-left:3rem}
[aria-level="5"]>.slds-tree__item{padding-left:4rem}
[aria-level="6"]>.slds-tree__item{padding-left:5rem}
[aria-level="7"]>.slds-tree__item{padding-left:6rem}
[aria-level="8"]>.slds-tree__item{padding-left:7rem}
[aria-level="9"]>.slds-tree__item{padding-left:8rem}

/* for tables: resizable columns */
.slds-table th.slds-resizable {
    overflow: hidden;
    resize: horizontal;
    min-width: 75px;
}

.slds-table--header-fixed thead th, .slds-table--header-fixed tfoot th {
    height: 2rem;
}

/* SLDS keeps the head of a fixed header table in the flow and expects a .slds-cell-fixed inside every cell to hold
   it in place. Sticking the cell itself is what the built stylesheet does, so the class works on a plain thead. */
.slds-table--header-fixed thead th, .slds-table_header-fixed thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--color-grey-5);
}

.spice-collapsible-tab-grow {
    display: block;
    height: 100%;
}

.spice-collapsible-tab-grow > div.slds-section {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
}

.spice-collapsible-tab-grow > div.slds-section > :nth-child(2) {
    -webkit-box-flex: 1;
    flex-grow: 1;
    min-height: 0;
}

/* mark an element as selected (not only slds boxes) */
.spice-box-is-selected {
    background-color: #e6e5e5;
    box-shadow: 0 0 1px #777;
    border-radius: .2rem;
}

/* arrange a button group vertical */
.spice-button-group-vertical .slds-button:first-child:not(:last-child) {
    border-radius: 0.25rem 0.25rem 0 0;
}
.spice-button-group-vertical .slds-button:last-child:not(:first-child) {
    border-radius: 0 0 0.25rem 0.25rem;
}
.spice-button-group-vertical .slds-button:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.spice-button-group-vertical .slds-button {
    margin-bottom: -1px;
    display: block;
}
.spice-button-group-vertical .slds-button:last-child {
    margin-bottom: 0;
}
.spice-button-group-vertical .slds-button+.slds-button {
    margin-left: 0;
}

/* radio button groups: white color for icons in radio buttons */
.slds-radio_button-group .slds-radio_button [type=radio]:checked + label svg,
.spice-button-icon-white.slds-button--icon svg,
.spice-button-icon-white.slds-button_icon svg {
    fill: var(--color-white);
}

.spice-button-icon-light.slds-button--icon,
.spice-button-icon-light.slds-button_icon {
    color: var(--color-grey-5);
}

.spice-button-icon-light.slds-button--icon:hover,
.spice-button-icon-light.slds-button_icon:hover {
    color: var(--color-grey-9);
}

/* required for replaced colors to manage design */
.slds-button {
    color: var(--color-grey-9);
}

/* focus color in brand when button is not disabled */
.slds-button--icon:enabled:focus,
.slds-button--icon:enabled:hover,
.slds-button--icon-border-filled:enabled:focus,
.slds-button--icon-border-filled:enabled:hover {
    color: var(--slds-c-button-text-color-hover);
}

.slds-button.slds-button--brand, .slds-button.slds-button_brand {
    color: var(--color-white);
}

/* add a class that he button does not turn to highlight color when hovering and focus */
.slds-button-no-focus:focus,
.slds-button-no-focus:hover{
    background-color: inherit;
}

.slds-button:hover .slds-icon,
.slds-button:focus .slds-icon,
.slds-button.slds-is-pressed .slds-icon{
    fill: var(--color-white);
}

/* disabled fill color if in disabled element */
.slds-is-disabled .slds-icon_container.slds-icon{
    fill: var(--slds-g-color-neutral-base-80, #c9c9c9)
}

/* disabled text color */
.slds-dropdown__item>a.slds-is-disabled a{
    color: var(--slds-g-color-neutral-base-80, #c9c9c9)
}


/* fix for scoped tabs when the second tba is selected */
.slds-tabs--scoped__item, .slds-tabs_scoped__item{
    margin-bottom: -1.1px;
}

/* overwrite path for welcome mat*/
.slds-welcome-mat__info{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow:auto;
    padding:1rem 3rem 7.75rem;
    color:#00396b;
    background-image: none;
    background-position:bottom center;
    background-repeat:no-repeat;
    background-size:contain;
    background-color:#cae6f1;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}


.slds-dropdown-trigger > .slds-button:not(.slds-button_stateful):hover,
.slds-dropdown-trigger > .slds-button:not(.slds-button_stateful):focus,
.slds-dropdown-trigger > .slds-button:not(.slds-button_stateful):active {
    color: var(--color-border-brand);
    background: var(--brand-primary);
    -webkit-box-shadow: none;
    box-shadow: none;
}

/** overwrite the color for focus and active **/
.slds-dropdown-trigger > .slds-button:not(.slds-button_stateful):focus,
.slds-dropdown-trigger > .slds-button:not(.slds-button_stateful):active{
    color: var(--slds-c-button-text-color-hover);
}

/** overwrite dropdown triggers and icon button to not be styled like regular button, excluding the stateful button for the reminders **/
.slds-button--icon:hover,
.slds-button--icon:focus,
.slds-button--icon:active {
    color: var(--slds-c-button-text-color-hover);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.spice-dropdown-mobile .slds-dropdown {
    transform: translate(0, 0) !important;
    position: initial !important;
    min-width: 300px !important;
    max-width: calc(100vw - 2px) !important;
    border: 0 !important;
}

.spice-display-block {
    display: block;
}


.spice-drop-zone {
    position:relative;
    z-index:1;
    width: 100%;
}
.spice-drop-zone article:focus {
    outline: 0;
}
.spice-drop-zone-label {
    opacity:0;
    background:#0070d2;
    top: -20px;
    position: absolute;
    width: 120px;
    height: 20px;
    left: calc(50% - 50px);
    color: #fff;
    border-top-right-radius: .25rem;
    border-top-left-radius: .25rem;
}
.spice-drop-zone-label .slds-media__figure {
    margin: 0 .5rem !important;
}
.spice-drop-zone-actions {
    opacity:0;
    background:#0070d2;
    position:absolute;
    right:0;
    top:0;
}
.spice-drop-zone.slds-is-hovered > .spice-drop-zone-label,
.spice-drop-zone.slds-is-hovered > .spice-drop-zone-actions {
    opacity:1;
    z-index:8000;
}
.spice-drop-zone.slds-is-hovered > .spice-drop-zone-content {
    border:1px solid #1589ee;
}

.spice-hover-display-children:hover .spice-hover-child {
    visibility: visible !important;
}

.spice-hover-display-children .spice-hover-child {
    visibility: hidden !important;
}

.spice-counter{
    height: 28px;
    width: 28px;
    border-radius: 14px;
}

/* general fix for ios devices */
textarea,
input[type="text"],
input[type="button"],
input[type="search"],
input[type="submit"] {
    -webkit-appearance: none;
}

.slds-is-sortable:not(.slds-is-sorted) .slds-th__action:focus .slds-is-sortable__icon {
    display: none !important;
}

.slds-split-view__toggle-button{
    border-color: var(--slds-g-color-border-base-1);
}

.slds-modal__close{
    background-color: transparent;
}

.slds-modal__close .slds-button__icon{
    fill: var(--color-grey-5);
}

.slds-modal__footer .slds-button-group button:not(:first-of-type) {
    border-left: 0;
    margin-left: 0;
}

/** overwrite dropdown action links color, so it is better readable if the brand color is bright **/
.slds-dropdown_actions a,
.slds-dropdown--actions a {
    color: var(--brand-text-link);
}

/* brand color for vertical progress bar */
.slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon svg
{
    fill: var(--brand-primary,#f72121);
}
.slds-progress_vertical .slds-progress__item.slds-has-error:before, .slds-progress_vertical .slds-progress__item.slds-is-active:before, .slds-progress_vertical .slds-progress__item.slds-is-completed:after, .slds-progress_vertical .slds-progress__item.slds-is-completed:before {
    background-color: var(--brand-primary,#f72121);
}

.slds-context-bar {
    border-bottom: 3px solid var(--color-border-brand);
}

.slds-context-bar-progress-bar {
    height: 3px;
    background: #aaa;
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100vw;
}

.slds-context-bar-progress-bar div {
    background: var(--brand-primary);
    transition: width .5s linear;
}

.slds-context-bar__item.slds-is-active:before {
    background: var(--brand-primary);
}

.slds-context-bar__item.slds-is-active, .slds-context-bar__item:not(.slds-no-hover):hover {
    background: var(--color-gray-4);
}

.slds-context-bar__item.slds-is-active {
    background: var(--color-gray-4);
    animation: none;
}

/* the utility bar hardcodes the salesforce blue and offers no css variable to redirect, so the brand is set on the
   rules themselves. Same split as the context bar above: a neutral tint marks the item, the brand color the bar
   underlining the active one. */
.slds-utility-bar__action:focus,
.slds-utility-bar__action:hover,
.slds-utility-bar__action.slds-is-active {
    background: var(--color-gray-4);
}

.slds-utility-bar__action.slds-is-active:after {
    background: var(--brand-primary);
}

/* the brand icon button hardcodes the salesforce blue with no variable to redirect, so it is set here the same way
   the selected icon buttons below already are */
.slds-button_icon-brand {
    background-color: var(--slds-c-button-brand-color-background, #0176d3);
    border-color: var(--slds-c-button-brand-color-background, #0176d3);
}

.slds-button_icon-brand:focus,
.slds-button_icon-brand:hover,
.slds-button_icon-brand:active {
    background-color: var(--slds-c-button-brand-color-background-active, #014486);
    border-color: var(--slds-c-button-brand-color-background-active, #014486);
}

/* a booked activity on the calendar sheet of the time cockpit is set apart from the one bordering it by a hairline
   in the color of the sheet. SLDS carries no white border utility, its four border classes are all light grey */
project-time-cockpit-calendar-activity {
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--color-white);
}


.slds-tabs--default__item.slds-active:after, .slds-tabs--default__item.slds-is-active:after, .slds-tabs_default__item.slds-active:after, .slds-tabs_default__item.slds-is-active:after{
    background-color: var(--brand-primary);
}

.slds-tabs--default__item:hover:after, .slds-tabs_default__item:hover:after{
    background-color: var(--color-grey-9);
}

.slds-docked-composer__header{
    border-bottom-color: var(--brand-primary);
}

.slds-combobox__input.slds-has-focus, .slds-combobox__input:focus{
    border-color:  var(--brand-primary);
}

[role=combobox] input[readonly].slds-has-focus, [role=combobox] input[readonly]:focus, input[readonly][role=combobox].slds-has-focus, input[readonly][role=combobox]:focus,
.slds-combobox__input.slds-has-focus, .slds-combobox__input:focus{
    box-shadow: 0 0 3px var(--brand-primary);
}

.spice-overlay-spinner-container {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.25);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: auto;
    overflow: hidden;
    container-type: size;
}

.spice-overlay-spinner-puck {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 5px 0 #555;
    padding: 0.5rem;
    background-color: #fff;
    color: #080707;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spice-overlay-spinner-puck .cssload-double-torus {
    width: 32px;
    height: 32px;
}

/* the puck itself cancels the request, it swaps the spinner for the cancel icon on hover so it fits any container size */
.spice-overlay-spinner-puck_cancel {
    cursor: pointer;
}

.spice-overlay-spinner-puck__icon {
    display: none;
}

.spice-overlay-spinner-puck_cancel:hover .cssload-container {
    display: none;
}

.spice-overlay-spinner-puck_cancel:hover .spice-overlay-spinner-puck__icon {
    display: block;
}

@container (max-height: 90px) {
    .spice-overlay-spinner-puck {
        width: 32px;
        height: 32px;
        padding: 0.25rem;
    }

    .spice-overlay-spinner-puck .cssload-double-torus {
        width: 20px;
        height: 20px;
    }
}

.spice-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 9000;
}

.child-height-full > * {
    height: 100%;
}

.spice-split-container-splitter {
    left: -8px;
    box-shadow: 0 0 2px;
    padding: 0 2px 2px 2px;
    border-radius: 0 0 2px 2px;
}


.spice-split-container-splitter button {
    border: 0 !important;
    width: 12px !important;
    margin: 0 !important;
}

/* custom alert styles */
.slds-alert_error {
    /* default: #ea001e; */
    --slds-c-alert-color-background:var(--spice-alert-color-error);
}

.slds-alert_info {
    /* default: #0176d3; */
    --slds-c-alert-color-background:var(--spice-alert-color-info);
}

.slds-alert_warning {
    /* default: #514f4d; */
    --slds-c-alert-color-background:var(--spice-alert-color-warning);
}


.slds-alert_success {
/* default: #2e844a; */
    --slds-c-alert-color-background:var(--spice-alert-color-success);
}

.slds-alert_custom {
    /* default: #86367A; */
    --slds-c-alert-color-background:var(--spice-alert-color-custom);
}

.slds-table:not(.slds-no-row-hover) tbody tr:focus>td,
.slds-table:not(.slds-no-row-hover) tbody tr:focus>th,
.slds-table:not(.slds-no-row-hover) tbody tr:hover>td,
.slds-table:not(.slds-no-row-hover) tbody tr:hover>th {
    color: black;
}

.slds-notify_alert,
.slds-notify--alert{
    padding-right: 0.5rem;
}

.slds-app-launcher__tile:hover{
    border-color: var(--brand-primary)
}

.slds-button.slds-button_icon:hover {
    color: var(--brand-primary);
}

.slds-page-header{
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
}

.slds-radio_button [type=radio]:checked+.slds-radio_button__label:hover,
.slds-radio_button [type=radio]:checked+.slds-radio_button__label {
    background-color: var(--brand-primary);
}

.slds-radio_button__label:hover {
    background-color: var(--brand-primary);
}

.slds-grow {
    min-width: 0;
    min-height: 0;
}

.slds-icon-text-superlight{
    /*! @css-var-fallback fill */
    --slds-c-icon-color-foreground:var(--color-gray-4, #ecebea);
}

.spice-sticky-top, .spice-sticky-bottom , .spice-sticky-left , .spice-sticky-right {
    position: sticky;
    z-index: 1;
}

.spice-sticky-top {
    top: 0;
}

.spice-sticky-bottom {
    bottom: 0;
}

.spice-sticky-left {
    left: 0;
}

.spice-sticky-right {
    right: 0;
}

.spice-select-disabled {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slds-button--icon-border.slds-is-selected, .slds-button--icon-container.slds-is-selected, .slds-button_icon-border-filled.slds-is-selected, .slds-button_icon-border-inverse.slds-is-selected, .slds-button_icon-border.slds-is-selected, .slds-button_icon-container.slds-is-selected,
.slds-button--icon-border.slds-is-selected:active, .slds-button--icon-container.slds-is-selected:active, .slds-button_icon-border-filled.slds-is-selected:active, .slds-button_icon-border-inverse.slds-is-selected:active, .slds-button_icon-border.slds-is-selected:active, .slds-button_icon-container.slds-is-selected:active,
.slds-button--icon-border.slds-is-selected:focus, .slds-button--icon-border.slds-is-selected:hover, .slds-button--icon-container.slds-is-selected:focus, .slds-button--icon-container.slds-is-selected:hover, .slds-button_icon-border-filled.slds-is-selected:focus, .slds-button_icon-border-filled.slds-is-selected:hover, .slds-button_icon-border-inverse.slds-is-selected:focus, .slds-button_icon-border-inverse.slds-is-selected:hover, .slds-button_icon-border.slds-is-selected:focus, .slds-button_icon-border.slds-is-selected:hover, .slds-button_icon-container.slds-is-selected:focus, .slds-button_icon-container.slds-is-selected:hover {
    background-color: var(--slds-c-button-brand-color-background, #0176d3);
    border-color: var(--slds-c-button-brand-color-background, #0176d3);
}

.slds-popover__body {
    overflow: auto;
}

.slds-popover-container {
    position: absolute;
    overflow: visible;
    margin: 1px;
}

.slds-popover-container:has(.slds-nubbin_top), .slds-popover-container:has(.slds-nubbin_top-left), .slds-popover-container:has(.slds-nubbin_top-right) {
    padding-top: 1rem;
}

.slds-popover-container:has(.slds-nubbin_top-right), .slds-popover-container:has(.slds-nubbin_bottom-right) {
    margin-right: -1rem;
}

.slds-popover-container:has(.slds-nubbin_top-left), .slds-popover-container:has(.slds-nubbin_bottom-left) {
    margin-left: -1rem;
}

.slds-popover-container:has(.slds-nubbin_bottom), .slds-popover-container:has(.slds-nubbin_bottom-left), .slds-popover-container:has(.slds-nubbin_bottom-right) {
    padding-bottom: 1rem;
}

.slds-popover-container:has(.slds-nubbin_left), .slds-popover-container:has(.slds-nubbin_left-bottom), .slds-popover-container:has(.slds-nubbin_left-top) {
    padding-left: 1rem;
}

.slds-popover-container:has(.slds-nubbin_right), .slds-popover-container:has(.slds-nubbin_right-bottom), .slds-popover-container:has(.slds-nubbin_right-top) {
    padding-right: 1rem;
}

.system-responsive-sidebar-small {
    position: absolute;
    top: 0;
    z-index: 10;
    transform: translateX(-100%);
}

.system-native-resizable-handle {
    user-select: none;
    z-index: 9999;
    position: absolute;
    -webkit-user-drag: none;
    touch-action: none;
}

.spice-progress-bar-transparent .slds-progress-bar {
    background-color: unset;
}

.field-container-height-full field-container > div {
    height: 100%;
}

.spice-flex-item-equal {
    flex: 1 1 0;
}

.fieldset-manager-droplist-highlight {
    background-color: var(--slds-g-color-neutral-base-50, #747474);
}

.fieldset-manager-table-cell-placeholder {
    display: table-cell;
}

/* mirrors SLDS's slds-max-medium-table--stacked-horizontal, minus its own @media query - toggled instead by
   fieldsetManager.viewSize() == '320px' (see FieldsetManagerViewList's table), so the mobile preview applies
   regardless of the actual browser viewport width. each cell's own width is bound via [width] (a plain attribute,
   not an inline style - see ObjectListHeader's own columnWidth() binding), so a plain class rule here is already
   enough to override it without needing !important */
.fieldset-manager-table-stacked {
    border: 0;
}

.fieldset-manager-table-stacked thead {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.fieldset-manager-table-stacked th {
    border-top: 0;
}

.fieldset-manager-table-stacked tr {
    display: block;
    border-top: 2px solid var(--slds-g-color-border-base-1, #e5e5e5);
}

.fieldset-manager-table-stacked th,
.fieldset-manager-table-stacked td {
    display: block;
    padding: 0.75rem;
    max-width: 100%;
    width: 100%;
    clear: both;
    white-space: normal;
    overflow: hidden;
    text-align: left;
}

.fieldset-manager-table-stacked th:before,
.fieldset-manager-table-stacked td:before {
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--slds-g-color-neutral-base-30, #444444);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    display: block;
    padding-bottom: 0.25rem;
    content: attr(data-label);
}

.fieldset-manager-table-stacked td {
    text-align: right;
}

.fieldset-manager-table-stacked td:before {
    float: left;
    margin-top: 0.125rem;
}


.spice-input-password-masked {
    -webkit-text-security: disc
}