.compliancecheck-new-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing8);
    overflow: auto;
    height: 100%;
}

.compliancecheck-new-entry {
    display: flex;
    flex-direction: column;
    gap: var(--spacing4);
    height: 100%;
}

.compliancecheck-overview-card {
    gap: var(--spacing8);
    background: #fff;
    margin: 0;
    position: relative;
    transition: all 40ms;
    width: calc(var(--spacing32) * 10);
    min-height: calc(var(--spacing14) * 9);
}

.compliancecheck-overview-card-hover {
    cursor: pointer;
}

.compliancecheck-overview-card-hover:hover {
    border: 1px solid var(--main-theme-color-lighter);
}

.compliancecheck-overview-card .userprofile-img-text-m {
    width: var(--spacing40);
    height: var(--spacing40);
    font-size: 1.3rem !important;
}

.compliancecheck-overview-card-ph {
    cursor: default;
    margin: 0;
    opacity: 0.8;
    position: relative;
    height: fit-content;
}

.compliancecheck-overview-card-ph .z-label {
    font-family: monospace;
    letter-spacing: -1px;
    opacity: 0.8;
}

.compliancecheck-overview-card-ph .userprofile-user {
    border-radius: 50%;
    padding: var(--spacing4);
}

.compliancecheck-overview-card-ph .userprofile-img,
.compliancecheck-overview-card-ph .userprofile-img-text {
    filter: blur(2px);
}

.compliancecheck-overview-card img {
    width: var(--spacing40);
    height: var(--spacing40);
}

.compliancecheck-overview-card .card-s-icon {
    font-size: 3rem;
}

.compliancecheck-overview-card-bottom {
    display: inline-flex;
    flex-direction: column;
    gap: var(--spacing6);

    & * {
        font-size: 0.9rem;
    }
}

.compliancecheck-overview-card-hint {
    font-size: 2rem;
    position: absolute;
    top: var(--spacing);
    right: var(--spacing);

    & i {
        font-weight: bold;
    }
}

.compliancecheck-chartpreview {
    cursor: pointer;
    text-align: center;
    height: calc(var(--spacing) * 10);
    max-height: calc(var(--spacing) * 10);
}

.compliancecheck-highchart {
    flex: 1;
    max-height: calc(var(--spacing26) * 20);
}

.compliancecheck-highchart .z-charts {
    height: 100%;
}

.compliancetests-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.compliancetests-grid {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing);
    overflow: auto;
    height: 100%;
}

.compliancecheck-generate-grid {
    flex: 1;
    position: relative;
}

.compliancecheck-generate-hint {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    align-self: center;
    justify-self: center;
    background: #fff;
    border: var(--border-style);
    border-radius: var(--border-radius6);
    box-shadow: 0 0 12px 0 rgba(82, 63, 105, 0.08);
    padding: var(--spacing);
    position: absolute;
    inset: 0;
    z-index: 10;
}

.compliancetests {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    justify-items: center;
    overflow-y: auto;
}

.compliancetest {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: calc(var(--spacing20) * 22);
    min-height: calc(var(--spacing40) * 10);
    position: relative;
    width: 60%;
}

.compliancetest-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--spacing);
    background: #fff;
    border: var(--border-style);
    border-radius: var(--border-radius6);
    overflow: hidden;
}

.compliancetest-connect .compliancetest-card::before {
    content: '';
    background: #ededed;
    position: absolute;
    top: -13px;
    left: 50%;
    pointer-events: none;
    width: var(--spacing6);
    height: 31px;
    z-index: 0;
}

.compliancetest-active .compliancetest-card {
    border: 2px solid var(--main-theme-color);
}

.compliancetest-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    flex: 1;
    padding: var(--spacing);
    position: relative;
    overflow: hidden;
}

.compliancetest-title {
    font-size: 1.1rem;
    font-weight: bold;
}

.compliancetest-answers {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing8);
    position: relative;
}

.compliancetest-answer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: var(--border-radius6);
    padding: var(--spacing8) var(--spacing10);
}

.compliancetest-answer-hover {
    cursor: pointer;
    transition: all 40ms;
}

.compliancetest-answer-hover:hover {
    background: #f5f5f5;
}

.compliancetest-answer-hover:hover .compliancetest-answer-checkbox:before {
    content: "\f14a";
}

