:root {
    /* max content width */
    --site-width: 1920px;
    --site-margins: var(--spacer-x3);
    /* density variables */
    --spacer-x1: 1rem; /* change spacer value to change density in the layout */
    --spacer-x025: calc(var(--spacer-x1) * .25);
    --spacer-x05: calc(var(--spacer-x1) * .5);
    --spacer-x075: calc(var(--spacer-x1) * .75);
    --spacer-x2: calc(var(--spacer-x1) * 2);
    --spacer-x3: calc(var(--spacer-x1) * 3);
    --spacer-x4: calc(var(--spacer-x1) * 4);
    --spacer-x6: calc(var(--spacer-x1) * 6);
    --spacer-x8: calc(var(--spacer-x1) * 8);
    --spacer-x12: calc(var(--spacer-x1) * 12);
    --spacer-x16: calc(var(--spacer-x1) * 16);
    --spacer-x32: calc(var(--spacer-x1) * 32);
    --header-width: 240px;
    /* color variables */
    /* --color-text: #11111e; */
    --color-text-link: #191FAE;
    --color-bg: #F8FAFB;
    --color-on-bg-headings: #686868;
    --color-on-bg: #616A74;
    /*--color-primary: #00D47E;
    --color-on-primary: #FFFFFF;*/
    --color-secondary: #FFF0B5;
    --color-accent: #9C3942;
    --color-alert: #EA3323;
    --color-alert-light: #FF9566;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F9F9F9;
    --color-surface-darker: #FAFAFA;
    --color-on-surface-darker: #9EA2AF;
    --color-surface-border: #F1F1F3;
    --color-circle-primary: #00D47E;
    --color-circle-secondary: #FFF0B5;
    --color-circle-tertiary: #f7b48d;
    --color-circle-quaternary: #f00707;
    --color-circle-empty: #FFFFFF;
    --color-circle-empty-border: #E8E8E8;
    --color-disabled: #A7ADB3;
    --color-progress-bg: #F6F6F6;
    /* --form-border-color: #cccccc; */
    --color-input-border: #DBDBDB;
    /* component radius variables */
    --radius-btn: 5px;
    --radius-surface: 1.6rem;
    /* shadow  */
    --shadow: 0px 4px 21px rgba(0, 0, 0, 0.06);
    --shadow-depressed: 0 0 5px 0 rgba(0,0,0,.5);
    /* font */
    /*--font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;*/
    --font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 14px;
}

body {
    background-color: var(--color-bg);
    font-family: var(--font-family);
    color: var(--color-on-bg);
    line-height: 1.4;
    font-size: 1rem;
    margin: 0;
    /* overflow-x: hidden; */
    /* overflow-x: hidden;
    max-width: 100vw; */
}

h1,
h2,
h3 {
    margin: 0;
}

h1 {
    font-size: 2.15rem;
    color: black;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.3rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="date"],
input[type="submit"],
select,
.btn,
textarea,
.lpi-custom-dropdown-search
/*,
.pie-date*/ {
    border: 1px solid var(--color-input-border);
    background-color: var(--color-surface);
    color: var(--color-on-bg-headings);
    padding: var(--spacer-x05) var(--spacer-x1);
    -webkit-appearance: none;
    appearance: none;
    /*font-size: 1rem;*/
    border-radius: var(--radius-btn);
    background-repeat: no-repeat;
    font-family: var(--font-family);
    white-space: nowrap;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="date"],
input[type="submit"],
select,
textarea {
    min-width: 10rem;
}

select, .lpi-custom-dropdown-search {
    background-image: url('../../images/icons/icon-arrow-down.svg');
    background-position: calc(100% - 1rem) center;
    padding-right: 2.5rem;
    line-height: 1.4;
    cursor: pointer;
}

.lpi-custom-dropdown-search {
    cursor: initial;
}

input[type="search"] {
    background-image: url('../../images/icons/icon-search.svg');
    background-position: calc(100% - 1rem) center;
    line-height: 1.4;
}

    input[type="search"]:focus {
        background-image: none;
    }

.btn,
input[type="submit"] {
    padding: var(--spacer-x05) var(--spacer-x1);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.btn-icon-l {
    padding-left: 2.5rem;
    background-position: var(--spacer-x1) center;
    background-size: 1rem;
}

.btn-icon-only {
    background-position: center;
    width: 1rem;
    height: 100%;
}

.icon-arrow-left {
    background-image: url('../../images/icons/icon-arrow.svg');
    background-size: .5rem;
}

.icon-remind {
    background-image: url('../../images/icons/icon-remind.svg');
}

.icon-search {
    background-image: url('../../images/icons/icon-search.svg');
}

.icon-move {
    background-image: url('../../images/icons/icon-move.svg');
}

.icon-options {
    background-image: url('../../images/icons/icon-options.svg');
}

.icon-nudge {
    background-image: url('../../images/icons/icon-nudge.svg');
}

.icon-delete {
    background-image: url('../../images/icons/icon-delete.svg');
}

.icon-download {
    background-image: url('../../images/icons/icon-download.svg');
}

.icon-group-red {
    background-image: url('../../images/icons/icon-group-red.svg');
}

.icon-chart-red {
    background-image: url('../../images/icons/icon-chart-red.svg');
}

.icon-product-management-red {
    background-image: url('../../images/icons/icon-product-management-red.svg');
}

.icon-cog-red {
    background-image: url('../../images/icons/icon-cog-red.svg');
}

.site-width {
    margin: 0 auto;
    max-width: var(--site-width);
}

.site-margins {
    margin: 0 var(--site-margins);
}

.section-spacing {
    margin-bottom: var(--spacer-x2);
}

.top-btm-x2 {
    margin: var(--spacer-x2) 0;
}

.flex {
    display: flex;
}

.flex-left {
    display: flex;
    justify-content: left;
}

.flex-right {
    display: flex;
    justify-content: right;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
}

.flex-space-around {
    display: flex;
    justify-content: space-around;
}

.flex-grow > div {
    flex-grow: 1;
}

.flex-grow-parent {
    flex-grow: 1;
}

.flex-gap-x2 {
    gap: var(--spacer-x2);
}

.flex-gap-x1 {
    gap: var(--spacer-x1);
}

.flex-gap-x05 {
    gap: var(--spacer-x05);
}

.flex-gap-x075 {
    gap: var(--spacer-x075);
}

.flex-gap-x4 {
    gap: var(--spacer-x4);
}

.flex-even > * {
    flex: 1;
}

.align-items-center {
    align-items: center;
}

.sticky {
    position: sticky;
    top: 0;
}

.is-dashboard {
    min-height: 1000rem;
}

@media (max-width: 1024px) {
    html {
        /* font-size: 14px; */
        /* this adjusts all font sizes that are using rem to be slighty smaller than normal */
    }
}

@media (max-width: 1000px) {
    html {
        /* font-size: 2.5vw; */
        /* this fluidly adjusts all font sizes that are using rem to scale based on viewport width */
    }

    body {
        /* position: relative;
		padding: 0;
		margin: 0; */
    }
}

.font-bold {
    font-weight: bold;
}

.font-medium {
    font-weight: 500;
}

.direction-right {
    transform: rotate(180deg);
}

.text-center {
    text-align: center;
}

.surface-style {
    background-color: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    box-shadow: var(--shadow);
    border-radius: var(--radius-surface);
    padding: var(--spacer-x2);
}

.header-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-x05);
}

