@import "gwTheme.css";

button, .button {
    border-radius: var(--br-xxsm);
    border: var(--button-border-thickness, 0) var(--button-border-type, none) var(--button-border-clr, var(--clr-secondary-95));
    padding: calc(var(--spacing-xsm) - var(--button-border-thickness, 0px)) calc(var(--spacing-lg) - var(--button-border-thickness, 0px));
    color: var(--button-clr,var(--clr-neutral-0));
    background-color: var(--button-bg-clr, var(--clr-secondary-95));
    text-align: center;
    font-weight: var(--fw-regular);
    background-position: center;
    transition: all 0.1s;
    outline-color: var(--outline-clr, var(--clr-secondary-95));
    --outline-clr: var(--clr-primary-0-0);
}

button:not([disabled]):hover, .button:not([disabled]):hover {
    background: var(--button-bg-hover-clr, var(--clr-hover-100)) radial-gradient(circle, transparent 1%, var(--button-bg-clr, var(--clr-hover-95)) 1%) center/15000%;
    box-shadow: 0 0 4px 0 var(--clr-glow-0);
}

button:not([disabled]):focus, .button:not([disabled]):focus {
    outline: 1px solid var(--outline-clr);
    color: var(--button-focus-clr, var(--button-clr,var(--clr-neutral-0)));
    background-color: var(--button-bg-focus-clr, var(--button-bg-clr, var(--clr-secondary-95, --clr-neutral-0)));
    box-shadow: 0 0 0 3px var(--clr-glow-0), 0 0 4px 3px var(--clr-glow-0);
}

button.secondary, .button.secondary {
    --button-border-thickness: 1px;
    --button-border-type: solid;
    --button-border-clr: var(--clr-secondary-65);
    --button-bg-clr: transparent;
    --button-clr: var(--clr-secondary-95-0);
    --button-bg-hover-clr: hsla(190, 67%, 56%, 0.1);
    --button-ripple-clr: var(--clr-secondary-65);
    --outline-clr: var(--clr-primary-0-0);
}

button.tertiary, .button.tertiary {
    background: transparent none;
    padding: 6px 12px;
    text-decoration: underline;
    color: var(--clr-secondary-95);
    text-underline-offset: 4px;
    cursor: pointer;
    transition: 0.1s;
    border: 1px solid transparent;

    &:not(.inactive):hover {
        background: transparent none;
        border: 1px solid var(--clr-secondary-95);
        border-radius: 4px;
        box-shadow: 0 0 4px 0 var(--clr-glow-0);
    }

    &:not(.inactive):focus {
        background: transparent none;
        color: var(--clr-secondary-95);
    }

    &:not(.inactive):active {
        background: transparent none;
    }

    &.inactive {
        text-decoration: none;
    }
}

button.warning, .button.warning {
    --button-bg-clr: var(--clr-error-80);
    --button-border-clr: var(--clr-error-80);
    --button-bg-hover-clr: var(--clr-error-100);
    --button-ripple-clr: var(--clr-error-100);
}

button.light:not(:focus), .button.light:not(:focus) {
    background-color: transparent;
}

button.light, .button.light {
    --button-border-thickness: 1px;
    --button-border-type: solid;
    --button-border-clr: var(--clr-neutral-10);
    --button-bg-clr: var(--clr-neutral-10);
    --button-clr: var(--clr-white);
    --button-bg-hover-clr: var(--clr-light-hover);
    --button-ripple-clr: var(--clr-secondary-65);
    --button-bg-focus-clr: var(--clr-light-hover);
    --button-focus-clr: var(--clr-secondary-95-0);
    --outline-clr: var(--clr-secondary-95-0);
}

button.light:hover, .button.light:hover {
    --button-clr: var(--clr-secondary-95-0);
    background: var(--button-bg-hover-clr) radial-gradient(circle, transparent 1%, var(--button-bg-hover-clr) 1%) center/15000%;
}

button.light:active, .button.light:active {
    background-color: var(--button-ripple-clr, var(--clr-secondary-95));
    background-size: 100%;
    transition: background 0s;
}

