/* Map */
#map-main-place_mark_map {
    width: 100%;
    height: 425px;
    padding-bottom: 53%;
}
@media (max-width: 768px) {
    #map-main-place_mark_map {
        width: 100%;
        height: 100%;
        padding-bottom: 80%;
    }
}
.map-container {
    position: relative;
    height: 100vh;
}

#map-mobile {
    width: 100%;
    height: 100vh;
}
.leaflet-pane {
    z-index: 1!important;
}
#mapinfo {
    height: 300px;
}

@media (max-width: 768px) {
    #mapinfo {
        height: 200px;
    }
}
#map-main-place_mark_map .goongjs-canvas {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
}
.map-container-info {
    border: 2px solid #007bff;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    background-color: #f8f9fa;
}
.map-toggle {
    border: 2px solid #696cff;
    border-radius: 4px;
    padding: 5px;
    background-color: #ffffff;
    position: absolute;
    bottom: 49px;
    right: 0px;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.leaflet-top {
    top: 50px !important;
    z-index: 1 !important
}
.leaflet-right {
    z-index: 1 !important
}

/*!*Collapse z-index logic *!*/
/*.overlay {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    z-index: 10;*/
/*    width: 100%;*/
/*    max-width: 500px;*/
/*    height: auto;*/
/*    padding: 1rem;*/
/*}*/

/*.modal-backdrop {*/
/*    z-index: 4;*/
/*}*/

/*.modal.fade.sigout.show {*/
/*    top: 80px !important;*/
/*}*/

/*.modal {*/
/*    z-index: 15;*/
/*}*/

/*Icon Map CSS*/
.maplibregl-ctrl-bottom-left .maplibregl-ctrl {
    margin: 0 0 13px 10px !important;
}

.maplibregl-ctrl-group:not(:empty) {
    box-shadow: unset !important;
}

.maplibregl-ctrl-top-right {
    padding-top: 3.625rem !important;
}

.mapboxgl-ctrl-group.mapboxgl-ctrl {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10000;
    flex-direction: column;
    pointer-events: auto;
    padding-top: 3.625rem !important;
}

.mapbox-gl-draw_ctrl-draw-btn {
    width: 29px !important;
    height: 29px !important;
    display: block;
    padding: 0;
    outline: none;
    border: 0;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
}

.polygon-area-display {
    text-align: center;
    height: 66px;
    width: 152px;
    position: absolute;
    top: 58px;
    left: 45%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1;
    font-weight: bold;
    font-size: 14px;
    display: none;
    border-radius: 5px;
}

.coordinates-display {
    background: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: bold;
    z-index: 1;
    position: fixed;
    bottom: 46px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    border-radius: 5px;
}

/*Footer*/
@media only screen and (max-width: 600px) {
    .footer {
        position: fixed !important;
        padding: 0 70px;
        font-size: 10px;
    }
}

/*Scroll step 4*/
.step-content[data-step="4"] .scrollable-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 321px;
}
/*Header CSS*/
.container-p-y:not([class^=pt-]):not([class*=" pt-"]) {
    padding-top: 3.625rem !important;
}

.layout-menu-collapsed .layout-navbar.navbar-detached,
.layout-without-menu .layout-navbar.navbar-detached {
    width: calc(100% - (-0.375rem * 2)) !important;
    z-index: 11 !important;
}
/*Search css*/
.typeahead__cancel-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* CSS Reponsive mobile */
@media (max-width: 576px) {
    .footer {
        bottom: 17px!important;
    }
    .step-content .row .col-6,
    .step-content .row .col-12 {
        font-size: small;
    }
    #map-mobile{
        height: 60vh !important;
    }
    /*.overlay {*/
    /*    transform: scale(0.8) !important;*/
    /*    padding: 2.5rem !important;*/
    /*    position: absolute !important;*/
    /*    left: 0 !important;*/
    /*    transform: translateX(-11%) !important;*/
    /*}*/
    .overlay .card-body {
        padding: 0.8rem !important;
    }
    .form-control::placeholder {
        font-size: x-small !important;
    }
    .steps {
        margin-bottom: 0.1rem !important;
    }
    .connector {
    }
    .step-content {
        margin-bottom: 0.1rem !important;
    }
    .step-content .form-control,
    .step-content .input-group,
    .step-content label,
    .step-content .text-danger {
        font-size: small;
    }
    .step-content .form-control::placeholder {
        font-size: small;
    }
    .steps .step {
        margin-bottom: 0.1rem !important;
    }
    .button-group {
        flex-direction: column;
        padding: 0.5rem;
    }
    .button-group button {
        margin-bottom: 10px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .button-group button:last-child {
        margin-bottom: 0;
    }
    .card-header {
        padding: 0.1rem 0.7rem !important;
    }
    .h5.fw-bold.mb-3.d-flex {
        transform: scale(0.8) !important;
        transform-origin: left !important;
        margin-bottom: 0.1rem !important;
    }
    .fw-bold.text-danger {
        transform-origin: left !important;
    }
    .fw-bold.mb-3.d-flex.align-items-center {
        transform: scale(0.8) !important;
        transform-origin: left !important;
        margin-bottom: 0.1rem !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered,
    .select2-container .select2-selection--multiple .select2-selection__rendered {
        font-size: small;
    }
    .select2-container .select2-results__option {
        font-size: small;
    }
}

#info_placemark {
    max-height: 100vh; /* hoặc chiều cao map */
    overflow-y: scroll; /* vẫn cho phép cuộn */
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge cũ */
}

/* Chrome, Safari, Edge mới */
#info_placemark::-webkit-scrollbar {
    display: none;
}
.review-btn {
    font-weight: 500;
    background: #6ab23b;
    border-color: #dcdcdc !important;
    transition: 0.15s ease-in-out;
}

.review-btn:hover {
    background: #497a2a;
    border-color: #c8c8c8 !important;
}

.review-btn:active {
    transform: scale(0.97);
}