.menu-btns .btn {
    background-color: var(--color-bg);
}

.date-label {
    font-weight: 500;
}

.selection-wrapper {
    display: flex;
    gap: var(--spacer-x1);
    justify-content: space-between;
    flex-grow: 1;
}

    .selection-wrapper .icon {
        width: 2rem;
    }

    .selection-wrapper select {
        min-width: 11rem;
    }

    .selection-wrapper > div:first-child {
        display: flex;
        gap: var(--spacer-x1);
        align-items: center;
    }

    .selection-wrapper > div:last-child {
        align-self: center;
    }

.progression-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-x1);
    overflow-x: auto;
    overflow-y: hidden;
}

    .progression-container .grid-content {
        display: flex;
    }

        .progression-container .grid-content > div {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            flex: 1;
            gap: var(--spacer-x1);
            padding-bottom: var(--spacer-x1);
        }

    .progression-container h2 {
        padding: var(--spacer-x2);
        padding-bottom: var(--spacer-x1);
    }

    .progression-container > div.flex:first-of-type > div {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.pies-wrapper {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    /* padding-top: var(--spacer-x2); */
    /* padding-bottom: var(--spacer-x2); */
    /* gap: var(--spacer-x1); */
    /* padding-left: var(--spacer-x2);
  padding-top: var(--spacer-x2);
  padding-bottom: var(--spacer-x2); */
    /* padding: var(--spacer-x2); */
}

.half-pie {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacer-x2);
    font-size: 1.16rem;
}

    .half-pie .pie-number {
        font-size: 3.54rem;
        font-weight: bold;
    }

.timeline-label {
    display: flex;
    justify-content: center;
    background-color: var(--color-surface-darker);
    border-top: 1px solid var(--color-surface-border);
    border-bottom: 1px solid var(--color-surface-border);
    gap: var(--spacer-x1);
    /* margin: 0 -2rem; */
    padding: var(--spacer-x1) 0;
    width: 100%;
    min-width: 160px;
    text-align: center;
    position: relative;
    align-items: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-on-bg);
}

    .timeline-label:not(.no-border):after {
        content: "";
        border-left: 1px solid var(--color-on-bg);
        position: absolute;
        right: 0;
        height: 1.5rem;
    }

    .timeline-label.full-line {
        padding-left: var(--spacer-x2);
        padding-right: var(--spacer-x2);
        justify-content: left;
    }
/* .timeline-labels {
    text-decoration: none;
    color: var(--color-on-bg);
} */
.timeline-labels .divider-left {
    border-left: 1px solid var(--color-on-bg);
}

.timeline-labels .divider-right {
    border-right: 1px solid var(--color-on-bg);
}

.timeline-labels > div {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.divider-vertical {
    background-color: var(--color-on-bg);
    width: 1px;
    height: 60%;
}

.status-bar-container {
    padding-left: var(--spacer-x2);
    padding-bottom: var(--spacer-x2);
    padding-right: var(--spacer-x2);
}

    .status-bar-container .icon {
        width: 1.3rem;
    }

.status-bar {
    position: relative;
    margin-bottom: 1rem;
}

    .status-bar > div {
        height: 1rem;
        border-radius: var(--spacer-x1);
    }

        .status-bar > div.empty-bar {
            background-color: #F2F2F2;
            width: 100%;
        }

        .status-bar > div.filled-bar {
            background-color: var(--color-secondary);
            position: absolute;
            top: 0;
            left: 0;
        }

    .status-bar .marker {
        width: 1px;
        height: 1.2rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: .3rem;
        border-right: 1px solid var(--color-alert-light);
    }

    .status-bar .progress-number {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -2rem;
    }

.progress-number {
    background-color: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-btn);
    width: fit-content;
    padding: .2rem .1rem;
    font-weight: 500;
    color: var(--color-on-bg-headings);
}

