:root {
    --cx-font: 'Oxygen', sans-serif;
    --cx-white: #fff;
    --cx-black: #000;
    --cx-gray: #BFBFBF;
    --cx-light-gray: #EEF0FE;
    --cx-dark-gray: #7C7B7B;
    --cx-primary: #9ED7FD;
    --cx-blue: #2FAAEF;
    --cx-green: #81D772;
    --cx-light-green: #23bb08;
    --cx-bg-light-green: #ECFFE9;
    --cx-dark-green: #5CB04E;
    --cx-orange: #e4693a;
    --cx-red: #CF2C2C;
    --cx-light-red: #F88A8A;
}

body {
    color: #7C7B7B;
    font-family: var(--cx-font);
    overflow-x: hidden;
}

img {
    max-width: 100%;
}


.bg-primary {
    background-color: var(--cx-primary) !important;
}

.bg-success {
    background-color: var(--cx-light-green) !important;
}

.bg-warning {
    background-color: var(--cx-orange) !important;
}

.bg-danger {
    background-color: var(--cx-light-red) !important;
}

.bg-green {
    background-color: var(--cx-green);
}

.bg-light-green {
    background-color: var(--cx-bg-light-green) !important;
}

.text-primary {
    color: var(--cx-primary) !important;
}

.text-success {
    color: var(--cx-light-green) !important;
}

.text-warning {
    color: var(--cx-orange) !important;
}

.text-danger {
    color: var(--cx-light-red) !important;
}

.text-dark-green {
    color: var(--cx-dark-green);
}

.card-body .card-title {
    font-size: 1rem;
}

.card-body .card-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
}

.page-item .page-link {
    color: inherit;
}

.page-item.active .page-link {
    border-color: var(--cx-blue);
    background-color: var(--cx-blue);
}

.form-control {
    border-color: var(--cx-light-gray);
}

.form-control::placeholder {
    color: var(--cx-gray);
}

.text-green {
    color: var(--cx-green);
}

.text-blue {
    color: var(--cx-blue);
}

.text-orange {
    color: var(--cx-orange);
}

.text-red {
    color: var(--cx-red);
}

.text-black {
    color: var(--cx-black);
}

.btn-cxlight {
    color: var(--cx-blue);
    background-color: var(--cx-light-gray);
    border-color: var(--cx-light-gray);
}

.btn-cxlight:hover {
    color: var(--cx-white);
    background-color: var(--cx-blue);
    border-color: var(--cx-blue);
}

