/*#region Variables */

:root {
    --font-family-primary: "Segoe UI", "Segoe-UI", sans-serif;
    --border-radius: 6px;
    --bubble-border-radius: 50px;
    --sub-menu-ul-background: #CCEDEB;
    --font-color: #394153;
    /* Brand (style guide) */
    --green: #28A745;
    --orange: #FFC107;
    --red: #DC3545;
    --blue: #17A2B8;
    --purple: #611A67;
    --purple-dark: #380040;
    --teal-dark: #4F7594;
    --teal-mid: #66C7C2;
    --teal-light: #CCEDEB;
    /* Pastel strength (higher = softer) */
    --pastel-white: 70%;
    /* Pastel tokens */
    --green-pastel: color-mix(in oklab, var(--green) 30%, white var(--pastel-white));
    --orange-pastel: color-mix(in oklab, var(--orange)30%, white var(--pastel-white));
    --red-pastel: color-mix(in oklab, var(--red) 30%, white var(--pastel-white));
    --blue-pastel: color-mix(in oklab, var(--blue) 30%, white var(--pastel-white));
    --informational-urgency-background-color: var(--blue-pastel); /* Was #B0E4F2; */
    --informational-urgency-border-color: var(--blue); /* Was #86BCD0; */
    --low-urgency-background-color: var(--green-pastel); /* Was #A2E3A5; */
    --low-urgency-border-color: var(--green); /* Was #76B97C; */
    --medium-urgency-background-color: var(--orange-pastel); /* Was #FFD28D; */
    --medium-urgency-border-color: var(--orange); /* Was #D1A462; */
    --high-urgency-background-color: var(--red-pastel); /* Was #F59A93; */
    --high-urgency-border-color: var(--red); /* Was #C06F69; */
}

/*#endregion */

/*#region Banners */

.banner {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #CCEDEB;
    color: black;
    padding: 10px 20px;
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    user-select: none;
}

    .banner > span {
        /*border: 1px solid blue;*/
    }

    .banner > img {
        /*border: 1px solid red;*/
        display: none;
        height: 26px;
    }

    .banner:hover {
        filter: brightness(102%);
    }

    .banner.yellow {
        background: #FFE4A0;
        color: black;
    }

    .banner.working > img {
        display: inline;
    }

/*#endregion */

/*#region Containers */

div.page-content {
    /* flex: 1;
    overflow: auto;
    border: 4px solid blue;*/
    flex: 1;
    overflow: hidden;
    /*border: 4px solid purple;*/
}

div.table-container {
    height: 85%;
    overflow-y: auto;
}

div.content-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 54px - 79px - 42px);
    overflow: auto;
}

div.sub-container {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding-left: 2px;
}

div.content-container,
div.container.content,
.sys-field-container {
    padding: 15px 25px 20px 20px;
}

div.error-container,
div.container.error {
    font-family: var(--font-family-primary);
    padding: 15px 15px 15px 20px;
}

    div.error-container > span,
    div.container.error > span {
        display: block;
    }

        div.error-container > span:first-of-type,
        div.container.error > span:first-of-type {
            font-weight: 500;
            color: red;
        }

        div.error-container > span:last-of-type,
        div.container.error > span:last-of-type {
            font-size: 9pt;
            color: gray;
        }

div.filter-controls-container {
    display: flex;
    align-items: flex-start;
    /*border: 1px solid red;*/
}

    div.filter-controls-container > input:not(:last-child),
    div.filter-controls-container > div:not(:last-child) {
        display: inline-block;
        margin-right: 20px;
    }


    div.filter-controls-container > img.progress {
        height: 32px;
        max-height: 32px;
    }

div.form-buttons-container,
div.horizontal-controls-container {
    /*border: 1px solid red;*/
    display: flex;
    align-items: flex-start;
    max-height: 32px;
}

div.form-buttons-container,
div.horizontal-controls-container {
    height: 32px;
}

    div.form-buttons-container > *:not(:last-child),
    div.horizontal-controls-container > *:not(:last-child) {
        margin-right: 15px;
    }

    div.form-buttons-container > *,
    div.horizontal-controls-container > * {
        max-height: 32px;
    }

