.like-btn {
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    color: #ff0000;
}
.row01>img{
 display: none;

}

  

  #myDiv2{
   overflow: hidden;
      overflow-x: scroll;
    width: 100%;


 }
  .row01{
   margin-top: 15px;
  height: 60px;
   
    display: flex;
      border: none;
          width: 100%;
        
 margin-left: auto;
  margin-right: auto;
  }
  #myDiv2::-webkit-scrollbar{
        display:hidden;
}
.colmd1{
  display: flex;
   align-items: center;
   justify-content: space-between;
    margin-left: auto;
  margin-right: auto;
}

.formSelect:hover{

  color:rgb(207, 191, 191);
}


.formSelect{
  justify-content: space-between;
height: 35px;
  border: none;
  margin-right: 10px;
  align-items: center;
background-color: #000000;
  color: #e0dcce;
  border-radius: 7px;
}

   #myDiv2{
background-color: #030000;
align-items: center;
width: 100%;
 }
 #resetBTN{
  border: none;
  height: 20px;
  
 }
 


     .PICard{
      margin-top: 5px;
  color: #030000;

         padding-right: 5px;
        width: 250px;
        border-radius: 5px;
       font-weight: 600;
        font-size: small;
        background-color: rgb(255, 251, 190);
        font-family:sans-serif;
        height: 110px;
         box-shadow: 1px 1px 1px  rgba(0, 0, 0, 0.1);
    
 }
 
 .colmd12{
 margin-left: 10px;
 }
 #leftRightArrow{
  
  margin-left: 10px;
  margin-right: 10px;


 }
 #DetailsButton{
border: none;
border-radius: 10%;
background-color: #dfd87a;
 }
     .property-item>img {
      width: 140px;
      height: 120px;
      border-radius: 8px;
      padding: 5px;
      background-size: cover;
       
     }  
     .property-item {
        display: flex;
        width: 400px;
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 6px;
          
        cursor: pointer;
        border: 1px solid rgb(226, 230, 26);
    }
        .property-list {
        overflow-x: hidden;
        overflow-y: hidden;
        display: block;
       overflow-y: scroll;
      height: 500px;
        width: auto;
        background-color: rgb(255, 255, 255);
       margin: 0px 5px 5px;
        border-radius: 8px;
        
         
    }

 .property-list::-webkit-scrollbar-track {
  display: none;
 }

   
 
  #myDiv2::-webkit-scrollbar{
     display:hidden;
  
}
 .Map_Container{
        margin-top: 5px;
      }
  

        .donutchart::-webkit-scrollbar {
            display: none;
            overflow: hidden;
        }
    
        #chartCover {
         overflow: hidden;
           width: 100%;
           height: 250px;
            
        }
  .chart-controls {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.chart-controls select,
.chart-controls button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}
.chart-container{
  width: 70%;
}
.chart-controls button:hover {
    background: #f5f5f5;
}

.chart-controls select:focus,
.chart-controls button:focus {
    outline: none;
    border-color: #007bff;
}
        #donutchart{
          margin-left: 0;
          margin-top: 50px;
        width: fit-content;
        height: fit-content;
        }
             
      .chart-controls {
            margin-bottom: 15px;
            background: transparent;
        }

        #timePeriod {
            background: transparent;
            border: none;
            outline: none;
            padding: 8px 12px;
            cursor: pointer;
        }

        #timePeriod:focus {
            outline: none;
            box-shadow: none;
        }                                          
      
                                               

@media (min-width: 1401px) and (max-width: 4100px) {
    body {
       
        margin: 0;
        padding: 0;
        background-color: #fffff5;
         line-height:12px;
    }
    
    header {
        font-family: Arial, sans-serif;
      
         
   
        width: 100%;
        padding: 5px 0;
       margin-bottom: 1px;
    }
  #myDIV{
   width: 100%;
   
    
 }
  #myDiv2{
   overflow: hidden;
      overflow-x: scroll;
    width: 100%;


 }
  .row01{
    display: flex;
      border: none;
          width: 100%;
        height: 60px;
 margin-left: auto;
  margin-right: auto;
  }
  #myDiv2::-webkit-scrollbar{
        display:hidden;
}
.colmd1{
  display: flex;
   align-items: center;
   justify-content: space-between;
    margin-left: auto;
  margin-right: auto;
}

 #leftRightArrow{
  display: none;

 }

 
    .formControl{
        height: 26px;
        width: 100px;
        margin-left: 10px;
        border: none;
         color: #e4af11;
         background: none;
    }

    .formControl>option{
        height: 26px;
        width: 100px;
        margin-left: 10px;
        border: none;
         color: #e4af11;
         background: none;
    }



    /* Sidebar for property listings */

    


  
 
    
    
    .property-item:hover {
        background-color: #f1f1f1;
    }
    .Map_Container{
        
       width: 1200px;
       margin-left: auto;
       margin-right: auto;
      
    }

    .Map_Container>div{
        display: flex;
      
        

    }
     #map {
        
        width: 70%; 
        height: 500px;
        border-radius: 8px;
      
    }
    .property-list{
      width: 450px;
    }
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fdfdf6;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #1a1b1741;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

    .container{
      width: 100%;
    }
    
    /* Image styling for popups */
    .property-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin-top: 0px;
      
        
    }

