.zag-level-1 {
    background-color: #272A2F;
}

.zag-level-2 {
    background-color: #5977B2;
}

.zag-level-3 {
    background-color: #87A4DC;
}

.zag-level-4 {
    background-color: #AFC0E5;
}

.zag-level-5 {
    background-color: #D9E2F4;
}

.zag-level-6 {
    background-color: #FFF;
    border: thin solid #d9e2f4;
}



/*.zag-level-1 {
    background-color: #000000;
    border: thin solid #000000;
}

.zag-level-2 {
    background-color: #071023;
    border: thin solid #000000;
}

.zag-level-3 {
    background-color: #1e283f;
    border: thin solid #000000;
}

.zag-level-4 {
    background-color: #555f75;
    border: thin solid #000000;
}

.zag-level-5 {
    background-color: #a0a5af;
    border: thin solid #000000;
}

.zag-level-6 {
    background-color: #FFF;
    border: thin solid #000000;
}*/

.font-9 {
    font-size: 9px;
}

.font-8 {
    font-size: 8px;
}

.font-7 {
    font-size: 7px;
}

.dotted-line {
    height: 10px;
    background-image: radial-gradient(1px 1px at center, var(--hr) 1px, transparent 2px);
    background-size: 10px 15px;
    background-position: center;
}

.square-chart-container {
    justify-content: space-between;
    display: flex;
    gap: 3px;
}

.square {
    height: 20px;
    width: 20px;
    display: inline-block;
    border-radius: 3px;
}