@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import "darkModeReset.css";
@import "darkModeOneShots.css";

:root {
    --blue-90: hsla(190, 67%, 56%, 1);
    --clr-default: white;
    --clr-safe: #6CD0B9;
    --clr-danger: #EA1336;
    --clr-destructive: #ff2348;
    --clr-warning: #ff9800;
    --clr-low-risk: #5FEFC0;
    --clr-medium-risk: #FF9800;
    --clr-high-risk: #FF9191;
    --clr-neutral: #B7C0EB;
    --clr-unavailable: #FFFFFF;
    --clr-tooltip: #2E3A49;
    --border: 1px solid hsla(0, 0%, 100%, 0.1);
}

.new-styles {
    color: var(--clr-default);
    font-family: "Lato", sans-serif;
    font-size: 0.875rem;

    &.modal, .modal {
        background: linear-gradient(35.9deg, #020B15 42.41%, #112A4A 77.95%, #133B63 86.86%, #112A4A 97.58%);
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 16px 32px 0px 32px;
        z-index: 100;
        display: flex;
        flex-direction: column;

        > .close {
            position: absolute;
            top: 16px;
            right: 16px;
        }

        &.flat-style {
            background: hsla(212, 83%, 5%, 1) !important;
        }

        > header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32px;

            &:has(:only-child) {
                justify-self: center;
            }
        }

        *[role="main"] {
            flex-grow: 1;
            flex-basis: 0;
            overflow-y: auto;
        }

        > *:not(.close):not(header) {
            flex-grow: 1;
            flex-basis: 0;
            flex-direction: column;
        }

            > *:not(.close):not(header):not([role="main"]) {
                display: flex;
            }
    }

    &.windowed-modal, .windowed-modal {
        .windowed-modal-header {

            > * {
                height: 24px;
                align-content: center;
            }

            .success::before {
                content: url(/assets/circled-tick-blue.svg);
                margin-top: 4px;
            }

            .danger::before {
                content: url(/assets/warning.svg);
                margin-top: 4px;
            }

            .warning::before {
                content: url(/assets/alert.svg);
                margin-top: 4px;
            }

            :first-child {
                display: flex;
                gap: 8px;
                align-items: center;
            }
        }

        .windowed-modal-body {
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 32px;
            padding-bottom: 32px;
            gap: 28px;
            max-width: 400px;
            max-height: 80vh;

            p {
                line-height: 160%;
                padding-bottom: 24px;
                font-size: 16px;
            }

            &:has(.spinner) {
                min-height: 30vh;
                min-width: 40vh;
                display: grid;
                align-items: center;
                justify-content: center;
                align-content: center;
                justify-items: center;
            }

            .description:focus {
                outline: none;
                box-shadow: none;
            }
        }
    }

    hr {
        color: hsla(213, 23%, 23%, 1);
        background-color: hsla(213, 23%, 23%, 1);
        border: none;
        height: 1px;
        margin-top: 32px;
        margin-bottom: 16px;
    }

    abbr {
        text-decoration: none;
    }

    .card:not(:last-child),
    .cards > :not(:last-child) {
        margin-bottom: 16px;
    }

    .card,
    .cards > * {
        background: hsla(213, 41%, 9%, 1);
        border-radius: 8px;
        border: var(--border);
        padding: 16px;

        .card,
        .cards > * {
            background: hsla(213, 30%, 12%, 1);
            border: none;
        }

        &:has(+ hr) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 2px;
        }

        & + hr {
            display: none;
        }

        hr + & {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        header:has(+ &) {
            display: flex;
            gap: 16px;
            border-bottom: 1px solid hsla(213, 23%, 23%, 1);
            padding-bottom: 12px;
            margin-top: 48px;
            margin-bottom: 24px;
            width: 100%;
            align-items: center;

            > *:last-child:is(div, span, p) {
                margin-left: auto;
            }
        }
    }

    .clipboard-field {
        display: grid;
        grid-template-columns: minmax(auto, min-content) max-content;
        gap: 16px;

        button.icon {
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.1s all;
            padding: 0;
            border: none;
            background: none;

            &:active {
                transition: all 0.5s linear;
                transform: scale(0.7);
            }

            &:focus-visible {
                border: 1px solid black;
                box-shadow: 0 0 0 2px var(--blue-90), /* solid shadow acting as another border */
                0 0px 4px 2px var(--blue-90); /* soft shadow 'glow' */
            }
        }

        > *:first-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

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

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

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


    .button.select, button.select {
        background-color: var(--clr-background-30) !important;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > * {
            justify-content: start;
        }
    }

    .dropdown-spinner {
        width: 20px;
        height: 20px;
        align-self: center;
        margin-left: 10px;
        background: url(/assets/dropdown-loading.gif) no-repeat center center;
        background-size: contain;
    }

    .required::before {
        content: "*";
        color: var(--clr-danger);
    }

    .checkbox {
        display: flex;
        cursor: pointer;

        :first-child {
            width: 16px;
            height: 16px;
            align-self: center;
            justify-self: center;

            &[data-checked=False] {
                content: var(--image-data-checkbox-unchecked);
            }

            &[data-checked=True] {
                content: var(--image-data-checkbox-checked);
            }

            &[disabled] {
                content: var(--image-data-checkbox-disabled);
                pointer-events: none;

                &[data-checked=True] {
                    content: var(--image-data-checkbox-checked-disabled);
                }
            }
        }

        .layout-right {
            align-self: center;
            padding-left: 10px;
        }
    }

    .filepath {
        display: flex;
        min-width: 0;

        > .stem {
            flex-basis: 0;
            flex-grow: 1;
            max-width: max-content;
            white-space: nowrap preserve;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        > .extension {
            flex-basis: content;
        }
    }

    .filename {
        white-space: preserve;
    }

    .layout-sidebar {
        display: grid;
        grid-template-columns: max-content auto;
        gap: 48px;

        > :first-child {
            min-width: 304px;
        }

        > :last-child {
            margin-top: 20px;
            margin-right: 24px;

            > header > h2 {
                margin-bottom: 8px;
            }
        }
    }

    .layout-filtered-listpicker{
        gap: 24px;
        display: flex;
        flex-direction: column;

        > * {
            gap: 8px;
            display: flex;
        }

        > .layout-centered-form{
            padding: 0;

            > * {
                gap: 8px;
                padding-bottom: 0;
            }
            
            > :nth-child(odd) {
                justify-content: start;
            }
        }

    }
    
    .layout-double-column {
        display: flex;
        gap: 64px;
        flex-wrap: wrap;
        padding-left: 16px;

        & > * {
            flex: 1 1 0;
            min-width: min-content;
        }

        & + div.clipboard-field {
            margin-top: 8px;
        }
    }

    .layout-centered-form {
        display: grid;
        grid-template-columns: 1fr 3.5fr;
        gap: 16px;
        padding: 16px;

        > * {
            flex-basis: 40%;
            display: flex;
            padding-bottom: 20px;
        }

        > :nth-child(odd) {
            justify-content: end;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        > :nth-child(even) {
            justify-content: start;

            > * button {
                min-width: 500px;
            }
        }
    }

    .tab,
    .tabs > * {
        background: var(--tab-background-clr);
        border-radius: 8px;
        border: var(--border);
        cursor: pointer;
        transition: all 0.1s;
        --tab-background-clr: hsla(213, 30%, 12%, 1);
        --selected-clr: hsla(213, 23%, 23%, 1);

        &:hover {
            background: hsla(212, 22%, 15%, 1);
        }

        &:not(:last-child) {
            margin-bottom: 16px;
        }

        > header {
            padding: 16px;
            font-weight: 700;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;

            > * {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            span {
                font-size: 12px;
                font-weight: 700;
            }

            img {
                height: 28px;
            }

            i {
                background-color: white;
            }
        }

        &.selected {
            background: var(--selected-clr);
        }

            &.selected > header::after {
                --width: 14px;
                --height: 16px;
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                width: var(--width);
                height: var(--height);
                transform: translate(100%, -50%);
                border-left: var(--width) solid var(--selected-clr);
                border-top: calc(var(--height) / 2) solid transparent;
                border-bottom: calc(var(--height) / 2) solid transparent;
            }

        &.disabled {
            background: var(--tab-background-clr);
            cursor: auto;

            > header {
                > * {
                    gap: 6px;
                }

                img {
                    height: 18px;
                }
            }

            .enabled {
                pointer-events: auto;
            }
        }


        > div {
            padding: 16px;
        }

        > header:not(:only-child) {
            border-bottom: var(--border);
        }

        .info-block,
        .info-blocks > * {
            img {
                width: 48px;
                height: 48px;
            }
        }
    }

    .info-block,
    .info-blocks > * {
        display: grid;
        grid-template-columns: max-content max-content;
        align-items: center;
        column-gap: 16px;
        padding: 16px 0;

        &:not(:last-child) {
            margin-bottom: 8px;
        }

        > *:first-child {
            grid-row: span 2;
        }

            > *:first-child + p:last-child {
                grid-row: span 2;
            }

        > p:first-of-type + p {
            color: #9FA5B1;
            font-size: 12px;

            > img {
                margin-left: 0;
                margin-right: 8px;
                vertical-align: bottom;
            }
        }
    }

    dl {
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 4px;
        column-gap: 24px;

        > dd:not(:last-child) {
            padding-bottom: 8px;
        }

        > .card {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: span 2;
            margin: 0 !important;
            padding-top: 10px;
            padding-bottom: 10px;

            > dt {
                padding-left: 8px;
            }
        }
    }

    .layout-dictionary {
        display: grid;
        grid-template-columns: max-content auto;
        row-gap: 12px;
        column-gap: 24px;
        margin-top: 16px;

        > dl {
            grid-column: span 2;
        }
    }

    .buttons {
        display: flex;
        gap: 8px;
    }

    button,
    .button {
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        font-weight: 500 !important;
        font-size: 14px !important;
        transition: 0.1s all;
        border: 1px solid transparent;
        color: black;
        background-color: var(--blue-90);

        &:hover {
            box-shadow: 0 0 4px 0 var(--blue-90);
            border: 1px solid #B0E5EF;
        }

        &:focus {
            border: 1px solid black;
            box-shadow: 0 0 0 2px var(--blue-90), /* solid shadow acting as another border */
            0 0px 4px 2px var(--blue-90); /* soft shadow 'glow' */
        }

        &:disabled {
            background-color: #2E3A49;
            color: #9FA5B1;
            box-shadow: none;
            border: 1px solid transparent;
            cursor: default;
        }

        &.delete::before {
            content: url(/assets/bin.svg);
            margin-top: 4px;
        }

        &.destructive, &.delete {
            color: black;

            &.primary {
                background-color: var(--clr-destructive);
            }

            &.secondary {
                color: var(--clr-destructive);
                border: 1px solid var(--clr-destructive);

                &:hover, &:active {
                    &:not(:disabled) {
                        background-color: #2E3A4980;
                    }
                }
            }

            &:hover, &:active {
                box-shadow: 0 0 6px 0 #ff9191;
                border: 1px solid #ff9191;
            }
        }

        &.secondary {
            background-color: transparent;
            color: #FFFFFF;
            border: 1px solid var(--blue-90);

            &:hover {
                background-color: hsla(190, 67%, 56%, 0.1);
            }

            &:focus {
                outline: 1px solid black;
                box-shadow: 0 0 0 3px var(--blue-90), /* solid shadow acting as a third border */
                0 0 4px 3px var(--blue-90); /* soft shadow 'glow' */
            }

            &:disabled {
                outline: none;
                box-shadow: none;
                background: transparent;
                border: 1px solid #2E3A49;
                color: #9FA5B1;

                i {
                    color: #9FA5B1;
                }
            }

            > i {
                color: var(--blue-90);
            }
        }

        &.back-button {
            color: white !important;
        }

        &.tertiary, &.back-button {
            background: transparent;
            color: var(--blue-90);
            text-decoration: underline;
            text-underline-offset: 4px;

            &:hover {
                border: 1px solid var(--blue-90);
                box-shadow: 0 0 4px 0 var(--blue-90);
            }

            &:focus {
                border: 1px solid transparent;
                box-shadow: 0 0 0 2px var(--blue-90), 0 0px 4px 2px var(--blue-90);
            }

            &:disabled {
                border: 1px solid transparent;
                text-decoration: none;
                color: #9FA5B1;
                box-shadow: none;
                cursor: default;
            }
        }

        &.filter {
            background-color: hsla(0, 0%, 100%, 0.05);
            color: white;
            
            &.active {
                outline: 1px var(--blue-90);
            }

            &:hover {
                background-color: hsla(0, 0%, 100%, 0.1);
                box-shadow: none;
            }

            &:focus {
                outline: 0;
                background-color: hsla(0, 0%, 100%, 0.05);
                color: white;
                box-shadow: 0 0 0 2px var(--clr-glow-0),
                    0 0 4px 3px var(--clr-glow-0)
            }

            > i.filter-icon {
                background-color: hsl(220, 11%, 66%);
            }
        }

        > i {
            display: inline-block;
            background-color: currentColor;
        }
    }

    .highlight {
        display: flex;
        align-items: center;

        > *:first-child {
            padding: 32px;
            min-width: 296px;
            text-align: center;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto 1fr;
            grid-template-areas:
                "."
                "img"
                "caption";
            justify-items: center;
            gap: 8px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-image: url(/assets/spider-inner.png);
                width: 152px;
                aspect-ratio: 495 / 443;
                background-size: contain;
                background-repeat: no-repeat;
                opacity: 0.2;
                z-index: 50;
            }

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                mask-image: url(/assets/spider-outer.svg);
                width: 237px;
                height: 200px;
                opacity: 0.2;
                z-index: 20;
                background-color: hsla(0, 0%, 61%, 1);
            }

            > img {
                width: 64px;
                height: 64px;
                grid-area: img;
            }

            > * {
                z-index: 100;
            }

                > *:last-child {
                    grid-area: caption;
                }
        }

        > *:last-child {
            flex-grow: 1;
            padding: 36px 48px 36px 64px;
            min-height: 128px;
            align-content: center;
            border-left: 1px solid hsla(213, 23%, 23%, 1);

            > p:not(:last-child) {
                margin-bottom: 8px;
            }
        }
    }

    a:not(.rz-pager a) {
        color: hsla(190, 67%, 56%, 1);
        text-decoration: underline;
        text-underline-offset: 4px;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 2px 4px 4px 4px;
        margin: -2px -4px -4px -4px;
        transition: 0.1s;
        line-height: 160%;

        &:hover {
            background-color: hsla(0, 0%, 100%, 0.15);
        }

        &:focus {
            border: 1px solid var(--blue-90);
            box-shadow: 0 0 4px 0 var(--blue-90);
        }
    }

    h1 {
        font-size: 34px;
    }

    h2 {
        font-weight: 700;
        font-size: 30px;
    }

    h3 {
        font-weight: 700;
        font-size: 24px;
    }

    h4 {
        font-weight: 700;
        font-size: 18px;
    }

    h5 {
        font-weight: 700;
        font-size: 16px;
    }

    h6 {
        font-weight: 700;
        font-size: 14px;
    }

    :is(p, a) > :is(i, img) {
        display: inline-block;
        vertical-align: middle;
        margin-left: 4px;
    }

    header > :is(p, a) > i {
        background-color: currentColor;
    }

    .text-default {
        color: var(--clr-default);
    }

    .text-safe {
        color: var(--clr-safe);
    }

    .text-danger {
        color: var(--clr-danger);
    }

    .text-warning {
        color: var(--clr-warning);
    }

    .text-low-risk {
        color: var(--clr-low-risk);
    }

    .text-medium-risk {
        color: var(--clr-medium-risk);
    }

    .text-high-risk {
        color: var(--clr-high-risk);
    }

    .text-low-risk, .text-medium-risk, text-high-risk {
        font-weight: 700;
    }

    .text-neutral {
        color: var(--clr-neutral);
    }

    .text-unavailable {
        color: var(--clr-unavailable);
    }

    i {
        display: block;
        aspect-ratio: 1 / 1;
        height: 1em; /*Deliberate em usage so icons fit to current font*/
        mask-repeat: no-repeat;
        mask-position: center;

        &.download {
            -webkit-mask-image: url(/assets/download.svg);
            mask-image: url(/assets/download.svg);
        }

        &.back {
            -webkit-mask-image: url(/assets/back.svg);
            mask-image: url(/assets/back.svg);
        }

        &.forward {
            -webkit-mask-image: url(/assets/forward.svg);
            mask-image: url(/assets/forward.svg);
        }

        &.external {
            -webkit-mask-image: url(/assets/external.svg);
            mask-image: url(/assets/external.svg);
            background: var(--blue-90);
        }

        &.clipboard {
            -webkit-mask-image: url(/assets/clipboard.svg);
            mask-image: url(/assets/clipboard.svg);
            background: var(--blue-90);
        }

        &.accordion-arrow {
            -webkit-mask-image: url(/assets/accordion-arrow.svg);
            mask-image: url(/assets/accordion-arrow.svg);
        }

        &.circled-tick {
            background-image: url(/assets/circled-tick.svg);
            height: 20px;
        }

        &.circled-alert {
            background-image: url(/assets/circled-alert.svg);
            height: 20px;
        }

        &.high-risk {
            background-image: url(/assets/high-risk.svg);
            height: 20px;
        }

        &.medium-risk {
            background-image: url(/assets/medium-risk.svg);
            height: 20px;
        }

        &.low-risk {
            background-image: url(/assets/low-risk.svg);
            height: 20px;
        }

        &.empty-data-icon {
            content: url(/assets/empty-data.svg);
            height: 200px;
            width: 300px;
        }

        &.storage-monitoring-connection-error {
            content: url(/assets/storage-monitoring/unable-to-connect.svg);
            height: 200px;
            width: 300px;
        }

        &.storage-monitoring-notification-error {
            content: url(/assets/storage-monitoring/not-receiving-notifications.svg);
            height: 200px;
            width: 300px;
        }
    }


    .accordion {
        display: grid;
        grid-template-rows: max-content 0fr;
        transition: grid-template-rows 0.5s;
        padding-left: 12px;

        &.open {
            grid-template-rows: max-content 1fr;

            > header > :first-child::before {
                transform: scale(-1);
            }
        }

        &:not(:first-of-type) {
            border-top: 1px solid #ffffff10;
            padding-top: 16px;
        }

        &:not(:last-of-type) {
            padding-bottom: 16px;
        }

        > :last-child {
            overflow: hidden;
        }

        > header {
            cursor: pointer;
            display: flex;
            justify-content: space-between;

            > * {
                display: flex;
                align-items: center;
                gap: 8px;
            }

                > *:first-child::before {
                    content: '';
                    width: 16px;
                    height: 16px;
                    transform: scale(1);
                    -webkit-mask: url(/assets/accordion-arrow.svg) no-repeat center;
                    mask: url(/assets/accordion-arrow.svg) no-repeat center;
                    mask-size: contain;
                    background-color: var(--blue-90);
                    transition: 0.3s ease;
                    margin-right: 8px;
                }
        }

        > div > div {
            padding-top: 8px;
            margin: 0 0 8px 32px;

            > .accordion:first-of-type {
                padding-top: 32px;
            }

            > p {
                &:first-of-type {
                    color: #9FA5B1;
                    font-size: 12px;
                }

                + h6 {
                    margin-top: 8px;

                    + ul {
                        padding-left: 20px;
                    }
                }
            }
        }
    }

    .pointer {
        cursor: pointer;
        padding: 2px;
        border: 1px solid transparent;
        transition: 0.1s all;

        &:hover {
            border: 1px solid var(--blue-90);
            box-shadow: 0 0 4px 0 var(--blue-90);
        }

        &:focus {
            border: 1px solid transparent;
            box-shadow: 0 0 0 2px var(--blue-90), 0 0px 4px 2px var(--blue-90);
        }
    }

    .tooltip-wrapper {
        position: absolute;
        z-index: 110;
    }

    .tooltip-popup {
        box-shadow: 0px 0px 70px 0px hsla(0, 0%, 0%, 0.07), 0px 4px 11px 0px hsla(0, 0%, 0%, 0.02);
        border-radius: 4px;
        padding: 12px;
        color: var(--clr-default);
        background-color: var(--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(--clr-tooltip);
        transform: translateX(-50%);
        color: var(--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(--clr-tooltip);
        transform: translateX(-50%);
        color: var(--clr-tooltip);
    }

    .tooltip-dismiss {
        z-index: 60;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .info-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 150%;
        padding-bottom: 8px;
    }

    .empty-content {
        justify-content: center;
        align-items: center;
        text-align: center;

        > i {
            display: inline-block;
            padding-bottom: 16px;
        }

        > p {
            color: hsl(220, 11%, 66%);
            white-space: pre-wrap;
            line-height: 160%;
        }
    }

    .page-header {
        padding-bottom: 32px;
    }

    .layout-scrollable {
        overflow-y: auto;
    }

    .rz-card-table {
        tr.rz-data-row {
            background: hsl(213, 30%, 12%);
            height: 70px;
        }

        .rz-grid-table {
            border-spacing: 0 8px;
        }

        .rz-data-row > td:first-child {
            border-bottom-left-radius: 8px;
            border-top-left-radius: 8px;
        }

        .rz-data-row > td:last-child {
            border-bottom-right-radius: 8px;
            border-top-right-radius: 8px;
        }

        .rz-cell-data {
            line-height: 110%;

            p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .card .list-picker-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content min-content auto;
        grid-template-areas:
            'search filter'
            'checkbox toggle'
            'data data';
        gap: 24px;
        height: 90%;
        min-height: 450px;
        max-height: 670px;

        .loader {
            grid-area: data;
        }

        .filter-wrapper {
            grid-area: filter;
        }

        .checkbox-wrapper {
            grid-area: checkbox;
            display: flex;
            gap: 8px;
            padding-left: 18px;

            i {
                height: 16px;
                width: 16px;
            }
        }

        .toggle-wrapper {
            grid-area: toggle;
            display: flex;
            align-items: center;
            gap: 8px;
            justify-self: left;
            justify-content: right;
            width: 100%;
            cursor: pointer;
        }

        .rz-card-table {
            &:not(.edit-table) {
                grid-area: data;
            }

            &.edit-table {
                grid-column: span 2;
            }

            padding-left: 0;
            max-height: 100%;

            tr.rz-data-row {
                height: 40px;

                td {
                    background: hsla(212, 22%, 15%, 1);

                    &:nth-child(3) p {
                        color: hsla(220, 11%, 66%, 1);
                        font-size: 12px;
                    }

                    span {
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    max-width: 5px;
                }
            }

            th {
                display: none;
            }

            .rz-data-grid-data {
                padding-right: 8px;

                &::-webkit-scrollbar {
                    width: 8px;
                }

                &::-webkit-scrollbar-track {
                    background-color: transparent;
                    border: 0;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: 8px;
                    background-color: hsla(0, 0%, 100%, 0.1);
                }

                @supports not selector(::-webkit-scrollbar) {
                    padding-right: 16px;
                    scrollbar-color: hsla(0, 0%, 100%, 0.1) transparent;
                    scrollbar-gutter: stable;
                }
            }
        }

        .rz-grid-table tbody::before {
            content: none;
        }

        .rz-data-row td {
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .rz-pager-pages, .rz-pager-first, .rz-pager-last {
            display: none;
        }

        .rz-pager-element {
            border-radius: 4px;

            &:hover:not([disabled]) {
                background-color: hsla(213, 23%, 23%, 1);
            }

            &:focus {
                background-image: none;
            }

            &:focus-visible:not([disabled]) {
                box-shadow: 0 0 4px 1px var(--clr-glow-0);
                outline: 2px solid var(--clr-secondary-95);
                outline-offset: -2px;
                background-image: none;
            }
        }
    }

    .search-wrapper {
        grid-area: search;
        display: grid;
        gap: 12px;

        div:first-of-type {
            display: flex;
            border-style: solid;
            border-color: var(--clr-input-text-border-0);
            border-width: 0;
            border-radius: 0.3125rem;
            align-items: center;
            background-color: var(--clr-background-10);
            outline: none;
            transition: 0.1s;
            height: fit-content;

            &:hover:not[disabled] {
                background-color: var(--clr-input-text-hover-0);
            }

            &[disabled] {
                opacity: 0.5;
            }

            input[type=search] {
                border: none;
                border-top-left-radius: 0.3125rem;
                border-bottom-left-radius: 0.3125rem;
                padding: 8px 16px;
                background: transparent;
                color: var(--clr-primary-100);
                flex: 1;
                min-width: 0;
                height: 36px;
                box-sizing: border-box;

                &::placeholder {
                    color: var(--clr-neutral-70);
                }

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

            button {
                all: unset;
                border: 0;
                padding: 0;
                margin: 0;
                cursor: pointer;
                opacity: 1;
                height: 36px;
                width: 36px;
                text-align: center;
                transition: opacity 0.1s;
                color: white;

                &:disabled {
                    opacity: 0.3;
                    cursor: default;
                }

                &:hover:not(:disabled) {
                    box-shadow: none;
                    border: 0;

                    i {
                        background-color: var(--blue-90);
                    }
                }

                &:focus-visible {
                    border: 0;
                    box-shadow: 0 0 4px 1px var(--clr-glow-0);
                    outline: 2px solid var(--clr-secondary-95);
                    outline-offset: -2px;
                    opacity: 1;

                    &:last-child
                    {
                        border-top-right-radius: 0.3125rem;
                        border-bottom-right-radius: 0.3125rem;
                    }
                }

                &.hidden {
                    display: none;
                }

                i {
                    height: 16px;
                    vertical-align: bottom;
                    transition: background-color 0.1s;

                    &.close {
                        height: 12px;
                        width: 12px;
                        padding: 2px 0;
                        box-sizing: content-box;
                    }
                }
            }
        }
    }

    .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);

        &.inactive {
            pointer-events: none;
            cursor: default;
            opacity: 0.5;
        }

        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;

            &::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;
            }
        }

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

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

    .form-actions {
        display: flex;
        padding-top: 10px;

        .navigation {
            width: 50%;
            justify-content: start;
        }

        .buttons {
            width: 50%;
            justify-content: flex-end;
        }
    }
}


.layout-centered-form {
    display: grid;
    grid-template-columns: 1fr 3.5fr;
    gap: 16px;
    padding: 16px;

    > * {
        flex-basis: 40%;
        display: flex;
        padding-bottom: 20px;
    }

    > :nth-child(odd) {
        justify-content: end;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    > :nth-child(even) {
        justify-content: start;

        > * button {
            min-width: 500px;
        }
    }
}

.layout-double-column {
    display: flex;
    gap: 64px;
    flex-wrap: wrap;

    & > * {
        flex: 1 1 0;
        min-width: min-content;
    }

    & + div.clipboard-field {
        margin-top: 8px;
    }
}

.radio-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;

    > * {
        margin: 0 auto;
    }
}

.radio-card {
    text-align: center;
    border: 1px solid #FFFFFF1A;
    background: #151D27;
    border-radius: 8px;
    color: #9FA5B1;
    padding: 1rem;
    cursor: pointer;

    &.selected {
        border: 1px solid #43C2DA
    }

    .header {
        min-height: 80px;
        border-bottom: 1px solid #1F2730;

        h5 {
            margin: 0;
            font-weight: 700;
            font-size: 14px;
            line-height: 160%;
            letter-spacing: 0px;
            text-align: center;
            color: #9FA5B1;
        }

        h4 {
            margin: 0;
            color: #FFFFFF;
            font-weight: 700;
            font-size: 18px;
            line-height: 160%;
            letter-spacing: 0.15px;
            text-align: center;
        }
    }

    .content {
        padding-top: .5rem;
    }
}

img.mini-loading-spinner {
    animation: spin 1s steps(8, end) infinite;
    height: 32px;
}

@keyframes discrete-spin {
    to {
        transform: rotate(360deg);
    }
}