.people-container-all {
    /*max-width: calc(86rem + var(--spacer-x2));*/
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.people-container {
    width: fit-content;
    display: flex;
    flex-direction: column;
    width: 100%;
}

    /*.people-container input[type="search"] {
    height: 2.5rem;
}*/

    .people-container .row-padding,
    .graph-container .row-padding {
        padding: var(--spacer-x1) var(--spacer-x2);
        width: 100%;
    }

    .people-container.surface-style,
    .graph-container.surface-style,
    .progression-container.surface-style {
        padding: 0;
    }

    .people-container > div:first-child {
        display: flex;
        justify-content: space-between;
        gap: var(--spacer-x2);
        align-items: center;
    }

        .people-container > div:first-child > div {
            display: flex;
            gap: var(--spacer-x05);
            align-items: center;
        }

    .people-container .row,
    .graph-container .row {
        display: flex;
        gap: var(--spacer-x2);
        border-top: 1px solid var(--color-surface-border);
        align-items: center;
    }

.people-container-buttons-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Claus was here START */

.certificate-placement-edit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.certificate-placement-edit-header {
    font-weight: 700;
}

.lpi-admin-table {
    text-align: left;
    vertical-align: middle;
    border-collapse: collapse;
}

    .lpi-admin-table thead tr th {
        position: sticky;
        top: 0;
        /*border-bottom: 2px solid var(--primary-color);*/
        background-color: white;
    }

    /*    .lpi-admin-table th {
        
    }
*/
    .lpi-admin-table tr:nth-child(even) {
        background-color: #fdfdfdc7
    }

.header-buttons-container {
    display: flex;
}

    .header-buttons-container .first-button {
        margin-left: auto;
    }

.header-button {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto;
    color: var(--color-on-surface-darker);
    cursor: pointer;
}

    .header-button.active {
        color: var(--color-primary);
    }

.header-button-icon {
    background-position: center;
    background-size: cover;
    width: 1rem;
    height: 1rem;
}

.header-button-icon-leader {
    background-image: url('../images/icons/icon-user.svg');
}

.header-button-icon-participant {
    background-image: url('../images/icons/icon-users.svg');
}


.people-container-tabs {
    display: flex;
    background-color: red;
    background-color: var(--color-surface-darker);
    color: var(--color-on-bg);
    border-top: 1px solid var(--color-surface-border);
    border-bottom: 1px solid var(--color-surface-border);
    font-size: 1rem;
    padding: var(--spacer-x1) 0;
    gap: 1rem;
}

    .people-container-tabs > div {
        cursor: pointer;
    }

    .people-container-tabs .active {
        color: var(--color-primary);
        font-weight: bold;
    }

.objectives-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

    .objectives-grid .header {
        font-weight: bold;
    }

.objectives-grid-bar-container {
    position: relative;
    background-color: var(--color-progress-bg);
    border-radius: 4px;
    height: 8px;
}

.objectives-grid-bar-grid {
    display: grid;
    grid-template-columns: 80fr 10fr 10fr;
    gap: 1rem;
    align-items: center;
}

.objectives-grid-bar {
    background-color: var(--color-primary);
    border-radius: 4px 0 0 4px;
    height: 8px;
}

.objectives-grid-bar-indicator {
    position: absolute;
    width: 1px;
    height: 12px;
    background-color: #FF9566;
    top: -2px;
}

.objectives-grid-bar-grid-percentage {
    font-weight: bold;
}

.objectives-grid-bar-grid-valid.active {
    background-image: url('../images/icons/icon-check-circle-green.svg');
    background-position: center;
    background-size: cover;
    width: 1rem;
    height: 1rem;
}

.objectives-participants-header {
    font-weight: bold;
}

.question-types-selector-container {
    display: flex;
    gap: 1rem;
    cursor: pointer;
}

.question-types-selector.active {
    color: var(--color-primary);
    font-weight: bold;
}

.objectives-participants-questions-grid {
    display: grid;
    grid-template-columns: 1fr 98fr 1fr;
    column-gap: 1rem;
}

.objectives-participants-answers-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms;
}

    .objectives-participants-answers-grid > div {
        overflow: hidden;
    }

    .objectives-participants-answers-grid.active {
        grid-template-rows: 1fr;
    }

    .objectives-participants-answers-grid > div:last-child {
        padding-bottom: 1rem;
    }

/*    .objectives-participants-question-grid:hover > .objectives-participants-answers-grid {
        grid-template-rows: 1fr;
    }*/

