body {max-width: 100% !important; font-family: "Roboto", sans-serif;}

.container {background-color: #F3F4F6; max-width: 100%; display: flex; font-weight: 500;}
.active-color {color: #0193FF;}
.active-option {background-color: #F9FAFC; color: #0193FF !important; border-radius: 5px; padding: 10px 0 10px 20px; font-weight: 600 !important;}
.hide-div {display: none;}
.js-title {font-size: 30px; font-weight: 700; margin-top: 40px;}
.js-all-option, .js-resi-option {padding-bottom: 60px;}

.js-top-with-filter {display: flex; justify-content: space-between; margin-bottom: 20px;}
.js-btns-div {display: flex; flex-wrap: wrap; gap: 20px;}
.js-options-btn {background-color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); cursor: pointer; display: flex; justify-content: center; align-items: center;}
.active-js-btn {background-color: #0193FF; color: #fff;}
.filter-card {background-color: #fff; font-size: 12px; padding: 10px 20px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); cursor: pointer; display: flex; justify-content: center; align-items: center;}
.filter-card i {color: #0193FF;}

.line-divider {background-color: #EEF2F6; width: 100%; max-width: 100%; height: 1px; margin: 10px auto;}

.js-filter-div-multi {display: flex; justify-content: space-between; gap: 10px;}
.filter-search {background-color: #fff; font-size: 12px; padding: 10px 20px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); cursor: pointer; display: flex; justify-content: center; align-items: center;}
.filter-search i {color: #0193FF;}
.filter-search input {border: none; margin-left: 10px;}

.blue-txt {color: #0193FF}
.blue-bg {background-color: #0193FF}

/* SIDEBAR STYLES */
#sidebar {background-color: #fff; max-width: 18%; width: 100%; padding: 10px 20px; height: calc(100vh - 32px); display: flex; justify-content: space-between; flex-direction: column;}
.sidebar-divider {background-color: #D3D3D3; width: 100%; max-width: 100%; height: 1px; margin: 20px auto;}
.sidebar-logo {max-width: 220px; width: 100%; margin-top: 10px;}
.sidebar-category {display: flex; align-items: center; justify-content: space-between;}
.sidebar-category p {margin: 0 !important; line-height: 1; cursor: pointer; font-size: 16px; color: #000; font-weight: 500;}
.sidebar-dropdown {display: none;}
.sidebar-dropdown p {cursor: pointer; font-weight: 500; color: #7B7B7B; font-weight: 400;}
.sidebar-bottom {margin-bottom: 20px;}
.logout-btn {max-width: 100%; width: 100%; border: 1px solid #000; border-radius: 5px; padding: 10px; background-color: unset;}

/* MAIN CONTENT CONTAINER STYLES */
.js-main-div {max-width: 100%; width: 100%; display: flex; justify-content: center; height:  calc(100vh - 32px); overflow: auto;}
.main-limiter {max-width: 1200px; width: 100%;}



/* ALL PROGRAMS OVERVIEW */
.js-all-option, .js-resi-option {color: #2E2E2E;}
.res-overview-three {display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px;}
.res-overview-two {display: flex; justify-content: space-between; gap: 20px;}
.center-card-content {text-align: center;}
.overview-card-number {font-size: 45px; font-weight: 700; margin-top: 10px; margin-bottom: 0;}
.overview-card {background:#fff; border-radius: 5px; padding:16px 18px 14px; box-shadow:0 8px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); max-width:500px; width: 100%;}
.res-overview-two .overview-card {max-width: 50%;}
.overview-card-title-with-filter {display:flex; align-items:center; justify-content:space-between;}
.overview-card-title {margin:0; font-weight:600; margin-bottom: 15px;}
.overview-card-filters {display:flex; gap:8px;}
.overview-filter {font-size:12px; padding:6px 10px; border-radius:8px; cursor:pointer;}
.active-filter {background: #F4F4F4; font-weight:600;}


/* PROGRAM CHARTS */
.overview-chart-h {margin-top: 10px;}
.hchart-rows {display: flex; flex-direction: column; gap: 18px;}
.hchart-row {display: grid;grid-template-columns: 64px 1fr; align-items: center; column-gap: 16px;}
.hchart-label {font-size: 10px; letter-spacing: 0.02em; color: #6b7280; line-height: 1.1; text-transform: none;}
.hchart-bar-wrap {height: 34px; display: flex; align-items: center; position: relative;}
.hchart-bar {height: 28px; border-radius: 3px;}
.hchart-axis {margin-top: 18px; margin-left: 80px; padding-top: 10px; border-top: 1px solid #EEF2F6; display: grid; grid-template-columns: repeat(6, 1fr); font-size: 12px; color: #6b7280;}
.hchart-axis span {text-align: left;}
.bar-bge {background: #7A7A7A;}
.bar-smeco {background: #3A7280;}
.bar-pepco {background: #7F2A2A}
.bar-delmarva {background: #2F833C;}
.bar-pe {background: #9A5E18;}
.bar-declined {background: #7A7A7A;}
.bar-request {background: #3A7280;}
.bar-denied {background: #7F2A2A}
.bar-approved {background: #2F833C;}
.bar-waiting {background: #9A5E18;}
.bar-cancelled {background: #863798;}
.bar-pending {background: #918C1B;}

/* PROGRAM PILLS */
.apps-list {background:#fff; border-radius:5px; padding:8px 0;}
.apps-row {display:flex; justify-content:space-between; align-items:center; padding:12px 6px; border-bottom:1px solid #eef2f6;}
.apps-row:last-child {border-bottom:0;}
.apps-count {color:#888888; font-weight:500;}
.status-pill {font-size:12px; padding:6px 10px; border-radius:5px; background:#f3f4f6; white-space:nowrap;}
.pill-bge {background: #F4F4F4; color: #7A7A7A;}
.pill-smeco {background: #F2FBFF; color: #3A7280;}
.pill-pepco {background: #FFF2F2; color: #7C2525;}
.pill-delmarva {background: #F2FFF4; color: #2F833C;}
.pill-pe {background: #FFF4E6; color: #7C2525;}
.pill-declined {background: #F4F4F4; color: #7A7A7A;}
.pill-request {background: #F2FBFF; color: #3A7280;}
.pill-denied {background: #FFF2F2; color: #7C2525;}
.pill-approved {background: #F2FFF4; color: #2F833C;}
.pill-waiting {background: #FFF4E6; color: #7C2525;}
.pill-cancelled {background: #F8EFFA; color: #863898;}
.pill-pending {background: #FAFAD8; color: #918D1B;}


.overview-card-footer {display:flex; justify-content:flex-end; padding-top:12px; margin-top: 30px;}
.overview-card-footer a {font-size:12px; text-decoration:none; color:#0193FF; cursor: pointer;}
.view-all-projects, .view-all-apps {cursor: pointer;}


.top-contractors-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.top-contractors-header, .top-contractors-row {display: grid; grid-template-columns: 2fr 2fr 2fr; column-gap: 24px; align-items: center;}
.top-contractors-header p {margin: 0; font-weight: 600 !important; color: #2E2E2E; font-size: 16px !important;}
.top-contractors-row p {margin: 0; font-weight: 600; color: #2E2E2E}
.top-contractors-row {padding: 14px 0;}
.top-contractors-row p {margin: 0; color: #747474; font-weight: 400; font-size: 14px !important;}
.top-contractors-header p {font-size: 16px !important;}


/* ALL PARTICIPATING CONTRACTORS */
.all-participating-contractors-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.all-participating-contractors-header, .all-participating-contractors-row {display: grid; grid-template-columns: 2fr 2fr 2fr 2fr 2fr; column-gap: 24px; align-items: center;}
.all-participating-contractors-header p {margin: 0; font-weight: 600 !important; color: #2E2E2E}
.all-participating-contractors-row {padding: 14px 0;}
.all-participating-contractors-row p {margin: 0; color: #747474; font-weight: 400; font-size: 14px !important;}
.all-participating-contractors-header p {font-size: 16px !important;}


/* PARTICIPATING CONTRACTORS */
.participating-contractors-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.participating-contractors-header, .participating-contractors-row {display: grid; grid-template-columns: 2fr 2fr 2fr 2fr; column-gap: 24px; align-items: center;}
.participating-contractors-header p {margin: 0; font-weight: 600 !important; color: #2E2E2E}
.participating-contractors-row {padding: 14px 0;}
.participating-contractors-row p {margin: 0; color: #747474; font-weight: 400; font-size: 14px !important;}
.participating-contractors-header p {font-size: 16px !important;}

/* RESIDENTIAL OPEN PROJECTS */
.open-projects-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.open-projects-header, .open-projects-row {display: grid; grid-template-columns: 2fr 0.8fr 2fr 160px; column-gap: 24px; align-items: center;}
.open-projects-header p {margin: 0; font-weight: 600; color: #2E2E2E}
.open-projects-header p:nth-child(4) {justify-self: end; width: 160px;}
.open-projects-row {padding: 14px 0;}
.open-projects-row p {margin: 0; color: #747474; font-weight: 400;}
.open-projects-btn {justify-self: end; width: 160px; text-align: center; background-color: #0193FF; border: none; border-radius: 5px; padding: 10px 12px; color: #fff; cursor: pointer;}

/* RESIDENTIAL PENDING INVITES */
.pending-projects-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.pending-projects-header, .pending-projects-row {display: grid; grid-template-columns: 2fr 0.8fr 2fr 1.6fr 2fr 160px; column-gap: 24px; align-items: center;}
.pending-projects-header p {margin: 0; font-weight: 600; color: #2E2E2E}
.pending-projects-header p:nth-child(4) {justify-self: end; width: 160px;}
.pending-projects-row {padding: 14px 0;}
.pending-projects-row p {margin: 0; color: #747474; font-weight: 400;}
.pending-projects-btn {justify-self: end; width: 160px; text-align: center; background-color: #0193FF; border: none; border-radius: 5px; padding: 10px 12px; color: #fff; cursor: pointer;}

/* RESIDENTIAL APPLICATIONS */
.applications-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.applications-header, .applications-row {display: grid; grid-template-columns: 2fr 0.8fr 2fr 2fr 2fr 2fr 160px; column-gap: 24px; align-items: center;}
.applications-header p {margin: 0; font-weight: 600; color: #2E2E2E}
.applications-header p:nth-child(4) {justify-self: end; width: 160px;}
.applications-row {padding: 14px 0;}
.applications-row p {margin: 0; color: #747474; font-weight: 400;}
.applications-btn {justify-self: end; width: 160px; text-align: center; background-color: #0193FF; border: none; border-radius: 5px; padding: 10px 12px; color: #fff; cursor: pointer;}

/* RESIDENTIAL TRANSACTIONS */
.transactions-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.transactions-top {display: flex; justify-content: space-between; align-items: center;}
.transactions-title {font-weight: 600; color: #2E2E2E;}
.transactions-p {font-size: 14px; color: #747474;}
.transactions-btn {width: 130px; text-align: center; background-color: #0193FF; border: none; border-radius: 5px; padding: 10px 12px; color: #fff; cursor: pointer;}
.transactions-bot {display: flex; justify-content: space-between; align-items: center; background-color: #EAEAEA; border-radius: 5px; overflow: hidden; max-height: 0; opacity: 0; padding: 0 40px; margin-top: 0; transition: max-height 300ms ease, padding 300ms ease, margin-top 300ms ease, opacity 200ms ease;}
.transactions-bot.is-open {max-height: 320px; opacity: 1; padding: 20px 40px; margin-top: 30px;}
.transactions-bot .transactions-item {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.transactions-bot .transactions-title {font-size: 22px; margin-bottom: 5px; margin-top: 0 !important; color: #747474; color: #747474;}
.transactions-bot .transactions-price {font-weight: 700; font-size: 35px; margin: 0 !important; color: #2E2E2E;}

@media (prefers-reduced-motion: reduce) {
  .transactions-bot {transition: none;}
}

/* SETTINGS GENERAL STYLES */
.js-account-option {color: #2E2E2E;}
.accounts-div {background: #fff; margin-top: 40px; padding: 20px 40px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);}
.accounts-two-divs {display: flex; justify-content: space-between;}
.accounts-two-left p.bold {margin-bottom: -10px;}

/* ACCOUNT SETTINGS */
.settings-integrations-div {display: flex; flex-direction: column;}
.integrations {display: flex; justify-content: space-between; align-items: center;}
.integrations p {margin-bottom: 0;}

/* TEAM SETTINGS */
.accounts-div p.bold {margin-bottom: 5px;}
.ai-circle-alert {color: #FFE200; margin-right: -10px;}
.team-settings-header, .team-settings-row {display: grid; grid-template-columns: 2fr 2fr 2fr 2fr; column-gap: 24px; align-items: center;}
.team-settings-header p {margin: 0; font-weight: 600; color: #2E2E2E}
.team-settings-header p:nth-child(4) {justify-self: end; width: 160px;}
.team-settings-row {padding: 14px 0;}
.team-settings-row p {margin: 0; color: #747474}

/* NEED HELP */
.help-div {display: flex; justify-content: space-between;}
.help-btn {justify-self: end; width: 80px; text-align: center; background-color: #0193FF; border: none; border-radius: 5px; padding: 10px 12px; color: #fff; cursor: pointer;}

/* APPLICATION DETAILS */
.application-top, .application-bottom {background: #fff; margin-top: 40px; padding: 20px 20px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06); color: #2E2E2E}
.application-div {display: flex; flex-direction: column; row-gap: 16px; padding: 40px 20px;}
.application-inner {align-items: flex-start; align-content: stretch; column-gap: 32px;}
.application-row {display: flex; flex-direction: row; align-items: flex-start; align-content: stretch; column-gap: 32px;}
.application-dot-holder {display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: stretch; row-gap: 16px; flex-basis: 8px;}
.application-dot-holder-no-img {display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: stretch; row-gap: 16px; flex-basis: 8px; margin: 0 8px;}
.dot {display: flex; align-self: center; flex-grow: 0; margin-top: 16px;}
.checked-dot {background: url('http://staging-optimusfinancing-staging.kinsta.cloud/wp-content/uploads/2025/08/check-icon.png') center/contain no-repeat; box-shadow: none; width:24px; height:24px;}
.denied-dot {background: url('http://staging-optimusfinancing-staging.kinsta.cloud/wp-content/uploads/2025/08/denied-icon.png') center/contain no-repeat; box-shadow: none; width:24px; height:24px;}
.open-dot {background: url('http://staging-optimusfinancing-staging.kinsta.cloud/wp-content/uploads/2025/08/open-icon.png') center/contain no-repeat; box-shadow: none; width:24px; height:24px;}
.app-line {display: flex; justify-self: stretch; align-self: center; width: 8px; flex-grow: 1; flex: 1 1 0%; border-top-left-radius: 9999px; border-top-right-radius: 9999px; background-color: #ADDCFF;}
.app-line-cont {display: flex; justify-self: stretch; align-self: center; width: 8px; flex-grow: 1; flex: 1 1 0%; background-color: #ADDCFF;}
.app-line-end {display: flex; justify-self: stretch; align-self: center; width: 8px; flex-grow: 1; flex: 1 1 0%; border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; background-color: #ADDCFF;}
.app-line-one {display: flex; justify-self: stretch; align-self: center; width: 8px; flex-grow: 1; flex: 1 1 0%; border-radius: 9999px; background-color: #ADDCFF;}
.application-right {display: flex; row-gap: 8px; flex-direction: column; max-width: 100%; width: 100%; border: 1px solid #2E2E2E; border-radius: 5px; padding: 20px 40px; margin: 16px 0;}
.app-info-holder {display: flex; gap: 80px;}
.bolded-info {font-weight: 700; font-size: 18px; margin-top: -10px;}
.date-div {width: 240px;}
.date-div .status-pill {font-size: 14px; margin-top: 16px; margin-bottom: 10px; text-align: end; font-weight: bold;}
.app-date {font-size: 12px; text-align: end;}
.green-info {color: #2F8042; font-weight: 700; font-size: 14px; margin-top: -10px;}
.application-title-and-btn {display: flex; justify-content: space-between; align-items: center;}
.app-invite-btn {background-color: #0193FF; border: none; border-radius: 5px; padding: 10px;}
.app-back-btn {background-color: #0193FF; border: none; border-radius: 5px; padding: 10px; margin: 20px 0;}
.application-top {display: flex; justify-content: space-between;}
.top-app-info {display: flex; flex-direction: column;}
.top-app-info p {margin-bottom: 0;}