html,
body{
    height:100%;
    margin:0;
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;
}

.navbar{
    z-index:1000;
}

#map{

    position:absolute;

    top:56px;
    bottom:40px;

    left:0;
    right:0;

}

#statusBar{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:40px;

    background:#222;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 15px;

    font-size:14px;

    z-index:1000;

}

.vehicle-popup{

    width:280px;

}

.popup-header{

    display:flex;

    align-items:center;

    gap:10px;

}

.operator-logo{

    width:48px;

    height:48px;

    object-fit:contain;

}

.vehicle-title{

    font-weight:bold;

    font-size:18px;

}

.vehicle-line{

    color:#0d6efd;

    font-weight:bold;

}

.popup-table{

    width:100%;

    margin-top:10px;

    margin-bottom:10px;

}

.popup-table td{

    padding:4px;

    vertical-align:top;

}

.vehicle-photo img{

    width:100%;

    border-radius:8px;

    border:1px solid #ccc;

}

.vehicle-popup{

    width:300px;

}

.popup-top{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

}

.popup-logo{

    width:55px;

    height:55px;

    object-fit:contain;

}

.popup-title{

    font-size:20px;

    font-weight:bold;

}

.popup-subtitle{

    color:#0d6efd;

    font-weight:bold;

}

.vehicle-table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:10px;

}

.vehicle-table th{

    width:95px;

    text-align:left;

    padding:4px;

}

.vehicle-table td{

    padding:4px;

}

.vehicle-image{

    width:100%;

    border-radius:10px;

    border:1px solid #ddd;

}

.vehicle-card{

    width:320px;

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

}

.vehicle-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

}

.vehicle-logo{

    width:60px;

    height:60px;

    object-fit:contain;

}

.vehicle-operator{

    font-size:24px;

    font-weight:bold;

}

.vehicle-line{

    color:#0066ff;

    font-weight:bold;

}

.vehicle-body{

    margin-top:10px;

}

.vehicle-body table{

    width:100%;

}

.vehicle-body th{

    text-align:left;

    width:110px;

    padding:5px;

}

.vehicle-body td{

    padding:5px;

}

.vehicle-photo{

    margin-top:12px;

}

.vehicle-photo img{

    width:100%;

    border-radius:10px;

    border:1px solid #ccc;

}

.vehicle-footer{

    margin-top:10px;

    border-top:1px solid #ddd;

    padding-top:8px;

    color:#666;

    font-size:13px;

}

/*
|--------------------------------------------------------------------------
| Komende haltes
|--------------------------------------------------------------------------
*/

.vehicle-stops {
    padding: 10px 12px 12px;
    border-top: 1px solid #ddd;
    background: #fff;
}

.vehicle-stops-title {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.vehicle-stops-list {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Halteregel
|--------------------------------------------------------------------------
*/

.vehicle-stop {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 26px;
    padding: 3px 0;

    font-size: 12px;
}


/*
|--------------------------------------------------------------------------
| Haltenaam
|--------------------------------------------------------------------------
*/

.vehicle-stop-name {
    display: flex;
    align-items: center;

    gap: 6px;

    flex: 1;
    min-width: 0;
}

.vehicle-stop-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/*
|--------------------------------------------------------------------------
| Tijd rechts
|--------------------------------------------------------------------------
*/

.vehicle-stop-right {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;
}

.vehicle-stop-time {
    min-width: 55px;

    text-align: right;

    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/*
|--------------------------------------------------------------------------
| Vertraging
|--------------------------------------------------------------------------
*/

.vehicle-stop-delay {
    font-size: 10px;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Huidige / volgende halte
|--------------------------------------------------------------------------
*/

.vehicle-stop.current-stop {
    font-weight: 700;
}

.vehicle-stop-arrow {
    flex-shrink: 0;
    font-size: 9px;
}

.vehicle-stop-dot {
    flex-shrink: 0;

    font-size: 15px;
    line-height: 10px;
}


/*
|--------------------------------------------------------------------------
| Geen haltegegevens
|--------------------------------------------------------------------------
*/

.vehicle-no-stops {
    padding: 8px 0;

    font-size: 12px;
    font-style: italic;
}

.vehicle-trip-link {
    font-weight: 700;
    text-decoration: none;
}

.vehicle-trip-link:hover {
    text-decoration: underline;
}

.trip-link,
.vehicle-link,
.vehicle-type-link,
.block-link {
    color: #135fa7;
    font-weight: bold;
    text-decoration: none;
}

.trip-link:hover,
.vehicle-link:hover,
.vehicle-type-link:hover,
.block-link:hover {
    text-decoration: underline;
}