.compliancetest-answer-a {
    border: 1px solid var(--main-theme-color);
}

.compliancetest-answer-a .compliancetest-answer-checkbox:before {
    content: "\f14a" !important;
}

.compliancetest-answer-y {
    background: #d0ffd0;
}

.compliancetest-answer-y .compliancetest-answer-checkbox:before {
    content: "\f14a";
}

.compliancetest-answer-y .compliancetest-answer-radio:before {
    content: "\f192";
}

.compliancetest-answer-y2 {
    background: #ededed;
}

.compliancetest-answer-y2 .compliancetest-answer-checkbox:before {
    content: "\f0c8";
}

.compliancetest-answer-n {
    background: #ffd0d0;
}

.compliancetest-answer-n .compliancetest-answer-checkbox:before {
    content: "\f2d3";
}

.compliancetest-answer-option {
    display: flex;
    gap: var(--spacing8);
    align-items: center;
}

.compliancetest-answer-checkbox,
.compliancetest-answer-radio {
    font-size: 1.2rem;
    height: var(--spacing14);
}

.compliancetest-matchhtml {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compliancetest-matchhtml-chip {
    display: flex;
    align-items: center;
    background: #ededed;
    border-radius: var(--chip-radius6);
    color: var(--text-color);
    padding: var(--spacing4) var(--spacing10);
    min-height: var(--spacing32);
    width: auto;
    position: relative;
}

.compliancetest-matchhtml-chip-l::after {
    content: '';
    border: none;
    border-radius: 50%;
    background: var(--main-theme-color);
    width: var(--spacing16);
    height: var(--spacing16);
    position: absolute;
    right: calc(var(--spacing8) * -1);
    top: var(--spacing);
    z-index: 1;
}

.compliancetest-matchhtml-chip-r::before {
    content: '';
    border: none;
    border-radius: 50%;
    background: var(--main-theme-color);
    width: var(--spacing16);
    height: var(--spacing16);
    position: absolute;
    left: calc(var(--spacing8) * -1);
    top: var(--spacing);
    z-index: 1;
}

.compliancetest-matchhtml-connect {
    height: 5px;
    background: var(--main-theme-color);
    width: calc(var(--spacing40) * 2);
}

.compliancetest-buttons {
    display: flex;
    justify-content: flex-end;
}

.compliancetest-info {
    background: #009d00;
    position: absolute;
    right: calc(var(--spacing10) * -1);
    bottom: calc(var(--spacing24) * -1);
    width: var(--spacing38);
    height: calc(var(--spacing24) * 3);
    transform: rotate(45deg);
}

.compliancetest-info-icon {
    color: #fff;
    font-size: 1.2rem;
    position: absolute;
    left: var(--spacing10);
    top: var(--spacing30);
    transform: rotate(-45deg);
}

.compliancetest-info-icon.fa-check {
    left: var(--spacing8);
}

.compliancetest-info-icon.fa-chevron-double-right {
    font-size: 1.1rem;
    left: var(--spacing8);
}

.compliancetest-info .z-label {
    color: #fff;
    font-size: 0.9rem;
}


.compliancetest-cloze-input {
    border: none;
    border-bottom: 2px solid var(--main-theme-color);
    color: var(--text-color);
    margin: 0 6px;
    text-align: center;
}

.compliancetest-cloze-correct {
    background: #d0ffd0;
    padding: 0 var(--spacing4);
    border-radius: var(--border-radius4);
    margin: 0 var(--spacing2);
}

.compliancetest-cloze-wrong {
    background: #ffd0d0;
    border-top-left-radius: var(--border-radius4);
    border-bottom-left-radius: var(--border-radius4);
    padding: 0 var(--spacing4);
    margin-left: var(--spacing4);
    text-decoration: line-through;
}

.compliancetest-cloze-expected {
    background: #ededed;
    border-top-right-radius: var(--border-radius4);
    border-bottom-right-radius: var(--border-radius4);
    padding: 0 var(--spacing4);
    margin-right: var(--spacing4);
}

.compliancetest-assertionreason {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.compliancetest-assertionreason-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing4);
}

.compliancetest-order {
    display: flex;
    flex-direction: column;
    gap: var(--spacing6);
    overflow: auto;
}

