#rebrand {
    --transition: 0.25s cubic-bezier(0.33, 1, 0.68, 1);
    --color-white: #fff;
    --color-black: #000;
    --color-surface-muted: #e6eff5;
    --color-text-heading: #333333;
    --color-transparent: transparent;
    --color-primary-hover: #49474a;
    --color-text-primary: #272528;
    --color-secondary-hover: #d5dfe4;
    --color-tertiary-hover: #f2f2f2;
    --color-danger: #e85561;
    --color-nav-hover: #f4f5f6;
    --color-highlight: #fff65b;
    --color-toggle-bar: #d5dfe5;
    --color-chip: #cd2f3c;
    --color-calendar-highlight: #49474a;
    --color-greyscale-600: #666;
    --color-menu-highlight: #efefef80;
}

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

#loading-spinner,
#rebrand #loading-label {
    display: none;
}

#rebrand #loading-spinner {
    display: block;
    animation: spin 1s linear infinite;
    width: 2rem;
    height: 2rem;
}

#rebrand.rebrand-colors {
    background-color: var(--color-white) !important;
}

#rebrand.rebrand-colors material-fab,
#rebrand.rebrand-colors material-progress .active-progress,
#rebrand.rebrand-colors material-progress .secondary-progress,
#rebrand.rebrand-colors material-tab-strip .tab-indicator {
    background-color: var(--color-black) !important;
}

#rebrand.rebrand-colors material-progress .secondary-progress {
    background-color: var(--color-surface-muted);
}

#rebrand.rebrand-color material-progress .interminate {
    background-color: var(--color-surface-muted);
}

#rebrand.rebrand-colors material-checkbox material-icon,
#rebrand.rebrand-colors tab-button.active,
#rebrand.rebrand-colors nav .breadcrumb a {
    color: var(--color-black) !important;
}

#rebrand.rebrand-colors .navbar .nav-link {
    color: var(--color-white);
}

#rebrand.rebrand-typography h1,
#rebrand.rebrand-typography h2,
#rebrand.rebrand-typography h3,
#rebrand.rebrand-typography h4,
#rebrand.rebrand-typography h5,
#rebrand.rebrand-typography h6 {
    font-family: "Host Grotesk", sans-serif;
}

#rebrand.rebrand-typography h3 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.75rem;
    color: var(--color-text-heading);
}

#rebrand.rebrand-typography p,
#rebrand.rebrand-typography a,
#rebrand.rebrand-typography span {
    font-family: "Inter", sans-serif;
}

#rebrand.rebrand-colors button.btn {
    padding: 0.5rem 0.75rem;
    border-radius: 1.5rem !important;
    box-shadow: none;
}

#rebrand.rebrand-colors button.btn-filter {
    padding: 0 0.5rem;
}

#rebrand.rebrand-colors button.btn-primary {
    border-color: var(--color-transparent);
    background-color: var(--color-black);
    color: var(--color-white);
}

#rebrand.rebrand-colors button.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

#rebrand.rebrand-colors button.btn-secondary,
#rebrand.rebrand-colors button.btn-default {
    border-color: var(--color-transparent);
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

#rebrand.rebrand-colors button.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
}

#rebrand.rebrand-colors button.btn-tertiary {
    border-color: var(--color-transparent);
    background-color: var(--color-transparent);
    color: var(--color-text-primary);
}

#rebrand.rebrand-colors button.btn-tertiary:hover {
    background-color: var(--color-tertiary-hover);
}

#rebrand.rebrand-colors button.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}

#rebrand.rebrand-colors .spark-settings-tabs .nav-heading {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-greyscale-600);
}

#rebrand.rebrand-colors .spark-settings-tabs .nav-link {
    font-size: 13px;
    padding: 8px;
}

#rebrand.rebrand-colors material-fab .material-icon-i {
    color: var(--color-white);
}

#rebrand.rebrand-typography .nav-heading {
    font-size: 1rem;
}

#rebrand.rebrand-typography nav .nav-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

#rebrand.rebrand-colors .nav .nav-item:hover {
    background-color: var(--color-nav-hover);
    border-radius: 0.5rem;
}

#rebrand.rebrand-colors #navbarSupportedContent .nav-item {
    background-color: var(--color-transparent);
}

#rebrand.rebrand-typography .nav-link.active {
    background-color: var(--color-menu-highlight);
    border-radius: 0.5rem;
}

#rebrand.rebrand-colors material-toggle .tgl-container {
    display: flex;
    width: max-content;
    margin: 0;
    justify-content: flex-start;
}

#rebrand.rebrand-colors material-toggle .tgl-btn-container {
    display: flex;
    margin: 0;
    width: max-content;
}

#rebrand.rebrand-colors material-toggle .tgl-btn {
    background-color: var(--color-text-primary);
    box-shadow: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    transition:
        width var(--transition),
        background-color var(--transition),
        height var(--transition);
}

#rebrand.rebrand-colors material-toggle .checked:not(.disabled) .tgl-btn {
    background-color: var(--color-white);
    width: 1.5rem;
    height: 1.5rem;
    transition:
        width var(--transition),
        background-color var(--transition),
        height var(--transition);
}