button.select, .button.select {
    background: var(--clr-background-30);
    border: 1px solid var(--clr-border-dropdown);
    color: var(--clr-primary-100);

    &:not([disabled]):hover {
        background: var(--clr-background-30);
        border: 1px solid var(--clr-border-dropdown);
        border-radius: 4px;
        box-shadow: 0 0 4px 0 var(--clr-glow-0);
    }

    &:not([disabled]):focus {
        background: var(--clr-background-30);
        color: var(--clr-primary-100);
    }

    &:not([disabled]):active {
        background: var(--clr-background-30);
    }

    &[disabled] {
        color: var(--clr-disabled);
        background: transparent none;
        border: 1px solid var(--clr-primary-20);
    }
}

label[disabled]{
    color: var(--clr-disabled);
}

button.icon, .button.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-transition: all 0.1s linear, transform 0.5s linear;
    -webkit-transition: all 0.1s linear, transform 0.5s linear;
    transition: all 0.1s linear, transform 0.5s linear;
    padding: 0;
    border: none;
    background: none;

    &:active {
        transform: scale(0.7);
    }

    &:focus, &:hover, &:active {
        border: none;
        box-shadow: none;
        background: none;
    }

    &:focus-visible {
        background: none;
        outline: 1px solid var(--outline-clr);
        box-shadow: 0 0 0 3px var(--clr-glow-0), 0 0 4px 3px var(--clr-glow-0);
    }
}

.select-items-wrapper {
    background-color: var(--clr-background-30);
    font-size: var(--fs-md);
    color: var(--clr-primary-100);
}

.select-items-wrapper .select-items .select-item {
    padding: var(--spacing-md);
    border-radius: 4px;
}

.select-items-wrapper .select-items .select-item:hover {
    background-color: var(--clr-primary-20);
}

.select-items-wrapper .select-items .select-item.selected {
    background-color: var(--clr-primary-20);
}

.inactive.button-group :is(.button, button),
.inactive:is(.button, button) {
    cursor: default;
    pointer-events: none;
    color: var(--exception-button-inactive-dark);
    --button-bg-clr: var(--exception-button-inactive-light);
    --button-border-clr: var(--exception-button-inactive-light);
    --button-clr: var(--exception-button-inactive-dark);
}

.inactive.button-group .secondary:is(.button, button),
.inactive.secondary:is(.button, button) {
    --button-border-clr: var(--exception-button-inactive-light);
    --button-bg-clr: transparent;
}

.button .spinner,
button .spinner {
    --spinner-size: 1rem;
    --spinner-thickness: 0.1rem;
}

.button .loading-spinner,
button .loading-spinner {
    width: 1rem;
    height: 1rem;
}

.nav-bar {
    background: linear-gradient(180deg, hsla(213, 82%, 11%, 1) 0%, hsla(213, 67%, 15%, 1) 100%);
    display: grid;
    grid-template-rows: 1fr 13fr;
    color: var(--block-clr-text);
}

.nav-bg-90 {
    background: linear-gradient(180deg, hsl(213, 82%, 11%) 8.89%, hsl(213, 67%, 15%) 100%);
}

.nav-bar .navigation-item {
    gap: var(--spacing-sm);
    display: flex;
    align-items: center;
}

.nav-bar .navigation-item:focus-visible {
    background-color: hsla(0, 0%, 100%, 0.05);
    outline: 1px solid var(--clr-secondary-95);
    box-shadow: 0 0 0 3px var(--clr-glow-0), 0 0 4px 3px var(--clr-glow-0);
    border-radius: var(--br-xsm);
}

#nav_reporting_toggle:focus-visible {
    outline: 1px solid var(--clr-secondary-95);
    background-color: hsla(0, 0%, 100%, 0.05);
    box-shadow: 0 0 0 3px var(--clr-glow-0), 0 0 4px 3px var(--clr-glow-0);
    border-radius: var(--br-xsm);
}

.nav-bar .selectable.navigation-item:hover, .nav-bar .navigation-item .selectable:hover {
    background-color: hsla(0, 0%, 100%, 0.05);
    border-radius: var(--br-xsm);
}