.btn-check:focus+.btn-cxlight,
.btn-cxlight:focus {
    color: #fff;
    background-color: var(--cx-blue);
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-outline-cxlight {
    color: var(--cx-dark-gray);
    border-color: var(--cx-light-gray);
}

.btn-outline-cxlight:hover {
    color: var(--cx-blue);
    background-color: var(--cx-light-gray);
    border-color: var(--cx-light-gray);
}

.btn-check:focus+.btn-outline-cxlight,
.btn-outline-cxlight:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-check:checked+.btn-outline-cxlight,
.btn-check:active+.btn-outline-cxlight,
.btn-outline-cxlight:active,
.btn-outline-cxlight.active,
.btn-outline-cxlight.dropdown-toggle.show {
    color: var(--cx-blue);
    background-color: var(--cx-light-gray);
    border-color: var(--cx-light-gray);
}

.btn-check:checked+.btn-outline-cxlight:focus,
.btn-check:active+.btn-outline-cxlight:focus,
.btn-outline-cxlight:active:focus,
.btn-outline-cxlight.active:focus,
.btn-outline-cxlight.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-outline-cxlight:disabled,
.btn-outline-cxlight.disabled {
    color: var(--cx-gray);
    background-color: transparent;
}

/* HEADER */

.main-header {
    margin-left: 4.6rem;
    transition: margin-left .3s ease-in-out;
}

.content-wrapper {
    margin-left: 4.6rem;
    transition: margin-left .3s ease-in-out, width .3s ease-in-out;
}

.main-sidebar {
    width: 4.6rem;
    transition: margin-left .3s ease-in-out, width .3s ease-in-out;
}

.sidebar-collapse .main-sidebar {
    margin-left: 0;
    width: 4.6rem;
}

.main-toggle {
    display: none;
}

@media(min-width: 768px) {
    .main-sidebar {
        width: 250px;
    }

    .content-wrapper {
        margin-left: 250px;
        overflow-x: hidden;
        overflow-y: scroll;
        /* height: 500px; */
        height: calc(100vh - 180px);
    }

    body.sidebar-collapse .content-wrapper {
        margin-left: 4.6rem;
        
    }

    .main-header {
        margin-left: 250px;
    }
}


@media (min-width: 320px) and (max-width: 768px) {
    .main-sidebar {
        width: 4rem;
    }

    .content-wrapper {
        margin-left: 4rem;
    }

    .main-header {
        margin-left: 4rem;
    }

    body.main-sidebar {
        width: 4rem;
    }

    body.content-wrapper {
        margin-left: 4rem;
    }

    body .main-header {
        margin-left: 4rem;
    }

    .user-panel .info {
        display: none;
    }
}
 /*
@media(max-width: 767px) {
    .main-sidebar {
        width: 0;
    }

    .content-wrapper {
        margin-left: 0;
    }

    .main-header {
        margin-left: 0;
    }

    body .main-sidebar {
        width: 250px; 
    }

    body .main-header {
        margin-left: 250px; 
    }
}
*/
/* content-header */

.content-header {
    padding: 1rem 0.5rem;
}

.content-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
}

/* content-wrapper */
.content-wrapper>.content {
    padding: 0 0.5rem;
}

.parent-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.cx-list {
    line-height: 1.2;
}

.img-box {
    overflow: hidden;
}

.img-box img {
    height: 100%;
}

.img-box1 {
    overflow: hidden;
}

.img-box1 img {
    width: 140px;
}

.cx-list p {
    margin-bottom: 0;
}

.cx-list small {
    font-size: 0.75rem;
    color: var(--cx-dark-gray);
}

.list-content {
    min-width: 150px;
}

.match-bar {
    min-width: 100px;
}

.match-bar .progress {
    height: 0.5rem;
}

.cx-list {
    padding: 1rem;
    position: relative;
}

ul li.cx-list {
    border-width: 0;
}

ul li.cx-list:not(:first-of-type) {
    border-top-width: 1px;
}

ul.arrow-list .cx-list:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    border-right: 3px solid #bababa;
    border-top: 3px solid #bababa;
    -webkit-transform: translate(-50%) rotate(45deg);
    transform: translate(-50%) rotate(45deg);
}

.property-box .property-img {
    overflow: hidden;
}

.property-box .property-img img {
    width: 100%;
}

.property-box {
    line-height: 1.2;
}

.property-box small {
    font-size: 0.75rem;
}