.valid-indicator {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

    .valid-indicator.wrong {
        color: red;
    }

    .valid-indicator.correct {
        color: green;
    }

        .valid-indicator.correct > .icon {
            background-image: url('../images/icons/icon-check-circle-green.svg');
            background-position: center;
            background-size: cover;
            width: 1rem;
            height: 1rem;
        }

.objectives-participants-question-toggle {
    background-image: url('../images/icons/icon-arrow-down.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem;
    width: 1rem;
    height: 1rem;
    transform: rotate(-90deg);
    transition: transform .2s ease-in-out;
    cursor: pointer;
}

    .objectives-participants-question-toggle.active {
        background-image: url(../images/icons/icon-arrow-red.svg);
        transform: rotate(0deg);
    }

.objectives-container {
}

/* Claus was here END */

.graph-container .row {
    gap: var(--spacer-x4);
}

    .people-container .row > div,
    .graph-container .row > div:first-child {
        display: flex;
        gap: var(--spacer-x075);
        align-items: center;
    }

        .people-container .row > div:last-child {
            margin-left: auto;
        }

.row-bottom {
    display: flex;
    justify-content: space-between;
    background-color: var(--color-surface-darker);
    border-top: 1px solid var(--color-surface-border);
    border-bottom-left-radius: var(--radius-surface);
    border-bottom-right-radius: var(--radius-surface);
    margin-top: auto;
    width: 100%;
}

    .row-bottom .amount-showing {
        color: var(--color-on-surface-darker);
        font-weight: bold;
    }

    .row-bottom > a {
        text-decoration: none;
        color: var(--color-text-link);
    }

    .row-bottom .arrows-wrapper {
        display: flex;
        gap: var(--spacer-x075);
        color: var(--color-on-surface-darker);
    }

        .row-bottom .arrows-wrapper a {
            display: flex;
        }

.people-container .arrows-wrapper .icon {
    width: .5rem;
}

.row-bottom.center-text {
    justify-content: center;
}

.people-container .amount-showing > div:last-child {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.options-menu {
    position: relative;
}

    .options-menu:hover .options-menu-content {
        display: flex;
    }

.options-menu-content {
    display: none;
    flex-direction: column;
    /* gap: .5rem; */
    position: absolute;
    background-color: var(--color-surface);
    padding: var(--spacer-x05);
    border: 1px solid var(--color-input-border);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-btn);
    z-index: 2;
    bottom: 100%;
    right: 0;
}

    .options-menu-content > a {
        display: flex;
        gap: var(--spacer-x075);
        padding: .5rem 1rem;
        text-decoration: none;
        color: var(--color-on-bg);
        align-items: center;
        white-space: nowrap;
        height: 100%;
    }

        .options-menu-content > a.disabled {
            color: var(--color-disabled);
        }

            .options-menu-content > a.disabled .icon > path {
                fill: var(--color-disabled);
            }

            .options-menu-content > a.disabled:hover {
                cursor: not-allowed;
            }

        .options-menu-content > a:not(.disabled):hover,
        nav ul a:hover,
        nav ul a.active {
            background-color: var(--color-surface-hover);
            color: var(--color-accent);
            border-radius: 3px;
        }

            .options-menu-content > a:hover svg > path,
            nav ul a:hover svg > path,
            nav ul a.active svg > path {
                fill: var(--color-accent);
            }

    .options-menu-content .icon {
        width: 1rem;
    }

.requirements-info {
    border-radius: 30.62px;
    padding: .5rem 1rem;
    height: fit-content;
    font-size: 0.68rem;
}

    .requirements-info.maximum {
        background-color: var(--color-primary);
        color: var(--color-on-primary);
    }

    .requirements-info.not-met {
        background-color: var(--color-secondary);
        color: var(--color-on-bg);
    }

.placeholder-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.pie-container {
    position: relative;
    padding: var(--spacer-x2) var(--spacer-x1);
    border: 1px solid white;
    border-radius: var(--radius-btn);
}


    .pie-container > a {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-x1);
        align-items: center;
    }

    .pie-container.active {
        border: 1px solid var(--color-primary);
        border-radius: var(--radius-btn);
    }

    .pie-container > a:first-child {
        font-size: 1.16rem;
        text-decoration: none;
        color: var(--color-on-bg-headings);
        z-index: 1;
    }

    .pie-container .overall-report-container {
        display: flex;
        justify-content: center;
    }

        .pie-container .overall-report-container .icon-download > span {
            visibility: visible;
        }

        .pie-container .overall-report-container a {
            /*justify-content: center;
    display: flex;
    min-width: fit-content;*/
        }

        /*
.pie-container .overall-report-container.disabled {
    cursor: not-allowed;
}
*/

        .pie-container .overall-report-container.disabled a {
            color: var(--color-disabled);
            pointer-events: none;
        }

    .pie-container.secondary-split {
        background-color: #0000000c;
    }

.info-alert {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
}

    .info-alert img {
        width: 1.5rem;
        margin-bottom: auto;
        /* margin-left: auto; */
        margin-left: 84%;
        cursor: pointer;
        margin-top: 3.6rem;
        z-index: 2;
    }

    .info-alert > img:hover + .alert-message {
        display: block;
    }

.alert-message {
    display: none;
    background-color: var(--color-surface);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-btn);
    color: var(--color-on-bg-headings);
    font-style: italic;
    width: 100%;
    padding: var(--spacer-x1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.pie-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pie-container .pie-date {
    justify-content: center;
    font-size: 1.16rem;
}

    .pie-container .pie-date.date-container {
        justify-content: center;
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

/*    .pie-date::after {
        content: "";
        display: inline-flex;
        background-image: url('../../images/icons/icon-arrow-rounded.svg');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain;
        width: .7rem;
        height: .7rem;
        padding-left: .5rem;
    }*/
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.pie {
    --p: 20;
    --width: 10px;
    --c: var(--color-circle-secondary);
    --w: 11.5rem;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    /* transform: rotate(90deg); */
    transform: scaleX(-1);
}

    .pie.full-pie {
        --c: var(--color-circle-primary);
    }

    .pie.quart-pie {
        --c: var(--color-circle-tertiary);
    }

    .pie.red-pie {
        --c: var(--color-circle-quaternary);
    }


    .pie:before,
    .pie:after {
        content: "";
        position: absolute;
        border-radius: 50%;
    }

    .pie:before {
        inset: 0;
        background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--width) var(--width) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
        -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--width)),#000 calc(100% - var(--width)));
        mask: radial-gradient(farthest-side,#0000 calc(99% - var(--width)),#000 calc(100% - var(--width)));
    }

    .pie:after {
        inset: calc(50% - var(--width)/2);
        background: var(--c);
        transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
    }

    .pie > div {
        font-size: 1rem;
        /* transform: rotate(-90deg); */
        transform: scaleX(-1);
        text-align: center;
    }

.piv > div .pie-number {
    font-size: 2.3rem;
    font-weight: bold;
}

.empty-pie {
    min-width: 11.5rem;
    min-height: 11.5rem;
    border-radius: 50%;
    position: relative;
    background-color: var(--color-circle-empty);
    border: 1px solid #E8E8E8;
}

    .empty-pie .inner-circle {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background-color: var(--color-surface);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #E8E8E8;
        font-size: 1rem;
    }

span.pie-number {
    font-size: 2.33rem;
    font-weight: bold;
}

.animate {
    animation: p 1s .5s both;
}

.no-round:before {
    background-size: 0 0,auto;
}

.no-round:after {
    content: none;
}

@keyframes p {
    from {
        --p: 0
    }
}

.container {
    width: 12.5rem;
    /*background-color: yellowgreen;*/
}

.arc-wrap {
    height: 0;
    padding-top: 100%;
    position: relative;
    transform: scale(1.5);
}

    .arc-wrap .pie-number {
        font-size: .6rem;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
    }

        .arc-wrap .pie-number > span {
            font-size: 1.6rem;
            font-weight: bold;
        }

.arc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



#path, #path-bg {
    stroke: var(--color-circle-secondary);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    fill: none;
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
    /*animation: goingUp 5s linear infinite;*/
    /* if no animation is required just set stroke-dashoffset */
    stroke-dashoffset: 0.25;
}

.arc-wrap.full-pie #path {
    stroke: var(--color-circle-primary);
}

.arc-wrap.quart-pie #path {
    stroke: var(--color-circle-tertiary);
}

.arc-wrap.red-pie #path {
    stroke: var(--color-circle-quaternary);
}

#path-bg {
    stroke: #F1F1F3;
    stroke-dashoffset: 0;
}

@keyframes goingUp {
    /* a bit backwards.. but this is 0-75% */
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0.25;
    }
}

@keyframes goingDown {
    /* a bit backwards.. but this is 60-0% */
    from {
        stroke-dashoffset: 0.4;
    }

    to {
        stroke-dashoffset: 1;
    }
}

.relative {
    position: relative;
}

.graph-container > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-x2);
}

    .graph-container > div:first-child > div {
        display: flex;
        gap: var(--spacer-x075);
    }

.graph-container .date-range {
    justify-content: center;
    color: var(--color-on-bg);
}

.graph-data .block {
    width: 4rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-btn);
    position: relative;
    /*margin-bottom: var(--spacer-x05);*/
}

.graph-data {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    gap: var(--spacer-x6);
    transform: translateX(-50%);
    align-items: flex-end;
    width: calc(100% - var(--spacer-x4));
    justify-content: center;
    height: 100%;
}

.block-titles {
    display: flex;
    gap: var(--spacer-x6);
    justify-content: center;
    border-top: 1px solid var(--color-surface-border);
    padding: var(--spacer-x1) 0;
}

    .block-titles > div {
        width: 4rem;
        text-align: center;
    }