.chart-container {
            width: 100%;
            height: 200px;
        
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
         
        }
        .donutchart::-webkit-scrollbar {
            display: none;
            overflow: hidden;
        }
   #chartCover {
         overflow: hidden;
           width: 100%;
           height: 250px;
            
        }
  .chart-controls {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.chart-controls select,
.chart-controls button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.chart-controls button:hover {
    background: #f5f5f5;
}

.chart-controls select:focus,
.chart-controls button:focus {
    outline: none;
    border-color: #007bff;
}
 

}

/*    1200px ~ 1400px*/

@media (min-width: 1201px) and (max-width: 1400px) {
    body {
       
        margin: 0;
        padding: 0;
        background-color: #fffff5;
    }
    
    header {
        font-family: Arial, sans-serif;
        
        
   
        width: 100%;
        padding: 5px 0;
       margin-bottom: 1px;
    }

  #myDiv2{
     width: 100%;
   overflow: hidden;
      overflow-x: scroll;
 }
  .row01{
     width: 90%;
    display: flex;
      border: none;
align-items: center;
margin-left: 2% ;
 
  }
  #myDiv2::-webkit-scrollbar{
        display:hidden;
  
}
  .colmd1{
  display: flex;
   align-items: center;
   justify-content: space-between;
}

.btn-primary{
  margin-left: 10px;
  margin-right: 10px;
}
   

 
    .formControl{
        height: 26px;
        width: 100px;
        margin-left: 10px;
        border: none;
         color: #e4af11;
         background: none;
    }

    .formControl>option{
        height: 26px;
        width: 100px;
        margin-left: 10px;
        border: none;
         color: #e4af11;
         background: none;
    }

    .property-item:hover {
        background-color: #f1f1f1;
    }
    .Map_Container{
        
       width: 1200px;
       margin-left: auto;
       margin-right: auto;
      
    }

    .Map_Container>div{
        display: flex;
      
        

    }
     #map {
        
        width: 70%; 
        height: 500px;
        border-radius: 8px;
      
    }
    .property-list{
      width: 450px;
    }
     
   
    .container{
      width: 100%;
    }
    
    /* Image styling for popups */
    .property-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin-top: 0px;
      
        
    }
.chart-container {
            width: 100%;
            height: 200px;
        
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
         
        }
        .donutchart::-webkit-scrollbar {
            display: none;
            overflow: hidden;
        }
    #chartCover {
         overflow: hidden;
           width: 100%;
           height: 250px;
            
        }
  .chart-controls {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.chart-controls select,
.chart-controls button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.chart-controls button:hover {
    background: #f5f5f5;
}

.chart-controls select:focus,
.chart-controls button:focus {
    outline: none;
    border-color: #007bff;
}
    

}

      /*    900px ~ 1200px*/
@media (min-width: 1001px)and (max-width: 1200px) {
    .row01>img{
    display: block;
  width: 14px;
  margin-left: 30px;

}
    body {
       
        margin: 0;
        padding: 0;
        background-color: #fffff5;
    }
    
   header {
        font-family: Arial, sans-serif;
       
        
         width: 100%;
        padding: 5px 0;
       margin-bottom: 1px;
    }

 #myDiv2{
 background-color: #030000;
  width: 100%;
   overflow: hidden;
      overflow-x: scroll;
      word-spacing: normal;
 }

  .row01{
   
   width: 1350px;
    display: flex;
      border: none;
align-items: center;
    overflow: hidden;
      overflow-y: scroll;
      color: #f1f1f1;
        justify-content: space-between;

  }
   #myDiv2::-webkit-scrollbar{
     display: none;
  
}
.colmd1{
  display: flex;
   align-items: center;
   justify-content: space-between;
   
  
}



 

.btn-primary{
  margin-left: 10px;
  margin-right: 10px;
}
    

 
    .formControl{
        height: 26px;
        width: 100px;
        margin-left: 10px;
        border: none;
         color: #e4af11;
         background: none;
    }


    
    .property-item:hover {
        background-color: #f1f1f1;
    }
        .Map_Container{
        
       width: 100%;
       margin-left: auto;
       margin-right: auto;
      
    }

    .Map_Container>div{
        display: flex;
      
        

    }
     #map {
        
        width: 70%; 
        height: 500px;
        border-radius: 8px;
      
    }
    .property-list{
      width: 450px;
    }
   
    /* Leaflet Map container */
   
    .container{
      width: 100%;
    }
     .property-list{
      width: 450px;
    }
    /* Image styling for popups */
    .property-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin-top: 0px;
      
        
    }
   .chart-container {
            width: 100%;
            height: 200px;
        
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
         
        }
        .donutchart::-webkit-scrollbar {
            display: none;
            overflow: hidden;
        }
        #chartCover {
         overflow: hidden;
           width: 100%;
           height: 250px;
            
        }
  .chart-controls {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.chart-controls select,
.chart-controls button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.chart-controls button:hover {
    background: #f5f5f5;
}

.chart-controls select:focus,
.chart-controls button:focus {
    outline: none;
    border-color: #007bff;
}
        #donutchart{
       width: fit-content;
        height: fit-content;
        }


}

      /*    600px ~ 900px*/
