.contextMenu {
    display:none; position:absolute; background-color:#dddddd; border:1px solid black; box-shadow:10px 10px 10px rgba(0,0,0,0.75); z-index:1000;
    }
.contextMenuItem {
    padding: 2px;
    cursor: pointer;
    font-size:11px;

}

.contextMenuItem:hover {
    background-color: darkblue; 
    color: white;  
    text-decoration: underline; 
}
.contextMenuLine{
    border-top:1px solid darkgrey; margin:5px 0;
}
.map_select {
    margin:0px; 
    width: 600px;
    background-color:  lightgrey;
    box-shadow: 10px 5px 5px black;
}

.map_dropdown {
    padding:15px; 
    margin:10px;
    width: 400px;
    background-color:  darkblue;
    color:white;

}

.link_object:hover {
    opacity:1;
}

/* Umschalter Edit/View neben der Kartenauswahl */
.map_mode_button {
    margin-top: 0;
    vertical-align: middle;
}

/* Links auf der Karte sehen wie Links aus, statt einen blauen Kasten zu zeigen.
   Der weisse Halo (stroke hinter der Fuellung) haelt die Schrift auf jedem
   Hintergrund lesbar. Der Hover haengt am ganzen Element (.map_link), weil die
   Beschriftung selbst keine Mausereignisse annimmt. */
.map_link_text {
    fill: #1560d0;
    stroke: #ffffff;
    stroke-width: 0.06em;
    stroke-linejoin: round;
    paint-order: stroke fill;
    text-decoration: underline;
    /* Diffuser weisser Schein: mehrere weiche Schatten uebereinander statt einer
       harten Kontur. Die Radien in em wachsen mit der Schriftgroesse mit. */
    filter: drop-shadow(0 0 0.07em #ffffff)
            drop-shadow(0 0 0.14em #ffffff)
            drop-shadow(0 0 0.24em #ffffff);
}
.map_link:hover .map_link_text {
    fill: #0b3f8f;
    filter: drop-shadow(0 0 0.08em #ffffff)
            drop-shadow(0 0 0.18em #ffffff)
            drop-shadow(0 0 0.32em #ffffff);
}
.map_link .map_link_image {
    transition: opacity 100ms linear;
}
.map_link:hover .map_link_image {
    opacity: 0.75;
}

/* Anfasser zum Groessenveraendern: liegen direkt ausserhalb des Objektrandes und
   werden erst sichtbar, wenn die Maus in ihrer Zone ist. Weil das Dreieck im
   selben <g> wie die Zone steckt, bleibt es beim Darueberfahren stehen. */
.handle_arrow {
    fill: #1560d0;
    stroke: #ffffff;
    stroke-width: 0.5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms linear;
}
.resize_handle:hover .handle_arrow,
.resize_handle.dragging .handle_arrow {
    opacity: 1;
}
/* Form Container */
.mapmenu_form_container {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    padding: 10px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Form Group for Label and Input */
.mapmenu_form_group {
    display: flex;
    flex-direction: row; /* Arrange elements in a row (label and input) */
    align-items: center; /* Center vertically */
    margin-bottom: 103x;
}

/* Label Styling */
.mapmenu_form_group label {
    width: 120px; /* Fixed width for label */
    margin-bottom: 0; /* Reset margin to ensure alignment */
    font-weight: bold;
    vertical-align:top;
    font-size:11px;
    text-align: left; /* Align text to the left */
    padding-right: 10px; /* Space between label and input */
}

.mapmenu_select {
    padding: 6px;
    font-size: 11px;
    }
.input-container{ 
    width: 100%; 
}
.mapmenu_form_group input[type="number"],
.mapmenu_form_group input[type="text"],
.mapmenu_form_group select {
    width: 100%;
    padding: 6px;
    height: 30px;
    font-size: 11px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: white;
}
.mapmenu_form_group div {
    width: 100%;
    height: 100%;

    text-align:left;
    vertical-align:middle;
}

.mapmenu_form_group.list-group {
    flex-direction: row; 
    align-items: flex-start;
     width: 100%;
}

.not_included_element {
    height: 40px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    padding: 8px;
}

.not_included_element:hover {
    background-color: darkblue;
    color: white;
    text-decoration: underline;

}






/* Button Styling */
.mapmenu_save_btn {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 5px 5px;
    font-size: 11px;
    border-radius: 4px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

.mapmenu_save_btn:hover {
    background-color: #0056b3;
}

/* Close Button */
.mapmenu_close_btn {
    background-color: transparent;
    border: none;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    float: right;
}

/* Responsive Design */
@media (max-width: 600px) {
    .mapmenu_form_container {
        max-width: 90%;
        padding: 10px;
    }

    .mapmenu_form_group label,
    .mapmenu_form_group input,
    .mapmenu_form_group select { /* Adjust select width as well */
        width: 100%; /* Full width for labels and inputs on smaller screens */
 
        text-align: left; /* Align text to the left */
    }

    .mapmenu_form_group label {
        padding-right: 0;
        margin-bottom: 5px;
    }

    .mapmenu_form_group {
        flex-direction: column; /* Stack label and input vertically on smaller screens */
        align-items: flex-start; /* Align items to the start */
    }
}