.graph-data .block-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.graph-container .block-container.job {
    z-index: 3;
}

.graph-data .block .text {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--color-on-bg);
    font-weight: 500;
}

.graph-data .progress-number {
    position: absolute;
    right: -50%;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.graph-data .block-container > div:last-child {
    text-align: center;
    font-weight: 500;
}

.graph-container .line-marker {
    border: 1px solid var(--color-alert-light);
    /* width: calc(100% - 60px - 20px); */
    width: 93%;
    position: absolute;
    left: 7%;
    z-index: 2;
    height: 1px;
    bottom: 90px;
}

.graph-container.behaviour-container .line-marker {
    width: 100%;
    left: 0;
    z-index: 2;
}

.graph-container.behaviour-container .block-container {
    padding: 0 .2rem;
}

.graph-container a.icon {
    display: flex;
}

    .graph-container a.icon > img {
        width: 1.2rem;
    }

.graph-container {
    display: flex;
    flex-direction: column;
}

    .graph-container.satifaction-container {
        gap: var(--spacer-x2);
    }

.all-graphs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacer-x2);
}

.graph-container .status-bar {
    flex-grow: 1;
}

    .graph-container .status-bar .filled-bar {
        flex-grow: 1;
        background-color: var(--color-primary);
    }

.satisfaction-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    grid-template-rows: 1fr;
    align-items: center;
}

    .satisfaction-grid .column-padding {
        padding-left: var(--spacer-x6);
        display: flex;
        align-items: center;
    }

.raters-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    grid-template-rows: 1fr;
    /* align-items: center; */
}

.participants-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 1fr;
}

    .participants-grid .column-last {
        justify-content: flex-end;
    }

.raters-grid > * {
    display: flex;
    gap: var(--spacer-x2);
    border-top: 1px solid var(--color-surface-border);
    align-items: center;
    padding: var(--spacer-x1) 0;
}

.participants-grid > *,
.satisfaction-grid > * {
    border-top: 1px solid var(--color-surface-border);
    padding: var(--spacer-x1) 0;
    height: 100%;
}

.satifaction-container > div:first-child {
    border-bottom: 1px solid var(--color-surface-border);
}

.column-first,
.raters-grid .last-column,
.participants-grid .column-padding {
    display: flex;
    gap: var(--spacer-x075);
    align-items: center;
}

.people-container .icon {
    width: 1.5rem;
}

.column-btns {
    display: flex;
    gap: var(--spacer-x075);
    justify-content: flex-end;
}

/* .column-btns > a {
    flex: 1;
  } */

.column-first {
    padding-left: var(--spacer-x2);
}

.column-last {
    padding-left: var(--spacer-x075);
    padding-right: var(--spacer-x2);
    display: flex;
    justify-content: center;
    align-items: center;
    /* justify-content: flex-end; */
}

.participants-grid .column-last {
    padding-left: 0;
    display: flex;
    gap: var(--spacer-x075);
}

.column-padding {
    padding-left: var(--spacer-x2);
    padding-right: var(--spacer-x2);
    /*justify-content: center;*/
}

.participants-grid .container,
.raters-grid .container {
    width: 4rem;
}

.participants-grid .pie,
.raters-grid .pie {
    --width: 4px;
    --w: 3.5rem;
}

    .participants-grid .pie > div,
    .participants-grid .pie span.pie-number,
    .raters-grid .pie > div,
    .raters-grid .pie span.pie-number {
        font-size: 0.6rem;
        font-weight: bold;
    }

.column-requirements {
    justify-content: flex-end;
}

.participants-grid .column-padding {
    display: flex;
}

    .participants-grid .column-padding > div {
        overflow-wrap: anywhere;
    }


/**/
.semi-donut {
    --percentage: 0;
    --fill: var(--color-primary);
    width: 18rem;
    height: 9rem;
    position: relative;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    box-sizing: border-box;
    color: var(--color-on-bg-headings);
    font-weight: 400;
    font-size: 1.5rem;
}

    .semi-donut:after {
        content: '';
        width: 18rem;
        height: 18rem;
        border: 15px solid;
        border-color: #FAFAFA #FAFAFA var(--fill) var(--fill);
        position: absolute;
        border-radius: 50%;
        left: 0;
        top: 0;
        box-sizing: border-box;
        transform: rotate(calc(1deg * ( -45 + var(--percentage) * 1.8 )));
        animation: fillAnimation 1s ease-in;
    }


/*header {
    background-color: var(--color-surface);
    width: var(--header-width);
    padding: var(--spacer-x2);
    filter: var(--shadow);
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}

    header > nav {*/
/* position: fixed; */
/*overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: var(--spacer-x3);
        width: calc(18rem - (var(--spacer-x2) * 2));
        height: calc(100% - (var(--spacer-x2) * 1));
    }

    header .icon {
        width: 1.5rem;
    }*/

nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-x1);
}

    nav ul li {
        list-style-type: none;
    }

    nav ul a {
        text-decoration: none;
        color: #67717C;
        display: flex;
        gap: var(--spacer-x075);
        font-weight: 500;
        align-items: center;
        padding: var(--spacer-x05);
        word-wrap: anywhere;
        font-size: 1rem; /* 14px at 14px base — matches reference computed value */
    }

.body-content {
    margin-top: var(--spacer-x2);
    margin-left: var(--header-width);
    flex: 1;
}

.logo-wrapper {
    width: 70%;
    align-self: center;
}

    .logo-wrapper > img {
        width: 100%;
    }

header .divider {
    border: 1px solid var(--color-surface-border);
}

header select {
    border: none;
}

    header select:focus {
        outline: none;
    }

/* header a.dropdown::after {
  content: "";
  background-image: url('../../images/icons/icon-arrow-header.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  width: 1rem;
  height: .8rem;
  margin-left: auto;
} */
nav a.dropdown svg.icon.arrow {
    width: .5rem;
    margin-left: auto;
}

.nav-responsive-content a.dropdown svg.icon.arrow {
    width: 4rem;
}

nav a.dropdown.active svg.icon.arrow {
    transform: rotate(-90deg);
}

nav a.dropdown:hover svg.icon.arrow > path,
.nav-responsive-content a.dropdown:hover svg.icon.arrow > path,
.nav-responsive-content a.dropdown.active svg.icon.arrow > path {
    fill: var(--color-accent);
}

