.asse-label.top,
.asse-label.bottom,
.asse-label.left,
.asse-label.right {
    position: absolute;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 600;
    font-family: monospace;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.asse-label:empty {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.asse-label.top {
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.asse-label.bottom {
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
}

.asse-label.left {
    top: 50%;
    left: 18px;
    transform: translate(-100%, -50%);
}

.asse-label.right {
    top: 50%;
    right: 18px;
    transform: translate(100%, -50%);
}


.asse-label.state-red {
    color: var(--state-red);
}

.asse-label.state-yellow {
    color: var(--state-yellow);
}

.asse-label.state-green {
    color: var(--state-green);
}

.asse-label.state-black {
    color: var(--state-black);
}

@media (max-width: 1024px) {
    .asse-label {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .asse-label {
        font-size: 10px;
    }
}