@font-face {
            font-family: 'centrale';
            src: url('../../fonts/FRABK.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        
        body {
            width: 100%;
            margin: 0px;
            padding: 0px;
            /* font-family: Helvetica LT Std Cond Light, Helvetica LT Std, Arial; */
            font-family: 'centrale';
            font-stretch: condensed;
            font-weight: 600;
            font-size: 25px;
            overflow: hidden;
        }
        
        a {
            color: white;
            text-decoration: none;
        }
        
        a:hover {
            color: black;
            text-decoration: underline;
        }
        /***   services-fields    */
        
        .services-fields {
            /*  justify-content: space-around; */
            background-color: #E42C2A;
            color: black;
            /* height: 60px; */
            font-size: 25px;
            padding: 10px 0;
            display: -webkit-box;
            /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;
            /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox;
            /* TWEENER - IE 10 */
            display: -webkit-flex;
            /* NEW - Chrome */
            display: flex;
            /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }
        
        .services-fields span {
            font-size: 20px;
            font-style: italic;
        }
        
        .services-fields .operador {
            text-align: center;
            width: 265px;
            font-size: 28px;
            /* line-height: 45px; */
        }
        
        .nodatos {
            text-align: center;
            margin-top: 30px;
        }
        
        .logo {
            width: 25%;
            float: left;
        }
        
        .services-fields .observaciones {
            text-align: left;
            margin-left: 1px;
            padding-left: 30px;
        }
        
        .centrar {
            text-align: center;
            color: black;
            font-size: 40px;
        }
        
        table.titulo {
            font-size: 45px;
            width: 100%;
        }
        
        .centro {
            width: 50%;
            float: left;
        }
        
        .services-fields .parada {
            width: 392px;
            /*             margin-left: 20px; */
        }
        
        .services-fields .anden {
            width: 128px;
            text-align: center;
            /* margin-right: 20px; */
        }
        /***   services-list    */
        
        .services-list .odd {
            background-color: gainsboro;
        }
        
        .services-list .service {
            display: -webkit-box;
            /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;
            /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox;
            /* TWEENER - IE 10 */
            display: -webkit-flex;
            /* NEW - Chrome */
            display: flex;
            /* NEW, Spec - Opera 12.1, Firefox 20+ */
            /* justify-content: space-around; */
            height: 79px;
            line-height: 79px;
            border-bottom: 1px dashed rgb(142, 142, 142);
            z-index: 2;
        }
        
        .services-list .anden {
            font-size: 30px;
            width: 128px;
            /* border-radius: 10px;
            margin: 10px 20px 10px 10px;
            width: 95px;
            background-color: #009EE2;
            color: white;
            line-height: 60px; */
            text-align: center;
            z-index: 2;
        }
        
        .services-list .operador {
            /* margin: 17px 0 0 0;
            background-color: lightgray; */
            /* padding: 5px 5px 5px 15px;
            line-height: 40px; */
            z-index: 2;
        }
        
        .services-list .observaciones {
            font-size: 28px;
            /* font-style: italic; */
            font-weight: bold;
            /* overflow: hidden; */
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 30px;
            /* -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: my-animation 10s linear infinite;
            -webkit-animation: my-animation 10s linear infinite;
            animation: my-animation 10s linear infinite;
            z-index: 1; */
        }
        /* for Firefox */
        
        @-moz-keyframes my-animation {
            from {
                -moz-transform: translateX(20%);
            }
            to {
                -moz-transform: translateX(-20%);
            }
        }
        /* for Chrome */
        
        @-webkit-keyframes my-animation {
            from {
                -webkit-transform: translateX(20%);
            }
            to {
                -webkit-transform: translateX(-20%);
            }
        }
        
        @keyframes my-animation {
            from {
                -moz-transform: translateX(20%);
                -webkit-transform: translateX(20%);
                transform: translateX(20%);
            }
            to {
                -moz-transform: translateX(-20%);
                -webkit-transform: translateX(-20%);
                transform: translateX(-20%);
            }
        }
        
        .services-list .embarque {
            font-size: 35px;
            overflow: hidden;
            text-align: center;
            color: green;
        }
        
        .intermitente-hidden {
            display: none;
        }
        /***   comúns    */
        
        .title {
            display: -webkit-box;
            /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;
            /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox;
            /* TWEENER - IE 10 */
            display: -webkit-flex;
            /* NEW - Chrome */
            display: block;
            /* NEW, Spec - Opera 12.1, Firefox 20+ */
            justify-content: left;
            /* font-size: 60px; */
            text-transform: uppercase;
            line-height: 90px;
            padding-left: 30px;
        }
        
        .operador {
            width: 265px;
        }
        
        .derecha {
            float: right;
            margin-right: 30px;
            padding-right: 50px;
            /* font-size: 25px; */
            color: white !important;
        }
        
        .reloj {
            width: 25%;
            float: right;
            padding-right: 50px;
            color: #343a40;
        }
        
        .services-list .parada {
            /* font-size: 30px; */
            width: 392px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* margin-left: 60px; */
            text-transform: uppercase;
            z-index: 2;
        }
        
        .header .parada {
            /* margin-left: 60px; */
            text-align: left;
        }
        
        .hora_llegada {
            text-align: center;
            width: 250px;
            /* margin-left: 15px; */
            z-index: 2;
        }
        
        .observaciones {
            /* width: auto; */
            width: 700px;
            text-align: left !important;
            /* margin-left: 25px;
            padding-left: 20px;
            padding-right: 5px; */
        }
        
        .embarque {
            width: 30%;
            text-align: center;
        }
        
        .hora {
            width: 126px;
            text-align: left;
            margin-left: 15px;
            /* margin-right: 75px; */
            /* font-size: 30px; */
            z-index: 2;
        }
        
        .llegada {
            width: 7%;
            z-index: 2;
        }
        
        .linea {
            width: 7%;
            font-size: 35px;
            text-align: center;
            z-index: 2;
        }
        /* Animación texto desborda */
        
         :root {
            --offset: 20vw;
            --move-initial: calc(-25% + var(--offset));
            --move-final: calc(-50% + var(--offset));
        }
        
        .marquee {
            /* background: black;
            color: white;
            transition: all 0.5s;
            font-family: sans-serif;
            font-size: 5vw;
            line-height: 60%; */
            font-weight: bold;
            text-transform: uppercase;
            overflow: hidden;
        }
        
        .marquee.running .marquee-inner {
            animation-play-state: running;
        }
        
        .marquee-inner {
            width: fit-content;
            display: flex;
            position: relative;
            transform: translate3d(var(--move-initial), 0, 0);
            animation: marquee 10s linear infinite;
            animation-play-state: paused;
        }
        
        @keyframes marquee {
            0% {
                transform: translateX(var(--move-initial));
            }
            100% {
                transform: translateX(var(--move-final));
            }
        }
        /* Fin ainmacion texto */
        
        .footer {
            /* display: flex;
    justify-content: space-around; */
            background-color: #191D39;
            position: absolute;
            white-space: nowrap;
            bottom: 0px;
            height: 80px;
            line-height: 80px;
            width: 100%;
            color: white;
            text-align: center;
        }
        
        .footer span {
            /* font-style: italic; */
            color: #ffffff;
            float: right;
            padding-right: 20px;
            /* margin-right: 0px;
            margin-left: 250px; */
        }
        /***   COLORS    */
        
        .green {
            background-color: #7EA917;
        }
        
        .blue {
            background-color: #606cf3;
        }
        
        .red {
            background-color: #E42C2A;
        }
        
        .orange {
            background-color: #fd7e14;
        }
        
        .yellow {
            background-color: #ffc107;
        }
        
        .teal {
            background-color: #20c997;
        }
        
        .cyan {
            background-color: #17a2b8;
        }
        
        .white {
            background-color: #fff;
        }
        
        .gray {
            background-color: #6c757d;
        }
        
        .dark-gray {
            background-color: #343a40;
        }
        
        .light {
            background-color: #f8f9fa;
        }
        
        .dark {
            background-color: #343a40;
        }
        
        .blueXunta {
            background-color: #009EE2;
        }
        
        .yellowMonbus {
            background-color: #F8C800;
        }
        
        .blueMonbus {
            background-color: #191D39;
        }
        
        .services-list .hidden {
            background-color: white;
        }
        
        .services-list .remove {
            display: none;
        }
        
        .services-fields .remove {
            display: none;
            FONT-SIZE: 34PX;
        }
        
        .no-service {
            display: -webkit-box;
            /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;
            /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox;
            /* TWEENER - IE 10 */
            display: -webkit-flex;
            /* NEW - Chrome */
            display: flex;
            /* NEW, Spec - Opera 12.1, Firefox 20+ */
            justify-content: center;
            color: gray;
            font-size: 60px;
            padding-top: 15%;
            font-style: italic;
        }
        
        .logo_client {
            height: 80px;
            padding: 10px;
            margin-top: 10px;
        }
        /***  ANIMACIONS */
        
        .animated {
            -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        
        .fadeInTop {
            -webkit-animation-name: fadeInTop;
            animation-name: fadeInTop
        }
        
        .fadeInDown {
            -webkit-animation-name: fadeInDown;
            animation-name: fadeInDown
        }
        
        @keyframes fadeInDown {
            0% {
                opacity: 0;
            }
            15% {
                opacity: 0;
                -webkit-transform: translate3d(0, -50px, 0);
                transform: translate3d(0, -50px, 0)
            }
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }
        
        @-webkit-keyframes fadeInDown {
            0% {
                opacity: 0;
            }
            15% {
                opacity: 0;
                -webkit-transform: translate3d(0, -50px, 0);
                transform: translate3d(0, -50px, 0)
            }
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }
        
        @keyframes fadeInTop {
            0% {
                opacity: 0;
            }
            15% {
                opacity: 0;
                -webkit-transform: translate3d(0, 50px, 0);
                transform: translate3d(0, 50px, 0)
            }
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }
        
        @-webkit-keyframes fadeInTop {
            0% {
                opacity: 0;
            }
            15% {
                opacity: 0;
                -webkit-transform: translate3d(0, 50px, 0);
                transform: translate3d(0, 50px, 0)
            }
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }
        /*  Ticker */
        
        .ticker {
            display: inline-table;
            white-space: nowrap;
            transform: translate3d(0, 0, 0);
            padding-left: 100%;
        }
        
        @keyframes toLeft {
            0% {
                -webkit-transform: translateX(0%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes toLeft {
            0% {
                -webkit-transform: translateX(0%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes toRight {
            0% {
                -webkit-transform: translateX(-100%);
            }
            100% {
                -webkit-transform: translateX(0%);
            }
        }
        
        @-webkit-keyframes toRight {
            0% {
                -webkit-transform: translateX(-100%);
            }
            100% {
                -webkit-transform: translateX(0%);
            }
        }
        /* div {
            border: #191D39 2px solid;
        } */
        /* marquee */
        
        .marquee {
            background: #191D39;
            color: white;
            transition: all 0.5s;
            font-family: sans-serif;
            /* font-size: 5vw; */
            /* line-height: 60%; */
            font-weight: bold;
            text-transform: uppercase;
            overflow: hidden;
        }
        
        .marquee.running .marquee-inner {
            animation-play-state: running;
        }
        
        .marquee:hover .marquee-inner {
            animation-play-state: running;
        }
        
        .marquee span {
            padding: 0 2vw;
            white-space: nowrap;
        }
        
        .marquee-inner {
            width: fit-content;
            display: flex;
            position: relative;
            transform: translate3d(var(--move-initial), 0, 0);
            animation: marquee 10s linear infinite;
            animation-play-state: paused;
        }
        
        @keyframes marquee {
            0% {
                transform: translateX(var(--move-initial));
            }
            100% {
                transform: translateX(var(--move-final));
            }
        }