.property-box p {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.property-box p:not(.text-green) {
    color: var(--cx-black);
}

.banner {
    min-height: 380px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.banner .row {
    width: 100%;
}

.banner-body {
    position: relative;
}

.banner-body .small {
    display: block;
    margin-bottom: 0.5rem;
}

.banner-body h4,
.banner-body h5 {
    color: var(--cx-black);
}

.banner-body mat-icon {
    width: 40px;
    margin-right: 0.25rem;
}

.banner-body .edit-btn-right {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.overlay-5 {
    background-color: rgba(255, 255, 255, 0.5);
}

.overlay-6 {
    background-color: rgba(255, 255, 255, 0.6);
}

.overlay-7 {
    background-color: rgba(255, 255, 255, 0.7);
}

.overlay-8 {
    background-color: rgba(255, 255, 255, 0.8);
}

ul.category {
    margin: 0;
    padding: 0;
}

ul.category li {
    list-style: none;
    display: inline-block;
}

ul.category li + li {
    margin-left: 0.25rem;
}

ul.category li a {
    display: block;
    padding: 0.5rem 1.5rem;
    color: inherit;
    text-decoration: none;
}

@media(min-width: 768px) {
    .top-above {
        margin-top: -3.875rem;
    }
}

ul.content-list {
    margin: 0;
    padding: 0;
}

ul.content-list li {
    list-style: none;
    margin-bottom: 0.5rem;
    
    position: relative;
}

ul.content-list li:hover {
    color: var(--cx-blue);
}

ul.icon-list li {
    padding-left: 1.875rem;
}

ul.icon-list li i.fa {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}
.fixed-button {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-radius: 50%;
    border: 0;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: var(--cx-green);
}

.mat-tab-group.mat-background-accent .mat-tab-header, 
.mat-tab-group.mat-background-accent .mat-tab-links,
.mat-tab-group.mat-background-accent .mat-tab-header-pagination, 
.mat-tab-nav-bar.mat-background-accent .mat-tab-header, 
.mat-tab-nav-bar.mat-background-accent .mat-tab-links, 
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination,
.mat-row.highlighted {
    background-color: var(--cx-blue) !important;
}

.height-100 {
    height: 100%;
}





/* btn-cxlight */

.btn-cxlight {
    color: var(--cx-blue);
    background-color: var(--cx-light-gray);
    border-color: var(--cx-light-gray);
}

.btn-cxlight:hover {
    color: var(--cx-white);
    background-color: var(--cx-blue);
    border-color: var(--cx-blue);
}

.btn-check:focus+.btn-cxlight,
.btn-cxlight:focus {
    color: #fff;
    background-color: var(--cx-blue);
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-outline-cxlight {
    color: var(--cx-dark-gray);
    border-color: var(--cx-light-gray);
}

.btn-outline-cxlight:hover {
    color: var(--cx-blue);
    background-color: var(--cx-light-gray);
    border-color: var(--cx-light-gray);
}

.btn-check:focus+.btn-outline-cxlight,
.btn-outline-cxlight:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-check:checked+.btn-outline-cxlight,
.btn-check:active+.btn-outline-cxlight,
.btn-outline-cxlight:active,
.btn-outline-cxlight.active,
.btn-outline-cxlight.dropdown-toggle.show {
    color: var(--cx-blue);
    background-color: var(--cx-light-gray);
    border-color: var(--cx-light-gray);
}

.btn-check:checked+.btn-outline-cxlight:focus,
.btn-check:active+.btn-outline-cxlight:focus,
.btn-outline-cxlight:active:focus,
.btn-outline-cxlight.active:focus,
.btn-outline-cxlight.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-outline-cxlight:disabled,
.btn-outline-cxlight.disabled {
    color: var(--cx-gray);
    background-color: transparent;
}


/* btn-cxgreen */

.btn-cxgreen {
    color: var(--cx-white);
    background-color: var(--cx-green);
    border-color: var(--cx-green);
}

.btn-cxgreen:hover {
    color: var(--cx-white);
    background-color: #6fc161;
    border-color: #6fc161;
}

.btn-check:focus+.btn-cxgreen,
.btn-cxgreen:focus {
    color: #fff;
    background-color: var(--cx-white);
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-outline-cxgreen {
    color: var(--cx-green);
    border-color: var(--cx-green);
}

.btn-outline-cxgreen:hover {
    color: var(--cx-white);
    background-color: var(--cx-green);
    border-color: var(--cx-green);
}

.btn-check:focus+.btn-outline-cxgreen,
.btn-outline-cxgreen:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-check:checked+.btn-outline-cxgreen,
.btn-check:active+.btn-outline-cxgreen,
.btn-outline-cxgreen:active,
.btn-outline-cxgreen.active,
.btn-outline-cxgreen.dropdown-toggle.show {
    color: var(--cx-white);
    background-color: var(--cx-green);
    border-color: var(--cx-green);
}

.btn-check:checked+.btn-outline-cxgreen:focus,
.btn-check:active+.btn-outline-cxgreen:focus,
.btn-outline-cxgreen:active:focus,
.btn-outline-cxgreen.active:focus,
.btn-outline-cxgreen.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}

.btn-outline-cxgreen:disabled,
.btn-outline-cxgreen.disabled {
    color: var(--cx-gray);
    background-color: transparent;
}

.alert-light {
    background-color: var(--cx-light-gray);
    border-color: var(--cx-light-gray);
}

.alert-green {
    color: #5cb04e;
    background-color: #d4f7ce;
    border-color: #5CB04E;
}

.alert h5 {
    margin-bottom: 0;
}

.relative {
    position: relative;
}

/* HEADER */

.main-header {
    margin-left: 4.6rem;
    transition: margin-left .3s ease-in-out;
}

.content-wrapper {
    margin-left: 4.6rem;
    transition: margin-left .3s ease-in-out, width .3s ease-in-out;
}

.main-sidebar {
    width: 4.6rem;
    transition: margin-left .3s ease-in-out, width .3s ease-in-out;
}

.sidebar-collapse .main-sidebar {
    margin-left: 0;
    width: 4.6rem;
}

@media(min-width: 1200px) {
    .main-sidebar {
        width: 250px;
    }

    .content-wrapper {
        margin-left: 250px;
    }

    body.sidebar-collapse .content-wrapper {
        margin-left: 4.6rem;
    }

    .main-header {
        margin-left: 250px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .main-sidebar {
        width: 4.6rem;
    }

    .content-wrapper {
        margin-left: 4.6rem;
    }

    .main-header {
        margin-left: 4.6rem;
    }

    body.sidebar-collapse .main-sidebar {
        width: 250px;
    }

    body.sidebar-collapse .content-wrapper {
        margin-left: 250px;
    }

    body.sidebar-collapse .main-header {
        margin-left: 250px;
    }
}

@media(max-width: 767px) {
    .main-sidebar {
        width: 0;
    }

    .content-wrapper {
        margin-left: 0;
    }

    .main-header {
        margin-left: 0;
    }

    body.sidebar-collapse .main-sidebar {
        width: 250px;
    }


    body.sidebar-collapse .main-header {
        margin-left: 250px;
    }
}

/* content-header */

.content-header {
    padding: 1rem 0.5rem;
}

.content-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
}

/* content-wrapper */
.content-wrapper>.content {
    padding: 0 0.5rem;
}

.parent-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.cx-list {
    line-height: 1.2;
}

.img-box {
    overflow: hidden;
}

.img-box img {
    height: 100%;
}

.cx-list p {
    margin-bottom: 0;
}

.cx-list small {
    font-size: 0.75rem;
    color: var(--cx-dark-gray);
}

.list-content {
    min-width: 150px;
}

.match-bar {
    min-width: 100px;
}

.match-bar .progress {
    height: 0.5rem;
}

.cx-list {
    padding: 1rem;
    position: relative;
}

ul li.cx-list {
    border-width: 0;
}

ul li.cx-list:not(:first-of-type) {
    border-top-width: 1px;
}

ul.arrow-list .cx-list:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    border-right: 3px solid #bababa;
    border-top: 3px solid #bababa;
    -webkit-transform: translate(-50%) rotate(45deg);
    transform: translate(-50%) rotate(45deg);
}

.property-box .property-img {
    overflow: hidden;
}

.property-box .property-img img {
    width: 100%;
}

.property-box {
    line-height: 1.2;
}

.property-box small {
    font-size: 0.75rem;
}

.property-box p {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.property-box p:not(.text-green) {
    color: var(--cx-black);
}

.banner {
    min-height: 380px;
    display: flex;
    justify-content: flex-startl;
    align-items: center;
    border-radius: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.banner-body .small {
    display: block;
    margin-bottom: 0.5rem;
}

.banner-body h4,
.banner-body h5 {
    color: var(--cx-black);
}

.overlay-6 {
    background-color: rgba(255, 255, 255, 0.6);
}

ul.category {
    margin: 0;
    padding: 0;
}

ul.category li {
    list-style: none;
    display: inline-block;
}

ul.category li + li {
    margin-left: 0.25rem;
}

ul.category li a {
    display: block;
    padding: 0.5rem 1.5rem;
    color: inherit;
    text-decoration: none;
}

@media(min-width: 768px) {
    .top-above {
        margin-top: -3.875rem;
    }
}

ul.content-list {
    margin: 0;
    padding: 0;
}

ul.content-list li {
    list-style: none;
    margin-bottom: 0.5rem;
    
    position: relative;
}

ul.content-list li:hover {
    color: var(--cx-blue);
}

ul.icon-list li {
    padding-left: 1.875rem;
}

ul.icon-list li i.fa {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}

.fixed-button {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-radius: 50%;
    border: 0;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: var(--cx-green);
}

.accordion-btn {
    position: absolute;
    left: 0;
}
.add-remove-btn {
    position: absolute;
    right: 0;
}

.add-remove-btn .btn {
    width: 24px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 50%;
    font-weight: 400;
}

.add-expenses {
    padding-left: 2rem;
    padding-right: 4rem;
}

.add-expenses label {
    /*font-size: 0.875rem;*/
}

.accordionexpenses .accordion-btn {
    transition: all ease-in-out 300ms;
    transform: rotate(180deg);
    cursor: pointer;
}

.accordionexpenses .collapsed.accordion-btn {
    transform: rotate(0deg);
}


/* :::: SWITCH :::: */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--cx-green);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--cx-green);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* :::::::::: DASHBOARD :::::::::: */
.dashboard-payment-box {

}

.dashboard-payment-box .icon-box {
    height: 64px;
    margin-bottom: 1rem;
}

.dashboard-payment-box .icon-box img {
    height: 100%;
}

.dashboard-payment-box h3 {
    font-size: 1rem;
    font-weight: 700;
}

/* :::::::::: PAY RENT :::::::::: */

.pay-details-box label {
    font-weight: 700;
    color: var(--cx-dark-gray);
}

.pay-details-box label strong {
    color: var(--cx-black);
}

.pay-details-box a {
    color: inherit;
}

.due-box {
    border-top: 1px solid var(--cx-gray);
    border-bottom: 1px solid var(--cx-gray);
}

.pay-box {
    position: relative;
}

.pay-box .pay-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cx-light-gray);
    position: absolute;
    top: 0.5rem;
}

.pay-card-icon i.fa {
    font-size: 0.875rem;
}

.pending-card i.fa {
    color: var(--cx-orange);
}

.success-card i.fa {
    color: var(--cx-dark-green);
}

.cancel-card i.fa {
    color: var(--cx-red);
}

.pay-box .pay-details {
    padding-left: 2.5rem;
}

.pay-box .pay-details small {
    font-size: 12px;
    color: var(--cx-dark-gray);
}

.pay-box .pay-details p {
    font-size: 0.875rem;
    font-weight: 700;
}

ul.bullet-content-list {
    margin: 0;
    padding: 0;
}

ul.bullet-content-list li {
    list-style: none;
    padding-left: 1.875rem;
    color: var(--cx-dark-gray);
    position: relative;
}

ul.bullet-content-list li:before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--cx-gray);
    position: absolute;
    top: 0.25rem;
    left: 0;
}

.profile-img {
    position: relative;
    overflow: hidden;
}

.profile-img img {
    width: 100%;
}

.edit-btn {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cx-white);
    border: 0;
    background-color: transparent;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

.right-fixedbtn {
    position: absolute;
    top: 0;
    right: 0;
}

table.lease-table thead tr th {
    font-size: 0.75rem;
    color: #939191;
    background-color: #ECF5EA;
}

table.lease-table tbody tr td {
    font-size: 0.875rem;
}

.table.lease-table>:not(:first-child) {
    border-top:  0;
}

.table.lease-table>:not(caption)>*>* {
    border: 0;
}

.review-box strong {
    font-size: 0.875rem;
}