.city-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-links {
    display: flex;
    max-width: 210px;
    justify-content: center;
    background-color: #fff;
}

@media only screen and (min-width:600px){
    .tab-links{
        margin: 20px 0;
    }
    .city-container{
        margin-top: 25px;
    }
}

@media only screen and (max-width:600px){
    .tab-links{
        margin: 20px 0 ;
    }
}

.letter-group {
    flex: 1 1 30%; /* Adjusts each group to take roughly one-third of the width */
    min-width: 200px; /* Minimum width for smaller screens */
    box-sizing: border-box;
    /* padding: 10px; */
    /* border: 1px solid #ccc; Just for visual separation, can be removed */
    max-width: 412px;
}
.letter-group-head{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
    color: #33333380;
}

.letter-filter {
    display: inline-flex; /* Aligns items horizontally */
    flex-wrap: wrap; /* Allows items to wrap as needed */
    justify-content: flex-start; /* Aligns items to the start of the flex line */
    margin-bottom: 20px; /* Adds some space below the filter */
    align-items: center; /* Centers items vertically */
    position: absolute; /* Adjust positioning */
    background-color: #fff;
}
@media only screen and (min-width:600px){
    .letter-filter{
        right: 0px; /* Distance from the right side */
        top: 20px; /* Distance from the top */
    }
}
@media only screen and (max-width:600px){
    .letter-filter{
        position: relative;
        width: 100%; 
        left: 0px; /* Distance from the right side */
        /* top: 70px; Distance from the top */
        padding-left: 10px;
    }
    .all-filter-wrapper{
        width: 100%;
    }
    button#all {
        /* width: 100%; */
        text-align-last: start;
    }
}
.filter-button {
    background-color: unset; /* Background color for buttons */
    cursor: pointer; /* Pointer cursor on hover */
    color: #33333380;
    box-shadow: none;
    height: 58px;
}
@media only screen and (min-width:600px){
    .filter-button{
        padding: 15px 20px;
    }
}
@media only screen and (max-width:600px){
    .filter-button{
        padding: 6px 4px;
    }
}
.filter-button:hover {
    color: #2f80ed;
    background-color: unset; /*Color changes on hover */
}

.filter-button.active {
    background-color: #fff; /* Active button color */
    color: #2f80ed;
}

.city-container ul, .city-container ol {
    list-style-type: none; /* Removes the list markers */
    padding: 0; /* Removes padding, especially important for unordered lists */
}

.divader {
    width: 85%;
    border-bottom: 1px solid !important;
    margin-bottom: 9px;
    color: #33333329 !important;
}
button.tab-link.active {
    color: var(--ast-global-color-0);
    border-bottom: 1px solid;
    border-radius: unset;
    height: 58px;
}
button.tab-link {
    background-color: unset;
    box-shadow: unset;
    color: #33333380;
    width: 100px !important;
}

#map-canvas {
    height: 550px; /* Set your desired height */
}

@media (max-width: 767px){
    .city-container{
        margin-top: 25px;
    }
}

.filter-button.active#all {
    border-bottom: 1px solid !important;
    border-radius: unset !important;
    margin: 0 10px !important;
}
@media(max-width:600px){
    .filter-button.active#all{
        margin: 0 !important;
    }
}