/* CSS Document */

.routePopup{

    min-width:180px;

}

.routePopupTitle{

    font-weight:bold;
    margin-bottom:4px;

}

.routePopupCity{

    color:#666;
    margin-bottom:10px;

}

.routePopupButton{

    width:100%;

    padding:6px 10px;

    border:none;

    border-radius:6px;

    background:#0d6efd;
    color:white;

    cursor:pointer;

}

.routePopupButton:hover{

    background:#0b5ed7;

}

.routeMeta{

    margin-top:10px;

    padding-top:8px;

    border-top:1px solid #ececec;

}

.routeMetaRow{

    display:flex;

    align-items:center;

    gap:8px;

    margin:4px 0;

    font-size:13px;

}

.routeMetaLabel{

    flex:1;

    color:#666;

}

.routeMetaValue{

    font-weight:600;

    color:#222;

}

#routeList{

    margin-top:25px;

}


.routeNumber{

    width:35px;

    height:35px;

    border-radius:50%;

    background:#0066aa;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.routeName{

    font-size:18px;

    font-weight:bold;

}

.routeCity{

    color:#666;

}

.editableTime{

    cursor:pointer;

    color:#0d6efd;

    font-weight:bold;

}

.editableTime:hover{

    text-decoration:underline;

}

.routeSegmentCard{

    margin:10px 8px;

    padding:12px;

    background:#f2f2f2;

    border:1px solid #ddd;

    border-radius:10px;

}

.routeSegmentRow{

    display:flex;
    align-items:center;
    gap:10px;

    padding:4px 0;

    font-size:.9rem;

}

.routeSegmentRow .material-symbols-outlined{

    font-size:18px;

    color:#666;

}

.routeButton{

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border:none;

    border-radius:8px;

    background:#1976d2;

    color:white;

    cursor:pointer;

    font-size:.9rem;

}

.routeButton:hover{

    background:#1565c0;

}

.routeSegmentButtons,
.segmentEditor{

    display:flex;
	
    flex-direction:row;
		
    gap:8px;
	
    margin-left:12px;
}


.routeButton{

    justify-content:center;
}

.dragHandle{
    display:grid;
    justify-content:center;
    align-items:center;

    padding:6px;

    cursor:grab;
    user-select:none;
}

.dragHandle:active{
    cursor:grabbing;
}

.tm-route-buttons{

    margin-top:10px;

    padding-top:10px;

    border-top:1px solid #ddd;

    text-align:center;

}

.tm-route-buttons button{

    margin:4px;

    padding:6px 12px;

    cursor:pointer;

    border-radius:5px;

}

#tmRouteToolbar{

    position:sticky;

    bottom:0;

    left:0;

    right:0;

    display:flex;

    justify-content:center;

    gap:8px;

    padding:10px;

    background:#fff;

    border-top:1px solid #ddd;

    z-index:1000;

}

#tmRouteToolbar button{

    width:40px;

    height:40px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#f5f5f5;

}
.roadclass{

    display:flex;
    align-items:center;

    gap:10px;

}

.routeCardButton{

    position:absolute;
    top:8px;
    right:8px;

}

.routeCardIconButton{

    width:30px;
    height:30px;

    border:none;
    background:white;

    border-radius:6px;

    cursor:pointer;

    color:#666;

    box-shadow:0 1px 4px rgba(0,0,0,.25);

}

.routeCardIconButton:hover{

    color:#0d6efd;

}

.routeCardInfo{

    display:grid;

    grid-template-columns:80px 1fr;

    gap:12px;

    margin-top:8px;

    margin-bottom:10px;

    align-items:start;
	
	spacing: 15px;

}

.routeCardImage{

    width:80px;

}

.routeCardText{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-width:0;
	
	font: normal 12px/18px Arial, sans-serif;
	color: #777;

}

.tmDialogContent{

    padding:24px;

}

.tmDialogContent h2{

    margin:0 0 20px 0;

}

#travelNotice{

    width:100%;
    min-height:340px;

    padding:15px;

    margin-bottom:20px;

    border:1px solid #d6d6d6;
    border-radius:8px;

    box-sizing:border-box;

    font-size:15px;
    line-height:1.5;

    resize:vertical;

}

.tmDialog{

    padding:30px;

}
.tm-routing-close {

    position: absolute;

    top: 8px;
    right: 8px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: white;

    font-size: 28px;
    line-height: 30px;

    cursor: pointer;

    z-index: 1000;

}

.tm-routing-close:hover {

    background: #eeeeee;

}

/* ==========================================================
   X für Routenbeschreibung
   ========================================================== */

.leaflet-routing-alternatives-container {

    position: relative;

}


.tm-routing-close {

    position: absolute !important;

    top: 8px !important;
    right: 8px !important;

    width: 32px !important;
    height: 32px !important;

    padding: 0 !important;

    border: 1px solid #ccc !important;
    border-radius: 50% !important;

    background: #fff !important;

    color: #333 !important;

    font-family: Arial, sans-serif !important;
    font-size: 26px !important;
    font-weight: normal !important;

    line-height: 30px !important;
    text-align: center !important;

    cursor: pointer !important;

    z-index: 99999 !important;

}


.tm-routing-close:hover {

    background: #eee !important;

}