.nav-bar .navigation-item .sub-item {
    display: flex;
    align-items: center;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.nav-bar .navigation-item .sub-item:focus-visible {
    background-color: hsla(0, 0%, 100%, 0.05);
    outline: 1px solid var(--clr-secondary-95);
    box-shadow: 0 0 0 3px var(--clr-glow-0), 0 0 4px 3px var(--clr-glow-0);
    border-radius: var(--br-xsm);
}

.nav-bar .avatar-background{
    background: var(--component-background, var(--clr-shade-10));
}

.nav-bar .navigation-item.nav-highlight {
    font-weight: var(--fw-bold);
    background-color: hsla(0, 0%, 100%, 0.05);
    border-radius: var(--br-xsm);
}

.nav-bar .nav-container.nav-highlight {
    background-color: hsla(0, 0%, 100%, 0.05);
    border-radius: var(--br-xsm);
}

.nav-bar .nav-highlight-icon{
    opacity: 0.8;
    background: linear-gradient(90deg, hsl(168, 70%, 62%) 4.55%, hsl(190, 67%, 56%) 95.45%);
}

.nav-bar .nav-highlight-secondary{
    background-color: var(--component-highlight-secondary, var(--clr-secondary-80));
    border-radius: var(--br-xxsm);
}

.nav-bar .navigation-item .sub-item.nav-highlight-secondary{
    font-weight: var(--fw-bold);
}

.nav-bar-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(280deg, hsl(206, 89%, 17%) 0%, hsl(219, 78%, 12%) 100%);
    justify-content: center;
    height: 72px;
    min-width: 256px;
    width: 100%;
}

.rz-custom-header {
    flex: 1;
    display: flex;
    justify-content: end;
    padding-right: 1rem;
}

.spinner{
    border: var(--spinner-thickness) solid var(--spinner-background);
    border-top: var(--spinner-thickness) solid var(--spinner-clr);
    width: var(--spinner-size);
    height: var(--spinner-size);
    border-radius: 100%;
    animation: spin 2s linear infinite;

    /* Default Values */
    --spinner-thickness: .25rem;
    --spinner-background: var(--clr-neutral-40);
    --spinner-clr: var(--clr-primary-80);
    --spinner-size: 12rem;
}

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

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

.card{
    background: var(--clr-primary-0);
    box-shadow: var(--shadow-box-light);
    border-radius: var(--br-xsm);

    .card {
        background: var(--clr-background-20);

        .card {
            background: var(--clr-background-30);
        }
    }
}

.caption{
    font-weight: var(--fw-regular);
    font-size: var(--fs-xsm);
    line-height: 140%;
    color: var(--clr-component-primary-20, var(--clr-primary-95));
}

.overflow-hidden.caption{
    color: var(--clr-overflow-hidden-text);
}

.hyperlink {
    display: inline-block;
    color: var(--hyperlink-clr);
    text-underline-offset: 4px;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 4px 4px 4px;
    margin: -2px -4px -4px -4px;
    border: 1px solid transparent;
    transition: 0.1s;
    /* Default Parameters */
    --hyperlink-clr: var(--clr-secondary-95);
}

.hyperlink:hover {
    background-color: hsla(0, 0%, 100%, 0.15);
    border-radius: 4px;
}

.hyperlink:focus {
    border: 1px solid var(--hyperlink-clr);
    border-radius: 4px;
    box-shadow: 0 0 4px 1px var(--clr-secondary-95);
    outline: 0;
}

.slider-top {
    transition: transform 0.3s;
    transform: translateY(-100%);
}

.slider-top.slider-top-open {
    transform: translateY(0);
}

.modal-title{
    color: var(--modal-title-clr, var(--clr-primary-95));
}

.modal-close{
    fill: var(--modal-close-clr, hsl(209, 54%, 35%));
}

.windowed-modal {
    .windowed-modal-body {
        background-color: var(--bg-clr-windowed-modal-body);
    }

    .windowed-modal-header {
        background-color: var(--bg-clr-windowed-modal-header);
        border-bottom: 1px solid var(--clr-primary-20);
    }
}

