@import "../bower_components/material-color/material-color";
@import url(http://fonts.googleapis.com/css?family=Roboto:100,400,300);
@import url(glyphter-font/css/Glyphter.css);
@import url(material.css);
body {
    font-family: 'Roboto', sans-serif;
    background-color: rgb(175, 193, 197)
}

p{
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

// a{
//     color: @clr-grey-100;
// }

g[stop-der]{
    cursor: pointer;
}

div[cum-chart] {
    padding: 6px;
    position: absolute;
    border-radius: 2px;
    z-index: 5;
    box-shadow: .5px .5px 2px rgba(0, 0, 0, 0.4);
    background-color: white;
    opacity: 0;
    transition: opacity ease-in-out .2s;
    pointer-events: none;
}

div[cum-chart].show {
    opacity: .93;
    transition: opacity ease-in-out .125s;
}

div.cum-chart {
    width: 130px;
    height: 110px;
}

// div[map-der] svg {
//     width: 100%;
//     position: absolute;
//     left: 0px;
//     top: 0px;
// }

cum-chart svg {
    width: 100%;
}


h1,
h2,
h3,
h4 {
    font-weight: 100;
}

div[row-der] {
    text-align: center;
}

#content {
    margin-top: 20px;
    margin-left: 15px;
}

#toolbar {
    width: 100%;
    position: absolute;
    height: 50px;
    background-color: #4EA198;
}

#left{
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
}

#left #top {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    padding-bottom: 8px;
    // margin-bottom:
    color: @clr-grey-100;
    background-color: #0098da;
}
#top h1{
    background-color: #0078ad;
    padding: 30px 30px 12px 30px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    // text-align: center;
    margin: 0px;
    // margin-bottom: 5px;
}

 div.my-padding{
    padding: 18px 30px 20px 30px;
}

#top md-tabs-wrapper{
    background-color: #0078ad;
}

#top .md-tab{
    color: white;
}

#left div#bottom {
    // padding-bottom: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    color: @clr-grey-700;
    background-color: white;
}

text.bus-icon {
    font-family: 'Glyphter';
    font-size: 1.1em;
    text-anchor: middle;
    dominant-baseline: central;
}

// .md-tab p{
//     font-size: 15px;
// }

.button{
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px;
}

.busgenius-toggle {
    margin: 10px 26px 8px 26px;
    padding: 10px 12px;
    border-radius: 6px;
    color: #006a99;
    background-color: rgba(255,255,255,.94);
    box-shadow: 0px 1px 3px rgba(0,0,0,.18);
}

.busgenius-toggle strong {
    font-weight: 400;
}

.busgenius-toggle p {
    margin: 4px 0px 0px 0px;
    color: @clr-grey-700;
    font-size: 12px;
    line-height: 16px;
}

#top .busgenius-toggle md-switch {
    margin: 0px 0px 0px 14px;
}

#top .busgenius-toggle md-switch.md-checked .md-bar {
    background-color: rgba(0,152,218,.45);
}

#top .busgenius-toggle md-switch.md-checked .md-thumb {
    background-color: #0098da;
}

.sim-speed {
    margin: 0px 26px 10px 26px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #006a99;
    background-color: rgba(255,255,255,.94);
    box-shadow: 0px 1px 3px rgba(0,0,0,.18);
}

.sim-speed strong {
    font-weight: 400;
    min-width: 120px;
}

.sim-speed md-slider {
    margin: 0px 12px;
}

// #left #top .md-tab{
//     color: white;
// }

// STOP COLORING
.stop-1 {
    fill: @clr-deep-orange-500;
}

.stop-2 {
    fill: #48bdf4;
}

.stop-3 {
    // fill: #4f8742;
    fill: @clr-light-green-600;
}

.stop-4 {
    fill: #fd1a16;
}

.stop-5{
    fill: @clr-indigo-500;
}

.stop-6{
    fill: @clr-yellow-500;
}

line,
path {
    pointer-events: none;
}

rect.bus {
    stroke: @clr-grey-100;
    // fill: black;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: fill .3s ease-in-out;
}

text.bus-map-label {
    font-size: 11px;
    font-weight: 600;
    fill: #424242;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2.5px;
    paint-order: stroke fill;
    pointer-events: none;
}

path#road{
    stroke: #8E8E8E;
}
path#stripe{
    stroke: #D8D8D8;
    opacity: .48;
}

circle.stop {
    // fill: white;
    filter: url(#f1);
}

circle.pax {
    stroke: none;
    shape-rendering: crispEdges;
    stroke: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: @clr-grey-200;
    shape-rendering: crispEdges;
}

.axis g.tick text {
    font-size: 10px;
    font-weight: 300;
}

text.axis-label {
    font-size: 12px;
    font-weight: 300;
}

text.axis-label.time {
    text-anchor: end;
}

text.axis-label.count {
    font-size: 15px;
    text-anchor: middle;
}

.axis g.tick line {
    stroke-width: 1px;
    stroke-dasharray: 1, 1.5;
}

.x-zero {
    stroke-width: 1px;
    stroke: @clr-grey-500;
}

rect.background {
    fill: none;
}

.axis g.tick:nth-last-child(2) {
    display: none;
}


.axis g.tick:first-child line {
    stroke-dasharray: none;
    stroke: @clr-grey-300;
    stroke-width: 1.3px;
}

.axis path.domain {
    display: none;
}

path.cumulative-line {
    fill: none;
    stroke: @clr-pink-500;
    stroke-width: 1px;
}

path.cumulative-area {
    stroke: none;
}

#rows{
    background-color: white;
}

row-der {
    // border-bottom: solid @clr-grey-300 1px;
    // padding: 20px 25px 20px 25px;
    cursor: pointer;
    // background-color: white;
}

row-der .row-bus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
}

row-der .row-bus-icon img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 40px;
    object-fit: contain;
}

row-der .row-bus-icon img.busgenius-row-icon {
    max-height: 46px;
}

row-der md-list-item.md-no-proxy{
    padding: 10px 16px 10px 16px;
}
md-list#rows {
    padding: 0px;
}

row-der md-list-item:hover {
    // border: solid @clr-grey-300 2px;
    // transition: all .3s ease-in-out;
    background-color: @clr-grey-100;
}

row-der md-list-item.busgenius-holding {
    background-color: #f8d7da;
}

row-der md-list-item.busgenius-depart-ready {
    background-color: #d1e7dd;
}

row-der .hold-timer {
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid #f5c2c7;
    color: #842029;
    background-color: #f8d7da;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

row-der .hold-timer:not(.idle) {
    font-weight: 700;
}

row-der .hold-timer.depart-ready {
    border-color: #badbcc;
    color: #0f5132;
    background-color: #d1e7dd;
}

row-der .hold-timer.idle {
    padding: 4px 0px;
    border: 0px;
    color: @clr-grey-500;
    background-color: transparent;
}

row-der md-list-item:active {
    background-color: @clr-grey-300;
    transition: all .2s ease-in-out;
}

#footer a{
    color: @clr-indigo-700;
    font-weight: 400;
}

// .md-whiteframe-z1 {
//   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); }

// .md-whiteframe-z2 {
//   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); }

// .md-whiteframe-z3 {
//   box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }

// .md-whiteframe-z4 {
//   box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

// .md-whiteframe-z5 {
//   box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }