.attendance-current {
    width:100%;
    background: #e2e2e2;
    box-sizing: border-box;
    padding : 8px;
    text-align:center;
    position: absolute;
    top:0;
    cursor: pointer;
}


.attendance-wrapper {

    position: relative;
    top: 0;
    width: 100%;
    box-sizing: border-box;
}

.attendance-states {
    display: none;
    position: absolute;
    top:0;
    width: 100%;
    box-sizing: border-box;
}

.attendance-wrapper:hover {
    z-index:9;
}

.attendance-wrapper:not(.attendance-clicked):hover .attendance-current {
    display: none;
}

.attendance-wrapper:not(.attendance-clicked):hover .attendance-states {
    display: block;
}

.attendance-state {
    box-sizing: border-box;
    padding: 8px;
    cursor: pointer;
    float:left;
    text-align:center;
    font-size:11px;
}

.attendance-state span {
    opacity: 0;
}

.attendance-state:hover , .attendance-state-active {
    opacity: 1;
}

.attendance-onbekend, .attendance-onbekend:hover {
    background: #bdc3c7;
}

.attendance-aanwezig , .attendance-aanwezig:hover {
    color: #098009 !important;
    background-color: #D9EAD3 !important;
}

.attendance-deels, .attendance-deels:hover {
    color: #975209 !important;
    background-color: #FCE5CD !important;
}

.attendance-verplaatst, .attendance-verplaatst:hover, .attendance-geen-open, .attendance-geen-open:hover {
    color: #9C7903 !important;
    background-color: #FEF2CC !important;
}

.attendance-geen-closed, .attendance-geen-closed:hover {
    background: transparent !important;
    outline: solid 1px #000;
    outline-offset: -1px;
    box-sizing: border-box !important;
}

.attendance-afgemeld, .attendance-afgemeld:hover {
    color: #206A79 !important;
    background-color: #C6E9F0 !important;
}

.attendance-afwezig, .attendance-afwezig:hover {
    color: #811B1B !important;
    background-color: #F7BEBC !important;
}


div[data-remark]:empty + span {
    opacity: 0.2;
}