/* Put Extra style Here Start */

/* Select2 Style Start */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--border-color) !important;
    height: 50px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 22px !important;
    height: 50px !important;
    padding: 13px 27px 13px 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    width: 32px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-color) !important;
}

.select2-dropdown {
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 5px 12px rgb(0 0 0 / 10%) !important;
}

/* Select2 Style End */

/* Maintainer Ticket Details Start */
.dropify-wrapper {
    border: 1px solid var(--border-color) !important;
}

/* Maintainer Ticket Details End */

/* Put Extra style Here End */
.logo-lg img {
    width: 100%;
}

/* .sign-up-top-logo .logo-lg {
    display: none;
} */

.terms-n-privacy {
    color: #2597ff;
}

.terms-n-privacy:hover {
    text-decoration: underline;
}

/* .payment-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
} */

.ll.blnc-box {
    text-align: center;
    margin-top: 20px;
}

.blnc-box {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    margin-bottom: 10px;
}

.blnc-box .amount {
    font-size: 32px;
    font-weight: 200;
    color: #000;
    margin-top: 15px;
    margin-bottom: 15px;
}

.blnc-box .next-dt {
    font-size: 12px;
}

.payment-actions {
    display: inline-flex;
    width: 100%;
}

.payment-actions a {
    width: 49%;
    padding: 10px;
    border-radius: 2px;
}

.payment-actions a.btn-1:hover {
    color: #fff !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), var(--sidebar-nav-active-background-color);
}

.payment-actions .btn-1 {
    background: var(--primary-color);
    margin-right: 2.5px;
    color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 0px 0px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.payment-actions .btn-2 {
    background: #ddd;
    margin-left: 2.5px;
}

/*
Dwolla design
*/
ul.dwolla-banks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px;
}

ul.dwolla-banks li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50%;
    min-width: 300px;
    padding: 0 10px 20px;
}

ul.dwolla-banks li .dwcard {
    border-radius: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #c9d3e0;
    justify-content: center;
}

ul.dwolla-banks li .dwcard::before {
    display: block;
    width: 0;
    height: 0;
    content: ' ';
    overflow: hidden;
    visibility: hidden;
}

ul.dwolla-banks li .dwcard::after {
    display: block;
    width: 0;
    height: 0;
    clear: both;
    content: ' ';
    overflow: hidden;
    visibility: hidden;
}

.dw-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 60px;
    margin-right: auto;
}

.dw-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 60px;
    margin: 0 20px 0 0;
    border-radius: 5px;
    background: #f5f7fb;
    vertical-align: top;
}

.bank-info {
    flex-grow: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    display: inline-block;
    margin-right: auto;
    text-align: left;
}

.bank-info .bank-name,
.account-title {
    margin-bottom: 6px;
    font-size: 1.14286rem;
    font-weight: normal;
    line-height: 1.57143rem;
}

.dwbadge {
    display: inline-block;
    padding: 0 8px;
    border-radius: 3px;
    background: #8b9aaf;
    color: #fff;
    font-size: 11px;
    line-height: 21px;
    text-transform: uppercase;
    white-space: nowrap;
}

.dwbadge-removed {
    background: transparent;
    color: #8b9aaf;
    -webkit-box-shadow: inset 0 0 0 1px #8b9aaf;
    box-shadow: inset 0 0 0 1px #8b9aaf;

}

.dwbadge-verified {
    background: transparent;
    color: #58b467;
    -webkit-box-shadow: inset 0 0 0 1px #58b467;
    box-shadow: inset 0 0 0 1px #58b467;
}

.dwbadge-unverified {
    background: transparent;
    color: #ff9800;
    -webkit-box-shadow: inset 0 0 0 1px #ff9800;
    box-shadow: inset 0 0 0 1px #ff9800;
}

.dwbadge-default {
    background: red;
}

.dwbadge-verified img {
    height: 8px;
    margin: 2px 3px 0 0;
}

.additional-content {
    margin-top: 10px
}

.additional-content .details {
    display: block;
    color: #354153;
    font-size: .85714rem;
    text-transform: capitalize;
}

/* #allDataTable_wrapper .row:nth-child(1),
#allDataTable_wrapper .row:last-child,
#allDataTable1_wrapper .row:nth-child(1),
#allDataTable1_wrapper .row:last-child{
    display: none;
} */
.kycVerificationRow {
    cursor: pointer;
}

