.tabs {
    display: flex;
    margin-bottom: 20px;
}

.tab-button {
    padding: 10px 20px;
    border: 1px solid #ddd;
    cursor: pointer;
    background-color: #f1f1f1;
    margin-right: 5px;
}

.tab-button.active {
    background-color: #007bff;
    color: white;
}

.tab-content {
    border: 1px solid #ddd;
    padding: 20px;
}

#price-range-house, #price-range-land, #price-range-newHomes, #size-range {
    width: 100%;
    margin: 10px 0;
}

.search-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.suburb {
    width: 12%;
}
.price{
    width: 47% !important;
}
.bedrooms{
    width: 8%;
}
.bathrooms{
    width: 8%;
}
.cars{
width: 7%;
}

#price-range-house, #price-range-land, #price-range-newHomes, #size-range {
    width: 32%;
}
.frontage{
    width: 6%;
}

/****************/
.property-search-form {
    margin-bottom: 30px;
}

.property-search-results {
    margin-top: 20px;
}

.property-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}


/****************/
/* Global reset and basic styles */


/* Container and layout styles */
.container-loop {
    display: flex;
    justify-content: space-between;
    background-color: white;
    border: 1px solid #d3d3d3;
    padding: 20px;
    max-width: 800px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.container-loop .map-section {
    flex: 1;
}

.map-image {
    width: 100%;
    max-width: 300px; /* Responsive width */
    height: auto;
}

.info-section {
    flex: 1;
    margin-left: 20px;
}

.container-loop .header h2 {
    font-size: 22px;
    color: #007abf;
    margin-bottom: 5px;
}

.container-loop .header p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.container-loop .header h3 {
    font-size: 20px;
    color: #333;
    margin-top: 5px;
    margin-bottom: 15px;
}

/* Table styling */
.table-section {
    margin-bottom: 20px;
}

.container-loop table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.container-loop table th, table td {
    text-align: left;
    padding: 8px 12px;
    border: 1px solid #d3d3d3;
    font-size: 14px;
}

.container-loop table th {
    background-color: #f0f0f0;
}

/* Button styling */
.container-loop .actions {
    margin-top: 20px;
}

.view-release-btn {
    padding: 10px 20px;
    background-color: #007abf;
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
}

.view-release-btn:hover {
    background-color: #005f8d;
}

.print-release {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: #007abf;
    font-size: 14px;
}

.print-release:hover {
    text-decoration: underline;
}



/* css start 09-10-24 */

    .tabs-selling-container {
        background: rgba(255,255,255, 0.9);
        border-radius: 3px;
        padding: 10px;
    }

    .tabs-selling-container .tabs {   
         margin-bottom:11px;
    }
   .tabs-selling-container .tab-button {
        color: #888;
        font-size: 18px;
        box-shadow: inherit;
        padding: 14px 37px;
        border-radius:2px;
    }
    .tabs-selling-container .tab-button:hover, .tabs-selling-container .tab-button.active{
        color:#fff;
        background-color:#431a0c;
        border:1px solid transparent;
    }




    .tabs-selling-form {
        display: flex;
        flex-wrap: wrap;
    }
    .tabs-selling-item {
        flex-grow: 1;
        
    }

    .tabs-selling-item select{
        height:58px;   
    }

    .tabs-selling-item.price-slide-block {
    flex-grow: 4;
    background: #fff;
    border-radius: 0;
    border: .tabs-selling-item select;
    border: 1px solid #d1d5db;
    padding:0px 19px;
}
    .tabs-selling-item select {
    width: 100%;
    border-radius: 0px;
    padding: 16.5px 7px;
   
}
   .tabs-selling-item .search-btn {
        width: 100%;
        margin: 0;
        background-color: #431a0c;
        padding:21px 7px;
        border-radius: 0px;
        text-transform: uppercase;
    }

   .price-slide-topText {
    display: flex;
    justify-content: space-between;
    column-gap: 1%;
    font-size: 14px;
}


    .tabs-selling-container .tab-content {
      border:none;
      padding:0;
    }
    .tabs-selling-item .price {
     width: 100% !important;
     margin:0;
    }


    .tabs-selling-item.price-slide-block .slider-box {margin:5px auto}
    .tabs-selling-item.price-slide-block label, input {border: none; display: inline-block; margin-right: -4px; vertical-align: top; width: 30%}
    .tabs-selling-item.price-slide-block input {width: 70%}
    .tabs-selling-item.price-slide-block .slider {margin: 25px 0}

    .tabs-selling-item.price-slide-block .slider {
        margin:0px 0;
        height:5px;
    }

    .tabs-selling-item.price-slide-block .ui-slider-horizontal .ui-slider-range{
        background: #431a0c;
    }

    .tabs-selling-item.price-slide-block .ui-slider-horizontal .ui-slider-handle {
        top: -8px;
        margin-left: -.6em;
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .price-slide-topText {
        margin: 0 0 8px;
    }
    .price-slide-topText #priceRange{
     width:140px;
     text-align:right;
    }

    .tabs-selling-item.price-slide-block label{
        font-weight:normal;
    }
/* css end 09-10-24 */



/* css start 17-10-24 */

.container-loop-home .icons div {
    width: 62px;
    display: flex;
    font-size: 16px;
    /* font-weight: 500; */
    color: #000;
    background: #f9f9f9;
    justify-content: center;
    border-radius: 4px;
    padding: 2px 5px;
    border: 1px solid #e5e5e5;
    box-shadow: -5px 2px 7px rgba(0, 0, 0, 0.045);
}

/* css end 17-10-24 */




/* Responsive styles for smaller devices */

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

    .tabs-selling-form {
        row-gap:6px;;
    }
    .tabs-selling-form .tabs-selling-item:last-child{
        width:100%;    
    }

}