@media (min-width: 601px)and (max-width: 1000px) {
  .row01>img{
    display: block;
  width: 14px;
  margin-left: 30px;

}
    body {
       
        margin: 0;
        padding: 0;
        background-color: #fffff5;
    }
    
    header {
        font-family: Arial, sans-serif;
      
      
         width: 100%;
        padding: 5px 0;
       margin-bottom: 1px;
    }

 #myDiv2{
  background-color: #030000;
  width: 100%;
   overflow: hidden;
      overflow-x: scroll;
 }

  .row01{
  
   width: 1350px;
    display: flex;
      border: none;
align-items: center;
    overflow: hidden;
      overflow-y: scroll;
    
  }
   #myDiv2::-webkit-scrollbar{
     display: none;
  
}
.colmd1{
  display: flex;
   align-items: center;
   justify-content: space-between;
   
  
}

 
.colmd2>a>img{
width: 32px;
border-radius: 50px;
border: none;

}
.btn-primary{
  margin-left: 10px;
  margin-right: 10px;
}
   

 
    .formControl{
        height: 26px;
        width: 100px;
        margin-left: 10px;
        border: none;
         color: #e4af11;
         background: none;
    }

 

    
    .property-item:hover {
        background-color: #f1f1f1;
    }
    .Map_Container{
        
       width: 100%;
       margin-left: auto;
       margin-right: auto;
      
    }

    .Map_Container>div{
        display: flex;
      
        

    }
     #map {
         z-index: -5;
        width: 100%; 
        height: 500px;
        border-radius: 8px;
      
    }
    .property-list{
      width: 100%;
    }
    /* Leaflet Map container */
   
    .container{
      width: 100%;
    }
    
    /* Image styling for popups */
    .property-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin-top: 0px;
      
        
    }
   .chart-container {
            width: 100%;
            height: 200px;
        
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
         
        }
        .donutchart::-webkit-scrollbar {
            display: none;
            overflow: hidden;
        }
         #chartCover {
         overflow: hidden;
           width: 100%;
           height: 250px;
            
        }
  .chart-controls {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.chart-controls select,
.chart-controls button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.chart-controls button:hover {
    background: #f5f5f5;
}

.chart-controls select:focus,
.chart-controls button:focus {
    outline: none;
    border-color: #007bff;
}
        #donutchart{
       width: fit-content;
        height: fit-content;
        }


}



@media (min-width: 300px)and (max-width: 600px) {
  .row01>img{
    display: block;
  width: 14px;
  margin-left: 30px;

}
   body {
       
        margin: 0;
        padding: 0;
        background-color:#fffff5;
    }
    
    header {
        font-family: Arial, sans-serif;
  

      
      width: 100%;
          padding: 5px 0;
       margin-bottom: 1px;
    }

    
    .container {
        display: flex;
        justify-content: space-between;
        
    }

 #myDiv2{
  background-color: #030000;
  width: 100%;
   overflow: hidden;
      overflow-x: scroll;
 }

  .row01{
        margin-top: 5px;

    width: 1100px;
   width: 1350px;
   
    display: flex;
      border: none;
align-items: center;
    overflow: hidden;
      overflow-y: scroll;
      color: #f1f1f1;

  }
     .row01::-webkit-scrollbar {
  display: none;
}
.colmd1{
  display: flex;
   align-items: center;
   justify-content: space-between;
   
  
}



.btn-primary{
  margin-left: 10px;
  margin-right: 10px;
}
    

 
    .formControl{
        height: 26px;
        width: 100px;
        margin-left: 10px;
        border: none;
         color: #e4af11;
         background: none;
    }

/* Sidebar for property listings */
.property-list {
    
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
   overflow-x: scroll;
  height: 165px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}




.property-item:hover {
    background-color: #f1f1f1;
}

/* Leaflet Map container */
#map {
    width: 100%;
    height: 270px;
    border-radius: 8px;
    border: solid 1px gold;
    z-index: -1;
}

/* Image styling for popups */
.property-image {
    width: 0%;
    height: auto;
    border-radius: 8px;
    margin-top: 0px;
  
    
}

/* Shake animation */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

  #chartCover{
display: block;
height: auto;
  }
}
.chart-container{
  width: 100%;
  height: 200px;
}
#myMultiLineChart1{
  height: 200px;
}