div.metric-chart-container {
    display: inline-block;
    width: 500px;
}

    div.metric-chart-container:not(:last-of-type) {
        margin-right: 20px;
    }

    div.metric-chart-container > div.summary {
        height: 100px;
        border-radius: var(--border-radius);
        width: 500px;
        background: blue;
        padding: 10px 15px 15px 15px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        user-select: none;
    }


        div.metric-chart-container > div.summary:hover {
            filter: brightness(98%);
        }

        div.metric-chart-container > div.summary > div:first-of-type {
            display: flex;
            flex-direction: column;
        }

    div.metric-chart-container.style-1 > div.summary {
        background: #67C7C3;
        color: var(--font-color);
    }

    div.metric-chart-container.style-2 > div.summary {
        background: #4F7594;
    }

    div.metric-chart-container > div.summary > div.right {
        max-width: 200px;
    }

        div.metric-chart-container > div.summary > div.left > span,
        div.metric-chart-container > div.summary > div.right > span {
            display: block;
            font-size: 10pt;
        }

            div.metric-chart-container > div.summary > div.left > span:first-of-type {
                font-size: 16pt;
                font-weight: 600;
            }

            div.metric-chart-container > div.summary > div.right > span:first-of-type {
                font-size: 36pt;
                font-weight: bold;
                margin-bottom: 0;
                line-height: 36pt;
            }

                div.metric-chart-container > div.summary > div.right > span:first-of-type.medium {
                    color: #FF8000;
                    /*text-shadow: -1px 0 white, 1px 0 white, 0 -1px white, 0 1px white;*/
                }

            div.metric-chart-container > div.summary > div.right > span:last-of-type {
                font-size: 9pt;
            }

    div.metric-chart-container > div.loading {
        /*border: 1px solid blue;*/
        margin-top: 5px;
        font-size: 10pt;
    }


    div.metric-chart-container > div.chart {
        padding: 0;
        height: 300px;
    }

        div.metric-chart-container > div.chart > canvas {
            display: block;
        }

    div.metric-chart-container > div.loading {
        /*border: 1px solid red;*/
    }

        div.metric-chart-container > div.loading > span {
            display: block;
            padding-left: 8px;
/*            border: 1px solid blue;*/
            font-size: 10pt;
        }
/*#endregion */

/*#region Buttons */
input[type=button].std-button, button.std-button {
    padding: 0 20px;
    height: 32px;
    border: none;
    font-family: var( --font-family-primary);
    background: #611A67;
    color: white;
    font-size: 11pt;
    border-radius: var(--border-radius);
}

button.std-button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
}

    button.std-button img {
        width: 16px;
        height: 16px;
        /*border: 1px solid yellow;*/
    }

    input[type=button].std-button.critical,
    button.std-button.critical {
        background: #EA0000;
    }

    input[type=button].std-button:hover,
    button.std-button:hover {
        background: #380040;
        cursor: pointer;
    }

    input[type=button].std-button.active,
    button.std-button.active {
        background: #380040;
    }

    input[type=button].std-button.critical:hover,
    button.std-button.critical:hover {
        background: #FF0000;
    }

    input[type=button].std-button.wide,
    button.std-button.wide {
        width: 130px;
    }

input[type=button][disabled=disabled].std-button,
input[type=button][disabled=disabled].std-button.critical,
button[disabled=disabled].std-button.critical {
    background: #6C757D;
    color: #FFFFFF;
}

    input[type=button][disabled=disabled].std-button:hover,
    input[type=button][disabled=disabled].std-button.critical:hover,
    button[disabled=disabled].std-button.critical:hover {
        cursor: default;
    }



/*#endregion */

