:root {
    --primaryColor: #012875;
    --blueLightColor: #7BA3BD;
    --mintColor: #0A9A8F;
    --yellowColor: #FFC700;
    --greyColor: #f8f9fa;
}
body {
    background: linear-gradient(to top, #f8f9fa, #FFFFFF);
}
/*------------------offcanvas-----------------------*/

.offcanvas.offcanvas-start {
    width: 250px;
    background: #012875;
}
.offcanvas {
    transition: transform 0.3s ease-in-out; /* Adjust the speed here */
  }
.offcanvas-body {
  
    padding: 0;
    overflow-y: hidden;
    height: 100%;
}
    .offcanvas-body li:hover{
        background:#fff;
        transition:all .6s ease-in-out;
    }
    .offcanvas-body li a {
        color: #012875;
    }
    .offcanvas-body li:hover a {
        color: #012875;
    }
.MenuLogo {
    height: 100px;
    width: 100px;
}
.MenuLogo img {
    height: 100%;
    width: 100%;
    object-fit:contain;
}

.offcanvas .btn-close {
    background: #ffc107 !important;
    border-radius: 50px;
    color: #fff !important;
    height: 25px;
    width: 25px;
    padding: 10px !important;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: auto;
    right: -47px;
}
/*----------------------------------------------------*/
.burger.me-auto {
    margin-right: 0 !important;
}
.burger.light:before, .burger.light span, .burger.light:after {
    background: #fff;
}

    .menu-bg-wrap {
    padding: 0;
}
    .site-nav {
   
    height: 8vh;
    position: relative;
}

.hero.page-inner {
    height: 20vh;
    min-height: 100px;
    width: -webkit-fill-available;
    z-index: 0;
    position: relative;
    margin-top: 5%;
    background: linear-gradient(45deg, #ffc107, #9ab9f7);
    border-radius: 20px 20px 0 0 !important;
}
.site-footer {
    margin-top: 15%;
}

.hero.overlay:before {
    background-color: #f8f9fa;
    border-radius: 20px 20px 0 0;
    opacity: .5;
}

.hero.overlay .Header{
    margin: 12% auto;
position: absolute;
width: -webkit-fill-available;
}
.profileLink .PofileImg {
    height: 25px;
    width: 25px;
}

    .profileLink .PofileImg img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        border: 1px solid #444;
    }

.site-nav .site-navigation .site-menu > li > a {
    display: flex;
    align-items:center;
    cursor:pointer;
}
    .site-nav .site-navigation .site-menu > li > a.start-btn {
        column-gap: 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
.profileLink{
    display:flex;
    align-items:center;
    cursor:pointer;
}
    .profileLink .profileName h5 {
        font-size: 12px;
        color: #808080 !important;
        text-align: left;
    }
.profileLink .profileName h6 {
    font-size: 12px;
    color: #808080 !important;
    text-align: left;
}
.notification{
    position:relative;
}
.notification .badge {
    height: 5px;
    width: 5px;
    background: #dc3545;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size: 10px;
    position: absolute;
    top: 0;
    left: auto;
    right: 6px;
    color: #ffffff;
}
.notification .fa-bell{
    color:#444;
}
.ProfileSection {
    padding: 0;
    position: relative;
    top: 0px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 9px 2px .5px #e9ecef;
    height: 100%;
}

.ProfileInfo .PofileImg {
    height: 100px;
    width: 100px;
    position: relative;
    top: 55%;
    left: 0%;
}

    .ProfileInfo .PofileImg img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        border:5px solid #ffffff;
      object-fit:cover;
    }

.ProfileUnits .btn.unitBtn{
    background: var(--primaryColor);
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    width: 150px;
    font-weight:400;
}

.ProfileUnits .btn.installBtn {
    background: #fff;
    border: 2px solid var(--primaryColor) !important;
    color: var(--blueLightColor);
    border-radius: 10px;
    padding: 10px;
    width: 150px;
    font-weight: 400;
}



.text-lightblue{
    color:var(--blueLightColor);
}
.text-blue{
    color:var(--primaryColor);
}

.AboutCard .list-group-item {
    color: var(--primaryColor);
}

.rentNow .btn.startRent {
    background: var(--primaryColor);
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    width: 150px;
    font-weight: 400;
}

.AllUnits .GridUnits .card {
    height: 250px;
    width: 100%;
    padding: 10px;
    margin-bottom:20px;
}
.AllUnits .card .card-img{
    height:180px;
    width:100%;
   position:relative;
}
.AllUnits .card .badgeUnit {
    position: absolute;
    background: #FFC700;
    color: #fff;
    border-radius: 25% 0 8px 0;
    padding: 5px;
    z-index: 11;
}
    .AllUnits .card .card-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

.AllUnits .nav-pills .nav-link.active {
    color: #fff;
    background-color: #e9ecef;
    font-size: 16px;
    height: 35px;
    width: 40px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 10px;
    color: #4b679e;
}
.AllUnits .nav-pills .nav-link {
    color: #fff;
    background-color: #fff;
    font-size: 16px;
    height: 35px;
    width: 40px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 10px;
    color: #808080;
}
.btn-filter {
    color: #fff;
    background-color: #f8f9fa;
    font-size: 16px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 10px !important;
    color: #012875;
    border-radius: 5px;
}

.AllUnits .card.cardList .card-img {
    height: 160px;
    width: 100%;
    border-radius: 8px;
    padding:8px;
    position:relative;
}

    .AllUnits .card.cardList .card-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
    
    }