.nav-circles {
    display: none;
    gap: var(--spacer-x1);
    position: fixed;
    bottom: var(--spacer-x2);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    align-items: center;
    box-shadow: none;
    background-color: transparent;
}

.close-icon {
    display: none;
    align-self: end;
}

    .close-icon .icon {
        width: 2.5rem;
    }

.nav-circle {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

    .nav-circle .icon {
        width: 1.2rem;
    }

    .nav-circle .icon-arrow {
        width: 2.5rem;
        transform: rotate(180deg);
    }

nav ul a.dropdown.active::after {
    transform: rotate(-90deg);
}

nav ul a.dropdown + ul {
    display: none;
    padding-left: calc(1.5rem + var(--spacer-x075));
    padding-top: var(--spacer-x1);
}

nav ul a.dropdown.active + ul {
    display: flex;
}

.nav-responsive-content {
    display: none;
}

/**/
nav > div > ul > li > a {
    display: flex;
    justify-content: space-between;
}

    nav > div > ul > li > a.parent:after {
        content: "";
        background-image: url('../images/icons/icon-arrow-down.svg');
        background-repeat: no-repeat;
        background-size: .8rem;
        width: .8rem;
        height: .8rem;
        background-position: center;
        transform: rotate(-90deg);
        transition: transform .2s ease-in-out;
        flex-shrink: 0;
    }

    nav > div > ul > li > a:hover.icon-group,
    nav > div > ul > li > a.active.icon-group {
        background-image: url('../images/icons/icon-group-red.svg');
    }

    nav > div > ul > li > a:hover.icon-chart,
    nav > div > ul > li > a.active.icon-chart {
        background-image: url('../images/icons/icon-chart-red.svg');
    }

    nav > div > ul > li > a:hover.icon-product-management,
    nav > div > ul > li > a.active.icon-product-management {
        background-image: url('../images/icons/icon-product-management-red.svg');
    }

    nav > div > ul > li > a:hover.icon-cog,
    nav > div > ul > li > a.active.icon-cog {
        background-image: url('../images/icons/icon-cog-red.svg');
    }

    nav > div > ul > li > a.parent:hover:after {
        background-image: url('../images/icons/icon-arrow-red.svg');
        transform: rotate(-90deg);
    }

    nav > div > ul > li > a.parent.active:after {
        background-image: url('../images/icons/icon-arrow-red.svg');
        transform: rotate(0deg);
    }

#nav-close {
    display: none;
}

.nav-wrapper > ul {
    padding-bottom: var(--spacer-x2);
}

/*************************/
.column-btns div.disabled {
    cursor: not-allowed;
}

    .column-btns div.disabled a {
        color: var(--color-disabled);
        pointer-events: none;
    }

.lpi-confirm-message-wrapper.disabled {
    cursor: not-allowed;
}

    .lpi-confirm-message-wrapper.disabled a {
        cursor: not-allowed;
        color: var(--color-disabled);
        pointer-events: none;
    }
/*************************/
@media (min-width: 769px) {
    .pie-container > a:first-child {
        white-space: nowrap;
    }
}

@media (max-width: 1024px) {

    h1 {
        text-align: center;
    }

    .menu-btns,
    .date-label {
        display: none;
    }

    .nav-responsive.responsive .close-icon {
        display: flex;
    }

    header {
        display: none;
    }

    .nav-responsive.responsive .nav-circles {
        display: none;
    }

    .nav-responsive.responsive .nav-responsive-content {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        /* width: 100%; */
        right: 0;
        bottom: 0;
        background-color: var(--color-surface);
        height: 100vh;
        font-size: 1.9rem;
        gap: var(--spacer-x3);
        z-index: 5;
    }

    .body-content {
        margin-left: 0;
    }

    .nav-responsive-content .logo-wrapper {
        display: block;
        width: 25%;
        align-self: center;
        padding-top: var(--spacer-x4);
    }

    .nav-responsive-content .divider {
        border: 1px solid var(--color-surface-border);
    }

    .nav-responsive-content .ul-wrapper {
        align-items: center;
        padding-top: var(--spacer-x1);
        overflow-y: auto;
        position: fixed;
        top: 35%;
        bottom: 15%;
        left: 0;
        right: 0;
    }

    .nav-responsive-content > div > ul {
        gap: var(--spacer-x3);
        width: 100%;
        padding: 0 var(--spacer-x4);
        /* height: calc(100% - 10rem); */
    }

    .nav-responsive-content .icon {
        width: 2rem;
    }

    .nav-responsive-content ul a {
        font-weight: 600;
        gap: var(--spacer-x2);
    }

    #menu-functions select,
    #menu-functions .lpi-btn {
        font-size: 1rem;
    }

    #menu-functions select {
        min-width: 100%;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #menu-functions .lpi-btn {
        padding: 1rem 2rem;
    }

    /* .nav-responsive-content ul a.dropdown::after {
    content: "";
    background-image: url('../../images/icons/icon-arrow-header-res.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
  } */
    .nav-responsive-content ul a.dropdown + ul {
        display: none;
        padding-top: var(--spacer-x2);
        margin-left: calc(var(--spacer-x2) + var(--spacer-x2));
        gap: var(--spacer-x2);
    }

    .nav-responsive-content ul a.dropdown.active + ul {
        display: flex;
    }

    .nav-responsive-content ul a.dropdown + ul a {
        font-weight: 400;
    }

    .all-graphs,
    .people-container-all {
        margin-bottom: var(--spacer-x6);
    }
}


