body {
}
 .leftContainer {
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #394e70;
            color: #333;
            font-size: 35px;
            border: none;
            cursor: pointer;
            width: 50px;
            height: 100%;
            z-index: 1;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: 15%;
            border-bottom-right-radius: 15%;
            
        }


  .filterSearch {
            position: fixed;
            top: 240px;
            right: -220px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterSearch.visible {
                right: 10px;
            }

             .filterPlotsSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterPlotsSearch.visible {
                right: 10px;
            }

            .filterVillagblockeSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterVillagblockeSearch.visible {
                right: 10px;
            }

              .filterdistrictSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterdistrictSearch.visible {
                right: 10px;
            }

               .filtervillageSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filtervillageSearch.visible {
                right: 10px;
            }

              .filterstreetSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterstreetSearch.visible {
                right: 10px;
            }


              .filterlandmarkSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterlandmarkSearch.visible {
                right: 10px;
            }

               .filterbuildingnoSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterbuildingnoSearch.visible {
                right: 10px;
            }

             .filterdlsSearch {
            position: fixed;
            top: 240px;
            right: -255px;
            width: 250px;
            height: 300px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .filterdlsSearch.visible {
                right: 10px;
            }

             #toggleSearch {
            position: absolute;
            top: 530px;
            left: 10px;
            z-index: 1;
            padding-top:5px;
           
        }
              .toggleSearch:hover {
        animation: zoom 0.3s;
    }

             #btn_plots0{
            position: fixed;
            top: 270px;
            left: 10px;
            z-index: 2;
        } 



              .toggles {
            position: absolute;
            color: #fff;
            height: 250px;
            background-color: #344d61;
            z-index: 1;
            border: hidden;
        }
               .togglesPlots {
            position: absolute;
            color: #fff;
            height: 250px;
            background-color: #344d61;
            z-index: 1;
            border: hidden;
        }

               .Button4{
                   position:absolute;
                   left:50%;
                   bottom:15px;
                   width: 50px;
                    height: 25px; 
                     background-color: #394e70;
                      color: red;
                       font-size:8px;                  
                       font-weight: bold;
               }

  .toggleLayers {
            position: fixed;
            top: 575px;
            left: 10px;
            z-index: 2;
        }
   .toggleLayers:hover {
        animation: zoom 0.3s;
    }
   .formContainer2 {
    position: fixed;
            top: 375px;
            left: -400px;
            width: 375px;
            height: auto;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 0;
            transition: left 1.3s ease;
             overflow-y: hidden; /* Add this line to enable vertical scrolling */
             overflow-x:hidden;
             color:white;

        }

            .formContainer2.visible {
                left: 60px;
            }

      

               .togglesL {
            position: absolute;
            color: #fff;
            height: auto;
            background-color: #344d61;
            z-index: 1;
            border: hidden;
        }



                .formContainer3 {
    position: fixed;
            top: 615px;
            left: -350px;
            width: 300px;
            height: auto;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 0;
            transition: left 1.3s ease;
             /*overflow-y: scroll; 
             overflow-x:hidden;*/
             color:white;

        }

            .formContainer3.visible {
                left: 75px;
            }


             .formContainer4 {
    position: fixed;
            top: 755px;
            left: -350px;
            width: 250px;
            height: auto;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 0;
            transition: left 1.3s ease;
             /*overflow-y: scroll; 
             overflow-x:hidden;*/
             color:white;

        }

            .formContainer4.visible {
                left: 75px;
            }


              .togglesLSearch {
            position: absolute;
            color: #fff;
            height: auto;
            background-color: #344d61;
            z-index: 1;
            border: hidden;
        }

            .IdentifyBtn{
       position: fixed;
            top: 615px;
            left: 10px;
            z-index: 2;
}
          

             .IdentifyBtn:hover {
        animation: zoom 0.3s;
    }

            .custom-popup-container {
            position: absolute;
            top: 545px;
            right: 15px;
            background-color: #394e70;
            border: 1px solid #ccc;
            padding: 10px;
            width: 400px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: none;
            direction: rtl;
            border-radius: 25px;
        }

               @keyframes fadeInOut {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .popup-item {
            background-color: #394e70;
            padding: 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

            .popup-item:hover {
                background-color: #344d61;
            }

             .container {
            position: fixed;
            top: 130px;
            right: -250px;
            width: 250px;
            height: 75px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            transition: right 1.3s ease;
        }

            .container.visible {
                right: 10px;
            }

              .scaleContainer {
            position: fixed;
            top: 655px;
            left: -120px;
            width: 150px;
            height: auto;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 0;
            transition: left 1.3s ;       
            color:white;   
            font-size: 12px;
            font-weight: bold;
            font-family: 'Arial';
              
        }

            .scaleContainer.visible {
                left: 75px;
            }


            #toggleScale{
                   position: fixed;
            top: 655px;
            left: 10px;
            z-index: 2;
            }

             .toggleScale:hover {
        animation: zoom 0.3s;
    }



             .togglescloseScale{
                  position: absolute;
            color: #fff;
            height: 230px;
            background-color: #344d61;
            z-index: 1;
            border: hidden;
             }
            .scaleDiv{
                 position: fixed;
            top: 695px;
            left: 5px;
            z-index: 2;
            color:white;
            font-size:10px;
            font-weight:bold
            
            }


              #toggleImage{
                   position: fixed;
            top: 755px;
            left: 10px;
            z-index: 2;
            }

             .toggleImage:hover {
        animation: zoom 0.3s;
    }

            #locateBtn{
     position: fixed;
      top: 715px;
      left: 15px;
      z-index: 2;
      /*background-color: white;
      border: 1px solid #ccc;
      cursor: pointer;*/
}

               .locateBtn:hover {
        animation: zoom 0.3s;
    }


            #notification {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 10px;
            border-radius: 25px;
            display: none;
            font-size:10px;
            
        }

            .close-button {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #394e70;
            color: white;
            font-size: 35px;
            border: none;
            cursor: pointer;
            width: 3px;
            height: 1px;
            margin-left: 25px;
        }

            .close-button:hover {
                color: #ff0000;
            }

             .closebutton {
             position:absolute;
                   right:100px;
                   bottom:25px;
                   width: 50px;
                    height: 50px; 
                     background-color: #394e70;
                      color: white;
                       font-size:24px;                  
                       font-weight: bold;
        }

            .closebutton:hover {
                color: red;
            }


             .togglesImage {
            position: absolute;
            color: #fff;
            height: 100px;
            background-color: #344d61;
            z-index: 1;
            border: hidden;
        }


