:root{

--mop-red:#E10600;
--legend-gray:#7a7a7a;

--mp-blue:#0072CE;
--cp-green:#009640;

--rex-blue:#0057B8;
--flix-green:#00A651;

--bus-orange:#ff8a00;

}

*{
box-sizing:border-box;
}

html,body{

margin:0;
width:1080px;
height:200px;
overflow:hidden;

font-family:Arial, Helvetica, sans-serif;

background:#fff;

}

.wrap{

width:1080px;
height:200px;

}

/* TOP BAR */

.topbar{

height:50px;

background:var(--mop-red);

color:#fff;

display:grid;

grid-template-columns:145px 185px 175px 210px 135px 190px;

column-gap:10px;

align-items:center;

padding:0 18px;

}

.title{

grid-column:1 / 5;

font-size:22px;

font-weight:900;

}

.time{

grid-column:5;

text-align:center;

font-size:26px;

font-weight:900;

font-variant-numeric:tabular-nums;

}

#colon{

display:inline-block;
width:.45em;

text-align:center;

animation:blink 2s steps(1) infinite;

}

@keyframes blink{

50%{opacity:0}

}

/* LEGEND */

.legend{

height:28px;

background:var(--legend-gray);

color:#fff;

display:grid;

grid-template-columns:145px 185px 175px 210px 135px 190px;

column-gap:10px;

align-items:center;

padding:0 18px;

font-size:18px;

font-weight:900;

}

.legend > div{

text-align:center;

}

/* ROWS */

.rows{

height:122px;

display:flex;

flex-direction:column;

}

.row{

height:40.6667px;

display:grid;

grid-template-columns:145px 185px 175px 210px 135px 190px;

column-gap:10px;

align-items:center;

padding:0 18px;

font-size:20px;

font-weight:900;

border-top:1px solid #dcdce3;

}

.row:nth-child(even){

background:#f2f2f2;

}

/* alinhamentos */

.t{

text-align:center;

}

.op,
.lc,
.dst,
.hr,
.obs{

text-align:center;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

/* CORES */

.is-mp .t,
.is-mp .op{

color:var(--mp-blue);

}

.is-cp .t,
.is-cp .op{

color:var(--cp-green);

}

.is-rex .t,
.is-rex .op{

color:var(--rex-blue);

}

.is-flix .t,
.is-flix .op{

color:var(--flix-green);

}

.is-bus .t,
.is-bus .op{

color:var(--bus-orange);

}