.tooltip-popup {
    color: var(--clr-neutral-100);
    background-color: var(--bg-clr-tooltip);
}

.tooltip-arrow::after {
    bottom: calc(100% - 40px);
    left: 50%;
    content: "";
    position: absolute;
    border-top: solid 5px transparent;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 5px var(--bg-clr-tooltip);
    transform: translateX(-50%);
    color: var(--bg-clr-tooltip);
}

.tooltip-arrow-bottom::after {
    top: calc(100% - 40px);
    left: 50%;
    content: "";
    position: absolute;
    border-top: solid 5px;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 5px transparent var(--bg-clr-tooltip);
    transform: translateX(-50%);
    color: var(--bg-clr-tooltip);
}

.section-overlay {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 1;
    background-color: var(--overlay-clr);
    /* Default Parameters */
    --overlay-clr: var(--clr-neutral-0);
}



.collapsible-component {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 500ms;
}

.collapsible-component.open {
    grid-template-rows: auto 1fr;
}

.collapsible-component *:last-child {
    overflow: hidden;
}

.collapsible-arrow-indicator {
    transition: transform 500ms ease;
    transform: scale(1);
}

.open .collapsible-arrow-indicator {
    transform: scale(-1);
}

.unsupported-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid var(--clr-primary-20);
    border-radius: var(--br-sm);
    background-color: var(--clr-neutral-50);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-xxlg);
}

.divider {
    width: 0;
    border-left: 0.0625rem var(--divider-style) var(--divider-color);

    /*default params*/
    --divider-color: var(--clr-primary-20);
    --divider-style: solid;
}

.divider.dash {
    --divider-style: dashed;
}

.divider.clr-primary-50 {
    --divider-color: var(--clr-primary-50);
}

.divider.clr-error-50 {
    --divider-color: var(--clr-error-50);
}

.divider.horizontal{
    background-color: var(--divider-color);
    height: 0.0625rem;
}

.pill.primary {
    --pill-bg-clr: var(--pill-bg-primary);
    --pill-border-clr: var(--pill-border-primary);
    --pill-clr: var(--pill-color-primary);
}

.pill.secondary {
    --pill-bg-clr: var(--clr-pill-10);
    --pill-clr: var(--clr-secondary-95);
}

.pill {
    border-radius: 3.125rem;
    background-color: var(--pill-bg-clr, var(--clr-secondary-5));
    border: 1.5px solid var(--pill-border-clr, var(--clr-secondary-65));
    color: var(--pill-clr, var(--clr-pill-0));
    max-width: fit-content;
}

.pill.interactive:hover{
    background-color: var(--pill-border-clr, var(--clr-secondary-65));
}

.log-out {
    outline-color: var(--clr-neutral-0, 0);
    margin-bottom: 4px;
    border-radius: var(--br-xxsm);
}

.log-out:not(.disabled):focus {
    color: var(--clr-primary-100);
    background-color: hsla(0, 0%, 100%, 0.05);
    outline: 1px solid var(--clr-secondary-95);
    box-shadow: 0 0 0 3px var(--clr-glow-0), 0 0 4px 3px var(--clr-glow-0);
    border-radius: var(--br-xsm);
}

.tooltip-selector{
    display: inline-flex;
}

.expand-row-toggler-table-cell {
    padding: 0px !important;
}

.excess-license-usage-table .rz-datatable {
    border-radius: unset;
}

.excess-license-usage-table th {
    border-top: 0.0625rem solid var(--clr-primary-20) !important;
    border-bottom: 0.0625rem solid var(--clr-primary-20) !important;
}

.cleanroom-info-pane button:not(:focus), .cleanroom-info-pane .button:not(:focus) {
    background-color: transparent;
}

.cleanroom-info-pane button, .cleanroom-info-pane .button {
    --button-border-thickness: 1px;
    --button-border-type: solid;
    --button-border-clr: hsl(0, 0%, 100%);
    --button-bg-clr: hsl(0, 0%, 100%);
    --button-clr: hsl(0, 0%, 100%);
    --button-bg-hover-clr: hsl(0, 0%, 100%);
    --button-ripple-clr: hsl(166, 89%, 36%);
    --button-bg-focus-clr: hsl(0, 0%, 100%);
    --button-focus-clr: hsl(166, 89%, 36%);
    --outline-clr: hsl(166, 89%, 36%);
}

.cleanroom-info-pane button:hover, .cleanroom-info-pane .button:hover {
    --button-clr: hsl(213, 30%, 12%);
    background: var(--button-bg-hover-clr) radial-gradient(circle, transparent 1%, var(--button-bg-hover-clr) 1%) center/15000%;
}

.cleanroom-info-pane button:active, .cleanroom-info-pane .button:active {
    background-color: var(--button-ripple-clr, hsl(166, 89%, 36%));
    background-size: 100%;
    transition: background 0s;
}

.cleanroom-processed-files .rz-custom-header {
    width: 100%;
}

.cleanroom-remake-loading-progress {
    transition: width .4s linear;
    background: linear-gradient(to right, var(--loading-bar-remake-start-colour), var(--loading-bar-remake-end-colour));
    /* default parameters */
    --loading-bar-remake-start-colour: hsl(161, 57%, 44%);
    --loading-bar-remake-end-colour: hsl(161, 53%, 45%);
}

.cleanroom-remake-banner {
    color: white;
    line-height: 3rem;
    margin-top: -2rem;
}

.cleanroom-remake-banner img:nth-of-type(2) {
    cursor: pointer;
    max-width: 0.75rem;
    max-height: 0.75rem;
}

/* Firefox outline fixes */
/* If the current element is a tooltip, and the child is an image, remove the outline */
.tooltip-selector:has(> img):focus {
    outline: 0;
}

.tooltip-selector:focus > img {
    outline-style: solid;
    outline-width: 2px;
    outline-color: var(--outline-clr, var(--clr-primary-95));
}

/* Deprecated */
.high-risk-text { /* please use clr-high directly instead */
    color: var(--clr-error-80);
}

.medium-risk-text { /* please use clr-medium directly instead */
    color: var(--clr-warning-100);
}

.low-risk-text { /* please use clr-low directly instead */
    color: var(--clr-secondary-95);
}

.body-2 { /* please use the utility based fw,fs,lh and clr classes */
    color: var(--clr-component-primary-20, var(--clr-primary-95));
    font-size: var(--fs-sm);
    font-weight: var(--fw-light);
    line-height: 160%;
}
/* Deprecated End */

.file-list-remake tr {
    background-color: var(--clr-neutral-50);
}

.file-list-remake tr:not([nested]):not([spacer]) td:first-child {
    border-top-left-radius: var(--br-sm) !important;
}

.file-list-remake tr:not([nested]):not([spacer]) td:last-child {
    border-top-right-radius: var(--br-sm) !important;
}

.file-list-remake tr:not([nested]):not([spacer]):not([folder]) td:first-child {
    border-bottom-left-radius: var(--br-sm) !important;
}

.file-list-remake tr:not([nested]):not([spacer]):not([folder]) td:last-child {
    border-bottom-right-radius: var(--br-sm) !important;
}

.file-list-remake tr[nested] td:first-child {
    border-top-left-radius: 0 !important;
}

.file-list-remake tr[nested] td:last-child {
    border-top-right-radius: 0 !important;
}

.file-list-remake tr[nested]:not(:has(+ [spacer])) td:first-child {
    border-bottom-left-radius: 0 !important;
}

.file-list-remake tr[nested]:not(:has(+ [spacer])) td:last-child {
    border-bottom-right-radius: 0 !important;
}

.file-list-remake tr[nested]:has(+ [spacer]) td:first-child {
    border-bottom-left-radius: var(--br-sm) !important;
}

.file-list-remake tr[nested]:has(+ [spacer]) td:last-child {
    border-bottom-right-radius: var(--br-sm) !important;
}