.kycVerificationRow td:last-child div {
    visibility: hidden;
}


.kycVerificationRow:hover td:last-child div {
    visibility: visible;
}

.kycVerificationRow td:last-child div button,
.kycVerificationRow td:last-child div a {
    transition: none !important;
}

.pointer {
    cursor: pointer;
}

.doc-dimmensions {
    width: 50px !important;
    height: 50px !important;
}

tbody tr:hover {
    /* background-color: #eaeaea; */
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

tbody tr:hover td {
    border-radius: 0px !important;
}

@media (min-width: 576px) {

    #attachBankModal .modal-dialog,
    #microDepositModal .modal-dialog,
    #addCardModal .modal-dialog {
        max-width: var(--bs-modal-width) !important;
    }
}

@media (min-width: 1201px) {
    .dw-wrapper {
        padding: 20px;
    }
}

@media (max-width: 663px) {
    ul.dwolla-banks li {
        width: 100%;
        padding: 0px;
        display: block;
        min-width: unset;
    }

}

@media (max-width: 840px) {
    ul.dwolla-banks li .dwcard {
        padding: 10px;
    }

    .bank-info .bank-name,
    .account-title {
        font-size: 1rem;
    }

    .additional-content .details {
        font-size: 0.6rem;
    }
}

/*
Loader CSS
*/

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {
    margin: 60px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loadingDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0.3;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

body:has(#loadingDiv) {
    overflow: hidden;
}

.tenantsList {
    max-height: 460px;
}

.form-select.multipleSelect {
    height: auto;
}

.font-30 {
    font-size: 30px;
    ;
}

.custom-switch {
    width: 3.5em !important;
    height: 2em !important;
}

.tbl-action-btns, .child-tbl-action-btns {
    opacity: 0;
}

tbody tr:hover .tbl-action-btns,
tbody tr.child-row:hover .child-tbl-action-btns {
    opacity: 1;

}

.table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {
    display: none;
}

#walletTransactions tr {
    cursor: pointer;
}

@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rot {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.min-h-100 {
    min-height: 100px;
}

.empty-table {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.25);
    margin-block: 32px;
}

.has-search .form-control {
    padding-left: 2.375rem;
    border-radius: 50px;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 50px;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.g-search {
    width: 500px !important;
}

.g-search-dropdown {
    width: 540px !important;
    max-height: 400px;
    overflow-y: auto;
}

.g-search-dropdown .dropdown-item {
    color: var(--primary-color) !important
}

.gs-section-header {
    color: rgba(0, 0, 0, 0.45)
}

.gs-section-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Ensure the header stays on top of other content */
    background-color: white;
    /* Adjust as needed */
    width: 100%;
    display: block;
}

.g-search-dropdown blockquote {
    margin: 0px 1rem;
}

@media screen and (max-width: 940px) {
    .page-content {
        padding: calc(80px + 0px) calc(24px / 2) 0 calc(24px / 40);
    }

    .input-group:has(.g-search) {
        flex-wrap: nowrap;
    }

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

    .g-search-dropdown {
        width: 100% !important;
        max-height: 350px;
    }

}

@media screen and (max-width: 992px) {
    .navbar-header {
        padding-right: 0px;
    }

}

@media screen and (max-width: 767px) {
    .p-30 {
        padding: 5px 10px;
    }
}

.water-sewer-font {
    font-size: 12px;
}
/* password meter */
#pswd_info {
    /* position: absolute; */
    /* bottom: 0; */
    /* top: 9px; */
    /* bottom: -115px\9; */
    /* IE Specific */
    margin-top: 10px;
    left: 12px;
    width: 100%;
    padding: 15px;
    background: #fefefe;
    font-size: .875em;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
    /* z-index: 100; */
}

#pswd_info h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: normal;
}

.invalid {
    padding-left: 22px;
    color: #ec3f41;
}

.valid {
    padding-left: 22px;
    color: #3a7d34;
}


.valid:before {
    position: relative;
    left: -8px;
    content: "✔";
}

.invalid:before {
    position: relative;
    left: -8px;
    content: "✖";
}

#pswd_info ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.relative {
    position: relative;
}

/*
NEW STYLE
*/

#sidebar-menu{
    background: var(--sidebar-background-color);
    margin: 0px 10px;
    border-radius: 20px;
    padding: 20px 0px;
}
.mm-active .active{
    color: #fff !important;
}
#sidebar-menu ul li a{
    color: #fff;
}
.mm-active .active i{
    background-color: transparent;
    color: #fff !important;
}
#sidebar-menu ul li a:hover, #sidebar-menu ul li a:hover i{
    color: var(--sidebar-nav-hover-color)!important;
    /* background-color: var(--sidebar-hover-color)!important; */
}

.mm-active, #sidebar-menu ul li a:hover{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), var(--sidebar-nav-active-background-color);
}
#sidebar-menu ul li a{
    font-weight: normal;
    padding: 0.5rem 1rem;
}
.sign-up-page{
    background: #E2E5E2;
}
.form-control, .form-select {
    border-radius: 15px;
}
.m-h-350{
    min-height: 417px;
}
.flex-no-wrap{
    flex-wrap: nowrap;
}
.property-info-item{
    background: #f6f6f6;
    padding: 5px 5px !important;
    border-radius: 100px;
    margin: 2px;
    text-wrap: nowrap;
    font-size: 11px;
}
.doc-info-item{
    text-wrap: nowrap;
    font-size: 11px;
    width: auto !important;
    text-align: justify;
}
.property-item-info .property-info-item {
    width: auto !important;
    /* text-align: justify; */
}
.theme-btn-link{
    background: transparent !important;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 25px!important;
}
.property-item-img img, .information-details-img img{
    min-height: 200px;
    height: 200px;
}
thead {
    background-color: var(--primary-color);
}
thead tr th{
color: #fff !important;
}
table{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.ticket-details{
    min-height: 36px;
}
.reading-img{
    width: 100%;
}
.utility-arrow{
    /* position: absolute;
    left: 10px; */
}
.utility-arrow a{
    display: inline-block;
    border: 1px solid #e5e5e5;
    border-radius: 100px;
    padding: 4px;
}
.utility-calendar-wrapper .col-md-3:nth-child(1) .utility-reading-cards{
    border-top-left-radius: 20px;
}
.utility-calendar-wrapper .col-md-3:nth-child(9) .utility-reading-cards{
    border-bottom-left-radius: 20px;
}
.utility-calendar-wrapper .col-md-3:nth-child(4) .utility-reading-cards{
    border-top-right-radius: 20px;
}
.utility-calendar-wrapper .col-md-3:nth-child(12) .utility-reading-cards{
    border-bottom-right-radius: 20px;
}
.utility-reading-cards:not(.utility-reading-cards.month-disabled){
    background: #52FF431A !important;
}
.utility-view-states{
    color: #7490A6;
    font-weight: 500;
}
.utility-tenant-name{
    font-weight: 500;
    margin-top: 3px;
}
.utility-pt-wrapper{
    padding-left: 20px;
    position: relative;
}
.uti-disable::before{
    background: #EAEAEA !important;
}
.utility-pt-wrapper::before{
    content: "";
    height: 15px;
    width: 15px;
    display: inline-block;
    background: #24B855;
    position: absolute;
    top: 3px;
    left: -6px;
    border-radius: 100px;
}
.download-u-btn{
    font-size: 14px;
    font-weight: 500;
    color: #012343;
}
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.25) !important; /* Example: red with 50% opacity */
}
.sidebar-profile-wrapper{
    position: sticky;
    left: 0px;
    bottom: 0px;
    background: #303b54;
    padding-top: 20px;
}
.tenant-metismenu .sidebar-profile-wrapper{
    position: relative;
}
.profile-btn{
    background: #7490A6;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 10px;
    padding: 10px 20px;
    width: 80%;
}
.property-details-content .property-details-right a.edit-btn,
.tenant-details-content .tenant-details-right a.edit-btn{
    padding: 10px !important;
    height: 30px;
    width: 30px;
    background: #00000033;
    border: 1px solid #00000033;
}
.property-details-content .property-details-right a.edit-btn i,
.tenant-details-content .tenant-details-right a.edit-btn i{
    font-size: 18px;
    color: #ffffff;
}
.property-details-content .property-details-right a.edit-btn,
.tenant-details-content .tenant-details-right a.edit-btn{
    position: absolute;
    top: 20px;
    right: 20px;
}
.property-details-gallery .gallery-item .gallery-img img{
    border-radius: 10px;
}
.property-details-list{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.property-details-list .property-details-list-item{
    background: #F8F8F8;
    padding: 6px 15px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
}
.vertical-menu{
    padding-bottom: 10px;
}
table#propertyUnitDetails tr:first-child td:nth-child(5),
table#propertyUnitDetails tr:first-child th:nth-child(5){
    border-top-right-radius: 16px;
}
.profile-edit-btn i{
    color: #012343;
    font-size: 22px;
}
.profile-edit-btn{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(-50%, -50%);
}
.profile-info-wrapper{
    padding-right: 40px;
}
table tbody tr:last-child:hover{
    border-radius: 0px 0px 20px 20px;
}
table tbody tr:last-child td{
    border: none !important;
}
.label-text-title{
    font-weight: bold;
}
.back-btn-wrapper{
    display: inline-flex;
    align-items: center;
    gap: 15px;
    position: fixed;
    margin-left: -110px;
    margin-top: 50px;
    z-index: 99;
}
.app-btn-wrapper{
    display: inline-flex;
    align-items: center;
    gap: 15px;
    position: fixed;
    margin-left: -110px;
    margin-top: 0px;
    z-index: 99;
}
.step-form-btns .upload-button{
    background: #ffffff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}
.add-unit-btn,.add-unit-btn:hover{
    background: #ffffff !important;
    border: 2px dashed var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.archive-tenant{
    padding: 8px 13px;
    border: 1px solid;
}
#allPaymentsDatatable_wrapper tr:first-child th:nth-child(1),
#allPaymentsDatatable_wrapper tr:first-child th:nth-child(2){
   background: var(--primary-color) !important;
}
#allPaymentsDatatable_wrapper tr:first-child th h6:not(#allPaymentsDatatable_wrapper tr:first-child th:nth-child(1),
#allPaymentsDatatable_wrapper tr:first-child th:nth-child(2)){
    text-align: center;
    color: #ffffff;
}
#search_months{
    background: #ffffff !important;
    height: 50px;
}
.billing-center-select{
    background: #ffffff;
    height: 50px;
}
.select2-container--default .select2-selection--single{
    border-radius: 15px !important;
    height: 50px !important;
}
.billing-center-wrapper{
    max-width: 97%;
}
.billing-center-apply{
    background: #f8f8f8;
    color: var(--primary-color);
    font-weight: 700 !important;
}
.modal-content{
    background: #f8f8f8;
    border-radius: 20px;
}
#walletTransactions_filter input[type="search"],
#allWalletTransactions_filter input[type="search"],
#datatableCategorySuggestionSettings_filter input[type="search"],
#datatableCategorySuggestionSettings_length select,
.dataTables_wrapper .custom-select,
.dataTables_wrapper input[type="search"]{
    background: #ffffff !important;
    height: 50px !important;
}
.sidebar-profile-wrapper .dropdown-menu a.dropdown-item{
    color: var(--primary-color) !important;
}
.sidebar-profile-wrapper .dropdown-menu{
    transform: translate(-16px, -60px) !important;
}
#page-header-user-dropdown{
    color: #ffffff;
}
.doc-btn{
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0px;
}
.doc-btn:hover{
    background: transparent;
}
.doc-btn.theme-btn-back.active{
    border: none;
    border-bottom: 2px solid;    
}
body.vertical-collpsed ul.metismenu{
    overflow-x: hidden;
    overflow-y: auto;
}
body.vertical-collpsed ul.metismenu .sidebar-profile-wrapper .dropdown-menu{
    transform: translate(106px, -53px) !important; 
}
body.vertical-collpsed ul.metismenu li a span,
body.vertical-collpsed ul.metismenu .profile-btn span,
body.vertical-collpsed ul.metismenu .sidebar-profile-wrapper .dropdown-menu span{
    display: none;
}
body.vertical-collpsed ul.metismenu .profile-btn{
    margin: 0px;
    background: transparent;
}
body.vertical-collpsed ul.metismenu::-webkit-scrollbar-track
{
	background-color: transparent;
}

body.vertical-collpsed ul.metismenu::-webkit-scrollbar
{
	width: 6px;
	background-color: transparent;
}
body.vertical-collpsed ul.metismenu::-webkit-scrollbar-thumb
{
	background-color: #697486b7;
	border: 4px solid #697486b7;
    border-radius: 10px;
}
body.vertical-collpsed #sidebar-menu{
    position: fixed;
    left: 0px;
    width: 65px;
    top: 80px;
    height: 86vh !important;
}
body.vertical-collpsed .sidebar-profile-wrapper{
    padding-top: 0px;
    bottom: 0px;
}
body.vertical-collpsed ul.metismenu li:nth-last-child(2){
    padding-bottom: 52px;
}
body.vertical-collpsed ul.metismenu .profile-btn{
    padding: 10px 24px 0px;
}
.doc-item-img-wrap {
    max-width: 65px;
    aspect-ratio: 1 / 1;
}
.d-search-wrapper{
    border-radius: 0px 20px 20px 0px;
}
.d-search-btn{
    padding-right: 20px;
    padding-top: 10px;
    border-radius: 20px;
}
.g-search-dropdown{
    width: 100% !important;
}
.login-wrapper .sign-up-left-content, 
.login-wrapper .sign-up-right-content,
.reset-wrapper .sign-up-left-content,
.reset-wrapper .sign-up-right-content{
    min-height: 100%;
    height: 100vh;
}
.temp-login-title{
    font-size: 28px;
    text-transform: capitalize;
}
.app-form-title{
    font-size: 30px;
    margin-bottom: 5px;
}
.property-search-inner-bg .tenants-top-bar-right .row{
    justify-content: end !important;
}
.property-search-inner-bg .property_id,
.property-search-inner-bg .select2-selection.select2-selection--single{
    height: 50px !important;
}
.db-btns{
    padding: 13px 26px !important;
}
.property-search-inner-bg:last-child{
    border-bottom: none !important;
}
.ll.tpb-switch{
    top: 10px;
}
.tpb-switch{
    position: absolute;
    right: 20px;
    top: 42px;
}
.t-payment-box{
    /* padding-bottom: 70px; */
}
.t-d-payment-box{
    padding-bottom: 70px;
}
.tp-swtich{
    width: 2.3em !important;
    height: 1.2em !important;
}
.tenant-ticket-wrapper{
    height: 50px;
}
.t-status-size{
    font-size: 11px;
    border-radius: 100px;
}
.dash-notifications .property-search-inner-bg:first-child{
    padding-top: 15px;
}
.sub-meter{
    background-image: url("/assets/images/utilities/meter.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
span.m-digit{
    background: #F8F8F8;
    display: inline-block;
    padding: 19px 20px;
    font-family: 'Post No Bills Jaffna', sans-serif;
    font-weight: bold;
    color: #000;
    border: 1px solid #eaeaea;
    border-radius: 5px;
}
span.m-digit.meter-digit-red{
    color: #FF3D3D;
}
.water-reading-modal table thead tr td{ 
    color: #ffffff !important;
}
.daterangepicker table tr th,.daterangepicker table tr td{
    border-radius: 0px !important;
}
.daterangepicker .calendar-table .prev span,
.daterangepicker .calendar-table .next span{
    border-color: #ffffff !important;
}
.daterangepicker .calendar-table .prev:hover span,
.daterangepicker .calendar-table .next:hover span{
    border-color: var(--primary-color) !important;
}
.notifi-count{
    display: inline-block;
    width: 25px;
    text-align: center;
    padding: 2px 0px;
    background: #CAEECF;
    border-radius: 100px;
    color: var(--primary-color);
    font-weight: 600;
    position: absolute;
    right: 25px;
    top: 10px;
}
body.vertical-collpsed ul.metismenu li .notifi-count{
    display: none;
}
.tenant-ew-wrapper{
    background: var(--primary-color);
}

/* media queries */
@media (max-width:767px){
    .landlord-u-arrows,.addMeterReading{
        position: static;
    }
    .addMeterReading{
        align-self: center;
    }
    .utility-calendar-wrapper .col-md-3:nth-child(1) .utility-reading-cards{
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .utility-calendar-wrapper .col-md-3:nth-child(12) .utility-reading-cards{
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .utility-calendar-wrapper .col-md-3:nth-child(9) .utility-reading-cards{
        border-bottom-left-radius: 0px;
    }
    .utility-calendar-wrapper .col-md-3:nth-child(4) .utility-reading-cards{
        border-top-right-radius: 0px;
    }
    .property-top-search-bar,
    .tenant-account-info{
        padding: 30px;
    }
    .property-details-img{
        margin-bottom: 25px;
    }
    .property-details-img img,
    .tenant-details-img img,
    .property-details-gallery .gallery-item{
        border-radius: 20px;
    }
    .page-title-box{
        padding-bottom: 0px;
    }
    .page-title-box .page-title-left h3{
        font-size: 18px;
        overflow: hidden;
        word-break: break-word;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .page-title-box .page-title-right{
        font-size: 12px;
    }
    .ew-balance-title,.ew-amount{
        text-align: center;
    }
    #allPaymentsDatatable{
        width: 100% !important;
    }
    .t-verify-account{
        width: 100% !important;
    }
}
@media(max-width:1024px){
    span.m-digit{
        padding: 0px 15px;
    }
}
@media(min-width:767px){
    .c-modal{
        max-width: 75%;
        margin: 0 auto;
    }
    .property-details-content,
    .tenant-details-content{
        position: relative;
    }
    .property-details-gallery .gallery-slider-carousel{
        position: absolute;
        bottom: 20px;
    }
    .property-details-img img,
    .tenant-details-img img{
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .property-details-gallery .gallery-item{
        border: 5px solid #ffffff;
        border-radius: 10px;
    }
    .tenant-details-img img{
        min-height: 370px;
    }
}
@media(max-width:1400px){
    .sign-up-top-logo .logo-lg img{
        width: 82%;
    }
}
/* Customize Css Classes */
.btn-gray{
    background: #EAEAEA;
}
.primary-text{
    color: #303b54;
}
.fw-500{
font-weight: 500;
}
.ml-auto{
    margin-left: auto;
}
.c-modal{
    background: #f6f6f6 !important;
    border-radius: 20px !important;
}
.modal-chart{
    border-radius: 20px !important;
}
.ml-auto{
    margin-left: auto;
}
.c-modal-btn{
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    color: #012343;
    font-weight: 600;
}
.danger-text{
   color: #E70808;
}
.text-left{
    text-align: left;
}
.pending-status-bg{
    background-color: #0063e6;
}
.processing-status-bg{
    background-color: #e0ac00;
}
.paid-status-bg{
    background-color: #008000;
}
.overdue-status-bg{
    background-color: #ff8800;
}
.failed-status-bg{
    background-color: #ff0000
}

.pending-status-text{
    color: #0063e6;
}
.processing-status-text{
    color: #e0ac00;
}
.paid-status-text{
    color: #008000;
}
.overdue-status-text{
    color: #ff8800;
}
.failed-status-text{
    color: #ff0000
}

/* 
register page
*/
.s-page-wrapper{
    height: calc(100vh - 148px);
}
.signup-text{
    font-size: 30px;
    color: #303B54;
    font-weight: 500;
}
.tl-cards .selected-user-type{
    background: var(--primary-color) !important;
    border:1px solid var(--primary-color) !important;
}
.tl-cards .bg-white p{
    color: #303B54;
}
.tl-cards .selected-user-type p{
    color: #fff;
}
.s-landlord-wrapper{
    border:1px solid #cfcfcf;
}
.s-tenant-wrapper,
.s-landlord-wrapper{
    border-radius: 24px;
    height: 140px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}
@media(max-width:767px){
    .tl-cards{
        flex-direction: column;
    }
    .s-tenant-wrapper,
    .s-landlord-wrapper{
        border-radius: 15px;
        height: 80px;
    }
}

/* success */

.success-page-wrapper{
    height: 100vh;
}
.s-message{
    color: #9A9797;
}
.s-login-link{
    color: #7490A6;
}
.success-box{
    border-radius: 20px;
    border:1px solid #cfcfcf;
}
.form-back-nav-icon {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 28px;
    /* background-color: var(--white-color); */
    border: 1px solid var(--border-color);
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
    z-index: 9;
    position: relative;
    color: var(--body-font-color);
}

/**sidebar customizations**/
.vertical-menu {
    margin-top: -70px;
}

#sidebar-menu .logo {
    background: var(--sidebar-background-color);
}
.navbar-brand-box {
    background: var(--sidebar-background-color);
    padding: 0;
    padding-left: 10px;
}

.sidebar-btn {
    background: var(--sidebar-background-color);
}

.sidebar-btn {
    padding-top: 10px;
    font-size: 28px;
}

@media (max-width:576px) {
    .navbar-brand-box {
        display: none
    }
}

.navbar-header .page-title-box {
    padding-left: 10px;
}

@media (min-width: 992px) {
  .navbar-header .page-title-box {
      padding-left: 250px;
  }
  
  #vertical-menu-btn-alternate {
      display: none;
  }
}

#vertical-menu-btn {
    display: inline-block;
}

#vertical-menu-btn-close {
    display: none;
}

@media (max-width: 992px) {
    #vertical-menu-btn-close {
        display: inline-block;
    }

    #vertical-menu-btn {
        display: none;
    }
}