@media only screen and (max-width: 767px) {

            .formContainer2 {
            position: fixed;
            top: 1px;
            left: -350px;
            width: 270px;
            height: auto;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 0;
            transition: left 1.3s ease;
             overflow-y: hidden; /* Add this line to enable vertical scrolling */
             overflow-x:hidden;
             color:white;

        }

            .formContainer2.visible {
                left: 60px;
            }

             #toggleSearch {
            position: fixed;
            top: 400px;
            left: 10px;
            z-index: 1;
             width:20px;
             height:20px;
        }
              .toggleSearch:hover {
        animation: zoom 0.3s;
    }

    .toggleLayers {
            position: fixed;
            top: 430px;
            left: 10px;
            z-index: 2;
             width:20px;
             height:20px;
        }
   .toggleLayers:hover {
        animation: zoom 0.3s;
    }
     .formContainer3 {
    position: fixed;
            top: 240px;
            left: -350px;
            width: 270px;
            height: 250px;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 0;
            transition: left 1.3s ease;
             /*overflow-y: scroll; 
             overflow-x:hidden;*/
             color:white;

        }

            .formContainer3.visible {
                left: 60px;
            }
             .formContainer4 {
    position: fixed;
            top: 240px;
            left: -350px;
            width: 270px;
            height: auto;
            background-color: #394e70;
            border: 1px solid #ccc;
            border-radius: 25px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 0;
            transition: left 1.3s ease;
             /*overflow-y: scroll; 
             overflow-x:hidden;*/
             color:white;

        }

            .formContainer4.visible {
                left: 60px;
            }
                .IdentifyBtn{
       position: fixed;
            top: 460px;
            left: 10px;
            z-index: 2;
            /*width:20px;
            height:20px;*/
}
          

             .IdentifyBtn:hover {
        animation: zoom 0.3s;
    }
    .custom-popup-container {
            position: absolute;
            top: 240px;
            right: 30px;
            background-color: #394e70;
            border: 1px solid #ccc;
            padding: 10px;
            width: 270px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: none;
            direction: rtl;
            border-radius: 25px;
        }

                     .scaleContainer {
        position: fixed;
        top: 240px;
        left: -120px;
        width: 150px;
        height: auto;
        background-color: #394e70;
        border: 1px solid #ccc;
        border-radius: 25px;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        z-index: 0;
        transition: left 1.3s;
        color: white;
        font-size: 12px;
        font-weight: bold;
        font-family: 'Arial';
    }

        .scaleContainer.visible {
            left: 75px;
        }
              #toggleScale{
                   position: fixed;
            top: 495px;
            left: 10px;
            z-index: 2;
            }

             .toggleScale:hover {
        animation: zoom 0.3s;
    }

              .scaleDiv{
            position: absolute;
            top: 525px;
            left: 5px;
            z-index: 2;
            color:white;
            font-size:10px;
            font-weight:bold
            
            }

                 #locateBtn{
     position: fixed;
      top: 550px;
      left: 15px;
      z-index: 1;
     margin-bottom:500px;
}

               #locateBtn:hover {
        animation: zoom 0.3s;
    }
                  #toggleImage{
                   position: fixed;
            top: 580px;
            left: 10px;
            z-index: 2;
            }

             .toggleImage:hover {
        animation: zoom 0.3s;
    }
}