#fahrplan {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .day {
        background: $gray-lighter;
        margin-bottom: 20px;
        width: auto;

        .header-row {
            background: $gray-lighter;
            display: flex;
            flex-direction: row;
            font-weight: 500;

            .date {
                flex: 0 0 100px;
                display: inline-block;
                padding: 8px 0;
                border-bottom: 4px solid $brand-primary;
                text-align: center;
            }
            .room-header {
                border-left: 2px solid lighten($gray-800, 55%);
                border-bottom: 4px solid $brand-primary;
                flex: 1 0;
                font-size: 16pt;
                text-align: center;
                padding: 8px 0;
                overflow-wrap: break-word;
                overflow: hidden;
            }
        }

        .rooms {
            display: flex;
            flex-direction: row;

            .time-column {
                flex: 0 0 100px;
                .hour {
                    height: 120px;
                    line-height: 30px;
                    padding-right: 16px;
                    text-align: right;
                }
                background: repeating-linear-gradient(to bottom, $gray-200, $gray-200 2px, $white 2px, $white 30px, $gray-200 30px, $gray-200 31px, $white 31px, $white 60px);
            }

            .room {
                border-left: 2px solid #ccc;
                flex: 1 0;
                background: repeating-linear-gradient(to bottom, $gray-200, $gray-200 2px, $white 2px, $white 30px, $gray-200 30px, $gray-200 31px, $white 31px, $white 60px);

                .talk-container {
                    position: relative;
                }
                .talk {
                    border: 1px solid lighten($brand-primary, 25%);
                    border-top: 4px solid lighten($brand-primary, 25%);
                    background-color: rgba(255, 255, 255, 0.76);
                    box-sizing: border-box;
                    color: rgba(0, 0, 0, 0.87);
                    display: block;
                    padding: 5px 10px;
                    position: absolute;
                    margin: 0 8px;
                    width: calc(100% - 16px);

                    &:hover .popover {
                        display: block;
                    }

                    .talk-content {
                        height: 100%;
                        overflow: hidden;

                        .do-not-record {
                            color: rgba(180,20,23,0.87);
                        }

                        .talk-title {
                            line-height: 28px;
                            font-weight: 500;
                        }
                        .talk-speakers {
                            line-height: 28px;
                            font-style: italic;
                        }
                    }

                    &:hover {

                        background-color: $gray-200;
                        height: auto !important;
                        z-index: 6;

                        &::before {
                            position: absolute;
                            background-color: $brand-primary;
                            border-radius: 2px;
                            color: rgba(255,255,255,0.87);
                            content: attr(data-time);
                            font-weight: 500;
                            line-height: 1;
                            padding: 8px 16px;
                            top: -46px;
                            white-space: nowrap;
                        }

                        &::after {
                            position: absolute;
                            content: '';
                            left: 24px;
                            width: 0;
                            height: 0;
                            border-left: 8px solid transparent;
                            border-right: 8px solid transparent;
                            border-top: 8px solid $brand-primary;
                            top: -14px;
                        }
                    }

                }
                .talk.talk-personal, .talk.active {
                    background-color: rgba(155, 255, 155, 0.76);
                }
            }
        }
        .no-talks {
            text-align: center;
        }
    }
}

.btn-sm .fa {
    padding-right: 5px;
}

#exporttimestamp {
    margin-bottom: 1em;
}

@media (max-width: 1000px) {
    #fahrplan {
        width: 100%;

        .day {
            .no-talks {
                margin-top: 0;
                text-align: center;
                padding: 10px;
            }
        }
    }
}
@media (max-width: 640px) {
    #fahrplan {
        .day {
            overflow-y: hidden;
            overflow-x: auto;
        }
        .room, .room-header {
            min-width: 150px;
        }
    }
}