.compliancetest-order-row {
    display: flex;
    align-items: center;
    gap: var(--spacing6);
    border: var(--border-style);
    border-radius: var(--border-radius4);
    padding: 0 var(--spacing8);
    min-height: var(--spacing40);
}

.compliancetest-order-row-y {
    background: #d0ffd0;
}

.compliancetest-order-row-n {
    background: #ffd0d0;
}

.compliancetest-order-row-hov:hover {
    border-color: var(--main-theme-color);
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.compliancetest-order-num {
    background: #fff;
    border-radius: 50%;
    text-align: center;
    width: var(--spacing20);
    height: var(--spacing20);
}

.compliancetest-order-label {
    flex: 1;
}

.compliancetest-order-buttons {
    display: flex;
}

.compliancetest-matching-editor {
    width: 100%;
    height: 100%;
}

.compliancetest-matching-editor-read * {
    cursor: default !important;
}

.compliancetest-matching-editor .drawflow .drawflow-node {
    border: none;
    background: #ededed;
    border-radius: var(--chip-radius6);
    color: var(--text-color);
    font-size: 0.94rem;
    hyphens: auto;
    padding: var(--spacing6) var(--spacing10);
    min-height: unset;
    width: auto;
    max-width: calc(var(--spacing20) * 10);
}

.compliancetest-matching-editor .drawflow .drawflow-node.selected {
    background: #ededed;
}

.compliancetest-matching-editor .drawflow .drawflow-node .input,
.compliancetest-matching-editor .drawflow .drawflow-node .output {
    background: var(--main-theme-color);
    border: none;
    width: var(--spacing16);
    height: var(--spacing16);
    margin-bottom: var(--spacing4);
}

.compliancetest-matching-editor .drawflow .drawflow-node .output {
    right: -6px;
}

.compliancetest-matching-editor .drawflow .drawflow-node .input {
    background: var(--main-theme-color);
    left: -18px;
}

.compliancetest-matching-editor .drawflow .connection {
    aspect-ratio: unset;
}

.compliancetest-matching-editor .drawflow .connection .main-path {
    stroke: var(--main-theme-color);
}

.compliancetest-matching-editor .drawflow .connection .main-path.selected {
    stroke: var(--main-theme-color-dark);
}

.compliancetest-matching-editor .drawflow-delete {
    display: none !important;
}

.compliancetest-matching-editor .drawflow .connection .main-path:hover {
    stroke: var(--main-theme-color-light);
}

.compliancetest-matching-editor .drawflow .connection.connection-green .main-path,
.compliancetest-matching-editor .drawflow .connection.connection-green .main-path:hover {
    stroke: #d0ffd0;
}

.compliancetest-matching-editor .drawflow .connection.connection-red .main-path,
.compliancetest-matching-editor .drawflow .connection.connection-red .main-path:hover {
    stroke: #ffd0d0;
}

.compliancetest-matching-editor .drawflow .connection.connection-gray .main-path,
.compliancetest-matching-editor .drawflow .connection.connection-gray .main-path:hover {
    stroke: #ededed;
}

.compliancetest-explanation {
    display: flex;
    align-items: center;
    gap: var(--spacing6);
    margin-right: var(--spacing40);
}

.compliancetest-explanation i {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffd43b;
}

.compliancetest-explanation .z-label {
    font-size: 0.9rem;
}

.compliance-info-created,
.compliance-info-open {
    background: #ededed;
}

.compliance-info-started {
    background: #ffd43b;
}

.compliance-info-failed {
    background: #d80000;
}

.compliance-info-incomplete {
    background: #fb8500;
}

.compliance-info-passed {
    background: #009d00;
}

.compliancetest-info *,
.compliance-info-failed *,
.compliance-info-passed * {
    color: #fff !important;
}

.compliance-info-created *,
.compliance-info-open *,
.compliance-info-started * {
    color: var(--text-color) !important;
}

.compliance-info-incomplete * {
    color: var(--text-color3) !important;
}

.compliancetest-info-placeholder {
    background: #ededed;
}

.compliance-overview,
.compliancetest-test,
.compliancetest-results {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) 3fr;
    gap: var(--spacing);
    flex: 1;
    overflow: hidden;
}

.compliance-overview .highcharts-exporting-group,
.compliancetest-test .highcharts-exporting-group,
.compliancetest-results .highcharts-exporting-group {
    display: none;
}