.AllUnits .card.cardList .badgeUnit {
    position: absolute;
    background: #FFC700;
    color: #fff;
    border-radius: 0 25% 0px 25% !important;
    padding: 5px;
    z-index: 11;
    right: 8px;
    top: 9px;
}


.card-bottom .rate .fa-star {
    font-size: 12px;
    color: #FFC700;
}


/*--------------------pagination------------------------*/

.pagination {
   
    column-gap: 10px;
}

.page-item.disabled .page-link {
    background-color: #e9ecef;
    border-color: #dee2e6;
    border-radius: 8px !important;
}
.page-link {
    border-radius: 8px !important;
    color: #012875;
}
.page-link.next {
  background: #cfdcf8;

}

/*-------------------------------insert new unit--------------------------------*/

.container-custom {
    width: 50%;
    background: unset;
    margin: auto;
}
.ContentSection  .card.InsertUnit{
    background:#fff !important;
    box-shadow:none !important;
}

.ContentSection .input-group {
    height: 41px;
     box-shadow: none !important; 
    border-radius: 8px;
    border: 1px solid #e9ecef;
    height: 50px;
    display: flex;
    align-items: center;
}
.tabs {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    width: -webkit-fill-available;
    justify-content: space-between;
}

.tab {
   
    width: 30px;
    height: 30px;

    border: 2px solid #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

   

.tab-title {
    position: absolute;
    top: 40px;
    font-size: 14px;
    width: 200px;
    margin: auto;
    text-align: center;
    color:var(--primaryColor)
}

.wizard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}



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

    .tab.completed {
        background-color: #0056b3;
        color: white;
        border-color: #0056b3;
    }



.line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #e9ecef;
    z-index: 0;
}

.content {
    padding: 0;
    border-radius: 8px;
    background-color: white;
    text-align: center;
    min-width: 200px;
}

.buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

.button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

#map {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    margin-top: 20px;
}

.AboutCard .list-group-item {
    color: var(--primaryColor);
    border-bottom: none;
}

.ProfileUnits {
    justify-content: space-around;
    position: relative;
    bottom: 0;
    width: 50%;
}
.btn {
    padding: 7px 20px ;
    border-radius: 8px ;

}
    .btn.editBtn {
        border-radius: 50px;
        padding: 10px;
        background: #4b679e;
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        left: auto;
        right: 0;
        top: 57px;
        color: #fff;
    }
.btn-outline-primary{
    background:#e9ecef;
    color:#007bff;
}