.file-list-remake tr[spacer] {
    background-color: transparent;
    height: 10px; /* Force a specific height */
    display: flex;
}

.file-list-remake .rz-group-header {
    border-bottom: none !important;
}

.file-list-remake tr td {
    background-color: transparent !important;
}

.file-list-remake table {
    overflow: hidden;
}

.file-list-button {
    max-width: 100%;
}

.protection-tabs {
    display: flex;
    border-bottom: 3px solid transparent;
    text-align: center;
    border-image: var(--bg-clr-tab-selected) 1;
}

.protection-tabs > *:first-child {
    border-top-left-radius: 8px;
}

.protection-tabs > *:last-child {
    border-top-right-radius: 8px;
}

.protection-tabs > * {
    padding: 1rem;
    --bg-color: var(--bg-clr-tab-unselected);
    color: var(--clr-neutral-100);
    --clr-title: var(--clr-primary-95);
    text-decoration: none;
    min-width: 200px;


    background: var(--bg-color);
    --border-clr: var(--clr-primary-20);
    --border: 1px solid var(--border-clr);
    border-top: var(--border);
    border-left: var(--border);
    border-right: var(--border);
}

.protection-tabs .title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    color: var(--clr-title);
    line-height: 160%;
}

.protection-tabs .subtitle {
    font-weight: var(--fw-regular);
    font-size: var(--fs-xsm);
    line-height: 140%;
}

.protection-tabs > .selected {
    --bg-color: var(--bg-clr-tab-selected);
    --border-clr: var(--bg-color);
    color: var(--clr-tab-text-selected);
    --clr-title: var(--clr-tab-text-selected);
}

.animate-rotate {
    -webkit-animation: reverse-spin 4s linear infinite;
    -moz-animation: reverse-spin 4s linear infinite;
    animation: reverse-spin 4s linear infinite;
}

.toggle {
    position: relative;
    display: block;

    --internal-toggle-height: var(--toggle-height, 20px);
    --internal-toggle-width: var(--toggle-width, 40px);
    --internal-toggle-on-background: var(--toggle-on-background, green);
    --internal-toggle-off-background: var(--toggle-off-background, gray);
    --internal-toggle-colour: var(--toggle-colour, white);
    height: var(--internal-toggle-height);
    width: var(--internal-toggle-width);
}

.toggle.inactive {
    pointer-events: none;
    opacity: 0.5;
}

.toggle span {
    display: block;
    background: var(--internal-toggle-off-background);
    width: 100%;
    height: 100%;
    border-radius: calc(var(--internal-toggle-height) / 2);
    padding: 2px;
    box-sizing: border-box;
    pointer-events: none;
    transition: background 0.1s;
}

.toggle span::after {
    content: '';
    background: var(--internal-toggle-colour);
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    transition: margin-left 0.1s;
    margin-left: 0;
}

.toggle.active span {
    background: var(--internal-toggle-on-background);
}

.toggle.active span::after {
    margin-left: calc(var(--internal-toggle-width) - var(--internal-toggle-height));
}

.bullet-point {
    padding-left: 1rem;
}

.bullet-point li {
    list-style-type: disc;
    list-style-position: outside;
}

@keyframes reverse-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes reverse-spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

@media (max-width: 1400px) {
    .nav-bar {
        background: linear-gradient(180deg, hsla(213, 82%, 11%, 1) 0%, hsla(213, 67%, 15%, 1) 100%);
        grid-template-rows: auto;
        justify-items: right;
    }

    .nav-bar .navigation-item > div:nth-child(1) { order: 2; }
    .nav-bar .navigation-item > div:nth-child(2) { order: 3; }
    .nav-bar .navigation-item > div:nth-child(3) { order: 1; }

    .nav-bar .navigation-item {
        flex-direction: row-reverse;
    }

    .nav-bar .navigation-item.navigation-item-logout {
        padding: var(--spacing-sm) var(--spacing-xsm) var(--spacing-md) var(--spacing-xsm);
        border-top: none;
    }

    .nav-bar .nav-highlight {
        background-color: transparent;
        border-radius: initial;
    }

    .nav-bar .nav-container {
        text-align: right;
    }

    .nav-bar .navigation-item .sub-item {
        flex-grow: 0;
    }

    .nav-bar .nav-container.nav-highlight {
        border-radius: 0;
    }

    .nav-bar .navigation-item:focus-visible {
        border-radius: 0;
    }

    .nav-bar .selectable.navigation-item:hover {
        border-radius: 0;
    }
    
    .nav-bar-header {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: var(--spacing-md) var(--spacing-md);
        background: linear-gradient(280deg, hsl(206, 89%, 17%) 0%, hsl(219, 78%, 12%) 100%);
        height: 72px;
        min-width: 164px;
    }
}

