:root {
    --app-color-primary: var(--orange);
    --font-family: sans-serif;
  }

  a{
    all: unset;
    cursor: pointer;
  }
  
  a:hover {
    text-decoration: none;
    color: var(--app-color-primary);
    cursor: pointer;
  }

  a{
    color: var(--app-color-primary);
  }

  h1, h2, h3, h4, h5, h6{
    color: var(--app-color-primary);
    font-weight: 400;
  }

  html, body {
    font-family: var(--font-family);
    padding: 0;
    margin: 0;
    background-color: #f8f9fa;
  }

  .register-form{
    background-color: #f2f2f2;
  }

.orange-b-bottom{
    border-bottom: 2px solid var(--orange)
}

.navbar-light .navbar-toggler {
    border-color: transparent!important;
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fd7e14" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>')!important;
    background-repeat: no-repeat;
    background-position: center;
  }

  .navbar-toggler{
    background-color: transparent!important;

  }

    .navbar-toggler:focus{
        outline: none!important;
    }


    /* Transparent overlay with centered white text */
    .no-internet-container{
        position: fixed; /* Sit on top of the page content */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
        background-color: rgba(0,0,0,0.8); /* Black background with opacity */
        cursor: pointer; /* Add a pointer on hover */
    }

    .no-internet-text{
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, -50%);
    }


    .navbar-brand{
      left: 5px;
    }

    .multiselect, .select2-container--bootstrap {
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      min-height: 40px;
      text-align: left;
    }

    .multiselect-container {
      width: 100% !important;
  }

  .select2-selection__rendered{
    display: contents!important;
  }

  .select2-dropdown{
    border: 0px!important;
  }

  .select2-search__field , .multiselect-search{
    border: 1px solid #ced4da!important;
    outline: none!important;
    box-shadow: none!important;
  }

  .notification-count {
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    position: relative;
    top: -10px;
    left: -10px;
    margin-right: -6px;
  }
  
  .card-black {
    color: black;
    margin-bottom: 10px;
  }

  .card-container {
    display: flex;
    align-items: stretch;
  }
  
  /* Ensure equal heights for card bodies */
  .card-body {
    flex: 1;
  }

  .user-options{
    padding: 0px 10px;
    z-index: 999;
  }

  .user-options-2{
    padding: 0px;
    z-index: 999;
  }

  .credit-count{
    background-color: #fd7e14;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    position: relative;
    top: -10px;
    left: -10px;
    margin-right: -6px;
  }

  .width-100{
    width: 100%!important;
  }

  .add-credit{
    align-items: center;
    padding: 20px;
    margin: 10px 0px;
  }

  .credit-text{
    color: #fd7e14;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none;
  }

  .credit-amount{
    text-align: center;
    text-align: center;
    font-weight: 900;
  }

  /* btn btn-primary make orange like theme*/

  .btn-primary{
    background-color: #fd7e14;
    border-color: #fd7e14;
  }

  /* btn-primary on click */

  .btn-primary:active, .btn-primary:focus, .btn-primary:hover{
    background-color: #fd7e14!important;
    border-color: #fd7e14!important;
  }

  .user-card-body{
    min-height: 200px;
  }

  .inline-button{
    display: inline-block;
    margin: 0px 5px;
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .bottom-border-table{
    border-bottom: 3px solid #fd7e14!important;
  }

  .top-border-table{
    border-top: 3px solid #fd7e14!important;
  }

  .border-cards{
    border: 3px solid rgb(253, 126, 20, 0.2)!important;
    border-radius: 5px;
  }

  .border{
    border: 3px solid rgb(253, 126, 20, 0.2)!important;
    padding: 10px; 
  }

  .thumb{
    width: 150px;
    height: 150px;
    border-radius: 5%;
    padding-bottom: 20px;
  }

  /* Must fit 150 characters */
  .text-listings{
    font-size: 13px;
    font-weight: bold;
    color: #fd7e14;
    text-decoration: none !important
  }

  .banner_images{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .loader {
    border: 16px solid #f3f3f3; /* Light gray border */
    border-top: 16px solid #fd7e14; /* Blue border on top */
    border-radius: 50%;
    width: 15vh;
    height: 15vh;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .card-text {
    height: 70px;
  }

  body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
  }

  #recent-listings-home{
    max-height: 800px;
    overflow-y: scroll;
  }

  #recent-listings-home::-webkit-scrollbar {
    width: 5px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
  }

  #recent-listings-home::-webkit-scrollbar-thumb {
    background: rgba(253, 126, 20, 0.2);
  }

.listing-card-thumb{
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0,0,0,.125);
  padding: 10px;
  border-radius: 5px;
}

.listing-card-border-top{
  border-top: 3px solid  rgba(0,0,0,.125);
}

/* At bottom of screen */
footer{
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

.banner-left{
  margin-right: -15px;
}

.banner-right{
  margin-left: -15px;
}

.banner-first{
  display: block;
}

/* ≥768px  */
@media (max-width: 768px) {
  .banner-left{
    margin-right: 0px;
  }

  .banner-right{
    margin-left: 0px;
  }

  .banner-first{
    display: none;
  }
}

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

.user-dashboard{
  background-image: url("/assets/image/banner_1.png");
  height: 60vh;
  padding: 20px;
  background-size: cover;
  border-radius: 10px;
}

.user-dashboard-text{
  background-color: rgba(12, 12, 12, 0.8);
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.content-wrapper{
  min-height: 100vh;
  background-color: #f2f2f217;
}

#browse-button{
  margin-top: 30px;
}

.select2-selection--single{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.main{
  margin-top: 20px;
}

.location{
  border: 1px solid rgba(0,0,0,.3);
  padding: 10px;
  cursor: pointer;
  background-color: #f8f9fa;
  margin-left:5px;
}



.dropdown{
    max-height: 300px;
    overflow-y: scroll;
    position: absolute;
    z-index: 99;
    width: calc(100% - 32px);
}

.result{
  width: calc(100% - 23px)
}


.small-text{
  font-size: 12px;

}

.text-darkgray{
  color: #6c757d!important;
}

.text-gray{
  color: #6c757d!important;
}

.text-lightgray{
  color: #f8f9fa!important;
}

.text-darkblue{
  color: #007bff!important;
}

/* #location-results scrollbar */
.dropdown::-webkit-scrollbar {
  width: 5px;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}

.dropdown::-webkit-scrollbar-thumb {
  background: rgba(253, 126, 20, 0.2);
}

.location-active {
  border: 1px solid #007bff;
  background-color: #f8f9fa;
  color: #007bff;
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  margin-left: 5px;
}

.clear-selection{
  border: 1px solid white;
  color: white;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}


/* .result hid scrollbar */
.result::-webkit-scrollbar {
  width: 0px;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}

.result::-webkit-scrollbar-thumb {
  background: rgba(253, 126, 20, 0.2);
}

.container-nopadding{
  padding-left: 0px!important;
  padding-right: 0px!important;
}

.btn-height{
  height: 40px!important;
}


#category-results{
  max-height: 150px;
  border-top: 1px solid #fd7e14;
  border-radius: 5px;
  margin-top: 5px;
  padding: 0px;
  overflow: scroll;
}

#category-results::-webkit-scrollbar {
  width: 5px;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}

#category-results::-webkit-scrollbar-thumb {
  background: rgba(253, 126, 20, 0.2);
}

.category-row{
  cursor: pointer;
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #fd7e14;
  border-left: 1px solid #fd7e14;
  border-right: 1px solid #fd7e14;
}