@media screen and (max-width: 768px) {
    .container-loop {
        flex-direction: column; /* Stack elements vertically */
        padding: 15px;
    }

    .map-section, .info-section {
        margin: 0;
        padding: 0;
    }

    .info-section {
        margin-top: 20px;
    }

    .map-image {
        max-width: 100%; /* Ensure the image takes full width on small screens */
    }

    .container-loop table th, table td {
        font-size: 12px; /* Reduce font size for smaller screens */
        padding: 6px 8px;
    }

    .view-release-btn {
        width: 100%; /* Button takes full width */
        text-align: center;
        padding: 12px 0;
    }

    .print-release {
        text-align: center;
        display: block;
    }
}


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

    .tabs-selling-item {
    flex-grow: 1;
    width: 100%;
}

    .tabs-selling-container .tab-button{
        font-size:15px;
        padding: 14px 15px;
        flex-grow: 1;
    }

     .tabs-selling-item select{
        height:auto;
     }

    .tabs-selling-item.price-slide-block .slider-box {   
    height: 50px;
    }

    .tabs-selling-item .search-btn{
        padding: 17px 7px;
    }


    /*  css start 17-10-24  */

        .container-loop-home .card{
            flex-wrap:wrap;
        }

        .container-loop-home .image{
            width:100%;
        }

        .container-loop-home .details{
            width:70%;
        }

        .container-loop-home .icons{
            width:28%;
        }

    /*  css end 17-10-24  */

}

/* Extra small devices (like phones) */
@media screen and (max-width: 480px) {
    .container-loop {
        padding: 10px;
    }

    .header h2 {
        font-size: 20px; /* Smaller font size */
    }

    .container-loop .header h3 {
        font-size: 18px;
    }

    .header p {
        font-size: 12px;
    }

    .container-loop table th, table td {
        font-size: 10px; /* Further reduce font size */
        padding: 5px 7px;
    }

    .view-release-btn {
        font-size: 14px;
    }

    .print-release {
        font-size: 12px;
    }
}

/****Home Style**********/
.container-loop-home .card {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    max-width: 100%;
    margin: 20px;
  }

  .container-loop-home .image {
/*    width: 40%;*/
    overflow: hidden;
  }

  .container-loop-home .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .container-loop-home .details {
/*    width: 60%;*/
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .container-loop-home .title {
    font-size: 1.2em;
    color: #0074A3;
    font-weight: bold;
  }

  .container-loop-home .location {
    font-size: 1em;
    color: #555;
    margin: 5px 0;
  }

  .container-loop-home .description {
    font-size: 0.9em;
    color: #666;
    margin: 10px 0;
  }

  .container-loop-home .price {
    font-size: 1.3em;
    color: #000;
    font-weight: bold;
  }

  .container-loop-home .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #00a0e3;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
  }

  .container-loop-home .icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 1.2em;
    color: #666;
  }

  .container-loop-home .icons div {
    margin: 5px 0;
  }