.emailAddress .Icon {
    background: #e9ecef;
    border-radius: 50px;
    padding: 7px;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*-------------------upload--------------*/
.js-upload {
    border: 2px dashed #dee2e6;
    padding: 10px;
    border-radius: 10px;
}

/*--------------------------------notification-------------------------------*/

a.NotificationCard {
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
}
    a.NotificationCard.unread {
        background: #fdfdfd;
    }
    a.NotificationCard.readed {
        background: #fff;
    }
        a.NotificationCard.readed .card-img.refuse {
            border: 3px solid #f9c8c8;
        }
            a.NotificationCard .card-img {
    height: 80px;
    width: 80px;
    border-radius: 50px;
    border: 3px solid #f8f9fa;
    background:#fff;
}
    a.NotificationCard .card-img img {
        height: 100%;
        padding: 17px;
        width: 100%;
        object-fit: contain;
    }
 .btn-default {
    background: #e9ecef;
}
.text-muted {
    color: #aeaaaa;
}

.AllInstallments .NotificationCard .card-img {
    height: 80px !important;
    width: 80px !important;
    top: 10px;
    position: relative;
    border-radius: 50px;
    border: 3px solid #f8f9fa;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*------------------installments-------------------*/

.Installments .VerticalLine {
    position: absolute;
    top: -2%;
    left: 5.4%;
    right: 0;
    width: 2px;
    height: 120vh;
    background-color: #e9ecef;
    z-index: 0;
}
.Installments {
    position: relative;
    height: 100vh;
    overflow-y: scroll;
    margin-bottom: 2%;
    padding: 30px;
}
.Installments .Notifications {
    position: relative;
    height: 100%;
}

.InstallmentCard .NotificationCard {
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 50px;
    display: block;

}
    .InstallmentCard .NotificationCard .card-img {
        height: 60px;
        width: 60px;
        border-radius: 50px;
        background: #e9ecef;
    }

        .InstallmentCard .NotificationCard .card-img img {
            height: 100%;
            padding: 17px;
            width: 100%;
            object-fit: contain;
        }

    .Installments .NotificationCard {
        padding: 5px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: block;
    }

        .Installments .NotificationCard.unread {
            background: #fdfdfd;
        }

        .Installments .NotificationCard.readed {
            background: #fff;
        }

            .Installments .NotificationCard.readed .card-img.refuse {
                border: 3px solid #f9c8c8;
            }

        .Installments .NotificationCard .card-img {
            height: 60px;
            width: 60px;
            border-radius: 50px;
            border: 3px solid #f8f9fa;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        
        }

           

.container-custom{
position:relative;
/*overflow:hidden;
*/}

.Installments .EmptyCircle, .Installments .CheckCircle {
    height: 20px;
    width: 20px;
    border-radius: 50px;
}
.Installments .EmptyCircle{
  
    background:#dee2e6;
}
.Installments .CheckCircle {
    background: #42c17b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Installments .NotificationCard h6.card-title {
    font-weight: 500;
    margin-bottom: 0;
}
.Installments .NotificationCard span.card-text {
    font-weight: bold;
}
.Installments .NotificationCard span.card-text > span {
    font-weight: 500;
}
/*------------------------------------- installments------------------------------------------*/

.LinesOfPays .line {
    height: 5px;
    width: 30px;
    background: #e9ecef;
    position: relative;
    border-radius: 50px;
    column-gap:10px;
}
.LinesOfPays .line.active {
   
    background: #198754;
   
}
.LinesOfPays {
    column-gap:10px;
}

.NotificationCard .MoneyType{
    font-size:12px;
}

.NotificationCard h6.card-title{
    font-weight:bold;
}
.InstallDates{
    border-radius:0;
    background:transparent !important;
    color:#444 !important;
}
    .InstallDates .nav-link {
        border-radius: 0;
        border-bottom: 5px solid #e9ecef;
        background:transparent !important;
        color: #dee2e6 !important;
    }
.InstallDates .nav-link.active {
    border-radius:0;
    border-bottom:5px solid #007bff;
    background:transparent !important;
    color:#444 !important;
}
/*.InstallDates{
    display:flex;
    overflow:scroll;
    white-space:nowrap;
    overflow:hidden;
    width:300px;
}*/
/*.scrollable-tabs .LinkLine {
    background: #e1dfdf;
    width: 100%;
    height: 3px;
    border-radius: 50px;
    position: absolute;
    top: 18%;
    bottom:0;
}*/
.scrollable-tabs {
    position: static;
    overflow-x: auto; /* Enables horizontal scrolling */
    overflow-y: hidden; /* Enables horizontal scrolling */
    white-space: nowrap; /* Prevents wrapping of content */
    height: 50px; /* Adjust the height as desired */
    display: flex;
    align-items: center; /* Vertically centers the content */
    scrollbar-width: none; /* Hides scrollbar (Firefox) */
}

    .scrollable-tabs .nav {
        display: flex; /* Aligns items in a row */
        flex-wrap: nowrap; /* Prevents wrapping to the next line */
    }

    .scrollable-tabs .nav-item {
        flex: 0 0 auto; /* Prevents stretching */
    }

.scrollable-tabs {
    width: 100%; /* Ensure the container uses full available space */
}
    .scrollable-tabs .nav-link {
        margin-right: 8px; /* Reduce spacing between links */
    }
    .scrollable-tabs::-webkit-scrollbar {
        height: 0; /* Hides scrollbar by default */
    }

    .scrollable-tabs:hover {
        scrollbar-width: thin; /* Shows thin scrollbar on hover (Firefox) */
    }
        .scrollable-tabs:hover::-webkit-scrollbar {
            height: 6px; /* Shows scrollbar on hover (WebKit browsers) */
        }

        .scrollable-tabs:hover::-webkit-scrollbar-thumb {
            background-color: #ccc; /* Scrollbar thumb color */
            border-radius: 10px; /* Rounded corners for the scrollbar thumb */
        }

        .scrollable-tabs:hover::-webkit-scrollbar-track {
            background: transparent; /* Scrollbar track background */
        }

        /*-----------------------unit details---------------------*/

.unitDetails .card{
    background:#f6f6f6;
}

.modal-body .offerIcon {
    height: 70px;
    width: 70px;
    border-radius: 50px;
    margin: auto;
    box-shadow: 0 1px 2px .5px #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-body .offerIcon i {
        font-size: 50px;
    }

.modal-header{
    border-bottom:none;
}
.modal-footer{
    border-top:none;
}
.modal-content{
    border-radius:20px;
}

.wrap-icon span.fa-solid {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 9px auto;
    font-size: 21px;
    color: #012875;
}

.paymentMethods .PayIcon {
    width: 50px;
    padding: 10px;
    height: 50px;
    border-radius: 10px;
    background: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paymentMethods .PayIcon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
    .paymentMethods .link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.paymentMethods li.active {
    background: #f8f9fa;
    border-radius: 10px;
}
.paymentMethods li {
    border-radius: 10px;
    cursor:pointer;
    margin-bottom:10px;
}
.paymentMethods li:hover {
    background: #f8f9fa;
}
.creditCard {
    height: 200px;
    width: 100%;
}

    .creditCard img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-button {
    position: relative;
    width: 50px;
    height: 25px;
    border-radius: 15px;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .toggle-button.active {
        background-color: #00b02c;
    }

.toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s;
}

.toggle-button.active .toggle-knob {
    transform: translateX(25px);
}
.PaySuccessIcon {
    width: 80px;
    padding: 10px;
    height: 80px;
    margin:auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .PaySuccessIcon img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

.menuLink.dropdown-toggle:after {
  
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}

.breadcrumb{
    background:#fff;
}

.breadcrumb-item{
    color:#012875;
}
.breadcrumb-item.active{
    color:#808080;
}

 nav[aria-label="breadcrumb"] li:before {
    color: #00204a !important;
}



.notification-dropdown .Notifications  a.NotificationCard .card-img

{
    height: 50px;
    width: 50px;
  
    padding: 10px;

}

.notification-dropdown .Notifications .NotificationCard.readed {
    background: transparent;
}

.notification-dropdown{
    height:300px;
    overflow-y:hidden;
    transition:6s ease-in-out;
}

.notification-dropdown:hover {
    overflow-y: scroll;
}

    .notification-dropdown .Notifications h6 {
        white-space: nowrap;
        width: 150px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

a.notification-icon{
    cursor:pointer;
}

.newEmail button{
    height:53px;
}
.ContentSection .js-upload {
    border: 2px dashed #dee2e6;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

a.readall {
    font-size: 14px;
    text-decoration: underline;
}

.dropdown-menu.notificationdropdown.show {
    width: 350px;
    margin-top: 20px !important;
}
.AllUnits .card .bottomBadge {
    position: absolute;
    bottom: 0px;
    right: 0;
    left: auto;
    height: 40px;
    top: 78%;
    border-radius: 8px 0 18px;
}
.AllUnits .card.cardList .bottomBadge {
    position: absolute;
    bottom: 0px;
    right: 8px;
    left: auto;
    height: 40px;
    top: 70%;
    border-radius: 8px 0 18px;
}
.breadcrumb {
    justify-content: flex-start;
    flex-flow: wrap;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: right;
}
/*----------------media--------------------------*/
@media(max-width:1000px) {
    .ProfileSection {
        top: 53px;
    }
}