@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary-color: rgba(238, 246, 250, 1);
    --secondary-color: #ffffff;
    --dark-blue: rgba(42, 127, 214, 1);
    --headings: rgba(34, 42, 46, 1);
    --sub-headings: rgba(36, 36, 36, 1);
    --text-dark-color: rgba(102, 102, 102, 1);
    --text-light-color: #ffffff;
    --numbers: rgba(173, 193, 206, 1);
    --tabs: rgba(99, 147, 169, 1);
    --forms: rgba(191, 186, 178, 1);
    --light-gray: rgba(191, 186, 178, 1);
    --icons: rgba(103, 120, 131, 1);
}

body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    color: var(--headings);
}

p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark-color);
}

ul.navbar-nav li.nav-item a.nav-link,
nav.footer-nav a {
    font-size: 1rem;
}

nav.navbar {
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
}

a.nav-link {
    margin-right: 2rem;
    font-weight: 500;
    color: var(--sub-headings);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--dark-blue);
}

.nav-link:focus,
.nav-link:hover {
    color: var(--dark-blue);
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

#header-main {
    background-image: url('../images/header-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 10rem 0;
}

.header-content h1 {
    font-size: 3.2rem;
    font-family: "Instrument Sans", sans-serif;
}

.values {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.values i {
    color: var(--dark-blue);
    font-size: 20px;
    margin-top: 4px;
}

.values b {
    color: var(--text-dark-color);
}

.values-card {
    box-shadow: 0px 24px 54px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    border-radius: 35px;
}

.discover-more {
    background-image: url('../images/discover-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 7rem 0;
    margin-bottom: 4.5rem;
}

.btn-white {
    background-color: var(--secondary-color);
    color: var(--dark-blue);
    border: none;
    border-radius: 50px;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-white:hover {
    background-color: #eaf2ff;
}

.divider {
    background-color: rgba(112, 112, 112, 1);
    height: 1px;
}

.footer {
    background-color: var(--primary-color);
}

.copyright p {
    color: var(--sub-headings);
}

.social-icons i {
    color: var(--icons);
}

.social-icons i:hover {
    color: var(--dark-blue);
}

.social-icons {
    font-size: 1.3rem;
}

.footer-nav a:hover {
    color: var(--dark-blue) !important;
}

#provider-match {
    background-image: url('../images/provider-match-header-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 8rem 0;
    text-align: center;
}

.blue-card {
    background-color: var(--primary-color);
    padding: 2rem;
    border-radius: 25px;
}

h2.blue-card-head {
    font-size: 4.8rem;
    font-weight: 600;
    color: var(--numbers);
    font-family: "Montserrat", sans-serif;
    margin-top: -10px;
}

.provider-search-heading {
    background-color: var(--primary-color);
    padding: 5rem 0;
}

.provider-search-heading h2 {
    font-family: "Instrument Sans", sans-serif;
}

.nav-tabs .nav-link.active {
    background-color: var(--dark-blue);
    color: #fff;
}

.btn-blue {
    background-color: var(--dark-blue);
    border: none;
    border-radius: 30px;
    padding: 10px 30px;
    color: var(--secondary-color);
    font-weight: 400;
}

.nav-tabs .nav-link {
    border-radius: 16px;
    padding: 10px 20px;
    color: var(--tabs);
    border: 1px solid var(--tabs);
}
.nav-tabs .nav-link:hover{
    background-color: var(--dark-blue);
    color: white;
}
.tab_provider {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 7px 41px rgba(0, 0, 0, 0.1);
    padding: 1.8rem;
}

input.form-control {
    border-color: var(--forms);
    color: var(--forms);
}

label.form-label {
    color: var(--sub-headings);
    font-size: 1rem;
}

.result-card {
    border: 1px solid var(--forms);
    border-radius: 16px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.result-card input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.result-card.active {
    border: 1px solid var(--dark-blue);
    background-color: #F0F6FF;
}

.next-btn {
    background-color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    border-radius: 30px;
    padding: .5rem 4rem;
    color: var(--secondary-color);
    transition: background-color 0.3s;
    font-size: 1rem;
}

.next-btn:hover {
    background-color: transparent;
    border-color: var(--dark-blue);
    color: var(--dark-blue);
}

.search-result p {
    color: var(--headings);
}

.custom-checkbox {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-top: 4px;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-checkbox .checkmark {
    width: 23px;
    height: 23px;
    background-color: #Fff;
    border: 1px solid rgba(195, 204, 208, 1);
    border-radius: 6px;
    display: inline-block;
}

.custom-checkbox input:checked+.checkmark {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    position: relative;
}

.custom-checkbox input:checked+.checkmark::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 13px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(40deg);
    top: 3px;
    left: 7px;
}

.nav-tabs .nav-link {
    flex: 1;
    text-align: left;
    min-width: 300px;
}

.region-card {
    background-color: #f0f7fd;
    border-radius: 15px;
    padding: 20px;
}

.selected-box {
    border: 1px solid var(--forms);
    border-radius: 1.25rem;
    padding: 2rem;
    height: 400px;
    overflow-y: scroll;
}

.custom-table {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.custom-table thead th {
    background-color: #1C242C;
    font-weight: 600;
    color: rgb(255 255 255);
    font-family: "Montserrat", sans-serif;
    padding: 1rem 1.5rem;
}

.custom-table tbody tr {
    border-bottom: 1px solid #f0f4f8;
}

.custom-table tbody tr td {
    font-family: "Inter", sans-serif;
    padding: 1.2rem 1.5rem;
}

.table-container {
    margin-bottom: 6rem;
}

/* .custom-table tbody tr:last-child {
    border-bottom: none;
} */
.table-container {
    border-radius: 1.5rem;
    box-shadow: 0 7px 41px rgba(0, 0, 0, 0.07);
}

.provider-search-heading h2 {
    font-size: 2.7rem;
}
#search-results-container {
    display: none;  /* Initially hidden */
    /* border: 2px solid #007bff; */
    /* border-radius: 8px; */
    /* background-color: #f8f9fa; */
    padding: 15px;
    margin-top: 15px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    transition: all 0.3s ease-in-out;
}

/* Show div when content is added */
#search-results-container.show {
    display: block !important;
}

/* Highlight animation when content updates */
#search-results-container.highlight {
    animation: highlightEffect 1s ease-in-out;
}

@keyframes highlightEffect {
    0% { background-color: #d4edda; } /* Light green */
    100% { background-color: #f8f9fa; }
}
#map {
    height: 100%;  
    min-height: 400px; 
    width: 100%; 
}

.leaflet-container {
    background: #fff !important;
    outline: none !important;
}
#selected-address-map ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#selected-address-map li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}
.remove-place {
    cursor: pointer;
    margin-left: auto;
}
.provide-servicebutton {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.provide-servicebutton .home-previous, .home-next {
    padding: 5px 32px;
    background: none;
    color: #2A7FD6;
    font-size: 0.9rem !important;
    border: 1px solid var(--dark-blue);
    border-radius: 30px;
    transition: background-color 0.3s;
}
.home-next:hover, .home-previous:hover{
background-color: #2A7FD6;
border-color: var(--dark-blue);
color: white;
}

i.fa-solid.fa-less-than, i.fas.fa-greater-than {
    font-size: 0.8rem;
}
i.fa.fa-eye {
    background: #F4FAFD;
    padding: 12px;
    color: #6393A9;
    border-radius: 8px;
    width: 40px;
    height: 40px;
}
.col-md-3.pie-chart {
    box-shadow: 0 7px 41px rgba(0, 0, 0, 0.07);
    border-radius: 1.5rem;
    padding: 3rem 1rem;
    margin-bottom: 1rem;
}
.custom-table.home thead th, .custom-table.home tbody tr td {
    /* padding: 1.7rem 1rem; */
    padding-bottom: 1rem;
}
.progress-container {
    width: 300px;
    height: 27px;
    background-color: #E0E0E0;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: -3px 0px 6px rgba(0, 0, 0, 0.2); /* Left shadow only */
}
/* Full Progress Bar */
.progress-bar {
    height: 100%;
    display: flex;
    border-radius: 6px;
    position: relative;
}
/* Green Section */
.green-section {
    height: 100%;
    border-radius: 6px 0 0 6px;
    background: linear-gradient(to right, #64D41E, #64D41E 100%, rgb(0 0 0 / 20%));
}
/* Red Section */
.red-section {
    height: 100%;
    position: absolute;
    right: 0;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(to right, rgb(0 0 0 / 20%), #E73E3E 30%, #E73E3E);
    transition: all 0.3s ease-in-out;
}
/* Percentage Text */
.progress-text {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: bold;
    color: black;
}
.chart-container {
    width: 250px;
    height: 250px;
    margin: auto;
}
a.btn.btn-sm.btn-light.characteristics-button {
    background: no-repeat;
    border: none;
}
@media (min-width:767.1px) and (max-width:1198px) {
    .chart-container {
        width: auto !important;
    }
}
.back-button{
    padding: 5px 10px;
    color: #2A7FD6 !important;
    font-size: 0.9rem !important;
    border: 1px solid var(--dark-blue);
    border-radius: 24px;
    transition: background-color 0.3s;
    margin-bottom: 1rem;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    display: inline-block;
}
span.fw-semibold.my-3.homeName.homename-detailslist{
font-size: 1.5rem;
}
.user-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #ccc;
}

.user-detail-box {
    padding: 10px 0px;
    border-radius: 12px;
}

.user-info h5 {
    margin-bottom: 3px;
    font-size: 1.2rem !important;
}

.user-info small {
    font-size: 0.85rem;
}
h5.text-dark.m-0.fw-light.servicepage {
    font-size: 1.1rem !important;
}
#clear-filters {
    padding: 8px 16px;
    background-color: #2a7fd6; /* red */
    color: white;
    border: none;
    border-radius: 16px;
    transition: background-color 0.3s ease;
    font-weight: 500;
}

#clear-filters:hover {
    background-color: #0a3b6d; /* darker red on hover */
}

#clear-filters:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(63 54 244 / 40%);
}
.provider-search-heading.banner{
    background-image: url(../images/provider-search-bannerimg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 8rem 0;
    text-align: center;
}
.provider-search-heading.home-banner{
    background-image: url(../images/home-detail-banner.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 7rem 0;
    text-align: center;
}
.provider-search-heading.characteristics-banner{
    background-image: url(../images/charactrictics.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 7rem 0;
    text-align: center;
}
.table-responsive .table #progressTableBody tr:nth-of-type(even){
    background-color: #fafafa !important;
}
.table>:not(caption)>*>* {
    background-color: #00000000;
}
.search-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    padding-right: 10px;
}

.search-container input {
    width: 250px;  /* Adjust the width as needed */
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
}

.search-container input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#homes-table {
    width: 100%;
}
.dataTables_filter {
    display: none !important;
}
.select2-container{
    width: 100% !important;
}
.select2-container .select2-selection--multiple{
    min-height: 38px !important;
    border-radius: 8px !important;}
input#required-home-size {
    color: black !important;
}
div#location-alert-area {
    margin-top: 2rem;
}
.select2-container .select2-search--inline .select2-search__field{
    margin-top: 6px !important;
    margin-left: 10px !important;
    height: 20px !important;
}
#add-yp
{
    margin-left:140px;
}
.modal-dialog.modal-dialog-centered.modal-xl-custom
{
    max-width:50%;
}
input.form-control{
    width:100%;
}
input#home-name-search
{
    width:20%;
}
.modal-body.yp-added{
   font-weight: 500;
   font-size: 1.2rem;
}
body.modal-open .modal-backdrop.blur-backdrop {
   backdrop-filter: blur(5px);
   background-color: rgba(0, 0, 0, 0.3); /* optional: darken it slightly */
}
.clickable-card {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.clickable-card.selected-card {
    background-color: #e8f0fe; /* Updated color */
    border-color: #4285f4;     /* Optional: a subtle blue border */
}
.clickable-card.unselected-card {
    background-color: #fff;
    border-color: #ccc;
}
.clickable-card:hover {
    background-color: #f5f5f5;
}
.alert {
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    font-size: 0.95rem;
}
.yprow input
{
    color:black;
}
.modal-dialog.modal-xl.modal-dialog-scrollable.ypedit {
    max-width: 55% !important;
}
#map{
    height: 100%;
    min-height: auto !important;
    width: 100%;
}
button.btn.btn-sm.btn-outline-primary.edit-btn {
    border-color: #2a7fd6;
    background: white;
}
i.fas.fa-pencil-alt{
    color: #2a7fd6;
}
.bg-primary{
    background-color: #2a7fd6 !important;
}
button#save-yp{
    background-color: #2a7fd6 !important;
}
input.form-control {
    border-color: var(--forms);
    color: #212529 !important;
}
@media (max-width:575px){
.modal-dialog.modal-dialog-centered.modal-xl-custom, .modal-dialog.modal-xl.modal-dialog-scrollable.ypedit{
    max-width: 100% !important;
}
}
@media (min-width:576px) and (max-width:799px){
.modal-dialog.modal-dialog-centered.modal-xl-custom, .modal-dialog.modal-xl.modal-dialog-scrollable.ypedit {
    max-width: 85% !important;
}
}
.modal-header.alert-save{
    background-color: #2a7fd6 !important;
    padding-bottom: 0.4rem;
    padding-top: 0.4rem;
}
h5#alertModalLabel
 {
    color: white;
}
.btn-close.alert-close{
 color: white !important;
}
 #selected-places-dropdown option.selected {
 background-color: #f2f2f2; /* Light green for selected cities */
 font-weight: 600;
}
.my-6
{
    margin-top: 8rem !important;
}
.global-button{
    background-color:var(--dark-blue);border-radius:14px;
}
.close-button{
    background-color:#6c757d;
    border-radius:14px;
}