.mapboxgl-popup.workshop-popup {
    max-width: var(--popup-width) !important;
    width: var(--popup-width);
}

.mapboxgl-popup.workshop-popup.workshop-popup-mobile {
    max-width: calc(100vw - 2rem) !important;
}

.mapboxgl-popup.workshop-popup>.mapboxgl-popup-content {
    width: var(--popup-width);
}

.mapboxgl-popup.workshop-popup.workshop-popup-mobile>.mapboxgl-popup-content {
    max-width: calc(100vw - 2rem);
}

.workshop-list-container {
    background: white;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: var(--panels-width);
}

.workshop-list-container.workshop-list-container-computer {
    border-color: var(--border-colour);
    border-style: solid;
    border-width: 0 1px 1px 1px;
    left: 1.5rem;
    max-height: 685px;
    overflow-y: scroll;
    position: absolute;
    top: 191px;
    z-index: 500;
}

.workshop-list-container.workshop-list-container-mobile {
    background: var(--lighter-grey);
    width: 100vw;
}

.workshop-list-container>.workshop-list-item,
.workshop-popup-content {
    background: white;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.workshop-list-container>.workshop-list-item.selected {
    border: 3px solid var(--blue);
    box-sizing: border-box;
}

.workshop-list-container.workshop-list-container-computer>.workshop-list-item:not(.selected):not(:last-child) {
    border-bottom: 1px solid var(--border-colour);
}

.workshop-list-container.workshop-list-container-mobile>.workshop-list-item {
    margin: 0.5rem 1rem;
}

.workshop-list-container.workshop-list-container-mobile>.workshop-list-item:first-child {
    margin: 2rem 1rem 0.5rem 1rem;
}

.workshop-list-container.workshop-list-container-mobile>.workshop-list-item:last-child {
    margin: 0.5rem 1rem 2rem 1rem;
}


.workshop-list-container>.workshop-list-item>.workshop-list-item-type,
.workshop-popup-content>.workshop-list-item-type {
    background: var(--light-grey);
    border-radius: 50px;
    padding: 0.25rem 0.5rem;
    width: fit-content;
}

.workshop-list-container>.workshop-list-item>.workshop-list-item-location,
.workshop-popup-content>.workshop-list-item-location {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
}

.workshop-list-container>.workshop-list-item>.workshop-list-item-location>.workshop-list-item-distance,
.workshop-popup-content>.workshop-list-item-location>.workshop-list-item-distance {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto;
    text-align: end;
    white-space: nowrap;
}

.workshop-list-container>.workshop-list-item>.workshop-list-item-buttons-row,
.workshop-popup-content>.workshop-list-item-buttons-row {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.workshop-popup-content>.workshop-popup-header {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}