div.table {
    display: table;
}

div.table > div.row {
    display: table-row;
}

div.table > div.row > div.cell {
    display: table-cell;
}

div.table > div.row.header > div.cell {
    text-align: center;
    font-weight: bolder;
}

div.table > div.row.body > div.cell {
    height: 100px;
    min-height: 100px;
}

div.table > div.row > div.cell.time {
    width: 50px;
    min-width: 50px;
    text-align: center;
    font-weight: bold;
}

div.table > div.row > div.cell.time > div {
    position: relative;
    top: -50%;
}

div.table > div.row > div.cell.day {
    width: 20%;
}

div.table > div.row > div.cell.week {
    width: 100%;
    height: 100px;
    min-height: 100px;
}

div.table > div.row > div.cell.day.on-drag-enter,
div.table > div.row > div.cell.week.on-drag-enter,
div > div.dayEvents > div.pos.on-drag-enter {
    background-color: rgba(255, 240, 248, 0.5);
}

div.table > div.row > div.cell.day.dragHover,
div.table > div.row > div.cell.week.dragHover,
div > div.dayEvents > div.pos.on-drag-hover {
    background-color: rgba(244,164,96,0.5);
    /*background-color: sandybrown;*/
}

div.table > div.row.body > div.cell.time {
    border-right: 1px solid grey;
}

div.table > div.row.header > div.cell.day {
    border-bottom: 1px solid grey;
}

div.table > div.row.body > div.cell.day {
    border-bottom: 1px #555555 dashed;
    border-right: 1px #555555 solid;
}

div.table > div.row > div.cell.week {
    border: 1px #555555 dotted;
}



div > div.dayEvents > div.pos {
    position: absolute;
    background-color: green;
    color: white;
    font-size: 0.5vw;
    text-align: center;    
    cursor: pointer;
}

div > div.dayEvents > div.pos.dragSource {
    background-color: deepskyblue;
}

div > div.dayEvents > div.pos > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}