@media (max-width: 1024px) {
    .page-admin #logo {
        display: none;
    }

    .page-admin {
        display: block;
        margin-bottom: 8rem;
    }


        .page-admin.responsive > nav {
            display: block;
        }

        .page-admin.responsive #logo {
            display: grid;
            max-height: 10rem;
        }

        .page-admin.responsive {
            grid-template-columns: auto;
            grid-template-areas: "logo" "navi";
        }

            .page-admin.responsive #logo img {
                max-width: 15rem;
            }

            .page-admin.responsive .main-section {
                display: none;
            }

            .page-admin.responsive .nav-wrapper {
                height: calc(100vh - 10rem - 2rem);
                align-items: center;
            }

                .page-admin.responsive .nav-wrapper > div:first-of-type {
                    margin-top: auto;
                }

                .page-admin.responsive .nav-wrapper > ul {
                    font-size: 1.5rem;
                    font-weight: 600;
                }

            .page-admin.responsive .close-icon {
                display: block;
            }

            .page-admin.responsive nav > div > ul > li > a {
                padding-left: 3rem;
                background-position: 0rem center;
                background-size: 2rem 2rem;
            }

    nav > div > ul > li > a.parent:after {
        background-size: 1.2rem;
        width: 1.2rem;
        height: 1.2rem;
    }

    .page-admin.responsive nav ul ul a {
        padding-left: 3rem;
        font-size: 1rem;
    }

    .nav-circles {
        display: flex;
    }

    .page-admin.responsive .nav-circles {
        display: none;
    }

    .nav-circles > a.nav-circle:hover,
    .nav-circles > a.nav-circle:visited {
        background-color: var(--color-accent);
    }

    .page-admin > nav {
        position: fixed;
        height: 100vh;
        width: 90%;
        z-index: 11;
        left: -100%;
        transition: transform .2s ease-in;
    }

        .page-admin > nav.active {
            transform: translateX(100vw);
        }

    nav {
        padding: 0;
    }

    .nav-wrapper {
        height: calc(100vh - 1rem);
        justify-content: start;
        gap: 4rem;
    }

        .nav-wrapper ul {
            margin: 1rem;
            margin-bottom: auto;
        }

    #menu-functions {
        margin: 1rem;
    }

    #nav-close {
        position: sticky;
        left: 0;
        bottom: 0;
        width: 100%;
        margin: -1rem;
        display: block;
        text-align: center;
        background-color: var(--color-bg);
    }

    .close-icon {
        padding: 2rem 0;
        display: block;
        align-self: end;
    }
}

@media (max-width: 480px) {
    .nav-responsive-content .ul-wrapper {
        top: 32%;
    }

    .nav-responsive-content .logo-wrapper {
        width: 40%;
    }

    .nav-responsive-content > div > ul {
        padding: 0 var(--spacer-x2);
    }

    .nav-responsive.responsive .nav-responsive-content {
        font-size: 1.5rem;
    }

    .nav-responsive-content ul a {
        gap: var(--spacer-x1);
    }
}

