:root{

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

--line:#dcdce3;
--row-alt:#f2f2f2;

}

/* reset */

*{
box-sizing:border-box;
}

html,body{

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

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

background:#fff;
color:#000;

}

/* container */

.wrap{
width:1080px;
height:1920px;
}

/* ================= TOP BAR ================= */

.topbar{

height:60px;

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:26px;
font-weight:900;

letter-spacing:.2px;

}

.time{

grid-column:5;

text-align:center;

font-size:30px;
font-weight:900;

font-variant-numeric: tabular-nums;

}
/* colon blink */

#colon{

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

text-align:center;

animation:blink 2s steps(1) infinite;

}

@keyframes blink{
50%{opacity:0}
}

/* ================= LEGEND ================= */

.legend{

height:45px;

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:20px;
font-weight:900;

}

.legend > div{
text-align:center;
}

/* ================= ROWS ================= */

.rows{

height:1795px;

display:flex;
flex-direction:column;

}

/* 25 linhas */

.row{

height:71px;

display:grid;

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

column-gap:10px;

align-items:center;

padding:0 18px;

border-top:1px solid var(--line);

font-size:24px;
font-weight:900;

}

/* zebra */

.row:nth-child(even){
background:var(--row-alt);
}

/* alinhamentos */

.t{
text-align:center;
}

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

text-align:center;

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

}

.hr{
font-variant-numeric: tabular-nums;
}

/* ================= CORES ================= */

.is-mp .t,
.is-mp .op{
color:#0072CE;
}

.is-cp .t,
.is-cp .op{
color:#009640;
}

.is-rex .t,
.is-rex .op{
color:#0057B8;
}

.is-flix .t,
.is-flix .op{
color:#00A651;
}

.is-bus .t,
.is-bus .op{
color:#ff8a00;
}