i {
    pointer-events: none;
}

i.search {
    content: var(--image-search);
}

i.policy-badge {
    content: var(--image-policy-badge);
}

i.file-reputation-badge {
    content: var(--image-file-reputation-badge);
}

i.icap-server-badge {
    content: var(--image-icap-server-badge);
}

i.tech-help {
    content: var(--image-tech-help);
}

i.upgrade {
    content: var(--image-upgrade);
}

i.external-site {
    content: var(--image-external-site);
    width: 10px;
}

i.external-site-alt {
    content: var(--image-external-site-alt);
}

i.tour-thumbnail {
    content: var(--image-tour-thumbnail);
    width: 400px;
}

i.data-placeholder {
    content: var(--image-data-placeholder);
}

i.checkbox-checked {
    content: var(--image-data-checkbox-checked);
    width: 16px;
    height: 16px;
}

i.checkbox-unchecked {
    content: var(--image-data-checkbox-unchecked);
    width: 16px;
    height: 16px;
}

i.checkbox-disabled {
    content: var(--image-data-checkbox-disabled);
    width: 16px;
    height: 16px;
}


i.card-accent {
    content: var(--image-data-card-accent);
    height: 18px;
}

i.protected-file-overview {
    content: var(--image-data-protected-files-overview);
    height: 40px;
    width: 40px;
}

i.total-size-protected-overview {
    content: var(--image-data-total-protected-size-overview);
    height: 40px;
    width: 40px;
}

i.risks-removed-overview {
    content: var(--image-data-risks-removed-overview);
    height: 40px;
    width: 40px;
}

i.average-protection-time-overview {
    content: var(--image-data-protection-time-overview);

    &.large {
        height: 40px;
        width: 40px;
    }
}

i.expand-chart {
    content: var(--image-data-expand-chart);
}

i.info {
    content: var(--image-info);
}

i.info-white {
    content: var(--image-info-white);
}

i.clipboard {
    content: var(--image-clipboard);
    width: 12px;
    height: 14px;
}

i.circled-tick {
    content: var(--image-circled-tick);
}

i.accordion-arrow {
    content: var(--image-data-accordion-arrow);
}

i.alert {
    content: var(--image-alert);
    width: 20px;
    height: 20px;
}

i.warning {
    content: var(--image-warning);
    width: 20px;
    height: 20px;
}

i.close {
    content: var(--image-close);
    width: 14px;
    height: 14px;
}

i.close-pill {
    content: var(--image-close-pill-icon)
}

i.high-risk {
    content: var(--image-high-risk);
}

i.medium-risk {
    content: var(--image-medium-risk);
}

i.low-risk {
    content: var(--image-low-risk);
}

i.add {
    content: var(--image-add);
}

i.file-icon-pdf {
    content: var(--image-file-icon-pdf);
}

i.file-icon-word {
    content: var(--image-file-icon-word);
}

i.file-icon-excel {
    content: var(--image-file-icon-excel);
}

i.file-icon-powerpoint {
    content: var(--image-file-icon-powerpoint);
}

i.file-icon-other {
    content: var(--image-file-icon-other);
}

i.file-icon-supported-files {
    content: var(--image-file-icon-supported-files);
}

i.filter-icon {
    content: var(--image-filter-icon);
}

i.icap-total-blocked-icon {
    content: var(--image-icap-total-blocked-icon);
}