@media (max-width: 410px) {
    .nav-responsive.responsive .nav-responsive-content {
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    .nav-responsive-content .ul-wrapper {
        top: 27%;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 1.2vw;
    }
}

@media (max-width: 950px) {
    html {
        font-size: 1.5vw;
    }
}

@media (max-width: 750px) {
    html {
        font-size: 1.8vw;
    }
}

@media (max-width: 630px) {
    html {
        font-size: 2.1vw;
    }
}

@media (max-width: 530px) {
    html {
        font-size: 2.4vw;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 2.7vw;
    }

    h2 {
        font-size: 1rem;
    }

    .timeline-label {
        font-size: 1.1rem;
    }
}

@media (max-width: 410px) {
    html {
        font-size: 3.2vw;
    }

    .pie-container > a:first-child {
        font-size: 1.1rem;
    }
}

@media (max-width: 350px) {
    html {
        font-size: 3.5vw;
    }
}

@media (max-width: 1400px) {
    .people-container-all {
        grid-template-columns: 1fr;
    }

    .people-container.surface-style {
        width: auto;
    }
}

@media (max-width: 1250px) {
    .selections-container {
        flex-direction: column;
    }

    .people-container input[type="search"] {
        width: 100%;
        /* min-width: none; */
    }

    .selection-wrapper select {
        min-width: 16rem;
    }
}

@media (max-width: 1200px) {
    :root {
        --site-margins: var(--spacer-x2);
    }

    .graph-data,
    .block-titles {
        gap: var(--spacer-x3);
    }

    .satisfaction-grid {
        grid-template-columns: 1.5fr 1.5fr auto;
    }

        .satisfaction-grid .column-padding {
            padding-left: var(--spacer-x2);
        }

    /*    .people-container-all {
        flex-direction: column;
    }*/

    .raters-grid .column-padding {
        justify-content: flex-end;
    }

    /*    .people-container.surface-style {
        width: auto;
    }*/

    .pie {
        --w: 10.5rem;
        --width: 9px;
    }

    .empty-pie {
        min-width: 10.5rem;
        min-height: 10.5rem;
    }

        .empty-pie .inner-circle {
            width: calc(100% - 17px);
            height: calc(100% - 17px);
        }
}

@media (max-width: 1024px) {
    .satisfaction-grid {
        grid-template-columns: 1fr 1.5fr auto;
    }

        .satisfaction-grid .column-padding {
            padding-left: var(--spacer-x2);
        }

    /*    .graph-data {
        gap: var(--spacer-x2);
    }*/

    /*  .selections-container {
        flex-direction: row;
    }*/

    /*  .selections-outside-wrapper {
        overflow-x: hidden;
    }*/

    .selection-wrapper {
        min-width: 100%;
    }
}

@media (max-width: 950px) {
    .pie-date {
        font-size: .9rem;
    }
}

@media (max-width: 768px) {
    .icon-nudge > span,
    .icon-remind > span,
    .icon-download > span {
        visibility: hidden;
    }

    .people-container .icon-nudge.btn-icon-l,
    .people-container .icon-remind.btn-icon-l,
    .people-container .icon-download.btn-icon-l {
        padding-left: 1.5rem;
    }

    .people-container .icon-remind,
    .people-container .icon-nudge,
    .people-container .icon-download {
        background-position: center;
        height: 100%;
        width: 2rem;
        height: 2.5rem;
    }

    .people-container input[type="search"] {
        min-width: 5rem;
    }

    .all-graphs {
        display: flex;
        flex-direction: column;
    }

    .graph-container a.icon > img {
        width: 1.5rem;
    }

    .progression-container .grid-content {
        flex-direction: column;
    }

    .timeline-label:not(.no-border):after {
        border-left: none;
    }

    .pie-container {
        padding: var(--spacer-x1) var(--spacer-x2);
    }

        .pie-container > a:first-child {
            flex-direction: row;
            flex-grow: 1;
            justify-content: space-between;
            gap: var(--spacer-x2);
        }

    .pie-container {
        display: grid;
        /*grid-template-columns: 1fr auto;*/
        grid-template-columns: 1fr;
    }

    .progression-container .pie {
        --w: 8rem;
        --width: 6px;
        margin-left: auto;
        flex-shrink: 0;
    }

    .pie-container .container {
        margin-left: auto;
        flex-shrink: 0;
        width: 10rem;
    }

    #path, #path-bg {
        stroke-width: 15;
    }

    .arc-wrap .pie-number > span {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .arc-wrap .pie-number {
        font-size: .5rem;
    }

    .empty-pie {
        min-width: 8rem;
        min-height: 8rem;
    }

        .empty-pie .inner-circle {
            width: calc(100% - 9px);
            height: calc(100% - 9px);
        }

    span.pie-number {
        font-size: 2vw;
    }

    .pie > div,
    .empty-pie .inner-circle {
        font-size: 1.3vw;
    }

    .pie-container > a {
        gap: var(--spacer-x05);
    }

    .pies-wrapper {
        flex-direction: column;
    }

    /*   .pie-container {
        gap: var(--spacer-x2);
    }*/

    .pie-date {
        min-width: 4.5rem;
    }

    .info-alert {
        right: .2rem;
        width: unset;
    }

        .info-alert img {
            margin-top: 0;
            margin-bottom: unset;
            margin-left: 0;
        }

    .alert-message {
        top: 2rem;
        right: 50%;
        transform: unset;
        width: 13rem;
        left: unset;
    }

    .progression-container {
        flex-direction: column-reverse;
    }

        .progression-container h2 {
            order: 1;
        }

    .people-container {
        width: auto;
    }

    .people-container-all {
        flex-direction: column;
    }

    .participants-grid .column-last {
        justify-content: flex-end;
    }

    .people-container > .row-padding input[type="search"],
    .people-container > .row-padding select {
        width: 100%;
        height: 2.5rem;
    }
}

@media (max-width: 750px) {
    span.pie-number {
        font-size: 2.7vw;
    }

    .pie > div,
    .empty-pie .inner-circle {
        font-size: 1.5vw;
    }

    .pie-date {
        min-width: 4.5rem;
    }
}

@media (max-width: 530px) {
    .pie > div,
    .empty-pie .inner-circle {
        font-size: 1.8vw;
    }

    .progression-container .pie {
        --w: 7rem;
    }

    .empty-pie {
        min-width: 7rem;
        min-height: 7rem;
    }

        .empty-pie .inner-circle {
            width: calc(100% - 9px);
            height: calc(100% - 9px);
        }

    .pie-container > a:first-child {
        gap: var(--spacer-x1);
    }

    .arc-wrap .pie-number > span {
        font-size: 1.1rem;
    }

    .arc-wrap .pie-number {
        font-size: 0.4rem;
    }

    .pie-container .container {
        width: 8rem;
    }
}
/* #region mobile */

@media (max-width: 480px) {
    :root {
        --site-margins: var(--spacer-x1);
    }

    .page {
        padding: var(--spacer);
    }
    /* #region index.html */

    .people-container .btn-icon-l {
        padding-left: 1.5rem;
    }

    .selections-container {
        gap: var(--spacer-x05);
    }

    .selection-wrapper > div:last-child {
        display: grid;
        flex-grow: 1;
        max-width: 60%;
    }

    .selection-wrapper select {
        width: 100%;
        min-width: unset;
        justify-self: flex-end;
    }

    .pie-container > a:first-child {
        font-size: 1rem;
    }

    .progression-container .pie {
        --w: 5.5rem;
        --width: 4.5px;
    }

    .empty-pie {
        min-width: 5.5rem;
        min-height: 5.5rem;
    }

        .empty-pie .inner-circle {
            width: calc(100% - 7px);
            height: calc(100% - 7px);
        }

        /*  span.pie-number {
        font-size: 2.5vw;
    }*/

        .pie > div,
        .empty-pie .inner-circle {
            font-size: 1.5vw;
        }

    .pie-container > a:first-child {
        gap: var(--spacer-x05);
    }

    .half-pie .pie-number {
        font-size: 3rem;
    }

    /*    .pie-date {
        min-width: 11rem;
    }*/

    .column-btns {
        display: none;
    }

    .raters-grid {
        grid-template-columns: auto 1fr auto;
    }

        .raters-grid .empty-column {
            display: none;
        }

    .column-padding {
        padding-left: var(--spacer-x1);
        padding-right: 0;
        width: 100%;
    }

    .raters-container .column-padding > div {
        margin-left: auto;
    }

    .people-container-all .column-first {
        padding-left: var(--spacer-x1);
    }

    .people-container-all .column-last {
        padding-right: var(--spacer-x1);
    }

    .people-container {
        width: 100%;
    }

        .people-container .row-padding {
            padding: var(--spacer-x1);
        }

    .raters-container .column-padding {
        justify-self: end;
    }

    .participants-grid .column-last > a:first-child {
        display: none;
    }

    .participants-grid .column-last {
        padding-left: var(--spacer-x1);
        display: flex;
        justify-content: end;
    }

    .people-container > div:first-child {
        gap: var(--spacer-x2);
    }

    .pie-date {
        font-size: .75rem;
    }

    .people-container input[type="search"] {
        width: 100%;
    }

    .people-container .icon {
        width: 1.2rem;
    }






    /* #endregion */

    /* #region dashboard v1 */
    .satisfaction-grid .column-padding {
        padding-left: var(--spacer-x2);
    }

    .amount-showing .extra-text {
        display: none;
    }

    .satisfaction-grid {
        grid-template-columns: 1fr 1fr auto;
    }

    .graph-data, .block-titles {
        gap: var(--spacer-x2);
    }

    .graph-container .line-marker {
        width: 90%;
        left: 10%;
    }
    /* #endregion */

}

@media (max-width: 410px) {
    .progression-container .pie {
        --w: 4.5rem;
    }

    .empty-pie {
        min-width: 4.5rem;
        min-height: 4.5rem;
    }

    .pie-date {
        min-width: 3.5rem;
    }
}

@media (max-width: 350px) {
    :root {
        --site-margins: var(--spacer-x05);
    }

    .progression-container .pie {
        --width: 4px;
    }

    .empty-pie .inner-circle {
        width: calc(100% - 6px);
        height: calc(100% - 6px);
    }

    .pie-container a {
        gap: var(--spacer-x05);
    }

    .pie-container > a:first-child {
        font-size: 1rem;
    }

    .info-alert {
        right: 0.3rem;
    }

        .info-alert img {
            width: 1.3rem;
        }
}
/* #endregion */