/*#region Inputs */
input[type="text"],
input[type="email"],
select.std-select,
textarea {
    display: block;
    height: 32px;
    width: 330px;
    padding-left: 6px;
    font-family: var(--font-family-primary);
    font-size: 11pt;
    line-height: 1.5;
    color: #000000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    /* Glow effect for input */
    input[type="text"]:focus,
    input[type="email"]:focus,
    select.std-select:focus,
    textarea:focus {
        border-color: #75C8C4;
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(197,228,227,.75);
    }

    input[type="text"].invalid,
    input[type="email"].invalid {
        border: 1px solid red;
    }

/* Custom styling for select */
.std-select {
    padding-left: 6px;
    font-family: var(--font-family-primary);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('../../img/arrow-204-24.png') no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 12px;
}

span.sys-field {
    width: 300px;
    display: block;
    background: black;
    color: white;
    margin-bottom: 8px;
    padding: 6px 8px 6px 8px;
    font-size: 10pt;
    font-family: Consolas, Arial;
}

textarea {
    width: 100%;
    height: 200px;
    padding: 4px 6px;
}

/*#endregion */

/*#region Modifiers */

.margin-bottom-small {
    display: block;
    margin-bottom: 10px;
}

.margin-bottom-medium {
    display: block;
    margin-bottom: 15px;
}

.margin-right-small {
    margin-right: 10px;
}

.margin-right-medium {
    margin-right: 15px;
}

.margin-top-large {
    margin-top: 20px !important;
}

.margin-top-xl {
    margin-top: 25px !important;
}


.user-select-none {
    user-select: none;
}

.hidden {
    display: none !important;
}

.block {
    display: block;
}

.error {
    color: red;
}

.no-text > p,
.no-text > span {
    border: 1px solid blue;
    display: none;
}

.float-right {
    float: right;
}

/*#endregion */

/*#region Matrix grid */

.matrix {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-width: 1200px;
    max-width: 1200px;
    font-family: var(--font-family-primary);
    padding: 10px;
    background: #E9ECEF;
    border-radius: var(--border-radius);
}

    .matrix .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .matrix .header {
        background: white;
        font-weight: 500;
        padding: 10px;
        text-align: center;
        border: 1px solid #ccc;
        width: 100%;
        user-select: none;
        /*min-height: 88px;*/
        margin-bottom: 10px;
        color: var(--font-color);
    }

    .matrix > .column:first-of-type > .header {
        border-top-left-radius: var(--border-radius);
    }

    .matrix > .column:last-of-type > .header {
        border-top-right-radius: var(--border-radius);
    }

    .matrix > .column:first-of-type > .cell:last-of-type {
        border-bottom-left-radius: var(--border-radius);
    }

    .matrix > .column:last-of-type > .cell:last-of-type {
        border-bottom-right-radius: var(--border-radius);
    }

    .matrix > .column > .header > span {
        /*border: 1px solid green;*/
        display: block;
        font-size: 10.5pt;
        font-weight: 500;
    }

        .matrix > .column > .header > span:last-of-type {
            display: none;
        }

        .matrix > .column > .header > span:first-of-type {
            text-transform: uppercase;
            font-size: 13pt;
            font-weight: bold;
        }


    .matrix .cell {
        display: flex;
        background: #c8e6c9;
        border: 1px solid #ccc;
        text-align: center;
        width: 100%;
        min-height: 120px;
        width: 380px;
        min-width: 280px;
        user-select: none;
    }

        .matrix .cell:not(:last-of-type) {
            margin-bottom: 10px;
        }

        .matrix .cell.informational-urgency {
            background: var(--informational-urgency-background-color);
            border: 1px solid var(--informational-urgency-border-color);
        }

        .matrix .cell.low-urgency {
            background: var(--low-urgency-background-color);
            border: 1px solid var(--low-urgency-border-color);
        }

        .matrix .cell.medium-urgency {
            background: var(--medium-urgency-background-color);
            border: 1px solid var(--medium-urgency-border-color);
        }

        .matrix .cell.high-urgency {
            background: var(--high-urgency-background-color);
            border: 1px solid var(--high-urgency-border-color);
        }

        .matrix .cell.informational-urgency:hover {
            background: #C5ECF7;
        }

        .matrix .cell.low-urgency:hover {
            background: #B4EABC;
        }

        .matrix .cell.medium-urgency:hover {
            background: #FFDC9E;
        }

        .matrix .cell.high-urgency:hover {
            background: #F7A9A3;
        }

        .matrix .cell > div {
            flex: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            color: black;
            font-family: var(--font-family-primary);
        }

            .matrix .cell > div:first-of-type {
                flex-direction: column;
                justify-content: center;
                flex: 8;
                /*border: 1px solid red;*/
                margin-left: 15px;
                align-items: stretch;
                justify-content: flex-start;
            }

                .matrix .cell > div:first-of-type > span {
                    /*border: 1px solid green;*/
                    display: inline-block;
                    text-align: left;
                    font-weight: normal;
                    font-size: 10pt;
                    align-self: stretch;
                    text-align: left;
                }

                    .matrix .cell > div:first-of-type > span:first-of-type {
                        margin-top: 15px;
                    }

                    .matrix .cell > div:first-of-type > span:last-of-type {
                        /*border: 1px solid blue;*/
                        font-weight: normal;
                        font-size: 10pt;
                        margin-top: auto;
                        margin-bottom: 10px;
                    }

            .matrix .cell > div:last-of-type {
                flex: 2;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                /*border: 1px solid yellow;*/
            }

                .matrix .cell > div:last-of-type > span {
                    display: inline-block;
                    text-align: right;
                    font-size: 40pt;
                    font-weight: bold;
                    margin: 0;
                    width: 100%;
                    text-align: right;
                    padding: 0 15px 0 0;
                    line-height: 1;
                    transform: translateY(-5%);
                    /*border: 1px solid orange;*/
                }

        .matrix .cell .technique-count-link:hover {
            cursor: pointer;
        }


/*#endregion */

/*#region Details container (modal)*/

div.details-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    background: rgba(0, 0, 0, 0.7); /* Keeps children fully visible */
    z-index: 999;
    user-select: none;
    top: 0;
    left: 0;
}