/* Button group container */
.chart-buttons {
    display: inline-flex;          
    border-radius: 5px;            
    border: 1px solid #ccc;        
}

.chart-buttons button {
    padding: 5px 10px;           
    border: none;                  
    background-color: #f0f0f0;     
    color: #333;                   
    cursor: pointer;               
    font-size: 14px;                
}

.chart-buttons button:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 1px solid #ccc;
}

.chart-buttons button:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 1px solid #ccc;
}

.chart-buttons button:hover {
    background-color: #303b54;     
    color: #fff;                   
}

.chart-buttons button.active {
    background-color: #303b54;     
    color: #fff;                  
}

.status-btn-green {
    background-color: rgba(82, 255, 67, 0.1);
    color: var(--green-color);
}
.status-btn-red {
    background-color: rgba(255, 67, 67, 0.1);
    color: var(--red-color);
}
.status-btn-blue {
    background-color: var(--primary-color-transparent);
    color:#3A7AE6;
}
.status-btn-orange {
    background-color: #FFF0E1;
    color: var(--orange-color);
}
.status-btn-yellow {
    background-color: #FFF5D9;
    color: #e0ac00;
}
.compare-panel {
    font-size: 13px;
}

.compare-panel label {
    margin-bottom: 0px;
}
.chart-input, .compare-btn {
    background-color: var(--bg-light);
    color: var(--body-font-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    display: block;
}

.compare-btn {
    background-color: #303b54;     
    color: #fff;  
}
#compare-chart .apexcharts-tooltip {
    display: none !important;
}

