select:focus-visible {
    border: 0px solid rgba(235, 235, 239, 1);
}

.maplibregl-ctrl {
    display: none !important;
}

.maplibregl-popup {
    width: 100%;
    height: 416.05px;
}

.maplibregl-popup-content {
    border-radius: 30px !important;
    overflow: hidden;
}

.maplibregl-popup-close-button {
    position: absolute !important;
    --offset: 20px;
    top: calc(var(--offset) / 2) !important;
    right: var(--offset) !important;
    padding: 0 !important;
}

.popupContainer {
    width: 100%;
    max-height: 515px;
    overflow: hidden;
}

.showVariable {}

.cadNumberSelect {
    width: 88%;
    height: 50px;
    background-color: rgba(235, 235, 239, 1);
    color: rgba(29, 153, 27, 1);
    border-radius: 32px;
    position: absolute;
    top: 14px;
    left: 9px;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    padding: 12px 18px;
    background-image: url(../images/svgSelecttCadNum.svg);
    background-repeat: no-repeat;
    background-position-x: 94%;
    background-position-y: center;
    appearance: none;
}

.cadNumberItem {
    width: max-content;
    height: fit-content;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    padding: 1px 10px;
}

.featurePopup {
    width: 100%;
    top: 45px;
    left: 3px;
    margin: 70px 0 0 3px;
    height: 88%;
    max-height: 445px;
    overflow-y: scroll;
}

.propertiesContainer {
    max-height: 100%;
}

.propertyItem {
    padding-left: 13px;
}

.propertyName {
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    color: rgba(104, 107, 115, 1);
}

.propetyValue {
    max-width: 100%;
    margin-top: -5%;
    margin-bottom: 6%;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: rgba(18, 18, 18, 1);
}

.selectContainer {
    position: absolute;
    width: 270px;
    left: 441px;
    height: 70%;
    overflow-y: scroll;
}

.openMenu {
    color: rgba(30, 119, 165, 1);
}

.currentItem {
    background-color: rgba(235, 235, 239, 1);
    border-radius: 20px;
}

@keyframes propertyItem {
    from {
        background-color: rgba(207, 207, 207, 0);
    }

    to {
        background-color: rgba(207, 207, 207, 1);
    }
}

@media all and (max-width: 425px) {
    .cadNumberSelect {
        width: 80%;
        height: 15%;
        background-color: rgba(235, 235, 239, 1);
        color: rgba(29, 153, 27, 1);
        border-radius: 32px;
        position: absolute;
        top: 2%;
        font-weight: 400;
        font-size: 1.15rem;
        line-height: 27px;
        padding: 3.9%;
    }

    .maplibregl-popup-content {
        width: 100% !important;
    }

    .featurePopup {
        position: relative;
        width: 100%;
        top: 17px;
        left: 3px;
        margin: 70px 0 0 3px;
        overflow-x: hidden;
    }

    .popupContainer {
        width: 361px;
        height: 82%;
    }

    .propertiesContainer {
        width: 100%;
        margin: 25px 0 0 3px;
        max-height: 100%;
        overflow-y: scroll;
    }

    .svgSelectCadNum {
        top: 45px;
        left: 290px;
        padding-right: 12px;
    }
}

@media all and (max-width: 375px) {

    .featurePopup {
        width: 90%;
    }

    .svgSelectCadNum {
        top: 45px;
        left: 267px;
        padding-right: 12px;
    }
}

@media all and (max-width: 320px) {
    .svgSelectCadNum {
        top: 45px;
        left: 290px;
        padding-right: 12px;
    }
}