#map_wrapper {
    width: 100%;
    height: calc(100vh - 50px);
    padding:0;
    margin:0;
}

#toolbar {
    top:10px;
    left: 50%;
    transform: translate(-50%,5px);
    z-index:10;
}

#toolbar .nav a {
    cursor: pointer;
}

#map {
    width: 100%;
    height: calc(100vh - 50px);
    padding:0;
    margin:0;
}


#toolbar .nav-item  a.active {
    background: rgb(var( --bs-primary-rgb));
    color: #ffffff;
}

#toolbar .nav-item  a.active img {
    filter: invert(1);
}


.dropdown-form {
    width: 350px;
}

.marker-popup {
    width: 500px;
    overflow-x: hidden;
}
.marker-popup img.marker {
    height: 50px;
}
.marker-popup img.address {

}
.marker-popup img.illustration {
    height: 70px;
    width: auto;
}

.catalog-pick {
    cursor: pointer;

}
.catalog-pick:hover {
    border-color: rgb(var(--bs-primary-rgb));
    box-shadow: #cccccc 2px 1px 1px;

}

.color-swatch {
    cursor: pointer;
}
.color-swatch.active {
    border: 1px solid; outline: rgb(0, 0, 0) solid 2px;
}
.dropdown-item.active {
    background-color: var(--bs-primary);
    color: #fff;
}

.vehicle  {
    cursor: pointer
}

.vehicle.active {
    border-color: var(--bs-primary-rgb);
}

.vehicle img {
    height: 40px;
}

/* Let clicks pass through the modal container, but not the dialog/content */
#draggableModal.modal {
    pointer-events: none;
}

#draggableModal.modal .modal-dialog {
    width: 600px;
}
#draggableModal.modal .modal-dialog,
#draggableModal.modal .modal-content {
    pointer-events: auto;
}

/* You already set dialog absolute; keep it above page */
#draggableModal.modal .modal-dialog {
    position: absolute;
    margin: 0;
    transition: none;
    z-index: 1050;
}

/* Remove Bootstrap's transform that can create a full-screen hitbox on the dialog wrapper */
#draggableModal.modal.show .modal-dialog {
    transform: none;
}