.compliance-overview-container,
.compliancetest-test-container,
.compliancetest-results-summary-container,
.compliancetest-results-info-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--spacing8);
}

.compliancetest-results-info-container {
    overflow: auto;
}

.compliance-overview-data,
.compliancetest-results-summary {
    display: grid;
    gap: var(--spacing8);
    align-items: center;
    grid-template-columns: auto 1fr;
}

.compliancetest-results-chart-hint {
    display: inline-block;
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
}

.compliancetest-results-list {
    overflow: hidden;
    position: relative;
}

.compliancetest-results-list-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing);
    overflow: auto;
    height: 100%;
}

.compliancetest-result-entry {
    display: inline-flex;
    flex-direction: column;
    min-width: calc(var(--spacing20) * 22);
    width: 55%;
    position: relative;
}

.z-cell .compliancetest-result-entry.compliance-result-attr {
    min-width: auto;
    width: auto;
}

.compliancetest-result-entry-connect .compliancetest-card::before {
    content: '';
    background: #ededed;
    position: absolute;
    top: -13px;
    left: 50%;
    pointer-events: none;
    width: var(--spacing6);
    height: 31px;
    z-index: 0;
}

.compliancetest-legend {
    display: flex;
    flex-direction: column;
    gap: var(--spacing8);
}

.compliancetest-legend-colors {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing8);
}

.compliancetest-legend-hint {
    color: var(--text-color2);
    font-style: italic;
}

.compliancetest-legend-color-entry {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--spacing8);
    border-radius: var(--border-radius6);
    padding: var(--spacing8) var(--spacing10);
}

.compliancetest-legend-results .compliancetest-legend {
    background: #fff;
    border: var(--border-style);
    border-radius: var(--border-radius6);
    padding: var(--spacing);
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.compliancetest-legend-results .compliancetest-legend-hint {
    font-size: 0.9rem;
}

.compliancetest-legend-results .compliancetest-legend-color-entry {
    gap: var(--spacing6);
    border-radius: var(--border-radius4);
    padding: var(--spacing4) var(--spacing8);
}

.compliancetest-legend-results * {
    font-size: 0.9rem;
}

.compliancetest-legend-results .compliancetest-answer-checkbox {
    height: var(--spacing10);
}

.compliance-empty-layout {
    position: relative;
    width: 100%;
    height: 100%;
}

.compliance-empty-layout-hint {
    display: inline-flex;
    flex-direction: column;
    gap: var(--spacing);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
    z-index: 1;
}

.compliance-empty-layout-hint-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.compliance-empty-layout .compliancetests-grid {
    opacity: 0.7;
    overflow: hidden;
}

.compliance-empty-layout .card-s {
    background: #fff;
}

.onboardingcheck-invitation-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.onboardingcheck-invitation-top {
    display: flex;
    gap: var(--spacing);
    align-items: center;
}

.onboardingcheck-invitation-host {
    color: var(--main-theme-color);
    font-weight: bold;
}

.compliance-storage-location {
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border: var(--border-style);
    border-radius: var(--border-radius6);
    padding: 0 var(--spacing8);
    position: relative;
    height: var(--spacing30);
    width: 100%;
}

.compliance-storage-location:hover {
    border: var(--border-style-hover);
}

.compliance-storage-location:hover::after {
    background: #fff;
    border-radius: var(--border-radius4);
    content: '\f040';
    color: var(--text-color);
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.077rem;
    height: 100%;
    padding: var(--spacing8);
    position: absolute;
    right: 0;
    top: 0;
}

.compliancecheck-focus {
    border-top-left-radius: var(--border-radius6);
    border-top-right-radius: var(--border-radius6);
}

.compliancecheck-focus-close .z-groupbox-header {
    border-radius: var(--border-radius6);
}

.compliancecheck-focus .z-groupbox-content {
    border-left: var(--border-style);
    border-bottom: var(--border-style);
    border-right: var(--border-style);
    border-bottom-left-radius: var(--border-radius6);
    border-bottom-right-radius: var(--border-radius6);
}

.compliancecheck-focus-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing8);
}

.compliancecheck-focus-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing6);
}

.compliancecheck-focus-switch-info {
    font-size: 0.9rem;
}

.compliancecheck-focus-switch-popup {
    max-width: calc(var(--spacing30) * 20);
    max-height: calc(var(--spacing34) * 10);
    overflow: auto;
}