.card{

    background:var(--surface);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:24px;

}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.page-header p{
    color:var(--text-light);
    margin-top:6px;
}

.data-table{
    width:100%;
    border-collapse:collapse;
}

.data-table th,
.data-table td{
    padding:14px 12px;
    border-bottom:1px solid var(--border);
    text-align:left;
}

.small-button{
    border:1px solid var(--border);
    background:white;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
}
.modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
}

.modal{
    width:min(520px,calc(100vw - 32px));
    /* Et vindue maa aldrig blive hoejere end skaermen */
    max-height:calc(100vh - 32px);
    overflow-y:auto;
    background:white;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:24px;
}

.modal-header,
.modal-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.modal label{
    display:block;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:600;
}

.input{
    width:100%;
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
}

.icon-button{
    border:none;
    background:transparent;
    font-size:24px;
}
.tabs{
    display:flex;
    gap:8px;
    border-bottom:1px solid var(--border);
    margin-bottom:24px;
    overflow-x:auto;
}

.tab{
    border:none;
    background:transparent;
    padding:12px 16px;
    border-bottom:3px solid transparent;
    color:var(--text-light);
    white-space:nowrap;
}

.tab.active{
    color:var(--primary);
    border-bottom-color:var(--primary);
    font-weight:700;
}

.tab-content{
    min-height:320px;
}

.empty-state{
    padding:36px;
    border:1px dashed var(--border);
    border-radius:var(--radius);
    color:var(--text-light);
    background:#fafafa;
}
.organisation-tree{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.org-node{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:white;
}

.org-node span{
    color:var(--text-light);
    font-size:.9rem;
}
.tree-node{
    margin-left:calc(var(--level) * 24px);
}

.tree-node-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    margin-bottom:8px;
    border:1px solid var(--border);
    border-radius:12px;
    background:white;
}

.tree-node-row span{
    display:block;
    margin-top:4px;
    color:var(--text-light);
    font-size:.85rem;
}

.tree-actions{
    display:flex;
    gap:8px;
}

.tree-action{
    border:1px solid var(--border);
    background:white;
    border-radius:8px;
    padding:6px 10px;
}
.table-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.form-grid label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-weight:600;
}
.toast-container{
    position:fixed;
    right:24px;
    bottom:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:2000;
}

.toast{
    min-width:260px;
    padding:14px 16px;
    border-radius:12px;
    background:white;
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border);
    opacity:0;
    transform:translateY(12px);
    transition:.25s ease;
    font-weight:600;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}

.toast-success{
    border-left:5px solid var(--success);
}

.toast-error{
    border-left:5px solid var(--danger);
}

