#map {
    height: 93vh;
    position: relative; /* Ensure the z-index works */
    z-index: 1; /* Lower than dropdown */
    width: 100%;

}
.map-buttons {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
.map-buttons button {
    background: white;
    border: 1px solid #ccc;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}
.map-buttons button.active {
    background: #025ea0;
    color: white;
    border-color: #9fa0a1;
}
/* .mapbtn-right{
    position: absolute;
    top: 63px;
    right: 75px;
}
.mapbtn-left{
    position: absolute;
    top: 63px;
    left: 75px;
} */
@font-face {
    font-family: 'MyCustomFont';
    src:url('/fonts/Bahij-Helvetica-Neue-45-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

nav {/* Example background color */
    z-index: 1000; /* Ensure it’s above other content */
    width: 100%; /* Full width */
}
.content-wrapper {
}
body {
    font-family: 'MyCustomFont', sans-serif;

}
.modal {
    z-index: 1050; /* Default Bootstrap modal z-index is 1050 */
}
.dropdown {
    z-index: 50; /* High enough to be on top */
}

.custom-btn:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.postal-code-color{
    height: 100%;
    align-content: center;
    padding: 15px;
    background-color: #025ea0;
    margin-bottom: 15px;

}
.Heading-color{
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 10px;


}
.div-color{
      font-weight: bold;
      font-size: 18px;
      color: #ffffff; text-align: center;

}

.modal-header {
    background-color: #007bff; /* Change this to your desired color */
    color: white; /* Text color */
}

.modal-footer {
    background-color: #f8f9fa; /* Change this to your desired color */
}

.modal-footer .btn-primary {
    background-color: #007bff; /* Button color */
    border-color: #007bff; /* Button border color */
}

.modal-footer .btn-secondary {
    background-color: #6c757d; /* Secondary button color */
    border-color: #6c757d; /* Secondary button border color */
}

/* General container styles */
.search-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Wrapper for the search box and button */
.search-box-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 5px 5px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
}

/* Input styles */
#search-box {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px 15px;
    border-radius: 25px;
    font-size: 16px;
    color: #333;
}
/* Remove border on focus */
#search-box:focus {
    outline: none;
    border: none;
    box-shadow: none; /* Some browsers add a shadow */
}


/* Search button (with icon) */
#search-icon {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 5px;
    margin-left: 10px;
}

#search-icon i {
    font-size: 18px;
    color: #555;
    transition: color 0.3s ease;
}

/* Icon hover effect */
#search-icon:hover i {
    color: #007bff;
}

/* Advanced styling for suggestions box */


/* Search box focus effect */
.search-box-wrapper:focus-within {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* For smaller devices */
@media (max-width: 768px) {
    .search-container {
        max-width: 90%;
    }


}


table {
    width: 100%;
    margin-top: 50px;
    border-collapse: collapse;
}


table, th, td {
    border: 1px solid black;
}

table,tr,td {
    padding: 10px;
     background-color:
     transparent;
     font-size:14;
}




.postal-code {
    cursor: pointer; /* Add cursor pointer to indicate clickable element */

  }

  .address {
    flex: 1;
    margin-inline-end: 20px;
    font-size: 17px;
    padding: 5px;
    /* border-color: #ffd900; */
    /* border-width: 1px;
    border-radius: 5px; */
  }

.suggestions {
    position: absolute;
    margin-top: 10px;
    width: 100%;
    /* border: 1px solid #ccc; */
    border-top: none;
    background-color: white;
    max-height: 280px;
    word-wrap: break-word;
    overflow-y: auto;
    z-index: 1000;
    font-size:11px;
}

.suggestion-item {
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    margin-bottom: 1px;
    border: 1px solid #025ea0;
    /* border-radius: 5px; */
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}
.leaflet-popup-content {
    font-family: 'MyCustomFont', sans-serif;
    font-size: 16px;
    color: #333;

}
.leaflet-popup-content-pashto {
    font-family: 'MyCustomFont', sans-serif;
    font-size: 16px;
    color: #333;
    direction:rtl;

}
.leaflet-sidebar-header {
    background-color: #F3D013 !important; /* Change header background color */
    color: #025ea0 !important; /* Change header text color */
    font-weight: bold;
}

.leaflet-sidebar-tabs ul li a {
    background-color: #F3D013 !important; /* Change tab background color */
    color: white !important; /* Change tab icon color */
}
#postalcode-response{
    font-family: 'MyCustomFont', sans-serif;
}
#sidebar {
    display: block; /* or flex, or grid depending on your layout */
    border-radius: 0;
}

.hiddensidebar {
    display: none !important;
}
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; /* Adjust this value to change the container width */
    height: 80px; /* Adjust this value to change the container height */
    background-color: #f0f0f0; /* Optional background color */
}

.custom-icon {
    width: 70%; /* Adjust this percentage to make the image smaller */
    height: auto; /* Keeps the aspect ratio */
}
.text-center {
    text-align: center;
    font-size: 0.85rem;
}