a{
    text-decoration: none !important;
}
.leasing-page {
    background-color: var(--bs-page-background);
    width: 100%;
    align-items: center;
    height: 100vh;
    margin: 0 !important;
}

.buttonDetails {
    width: 160px;
    color: #1DAEFF;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: center;
    border-color: #1DAEFF
}

.buttonList {
    height: 40px !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box;
    border-radius: 8px !important;
    color: #5528FF !important;
    padding: 2% 22% !important;
    line-height: 42px !important;
}

.listRow {
    width: 1320px;
    height: 104px;
    text-align-last: start;
    background: var(--bs-page-background);
    border: 1px solid #E1E2EE;
    box-sizing: border-box;
}

th td {
    border: 1px solid #E1E2EE;
    text-align: center;
    padding: 5px;
}

.activeColor {
    color: rgb(41, 184, 255);
}

.actualColor {
    color: rgb(206, 206, 206);
}

.list-view {
    max-height: 80vh;
}

.leasing-title {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 900;
    font-size: 38px;
    line-height: 53px;
    text-align: center;
    color: var(--bs-body-text-color);
    text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
    margin-bottom: 1%;
    white-space: nowrap;
}

.table-header {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px !important;
    color: var(--bs-body-text-color);
    text-transform: uppercase;
}
#table-head-style{
    display: flex; 
    align-items: center;
}
.list-first-image{
    height: 120px;
    margin: 14px !important;
    width: 200px !important;
    padding: 0 !important;
}

td {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: var(--bs-body-text-color);
}

.list-view {
    overflow-y: scroll;
}

.modal-content {
    background-color: transparent;
}

.slick-slide {
    margin: 0 15px 20px 0;
    max-height: 450px;
}
.my-td{
    display:none;
}
.vbox-child{
    height: 85vh;
    background-color: transparent !important;
}
 @media (min-width: 300px) and (max-width: 900px) {
    
    .listRow{
        display:flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-align-last: end;
    } 
    .table-header{
        display: flex;
        justify-content: space-between;
        text-transform: none;
        font-size: 16px;
        padding: 0px;
        flex-direction: column;
        max-width: 100% !important;
    }
    .name{
        display: flex;
        justify-content: space-between;
        padding: 4px 7px !important;
        width: 100%;
    }
    .table-mob{
        display:none;
    }
    tbody, td, tfoot, th, thead, tr {
        padding: 6px 6px 6px 6px;
    }
    .my-td{
        display: inline-block;
        padding-left: 7px;
        text-transform: uppercase;
        color: #FFFFFF;
        font-size: 16px;
        margin: 0;
        font-family:'Gotham';
    }
    .btn-mob{
        padding: 0;
    }
    .buttonList{
        width: 100%;
        font-weight: 700 !important;
        font-size: 14px !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding-top: 15px !important;
    }
    .view-td{
        padding: 7px;

    }
    .leasing-page{
        overflow-y: scroll;
    }
    .more-bg{
        justify-content: flex-end;
        width: 100%;
    }
    .more-icon{
        height: 35px;
    }
    .modal{
        padding:110px 0px !important;
        width: 100% !important;
        height: 90% !important;
    }
    .modal-content{
        height: 490px !important;
        justify-content: center;
    }
    .mob-img{
        height: 100% !important;
    }
    .floor-mob{
        width: 100% !important;
        height: 90% !important;
    }
    .floor-modal{
        padding: 120px 0px !important;
    }
    .td-data{
        display: flex;
        justify-content: space-between;
        padding: 4px 7px !important;
    }
    .td-media{
        padding-left: 10px;
    }
    .fa-solid{
        font-weight: 100 !important;
    }
    table{
        border-collapse: separate;
        border-spacing: 0px 24px !important;
    }
    .list-view {
        overflow-y: scroll !important;
        max-height: calc(100vh - 276px);
        object-fit: contain;
    }
    .my-span{
        font-weight:100;
    }
    #leasing-page{
        overflow-y: scroll;
    }
    .close {
        top: 70px !important;
        right: 19px !important;
    }
    
    .media, .floorplan, .capacity, .type{
        display: none !important;
    }
 }
 
.vbox-num:before {
    content: 'Media - ';
}
.vbox-num {
    padding: 15px !important;
    font-size: 15px !important;
    background: #bfbfbf !important;
    color: black  !important;
    border-radius: 20px !important;
    margin: 20px !important;
}
.vbox-close{
    padding: 30px !important;
    color: white !important;
}
.vbox-container img{
    max-height: 90vh;
}

@media (min-width: 300px) and (max-width: 500px){
    
    .list-first-image {
       height: 200px !important;
       width: 92% !important;
       object-fit: fill;
    }
    
    .more-image{
        display: flex;
        justify-content: center;
        margin: -19% 4% !important;
        background: linear-gradient(0deg, rgba(17, 2, 41, 0.6), rgba(17, 2, 41, 0.6));
        border-radius: 10px;
        height: 50px;
        align-items: center;
        width: 50px !important;
        padding: 0 !important;
    }
    
    .leasing-title {
        margin: 22% 0% 5% 0%;
    }
}

@media (min-width: 501px) and (max-width: 900px){
    .list-first-image {
       height: 300px !important;
       width: 96% !important;
       object-fit: fill;
    }
    
    .more-image {
        display: flex;
        justify-content: center;
        margin: -11% 3% !important;
        background: linear-gradient(0deg, rgba(17, 2, 41, 0.6), rgba(17, 2, 41, 0.6));
        border-radius: 10px;
        height: 55px;
        align-items: center;
        width: 55px !important;
        padding: 0 !important;
    }
    
    .leasing-title {
        margin: 10% 0% 5% 0%;
    }
}

@media (min-width: 1000px) and (max-width: 1200px){
    #table-head-style{
        flex-direction: column !important;
        max-width: 250px;
        margin: 0;
    }
    
    .leasing-title{
        font-size: 30px;
    }
    
    .table-header{
        font-size: 12px;
    }
    
    span.name {
        margin-bottom: 14px;
    }
}
@media(max-width: 1000px){
    .vbox-child{
        height: 100% !important;
    }
}