.details-modal {
    position: absolute;
    width: 600px;
    height: 440px;
    background: white;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 0 5px #60116a;
    overflow: hidden;
    opacity: 1.0;
}

    .details-modal > .top {
        width: 100%;
        height: 40px;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        /*border: 1px solid green;*/
    }

        .details-modal > .top > img {
            width: 22px;
            height: 22px;
            opacity: 0.7;
            margin-right: 10px;
        }

            .details-modal > .top > img:hover {
                cursor: pointer;
            }


    .details-modal > .middle {
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px 20px 0 20px;
        /*border: 1px solid red;*/
    }

        .details-modal > .middle > img {
            width: 90px;
            height: 90px;
            margin-left: 15px;
        }

    .details-modal > .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        /*border: 1px solid blue;*/
        padding: 0 20px;
    }

        .details-modal > .bottom > span {
            display: block; /* Ensures both spans take full width */
            text-align: center; /* Centers text inside */
            padding: 8px 0;
            font-family: var(--font-family-primary);
            font-size: 11pt;
        }

.details-modal > .bottom > span:first-of-type {
    font-weight: bold;
    font-size: 14pt;
}

.details-modal > .bottom > input {
    margin-top: 10px;
}

/*#endregion */

/*#region Animation and images */

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50px);
    }

    60% {
        opacity: 1;
        transform: translate(-50%, 10px);
    }

    80% {
        transform: translate(-50%, -5px);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

img.coming-soon {
    height: 100px;
    margin-top: 10px;
}

/*#endregion */

/*#region Tables */

table.std-table {
    width: 100%;
    /*table-layout: fixed;*/
    table-layout: auto;
    border-collapse: collapse;
    font-family: var(--font-family-primary);
    font-size: 11pt;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

    table.std-table thead th {
        background-color: #5E1A69;
        color: white;
        user-select: none;
        text-align: left;
        font-weight: 500;
        font-size: 11pt;
        padding: 10px;
        /*position: relative;*/
        padding-right: 20px;
        position: sticky;
    }

th::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.5;
}

/* Ascending arrow */
table thead th.sort-asc::after {
    content: '▲';
    opacity: 1;
}

/* Descending arrow */
table thead th.sort-desc::after {
    content: '▼';
    opacity: 1;
}

table.std-table thead th[data-property]:hover {
    cursor: pointer;
    /*border: 1px solid red;*/
}

table.std-table thead th.first-visible {
    border-top-left-radius: var(--border-radius);
}

table.std-table thead th.last-visible {
    border-top-right-radius: var(--border-radius);
}

table.std-table thead th.action-header {
    /*    background: blue;*/
    text-align: center;
    padding-right: 10px;
}

table.std-table tbody tr {
    height: 40px;
    background: white;
    border-bottom: 1px solid #E3E6EA;
}

    table.std-table tbody tr:nth-child(even) {
        background-color: #F9F9F9;
    }

    table.std-table tbody tr:hover {
        background-color: #D2ECEC;
        cursor: pointer;
    }

    table.std-table tbody tr.selected {
        background: #FAF3B7;
    }


table.std-table tbody td {
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.std-table > tbody > tr > td.escalate {
    /*border: 1px solid blue;*/
    padding: 0;
}

table.std-table tbody td.restrict-width-250 {
    min-width: 250px;
    max-width: 250px;
    /*color: blue;*/
}

table.std-table tbody td.restrict-width-150 {
    min-width: 150px;
    max-width: 150px;
    width: 150px;
    /*border: 2px solid blue;*/
}

table.std-table tbody td.restrict-width-125 {
    min-width: 125px;
    max-width: 125px;
    width: 125px;
    /*border: 2px solid blue;*/
}

table.std-table .system-header,
table.std-table .table-header.system,
table.std-table .system-data,
table.std-table .table-data.system,
table.std-table > thead > tr > th.system,
table.std-table > tbody > tr > td.system {
    background: #808080;
    color: white;
    display: none;
}

/*#endregion */

/*#region Table elements */

table.std-table td.tictac {
    margin: 0;
    padding: 0;
}

    table.std-table td.tictac > span {
        padding: 4px 16px;
        border-radius: var(--bubble-border-radius);
        font-size: 11pt;
        font-weight: 400;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 120px;
        display: inline-block;
        color: black;
    }

    table.std-table td.tictac.informational > span {
        background: var(--informational-urgency-background-color);
        color: black;
        /*border: 1px solid var(--informational-urgency-border-color);*/
    }

    table.std-table td.tictac.low > span {
        background: var(--low-urgency-background-color);
        color: black;
        /*border: 1px solid var(--low-urgency-border-color);*/
    }

    table.std-table td.tictac.medium > span {
        background: var(--medium-urgency-background-color);
        color: black;
        /*border: 1px solid var(--medium-urgency-border-color);*/
    }

    table.std-table td.tictac.high > span {
        background: var(--high-urgency-background-color);
        color: black;
        /*border: 1px solid var(--high-urgency-border-color);*/
    }

table.std-table tbody td.actions {
    padding: 0 10px;
    display: flex;
    align-items: center; /* vertical */
    justify-content: left; /* horizontal */
    height: 100%;
    gap: 10px;
    /*border: 1px solid red;*/
}

    table.std-table tbody td.actions > img {
        height: 24px;
        display: none;
        /*border: 1px solid red;*/
    }

    table.std-table tbody td.actions > img {
        display: inline;
        opacity: 0.4;
    }

    table.std-table tbody td.actions:hover > img:hover {
        display: inline;
        opacity: 1;
    }

    table.std-table tbody td.actions > img.escalate.disabled:hover {
        /*border: 1px solid red;*/
        opacity: 0.4;
        cursor: default;
    }

table.std-table.actions-only-on-hover tbody > tr > td.actions > img {
    display: none;
}

table.std-table.actions-only-on-hover tbody > tr:hover > td.actions > img {
    display: inline;
}


table.std-table .std-button {
    height: 26px;
    min-width: 136px;
    max-width: 136px;
    width: 136px;
    font-size: 11pt;
}

/*#endregion */

/*#region Bubble filter control */
div.bubble-select {
    user-select: none;
}

    div.bubble-select > div:first-of-type {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: #a9d9d7;
        font-family: var(--font-family-primary);
        display: inline-block;
        color: black;
        padding: 0 20px;
        height: 32px;
        border: 1px solid #a9d9d7;
        border-radius: var(--bubble-border-radius);
    }

        div.bubble-select > div:first-of-type:hover {
            background: #b8dedc;
            border: 1px solid #b8dedc;
            cursor: pointer;
        }

        div.bubble-select > div:first-of-type > span {
            line-height: 30px;
        }

            div.bubble-select > div:first-of-type > span:last-of-type {
                font-weight: 500;
                font-size: 11pt;
            }

    div.bubble-select > div:last-of-type {
        position: absolute;
        width: fit-content;
        min-width: 180px;
        border: 1px solid #E9ECEF;
        background: #ffffff;
        font-family: var(--font-family-primary);
        font-size: 11pt;
        border-radius: var(--border-radius);
        box-shadow: 0 0 6px #E9ECEF;
        overflow: hidden;
        opacity: 1;
        padding: 10px 20px 10px 10px;
        margin-top: 6px;
        display: none;
        z-index: 999;
    }

    div.bubble-select.expanded > div:last-of-type {
        position: absolute;
        display: block;
    }

    div.bubble-select > div:last-of-type > ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        div.bubble-select > div:last-of-type > ul > li {
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            div.bubble-select > div:last-of-type > ul > li:last-of-type {
                margin-bottom: 10px;
            }

/*#endregion */

/*#region checkboxes */

div.std-checker {
    /*border: 1px solid red;*/
    display: flex;
    align-items: flex-start;
    font-size: 11pt;
    gap: 8px;
    user-select: none;
    /*border: 1px solid red;*/
    width: fit-content;
}

    div.std-checker > span {
        /*border: 1px solid blue;*/
        line-height: 20px;
        user-select: none;
    }

    li.std-checker > div,
    div.std-checker > div {
        border: 1px solid #C4C9D0;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        display: inline-block;
        padding: 4px;
        background-size: calc(100% - 8px);
        background-position: center;
        background-repeat: no-repeat;
        box-sizing: border-box;
    }

    li.std-checker:not(.selected):hover > div,
    div.std-checker:not(.selected):hover > div {
        border: 1px solid #AFB7C0;
        background-image: url('/img/checkmark-48.png');
    }

    li.std-checker.selected > div,
    div.std-checker.selected > div {
        background-color: #C4A9DA;
        background-image: url('/img/checkmark-48-black.png');
    }

    li.std-checker:hover,
    div.std-checker:hover {
        cursor: pointer;
    }

/*#endregion */

/*#region Text, labels and messages */
label {
    font-size: 11pt;
    margin-bottom: 4px;
    display: inline-block;
}

    label.block,
    span.block {
        display: block;
    }

div.info-message {
    height: 24px;
    /*border: 1px solid red;*/
    margin-top: 10px;
    margin-bottom: 10px;
}

    div.info-message > img,
    div.info-message > span {
        display: inline-block;
        vertical-align: top;
    }

    div.info-message > img {
        width: 24px;
        height: 24px;
    }

    div.info-message > span {
        line-height: 24px;
    }

/*#endregion */

/*#region Masking */

div.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0px;
    left: 0px;
    z-index: 999;
}

    div.mask.transparent {
        background-color: rgba(0, 0, 0, 0);
    }

/*#endregion */

/*#region Links */

a.std-link,
button.std-link {
    text-decoration: none;
    color: blue;
    background: none;
    border: none;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12pt;
}

    a.std-link:visited,
    button.std-link:visited {
        text-decoration: none;
        color: blue;
    }

    a.std-link.bold,
    button.std-link.bold {
        font-weight: 500;
    }

    a.std-link:hover,
    button.std-link:hover {
        text-decoration: underline;
        cursor: pointer;
    }

a.btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: black;
    font-size: 11pt;
    min-width: 120px;
    height: 32px;
    border-radius: 6px;
    padding: 0 20px;
    width: fit-content;
}

    a.btn-link:hover {
        background: #E1E1E1;
    }

/*#endregion */

/*#region Toast */
#toast-container.toast-top-right {
    top: 70px;
}

