:root{
    --antea-orange: #E87722;
    --custom-rz-data-grid-heigth: 74vh;
}

@media (min-resolution: 1.25dppx) {
    :root { --custom-rz-data-grid-heigth: 65.5vh; }
}

@media (min-resolution: 1.50dppx) {
    :root { --custom-rz-data-grid-heigth: 59vh; }
}

@media (min-resolution: 1.75dppx) {
    :root { --custom-rz-data-grid-heigth: 51.5vh; }
}

#werkorder-overview td{
    cursor: pointer;
}

#werkorder-overview td.--closed {
    position: relative;
}

#werkorder-overview td.--closed:before {
    content: " ";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: var(--antea-orange);
    top: 16px;
    position: absolute;
    left: -5px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
}

@keyframes closed_toggle {
    10% {
        border-radius: 8px;
    }
    90% {
        content: " ";
        width: 125px;
        height: 21px;
        border-radius: 8px;
        padding: 2px 5px 2px 10px;
        top: 12px;
    }
    100% {
        content: "Project is afgerond";
        width: 125px;
        height: 21px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 16px;
        padding: 2px 5px 2px 10px;
        top: 12px;
    }
}

#werkorder-overview td.--closed:hover:before {
    animation-name: closed_toggle;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
}