i.icap-total-requests-icon {
    content: var(--image-icap-total-requests-icon);
}

span.halo-logo {
    content: var(--image-halo-logo);
}

i.daily-data-limit {
    content: var(--image-daily-data-limit-icon);
}

i.daily-file-limit {
    content: var(--image-daily-file-limit-icon);
}

i.files-protected {
    content: var(--image-files-protected-icon);
}

i.risk-removed {
    content: var(--image-risk-removed-icon);
}

i.total-size-of-protected-files {
    content: var(--image-total-size-of-protected-files-icon);
}

i.donut-divider {
    content: var(--donut-divider);
}

i.file-icon-folder {
    content: var(--image-file-icon-folder);
}

i.file-icon-zip {
    content: var(--image-file-icon-zip);
}

img.loading-spinner {
    animation: spin 1s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
    display: none;

    &.large {
        width: 12rem;
        height: 12rem;
        margin: 0 auto;
    }
}

@keyframes spin {
    to {
        rotate: 1turn;
    }
}

i.nav-bar-reporting-active {
    content: var(--image-nav-bar-reporting-active);
}

i.nav-bar-reporting-inactive {
    content: var(--image-nav-bar-reporting-inactive);
}

i.nav-bar-cleanafile-active {
    content: var(--image-nav-bar-cleanafile-active);
}

i.nav-bar-cleanafile-inactive {
    content: var(--image-nav-bar-cleanafile-inactive);
}

i.nav-bar-apis-active {
    content: var(--image-nav-bar-apis-active);
}

i.nav-bar-apis-inactive {
    content: var(--image-nav-bar-apis-inactive);
}

i.nav-bar-protection-settings-active {
    content: var(--image-nav-bar-protection-settings-active);
}

i.nav-bar-protection-settings-inactive {
    content: var(--image-nav-bar-protection-settings-inactive);
}

i.nav-bar-license-management-active {
    content: var(--image-nav-bar-license-management-active);
}

i.nav-bar-license-management-inactive {
    content: var(--image-nav-bar-license-management-inactive);
}

i.nav-bar-help-active {
    content: var(--image-nav-bar-help-active);
}

i.nav-bar-help-inactive {
    content: var(--image-nav-bar-help-inactive);
}

i.nav-bar-storage-monitoring-active {
    content: var(--image-nav-bar-storage-monitoring-active);
}

i.nav-bar-storage-monitoring-inactive {
    content: var(--image-nav-bar-storage-monitoring-inactive);
}

i.nav-bar-halo-logo {
    content: var(--image-nav-bar-halo-logo);
}

i.empty-data-icon {
    content: var(--image-empty-data-icon);
    height: 200px;
    width: 300px;
}

.clr-data-placeholder {
    color: var(--clr-data-placeholder);
}

.clr-hidden-data-reveal {
    background-color: var(--bg-clr-hidden-data);
}

.clr-hidden-data-stop {
    background-color: var(--bg-clr-hidden-data-stop);
}

.clr-hidden-data-hide {
    background-color: var(--bg-clr-hidden-data-hide);
}

div.dark-mode {
    button.primary, .button.primary {
        --button-border-thickness: 1px;
        --button-border-type: solid;

        &:hover {
            --button-border-clr: var(--clr-button-border-0);
        }
    }

    .pill {
        &.primary {
            &.interactive {
                &:hover {
                    background-color: var(--pill-hover-primary);
                    border-color: var(--pill-hover-primary);
                }

                &:focus {
                    outline: 1px solid var(--clr-primary-0-0);
                    box-shadow: 0 0 0 2px var(--clr-glow-0), 0 0 4px 2px var(--clr-glow-0);
                }
            }
        }

        &.secondary{
            font-weight: 700;
        }
    }

    .landing-page {
        background-color: hsl(215, 81%, 4%);
        background-image: var(--image-halo-bg);
        background-repeat: no-repeat;
        background-position-y: -320px;
        height: 100vh;
    }

    .spinner {
        display: none;
    }

    img.loading-spinner {
        display: block;
    }
}