.container2 {
            width: 100%;
			

        }
        h1, h3 {
            color: #424242;
            font-size: 1.4em;
            margin: 0px;
        }
        h3 {
            border-bottom: 1px solid #ddd;
            padding-bottom: 4px;
            margin-top: 10px;
            margin-bottom: 8px;
            font-size: 1.1em;
        }
        .info-card2 {
            display: grid;
            padding: 8px;
			padding-top:4px;
            background-color: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e0e6e8;
            margin-bottom: 0px;
			color: #424242
        }
        .info-card2 table {
            margin: 0;
            font-size: 12px;
        }
		.info-card2 p {
            margin: 0;
            font-size: 12px;
        }
        .info-card2 strong {
            color: #424242;
        }
        .facilities-row2 {
            grid-column: 1 / -1; /* Zorgt ervoor dat de faciliteiten de hele breedte innemen */
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
			    float: right;
        }
        .facility-icon-container2 {
            display: inline-flex; /* Gebruik inline-flex om het element binnen de tekststroom te houden */
            align-items: center;
            justify-content: center;
            width: 20px; /* Grootte van de container */
            height: 20px;
			margin-left:2px;
            border-radius: 50%; /* Maakt de container rond */
            background-color: #e6e6e6; /* Lichtgrijze achtergrondkleur */
			    float: right;
        }
        .facility-icon2 {
            width: 20px; /* Grootte van het icoon binnen de container */
            height: 20px;
        }
        .train-image-container2 {
            grid-column: 1 / -1;
            text-align: center;
            height: 45px;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;

        }
        .train-image-container2 img {
            margin-top: 4px;
			height: 30px;
            width: auto;
            border-radius: 6px;
        }
        
        /* SCROLLBAR OPMAAK */
        .train-image-container2::-webkit-scrollbar {
            height: 4px;
        }

        .train-image-container2::-webkit-scrollbar-track {
            background-color: #dbdbdb;
            border-radius: 10px;
        }

        .train-image-container2::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 10px;
        }

        .train-image-container2::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
        /* SCROLLBAR OPMAAK */
        .route-list2::-webkit-scrollbar {
            width: 5px;
			
        }

        .route-list2::-webkit-scrollbar-track {
            background-color: #dbdbdb;
            border-radius: 10px;
        }

        .route-list2::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 10px;
        }

        .route-list2::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
        .route-list2 {
            margin-top: 8px;
			padding-top: 5px;
			padding-bottom: 5px;
			background-color: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e0e6e8;
			overflow-x: hidden;
            overflow-y: auto;
            white-space: nowrap;
			max-height: 235px;
        }
        .route-list2 ul {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
        }
        .route-list2 li {
            position: relative;
            padding: 2px 10px 2px 34px;
            display: flex;
            flex-direction: column;
			
        }
        .route-list2 li::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            z-index: 1;
            border: 2px solid;
            background-color: #ffffff;
        }
        .route-list2 li.origin::before,
        .route-list2 li.destination::before {
            width: 8px;
            height: 8px;
            left: 10.5px;
        }
        .route-list2 li.stop::before {
            width: 8px;
            height: 8px;
            left: 10.5px;
        }
        .route-list2 li:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 20px;
            bottom: -18px;
            width: 2px;
            background-color: #cccccc;
            z-index: 0;
        }
        .route-list2 li.origin:not(:last-child)::after,
        .route-list2 li.destination:not(:last-child)::after {
            left: 15.3px;
        }
        .route-list2 li.stop:not(:last-child)::after {
            left: 15.3px;
        }
        .route-list2 li:first-child:not(:last-child)::after {
            top: 16px;
        }
        .route-list2 li.passed::before, 
        .route-list2 li.passed.origin::before, 
        .route-list2 li.passed.destination::before {
            border-color: #424242;
            background-color: #424242;
        }
        .route-list2 li.upcoming::before {
            border-color: #cccccc;
            background-color: #ffffff;
        }
        .route-list2 li.current::before {
            border-color: #424242;
            background-color: #424242;
        }
        /* Aangepaste stijl voor de half-gekleurde lijn */
        .route-list2 li.current:not(:last-child)::after {
            background: linear-gradient(to bottom, #424242 50%, #cccccc 50%);
        }
        /* Stijl voor volledig gekleurde lijn */
        .route-list2 li.passed:not(:last-child)::after {
            background-color: #424242;
        }
        /* Nieuwe CSS voor geannuleerde haltes */
        .route-list2 li.cancelled .stop-name2, .route-list2 li.cancelled .compact-time2 {
            text-decoration: line-through;
            color: #888;
        }
        .route-list2 li.cancelled::before {
            border-color: #888;
            background-color: #fff;
        }
        .route-list2 li.cancelled::after {
            background-color: #888;
        }
		
		/* Nieuwe CSS voor de 'aangekomen' status */
		.route-list2 li.arrived::before {
			border-color: #424242; /* Donkergrijze bol */
			background-color: #424242;
		}

        .route-list2 li.arrived:not(:last-child)::after {
            background: #cccccc;
		}
        .stop-row2 {
            display: grid;
            grid-template-columns: 65px 1fr auto;
            align-items: center;
		margin-top:2px;
		margin-bottom:2px;
        }
        .stop-name2 {
            color: #333;
            font-size: 13px;
			font-weight: none;
            position: relative;
			margin-bottom:4px;
			font-weight: bold;
            z-index: 2;
        }
        .delay2 {
            color: #DB3324;
            margin-left: 5px;
        }
        .compact-time2 {
            color: #424242;
            font-size: 12px;
            display: block; /* Maak het een blok-element */
            margin: 0;
            padding: 0;
            line-height: 1.2em; /* Minimaliseer de regelafstand */
        }
		
        .red2 {
            color: #DB3324;
        }
		.platform2{
	  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:rgba(0,0,0,0.05);stroke:%23424242;stroke-miterlimit:10;stroke-width:1%7D.filled-box%7Bfill:rgba(255,255,255,0);stroke:%23ff0000;stroke-miterlimit:10;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eplatform%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='9.5 0.5 9.5 9.5 0.5 9.5 0.5 44.5 44.5 44.5 44.5 0.5 9.5 0.5'/%3E%3Crect class='filled-box' x='0.5' y='0.5' width='9' height='9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");		
	  color: #424242;
	  background-repeat: no-repeat;
      background-position: center;
      background-size: contain; 
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
	  margin-right: 6px;
	  margin-bottom:2px;
    }
	        
	.platform2red{
	  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:rgba(0,0,0,0.05);stroke:%23DB3324;stroke-miterlimit:10;stroke-width:1%7D.filled-box%7Bfill:rgba(255,255,255,0);stroke:%23ff0000;stroke-miterlimit:10;stroke-width:0%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eplatform%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='9.5 0.5 9.5 9.5 0.5 9.5 0.5 44.5 44.5 44.5 44.5 0.5 9.5 0.5'/%3E%3Crect class='filled-box' x='0.5' y='0.5' width='9' height='9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");		
	  color: #DB3324;
	  background-repeat: no-repeat;
      background-position: center;
      background-size: contain; 
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
	  margin-right: 6px; 
	  margin-bottom:2px;
    }
	
	 .container {
            width: 100%;
            background-color: none;
        }
        .info-card {
            display: grid;
            padding: 5px;
			margin-top: 0px; 
			margin-left: 10px; 
			margin-right: 10px; 
			margin-bottom: 8px;
            background-color: rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            border: 1px solid #fff;
			position: relative; 
        }
        .info-card table {
            margin: 0;
            font-size: 12px;
        }
		.info-card p {
            margin: 0;
            font-size: 12px;
			
        }
        .facilities-row {
            grid-column: 1 / -1; /* Zorgt ervoor dat de faciliteiten de hele breedte innemen */
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
			float: right;
        }
        .facility-icon-container {
            display: inline-flex; /* Gebruik inline-flex om het element binnen de tekststroom te houden */
            align-items: center;
            justify-content: center;
			    float: right;
            width: 20px; /* Grootte van de container */
            height: 20px;
			margin-left:2px;
            border-radius: 50%; /* Maakt de container rond */
            background-color: rgba(0, 0, 0, 0.1);
			
        }
		.info {
            position: absolute;
            top: 0;
            left: 0;
			padding: 4px;
            z-index: 10; 
            cursor: pointer;
			border-bottom-right-radius: 6px;
			border-top-left-radius: 6px;
			background-color: rgba(0, 0, 0, 0.1);
			  display: -none;

        }
		.info img {
            width: 26px; 
            height: 26px; 

        }
        .facility-icon {
            width: 20px; /* Grootte van het icoon binnen de container */
            height: 20px;
        }
        .train-image-container {
            grid-column: 1 / -1;
            text-align: center;
            height: 38px;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }
        .train-image-container img {
            height: 30px;
            width: auto;
            border-radius: 6px;
        }
        
        /* SCROLLBAR OPMAAK */
        .train-image-container::-webkit-scrollbar {
           width: 4px;
		   height: 4px;
        }

        .train-image-container::-webkit-scrollbar-track {
             background-color: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .train-image-container::-webkit-scrollbar-thumb {
            background-color: #fff; 
            border-radius: 10px;
        }

        .train-image-container::-webkit-scrollbar-thumb:hover {
             background-color: rgba(255, 255, 255, 0.8);
        }
		
		
		        .popup-container {
            display: none; 
            opacity: 0; 
            transition: opacity 0.5s ease-in-out;
            position: fixed;
            z-index: 19;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            justify-content: center;
            align-items: center;
        }
        
        .popup-container.active {
            display: flex; 
            opacity: 1; 
        }
        .popup-content {
            background-color: #fff;
            border: 2px solid #009BDB;
            max-width: 500px;
            border-radius: 8px;
			margin: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            display: flex; 
            flex-direction: column;
        }

        .popup-header {
            background-color: #009BDB;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
            color: #fff;
            padding: 4px;
            display: flex;
            align-items: center; 
            justify-content: space-between; 
        }

        /* De titel in de header */
        .popup-title {
            margin: 0;
            font-size: 18px;
            display: flex;
            align-items: center;
        }

        /* De refresh en close knoppen */
        .refreshButton2 {
            cursor: pointer; 
			float: right;
            height: 32px;
            width: 32px;
			margin-bottom:2px;
			margin-left:2px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            transition: 0.2s ease-in-out; 
            display: flex;
            justify-content: center; /* Centreer de inhoud horizontaal */
            align-items: center; /* Centreer de inhoud verticaal */
        }

        .refreshButton2:hover {
            background: rgba(255,255,255,0.2);
        }

        .refreshButton2 img {
            margin: 0;
        }
		#reloadContentBtn{
		margin-right:4px;
		}
        
        .popup-body {
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
            transition: opacity 0.5s ease-in-out; 
            padding: 6px; 
        }