.toast-warning{
    border-left:5px solid var(--warning);
}
.login-page{
    min-height:calc(100vh - 120px);
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-card{
    width:min(420px,100%);
    background:white;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:36px;
}

.login-card h1{
    margin-bottom:8px;
}

.login-card p{
    color:var(--text-light);
    margin-bottom:24px;
}

.login-card label{
    display:block;
    margin-top:16px;
    margin-bottom:6px;
    font-weight:600;
}

.login-button{
    width:100%;
    margin-top:22px;
}

.checkbox-row{
    display:flex!important;
    align-items:center;
    gap:8px;
    font-weight:400!important;
}

.link-button{
    border:none;
    background:transparent;
    color:var(--primary);
    margin-top:16px;
    cursor:pointer;
    width:100%;
}
.login-split{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:white;
}

.login-left{
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-box{
    width:360px;
}

.login-logo{
    display:block;
    width:260px;
    margin:0 auto 36px;
}

.login-box .input{
    margin-bottom:14px;
}

.login-button{
    width:130px;
    float:right;
    background:#174b2d;
}

.login-brand{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#143f29,#1e5a38);
    color:white;
    display:flex;
    align-items:center;
    padding-left:12%;
}

.brand-content{
    position:relative;
    z-index:2;
}

.brand-line{
    width:54px;
    height:4px;
    background:rgba(255,255,255,.75);
    border-radius:99px;
    margin-bottom:22px;
}

.brand-kicker{
    font-size:12px;
    letter-spacing:4px;
    font-weight:800;
    opacity:.85;
    margin-bottom:20px;
}

.brand-content h1{
    font-size:58px;
    line-height:.95;
    letter-spacing:-2px;
    font-weight:900;
}

.brand-shape{
    position:absolute;
    background:rgba(255,255,255,.08);
    border-radius:40px;
}

.brand-shape-top{
    width:440px;
    height:260px;
    right:-110px;
    top:-30px;
    transform:rotate(18deg);
}

.brand-shape-bottom{
    width:260px;
    height:260px;
    left:-90px;
    bottom:-90px;
    border-radius:50%;
}

@media(max-width:900px){
    .login-split{
        grid-template-columns:1fr;
    }

    .login-brand{
        display:none;
    }
}
.user-chip{
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:white;
    font-weight:600;
}
.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.toolbar-left,
.toolbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.toolbar-field{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:var(--text-light);
}

.toolbar-field .input{
    min-width:180px;
}
.detail-layout{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:20px;
}

.detail-menu{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    border-radius:14px;
    padding:10px;
    height:max-content;
}

.detail-menu-item{
    width:100%;
    border:none;
    background:transparent;
    padding:12px 14px;
    text-align:left;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
}

.detail-menu-item.active{
    background:var(--primary);
    color:#fff;
}

.detail-content{
    min-height:420px;
}
.module-picker{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

.module-card{
    display:block;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    cursor:pointer;
    transition:.18s ease;
}

.module-card:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-1px);
}

.module-card-left{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.module-checkbox{
    width:18px;
    height:18px;
    margin-top:3px;
    accent-color:var(--primary);
}

.module-title{
    font-weight:700;
    margin-bottom:6px;
}

.module-description{
    color:var(--text-muted);
    font-size:.9rem;
    line-height:1.35;
}

.module-card:has(.module-checkbox:checked){
    border-color:var(--primary);
    background:linear-gradient(180deg,#fff,#f7fbf8);
}
.process-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

.process-card{
    border:1px solid var(--border);
    background:#fff;
    border-radius:16px;
    padding:18px;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}

.process-card:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-1px);
}

.process-card-header{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.process-card-header span{
    font-size:.8rem;
    font-weight:700;
    color:var(--text-muted);
}

.process-card p{
    color:var(--text-muted);
    min-height:42px;
}

.process-card-footer{
    margin-top:16px;
    font-weight:600;
}
.process-steps{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.process-step{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}

.muted{
    color:var(--text-muted);
    font-size:.9rem;
    margin-top:4px;
}
.process-flow{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.process-flow-step{
    display:grid;
    grid-template-columns:32px 1fr auto;
    gap:14px;
    align-items:center;

    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
}

.process-flow-handle{
    color:var(--text-muted);
    font-weight:800;
    letter-spacing:-4px;
}

.process-flow-content strong{
    font-size:1rem;
}

.process-flow-actions{
    display:flex;
    gap:8px;
}
.template-choice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    margin-top:8px;
}

.template-choice-card{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    padding:16px;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}

.template-choice-card strong{
    display:block;
    margin-bottom:6px;
}

.template-choice-card span{
    display:block;
    color:var(--text-muted);
    font-size:.9rem;
    line-height:1.35;
}

.template-choice-card:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
}

.template-choice-card.active{
    border-color:var(--primary);
    background:linear-gradient(180deg,#fff,#f7fbf8);
}
.organisation-role-container{
    margin-top:8px;
}

.role-chip{
    display:inline-block;
    margin-right:6px;
    margin-top:4px;
    padding:4px 10px;
    border-radius:14px;
    background:#EEF6FF;
    color:#1D4ED8;
    font-size:12px;
    font-weight:600;
}

.role-warning{
    color:#D97706;
    font-size:12px;
    font-weight:600;
}
.role-chip-remove{
    margin-left:6px;
    border:0;
    background:transparent;
    cursor:pointer;
    font-weight:800;
    color:inherit;
}

/* Rollen viser hvem der sidder i den.
   Ubesatte roller markeres, så huller er synlige
   direkte i organisationstræet. */
.role-chip-main{
    border:0;
    padding:0;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

.role-chip-holder{
    margin-left:6px;
    padding-left:6px;
    border-left:1px solid currentColor;
    font-weight:500;
    opacity:.85;
}

.role-chip-vacant{
    background:#FEF3C7;
    color:#B45309;
}

.role-user-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:8px 0;

    border-bottom:1px solid var(--color-border);
}
.user-role-chip{
    display:inline-flex;
    align-items:center;

    gap:8px;

    padding:8px 12px;

    margin:6px;

    border-radius:18px;

    background:#eef5ff;

    border:1px solid #c8dafd;

    font-size:14px;
}
.table-scroll{
    overflow:auto;
    max-width:100%;
}

.table-input{
    min-width:140px;
    padding:6px 8px;
}
.calculation-part-row{
    display:grid;
    grid-template-columns:80px 1fr 40px;
    gap:10px;
    align-items:center;
    margin-bottom:10px;
}

.calc-remove{
    width:36px;
    height:36px;
}
/* =========================================================
   PLANNING STUDIO
========================================================= */

.planning-project-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.planning-project-card {
    border: 1px solid var(--border-color, #dfe5df);
    border-radius: 16px;
    padding: 20px;
    background: var(--card-background, #fff);
}

.planning-project-card-header,
.planning-builder-toolbar,
.planning-node-card-header,
.planning-project-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.planning-project-year,
.planning-stream-label,
.planning-node-type {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
}

.planning-project-description {
    min-height: 44px;
    opacity: .75;
}

.planning-project-meta {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.planning-project-meta div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.planning-project-meta span {
    opacity: .65;
}

.planning-status-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.planning-status-draft {
    background: #edf0ed;
}

.planning-status-ready {
    background: #fff4cc;
}

.planning-status-active {
    background: #dff5e6;
}

.planning-status-closed {
    background: #e4e9f3;
}

.planning-project-warning {
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 8px;
    background: #fff1ee;
}

.planning-builder-toolbar {
    margin-bottom: 18px;
}

.planning-builder-title {
    flex: 1;
}

.planning-builder-title h3,
.planning-builder-title p {
    margin: 0;
}

.planning-builder-actions {
    display: flex;
    gap: 10px;
}

.planning-studio-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.planning-design-panel {
    position: sticky;
    top: 20px;
    padding: 18px;
    border: 1px solid var(--border-color, #dfe5df);
    border-radius: 16px;
    background: var(--card-background, #fff);
}

.planning-panel-header {
    margin-bottom: 22px;
}

.planning-panel-header h3,
.planning-panel-header p {
    margin-top: 0;
}

.planning-design-section + .planning-design-section {
    margin-top: 24px;
}

.planning-design-list {
    display: grid;
    gap: 10px;
}

.planning-design-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, #dfe5df);
    border-radius: 10px;
    background: var(--background, #f8faf8);
    cursor: grab;
    user-select: none;
}

.planning-design-card:hover {
    border-color: #1f7a45;
}

.planning-design-card.is-dragging {
    opacity: .45;
}

.planning-design-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #e3f1e8;
    color: #185d36;
    font-weight: 700;
}

.planning-design-card strong,
.planning-design-card span {
    display: block;
}

.planning-design-card span {
    margin-top: 2px;
    font-size: 12px;
    opacity: .65;
}

.planning-domain-canvas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    background: #dce9df;
}

.planning-stream-column {
    min-width: 0;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
}

.planning-stream-header {
    margin-bottom: 18px;
    padding: 6px 4px;
}

.planning-stream-header h3,
.planning-stream-header p {
    margin-top: 0;
}

.planning-node-list {
    display: grid;
    gap: 14px;
}

.planning-node-card {
    min-height: 120px;
    padding: 14px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--card-background, #fff);
    transition:
        border-color .15s ease,
        transform .15s ease;
}

.planning-node-card.is-drop-target {
    border-color: #1f8b4c;
    transform: translateY(-2px);
}

.planning-assignment-count {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e8eee9;
    font-size: 12px;
    font-weight: 700;
}

.planning-node-assignments {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.planning-drop-placeholder {
    padding: 18px 12px;
    border: 1px dashed #aab7ac;
    border-radius: 10px;
    text-align: center;
    opacity: .65;
}

.planning-assignment-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #d8dfd9;
    border-radius: 9px;
    background: #f8faf8;
}

.planning-assignment-chip.is-invalid {
    border-color: #ce5b4b;
    background: #fff4f1;
}

.planning-assignment-chip strong,
.planning-assignment-chip span {
    display: block;
}

.planning-assignment-chip span {
    margin-top: 2px;
    font-size: 11px;
    opacity: .65;
}

.planning-assignment-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    opacity: .6;
}

.planning-assignment-remove:hover {
    opacity: 1;
}

.planning-validation-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 12px;
}

.planning-validation-card.is-valid {
    background: #e1f3e7;
}

.planning-validation-card.is-warning {
    background: #fff1d5;
}

.planning-validation-card p {
    margin: 3px 0 0;
}

.planning-validation-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-weight: 800;
}

.planning-small-empty {
    padding: 12px;
    opacity: .6;
}

.planning-project-modal {
    max-width: 700px;
}

@media (max-width: 1000px) {
    .planning-studio-layout {
        grid-template-columns: 1fr;
    }

    .planning-design-panel {
        position: static;
    }

    .planning-domain-canvas {
        grid-template-columns: 1fr;
    }

    .planning-builder-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

/* =========================================================
   MINE OPGAVER
========================================================= */

.my-tasks-summary{
    display:flex;
    gap:var(--space-4);
    margin-bottom:var(--space-4);
    flex-wrap:wrap;
}

.my-tasks-card{
    flex:1 1 160px;

    padding:var(--space-4);

    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
}

.my-tasks-card strong{
    display:block;
    font-size:1.8rem;
    line-height:1.1;
}

.my-tasks-card span{
    color:var(--color-text-muted);
    font-size:.85rem;
}

.my-tasks-card.is-critical strong{ color:var(--color-danger); }
.my-tasks-card.is-warning strong{ color:var(--color-warning); }

.my-task-row{
    display:flex;
    align-items:center;
    gap:var(--space-4);

    padding:var(--space-4) 0;

    border-bottom:1px solid var(--color-border);
}

.my-task-row:last-child{ border-bottom:0; }

.my-task-row.is-overdue{
    border-left:3px solid var(--color-danger);
    padding-left:var(--space-3);
}

.my-task-main{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.my-task-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    font-size:.85rem;
    white-space:nowrap;
}

.my-task-status{
    font-weight:600;
}

.my-task-overdue{
    color:var(--color-danger);
    font-weight:600;
}

.toolbar-checkbox{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    margin-right:var(--space-4);
}

@media (max-width: 720px){
    .my-task-row{
        flex-wrap:wrap;
        align-items:flex-start;
    }

    .my-task-meta{
        align-items:flex-start;
    }
}

/* Nyåbninger markeres i organisationstræet, så det kan ses
   uden at åbne hver enkelt enhed. */
.organisation-comparison-chip{
    display:inline-flex;
    align-items:center;

    margin-left:8px;
    padding:2px 10px;

    background:#FEF3C7;
    border-radius:999px;

    font-size:.74rem;
    font-weight:600;
    color:#92400E;
}

/* =========================================================
   VIRKSOMHEDER OG MENU
========================================================= */

.nav-empty{
    padding:16px;

    color:var(--color-text-muted);
    font-size:.85rem;
    line-height:1.5;
}

.company-table{
    width:100%;
    border-collapse:collapse;
    font-size:.9rem;
}

.company-table thead th{
    padding:10px 12px;

    background:#F9FAFB;
    border-bottom:1px solid var(--color-border);

    text-align:left;
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;

    color:var(--color-text-muted);
    white-space:nowrap;
}

.company-table tbody td{
    padding:10px 12px;
    border-bottom:1px solid var(--color-border);
}

.company-table tbody tr:last-child td{
    border-bottom:none;
}

.company-table tbody tr.is-incomplete{
    background:#FFFBEB;
}

.company-table__actions{
    text-align:right;
}

.company-pill{
    display:inline-flex;
    align-items:center;

    padding:3px 10px;
    border-radius:999px;

    font-size:.76rem;
    font-weight:600;
    white-space:nowrap;
}

.company-pill.is-good{
    background:#DCFCE7;
    color:#166534;
}

.company-pill.is-warning{
    background:#FEF3C7;
    color:#92400E;
}

.company-wizard{
    width:min(680px, calc(100vw - 32px));
}

.company-wizard__body{
    display:flex;
    flex-direction:column;
    gap:24px;

    max-height:min(64vh, 620px);
    overflow-y:auto;

    padding-right:4px;
}

.company-wizard__body h4{
    margin:0 0 4px;

    font-size:.78rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;

    color:var(--color-primary);
}

.company-wizard__body section{
    padding-bottom:4px;
    border-bottom:1px solid var(--color-border);
}

.company-wizard__body section:last-child{
    border-bottom:none;
}

.company-wizard__modules{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(220px, 1fr)
    );
    gap:8px;

    margin-top:8px;
}

.company-wizard__module{
    display:flex;
    align-items:flex-start;
    gap:8px;

    margin:0;
    padding:10px 12px;

    background:#F9FAFB;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);

    font-weight:500;
    cursor:pointer;
}

.company-wizard__module em{
    display:block;

    font-style:normal;
    font-size:.78rem;
    color:var(--color-text-muted);
}

/* =========================================================
   WORKSPACE I TOPLINJEN
========================================================= */

.topbar-workspace{
    width:auto;
    min-width:200px;
    max-width:320px;
    padding:6px 10px;
    font-size:.88rem;
}

.topbar-company{
    font-size:.88rem;
    font-weight:600;
    color:var(--color-text-muted, #64748b);
}

.topbar-owner{
    padding:3px 10px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    background:#ede9fe;
    color:#5b21b6;
}