.timeslot-calendar div { box-sizing: border-box; } .timeslot-calendar .days-wrapper-vertical { display: flex; flex-direction: row; } .timeslot-calendar .days-wrapper-horizontal { display: flex; flex-direction: column; } .timeslot-calendar .day-wrapper { flex: 1 1 0; } .timeslot-calendar .day-content-vertical { display: flex; flex-direction: column; position: relative; } .timeslot-calendar .day-content-horizontal { display: flex; flex-direction: column; position: relative; overflow-x: auto; overflow-y: hidden; } .timeslot-calendar .day-content-horizontal-inner { position: relative; } .timeslot-calendar .hour-indicator-col-vertical { display: flex; flex: 1 1 0; flex-direction: column; z-index: 0; } .timeslot-calendar .hour-indicator-col-horizontal { display: flex; flex: 1 1 0; flex-direction: row; height: 100%; z-index: 0; } .timeslot-calendar .hour-indicator-vertical { border-style: solid; flex: 1 1 0; border-width: 2px 0 0; border-color: rgba(229, 231, 235, 0.5); box-sizing: border-box; } .timeslot-calendar .hour-indicator-horizontal { border-style: solid; flex: 1 1 0; border-width: 0 0 0 2px; border-color: rgba(229, 231, 235, 0.5); box-sizing: border-box; } .timeslot-calendar .buckets-wrapper { position: absolute; } .timeslot-calendar .buckets-vertical { display: flex; flex-direction: row; } .timeslot-calendar .buckets-horizontal { position: absolute; display: flex; flex-direction: column; } .timeslot-calendar .bucket-wrapper { flex: 1 1 0; } .timeslot-calendar .bucket-horizontal { flex: 1 1 0; display: flex; flex-direction: row; } .timeslot-calendar .bucket-inner-horizontal { position: relative; } .timeslot-calendar .events-wrapper { position: relative; } .timeslot-calendar .event-wrapper { position: absolute; z-index: 1; box-sizing: border-box; } /*--- Event example style ----*/ .timeslot-event { width: 100%; height: 100%; border-width: 2px; border-style: solid; border-color: rgba(0, 0, 0, 0.5); border-radius: 0.25rem; background-color: white; }