.modal {
        display: none;
        position: fixed;
        z-index: 4;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
        padding-top: 60px;
    } 
    .modal-content { 
        background-color: #fefefe; 
        margin: 5% auto; 
        padding: 20px; 
        border: 1px solid #888; 
        width: 50%; 
    }
    .checkmark { display: none; 
        width: 50px; 
        height: 50px; 
        border-radius: 50%; 
        background-color: #4CAF50; 
        position: absolute; 
        top: 20px; 
        right: 20px; 
        animation: pop 0.5s ease-out; 
    } .checkmark:after { content: ''; display: block; width: 25px; height: 50px; border: solid white; border-width: 0 6px 6px 0; transform: rotate(45deg); position: absolute; top: 8px; left: 14px; } @keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    .close { 
        color: #aaa; 
        float: right; 
        font-size: 28px; 
        font-weight: bold; 
    }
    .close:hover, .close:focus { 
        color: black; 
        text-decoration: none; 
        cursor: pointer; 
    }
    .mapheader{
        top: 0px;
        position: relative;
        height: 100%;
        width: 100%;
        z-index: 2;
    }
    .mapsearch{
        left: 1px;
        position: absolute;
        top: 15px;
        z-index: 2;
    }
    .btnGetForm{
        right: 45px;
        position: absolute;
        top: 8px;
        z-index: 2;
        padding: 5px;
        cursor: pointer;
        color: white;
        background-color: red;
        border-radius: 5px;
    }
    .maptitle{
        width: 40%;
        bottom: 5px;
        text-align: center;
        background-color: blue;
        color: white;
        position: absolute;
        z-index: 2;
        padding: 10px;
        border-radius: 5px;
        margin-right:30%;
    }
    #map {
        height: 100vh;
        width: 98vw;
        margin: 0;
        top: 0px;
        height: 100%;
        width: 100%;
        transition: opacity 0.5s ease; 
        opacity: 1; 
        z-index: 1;
    }
	#neshanMapContainer a{
		text-decoration: none !important;
		border: none;
		padding:0;
		margin:0;
	}
	#neshanMapContainer a:hover{
		text-decoration: none !important;
		background: none;
		border: none;
		padding:0;
		margin:0;
	}
	#neshanMapContainer a:active{
		text-decoration: none !important;
		background: none;
		border: none;
		padding:0;
		margin:0;
	}
	.fade-out {
        opacity: 0.5;
    }
    .button {
        background-color: #2ea2cc;
        padding: 8px;
        margin: 3px;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }
    .search-container {
        top: 20px;
        background: white;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        z-index: 2;
    }
    .suggestions {
        border: 1px solid #ccc;
        max-height: 250px;
        overflow-y: auto;
        background: white;
        display: none;
        position: absolute;
        width: calc(85% - 20px);
        z-index: 3;
    }
    .suggestion-item {
        padding: 10px;
        cursor: pointer;
    }
    .suggestion-item:hover {
        background: #f0f0f0;
    }
    .buttons {
        margin: 20px 0;
    }
    .num-button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .num-button.active {
        background-color: #0056b3;
    }
    
    .num-button:hover {
        background-color: #0056b3;
    }
    .toggle-container {
        position: relative;
        margin: 10px 0; /* فاصله بین دکمه‌ها */
    }
    
    .toggle-checkbox {
        display: none; /* مخفی کردن checkbox */
    }
    
    .toggle-label {
        cursor: pointer;
        background-color: #ccc;
        border-radius: 50px;
        display: flex;
        align-items: center;
        width: 60px;
        height: 30px;
        position: relative;
        transition: background-color 0.3s;
    }
    
    .toggle-inner {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50px;
        transition: background-color 0.3s;
    }
    
    .toggle-switch {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s;
    }
    
    .toggle-checkbox:checked + .toggle-label {
        background-color: #66bb6a; /* رنگ پس‌زمینه زمانی که روشن است */
    }
    
    .toggle-checkbox:checked + .toggle-label .toggle-switch {
        transform: translateX(30px); /* جابجایی سوئیچ زمانی که روشن است */
    }
    
    .option-label {
        margin-left: 10px; /* فاصله بین دکمه و برچسب */
    }
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .flex-20 {
        padding: 2px;
        flex: 20%;
    }
    .flex-40 {
        padding: 2px;
        flex: 40%;
    }
    .flex-50 {
        padding: 2px;
        flex: 50%;
    }
    .flex-60 {
        padding: 2px;
        flex: 60%;
    }
    .flex-75 {
        padding: 2px;
        flex: 75%;
    }
    .flex-25 {
        padding: 2px;
        flex: 25%;
    }
    .flex-100 {
        padding: 2px;
        flex: 100%;
    }
    @media only screen and (max-width: 800px) {
        .mapsearch{
            top: 20px;
            left: 15px;
        }
        .maptitle{
            width: 66%;
            margin-right:17%;
        }
        .flex-20 {
            flex: 50%;
        }
        .flex-50,.flex-25,.flex-60,.flex-40,.flex-75,.flex-100  {
            flex: 100%;
        }
    }