brouter-web/css/style.css

html, body, #map {
    height: 100%;
}

/* This is important so that bootstrap-select list goes over leaflet buttons
Since the list is in navbar and leaflet buttons within map, we create a
stacking context on their common ancestor */
body, #content {
    position: relative;
    z-index: 1;
}

.flexcolumn {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-flow: column;
}

.flexrow {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: row;
}

#content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

footer {
    -webkit-box-flex: none;
    -moz-box-flex: none;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;

    background-color: #f7f7f9;
}

#stats {
    flex-grow: 1;
    margin: 0;
    padding: 0;
}
#stats li {
    margin: 0 1rem;
}

#elevation-chart {
    height: 175px;
    font-size: 80%;
}

.form-group {
    margin-bottom: 0
}

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="col-"] {
    margin-left: 10px;
}


.axis path,
.axis line {
    stroke: #818a91;
    fill: none;
    shape-rendering: crispEdges;
}

.axis text {
    fill: #818a91;
}

.area {
    fill: rgba(129, 138, 145, 0.45);
}

#elevation-btn {
    align-items: center;
    margin-right: 0.5rem;
}

.routing-draw-enabled {
    cursor: crosshair;
}

#message {
    position: absolute;
    left: 446px; /* 400 + 10 + 26 + 10 */
    top: 0px;
    margin-top: 10px;
    z-index: 1000;
}

/* track messages (data tab) */
#tab_data {
    font-size: x-small;
}

/* dashed line animation, derived from Chris Coyier and others
http://css-tricks.com/svg-line-animation-works/
*/
.loading-trailer {
    -webkit-animation: dash 0.4s linear infinite;
    animation: dash 0.4s linear infinite;
}
@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 20;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes dash {
    from {
        stroke-dashoffset: 20;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/*
* opacity slider control (seiyria-bootstrap-slider)
*/

.control-slider {
    background: #fff;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.slider.slider-vertical {
    height: 80px;
}

/* invert track and selection styles to get partial gradient for "selection" */
.slider.slider-vertical .slider-track {
    width: 8px;
    margin-left: -4px;
    background-image: linear-gradient(to right, #f0f0f0 0%, #e9e9e9 100%);
    box-shadow: inset -1px -0px 1px rgba(55, 55, 55, 0.3), inset 1px 0px 1px rgba(230, 230, 230, 1);
}

.control-slider:hover .slider-track,
.control-slider:active .slider-track {
    background-image: linear-gradient(to bottom, magenta 0%, white 100%);
}

.slider-selection {
    background-color: #C6C6C6;
    background-image: none;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle {
    margin-left: -6px;
    cursor: ns-resize;
    box-sizing: border-box;
    background: none;

    /* bootstrap .btn-default */
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    background-repeat: repeat-x;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
    border: 1px solid #adadad;
}

/* activated Font Awesome icon and Bootstrap button
(for EasyButton add ' active' to icon class property) */
.fa.active, .btn.active, .btn.active:hover, .btn.active:focus {
    /* use same color as leaflet-locatecontrol */
    color: #2074B6;
}

.stats-label {
    word-break: break-all;
    font-weight: bold;
}

/* smaller tab height */
.nav > li > a {
    padding: 2px 15px;
}

/*
* DataTables
*/

table.dataTable.mini thead th,
table.dataTable.mini thead td {
    padding: 3px 13px 3px 2px;
}

table.dataTable.mini tbody th,
table.dataTable.mini tbody td {
    padding: 2px 2px;
    white-space: nowrap;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
    background-position: center right -3px;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
    background-color: rgba(255,255,0,0.2);
}