.geo-map-container {
    width: 100%;
    position: relative;
}

.geo_map.ratio_1 .geo-map-container {
    aspect-ratio: 1 / 1;
}

.geo_map.ratio_2_1 .geo-map-container {
    aspect-ratio: 2 / 1;
}


.geo_map.ratio_16_9 .geo-map-container {
    aspect-ratio: 16 / 9;
}

.geo_map.ratio_40_21 .geo-map-container {
    aspect-ratio: 40 / 12;
    /* 1200 / (40/21) = opengraph */
}



.geo_map.ratio_9_16 .geo-map-container {
    aspect-ratio: 9 / 16;
}

.geo_map.ratio_3_2 .geo-map-container {
    aspect-ratio: 3 / 2;
}

.geo_map.ratio_2_3 .geo-map-container {
    aspect-ratio: 2 / 3;
}

.webexpo-sessions-app.ratio_2_1 {
    aspect-ratio: 2/1;
}

.charts-container,
.geo-map-container {
    height: 100%;
}











.custom-cluster-icon,
.custom-single-icon {
    /* We remove the default inline-block shrink and let our own panel do the sizing */
    background: transparent;
    border: none;
}

/* The main panel */
.cluster-panel {
    position: relative;
    background: #fff;

    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    padding: 8px;
    min-width: 140px;
    /* For demonstration—overflow hidden or auto if lots of content */
    overflow: visible;
    z-index: 999;
    /* Ensure it’s above the map pin */
    width: fit-content;
    padding: 0;
    border-radius: 10px;
}

.cluster-panel {

    padding: 0;
}





/* Basic content layout */
.cluster-content {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

.cluster-location-name {
    background: black;
    font-family: Ladislav-Bold;
    padding-left: .5em;
    font-size: 22px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.speaker-list {
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    width: 250px;
    justify-content: flex-start;
}

.speaker-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
}

/*general-size-small general-size-medium general-size-large*/
.general-size-medium .speaker-list {
    width: 500px;
}

.general-size-medium .speaker-row {
    width: 50%;
}

.general-size-large .speaker-list {
    width: 600px;
}

.general-size-large .speaker-row {
    width: 33%;
}

.speaker-avatar {
    width: 50px;
    height: 50px;

    object-fit: cover;
    margin-right: 8px;

    border-radius: 0;
    margin-left: 0.5em;
    margin-top: 0.5em;
}

.speaker-name {
    font-weight: bold;
    font-size: 15px;
    font-family: 'Oxanium';
    color: black;
}

.show-more-btn {
    background: #f2f2f2;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-top: 5px;
    padding: 5px 8px;
    border-radius: 4px;
}

.marker-actions {
    display: flex
}

.marker-actions button {
    width: 50%;
    background-color: black;

}



.map-scale-holder {
    /* By default, set scale to 1 if no JS override has happened */
    --cluster-scale: 1;
}

.map-scale-holder .cluster-panel {
    scale: var(--cluster-scale);
    transform-origin: center;
    /* or center, whichever suits your layout */
}



.flag-pin {
    font-size: 50px;
    line-height: 1;
    scale: var(--cluster-scale);
    transform-origin: center;
}

.flag-icon-wrapper {
    min-width: 0px;
    min-height: 0px;
    margin-left: -25px !important;
}


.custom-control-panel button, .custom-control-panel select {
color: black;
background: white;
border-radius: 5px;
padding: 5px 10px;
}