.planning {
    width: 100%;
    border: 1px solid grey;
} 

    .planning th {
        background-color: #337ab7;
        color: white;
        text-align: center;
        height: 50px;
        border: 1px solid #aaa;
        border-collapse: collapse;
    }

    .planning td {
        position: relative;
        min-width: 30px;
        height: 50px;
        border: 1px solid #aaa;
        border-collapse: collapse;
    }

.popover {
    width: 300px;
}

.planning a {
    display: block;
    min-width: 30px;
    min-height: 30px;
}

.planning td .jour {
    position: absolute;
    right: 0;
    top: 0;
    font-size: x-small;
}

.not-a-day {
    background-color: darkgrey;
}

.week-end {
    background: repeating-linear-gradient( -45deg, #cccccc, #cccccc 5px, transparent 5px, transparent 10px );
}

.jour-ferie {
    background: repeating-linear-gradient( -45deg, lightcoral, lightcoral 5px, transparent 5px, transparent 10px );
}

.planning-item {
    width: 30px;
    height: 50px;
    font-size: 40px;
    color: black;
}

.planning-item-active {
    background-color: #00A5BE;
}