.mapSplit {
    position: relative;
    font-size: 12px;
    display: flex;
}

.mapSplit #roverMap {
    flex: 1;
}

.mapSplit.logView #roverEventLog {
    width: 100%;
    min-height: 250px;
    overflow-y: scroll;
    max-height: 680px;
}

@media (min-width : 768px) {
    .logSplitView > #roverEventLog {
        max-width: 330px;
        flex: 1;
    }
}

.logInfo {
    padding: 3px 5px 0px 5px;
    text-align: left;
    font-size: 12px;
}

.logTime {
    margin-right: 2px;
}

.logHeading > * {
    display: inline-block;
    font-weight: bold;
}

/* styles for '...' */
.logMessage {
    /* hide text if it more than N lines  */
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative;
    /* use this value to count block height */
    line-height: 1.2em;
    /* max-height = line-height (1.2) * lines max number (2) */
    max-height: 2.6em;
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: start;
    height: 30px;
    /* place for '...' */
    margin-right: -0.5em;
    padding-right: 1.1em;
}
/* create the ... */
.logMessage:before {
    /* points in the end */
    content: '...';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    right: 0;
    bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.logMessage:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 0;
    /* set width and height */
    width: 1em;
    height: 1.5em;
    margin-top: 1em;
    /* bg color = bg color under block */
    background: white;
}

.showRoverLogs > i, .filterLogs > i {
    margin-top: 2px;
}

#roverEventLog {
    margin-top: 5px;
}

#roverEventLog .slick-pane-header {
    display: none;
}

#roverEventLog .slick-row.even > .slick-cell {
    background-color: #fff;
}

#roverEventLog .slick-row.odd > .slick-cell {
    background-color: #f9f9f9;
}

#roverEventLog .slick-cell {
    min-height: 50px !important;
    line-height: 20px !important;
    white-space: normal;
    overflow: visible;
    height: auto !important;
}

#roverEventLog .grid-canvas {
    width: 100% !important;
}

#roverEventLog .slick-pane {
    top: 0 !important;
    max-width: inherit !important;
}

input[type="radio"].splitView{
    margin-top: 4px !important;
}

@media (max-width : 767px) {
    .mapSplit {
        display: block;
    }

    .mapSplit #roverMap, .mapSplit #roverEventLog {
        height: 680px !important;
        width: 100%;
    }

    #roverEventLog .slick-pane {
        position: relative;
    }
}

@media (min-height : 680px) {
    #roverMap, #roverEventLog {
        width: 100%;
    }
}