.text-red{
    color: #B00004;
}
.small-badge{
    padding: 2px 5px !important;
}
.dateBtn{
    padding: 7px 10px;
    background: #f0f0f0;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
}
.apply-btn{
    background-color: var(--button-primary-color);
    color: #ffffff;   
}

.apply-btn:hover{
    background-color: var(--button-hover-color);
    color: #ffffff;
}

.theme-btn {
    cursor: pointer;
    /* box-shadow: 0 6px #ececec; */
    transition: all 0.2s ease;
}

.theme-btn:active, .theme-btn:focus {
    /* transform: translateY(3px); */
    box-shadow: 0 0px transparent;
}

.theme-btn.small-theme-btn {
    font-size: 12px;
    margin-top: 2px;
    padding: 0px 12px !important;
    border-radius: 10px;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #c4e1ff !important;
}
.flex-1{
    flex: 1;
}
.radius-15{
    border-radius: 15px;
}
.p-10{
    padding: 10px;
}
@media screen and (max-width: 592px) {
    #default-graph-panel .col-md-4:nth-child(2) {
        margin-bottom: 18px;
    }    
}
@media screen and (max-width: 992px) {
    .selectBox select{
        width: 100% !important;
    }
    #default-graph-panel .col-md-4{
        flex: 1 0 auto;
        width: auto;
    } 
    #water-usage-container .col-md-7,#water-usage-container .col-md-5 {
        flex: 1 0 auto;
        width: auto;
    }   
}
@media screen and (max-width: 767px) {
    .chart-buttons{
        width: 100%;
        margin-bottom: 10px;
    }
    #daily-btn, #monthly-btn, #yearly-btn {
        flex: 1 0 auto;
    }
    
}
@media screen and (max-width: 1024px) {
    #page-header-user-dropdown span{
        display: none;
    }
}
@media screen and (min-width: 1100px) {
    #donutLegend{
        display: none;
    }   
}