/*#endregion */

/*#region Cards */

/*Base card*/
.card {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    min-height: 96px;
}

/*Icons*/
.card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    color: #FFFFFF;
}

    .card-icon.purple {
        background: var(--purple);
    }

    .card-icon.purple-dark {
        background: var(--purple-dark);
    }

    .card-icon.teal-dark {
        background: var(--teal-dark);
    }

    .card-icon.teal-mid {
        background: var(--teal-mid);
    }

    .card-icon.teal-light {
        background: var(--teal-light);
    }

    .card-icon svg,
    .card-icon .icon {
        width: 22px;
        height: 22px;
    }

    .card-icon svg {
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
    }

/*Accents*/
.card-1.accent-purple {
    --card-accent: var(--purple);
}

.card-1.accent-purple-dark {
    --card-accent: var(--purple-dark);
}

.card-1.accent-teal-dark {
    --card-accent: var(--teal-dark);
}

.card-1.accent-teal-mid {
    --card-accent: var(--teal-mid);
}

.card-1.accent-teal-light {
    --card-accent: var(--teal-light);
}

/*Content*/
.card-content {
    display: grid;
    gap: 4px;
}

.card-label {
    font: 600 14px/1.2 "Segoe UI";
    color: #6C757D;
}

.card-value {
    font: 700 28px/1 "Segoe UI";
    letter-spacing: -0.25px;
}

.card-subtitle {
    font: 400 12px/1.2 "Segoe UI";
    color: #6C757D;
}

/*Card layout number 1*/
.card-1 {
    position: relative;
    overflow: hidden;
    --card-accent: var(--purple);
}

.card-1::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 6px;
    background: var(--card-accent);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

/*#endregion */