body, html {
height: 100%;
margin: 0;
font-family: Montserrat, sans-serif;
background: #434654;
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #434654;
z-index: 2147483647;
display: flex;
align-items: center;
justify-content: center;
}
#preloader .house {
display: block;
width: 150px;
height: 150px;
}
.house__base,
.house__roof,
.house__door,
.house__chimney {
animation: drawHouse 3s ease-in-out infinite;
transition: stroke var(--trans-dur);
}
/* Animations */
@keyframes drawHouse {
0% { stroke-dashoffset: 250; }
33% { stroke-dashoffset: 0; }
66% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -250; }
}
.page-container {
display: flex;
height: 100%;
}
.sidebar {
width: 260px;
min-width: 260px;
background-color: #202123;
color: #FFF;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sidebar-top {
padding: 10px 20px;
}
.sidebar-bottom {
padding: 20px;
border-top: 1px solid #5acb8d8f;
}
.profile-sidebar {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
width: 100%;
}
.myaccount-links {
width: 100%;
}
.myaccount-links a {
width: 100%;
text-decoration: none;
}
a > .myaccount-wrapper > .profile-sb-left {
display: flex;
flex-direction: row;
align-items: center;
color: #FFF;
text-transform: capitalize;
}
a > .myaccount-wrapper > .profile-sb-right {
color: #FFF;
}
.profile-sidebar h2 {
font-size: 19px;
margin-bottom: 0px;
margin-left: 10px;
}
.nav-items {
margin-top: 30px;
}
a.nav-item-link-block {
display: flex;
align-items: center;
padding: 10px 10px 10px 15px;
text-decoration: none;
transition: border-left .5s;
margin-bottom: 5px;
}
a.nav-item-link-block:hover {
border-radius: 10px;
background-color: #FFFFFF0a;
}
a.nav-item-link-block.active {
border: 1px solid #5acb8d;
border-left: 6px solid #5acb8d;
border-radius: 10px;
padding-left: 10px;
}
.nav-item-link-block i {
font-size: 18px;
color: #5acb8d;
flex: 0 0 auto;
text-align: center;
min-width: 45px;
}
.nav-item-link-block h3 {
margin-bottom: 0px;
font-size: 15px;
color: #FFF;
margin-left: 10px;
font-weight: 600;
flex: 1 1 auto;
}
div.logo img {
max-width: 100%;
}
.logo sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: super;
right: 25px;
}
.previewBtnsWrapper i {
color: #FFFFFF !important;
display: block !important;
padding: 5px !important;
margin: 0px !important;
}
.previewBtnsWrapper button.btn.btn-primary {
background: #5acb8d;
border: 1px solid #5acb8d;
color: #222;
}
#copyToClipboard {
margin-right: 5px;
}
button.btn.btn-primary {
background: #5acb8d;
border: 1px solid #5acb8d;
white-space: nowrap;
}
.btn.btn-primary.invert {
background: #5acb8d;
border: 1px solid #5acb8d;
color: #FFFFFF;
}
button.btn.btn-primary:hover {
background: #5acb8d;
border: 1px solid #5acb8d;
}
button.btn.btn-primary.invert:hover {
background: transparent;
border: 1px solid #5acb8d;
color: #222;
}
.main {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
overflow: auto;
background-color: #434654;
}
.main-content {
height: fit-content !important;
min-height: 100vh;
}
.app-footer {
background: #383a45;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
color: #ffffff;
padding: 20px 10px;
font-size: 14px;
}
.app-footer p {
text-align: center;
margin-bottom: 0px;
}
.logo i.fa.fa-caret-up {
background: #4e4f50;
padding: 0px 8px;
border-radius: 100px;
color: #5acb8d;
font-size: 39px;
margin-right: 10px;
}
.logo h2 > i.fa-duotone.fa-microchip-ai {
font-size: 22px;
}
.logo h2 {
margin-bottom: 0px;
}
img.logo-img {
max-width: 80%;
}
.logo {
display: flex;
flex-direction: row;
align-items: center;
}
.chatwrapper {
display: flex;
justify-content: space-between;
align-items: stretch;
height: 100%;
min-height: auto;
flex-direction: column;
align-content: stretch;
}
#chatbox {
margin: 0 auto;
border: none;
padding: 20px;
height: 100%;
overflow-y: auto;
width: 100%;
}
#chatbox::-webkit-scrollbar {
background-color: #7F808A;
}
#chatbox::-webkit-scrollbar-thumb {
background-color: #FFFFFF;
}
.cp-cb-prompts #chatbox {
margin: 0 auto;
border: none;
padding: 20px 20px 0px 20px;
height: 100%;
overflow-y: auto;
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
}
#userInput {
width: 100%;
padding: 0px;
}
.messageInput-wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
background: #5d5f6e;
}
input.messageField, textarea.messageField {
border-radius: 0px !important;
background: #5d5f6e;
border: none;
min-height: 60px;
padding-top: 15px;
}
input.messageField:focus, textarea.messageField:focus {
background: #5d5f6e;
color: #FFF;
border: none;
outline: none;
}
/* Change the color to gray for WebKit, Blink, and Firefox 19+ */
input.messageField::-webkit-input-placeholder, textarea.messageField::-webkit-input-placeholder { /* WebKit browsers */
color: #FFF;
}
input.messageField:-moz-placeholder, textarea.messageField:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #FFF;
}
input.messageField::-moz-placeholder, textarea.messageField::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #FFF;
}
input.messageField:-ms-input-placeholder, textarea.messageField:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #FFF;
}
.btnMessageSend {
background: #5d5f6e;
border: none;
color: #5d5f6e;
text-transform: lowercase;
font-weight: 500;
border-radius: 0px;
}
.btnMessageSend i {
padding: 10px;
border-radius: 100px;
background: #444654;
}
button#clearChatBtn {
position: absolute;
right: 10px;
top: 55px;
opacity: .5;
background: #5d5f6e;
border: none;
border-radius: 50px;
}
.cp-chatbox #clearChatBtn {
position: absolute;
right: 10px;
top: 0px;
opacity: .5;
background: #5d5f6e;
border: none;
border-radius: 50px;
}
.promptBtns-wrapper {
padding: 0px 0px 20px 0px;
display: flex;
flex-direction: row;
}
.cp-widget .promptBtns-wrapper {
background: #5d5f6e;
}
button.btn.btnPrompts.promptsTitle {
background: #FFF;
min-width: 120px;
}
button.btn.btnPrompts.promptsTitle:hover {
cursor: default !important;
color: #9b9db1;
}
.btnPrompts {
background: #212529;
color: #9b9db1;
border-radius: 100px;
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 15px;
margin-left: 10px;
}
.btnPrompts:hover {
color: #FFF;
}
#quickPromptsContainer .btnPrompts {
background: #008aff;
color: #ffffff;
border-radius: 100px;
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 15px;
margin-left: 10px;
display: block;
}
.promptsSlider {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.promptsSlider::-webkit-scrollbar {
display: none;
}
.promptsSlider button {
flex: 0 0 auto;
}
.promptsSlider2 {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.promptsSlider2::-webkit-scrollbar {
display: none;
}
.promptsSlider2 button {
flex: 0 0 auto;
}
#quickPromptsContainer {
padding-bottom: 10px;
min-height: 52px;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
}
button#clearChatBtn:hover {
opacity: 1;
}
.chatheader-title {
padding: 10px 10px;
background: #383a45;
border-bottom: 2px solid #353743;
display: flex;
flex-direction: row;
align-content: flex-start;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.chatheader-left {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
width: -webkit-fill-available;
}
.chatheader-left i {
background: #5acb8dff;
padding: 10px 12px;
border-radius: 10px 10px 0px;
margin-right: 10px;
font-weight: 900;
line-height: normal;
color: #fff;
}
.chatheader-right .profile-img-thumb {
background: #04cd9a;
padding: 10px 6px 0px 6px;
border-radius: 100px;
color: #383a45;
font-size: 29px;
margin-right: 5px;
border: none;
background: linear-gradient(322deg, rgba(5,218,124,0.5032606792717087) 28%, rgba(0,179,255,0.5) 100%);
}
.navbar-right .profile-img-thumb {
background: #04cd9a;
padding: 10px 6px 0px 6px;
border-radius: 100px;
color: #383a45;
font-size: 29px;
margin-right: 5px;
border: none;
background: linear-gradient(322deg, rgba(5,218,124,0.5032606792717087) 28%, rgba(0,179,255,0.5) 100%);
}
.chatheader-right h4 {
font-size: 16px;
font-weight: 100;
color: #ffffff;
margin-bottom: 0px;
}
.chatheader-title h2 {
font-size: 24px;
font-weight: 400;
color: #ececec;
margin-bottom: 0px;
}
.chatwrapper-dashboard {
display: flex;
align-items: stretch;
flex-direction: column;
}
.card.dashboard-card {
height: 100%;
background: #eef0ff;
border: 1px solid #444654;
border-right: 4px solid #5acb8d;
border-radius: 15px;
overflow: hidden;
}
.db-team-panel {
background-image: none !important;
background: #8fe5b6 !important;
}
.db-team-card {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
padding: 10px 20px;
}
.team-mgr-header {
font-size: 19px;
font-weight: 700;
color: #212529;
}
.card-body.dashboardMap {
padding: 0px;
display: flex;
flex-direction: column;
align-content: stretch;
align-items: stretch;
}
.labelinput {
display: flex;
flex-direction: column;
}
.row.dashboard-features {
margin: 15px 0px;
}
#embedBtn.btn-info {
background: #5acb8d;
border: 1px solid #5acb8d;
white-space: nowrap;
}
.btn-db-card {
background: transparent;
color: #5acb8d;
border: 1px solid #5acb8d;
}
.btn-db-card:hover {
background: #5acb8d;
border: 1px solid #5acb8d;
}
img.page-title-img {
width: 36px;
border-radius: 100px;
margin-right: 10px;
}
i.beta-tag {
margin-left: 10px !important;
padding: 5px !important;
font-size: 10px !important;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold !important;
text-decoration: none;
font-style: normal;
background: #FFF !important;
color: #5acb8d !important;
border-radius: 10px !important;
}
i.beta-tag.premium {
margin-left: 10px;
padding: 5px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
text-decoration: none;
font-style: normal;
background: #FFF;
color: #5acb8d;
border-radius: 10px;
}
i.beta-tag.free {
margin-left: 10px;
padding: 5px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: bold;
text-decoration: none;
font-style: normal;
background: #FFF;
color: #ff6600;
border-radius: 10px;
}
.message {
width: 100%;
margin-bottom: 10px;
display: inline-block;
}
.message .bubble {
border-radius: 20px;
padding: 10px;
display: inline-block;
}
.message .text {
font-size: 1rem;
}
.message-user-wrap {
float: right;
max-width: 75%;
min-width: 160px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.message-bot-wrap {
float: left;
max-width: 75%;
min-width: 51%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.message.user .bubble {
background-color: #5ac88c;
color: white;
}
.name {
color: #5acb8d;
}
.message.bot .bubble {
background-color: #ECECEC;
float: left;
}
.message.bot .name {
float: left;
}
.typing-indicator {
display: flex;
margin-left: 5px;
height: 20px;
width: 35px;
position: relative;
margin: auto;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
.typing-indicator span {
height: 5px;
width: 5px;
float: left;
margin: 0 1px;
background: #007bff ;
display: block;
border-radius: 50%;
opacity: 0.4;
animation: pulse 0.45s infinite;
}
.typing-indicator span:nth-child(0) {
animation-delay: 0.15s;
}
.typing-indicator span:nth-child(1) {
animation-delay: 0.3s;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.45s;
}
.timestamp {
font-size: 0.8rem;
color: #FFF;
padding: 0 10px;
}
@keyframes pulse {
0% { opacity: 0.4; }
50% { opacity: 1; }
100% { opacity: 0.4; }
}
.myaccount-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #5bca8d;
}
input:focus + .slider {
box-shadow: 0 0 1px #5bca8d;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.darkModeToggle-wrapper {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.light-mode-label {
color: #FFF;
}
.bubble-wrapper.vertical {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
width: 100%;
margin: 20px auto;
background: #838490;
border-radius: 20px;
padding: 30px;
}
.bubble-wrapper.vertical.myaccount-features {
align-items: baseline;
}
p.successerror_message {
margin-bottom: 0px !important;
}
.cp-widgets-wrapper {
display: flex;
flex-direction: row;
height: 100%;
max-height: 90vh;
}
.cp-widgets-col {
display: flex;
flex-direction: column;
}
.cp-widget {
min-width: 250px;
min-height: 250px;
background: #FFFFFF50;
margin: 0px;
border-radius: 0px;
border: 0px #5acb8d50 solid;
overflow: auto;
}
.cp-widgets-col.cp-chatbox {
display: flex;
flex-direction: column;
min-width: 330px;
width: 100%;
}
.cp-widget.cp-chatbox {
height: 100%;
display: flex;
flex-direction: column;
position: relative;
justify-content: flex-end;
}
.cp-cb-prompts {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.chatwrapper.copilotCW {
display: flex;
justify-content: flex-start;
align-items: stretch;
height: 100%;
min-height: auto;
flex-direction: column;
align-content: stretch;
}
.cp-widget.cp-taskmanager {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
min-width: 330px;
max-width: 330px;
margin: 0px;
background: none;
border-radius: 0px;
border: 0px;
border-right: 1px solid #5acb8d50;
position: relative;
}
.cp-tasklist {
padding: 20px;
}
.task-list h3 {
color: #FFF;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1.5px;
font-weight: bold;
}
.create-cp-task {
padding: 10px;
position: sticky;
width: 100%;
margin-bottom: 0px;
bottom: 0px;
}
.create-cp-task button.addTask-Button.btn.btn-primary {
width: 100%;
background: #5acb8d;
padding: 10px;
border: 1px solid #256f46bf;
border-bottom: 3px solid #ff8900;
}
.create-cp-task button.addTask-Button.btn.btn-primary:hover {
background: #ff8900;
transition: background-color .5s;
}
button.addTask-chatButton.btn.btn-primary {
color: #5acb8d;
padding: 0px;
font-size: 15px;
border: none;
font-weight: 500;
float: right;
background: transparent;
}
button.addTask-chatButton.btn.btn-primary:hover {
color: #222222 !important;
background: transparent;
}
#taskForm {
display: flex;
flex-direction: column;
}
form#taskForm input, form#taskForm textarea, form#taskForm select {
background: #ffffff;
border-bottom: 3px solid #a09f9f !important;
padding: 5px;
color: #222222;
margin: 4px 0px;
border: 0px;
}
#confirmAddBtn {
background: #6bca8d;
border: 1px solid #5acb8d;
}
select#priority {
display: none;
}
ul#tasks {
list-style: none;
padding: 0px;
}
li.task-item {
display: flex;
flex-direction: column;
justify-content: space-between;
border-bottom: 2px solid #00000050;
margin-top: 5px;
background: #5d5f6e;
border-radius: 11px;
padding: 0px 15px;
}
.task-item-header {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px 10px 5px;
}
.task-item-category {
font-size: 12px;
text-transform: uppercase;
border-radius: 20px;
color: #a6a2a2;
}
.task-editors-btns .btn {
background: #5acb8d;
color: #222222;
padding: 5px 7px;
font-size: 12px;
}
.task-details {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 5px 10px;
color: #FFFFFF;
}
.task-item-status {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px 0px;
border-top: 1px solid #22222226;
flex-wrap: wrap;
}
.task-in-progress {
background: #5acb8d30;
color: #5acb8d;
padding: 5px 10px;
font-size: 12px;
border-radius: 4px;
margin: 2px;
}
.task-editors-btns {
margin: 2px;
}
span.task-title {
font-weight: 600;
}
div.task-duedate {
text-transform: uppercase;
font-size: 12px;
color: #5acb8d;
letter-spacing: 1px;
}
.task-past-due {
color: #ffa900 !important;
}
.login-wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
background: #FFFFFF;
}
.login-form-wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: scroll;
}
.login-form-wrapper, .login-marketing-wrapper {
min-width: 50%;
}
.login-form-content {
margin: auto;
width: 100%;
padding: 5vh;
}
.login-form {
display: flex;
flex-direction: column;
}
h4.login-h4 {
font-size: 40px;
font-weight: bold;
}
h6.login-h6 {
font-size: 14px;
}
form.login-form-form {
display: flex;
flex-direction: column;
}
.login-form-form input, .login-form-form button, .login-form-form select {
margin: 10px 0px;
padding: 1vw 5%;
border-radius: 3px;
border: 1px solid #CCC;
background-color: rgb(241, 244, 246);
}
button.btn.btn-primary.btn-rooftops-login {
background: #222;
border: none;
}
.or-login-section {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
margin: 15px 0px;
}
.login-divider {
height: 1px;
background: #CCC;
width: 100%;
}
.login-divider-text {
min-width: 30%;
margin: 0px 10px;
text-align: center;
font-size: 16px;
color: #CCC;
}
.tos-consent {
font-size: 12px;
}
.social-login {
width: 100%;
}
.google-login button {
width: 100%;
padding: 15px;
background: #FFF;
border-radius: 5px;
}
.google-login button {
width: 100%;
padding: 15px;
background: #FFF;
border-radius: 5px;
}
.google-login button i.fa.fa-google {
color: #005eff;
}
.login-marketing-wrapper {
background: #222;
}
.login-email-input {
background-image: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64e9150f53771ac56ef52a56_Snail_Icon.svg);
background-position: 95% 50%;
background-size: auto;
background-repeat: no-repeat;
}
input.login-password-input {
background-image: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64e9150f53771ac56ef52a55_Unlock_Icon.svg);
background-position: 95% 50%;
background-size: auto;
background-repeat: no-repeat;
}
.login-industry-input {
background-image: url();
background-position: 95% 50%;
background-size: auto;
background-repeat: no-repeat;
}
.login-marketing-wrapper {
background: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64e9150f53771ac56ef529f3_5NJHUpmzD20-unsplash.jpg);
background-color: #00000098;
background-repeat: no-repeat;
background-size: cover;
}
.card.ai-feature.coming-soon {
opacity: 1;
border: 2px dashed #dadada;
color: #FFF;
background: #FFFFFF14;
}
.card.ai-feature.csoon {
background: #ffffffc9;
border-right: 4px solid #ffffff9e;
}
.signup-form-full {
display: flex;
flex-direction: column;
}
.signup-form-half {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: nowrap;
justify-content: space-around;
}
.signup-form-half input, .signup-form-full select {
width: 100%;
}
.login-company-input {
background-image: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64ea0ffc7cdf72d1a1e8a779_building-solid.png);
background-position: 95% 50%;
background-size: auto;
background-repeat: no-repeat;
}
.login-name-input {
background-image: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64ea0ffc170332f86954fcde_user-solid.png);
background-position: 95% 50%;
background-size: auto;
background-repeat: no-repeat;
}
.login-zip-input {
background-image: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64ea0ffc587c6d32b60edfef_location-arrow-solid.png);
background-position: 95% 50%;
background-size: auto;
background-repeat: no-repeat;
}
.login-phone-input {
background-image: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64f4a5bdd23cc7943979be72_phone-solid.png);
background-position: 95% 50%;
background-size: auto;
background-repeat: no-repeat;
}
div#details {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.tab-pane label {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0px;
}
.myaccount-fields input, .myaccount-fields select {
margin: 0px 0px 15px 0px;
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #CCC;
background-color: #FFF;
font-size: 20px;
}
.myaccountdetails-wrapper {
padding-bottom: 80px;
}
.tab-content.myaccount-fields {
color: #FFFFFF;
}
#updateInfoForm button.btn.btn-primary, .teammanage-btn {
padding: 10px;
background: #5bca8d;
}
div#dailyForecast {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1rem;
overflow-y: scroll;
}
#dailyForecast::-webkit-scrollbar {
display: none;
}
.daily-forecast {
display: flex;
flex-direction: column;
align-items: center;
background: #FFF;
padding: 10px;
border-radius: 5px;
border: 1px solid #CCCCCC50;
border-bottom: 3px solid #5acb8d;
box-shadow: 2px 2px 10px #00000030;
min-width: 120px;
margin: 0px 5px;
flex: auto;
}
.daily-forecast h5, .daily-forecast h6 {
font-size: 15px;
}
.weatherWidget h5.card-title {
margin-bottom: 0px;
display: flex;
flex-direction: row;
}
.map-buttons-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
margin-bottom: 20px;
background: #ffffff;
padding: 10px;
border-radius: 15px;
justify-content: space-between;
}
.header-map-buttons-wrap {
width: -webkit-fill-available;
margin: 0px -15px;
padding: 0px 10px 10px 10px;
background: #383a45;
}
.header-map-search-container {
min-width: 50%;
width: -webkit-fill-available;
background: #ffffff;
border-radius: 15px;
display: flex;
position: relative;
}
.map-search-container {
min-width: 50%;
width: -webkit-fill-available;
}
.header-map-search-container #mapSearchInputDesktop, .header-map-search-container #mapSearchInputMobile {
background: transparent;
}
#mapSearchInputDesktop, #mapSearchInputMobile {
height: 50px;
width: 100%;
border-radius: 2px;
background: #383a45;
font-size: 16px;
border: 0px;
padding-left: 10px;
top: 10px !important;
}
#mapSearchInputDesktop:focus-visible, #mapSearchInputMobile:focus-visible {
outline: 0;
}
.custom-zoom-control {
bottom: 23px !important;
top: unset !important;
left: 1rem !important;
width: fit-content !important;
background: transparent !important;
border: none;
position: absolute;
height: min-content;
}
.zoom-in-button, .zoom-out-button {
cursor: pointer;
background-color: #5bca8d;
border: 0;
border-radius: 100px;
width: fit-content;
color: #FFF;
font-size: 15px;
font-family: Montserrat, Arial, sans-serif;
white-space: nowrap;
margin-right: 5px;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 5px;
justify-content: space-between;
}
.zoom-in-button:hover, .zoom-out-button:hover {
background-color: #47b478;
color: #FFF;
}
a.zoom-in-button {
padding: 10px;
text-decoration: none;
}
.explore-map-searchbar-buttons {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 20px;
padding-top: 10px;
}
.map-searchbar-buttons {
display: flex;
flex-wrap: nowrap;
gap: 10px;
}
.searchbarBtn {
cursor: pointer;
background-color: #5acb8d;
border: 0;
border-radius: 100px;
width: fit-content;
color: #FFF;
font-size: 15px;
font-family: Montserrat, Arial, sans-serif;
white-space: nowrap;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 5px;
justify-content: space-between;
text-decoration: none;
}
.searchbarBtn:hover {
text-decoration: none;
transition: .3s all;
}
div#rooftops-map-report {
margin-top: 20px;
border-radius: 15px;
background: #FFFFFF;
}
.myaccountdetails-wrapper ul.nav.nav-tabs {
border-bottom: 1px solid #5acb8d;
}
.rt-nav-link {
border-radius: 0px !important;
border-top: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
border-bottom: 0px !important;
background-color: transparent !important;
color: #FFFFFF !important;
}
.rt-nav-link.active {
border-bottom: 4px solid #5acb8d !important;
}
.nav-tabs .nav-link:hover {
border-bottom: 4px solid #5acb8d !important;
border: 0px;
color: #222;
}
ul#oldestTask {
padding-inline-start: 0px;
margin-top: 12px;
}
.dashboard-card .d-flex.flex-nowrap.horizontal-scrolling {
margin-right: -20px;
}
.horizontal-scrolling {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.horizontal-scrolling::-webkit-scrollbar {
display: none;
}
.card.ai-feature {
min-width: 225px;
height: auto;
margin-right: 15px;
border-right: 4px solid #dfdfdf;
}
.card.ai-feature:hover {
border-right: 4px solid #5acb8d;
transition: 0s;
}
.card-title i {
color: #5acb8d;
}
i.fa.fa-calendar.float-right {
margin-top: -30px;
font-size: 32px;
color: #5acb8d55;
}
h6.card-title {
width: 80%;
font-weight: bold;
font-size: 17px;
}
#oldestTask li.task-item, #oldestTask li {
display: flex;
flex-direction: column;
justify-content: space-between;
border-bottom: 2px solid #00000050;
margin-top: 5px;
background: #ffffff;
border-radius: 4px;
padding: 0px 10px;
}
#oldestTask .task-details {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 5px 10px;
color: #000000;
}
.cb-icons-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
}
.cb-icons-wrapper i.fa.float-left {
background: #5acb8d30;
border-radius: 100px;
padding: 8px;
color: #5acb8d;
font-size: 18px;
}
#oldestTask .task-item-category {
color: #007bff;
}
#oldestTask .task-duedate {
text-transform: uppercase;
font-size: 12px;
color: #007bff;
letter-spacing: 1px;
}
li.no-tasks-message {
list-style: none;
font-size: 32px;
color: #22222270;
}
a.pill {
background: #FFFFFF;
padding: 10px 20px;
border-radius: 50px;
color: #222222;
font-weight: bold;
text-decoration: none;
text-wrap: nowrap;
}
a.pill.active {
background: #5acb8d;
padding: 10px 20px;
border-radius: 50px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.features-pill {
margin: 10px;
}
.features-nav-pills {
display: flex;
flex-direction: row;
}
.features-nav-wrapper {
padding: 10px;
}
.mainAIbuilder {
padding: 15px;
}
.AImodules {
display: flex;
flex-direction: row;
}
.promptBuilder {
flex: 0 0 auto;
display: flex;
flex-direction: column;
background: #EEF0FF;
padding: 20px;
border-radius: 5px;
margin-right: 10px;
height: fit-content;
min-height: 100vh;
}
.aiPreview {
display: flex;
align-items: flex-start;
flex-direction: column;
background: #eef0ff;
border-radius: 5px;
padding: 15px;
padding-bottom: 80px;
flex: 1 1 auto;
}
.aiTextEditor .ql-toolbar.ql-snow {
background: tan;
border-radius: 20px;
margin-bottom: 20px;
}
.social-magic-wrapper {
margin: auto;
}
.AIresults {
background: #EEF0FF;
padding: 28px 20px 20px 20px;
border-radius: 5px;
}
.aiTextEditor {
background: transparent;
min-height: 80%;
}
.aiTextEditor .ql-toolbar.ql-snow {
background: tan;
border-radius: 20px;
margin-bottom: 20px;
z-index: 999;
position: relative;
}
.aiTextEditor #editor {
background: #ffffffab;
border: 1px solid tan;
height: 100%;
border-radius: 20px;
padding: 10px;
}
form#userInputForm.promptBuilderForm {
display: flex;
flex-direction: column;
}
.promptBuilder .promptBtitle {
display: flex;
align-items: center;
flex-direction: row;
}
.AIresults .promptBtitle {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.AIresults .promptBtitle h1, .AIresults .promptBtitle i, .aiPreview .promptBtitle h1, .aiPreview .promptBtitle i {
font-size: 23px;
font-weight: bold;
margin-right: 20px;
margin-bottom: 0px;
}
.promptBtitle h1, .promptBtitle i {
font-size: 23px;
font-weight: bold;
margin-right: 20px;
margin-bottom: 0px;
}
.AIresults .promptBtitle h1 {
font-size: 23px;
font-weight: bold;
margin-right: 0px;
margin-bottom: 0px;
}
.promptBtitle i {
background: #5acb8d25;
padding: 10px;
border-radius: 5px;
color: #5acb8d;
}
div#editor {
max-height: 100%;
}
#editor #chatbox {
max-height: 500px;
overflow: scroll;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.facebook {
width: fit-content;
max-width: 333px;
background: #EEEEEE;
border: 1px #DDDDDD solid;
border-radius: 25px;
margin: 15px;
box-shadow: 0px 1px 10px 6px #22222220;
padding: 6px;
margin: auto;
}
.facebook-wrapper {
border-radius: 20px;
display: flex;
flex-direction: column;
}
.facebook-search-wrapper {
background: #4765ae;
color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
padding: 10px;
align-items: center;
border-radius: 20px 20px 0px 0px;
}
.facebook-search-searchbar {
min-width: 80%;
background: #365189;
margin: 5px 10px;
border-radius: 50px;
text-align: center;
font-size: 16px;
color: #FFFFFF90;
}
.facebook-profile-wrapper {
background: #fffFFF;
padding: 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.facebook-profile-left {
display: flex;
flex-direction: row;
}
.facebook-profile-left i.fa-brands {
font-size: 48px;
color: #365189;
}
.facebook-profile-name {
display: flex;
flex-direction: column;
margin-left: 10px;
}
.facebook-profile-name .fbname {
color: #000000;
font-weight: 400;
}
.facebook-profile-name span.fbtime {
font-size: 12px;
color: #c6c6c6;
}
#editor1 {
background: #FFF;
padding: 0px 15px;
font-family: Helvetica, sans-serif;
font-size: .9375rem;
line-height: 1.25;
text-overflow: ellipsis;
padding-bottom: 15px;
}
#editor1 .spinner-border {
margin-bottom: 5px;
color: #5acc8d;
}
.previewBtnsWrapper {
display: flex;
justify-content: center;
}
.previewBtnsWrapper button:focus {
background: #5acb8d;
color: #FFF;
}
.facebook-post-image {
position: relative;
}
.facebook-post-image img {
min-width: 300px;
width: 100%;
height: 200px;
min-height: 200px;
background: #CCC;
}
a.unsplashBtn:hover {
background: linear-gradient(45deg, #008fffb3, #2cd37ab3);
text-decoration: none;
transition: .5s all;
}
a.unsplashBtn {
position: absolute;
width: 100%;
height: 100%;
background: #22222260;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-weight: bold;
transition: .5s all;
}
.facebook-likes-bar {
padding: 10px 5px;
border-bottom: 2px solid #CCC;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #FFFFFF;
}
.facebook-likes-left {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
.facebook-likes-left img {
max-height: 25px;
min-height: 25px;
width: auto;
}
.facebook-likes-left span {
font-size: 13px;
margin-left: 10px;
color: #000000;
font-family: Arial;
}
.facebook-likes-right {
min-height: 25px;
}
.facebook-likes-right span {
font-size: 13px;
margin-left: 10px;
color: #000000;
font-family: Arial;
}
.facebook-share-bar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
padding: 15px;
background: #FFFFFF;
border-radius: 0px 0px 20px 20px;
}
.facebook-like {
display: flex;
flex-direction: row;
align-items: center;
}
.facebook-like i {
font-size: 27px;
color: #e4e3e3;
}
.facebook-like span {
font-size: 13px;
margin-left: 10px;
color: #000000;
font-family: Arial;
}
form#userInputForm label {
font-weight: 700;
font-size: 14px;
margin-top: 10px;
margin-bottom: 5px;
}
form#userInputForm select, form#userInputForm input, form#userInputForm textarea {
background: #f9f9f9;
border-radius: 10px;
padding: 10px;
border: none;
margin: 5px 0px;
}
.promptBuilderForm button#sendBtn, .promptBuilderForm .sendBtn {
background: #5acb8d;
margin-top: 10px;
color: #FFFFFF;
padding: 10px;
border-radius: 10px;
border: none;
text-align: center;
}
.promptBuilderForm button#sendBtn:hover, .promptBuilderForm .sendBtn:hover {
background: #47a170;
text-decoration: none;
}
.AIresults .promptBtitle i {
display: none;
}
.pageTitleLogo {
display: none;
}
.login-form img {
max-width: 200px;
}
.dashboardMap #map {
min-height: 350px;
height: 100%;
border-radius: 15px;
}
.card.dashboard-card.welcome-db-card {
background: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/6501dda6b3f6304ad45d58ce_roofers-green-background.png);
background-position: bottom right;
background-size: 50%;
background-repeat: no-repeat;
background-color: #FFF;
}
.card.dashboard-card.welcome-db-card p {
color: #222;
}
h2.helloH2 {
font-weight: 600;
color: #222;
}
span#zip-error {
padding: 5px;
border-radius: 5px;
text-align: center;
font-size: 10px;
}
.mobile-zip-status {
display: none;
}
div#city-map-wrapper {
height: auto;
padding: 0px 15px;
}
.aiPreview .promptBtitle, .AIresults .promptBtitle {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
align-items: center;
align-content: center;
margin-bottom: 20px;
}
.aiPreview .promptBtitle, .AIresults .promptBtitle {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
align-items: center;
align-content: center;
margin-bottom: 20px;
}
.promptBuilder .promptBtitle {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 20px;
}
#upsellModal .modal-dialog {
max-width: 75% !important;
}
#upsellModal .modal-content {
display: flex;
width: 100%;
pointer-events: auto;
background-color: #fffffff0;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 0.3rem;
outline: 0;
flex-direction: row;
overflow: hidden;
}
div#upsellModal .modal-body {
display: flex;
flex-direction: row;
padding: 0px;
width: 100%;
overflow: hidden;
}
#subscriptionModal {
backdrop-filter: blur(6px);
}
#subscriptionModal .modal-dialog {
max-width: 75% !important;
}
#subscriptionModal .modal-content {
display: flex;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: none;
border-radius: 25px;
outline: 0;
flex-direction: row;
overflow: hidden;
}
div#subscriptionModal .modal-body {
display: flex;
flex-direction: row;
padding: 0px;
width: 100%;
overflow: hidden;
}
.subscribe-modal-left {
max-width: 50%;
padding: 100px 50px;
}
.subscribe-modal-left.register-modal {
max-width: 50%;
padding: 50px 50px;
}
.subscribe-modal-right {
background: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/655e568b0ee38585e50afcba_rooftops_upgrade-to-9pro-master.png);
height: 100%;
width: 100%;
max-width: 50%;
background-color: #FFFFFF;
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
}
.subscribe-modal-right-personalize {
background: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64e9150f53771ac56ef529f3_5NJHUpmzD20-unsplash.jpg);
height: 100%;
width: 100%;
max-width: 50%;
background-color: #FFFFFF;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.subscribe-modal-left .btn.btn-primary.invert {
width: 100%;
margin-bottom: 10px;
}
.subscribe-modal-left .btn.btn-light {
width: 100%;
color: #acacac;
}
ul.features-modal-list {
list-style: none;
padding-left: 0;
}
.subscribe-modal-left h6 {
font-size: 14px;
width: fit-content;
padding: 5px 10px;
border-radius: 100px;
color: #FFFFFF;
background: rgb(0,126,115);
background: linear-gradient(119deg, rgba(0,126,115,1) 28%, rgba(91,202,141,1) 100%);
}
.subscribe-modal-left h6.register-h6 {
font-size: 14px;
width: fit-content;
color: #7f7f7f;
background: transparent;
padding: 0px;
}
.subscribe-modal-left h1 {
font-weight: bold;
font-size: 32px;
}
.docsWrapper {
display: flex;
flex-wrap: wrap;
}
.docsWrapper .card {
margin: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.doc-meta-data {
display: flex;
justify-content: space-between;
font-size: 11px;
padding: 10px 0px;
}
.doc-type {
background: #03bfff;
color: #FFFFFF;
padding: 3px 7px;
border-radius: 50px;
text-transform: uppercase;
}
.doc-date {
background: #222222;
color: #FFFFFF;
padding: 3px 7px;
border-radius: 50px;
text-transform: uppercase;
}
.doc-cta {
margin-bottom: 10px;
}
.doc-cta a {
background: transparent;
color: #222;
font-weight: bold;
font-size: 12px;
}
.doc-content-bottom {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.live-wrapper {
text-transform: uppercase;
font-size: 10px;
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 14px;
width: fit-content;
border-radius: 50px;
background: #f2abaa;
}
.live-wrapper i {
font-size: 10px;
color: #ff0000;
}
.live-wrapper span {
margin-left: 4px;
}
.weatherWidget .live-wrapper {
margin-right: 10px;
}
.dynamicWeather {
display: flex;
flex-direction: row;
}
.currentWeather.daily-forecast {
margin-bottom: 1rem;
background: #4e5660;
color: #FFFFFF;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: flex-start;
}
.currentWeather.daily-forecast h2 {
font-size: 18px;
text-align: center;
}
.db-map-header .card-title {
margin-bottom: 0;
}
.db-map-header {
padding: 0px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
}
.dashboardMap .db-map-header {
padding: 10px 15px;
}
.creatorFeatures {
padding: 15px;
display: flex;
flex-direction: column;
}
.creator-features-row {
display: flex;
flex-direction: column;
}
.creator-features-cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: -15px;
}
.creatorFeatures .card.ai-feature {
width: 20%;
min-width: 200px;
height: auto;
min-height: 200px;
margin-right: 15px;
margin-bottom: 20px;
border-right: 4px solid #fff;
}
.creatorFeatures .card.ai-feature:hover {
border-right: 4px solid #5acb8d;
transition: 0s;
}
.creator-features-row h2 {
font-size: 18px;
font-weight: bold;
color: #FFF;
margin-bottom: 20px;
}
div#saveStatus.panel-success {
text-align: center;
padding: 8px;
color: #5bca8d;
}
.popular .card.ai-feature {
padding: 3px;
background: linear-gradient(45deg, #15ffd3, #0032d9);
border: 0px;
transition: 1s all;
width: 40.7%;
}
.popular .card.ai-feature:hover {
padding: 3px;
background: linear-gradient(45deg, #0032d9, #15ffd3);
border: 0px;
border-right: none;
}
.popular .card-body {
background: rgb(33,41,51);
background: linear-gradient(148deg, rgba(33,41,51,1) 51%, rgba(66,77,88,1) 100%);
padding: 14px;
border-radius: 3px;
color: #FFFFFF;
}
.popular .card-body:hover {
background: linear-gradient(83deg, rgba(33,41,51,1) 51%, rgba(66,77,88,1) 100%);
}
.btn-primaryInvert {
border: 1px solid #5bca8d;
color: #ffffff;
}
.myinfo-group {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
/* Chatbot Preview Section */
#chatbot-preview-section {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
#chatbot-preview-container {
width: 300px;
height: 500px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input#chatbot_header_bg_color {
height: 40px;
padding: 0px;
margin: 0px;
width: 100%;
background: transparent;
border: none;
}
.chatbotconfig-wrapper {
padding: 20px;
padding-bottom: 80px;
color: #FFFFFF;
display: flex;
}
.chatbot-config input, .chatbot-config textarea, .chatbot-config select {
width: 100%;
border: none;
}
.chatbot-config label {
font-weight: bold;
}
.chatbot-config .btn.btn-primary {
background: transparent;
border: 1px solid #5acb8d;
}
button.btn.btn-primary.mt-2.copy-btn i{
display: none;
}
button.btn.btn-primary.mt-2.copy-btn:active i, button.btn.btn-primary.mt-2.copy-btn:focus i {
display: inline-block;
}
span.field-counter {
color: #222;
font-size: 12px;
}
.input-rooftops i {
font-size: 26px;
color: #5acb8d;
}
.input-rooftops {
display: flex;
align-content: center;
align-items: center;
margin: 0px 0px 15px 0px;
padding: 15px 15px;
border-radius: 3px;
border: 1px solid #CCC;
background-color: #FFF;
font-size: 20px;
}
.form-group.logo-capture {
background: #2222224d;
padding: 10px;
border-radius: 5px;
}
h2.get-script {
margin-top: 40px;
}
.cb-example-col {
display: flex;
flex-direction: column;
align-content: center;
align-items: flex-start;
}
.cb-example-col img {
margin: 0px auto;
width: 100%;
}
.btn-back {
width: fit-content;
margin-bottom: 10px;
font-size: 14px;
text-decoration: none;
color: #22222273;
background: #2222220d;
}
.hidden-desktop {
display: none;
}
.price-tag {
background: #e2f6e9;
color: #5bca8d;
border-radius: 50px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 2px 10px;
width: fit-content;
}
.price-tag-free {
background: #202123;
color: #5bca8d;
border-radius: 50px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 2px 10px;
width: fit-content;
}
.toggle-pill {
display: flex;
align-items: center;
cursor: pointer;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
color: #FFF;
}
.toggle-pill input {
display: none;
}
.toggle-pill label {
padding: 15px 30px;
background-color: #5bca8d;
border-radius: 50px;
position: relative;
transition: background-color 0.3s;
margin: 0px 10px;
}
.toggle-pill input:checked + label {
background-color: #5bca8d;
color: #fff;
}
.toggle-pill label::after {
content: '';
position: absolute;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #ffffff;
border-radius: 50%;
transition: left 0.3s;
}
.toggle-pill input:checked + label::after {
left: 25%;
}
span.discount-pill.annually {
background: #5acb8d;
font-size: 14px;
color: #FFFFFF;
padding: 5px;
margin-left: 10px;
border-radius: 50px;
text-transform: uppercase;
}
.pricing-card p.card-text {
font-size: 36px;
font-weight: 600;
border-bottom: 1px solid #ebebeb;
}
.pricing-card .card-text small {
font-size: 16px;
}
.pricing-card-row .card.rounded {
height: 100%;
}
.pricing-card i {
color: #5bca8d;
}
.feature-subtext, .plan-description {
font-size: 12px;
color: #929191;
}
.current-plan-pill {
position: absolute;
right: 10px;
top: 10px;
background: #CCCCCC;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
color: #676767;
}
.current-plan-pill:hover {
text-decoration: none;
color: #222222;
background: #BBBBBB;
}
.upgrade-plan-pill {
position: absolute;
right: 10px;
top: 10px;
background: #5bca8d;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
color: #2b8654;
}
.upgrade-plan-pill {
position: absolute;
right: 10px;
top: 10px;
background: #5bca8d;
padding: 10px 20px 7px;
border-radius: 5px;
font-size: 14px;
color: #003116;
border: none;
border-bottom: 3px solid #5bca8d;
}
.upgrade-plan-pill:hover {
border-bottom: 3px solid #003116;
background: #8cffc0;
text-decoration: none;
}
.row.pricing-card-row {
margin-top: 15px !important;
}
.dashboard-features .container.my-5 {
margin-top: 15px !important;
}
.pricing-card ul {
padding: 0px 15px;
font-size: 16px;
}
li.not-included, li.not-included I {
color: #CCCCCC;
}
.unsplash-social {
display: flex;
justify-items: start;
flex-direction: column;
height: auto;
background: #eef0ff;
border-radius: 5px;
padding: 20px;
}
#imageContainer {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: scroll;
align-items: flex-end;
max-height: 300px;
min-height: 300px;
overflow-y: hidden;
}
#imageContainer img {
width: auto;
height: 100%;
margin: 10px;
}
.image-box {
position: relative;
}
.image-box .unsplash-credits {
position: absolute;
bottom: 0px;
left: 0px;
color: #FFFFFF;
background: #2222225e;
padding: 10px;
margin-left: 10px;
}
.image-box p a {
color: #FFFFFF;
}
.unsplash.promptBtitle {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.image-box.see-more-card {
min-width: 300px;
margin-bottom: 10px;
border: 1px dashed #22222250;
}
.image-box.see-more-card a {
height: 100%;
display: block;
}
.canvas-magicWrapper {
display: flex;
flex-direction: column;
}
.canvas-magicWrapper .mainAIbuilder {
padding: 0px;
}
.canvas-magicWrapper .promptBuilder {
background: #EEF0FF;
padding: 20px;
margin-right: 0px;
border-radius: 0px;
height: auto;
}
div#landingpage-canvas {
margin: 0px;
background: #FFF;
}
.lander-hero {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
height: 300px;
}
.lander-navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 15px;
width: 100%;
}
.lander-logo-wrapper .lander-logo {
max-width: 200px;
filter: grayscale(.4);
opacity: .5;
}
.lander-nav-link {
font-size: 15px;
color: #444444;
margin-right: 15px;
}
.lander-nav-right .btn-primary {
background: #5bca8d;
border: none;
}
.landingHeadline {
text-align: center;
max-width: 75%;
display: flex;
flex-direction: column;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
#HeadlineEditor h1 {
font-size: 38px;
font-weight: bolder;
}
.landingHeadline .btn.btn-light.grey {
width: 160px;
background: #222222;
color: #FFFFFF;
font-size: 19px;
}
.lander-body {
display: flex;
flex-direction: column;
}
.lander-section.left-right {
display: flex;
flex-direction: row;
align-items: flex-start;
align-content: flex-start;
padding: 25px 0px;
}
.lander-section-left {
width: 50%;
}
.lander-feature-image {
width: 100%;
}
.lander-section-right {
width: 50%;
padding: 25px 10px;
}
.lander-feature-headline {
font-size: 27px;
font-weight: bold;
color: #333333;
}
.lander-feature-description {
font-size: 16px;
color: #555555;
}
.btn.btn-light.grey {
width: 137px;
background: #64647b;
color: #FFFFFF;
font-size: 14px;
}
.lander-section.right-left {
display: flex;
flex-direction: row;
align-items: flex-start;
align-content: flex-start;
flex-direction: row-reverse;
background: #f3f3f3;
padding: 25px 25px;
margin: 0px -15px;
}
.lander-section.competitive-advantage {
padding: 50px 0px;
display: flex;
flex-direction: column;
align-items: center;
}
.landerCAicon {
background: #DDDDDD;
padding: 20px;
border-radius: 100px;
color: #FFFFFF;
font-size: 32px;
}
#competitiveadvantage {
font-weight: 600;
text-align: center;
font-size: 32px;
margin-top: 15px;
max-width: 80%;
}
.lander-footer {
margin: 0px -15px;
background: #222222;
display: flex;
flex-direction: column;
align-content: center;
}
.lander-footer-copy {
text-align: center;
color: #FFFFFF;
padding: 15px;
font-weight: bold;
}
.clipsWrapper {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.clipsWrapper #videoUploadForm {
display: flex;
flex-direction: column;
align-content: center;
align-items: stretch;
width: 80%;
padding: 50px;
}
.clipsWrapper input#video_file {
width: 100%;
text-align: center;
background: #FFFFFF;
padding: 15px;
border-radius: 15px;
border: 1px solid #EEEEEE;
margin-bottom: 10px;
}
.clipsWrapper input#video_url {
padding: 15px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
border-radius: 15px;
margin-bottom: 10px;
}
.clipsWrapper #uploadBtn {
padding: 15px;
background: #222222;
color: #FFFFFF;
border-radius: 15px;
}
div#clipResults {
width: 100%;
padding-top: 40px;
border-top: 1px solid #d8d8d8;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
video.generated-clip {
border-radius: 10px;
margin-right: 10px;
width: 200px !important;
height: auto !important;
}
.progressClips {
height: 20px;
}
.progress-barClips {
background-color: blue;
}
#dashboard-wrapper {
display: flex;
flex-direction: row;
}
.dashboard-content, .dashboard-task-pane {
margin: 0px;
padding: 0px;
flex: auto;
}
.dashboard-task-pane {
background: #383a45;
margin-top: -2px;
z-index: 999999;
}
.dashboard-task-pane .card-body {
padding: 0px 15px;
}
.dashboard-task-pane .card-title {
color: #FFFFFF;
font-size: 15px;
}
#additionalFields {
display: flex;
flex-direction: column;
}
ul#newItems, ul#completedItems {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0px 15px;
}
#newItems .item-card, #completedItems .item-card {
width: 22%;
background: #FFFFFF;
padding: 10px;
border-radius: 5px;
margin: 5px 0px;
box-shadow: 0px 0px 2px #22222259;
}
.item-card h4 {
font-size: 18px;
font-weight: bold;
color: #494949;
}
button.btnMarkCompleted {
background: #5bca8d;
border-radius: 3px;
padding: 5px;
color: #FFFFFF;
font-size: 12px;
border: 0px;
}
.card-task-details {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: bold;
}
.task-manager-header {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
h4.task-header, h4.completed-task-header {
margin: 0;
font-size: 22px;
font-weight: bold;
color: #FFFFFF;
}
h4.completed-task-header {
padding: 15px;
border-top: 2px solid #383a45;
}
#completedItems .item-card {
background: #a3a3a38f;
}
#completedItems .btnMarkCompleted {
display: none;
}
.past-date {
color: #e56262; /* Color for past dates */
}
.future-date {
color: #5bca8d; /* Color for future dates */
}
.call-request {
color: black; /* Color for Call Request category */
}
.other-category {
color: black; /* Color for other categories */
}
.other-category i.fa-phone {
display: none;
}
.call-request i.fa-sparkle {
display: none;
}
#completedItems .task-category, #completedItems .task-due-date {
color: #4e4d4d !important;
}
#completedItems .task-active-stat {
display: none;
}
#newItems .task-complete-stat {
display: none;
}
.task-active-stat {
background: #5acb8d30;
text-align: center;
padding: 5px;
border-radius: 3px;
font-weight: 400;
font-size: 12px;
color: #5acb8d;
}
.task-complete-stat {
background: #5acb8d30;
text-align: center;
padding: 5px;
border-radius: 3px;
font-weight: 400;
font-size: 12px;
color: #5acb8d;
}
.DBtask-list ul#newItems {
display: flex;
flex-direction: column;
padding: 0px;
}
.DBtask-list #newItems .item-card {
width: 100%;
background: #FFFFFF;
padding: 10px;
border-radius: 5px;
margin: 5px 0px;
box-shadow: 0px 0px 2px #22222259;
}
.DBtask-wrapper {
width: 100%;
}
#transcript-drawer {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100%;
background-color: #ffffff;
overflow-y: auto;
transition: right 0.3s;
padding: 20px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
}
#transcript-drawer.show {
right: 0;
}
.drawer-header {
padding: 16px;
background-color: #f1f1f1;
}
.drawer-content {
padding: 16px;
}
.close-drawer-btn {
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: #333;
opacity: 0.3;
position: absolute;
right: 10px;
top: 10px;
}
.close-drawer-btn:hover {
opacity: 1;
}
div#sessionTranscripts {
padding: 15px;
color: #FFFFFF;
}
div#sessionTranscripts table {
color: #FFFFFF;
}
.chat-metrics {
display: flex;
flex-direction: row;
margin-top: 10px;
}
.card.metric-card {
width: 33%;
margin: 5px;
}
.card.metric-card .card-body {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
padding: 10px 15px;
justify-content: center;
}
.chat-metrics .card-title {
font-size: 12px;
color: #222222;
}
.metric-card .card-text {
font-size: 46px;
line-height: initial;
font-weight: bolder;
color: #5acb8d;
}
.chat-config-nav .nav-link.active {
background: transparent !important;
border-bottom: 4px solid #5acb8d;
border-top: 0px;
border-left: 0px;
border-right: 0px;
color: #FFFFFF;
}
.chat-config-nav a {
color: #FFFFFF;
}
#task-loading-spinner {
display: none;
}
.refreshing-status {
background: #22222280;
color: #5bca8d;
padding: 10px;
border-radius: 5px;
margin: 10px;
}
.page-description {
color: #FFFFFF;
}
.no-data-overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
color: #FFFFFF;
z-index: 1;
border-radius: 3px 0px 0px 3px;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background: #000000ab;
padding: 5px 5px 15px 5px;
border-radius: 10px;
}
#lottie-animation {
max-width: 150px;
}
.DocDrawer {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100%;
background: #fff;
overflow-y: auto;
transition: right 0.3s;
}
.DocDrawer.show {
right: 0;
}
.DocDrawer .drawer-header {
padding: 15px;
background: #f1f1f1;
display: flex;
justify-content: space-between;
align-items: center;
}
.DocDrawer .drawer-content {
padding: 15px;
}
.DocDrawer .closeDrawer {
cursor: pointer;
border: 1px solid #222222;
border-radius: 5px;
background: #222222;
color: #FFFFFF;
margin-left: 5px;
}
#city-map-wrapper .info-panel {
position: relative;
background: white;
padding: 20px;
border-radius: 6px;
border: 1px solid #f6f6f6;
width: 100%;
z-index: 5;
margin: 10px 0px;
box-shadow: 0px 1px 4px 1px #22222208;
}
#city-map-wrapper .info-panel-beta {
position: relative;
background: #383a44;
padding: 20px;
border-radius: 6px;
border: 1px solid #383a44;
width: 100%;
z-index: 5;
margin: 10px 0px;
box-shadow: 0px 1px 4px 1px #22222208;
}
.mapaddress-wrapper {
margin: 10px 0px;
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
}
.mapaddress-wrapper h2 {
font-size: 24px;
font-weight: 700;
display: flex;
align-content: center;
align-items: center;
justify-content: flex-start;
color: #3e3e3e;
}
.mapaddress-wrapper h2 i {
font-size: 28px;
margin-right: 10px;
color: #5fdcc2;
}
.location-details-wrapper {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.location-details-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
}
.location-details-section h3 {
font-size: 16px;
font-weight: 800;
color: #212529;
}
.location-details-section ul {
list-style: none;
padding-inline-start: 0px;
margin-bottom: 0px;
}
.location-details-section ul i {
color: #5fdcc2;
}
.mapmetric-ul li {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.mapmetric-left {
white-space: nowrap;
}
.mapmetric-right {
margin-left: 20px;
white-space: nowrap;
}
.google-solar-img {
width: 150px;
height: 40px;
padding: 4px;
margin-top: -10px;
}
small.explain-link {
white-space: nowrap;
}
small.explain-link a {
text-decoration: none;
opacity: .7;
color: #969696;
}
#subscriptions .btn-light {
color: #7b7b7b;
background-color: #d3d3d3;
width: 100%;
padding: 10px;
}
.OpenAIstatusLink {
color: #5fdcc2;
text-decoration: none;
}
.beta-warning-icon {
font-size:32px;
color: #e12d2d87;
}
.beta-heading {
font-size: 26px;
font-weight: bold;
color: #a3a4a3;
margin-left: 10px;
}
.admin-widget-row {
width: 100%;
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.admin-widget {
background: #FFFFFF;
padding: 15px 20px;
border-radius: 7px;
border-top: 8px solid #5bca8d;
text-align: center;
flex: auto;
}
.admin-widget h3 {
font-weight: bold;
font-size: 16px;
}
.admin-widget h2 {
font-size: 42px;
}
.input-rooftops.ci-wrapper {
position: relative;
}
span#customInstructionsCounter {
position: absolute;
right: 25px;
bottom: 5px;
}
.taskmanager-task-wrapper .item-card {
margin-right: 10px !important;
}
.see-more-btn-mobile {
display: none;
}
.try-creator-studio-bar {
margin: 5px;
border-radius: 20px;
background: rgb(5,218,124);
background: linear-gradient(280deg, rgba(5,218,124,0.8) 28%, rgba(0,179,255,0.8) 100%);
}
.try-creator-studio-bar a {
text-decoration: none;
}
.try-creator-studio-content {
padding: 20px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 1px 1px #00000030;
font-size: 18px;
text-decoration: none;
}
div#uploaded-image {
display: flex;
flex-direction: row;
background: #5d5f6e;
padding: 0px 5px;
}
.uploadimage-thumbnail {
position: relative;
display: inline-block;
}
.delete-image-btn {
position: absolute;
top: -5px;
right: 0;
background: black;
color: white;
border: none;
border-radius: 100%;
cursor: pointer;
padding: 2px 8px;
display: none;
}
.uploadimage-thumbnail:hover .delete-image-btn {
display: inline;
}
.uploadimage-thumbnail img {
max-height: 60px;
width: auto;
margin-right: 5px;
}
.img-waiting-spinner-border {
display: none; /* Hidden by default */
width: 3rem;
height: 3rem;
border-width: 0.2rem;
}
button#imageUploadBtn {
font-size: 26px;
color: #FFFFFF;
}
.form-control:focus {
border-color: transparent !important;
box-shadow: none !important;
}
.message.user .uploaded-image img {
max-width: 250px;
height: auto;
margin-bottom: 10px;
}
.map-right-sidebar {
position: fixed;
top: 0;
right: 0;
width: 300px; /* adjust as needed */
height: 100%;
background: #f9f9f9;
overflow-y: auto;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
z-index: 1000; /* ensure it's above other content */
padding: 16px;
}
.content-area {
margin-right: 300px; /* same as sidebar width */
}
.toggle-sidebar {
display: none; /* hidden by default */
position: absolute;
top: 10px;
left: 10px; /* adjust as needed */
z-index: 1001; /* above the sidebar */
}
.mapmetric-container {
list-style-type: none;
padding: 0;
}
.mapmetric-row {
background: #F1F1F1;
margin: 0px 5px 5px 0px;
border-radius: 5px;
padding: 7px;
width: fit-content;
}
.mapmetric-row.highlighted-data {
background: #daffeb;
}
.mapmetric-label {
margin-right: 10px;
}
span.mapmetric-value {
text-align: right;
}
.property-modal-body {
padding: 10px 20px;
}
.report-zero-state {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
}
.report-zero-state p {
font-size: 18px;
color: #a9a9a9;
margin-top: 30px;
text-align: center;
}
div#measurement-instruction-container {
position: absolute;
top: 20px;
}
p.measurement-instruction {
background-color: #f8d7da;
color: #721c24; padding: 10px;
border-radius: 5px; text-align: center;
}
#infoModal .modal-dialog {
width: 90%;
max-width: 90%;
}
.export-button {
margin-right: 10px;
color: #FFFFFF;
padding: 10px 15px;
border-radius: 100px;
border: 0px;
font-weight: 700;
background: rgb(21, 21, 21);
}
button#copy-and-chat-button {
margin-right: 10px;
color: #FFFFFF;
padding: 10px 15px;
border-radius: 100px;
border: 0px;
font-weight: 700;
background: rgb(5,218,124);
background: linear-gradient(322deg, rgba(5,218,124,0.5032606792717087) 28%, rgba(0,179,255,0.5) 100%);
}
h5#infoModalLabel {
font-size: 24px;
font-weight: 800;
color: #222222;
}
.metric-section h3 {
font-size: 16px;
font-weight: 600;
margin-top: 20px;
}
.mapmetric-table {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4px;
}
.mapmetric-table-column {
display: flex;
flex-direction: column;
width: -webkit-fill-available;
}
.mapmetric-table-header {
width: 100%;
text-align: center;
padding: 7px;
background: #4efdae40;
color: #004c33;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.mapmetric-table-header h4 {
font-size: 15px;
font-weight: bold;
margin-bottom: 0px;
}
.mapmetric-table-row {
border-bottom: #CCCCCC 1px solid;
width: 100%;
display: flex;
justify-content: center;
padding: 5px;
}
.mapmetric-table-row h5 {
margin: 0px;
font-size: 14px;
}
.roof-pitch-section {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4px;
width: 100%;
}
.roof-segment {
padding: 10px;
background: #f1f1f1;
border-radius: 5px;
flex: auto;
}
.roof-segment .mapmetric-row {
background: none;
padding: 0px;
}
.roof-segment h4 {
font-size: 16px;
}
.expandable-content {
max-height: 200px; /* Adjust as needed */
overflow: hidden;
position: relative;
transition: max-height 0.3s ease;
}
.expandable-content::after {
content: "";
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
.expand-button {
display: block;
margin: 10px auto;
padding: 5px 10px;
background-color: #8edcb2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.mapaddress-wrapper.address-wrap {
display: flex;
flex-direction: row;
}
.quality-tag-wrapper {
background: #d1f5e2;
border-radius: 5px;
padding: 7px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.quality-label {
font-size: 12px;
color: #4c7961;
}
.quality-value {
font-size: 18px;
color: #4c7961;
font-weight: bold;
}
a.map-link-block h5.card-title {
color: #000;
}
.hide-for-pdf {
display: none;
}
.map-images {
display: flex;
gap: 10px;
max-width: 50%;
}
.map-images img {
width: 50%;
max-width: 50%;
border-radius: 5px;
}
.rooftops-type {
font-family: poppins, sans-serif;
font-weight: 900;
font-size: 28px;
color: #ffffff;
margin-bottom: 0px;
}
span.rooftops-gradient {
background: linear-gradient(322deg, rgba(5,218,124,0.5032606792717087) 28%, rgba(0,179,255,0.5) 100%);
background-clip: text;
-webkit-background-clip: text;
color: #5bca8d;
}
.sticky-banner {
position: sticky;
top: 0;
background-color: #383a45;
color: white;
text-align: center;
z-index: 999;
}
.stickyBanner-Content {
padding: 10px;
background: #222;
font-weight: bold;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
}
.stickyBannerLink {
color: #FFFFFF;
}
.stickyBannerLink:hover {
text-decoration: none;
}
.close-banner {
background: none;
border: none;
color: white;
font-size: 25px;
cursor: pointer;
}
.sticky-banner p {
margin: 0;
display: inline;
}
.pac-container.pac-logo.hdpi {
padding: 10px;
font-family: Montserrat, sans-serif;
border-radius: 0px 0px 15px 15px;
}
.explore.card.ai-feature {
border-radius: 15px;
}
.footer-links-block {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin: 0px 15px;
}
.explore-footer-link {
background: #222222;
padding: 5px 15px;
border-radius: 100px;
color: #FFFFFF;
font-size: 14px;
}
.explore-footer-link:hover {
text-decoration: none;
background: #4c7961;
color: #FFFFFF;
border-right: 3px solid #222222;
transition: all .5s;
}
.feedback-block {
margin: 10px 15px 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #b1b2b6;
}
.dislaimer-section {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 15px 10px;
border-top: 1px solid #CCCCCC;
margin-top: 30px;
}
.disclaimer-branding img {
max-width: 200px;
}
.disclaimer-statement {
padding: 0px 10px;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.disclaimer-statement p {
font-size: 10px;
margin-bottom: 0px;
}
.disclaimer-report-by {
display: flex;
flex-direction: column;
white-space: nowrap;
font-size: 13px;
}
.report-by-header {
font-weight: bold;
}
.insight-recommendation {
background: #daffeb;
border-radius: 5px;
padding: 20px;
display: flex;
color: #7d9ead;
margin-top: 20px;
}
.insight-icon-block {
padding-right: 15px;
border-right: 1px solid #104a6526;
margin-right: 15px;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.insight-icon-block i {
font-size: 32px;
margin-bottom: 10px;
}
.insight-icon-block h4 {
font-size: 21px;
font-weight: bold;
margin-bottom: 0px;
word-wrap: break-word;
}
.insight-text-block p {
font-size: 23px;
margin-bottom: 0px;
}
.insight-text-block {
display: flex;
align-items: center;
flex-direction: column;
}
.score-bad-fit {
color: #f24d4d;
font-weight: bold;
}
.score-good-fit {
color: #5288a1;
font-weight: bold;
}
.score-great-fit {
color: #54d6a4;
font-weight: bold;
}
.sample-data-points {
gap: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
span.data-point-pill {
background: #ececec;
padding: 5px 10px;
border-radius: 100px;
font-size: 14px;
color: #a7b5b9;
font-weight: 600;
}
.not-found-error-banner {
background: #ffd5d5;
padding: 10px;
border-radius: 100px;
margin-bottom: 20px;
font-weight: bold;
color: #905454;
text-align: center;
}
#loadingSpinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
text-align: center;
font-size: 19px;
color: #b0dfef;
background: #222222d1;
border-radius: 100px;
padding: 10px;
}
button#current-location-button, button#current-location-button-mobile {
margin: 5px;
font-size: 10px;
border-radius: 15px;
border: 0px;
color: #fff;
background: #222;
position: absolute;
height: 40px;
right: 0;
}
button#current-location-button i, button#current-location-button-mobile i {
background: transparent;
padding: 0px;
border-radius: 0px;
margin-right: 0px;
line-height: normal;
color: #fff;
font-weight: unset;
}
.solar-insight-scale {
display: flex;
justify-content: space-between;
margin-top: 10px;
width: 100%;
position: relative;
}
.solar-insight-scale-section {
flex-grow: 1;
text-align: center;
padding: 5px;
color: white;
font-weight: bold;
}
.solar-insight-scale-section.bad-fit {
border-radius: 100px 0px 0px 100px;
background: #516ca1;
}
.solar-insight-scale-section.good-fit {
border-radius: 0px;
background: #5188a1;
}
.scale-section.great-fit {
border-radius: 0px 100px 100px 0px;
background: #51a187;
}
#solar-insight-caret-icon {
position: absolute;
left: 49%;
top: -20px;
color: #222222;
font-size: 33px;
}
#solar-insight-caret-icon-bad-fit {
position: absolute;
left: 16%;
top: -20px;
color: #222222;
font-size: 33px;
}
#solar-insight-caret-icon-great-fit {
position: absolute;
left: 82%;
top: -20px;
color: #222222;
font-size: 33px;
}
.aiResponse-Wrapper {
background: #f1f1f1;
border-radius: 5px;
padding: 15px;
font-size: 14px;
margin-top: 25px;
}
.aiResponse-Header {
font-size: 21px;
font-weight: bold;
color: #222222;
}
.metric-section.estimate-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
}
.metric-section.estimate-buttons button {
background: #7d9ead;
color: #FFFFFF;
font-size: 18px;
border-radius: 15px;
border: none;
padding: 7px 15px;
border-bottom: 2px solid #7d9ead;
font-weight: bold;
height: 200px;
width: 200px;
text-shadow: 1px 1px 1px #222222;
}
.metric-section button:hover {
border-bottom: 2px solid #0e3546;
}
#rotatingMessageWrapper {
font-size: 24px;
margin: 20px 0px;
color: #aaaaaa;
}
.fade-message {
animation: fadeEffect 4s;
}
@keyframes fadeEffect {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.report-zero-state .mapdetails-wrapper.section-to-include {
position: relative;
padding: 5px;
overflow: hidden; /* Ensure the pseudo-element doesn't exceed the boundaries */
}
.report-zero-state .mapdetails-wrapper.section-to-include::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit; /* Use the same background as the parent */
filter: blur(1px);
z-index: -1; /* Place it behind the content */
}
.zero-overlay-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 997;
border-radius: 5px;
}
.zero-overlay {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 998;
border-radius: 5px;
overflow: auto; /* Allows scrolling within the overlay */
}
.zero-overlay-content {
background-color: #ffffffeb;
padding: 20px;
border-radius: 5px;
text-align: center;
margin: 40px 10px 20px 10px;
display: flex;
flex-direction: column;
align-items: center;
position: sticky;
top: 10px; /* Adjust this value as needed */
}
.zero-overlay-content h2 {
font-weight: 700;
font-family: 'Poppins';
}
.zero-overlay-content p {
margin: 10px;
}
.zero-generate-button {
color: #FFFFFF;
padding: 10px 15px;
border-radius: 100px;
border: 0px;
font-weight: 700;
background: #01BFFE;
}
.zero-generate-button:hover {
text-decoration: none;
background: #00ade6;
color: #FFF;
}
.team-member-select {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
select#teamMembersDropdown {
padding: 5px;
border-radius: 5px;
border: 1px solid #CCCCCC;
}
button#checkout-button-monthly, button#checkout-team-button-monthly, button#checkout-button-annual, button#checkout-team-button-annual {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
background: #222222;
color: #FFFFFF;
padding: 10px;
}
.team-management {
margin-top: 20px;
}
.tm-header {
display: flex;
justify-content: space-between;
flex-direction: row;
align-content: center;
align-items: center;
}
.tm-header-left {
display: flex;
flex-direction: row;
gap: 10px;
}
.tm-header h3 {
font-weight: 700;
font-size: 22px;
line-height: normal;
}
.team-count {
background: #222;
padding: 5px 15px;
border-radius: 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
gap: 10px;
align-content: center;
align-items: center;
color: #FFFFFF;
}
table.tm-table.table {
background: #FFFFFF;
border-radius: 20px;
}
table.tm-table.table th {
border-top: 0px;
padding: 1.25rem;
}
.tm-table td {
padding: 1.25rem;
}
.delete-member {
background: #222222 !important;
border: 0px;
font-weight: bold;
font-size: 11px;
}
.tm-table td {
padding: 1.25rem;
}
.native-user {
background: #222222;
padding: 10px 11px;
border-radius: 100%;
color: #FFFFFF;
}
@media (max-width: 992px) {
.tm-header {
display: flex;
flex-direction: column;
align-items: stretch;
}
.tm-header-left {
display: flex;
flex-direction: column;
}
button#addTeamMemberButton {
width: 100%;
}
.team-count div {
display: flex;
flex-direction: column;
padding: 5px;
flex-wrap: nowrap;
white-space: nowrap;
}
.stickyBanner-Content {
margin-right: -8px;
}
.metric-section.estimate-buttons {
flex-wrap: wrap;
}
.metric-section button {
width: 100%;
}
.insight-recommendation {
background: #d6f2ff;
border-radius: 5px;
padding: 20px;
color: #7d9ead;
margin-top: 20px;
display: flex;
flex-direction: column;
}
.insight-icon-block {
padding-right: 0px;
border-right: none;
margin-right: 0px;
}
.solar-insight-scale {
width: 110%;
}
#solar-insight-caret-icon {
position: absolute;
left: 45%;
top: -20px;
color: #222222;
font-size: 33px;
}
#solar-insight-caret-icon-bad-fit {
position: absolute;
left: 12%;
top: -20px;
color: #222222;
font-size: 33px;
}
#solar-insight-caret-icon-great-fit {
position: absolute;
left: 78%;
top: -20px;
color: #222222;
font-size: 33px;
}
button#current-location-button, button#current-location-button-mobile {
margin: 5px;
font-size: 10px;
border-radius: 15px;
border: 0px;
color: #fff;
background: #222;
position: absolute;
height: 40px;
right: 0;
}
button#current-location-button i, button#current-location-button-mobile i {
background: transparent;
padding: 0px;
border-radius: 0px;
margin-right: 0px;
line-height: normal;
color: #fff;
font-weight: unset;
}
.dislaimer-section {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 15px 10px;
border-top: 1px solid #CCCCCC;
margin-top: 30px;
flex-direction: column;
}
.disclaimer-statement {
padding: 0px;
border-left: 0px;
border-right: 0px;
}
.sticky-banner {
padding-bottom: 10px;
}
.roof-pitch-section {
flex-wrap: wrap;
}
.report-content .modal-header {
display: flex;
flex-direction: column;
gap: 5px;
}
.property-header-right {
display: flex;
flex-direction: row;
}
.export-button {
margin-right: 10px;
color: #FFFFFF;
padding: 10px 12px;
border-radius: 100px;
border: 0px;
font-weight: 600;
font-size: 12px;
background: rgb(21, 21, 21);
}
button#copy-and-chat-button {
margin-right: 10px;
color: #FFFFFF;
padding: 10px 12px;
border-radius: 100px;
border: 0px;
font-weight: 600;
font-size: 12px;
background: rgb(5,218,124);
background: linear-gradient(322deg, rgba(5,218,124,0.5032606792717087) 28%, rgba(0,179,255,0.5) 100%);
}
.map-searchbar-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.searchbarBtn {
font-size: 13px;
padding: 5px 10px;
}
.explore-map-searchbar-buttons .searchbarBtn {
font-size: 13px;
padding: 10px 15px;
}
.map-buttons-wrap {
display: flex;
flex-direction: column;
}
.map-images {
display: flex;
gap: 10px;
flex-direction: column;
max-width: 100%;
}
.map-images img {
width: 100%;
max-width: 100%;
}
.map-right-sidebar {
width: 0;
overflow: hidden;
transition: width 0.3s ease;
}
.content-area {
margin-right: 0;
}
.map-right-sidebar.active {
width: 80%; /* adjust as needed for mobile */
}
.toggle-sidebar {
display: block; /* show button on mobile */
}
.dashboard-task-pane {
background: transparent;
margin-top: -2px;
z-index: auto;
}
.dashboardMap .db-map-header {
padding: 10px 0px;
}
.see-more-btn-mobile {
display: block;
}
.see-more-btn-desktop {
display: none;
}
.taskmanager-task-wrapper .item-card {
margin-right: 0px !important;
}
.beta-heading {
font-size: 16px;
font-weight: bold;
color: #a3a4a3;
margin-left: 5px;
}
.DocDrawer.show {
width: 100%;
}
.card.ai-feature.coming-soon {
opacity: 1;
border: 2px dashed #dadada;
color: #FFFFFF;
background: #FFFFFF14 !important;
}
#transcript-drawer {
width: 95%;
}
.chat-metrics {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.card.metric-card {
width: 100%;
margin: 5px 0px;
}
.hscroll-mobile {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
ul#newItems, ul#completedItems {
display: flex;
flex-direction: column;
width: 100%;
flex-wrap: nowrap;
}
#newItems .item-card, #completedItems .item-card {
width: 100%;
}
canvas#chatSessionsChart {
background: #ffffff;
padding: 10px;
border-radius: 5px;
margin-top: 5px;
min-width: 100%;
}
#dashboard-wrapper {
display: flex;
flex-direction: column;
}
#upsellModal {
overflow: scroll;
}
#upsellModal .modal-dialog {
max-width: 100% !important;
}
#upsellModal .modal-content {
display: flex;
width: 100%;
pointer-events: auto;
background-color: #fffffff0;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 0.3rem;
outline: 0;
flex-direction: row;
overflow: hidden;
}
div#upsellModal .modal-body {
display: flex;
flex-direction: column;
padding: 0px;
width: 100%;
}
#subscriptionModal .modal-dialog {
max-width: 95% !important;
}
div#subscriptionModal .modal-body {
display: flex;
flex-direction: column;
}
.subscribe-modal-left {
max-width: 100%;
padding: 15px;
}
.subscribe-modal-left.personalize {
max-width: 100%;
padding: 20px 20px;
}
.subscribe-modal-right {
background: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/655e568b0ee38585e50afcba_rooftops_upgrade-to-9pro-master.png);
height: 100%;
width: 100%;
max-width: 100%;
min-height: 425px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
.subscribe-modal-right-personalize {
background: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64e9150f53771ac56ef529f3_5NJHUpmzD20-unsplash.jpg);
height: 100%;
width: 100%;
max-width: 100%;
min-height: 425px;
background-color: #FFFFFF;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.pricing-card-row .col-md-6 {
margin-bottom: 20px;
}
.hidden-desktop {
display: block;
}
.chatbotconfig-wrapper {
flex-direction: column;
}
.cb-example-col {
margin-top: 20px;
}
.hidden-mobile {
display: none;
}
.skeleton-wrapper {
width: 90%;
}
.popular .card.ai-feature {
padding: 3px;
background: linear-gradient(45deg, #15ffd3, #0032d9) !important;
border: 0px;
}
.creatorFeatures .card.ai-feature {
background: #FFFFFF;
}
.creator-features-cards {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.card.dashboard-card.welcome-db-card {
background: url(https://uploads-ssl.webflow.com/64e9150f53771ac56ef528b7/64f8acf23a231fe32c72e786_roofers-green-background.png);
background-position: bottom right;
background-size: 75%;
background-repeat: no-repeat;
background-color: #FFF;
padding: 20px;
}
.mobile-zip-status {
display: block;
}
.desktop-zip-status {
display: none;
}
button#clearChatBtn {
top: 115px;
}
.message-bot-wrap {
max-width: 95%;
}
h2.rooftopsTitle {
display: none;
}
img.pageTitleLogo {
display: inline-block;
max-height: 35px;
}
div#dailyForecast {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.daily-forecast {
margin-bottom: 20px;
}
.login-wrapper {
display: flex;
width: 100%;
background: #FFFFFF;
flex-direction: column;
}
.navbar .sidebar {
display: block !important;
position: fixed; /* Make it a fixed position element */
z-index: 1000; /* Place it on top of other elements */
height: 100%; /* Make it full height */
overflow: auto; /* Add scrolling if necessary */
transition: all 0.3s; /* Animate the transition */
top: 0px;
left: 0px;
width: 80%;
}
.navbar-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.navbar-left {
display: flex;
align-items: flex-start;
align-items: center;
align-content: center;
width: -webkit-fill-available;
}
.navbar-right {
display: flex;
}
img.navbarRTicon {
max-height: 40px;
margin-right: 5px;
}
.navbar-left h2 {
margin-right: 0px;
margin-bottom: 0px;
font-size: 26px;
}
img.logo-img {
max-width: 150px;
}
img.logo-img.mobile {
max-width: 36px;
margin-right: 10px;
}
.navbar-left i {
margin-right: 10px;
}
.sidebar {
display: none;
}
.navbar {
display: block !important;
background: #373A45;
color: #FFF;
}
.navbar-light .navbar-toggler {
background: transparent;
border: 0px;
color: #FFFFFF;
font-size: 25px;
padding: 5px;
}
span.navbar-toggler-icon {
color: #FFF !important;
filter: invert(1);
}
.page-container {
height: auto;
}
.main-content {
width: 100%;
}
div#chatheader {
display: none;
}
.chatwrapper {
height: calc(100vh - 56px);
min-height: auto;
}
.card.dashboard-card {
height: 100%;
background: transparent;
color: #FFF;
border: 0px;
}
.card-body.dashboardMap {
padding: 0px;
}
.card.dashboard-card > .card-body {
padding: 0px;
}
i.beta-tag {
margin-left: 7px;
font-size: 7px;
}
h2.longTitle {
font-size: 26px;
}
.features-nav-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding-right: 0px;
}
.mainAIbuilder {
padding: 15px;
min-height: 100%;
height: 100%;
}
.AImodules {
display: flex;
flex-direction: column;
}
.features-pill {
text-wrap: nowrap;
}
a.pill {
text-wrap: nowrap;
white-space: nowrap;
}
.daily-forecast {
background: #ffffff40;
}
.cb-icons-wrapper i.fa.float-left {
background: #ffffff;
}
.card.ai-feature {
min-width: 225px;
height: auto;
margin-right: 15px;
border-bottom: 3px solid #2f313a;
background: #383a45;
border-right: 1px solid #2f313a;
}
#oldestTask li.task-item, #oldestTask li {
background: #a5a9a725;
}
#oldestTask li.task-item {
background: #ffffff;
}
#oldestTask .task-details {
color: #FFFFFF;
}
.dashboard-features .col-lg-6.col-md-6.mb-6:first-child {
margin-bottom: 20px;
}
.dashboardMap div#map {
min-height: 250px;
border-radius: 0px 0px 5px 0px;
}
.dashboardMap.insightsMap div#map {
min-height: 250px;
border-radius: 15px;
}
.profile-sb-left a {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
color: #FFFFFF;
}
.login-form-wrapper {
height: 100%;
display: flex;
flex-direction: column;
padding-top: 20px;
justify-content: flex-start;
}
.login-form-content {
margin: auto;
width: 100%;
padding: 20px;
background: #FFF;
}
.login-form-form input, .login-form-form button {
padding: 15px;
}
.login-form img {
max-width: 200px;
}
.login-divider-text {
min-width: 60%;
margin: 0px 10px;
text-align: center;
font-size: 14px;
color: #CCC;
}
.login-form-form input {
font-size: 12px;
}
li.no-tasks-message {
list-style: none;
font-size: 32px;
color: #ffffff70;
}
.cp-widget.cp-taskmanager {
max-width: none;
}
.cp-widgets-wrapper {
display: flex;
flex-direction: column;
height: auto;
max-height: none;
}
.cp-widget.cp-chatbox {
max-height: 90vh;
min-height: 90vh;
}
.cp-chatbox button#clearChatBtn {
top: 0;
}
.cp-cb-prompts {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
justify-content: flex-end;
}
.signup-form-half {
display: flex;
flex-direction: column;
}
.signup-form-half input {
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.login-form-form select {
padding: 12px 8px;
font-size: 12px;
border-radius: 3px;
border: 1px solid #CCC;
background-color: rgb(241, 244, 246);
color: #222;
}
}
/* STORAGE
/* PURPLE ACCENT AC44FA */