#rebrand.rebrand-colors material-toggle .tgl-bar {
    background-color: var(--color-toggle-bar);
    box-shadow: none;
    width: 3.25rem;
    height: 2rem;
    border-radius: 1.5rem;
    transition: background-color var(--transition);
}

#rebrand.rebrand-colors material-toggle .checked:not(.disabled) .tgl-bar {
    background-color: var(--color-black);
    transition: background-color var(--transition);
}

#rebrand.rebrand-colors material-toggle .tgl-btn-underlay {
    width: max-content;
    height: max-content;
    margin: 0;
    transform: translate(0.625rem, 0.625rem);
    transition: transform var(--transition);
}

#rebrand.rebrand-colors
    material-toggle
    .checked:not(.disabled)
    .tgl-btn-underlay {
    transform: translate(1.5625rem, 0.375rem);
    transition: transform var(--transition);
}

#rebrand.rebrand-colors material-chip {
    height: max-content;
}

#rebrand.rebrand-colors material-chip .content {
    background-color: var(--color-chip);
    color: var(--color-white);
    font-size: 0.75rem;
    margin: 0;
    padding: 0 0.25rem;
}

#rebrand.rebrand-colors property-card {
    margin-bottom: 1.5rem;
}

#rebrand.rebrand-colors property-card .card {
    border-radius: 1rem;
    overflow: hidden;
}

#rebrand.rebrand-colors date-range-editor material-select material-input label {
    margin: 0;
}

#rebrand.rebrand-colors .dashboard-graph .metric__current {
    font-weight: 600;
    color: var(--color-text-heading);
}

#rebrand.rebrand-colors dashboard .trends h5,
#rebrand.rebrand-colors dashboard .trends h2,
#rebrand.rebrand-colors dashboard .breakout {
    color: var(--color-text-heading);
}

#rebrand.rebrand-colors report .breakout .column:hover:not(.titles) .cell.head,
#rebrand.rebrand-colors
    breakout
    .breakout
    .column:hover:not(.titles)
    .cell.head {
    background-color: var(--color-text-heading);
    color: var(--color-white);
}

#rebrand.rebrand-colors report .breakout .column:hover:not(.titles) .cell,
#rebrand.rebrand-colors breakout .breakout .column:hover:not(.titles) .cell {
    background-color: var(--color-nav-hover);
}

#rebrand.rebrand-colors
    report
    .breakout
    .head
    #rebrand.rebrand-colors
    breakout
    .breakout
    .head {
    color: var(--color-greyscale-600);
    background-color: var(--color-menu-highlight);
}

/* Material Calendar Picker Rules */

#rebrand.rebrand-colors
    material-calendar-picker
    .boundary.boundary-range.active:not(.hover)::after,
#rebrand.rebrand-colors
    material-calendar-picker
    .day-slot.visible.boundary.boundary-preview.start.highlight.highlight-preview.hover::after,
#rebrand.rebrand-colors
    material-calendar-picker
    .boundary.highlight.highlight-range:not(.active):not(.hover)::after,
#rebrand.rebrand-colors
    material-calendar-picker
    .day-slot.visible.highlight.highlight-range.boundary.boundary-preview.start.highlight-preview.left.left-range.hover::after {
    background-color: var(--color-black);
}

#rebrand.rebrand-colors
    material-calendar-picker
    .boundary-preview.highlight-preview.hover::after,
#rebrand.rebrand-colors
    material-calendar-picker
    .boundary
    #rebrand.rebrand-colors
    material-calendar-picker
    .boundary-preview.highlight-preview.end::after,
#rebrand.rebrand-colors
    material-calendar-picker
    .day-slot.visible.boundary.boundary-preview.end.highlight.highlight-preview::after {
    background-color: var(--color-black);
    color: var(--color-white);
}

#rebrand.rebrand-colors
    material-calendar-picker
    .boundary-preview.highlight-preview.hover::before,
#rebrand.rebrand-colors date-range-editor material-select-item.selected {
    background-color: var(--color-calendar-highlight);
    color: var(--color-white);
}

#rebrand.rebrand-colors
    material-calendar-picker
    .day-slot.highlight.highlight-range {
    color: #fff;
}

#rebrand.rebrand-colors
    material-calendar-picker
    .day-slot.visible.boundary.boundary-preview.start.highlight.highlight-preview.hover::before {
    background-color: transparent;
}

#rebrand.rebrand-colors
    material-calendar-picker
    .highlight.highlight-range::before,
#rebrand.rebrand-colors
    material-calendar-picker
    .day-slot.visible.boundary.boundary-preview.start.active.highlight.highlight-preview.hover::before,
#rebrand.rebrand-colors
    material-calendar-picker
    .day-slot.visible.highlight.highlight-range.boundary.boundary-preview.start.highlight-preview.left.left-range.hover::before {
    background-color: var(--color-calendar-highlight);
}

#rebrand.rebrand-colors material-calendar-picker .left.left-range::before {
    border-left-color: var(--color-calendar-highlight);
}

#rebrand.rebrand-colors material-calendar-picker .right.right-range::before {
    border-right-color: var(--color-calendar-highlight);
}