/* zoho feedback widget styles */
#zsfbform input{
	border: 1px solid #bfbfbf!important;
}
.d-flex {
    display: flex !important;
}
button{
	border-width: 0;
}
button.dkim-button{
	font-weight: 100;
	font-size: 0.9rem;
}
.ui-autocomplete.master-search-results-autocomplete{
    max-width:none!important;
}
.master-search-results-autocomplete{
    width:80vw!important;
    left:10vw!important;
}
#disable-stringing, #stringing-mppt-tabs, #design-summary-panels-section-2{
	display:none;
}

.spc-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.spc-hero__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.spc-hero__icon {
    font-size: 28px;
    color: #0066cc;
}

.spc-hero__info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.spc-hero__badge {
    display: inline-block;
    padding: 4px 10px;
    background: #0066cc;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.spc-hero__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.spc-hero__desc {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.spc-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.spc-hero__btn span,
.spc-hero__btn svg {
    position: relative;
    z-index: 2;
}

.spc-hero__btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.spc-hero__btn:hover::before {
    left: 100%;
}

.spc-hero__btn:hover {
    color: #ffffff;
    background: #0066cc;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
}

@media (max-width: 640px) {
    .spc-hero__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .spc-hero__icon {
        display: none;
    }
    
    .spc-hero__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .spc-hero__btn {
        width: 100%;
        justify-content: center;
    }
}
.activity-item {
    padding: 0;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.activity-item:hover {
    background: #f8f9fa;
}
/* ===== Modern Modal Upgrade ===== */
.modern-modal .modal-content {
    border: none;
    border-radius: 18px;
    padding: 6px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    animation: popIn 0.22s ease-out;
}

@keyframes popIn {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.modern-modal .modal-header {
    padding-bottom: 0;
    padding-top: 16px;
}

.modern-modal .modal-body {
    font-size: 15px;
    line-height: 1.5;
    padding: 14px 20px 6px 20px;
}

.modern-modal .modal-footer {
    padding: 8px 20px 18px 20px;
}

/* Icon styling */
.modal-icon {
    font-size: 26px;
}
.modal-icon.danger  { color:#dc3545; }
.modal-icon.warning { color:#f0ad4e; }
.modal-icon.info    { color:#0d6efd; }
.modal-icon.success { color:#198754; }

/* Better button feel */
.modern-modal .btn {
    border-radius: 10px;
    padding: 10px 0;
    font-weight: 600;
}

/* Soft backdrop blur */
.modal-backdrop.show {
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.42);
    opacity: 1 !important;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item-inner {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    align-items: start;
}

.activity-icon-wrapper {
    flex-shrink: 0;
}

.activity-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activity-icon-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.activity-icon-success {
    background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
}

.activity-icon-info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.activity-icon-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.activity-icon-danger {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.activity-icon-secondary {
    background: linear-gradient(135deg, #868f96 0%, #596164 100%);
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.activity-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: #2c3e50;
}

.activity-time {
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.activity-time i {
    font-size: 0.875rem;
    opacity: 0.7;
}

.activity-description {
    margin: 0;
    color: #495057;
    line-height: 1.6;
    font-size: 0.95rem;
}

.activity-description strong {
    color: #2c3e50;
    font-weight: 600;
}

.activity-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.activity-empty i {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1.5rem;
}

.activity-empty h4 {
    color: #495057;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.activity-empty .text-muted {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
/* Empty State */
.empty-state {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 60px 40px;
}

.empty-state-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #2563eb;
}

.empty-state-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 0;
}

.btn-gradient {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border: none;
    color: white;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    color: white;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

/* Modern Project Card */
.project-card-modern {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.project-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: #cbd5e1;
}

/* Card Header with Thumbnail */
.project-card-header {
    position: relative;
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    overflow: hidden;
}

.project-thumbnail-modern {
    width: 100%;
    height: 100%;
    position: relative;
}

.project-thumbnail-modern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-status {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    backdrop-filter: blur(10px);
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-draft {
    background: rgba(251, 191, 36, 0.9);
    color: #78350f;
}

.status-active {
    background: rgba(34, 197, 94, 0.9);
    color: #14532d;
}

/* Card Body */
.project-card-body {
    padding: 20px;
    flex: 1;
}

.project-name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #475569;
}

.meta-item i {
    color: #94a3b8;
    width: 16px;
    text-align: center;
}

.customer-edit-dash {
    color: #2563eb;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s;
}
.niceCountryInputMenu {
    display: block;
    width: 100%;
    padding: 0.225rem 2.25rem 0.225rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

.niceCountryInputMenu:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.niceCountryInputMenu:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

/* Dark mode support if you're using it */
@media (prefers-color-scheme: dark) {
    .niceCountryInputMenu {
        color: #dee2e6;
        background-color: #212529;
        border-color: #495057;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
    
    .niceCountryInputMenu:focus {
        color: #dee2e6;
        background-color: #212529;
        border-color: #86b7fe;
    }
    
    .niceCountryInputMenu:disabled {
        background-color: #343a40;
    }
}
.customer-edit-dash:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Project Specs */
.project-specs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.spec-solar {
    background: #fef3c7;
    color: #b45309;
}

.spec-solar i {
    color: #f59e0b;
}

.spec-battery {
    background: #dbeafe;
    color: #1e40af;
}

.spec-battery i {
    color: #3b82f6;
}

/* Timestamp */
.project-timestamp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #94a3b8;
}

.project-timestamp i {
    font-size: 12px;
}

/* Card Footer */
.project-card-footer {
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.btn-open-project {
    width: 100%;
    background: #2563eb;
    border: none;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* Copy Modal Styles - matching upgrade modal */
.copy-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  overflow: auto; /* allow scroll on tiny screens */
}

.copy-modal-backdrop.active {
  display: flex;
}

/* Modal sizing & layout */
.copy-modal {
  background: #fff;
  border-radius: 18px;
  max-width: min(640px, 94vw);
  width: 94vw;
  max-height: 90dvh;            /* key: never exceed viewport height */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: slideUp 0.4s ease;
  overflow: hidden;
  display: flex;                /* column layout */
  flex-direction: column;
  overscroll-behavior: contain;
}

/* Modal Header */
.copy-modal-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  padding: 28px 24px 22px;      /* tightened for fit */
  color: #fff;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}

.copy-modal-icon {
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 36px;
}

.copy-modal-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
}

.copy-modal-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

.copy-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s;
}

.copy-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Modal Body (scrolls when content overflows) */
.copy-modal-body {
  padding: 24px;
  overflow: auto;               /* key: internal scroll */
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;                /* let flex child shrink */
}

/* Project Name Input */
.copy-name-section { margin-bottom: 24px; }

.copy-name-label {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  display: block;
}

.copy-name-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.2s;
}

.copy-name-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Source Project Info (kept for parity if you use it) */
.source-tier-info {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
}
.source-tier-label {
  font-size: 14px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.source-tier-name {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}

/* Tier Selection Label */
.tier-selection-label {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
}

/* Copy Options */
.copy-options { display: grid; gap: 14px; }

.copy-option {
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.copy-option:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.copy-option.selected {
  border-color: #2563eb;
  background: #eff6ff;
}

.copy-option-radio {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-option.selected .copy-option-radio {
  border-color: #2563eb;
  background: #2563eb;
}

.copy-option.selected .copy-option-radio::after {
  content: '✓';
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.copy-option-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.copy-option-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.tier-standard .copy-option-icon {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
}
.tier-premium .copy-option-icon {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
}
.tier-indepth .copy-option-icon {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
}

.copy-option-details h4 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.copy-option-details p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.copy-option-specs {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #475569;
}
.spec-item i { color: #3b82f6; }

/* Copy Cost */
.copy-cost {
  background: #f1f5f9;
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.copy-cost-label { font-size: 14px; color: #64748b; }
.copy-cost-amount { font-size: 22px; font-weight: 800; color: #0f172a; }
.copy-cost-amount .credit-word { font-size: 14px; color: #64748b; font-weight: 600; }

/* Credit Balance */
.credit-balance-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.credit-balance-label { color: #64748b; }
.credit-balance-value { font-weight: 700; color: #1e40af; }

/* Warning */
.insufficient-warning {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  display: none;
  color: #991b1b;
  font-size: 14px;
}
.insufficient-warning.show {
  display: flex;
  align-items: center;
  gap: 8px;
}
.insufficient-warning i { color: #ef4444; }

/* Modal Actions (pinned at bottom) */
.copy-modal-actions {
  display: flex;
  gap: 12px;
  padding: 0 24px 24px;
  margin-top: 0;
  flex-shrink: 0;
}

.btn-copy {
  flex: 1;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.btn-copy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-cancel {
  background: #fff;
  border: 2px solid #e2e8f0;
  color: #64748b;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel:hover { background: #f8fafc; border-color: #cbd5e1; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tiny screens: fill safely */
@media (max-width: 480px) {
  .copy-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100dvh;
    border-radius: 12px;
  }
  .copy-modal-header { padding: 20px 16px 14px; }
  .copy-modal-body   { padding: 16px; }
  .copy-modal-actions{ padding: 0 16px 16px; }
  .copy-modal-title  { font-size: 22px; }
  .copy-modal-icon   { width: 64px; height: 64px; font-size: 32px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .copy-modal-backdrop, .copy-modal { animation: none !important; }
}

@media (max-width: 768px) {
    .activity-item-inner {
        gap: 1rem;
        padding: 1rem;
    }
    
    .activity-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    
    .activity-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .activity-time {
        font-size: 0.8rem;
    }
    
    .activity-description {
        font-size: 0.9rem;
    }
}
#advanced-billing-screen-modal .modal-body{
    max-height:80vh;
    overflow-y:scroll;
}
#leads_map{
    height: 600px; 
    min-height: 600px; 
    max-height:100%;
}
.pagination a{
    font-weight:normal;
}
/*#map_tool_wm{
    width: 100%;
    z-index: 4!important;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    margin: 0;
    background: url(/images/draft_project.webp);
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events: none;
}*/
ul.ui-autocomplete li.everywhere-item.ui-menu-item{
	-webkit-transition: none!important;
	-moz-transition: none!important;
	-o-transition: none!important;
	transition: none!important;
}
.ui-menu-item.everywhere-item{
    border-bottom:1px solid #efefef!important;
    margin-bottom:3px!important;   
}
.ui-menu-item.everywhere-item:hover{
    box-shadow: none;
    border:none;
    background:#afafaf!important;
}
.ui-state-focus.everywhere-item:hover{
    margin:0;
}
#price-item-table-container{
    height:50vh;
    width:100%;
    overflow-y:scroll;
}
.create-role-form{
	display:none;
}
.dismiss-exceeded{
    position: absolute;
    top: -38px;
    left: 30px;
    border-radius:0;
}
#proposal-templates-window-modal .modal-content{
    height:90vh;
    overflow-y: scroll;
}
.customer-document-icons{
	display:none;
}
#map_modal_new{
    display:none;
}
.dkim_value{
	word-break:break-all;
	font-family:Courier;
}
#map_modal_placeholder{
    width:70vw;
    height:70vh;
    margin-top:15vh;
    margin-left: 15vw;
    margin-right: 15vw;
    margin-bottom: 15vh;
    border:1px solid #dedede;
    border-radius:6px;
    box-shadow:0px 0px 10px #dedede;
    display:none;
}

.ui-widget{
	font-family:inherit!important;
	font-size: inherit!important;
}
a.sp_thumbnail {
	position: relative;
	z-index: 0;
}
a.sp_thumbnail:hover {
	background-color: transparent;
	z-index: 50;
}

a.sp_thumbnail span {
	/*CSS for enlarged image*/
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
	top: 100px;
	left: -1000px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

a.sp_thumbnail span img {
	/*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
	z-index:100;
}

a.sp_thumbnail:hover span {
	/*CSS for enlarged image on hover*/
	visibility: visible;
	top: 0;
	left: 60px; /*position where enlarged image should offset horizontally */
}


.tiny-italic{
	font-size:0.8rem;
	font-style: italic;
	color:#999;
}
.vertical-align{
	vertical-align: top;
}
#update-postmark-signature, #delete-postmark-signature{
	display:none;
}
.dkim_host{
	word-break: break-all;
}
.smaller-input-font input{
	font-size:0.9rem;
}
.dkim-table-line{
	font-size:0.9rem;
}
.dkim-info div{
	padding:10px;
}
.dkim-header div{
	border-bottom: 1px solid #afafaf;
}
.big-black-dkim{
	color:black;font-size:1.1rem;font-weight:bold;
}
.dkim-verify-error, .returnpath-verify-error{
	border-radius:2px;
	background:#F35A3D;
	color:white;
	display:none;
	padding:10px;
	font-size:0.8rem;
}
.mr-3 {
    margin-right: 3px !important;
}
.panel-helper-element{
	pointer-events: none!important;
        background:rgba(0,0,0,0.8);
        border-radius:6px;
        color:white;
}
#recent_projects{
    min-height:100px;
    border:1px solid grey;
    width:100%;
    
}
.light-grey{
	color:#afafaf;
}
.dkim-verify-status, .returnpath-verify-status{
	color:#afafaf;font-size:0.8rem;font-weight:bold;
}
.light-green{
	color:forestgreen;
}
.dkim-header{
	color:#afafaf;
	font-size:0.8rem;
}
#dashboard-tabs-content .tab-pane.active .tab-panel-card {
    border-top-color: #f97316 !important;
}
#existing-system-slider{
	margin-top:6px;
}
.feedtxtarea{
	border: 1px solid #bfbfbf!important;
}
#price-linking-screen .halfy-center{
	width:50%;
}
#price-linking-screen .qtry-center{
	width:25%;
}
input.highlightedInputError:focus{
	border:2px solid indianred;
}
input.highlightedInput:focus{
	border:2px solid lightgoldenrodyellow;
}
#price-linking-screen .halfy-center, #price-linking-screen .qtry-center{
	min-height:28px;
	vertical-align: center!important;
	display:table-cell!important;
}
.new-price-item{
	padding: 6px 16px!important;
	max-width: 300px!important;
	font-size: 0.9rem;
	font-weight: bold;
	display: inline-block;
}
.email-link-notice{
	text-decoration: underline;
	font-style: italic;
	color:darkorange;
}
.ui-resizable-se{
	height:40px;
	right:-20px;
	bottom:-20px;
}
.ui-resizable-sw{
	height:40px;
	width:40px;
	margin-left:-20px;
	bottom:-20px;
}
.ui-resizable-nw{
	height:40px;
	width:40px;
	margin-left:-20px;
	top:-20px;
}
.ui-resizable-ne{
	height:20px;
	width:20px;
	margin-right:-20px;
	margin-top:-20px;
}
.ui-resizable-s{
	height:40px;
	bottom:-20px;
}
.ui-resizable-n{
	height:40px;
	top:-35px;
}
.ui-resizable-e{
	width:40px;
	right:-35px;
}
.ui-resizable-w{
	width:40px;
	left:-20px;
}

.lg-preview, .lg-preview-2{
	border:1px solid grey;
	height:100px;
	margin-top:10px;
	padding:20px;
}
#configure-arrays input{
	background:none;
}
#advwebForm .zsfeedbklpanel.zscaptcha, 
#advwebForm .zsfeedbkrpanel.zscaptcha{
	max-height:1200px!important;
	margin-bottom:-8px!important;
}

.lg-p-options-name{
    font-size: 0.7rem;
}


input:invalid {
    box-shadow: none;
}
.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#tou-fit-section{
	display:none;
}
.zsfbbdrtop{
	width:90%!important;
}
.attachnewlink{
	display:inline!important;
}

textarea#quote-nickname {
    background: none;
    border: none;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: -1px;
	padding: 8px;
	resize: none;
    overflow: hidden;
	height:40px;
    max-height: 100px;
    width:100%;
}
.pricy-more-tiers:hover{
	color:#fff;
	background:goldenrod;
}
.pricy-more-tiers{
	border:1px solid goldenrod;
	color:goldenrod;
	padding: 3px 10px;
	border-radius:15px;
	font-size:0.9rem;
	margin-top:20px;
	float:right;

}
.active-button{
	background:rgba(34,210,68,0.3);
}
.inactive-button{
	background:#969696;
}
.lg-input input{
	height:42px;
	margin-top:3px;
	font-size:1.6rem;
	color:#666;
}

.big-size-input input::placeholder{
	color:#efefef;
	font-size:1rem;
}
#price-builder-window {
	top:35%;
}
#lighting-entries-table th{
	font-size:0.8rem;
	background-color:rgba(0,0,0,0.1);

}
.lightson-color{
	background:rgba(255,255,153,0.7)
}
.lightsoff-color{
	background:rgba(0,0,0,0.6);
	color:#fff;
}
#lighting-tou-table, #lighting-price-table{
	display:none;
}
#battery-details-window{
	top:54px;
	left:20%;
	z-index:10;
}
#internet-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	margin-left:-150px;
	margin-top:-150px;
	z-index:10000;
	display:none;
}
#incentives-type-window{
	top:30%;
	min-height:130px;
	max-width:300px;
}
#price-builder-window, #finance-details-window, #battery-details-window{
	width:500px;
}
/* Customize the label (the container) */
.container-wizard {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 4px;
	margin-left:60px;
	cursor: pointer;
	font-size: 14px;
	text-align:left;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input{
	border:1px solid #333;
	transition: all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;

}
/* Hide the browser's default radio button */
.container-wizard input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 15px;
	width: 15px;
	background-color: #666;
	border-radius: 50%;
}
/* Hide Bootstrap's default dropdown chevron */
.user-dropdown-toggle.dropdown-toggle::after {
    display: none !important;
}

/* Or if you want to hide it for all dropdown toggles in the navbar */
.modern-navbar .dropdown-toggle::after {
    display: none !important;
}
/* On mouse-over, add a grey background color */
.container-wizard:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-wizard input:checked ~ .checkmark {
	background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-wizard input:checked ~ .checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.container-wizard .checkmark:after {
	top: 5px;
	left: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: white;
}
.new-quote-circles-cont{
	position:relative;
}
.new-quote-circle{
	width:20px;
	height:20px;
	border:2px solid #777;
	background:#fff;
	border-radius:20px;
	top: -10px;
	position: absolute;
}
.active-circle{
	background:green;
	border-color:#fff;
}
.completed-circle{
	background:darkgreen;
	border-color:darkgreen;
}

.active-section {
    background-color: #97c3e5;
    border-right: 1px solid white;
}
.completed-section {
    /* color: darkgreen; */
    background: #2387D6;
    color: white;
    padding: 5px 0;
    border-right: 1px solid white;
}
.incomplete-section{
	color:#8f8f8f;
    background: #dfdfdf;
    border-right: 1px solid white;
}
.new-quote-circle-1{
	left: calc(calc(50% / 6) - 10px);
}
.new-quote-circle-2{
	left: calc(calc(150% / 6) - 10px);
}
.new-quote-circle-3{
	left: calc(calc(250% / 6) - 10px);
}
.new-quote-circle-4{
	left: calc(calc(350% / 6) - 10px);
}
.new-quote-circle-5{
	 left: calc(calc(450% / 6) - 10px);
 }
.new-quote-circle-6{
	left: calc(calc(550% / 6) - 10px);
}
.new-quote-timeline-line{
	width:83.33%;
	display:block;
	margin: 0 auto;
	height:15px;
}
.new-quote-timeline-piece{
	width:20%;
	display:inline-block;
	border-bottom:5px solid #777;
}
.timeline-piece-complete{
	border-color:darkgreen;
}
.new-quote-nav-section-1{
	display:inline-block;
	width:18%;
}
.new-quote-nav-section-2 {
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.item-suggestions {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.item-suggestions .dropdown-item:hover {
    background-color: #f8f9fa;
}

.wizard-price-line-description.has-matches {
    border-color: #28a745;
}
.new-quote-nav-section-3{
	display:inline-block;
	width:18%;
}
.new-quote-nav{
	top:0;
	width:100%;
	box-sizing: border-box;
	padding:0;
	background:#fff;
}
#wizard-notes-notes, #project-notes-notes{
    display:none;
}
.wizard-table-custom-warranties{
    display:none;
}
.close-new-quote:hover > div.next-step-button{
	font-size:1.1em;
	color:darkred!important;
	opacity:1!important;
}
.close-new-quote:hover > i, .close-new-quote:hover >i{
	font-size:4.2em;
	color:darkred!important;
	opacity:1!important;
}
.new-quote-next-button:hover > div.next-step-button,.new-quote-prev-button:hover >div.next-step-button{
	font-size:1.1em;
	color:#008000!important;
}
.new-quote-next-button:hover > i,.new-quote-prev-button:hover >i{
	font-size:4.2em;
	color:#008000!important;
}
.new-quote-next-button i,.new-quote-prev-button i, .new-quote-next-button div.next-step-button,.new-quote-prev-button div.next-step-button{
	transition: color 200ms, font-size 200ms;
}

.close-new-quote i, .close-new-quote div.next-step-button{
	transition: color 200ms, font-size 200ms;
}


.new-quote-usage-img img{
	width:90%;
}
.new-quote-usage-img{
	border:1px solid #fff;
	transform: scale(1);
	transition: transform 0.3s ease;
}

.cl-rates{
	float:left;
	text-align:left;
}
.selectedloadprofile{
	box-shadow: 0 0 10px #666;
	transform: scale(1.1);
}
footnote{
	font-size:0.8rem;
	text-align:left;
}
.new-quote-populate-from{
	font-size:1.1rem;
	text-align:left;

}
.wizard-h2{
	font-size:1.8rem;
	text-align:left;

}
.bill-wizard-table{
	border:1px solid lightgrey;
}

.quotemenuscreen ul.center-display-wizard{
	display: block;
	padding-top: 10px;
	padding-left: 0px;
	width: 60%;
	margin: 0 auto;
	text-align: center;
}
.transaction-history-table{
	table-layout: fixed ;
	width: 100% ;
	margin-top: 10px;
}
.transaction-history-table tr > th{
	width:12.5%; border:1px solid #666; padding:0.5%; background:#dfdfdf;font-weight:bold;text-align:left;
}
.transaction-history-table tr > td{
	width:12.5%; border:1px solid #666; padding:0.5%; background:#fff;
}
.backShadow{
	box-shadow: 0px 0px 5px #afafaf;
	border:4px solid #fff;
}
.backShadowYellow{
	box-shadow: 0px 0px 5px yellow;
	border:4px solid #fff;
}

button.close-button{
	display:inline-block;
	text-align:center;
	color:#efefef;
	background:darkred;
}
.custom-site:hover{
	
	color:#0D6EFD!important;
}
.skip-new-quote-setup:hover{
	color:#0D6EFD!important;
}
.quotemenuscreen .halfy input,.quotemenuscreen .thirdy input{
	height:40px;
	font-size:1.2rem;
}
.quotemenuscreen .thirdy{
	width:30%;
	padding:1.5%
}
.quotemenuscreen .qtry{
	font-size:0.6rem;
	width:22%;
	padding:1%;
}
.quotemenuscreen input, .quotemenuscreen select, .quotemenuscreen textarea{
	font-family:'Roboto';
}
.quotemenuscreen .qtry .pbill-selected{
	color: #345D9D;

}
#dev-server{
	position:fixed;
	z-index:1000000000000;
	background:red;
	color:#fff;
	height:40px;
	line-height:40px;
	text-align:center;
	width:100vw;
	font-weight:bold;
	bottom:0px;
	display:none;
}
#watching-peter{
	position:fixed;
	z-index:1000000000000;
	background:black;
	color:#666;
	height:60px;
	text-align:center;
	width:60vw;
	margin-left: 20vw;
	margin-right: 20vw;
	font-weight:bold;
	bottom:0px;
}

#new_customer_status_select{
	height:60px;
	font-size:1.5rem;
}

.large-round-list{
	display:inline-block;
	width:200px;
	height:200px;
	background:#345D9D;
	color:#fff;
	text-align:center;
	font-size:1.5rem;
	margin:3%;
	padding: 2%;
	top:50px;
	border-radius:200px;
	vertical-align:middle;
}
.customer-choice-button{
	background: #345D9D;
	padding:15px 5px;
	font-size:1rem;
	border-radius:0px;
	color:#fff;
	width:99%;
	border:1px solid #eee;
	margin:0 auto;
	display:block;
	box-sizing:border-box;
}
.customer-choice-button:hover{
	background: #547DbD;
}

#page-list li.inactive-page-button{
	color:#adadad!important;
}
#page-list li.inactive-page-button .active-page{
        opacity: 1;
}
#existing-customer-wizard, #new-customer-wizard{
	display:none;
}
#proposal-options-dropdown-button.show{
    background-color:#000!important;
}
#existing-customer-wizard{
	height:90%;
	width:60%;
	background:#fff;
	padding:5% 20%;
	z-index:1000;
	position:fixed;
	overflow: scroll;
	top:0;
	left:0;

}
.open-this-loadprofile{
    display:inline-block;
    vertical-align: top;
    overflow-x:hidden;
    width:75%;
}
#wizard-distributor{
	display:none;
}
.load-profile-other-options{
    display:inline-block;
    vertical-align: top;
}
#wizard-roof-type, #wizard-roof-height, #input-roof-type, #input-roof-height, #input-monitoring-type, #wizard-monitoring-type{
	display:none;
	/* text-align: left;
	height:40px;
	line-height:40px;
	font-size:0.9rem; */
}
.circle-icon{
    width:0.9rem;
    height:0.9rem;
    font-size:0.6rem;
    line-height:0.9rem;
    border-radius:0.9rem;
    border:1px solid #666;
    float:right;
    text-align:center;
    margin-left:2px;
}
.circle-icon:hover{
    background:#345D9D;
    color:#fff;
}
#existing-customer-wizard ul{
	margin:0;
	padding:0;
}
.generatedDropdown{
	position:fixed;
	height:150px;
	background:#fff;
	color:#333;
	border:1px solid #dfdfdf;
	border-radius: 10px;
	padding:5px;
	box-sizing: border-box;
	z-index:1;
	overflow-y:scroll;
}
.generatedDropdown ul, .generatedDropdown ul li{
	list-style: none;
	margin:0;
	padding:4px;
	cursor: pointer;
	font-size:0.9rem;
}
.generatedDropdown ul li{
	 height:30px;
 }
li.time-is-selected{
	background:rgba(0,15,100,0.2);
}
.generatedDropdown ul li:hover{
	background:rgba(0,15,100,0.1);
}
#existing-customer-wizard ul li{
	height:2rem;
	width:96%;
	background:#eee;
	border-bottom:#999;
	font-size:1.5rem;
	list-style-type: none;
	margin:0;
	padding:6px 2%;
	vertical-align:middle;
}
#existing-customer-wizard ul li:hover{

	background:#fff;

}



.status-options{
	display:inline-block;
	max-width:30%;
	height:24px;
	padding:0 8px;
	margin:0 2px 0 2px;
	border:2px solid #b9b9b9;
	background:#008000;
	color:#fff;
	border-radius:4px;
	vertical-align:middle;
}
.quote-list-customer{
color:#345D9D;
}
.quote-list-customer:hover{
color:#567fbf;
}
.record-content hr{
	border: 0;
	border-bottom: 1px solid #000;
	background: #999;
}
.record-small{
	font-size:0.7rem;
	color:#888;
}

.inactive-option{
	background:#ccc;
}
.user-list-details{
	width:100%;
	display:inline-block;
}
.user-list-record{
	padding:8px;
	background:#efefef;
	margin-bottom:3px;
	display:block;
}
.user-list-options{
	width:20%;
	display:inline-block;
}
.price-block{
	display:block;
	margin:0 auto;
	width:232px;
}


#lineCont {
	width: 90vw;
	height: 10px;
	z-index:6;
	bottom:46px;
}

#nearmapTimeline {
	height: 6px;
	width: 50%;
	left:-20%;
	background: white;
	border-radius: 5px;
	margin: auto;
	top: 50%;
	border: 1px solid #dfdfdf;
	transform: translateY(-50%);
	position: relative;
	display:none;

}
.previous-timelineNav, .next-timelineNav{
	width:50%;
	display: inline-block;
}
.previous-timelineNav:hover, .next-timelineNav:hover{
	background-color: black;
	color:white;
}

#publish-live-link {
    transition: box-shadow 0.3s ease-in-out;
    animation: pulse-animation 1.3s infinite alternate;
}


@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 4px rgba(255, 165, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 165, 0, 0.9);
    }
}


#timelineNav {
	height: 26px;
    width: 100px;
    left: 57%;
    top: -7px;
    background: white;
    border-radius: 5px;
    /* margin: auto; */
    bottom: 0;
    /* transform: translateY(-50%); */
    position: absolute;
    /* vertical-align: top; */
    text-align: center;
    line-height: 26px;
}
#span {
	display: none;
	width: 70%;
	margin: auto;
	margin-top: 25%;
	text-align: center;
	color: white;
}

.timelineCircle {
	width: 8px;
    height: 20px;
    background: #FAB82F;
    border-radius: 5px;
    position: absolute;
    top: -7px;
    border: 2px solid white;
    cursor: pointer;
    transition: all 0.1s ease-out;
}
.activeTimeline{
	border: 3px solid #FAB82F;
	transition: all 0.1s ease-out;
}
.timelineCircle:before {
	 content: '';
	 width: 10px;
	 height: 10px;
	 background: #fff;
	 position: absolute;
	 border-radius: 100%;
	 top: 2px;
	 left: 2px;
	 display: none;
 }
.popupSpan {
	width: auto;
	height: auto;
	padding: 4px 10px;
	background:rgba(0,0,0,0.3);
	white-space: nowrap;
	display: inline-block;
	color: white;
	position: absolute;
	top: -40px;
	left: -75px;
	display: none;
	transition: all 0.1s ease-out;
}
.choose-panel-option:hover > div p.choose-panel-model{
	color:darkorange;
}
.choose-panel-model{
	font-size:1.3rem;
	font-weight:bold;
}
.popupSpan.hover:before, .popupSpan.activeTimeline:before {
					 display: block;
				 }
.popupSpan.hover .popupSpan, .popupSpan.activeTimeline .popupSpan {
						 display: block;
					 }
.popupSpan.activeTimeline .popupSpan {
	 top: -40px;

}
.sp-blue-bg{
    background-color: #2387d6;
}
a.sp-header-links{
    color:#fff!important;
    letter-spacing:1px;
    font-weight:normal;
}
.sp-header-menu{
    color:#fff!important;
}

#ai-insights-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    background: linear-gradient(135deg, #ff6ec4, #7873f5, #4dabf7, #b2f5ea, #7873f5);
    background-size: 300% 300%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: all 0.3s ease;
    animation: gradient-shift 8s ease infinite;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
.admin-dashboard-section {
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin: 1.5rem 0;
}

.admin-icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-card {
    background: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.bg-gradient-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.category-icon {
    width: 32px;
    height: 32px;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-action {
    border: none;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 80px;
    position: relative;
    overflow: hidden;
}

.btn-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-action:hover::before {
    left: 100%;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.btn-content {
    flex: 1;
}

.btn-label {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.btn-description {
    font-size: 0.875rem;
    line-height: 1.3;
    opacity: 0.8;
}

.admin-header h2 {
    font-size: 1.75rem;
    letter-spacing: -0.025em;
}

.admin-header p {
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .admin-dashboard-section {
        padding: 1.5rem;
        margin: 1rem 0;
    }
    
    .btn-action {
        min-height: 70px;
        padding: 0.875rem;
    }
    
    .btn-icon {
        width: 36px;
        height: 36px;
    }
    
    .admin-header h2 {
        font-size: 1.5rem;
    }
}

/* Button color variants */
.btn-primary.btn-action { background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%); }
.btn-success.btn-action { background: linear-gradient(135deg, #198754 0%, #146c43 100%); }
.btn-warning.btn-action { background: linear-gradient(135deg, #ffc107 0%, #d39e00 100%); }
.btn-danger.btn-action { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%); }
.btn-dark.btn-action { background: linear-gradient(135deg, #212529 0%, #000000 100%); }
#ai-insights-btn:hover {
    transform: translateY(-2px);
	background-position: 100% 50%;
}

#ai-insights-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(120, 115, 245, 0.4);
}

#ai-insights-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    opacity: 0.6;
}
/* AI Insights Modal Styling */
#ai-insights-modal .modal-body {
	max-height: 70vh;
	overflow-y: auto;
}

#ai-insights-modal .modal-body h3 {
	color: #2c7be5;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
}

#ai-insights-modal .modal-body ul {
	margin-bottom: 1.5rem;
}

#ai-insights-modal .modal-body li {
	margin-bottom: 0.5rem;
}

#ai-insights-modal .highlight {
	background-color: rgba(44, 123, 229, 0.1);
	padding: 1rem;
	border-radius: 0.375rem;
	margin: 1rem 0;
}

/* Badge for cached content */
.cached-badge {
	font-size: 0.75rem;
	background-color: #f8f9fa;
	color: #6c757d;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	margin-left: 0.5rem;
}
#publish-div{
	display:none;
	height:110px;
	vertical-align: middle;
	position:fixed;
	z-index:49;
	bottom:20px;
	right:20px;
	cursor:pointer;
	cursor:hand;
}

#terms-button-container{
	display:none;
	height:50px;
	vertical-align: middle;
	z-index:49;
	cursor:pointer;
	cursor:hand;
        text-align:center;
        width:100%;
}
#publish-content ul li:hover > .icon-wrap{
	background:orange;
}
#publish-content ul li:hover > p{
	color:orange;
}
#publish-content .icon-wrap{
	width:56px;
	height: 56px;
	border-radius:56px;
	background:#345D9D;
	color:#fff;
	margin:10px auto;
	text-align:center;
	line-height:67px;

	-moz-transition: background-color 200ms ease-in-out;
	-o-transition: background-color 200ms ease-in-out;
	-webkit-transition: background-color 200ms ease-in-out;
	transition: background-color 200ms ease-in-out;
}
button.basic-button{
	padding: 2px 8px;
	margin:0;
	font-size:0.8rem;
	font-weight: normal;
}
#publish-content ul{
	margin:0;
	list-style: none;
	text-align: center;
	width: 100%;
	padding: 0;
	display:table;

}
#publish-content ul li{
	display:table-cell;
	list-style: none;
	text-align:center;
	width: 20%;
}
#publish-content ul li p{
	font-size: 0.8rem;
	font-weight: bold;
	color: #345D9D;
	text-align: center;

	-moz-transition: color 200ms ease-in-out;
	-o-transition: color 200ms ease-in-out;
	-webkit-transition: color 200ms ease-in-out;
	transition: color 200ms ease-in-out;
}
#publish-button{

	position:relative;
	width:130px;
	font-size:1.1rem;
	vertical-align:middle;
	display:table-cell;
}
.floating-section-popout{
    margin-left:105%;
    bottom:40px;
    position:absolute;
        min-width:100%;
}
.major-new-div{
	position:absolute;
	z-index:49;
	bottom:20px;
	left:20px;
	cursor:pointer;
	cursor:hand;
}
.default-profile-selection{
    position:relative;
    color:#efefef;
    background:#345D9D;
    height:220px;
    width:220px;
    border-radius:140px;
    font-size:1rem;
    box-shadow:1px 0px 4px #535353;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
}
.default-profile-selection:hover {

    background:#547DbD;
}

.tiny-input{
	width:20%;
}
#my-items-menu{
	width:100%;
	left:0;
	box-sizing:border-box;
	padding:0 8%;
	height:100vh;
	overflow-y: scroll;
}
#my-items-menu ul{
	padding-left:0;
}
#my-items-menu ul li{
	list-style:none;
}
form > div {
  position: relative;
}
form > div > label {
  position: absolute;
}
form.go-bottom label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: 0.2s;
}
form.go-bottom input:focus + label{
  top: 100%;
  margin-top: -16px;
}
.tiny-text-location{
	font-size:0.7rem;
	text-transform:uppercase;
}
.thin-form{
	width:40%;
	display:block;
	margin:0 auto;
}
fieldset.register-form{
	min-width:800px;
	display:block;
	margin:0 auto;
}
.register-form-section{
	display:inline-block;
	vertical-align:top;
	width:32.5%;
}
.input-auto-width{width:auto;}
input.input-half-width{width:69%!important;}
.half-inline{
	display:inline-block;
	width:46%;
	padding:2%;
	vertical-align:top;
}
.third-inline{
	display:inline-block;
	width:32%;

}
.submit-content{text-align:center!important;}
input.register-submit{
	padding:6px 10px!important;
	font-size:1.1rem!important;
	text-align:center!important;
	text-transform:uppercase;
	background: rgba(34,210,68,0.3);
	float:right;
	color:rgba(14,110,48,1);
	margin-right:3%;
	height:50px!important;
	width:auto!important;
	font-weight:bold;
}
.register-submit:hover{
	cursor:pointer;
	background: rgba(34,210,68,0.4);
}
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.inputfile + label {
	text-transform:uppercase;
    font-size: 0.7em;
    font-weight: 400;
    color: white;
    background-color: #345D9D;
    display: inline-block;
	cursor: pointer; /* "hand" cursor */
}
.inputfile:focus + label {
	/*outline: 1px dotted #000;*/
	outline: -webkit-focus-ring-color auto 5px;
}
.calendar-schedule-row:hover{
	background:rgba(0,0,0,0.05);
}
.scrollable-calendar-container{
	padding:0;
	overflow:auto;
        overflow-y:scroll;
	width:100%;
        max-height:80vh;
	box-sizing: border-box;
}
.scrollable-calendar{
	position:relative
}
.btn-outline-gray{
    border:1px solid #999;
	color:#999;
}
.verify-sms{
    display:none;
}
.btn-outline-gray:hover{
	color:#333;
}
#set-lighting-tou-future{
    display:none;
}
.slow-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}
.btn-outline-gray-white-bg{
    border:3px solid #999;
    background:#fff;
    color:#999;
}
.btn-orange-no-outline{
    background-color: orange;
    color: #fff;
}
.special-annual{
    visibility: hidden;
}
.btn-orange-no-outline:hover{
    color:#fff;
    background-color:darkorange;
}
.btn-outline-gray-white-bg:hover{
    color:#333;
}
.btn-outline-orange{
	border:3px solid orange;
	color:orange;
}
.btn-outline-orange:hover{
	color:white;
	background-color:orange;
}
.btn-orange-outline{
	border:3px solid orange;
	color:orange;
}
.btn-orange-outline:hover{
	color:black;
	border-color:black;
}

/* ===========================
   CUSTOMER CARDS STYLES
   =========================== */

.customer-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.customer-card:hover {
    border-color: #f97316;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15);
    transform: translateY(-2px);
}

.customer-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.customer-type-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.customer-type-icon i {
    font-size: 28px;
    color: white;
}

.customer-main-info {
    flex: 1;
    min-width: 0;
}

.customer-name {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.3;
}


.customer-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.customer-btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid;
}

.customer-btn-edit {
    background: white;
    color: #3b82f6;
    border-color: #bfdbfe;
}

.customer-btn-edit:hover {
    background: #dbeafe;
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.customer-btn-delete {
    background: white;
    color: #ef4444;
    border-color: #fecaca;
}

.customer-btn-delete:hover {
    background: #fee2e2;
    border-color: #ef4444;
    transform: translateY(-2px);
}

.customer-details {
    margin-top: 16px;
}

.customer-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.customer-detail-row:last-child {
    border-bottom: none;
}

.customer-detail-icon {
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
    font-size: 14px;
}

.customer-detail-content {
    flex: 1;
    min-width: 0;
}

.customer-detail-content a {
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.customer-detail-content a:hover {
    color: #f97316;
}

.customer-projects-section {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-top: 4px;
}

.customer-project-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 500;
}

.customer-project-item:last-child {
    margin-bottom: 0;
}

.customer-project-item:hover {
    border-color: #f97316;
    background: #fff7ed;
    transform: translateX(4px);
}

.customer-project-item i {
    color: #f97316;
    font-size: 12px;
}

.customer-project-size {
    font-weight: 700;
    color: #1e293b;
}

.customer-project-id {
    color: #64748b;
    font-size: 12px;
}

.customer-project-name {
    color: #475569;
    flex: 1;
}

.customer-no-projects {
    text-align: center;
    padding: 16px;
    color: #94a3b8;
    font-size: 14px;
    font-style: italic;
}

.customer-doc-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.customer-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.customer-status-badge.status-active {
    background: #dcfce7;
    color: #166534;
}

.customer-status-badge.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.customer-status-badge.status-complete {
    background: #dbeafe;
    color: #1e40af;
}

/* Empty State */
.customer-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.customer-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.customer-empty-state p {
    font-size: 15px;
    margin: 0;
}

/* Sortable placeholder */
.customer-card-placeholder {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    height: 100px;
    margin-bottom: 16px;
}

/* Hidden utility */
.hidden {
    display: none;
}

/* Responsive */
@media (max-width: 767px) {
    .customer-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .customer-actions {
        width: 100%;
    }
    
    .customer-btn {
        flex: 1;
        justify-content: center;
    }
}
/* Unified Project Card */
.unified-project-card {
    border-radius: 20px;
    overflow: hidden;
    background: white;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Credits Section */
.credits-icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.credits-icon-wrapper i {
    font-size: 28px;
    color: white;
}

.credits-display {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

/* Pricing Tags */
.pricing-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pricing-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.pricing-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pricing-tag-success {
    background: linear-gradient(135deg, #d1f4e0 0%, #a7f3d0 100%);
}

.pricing-tag-primary {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.pricing-tag-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.pricing-badge {
    font-weight: 700;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

.pricing-tag-success .pricing-badge {
    color: #059669;
}

.pricing-tag-primary .pricing-badge {
    color: #2563eb;
}

.pricing-tag-warning .pricing-badge {
    color: #d97706;
}

.pricing-tag small {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}
.eac-square {
    width: 100% !important;
}

/* Or target the specific autocomplete */
#volume-discount-price-item-selection.eac-square {
    width: 100% !important;
}
/* Quick Actions (Top Right) */
/* .quick-actions-grid {
    display: grid;
    gap: 10px;
} */

.btn-quick-action {
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-quick-action i {
    font-size: 16px;
}

.btn-purchase {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
}

.btn-purchase:hover {
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
    transform: translateY(-2px);
    color: white;
}

.btn-upgrade {
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.btn-upgrade:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-2px);
}
.btn.btn-contact-admin:hover {
	background: #e2e8f0;
	color: #475569;
	transform: translateY(-2px);
}
.btn-contact-admin {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.admin-note {
    display: block;
    color: #94a3b8;
    font-size: 12px;
}

/* Card Divider */
.card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
    margin: 0 24px;
}

/* Primary Actions Section */
.primary-actions-section {
    background: linear-gradient(180deg, #fafafa 0%, white 100%);
}

/* Primary Action Buttons (Start & Open) */
.btn-primary-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-primary-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-primary-action:hover::before {
    left: 100%;
}

.btn-primary-action:hover {
    border-color: #f97316;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.15);
}

.btn-primary-action:active {
    transform: translateY(-1px);
}

.btn-primary-action:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: #f8fafc;
}

.btn-primary-action:disabled:hover {
    transform: none;
    border-color: #e2e8f0;
    box-shadow: none;
}

/* Action Icon */
.action-icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.btn-primary-action:hover .action-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.action-icon-wrapper i {
    font-size: 28px;
    color: white;
}

.action-icon-wrapper.disabled {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
}

/* Action Content */
.action-content {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.action-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    display: block;
    line-height: 1.2;
}



/* ========================================
   REPORTING CONTROLS STYLES
   ======================================== */

.reporting-controls-wrapper {
    margin-bottom: 24px;
}

/* Reports Badge */
.reports-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
}

.reports-badge i {
    font-size: 20px;
}

/* Filter Dropdowns */
.filter-dropdown-wrapper {
    display: flex;
    align-items: stretch;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.filter-dropdown-wrapper:hover {
    border-color: #f97316;
}

.filter-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
    color: #64748b;
    margin: 0;
}

.filter-label i {
    font-size: 18px;
}

.btn-filter {
    padding: 12px 20px;
    border: none;
    background: white;
    color: #1e293b;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
    text-align: left;
    appearance: none;
}

.btn-filter.dropdown-toggle::after {
    float: right;
    margin-top: 8px;
}

.btn-filter:hover,
.btn-filter:focus {
    background: #f8fafc;
    outline: none;
}

.btn-filter option {
    padding: 8px;
}

/* Dropdown Menu Styling */
.dropdown-menu-modern {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    margin-top: 8px;
    min-width: 250px;
}

.dropdown-menu-modern li {
    list-style: none;
    margin-bottom: 4px;
}

.filter-check-item {
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.filter-check-item:hover {
    background: #f8fafc;
}

.filter-check-item .form-check-input {
    cursor: pointer;
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    margin-top: 2px;
}

.filter-check-item .form-check-input:checked {
    background-color: #f97316;
    border-color: #f97316;
}

.filter-check-item .form-check-label {
    cursor: pointer;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    margin-left: 4px;
}

/* ========================================
   REPORTING SUMMARIES STYLES
   ======================================== */

.summaries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Summary Card */
.summary-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.summary-card-inner {
    padding: 24px;
}

/* Summary Header */
.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.summary-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-icon-wrapper i {
    font-size: 28px;
    color: white;
}

.summary-icon-projects {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.summary-icon-capacity {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.summary-icon-signed {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Summary Trend Badge */
.summary-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: help;
}

.trend-icon {
    font-size: 12px;
}

/* Positive/Negative Trends */
.summary-trend.trend-positive {
    background: #d1fae5;
    border-color: #a7f3d0;
    color: #059669;
}

.summary-trend.trend-positive .trend-icon {
    color: #059669;
}

.summary-trend.trend-negative {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.summary-trend.trend-negative .trend-icon {
    color: #dc2626;
}

/* Summary Body */
.summary-body {
    text-align: center;
}

.summary-value {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: #1e293b;
    margin-bottom: 12px;
}

.summary-unit {
    font-size: 2rem;
    font-weight: 700;
    color: #64748b;
    margin-left: 4px;
}

.summary-label {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding-top: 12px;
    border-top: 2px solid #f1f5f9;
}

/* Responsive Design */
@media (max-width: 991px) {
    .summaries-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }
    
    .summary-value {
        font-size: 3rem;
    }
    
    .summary-unit {
        font-size: 1.75rem;
    }
}

@media (max-width: 767px) {
    .reporting-controls-wrapper .row {
        flex-direction: column;
    }
    
    .reporting-controls-wrapper .col-auto {
        width: 100%;
    }
    
    .filter-dropdown-wrapper {
        width: 100%;
    }
    
    .btn-filter {
        width: 100%;
    }
    
    .reports-badge {
        width: 100%;
        justify-content: center;
    }
    
    .summaries-grid {
        grid-template-columns: 1fr;
    }
    
    .summary-value {
        font-size: 2.5rem;
    }
    
    .summary-icon-wrapper {
        width: 48px;
        height: 48px;
    }
    
    .summary-icon-wrapper i {
        font-size: 24px;
    }
}

/* Animation for updating values */
@keyframes valueUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: #f97316; }
    100% { transform: scale(1); }
}

.summary-value.updating {
    animation: valueUpdate 0.5s ease;
}


/* ========================================
   CHARTS & TABLES CONTAINER
   ======================================== */

.charts-tables-container {
    margin-top: 24px;
}

/* Chart Card */
.chart-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chart-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.chart-card-full {
    /* Full width card styling if needed */
}

/* Chart Card Header */
.chart-card-header {
    padding: 24px;
    background: linear-gradient(180deg, #fafafa 0%, white 100%);
    border-bottom: 2px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.chart-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.chart-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chart-icon-wrapper i {
    font-size: 24px;
    color: white;
}

.chart-icon-pie {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.chart-icon-bar {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.chart-icon-line {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.chart-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.chart-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 4px 0 0 0;
    font-weight: 500;
}

/* View Toggle Buttons */
.chart-view-toggle {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    margin: 0;
    list-style: none;
}

.chart-view-toggle .nav-item {
    display: flex;
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.toggle-btn i {
    font-size: 16px;
}

.toggle-btn:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.5);
}

.toggle-btn.active {
    background: white;
    color: #f97316;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toggle-btn span {
    display: inline;
}

/* Chart Card Body */
.chart-card-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chart-card-body .tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for proper collapse */
}

.chart-card-body .tab-pane {
    flex: 1;
    display: none; /* Hide by default */
}
.chart-card-body .tab-pane.active {
    display: flex; /* Show when active */
    flex-direction: column;
}

/* Chart Disclaimer */
.chart-disclaimer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #92400e;
}

.chart-disclaimer i {
    font-size: 16px;
    color: #f59e0b;
    flex-shrink: 0;
}
/* ========================================
   DASHBOARD TABS STYLING
   ======================================== */


/* Dashboard Nav Tabs */
.dashboard-nav-tabs {
    display: flex;
    gap: 8px;
    border: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.dashboard-nav-tabs .nav-item {
    display: flex;
}

/* Dashboard Tab Buttons */
.dashboard-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: white;
    border: 2px solid #e2e8f0;
	border-bottom-color: #f97316;
    border-radius: 12px 12px 0 0;
    color: #64748b;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
}

.dashboard-tab-btn i {
    font-size: 18px;
}

.dashboard-tab-btn:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}

.dashboard-tab-btn.active {
    background: white;
    color: #f97316;
    border-color: #f97316;
    border-bottom-color: white;
    z-index: 1;
}

.dashboard-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
}

.dashboard-tab-btn.active i {
    color: #f97316;
}

/* Tab Content */
.dashboard-tab-content {
    border: none;
    margin-top: -2px;
}

.dashboard-tab-content .tab-pane {
    display: none;
}

.dashboard-tab-content .tab-pane.active {
    display: block;
}

/* Tab Panel Card */
.tab-panel-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 0 16px 16px 16px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Section Heading */
.section-heading {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 24px 0;
}

/* Section Divider */
.section-divider {
    margin: 24px 0;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
}

/* Workflow Actions */
.workflow-actions {
    margin-bottom: 24px;
}

.workflow-action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.btn-action-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-action-secondary:hover {
    background: #f8fafc;
    border-color: #f97316;
    color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-action-secondary i {
    font-size: 16px;
}

/* Modern Input Styling */
.modern-input {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.modern-input:hover {
    border-color: #cbd5e1;
}

.modern-input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
    outline: none;
}

/* Performance Filter Buttons */
.performance-filter-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.btn-filter-option {
    padding: 10px 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-filter-option:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-filter-option.active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #f97316;
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* Exit Workflow Button */
.exit-workflow-button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: #fee2e2;
    border: 2px solid #fecaca;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.exit-workflow-button:hover {
    background: #fecaca;
    border-color: #fca5a5;
    transform: scale(1.1);
}

.exit-workflow-button i {
    color: #dc2626;
    font-size: 18px;
}

/* Responsive Design */
@media (max-width: 991px) {
    .dashboard-tab-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .dashboard-tab-btn i {
        font-size: 16px;
    }
    
    .tab-panel-card {
        padding: 24px;
    }
    
    .section-heading {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .dashboard-nav-tabs {
        flex-direction: column;
        gap: 4px;
    }
    
    .dashboard-tab-btn {
        border-radius: 12px;
        width: 100%;
        justify-content: flex-start;
    }
    
    .dashboard-tab-btn.active::after {
        display: none;
    }
    
    .tab-panel-card {
        border-radius: 16px;
        padding: 20px;
    }
    
    .dashboard-tab-btn span {
        font-size: 14px;
    }
}

/* Chart and Table Containers */
.chart-container {
    min-height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 12px;
    padding: 20px;
    flex: 1;
}

.chart-container-large {
    min-height: 400px;
}

.table-container {
    min-height: 300px;
    width: 100%;
    overflow-x: auto;
    background: #fafafa;
    border-radius: 12px;
    padding: 20px;
    flex: 1;
}

/* Table Styling (when data is loaded) */
.table-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-container th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.table-container th:first-child {
    border-top-left-radius: 8px;
}

.table-container th:last-child {
    border-top-right-radius: 8px;
}

.table-container td {
    padding: 12px 16px;
    color: #1e293b;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.table-container tr:last-child td {
    border-bottom: none;
}

.table-container tr:hover td {
    background: #f8fafc;
}

/* Loading Placeholder */
.chart-container:empty::before,
.table-container:empty::before {
    content: 'Loading data...';
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 991px) {
    .chart-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .chart-view-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .chart-title {
        font-size: 18px;
    }
    
    .chart-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .chart-icon-wrapper i {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .chart-card-header {
        padding: 20px;
    }
    
    .chart-card-body {
        padding: 20px;
    }
    
    .chart-header-content {
        gap: 12px;
    }
    
    .toggle-btn span {
        display: none;
    }
    
    .toggle-btn {
        padding: 10px 12px;
    }
    
    .chart-container {
        min-height: 250px;
        padding: 16px;
    }
    
    .chart-container-large {
        min-height: 300px;
    }
    
    .chart-disclaimer {
        font-size: 12px;
        padding: 10px 12px;
    }
}

@media (max-width: 575px) {
    .chart-view-toggle {
        padding: 3px;
        gap: 4px;
    }
    
    .toggle-btn {
        padding: 8px 10px;
    }
    
    .toggle-btn i {
        font-size: 14px;
    }
}

/* Animation for tab transitions */
.tab-pane {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Empty State Styling */
.chart-container.empty-state,
.table-container.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #94a3b8;
}

.empty-state i {
    font-size: 48px;
    opacity: 0.5;
}
.empty-state #new-quote-startproject-button i{
	font-size:medium;
}
.empty-state p {
    margin: 0;
    font-weight: 500;
}
/* ========================================
   REPORTING CONTROLS - FINAL FIX v2
   ======================================== */

.reporting-controls-wrapper {
    margin-bottom: 24px;
}

/* Controls Card */
.controls-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 16px 24px;
}

.controls-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.control-item {
    display: flex;
    align-items: center;
}

/* Reports Badge */
.reports-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
    white-space: nowrap;
}

.reports-badge i {
    font-size: 20px;
}

/* Custom Filter Dropdown - outer container can be visible */
.custom-filter-dropdown {
    display: flex;
    align-items: stretch;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: visible;
    transition: all 0.3s ease;
    position: relative;
}

.custom-filter-dropdown:hover {
    border-color: #f97316;
}

/* Inner wrapper clips corners properly */
.dropdown-button-wrapper {
    display: flex;
    align-items: stretch;
    flex: 1;
    overflow: hidden;
    border-radius: 10px; /* Slightly smaller than parent to stay inside border */
}

.dropdown-button-wrapper .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
    color: #64748b;
    flex-shrink: 0;
}

.dropdown-button-wrapper .filter-icon i {
    font-size: 18px;
}

/* Bootstrap dropdown wrapper - keep for JS functionality */
.dropdown-button-wrapper .btn-group {
    position: static;
    display: flex;
    flex: 1;
}

/* Override ALL Bootstrap button styles */
button.custom-dropdown-button,
button.custom-dropdown-button.dropdown-toggle,
.custom-dropdown-button,
.custom-dropdown-button.dropdown-toggle,
#dashboard_reports_select_users_button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    background: white !important;
    background-color: white !important;
    border: none !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    min-width: 180px !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
    flex: 1;
}

button.custom-dropdown-button:hover,
button.custom-dropdown-button.dropdown-toggle:hover,
.custom-dropdown-button:hover,
.custom-dropdown-button.dropdown-toggle:hover,
#dashboard_reports_select_users_button:hover {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border: none !important;
    box-shadow: none !important;
}

button.custom-dropdown-button:focus,
button.custom-dropdown-button:active,
button.custom-dropdown-button.show,
button.custom-dropdown-button.dropdown-toggle:focus,
button.custom-dropdown-button.dropdown-toggle:active,
button.custom-dropdown-button.dropdown-toggle.show,
.custom-dropdown-button:focus,
.custom-dropdown-button:active,
.custom-dropdown-button.show,
#dashboard_reports_select_users_button:focus,
#dashboard_reports_select_users_button:active,
#dashboard_reports_select_users_button.show {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hide Bootstrap's default dropdown caret */
.custom-dropdown-button.dropdown-toggle::after,
#dashboard_reports_select_users_button::after {
    display: none !important;
}

.custom-dropdown-button .button-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1e293b !important;
}

.custom-dropdown-button .dropdown-arrow {
    font-size: 14px;
    color: #94a3b8 !important;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.custom-dropdown-button[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Custom Dropdown Menu */
.dropdown-menu.custom-dropdown-menu {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
    margin-top: 8px !important;
    min-width: 280px !important;
    max-height: 400px;
    overflow-y: auto;
}

.custom-dropdown-menu li {
    list-style: none;
    margin-bottom: 2px;
}

.custom-dropdown-menu li:last-child {
    margin-bottom: 0;
}

.custom-checkbox-item {
    padding: 12px 14px;
	padding-left:30px; 
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.custom-checkbox-item:hover {
    background: #f8fafc !important;
}

.custom-checkbox-item .form-check-input {
    cursor: pointer !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #cbd5e1 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    background-color: white !important;
    flex-shrink: 0;
}

.custom-checkbox-item .form-check-input:checked {
    background-color: #f97316 !important;
    border-color: #f97316 !important;
}

.custom-checkbox-item .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25) !important;
    border-color: #f97316 !important;
}

.custom-checkbox-item .form-check-label {
    cursor: pointer !important;
    font-size: 14px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    margin-left: 10px !important;
    margin-bottom: 0 !important;
    user-select: none;
}

.custom-checkbox-item .form-check-label:hover {
    color: #1e293b !important;
}

/* Custom Select */
.custom-filter-select {
    display: flex;
    align-items: stretch;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.custom-filter-select:hover {
    border-color: #f97316;
}

.custom-filter-select .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
    color: #64748b;
}

.custom-filter-select .filter-icon i {
    font-size: 18px;
}

.custom-select,
#dashboard_reports_select_timeframe {
    padding: 12px 40px 12px 20px !important;
    background: white !important;
    background-color: white !important;
    border: none !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    min-width: 180px;
    outline: none !important;
    box-shadow: none !important;
    flex: 1;
}

.custom-select:hover,
#dashboard_reports_select_timeframe:hover {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

.custom-select:focus,
#dashboard_reports_select_timeframe:focus {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

.select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

/* Scrollbar for dropdown */
.custom-dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive Design */
@media (max-width: 991px) {
    .controls-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .control-item {
        width: 100%;
    }
    
    .custom-filter-dropdown,
    .custom-filter-select {
        width: 100%;
    }
    
    button.custom-dropdown-button,
    .custom-select {
        min-width: auto !important;
        width: 100%;
    }
    
    .reports-badge {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .controls-card {
        padding: 16px;
    }
    
    .reports-badge {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    .reports-badge i {
        font-size: 18px;
    }
}

/* Custom Select Dropdown (matching user dropdown style) */
.custom-filter-select {
    display: flex;
    align-items: stretch;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: visible;
    transition: all 0.3s ease;
    position: relative;
}

.custom-filter-select:hover {
    border-color: #f97316;
}

.select-button-wrapper {
    display: flex;
    align-items: stretch;
    flex: 1;
    overflow: hidden;
    border-radius: 10px;
}

.select-button-wrapper .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
    color: #64748b;
    flex-shrink: 0;
}

.select-button-wrapper .filter-icon i {
    font-size: 18px;
}

.select-button-wrapper .dropdown {
    display: flex;
    flex: 1;
    position: static;
}

/* Select Button Styling */
button.custom-select-button,
button.custom-select-button.dropdown-toggle,
#dashboard_reports_select_timeframe_button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    background: white !important;
    background-color: white !important;
    border: none !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    min-width: 180px !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
    flex: 1;
}

button.custom-select-button:hover,
button.custom-select-button.dropdown-toggle:hover,
#dashboard_reports_select_timeframe_button:hover {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border: none !important;
    box-shadow: none !important;
}

button.custom-select-button:focus,
button.custom-select-button:active,
button.custom-select-button.show,
#dashboard_reports_select_timeframe_button:focus,
#dashboard_reports_select_timeframe_button:active,
#dashboard_reports_select_timeframe_button.show {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hide Bootstrap's caret */
.custom-select-button.dropdown-toggle::after,
#dashboard_reports_select_timeframe_button::after {
    display: none !important;
}

.custom-select-button .button-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1e293b !important;
}

.custom-select-button .dropdown-arrow {
    font-size: 14px;
    color: #94a3b8 !important;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.custom-select-button[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Select Dropdown Menu */
.dropdown-menu.custom-select-menu {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
    margin-top: 8px !important;
    min-width: 220px !important;
}

.custom-select-item {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
}

.custom-select-item:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
}

.custom-select-item.active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #92400e !important;
    font-weight: 600 !important;
}

.custom-select-item.active:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
}


/* ========================================
   CUSTOMER DASHBOARD TABLE STYLING
   ======================================== */

.customer-dashboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px;
}

.customer-dashboard-table thead th {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px 12px 0 0;
    text-align: left;
    vertical-align: top;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

.customer-dashboard-table thead th i {
    float: right;
    opacity: 0.7;
    font-size: 18px;
}

.customer-dashboard-table tbody td {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    padding: 16px;
    vertical-align: top;
}
/* Sortable Lists */
.connectedSortable {
    box-sizing: border-box;
    padding: 10px;
    border: none;
    width: 100%;
    min-height: 300px;
    height: 100%;
    list-style-type: none;
    margin: 0;
    float: left;
    margin-right: 10px;
}

.connectedSortable li {
    margin-bottom: 12px;
    padding-top: 3px;
    border-radius: 10px;
    cursor: move;
    /* Use will-change for better performance hint to browser */
    will-change: transform, box-shadow;
    /* Lighter initial shadow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Disable expensive hover effects during dragging */
#customer-dashboard-container:not(.is-dragging) .connectedSortable li:hover {
    border-color: #f97316;
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.15);
    /* Remove transform on hover - very expensive during drag */
}

/* Dragging element - keep it simple */
.connectedSortable li.ui-sortable-helper {
    opacity: 0.8;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Remove transform rotation - causes jank */
}

/* Placeholder */
.connectedSortable li.ui-sortable-placeholder {
    background: #fef3c7;
    border: 2px dashed #f97316;
    border-radius: 10px;
    visibility: visible !important;
    /* Remove transitions from placeholder */
    transition: none !important;
}

/* Disable transitions during drag */
.is-dragging .connectedSortable li {
    transition: none !important;
}

/* Workflow container styling */
#customer-dashboard-container {
    overflow-x: auto;
    padding-bottom: 20px;
}

#customer-dashboard-container::-webkit-scrollbar {
    height: 12px;
}

#customer-dashboard-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}

#customer-dashboard-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

#customer-dashboard-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Customer Form Styling */
.customer-details-card,
.customer-notes-card,
.document-upload-card,
.required-docs-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.customer-nav-pills .nav-link {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    color: #64748b;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.customer-nav-pills .nav-link:hover {
    background: #f8fafc;
    color: #1e293b;
}

.customer-nav-pills .nav-link.active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-color: #f97316;
}

.customer-nav-pills .nav-link i {
    margin-right: 8px;
}

.commercial-fields {
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 16px;
}

.contact-times-wrapper {
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
}

.time-options-group {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-time-option {
    flex: 1;
    min-width: 120px;
}

.btn-action-primary {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    color: white;
}

.customer-notes-history {
    margin-top: 20px;
}


/* ========================================
   PERFORMANCE TABLE STYLING
   ======================================== */

.performance-table-wrapper {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.performance-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.performance-table thead {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.performance-table thead th {
    padding: 20px 24px;
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    border: none;
}

.performance-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.performance-table tbody tr:hover {
    background: #f8fafc;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.performance-table tbody tr:last-child {
    border-bottom: none;
}

.performance-table tbody td {
    padding: 5px 24px;
    vertical-align: middle;
}

/* Rank-specific styling */
.performance-table tbody tr.rank-1 {
    background: linear-gradient(90deg, #fef3c7 0%, transparent 100%);
}

.performance-table tbody tr.rank-1:hover {
    background: linear-gradient(90deg, #fde68a 0%, #fef3c7 100%);
}

/* ========================================
   ACTIVITY FEED STYLING
   ======================================== */

.activity-feed-container {
    max-width: 100%;
}

/* Activity Header Card */
.activity-header-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
}

.activity-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.activity-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.activity-icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.activity-icon-wrapper i {
    font-size: 28px;
    color: white;
}

.activity-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
}

.activity-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* Activity Stats */
.activity-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.activity-stat-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.activity-stat-card:hover {
    border-color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
}

.activity-stat-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.activity-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-stat-icon {
    font-size: 18px;
    color: #f97316;
}

/* Time Controls */
.activity-time-controls {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
}

.time-controls-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.time-range-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.time-range-badge i {
    font-size: 20px;
}

.time-nav-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-time-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-time-nav:hover {
    background: #f8fafc;
    border-color: #f97316;
    color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

.btn-time-nav i {
    font-size: 16px;
}

.btn-time-nav-primary {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-color: #f97316;
}

.btn-time-nav-primary:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    border-color: #ea580c;
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

/* Activity List Section */
.activity-list-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 2px solid #e2e8f0;
}

.activity-list-header {
    padding: 20px 24px;
    background: linear-gradient(180deg, #fafafa 0%, white 100%);
    border-bottom: 2px solid #f1f5f9;
}

.activity-list-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-list-title i {
    color: #f97316;
}

.activity-list-content {
    max-height: 600px;
    overflow-y: auto;
}

.activity-list-content::-webkit-scrollbar {
    width: 10px;
}

.activity-list-content::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.activity-list-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

.activity-list-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.activity-item {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.activity-item:hover {
    background: #f8fafc;
}

.activity-item:last-child {
    border-bottom: none;
}

/* Empty State */
.activity-empty-state {
    text-align: center;
    padding: 80px 40px;
    color: #64748b;
}

.activity-empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.activity-empty-icon i {
    font-size: 40px;
    color: #94a3b8;
}

.activity-empty-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.activity-empty-description {
    font-size: 15px;
    color: #64748b;
    margin: 0;
    max-width: 400px;
    margin: 0 auto;
}

/* Filter Badge */
.filter-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.filter-info-badge i {
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 991px) {
    .activity-header-card {
        padding: 24px;
    }
    
    .activity-title {
        font-size: 24px;
    }
    
    .activity-icon-wrapper {
        width: 48px;
        height: 48px;
    }
    
    .activity-icon-wrapper i {
        font-size: 24px;
    }
    
    .activity-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .time-controls-inner {
        flex-direction: column;
        align-items: stretch;
    }
    
    .time-range-badge {
        justify-content: center;
    }
    
    .time-nav-buttons {
        width: 100%;
    }
    
    .btn-time-nav {
        flex: 1;
        justify-content: center;
    }
    
    .activity-header-top {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .activity-empty-state {
        padding: 60px 24px;
    }
}
/* User Cell */
.user-cell {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 76px; /* Match the height of other cells */
}

.rank-badge {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.rank-1 .rank-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.user-name {
    font-weight: 600;
    font-size: 16px;
    color: #1e293b;
    line-height: 1.5; /* Ensure consistent line height */
}

/* Metric Cells - Match height */
.capacity-cell,
.value-cell,
.rate-cell {
    min-height: 76px; /* Ensure all cells have same minimum height */
}
.trophy-icon {
    color: #f59e0b;
    font-size: 18px;
    margin-left: 8px;
    animation: trophy-shine 2s ease-in-out infinite;
}

@keyframes trophy-shine {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Metric Cells */
.metric-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center; /* Vertically center the content */
    min-height: 36px; /* Give it some minimum height */
}

.metric-primary {
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
    line-height: 1.4;
}

.metric-secondary {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

/* Success Rate Cell */
.success-rate {
    position: relative;
    height: 36px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.rate-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    transition: width 1s ease;
    border-radius: 8px;
}

.success-high .rate-bar {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.success-medium .rate-bar {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.success-low .rate-bar {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.rate-text {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    padding: 0 12px;
}

.success-high .rate-text {
    color: white;
}

/* Table Footer Note */
.table-footer-note {
    padding: 20px 24px;
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-size: 13px;
}

.table-footer-note i {
    color: #94a3b8;
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 991px) {
    .performance-table thead th,
    .performance-table tbody td {
        padding: 16px;
        font-size: 14px;
    }
    
    .rank-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .metric-primary {
        font-size: 14px;
    }
    
    .metric-secondary {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .performance-table-wrapper {
        overflow-x: auto;
    }
    
    .performance-table {
        min-width: 600px;
    }
    
    .user-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .table-footer-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Loading Animation */
.performance-table tbody tr {
    animation: fadeInRow 0.5s ease forwards;
    opacity: 0;
}

.performance-table tbody tr:nth-child(1) { animation-delay: 0.1s; }
.performance-table tbody tr:nth-child(2) { animation-delay: 0.2s; }
.performance-table tbody tr:nth-child(3) { animation-delay: 0.3s; }
.performance-table tbody tr:nth-child(4) { animation-delay: 0.4s; }
.performance-table tbody tr:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   MODERN NAVBAR STYLING - LARGER TEXT
   ======================================== */

.modern-navbar {
    background: white !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 16px 0; /* Increased from 12px */
    border-bottom: 2px solid #f1f5f9;
}

.modern-brand {
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.modern-brand img {
    height: 36px !important; /* Increased from 30px */
    width: auto;
}

.modern-brand:hover {
    transform: scale(1.05);
}

/* Navigation Items */
.modern-nav-items {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-nav-link {
    display: flex;
    align-items: center;
    gap: 10px; /* Increased from 8px */
    padding: 12px 20px !important; /* Increased from 10px 16px */
    color: #475569 !important;
    font-weight: 600;
    font-size: 16px; /* Increased from 15px */
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
}

.modern-nav-link i {
    font-size: 20px; /* Increased from 18px */
}

.modern-nav-link:hover {
    background: #f8fafc;
    color: #f97316 !important;
    transform: translateY(-2px);
}

.modern-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
    border-radius: 3px 3px 0 0;
    transition: width 0.3s ease;
}

.modern-nav-link:hover::after,
.modern-nav-link.active::after {
    width: 60%;
}

/* Action Buttons */
.navbar-actions {
    margin-left: 24px;
}

.btn-nav-action {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Increased from 8px */
    padding: 12px 24px; /* Increased from 10px 20px */
    border-radius: 10px;
    border: 2px solid;
    font-weight: 600;
    font-size: 15px; /* Increased from 14px */
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-nav-action i {
    font-size: 18px; /* Increased from 16px */
}

.btn-nav-leads {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    border-color: #f97316;
}

.btn-nav-leads:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

.btn-nav-stats {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: #3b82f6;
}

.btn-nav-stats:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* User Dropdown */
.user-dropdown {
    margin-left: 16px;
}

.user-dropdown-toggle {
    padding: 10px 18px !important; /* Increased from 8px 16px */
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.user-dropdown-toggle:hover {
    background: white;
    border-color: #f97316;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

/* Hide Bootstrap's default dropdown chevron */
.user-dropdown-toggle.dropdown-toggle::after {
    display: none !important;
}

.user-info-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px; /* Increased from 36px */
    height: 40px; /* Increased from 36px */
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar i {
    color: white;
    font-size: 18px; /* Increased from 16px */
}

.user-details {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}

.user-name {
    font-weight: 600;
    font-size: 15px; /* Increased from 14px */
    color: #1e293b;
}

.user-company {
    font-size: 13px; /* Increased from 12px */
    color: #64748b;
    font-weight: 500;
}

.dropdown-icon {
    font-size: 14px; /* Increased from 12px */
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.user-dropdown.show .dropdown-icon {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu-modern {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 8px;
    margin-top: 12px;
    min-width: 280px; /* Increased from 260px */
}

.dropdown-header {
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    margin-bottom: 8px;
}

.dropdown-header-user {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-header-user strong {
    color: #1e293b;
    font-size: 16px; /* Increased from 15px */
}

.dropdown-header-user small {
    font-size: 14px; /* Increased from 13px */
}

.modern-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #475569;
    font-weight: 500;
    font-size: 15px; /* Increased from 14px */
    transition: all 0.2s ease;
}

.modern-dropdown-item i {
    width: 22px; /* Increased from 20px */
    text-align: center;
    font-size: 17px; /* Increased from 16px */
    color: #64748b;
}

.modern-dropdown-item:hover {
    background: #f8fafc;
    color: #1e293b;
    transform: translateX(4px);
}

.modern-dropdown-item:hover i {
    color: #f97316;
}

.item-admin {
    color: #dc2626;
}

.item-admin:hover {
    background: #fef2f2;
    color: #dc2626;
}

.item-admin i {
    color: #dc2626;
}

.item-logout {
    color: #64748b;
}

.item-logout:hover {
    background: #fee2e2;
    color: #dc2626;
}

.item-logout:hover i {
    color: #dc2626;
}

.dropdown-divider {
    margin: 8px 0;
    border-color: #f1f5f9;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .modern-navbar {
        padding: 8px 0;
    }
    
    .navbar-actions {
        margin-left: 0;
        margin-top: 16px;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    .btn-nav-action {
        width: 100%;
        justify-content: center;
    }
    
    .user-dropdown {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
    }
    
    .user-dropdown-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .modern-nav-items {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-top: 16px;
    }
    
    .modern-nav-link {
        justify-content: flex-start;
    }
    
    .dropdown-menu-modern {
        width: 100%;
    }
}

/* Navbar Toggle Button */
.navbar-toggler {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    border-color: #f97316;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(71, 85, 105, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.btn-orange{
	border:3px solid orange;
	background-color: orange;
	color:#fff;
}
.btn-orange:hover{
	color:#fff;
	background-color:darkorange;
}
.btn-darkred-outline{
	border:1px solid #B20A00;
	color:#B20A00;
}
.btn-darkred-outline:hover{
	color:#920900;
	border:1px solid #000000!important;
}
.btn-darkred{
	border:1px solid #B20A00;
	background-color: #B20A00;
	color:#fff;
}
.btn-darkred:hover{
	color:#fff;
	background-color:#920900;
}
.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #547DbD;
}
#hide-completed-tasks{
	display:none;
}
.calendar-task-box{
	border-width: 3px;
	border-radius: 5px;
	border-style: solid;
}
.current-event-cell{
	background-color:#283a8f;
	overflow: hidden;
	color:#fff;
	opacity:0.75;
	border: 1px solid #fff;
}
.current-event-cell:hover{
	opacity:0.9;
	/*background-color:rgba(84, 125, 189,0.9);*/
}
.upload-button{
	padding:10px;
	background:blue;
	color:#fff;
	
}

#new-quote-menu, #my-items-menu{
	display: block;
	z-index: -1;
	transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: scale(0.9);
}
#new-quote-menu-2, #new-quote-menu-3, #new-quote-menu-5{
	transition: opacity 0.3s, transform 0.3s;
	overflow-y:scroll;
	z-index: -1;
}
a.handy{color:#345D9D;
}
a.handy:hover, .handy:hover{
	cursor:pointer;
}
.main-h2{
	text-transform:uppercase;
	text-align:center;
	font-size:2.3rem;
	line-height:2.6rem;
}
table.table-cell-hover td.calendar-schedule-cell:hover{
	background:#dfdfdf;
}
#floating-notes-container{
    position:absolute;
    top:100px;
    right:50px;
    display:block;
	z-index: 1;
}
#customernotes-floating{
    min-height:140px;
}
/* #floating-customer-notes h2, #floating-customer-notes h3, #floating-customer-notes p,#floating-customer-notes input{
    font-family:'Just Another Hand'!important;
} */

#access-floating-notes {
    display: none; /* Hidden by default, shown by JS if appropriate */
    vertical-align: top;
}

#floating-customer-notes {
    display: none; /* Hidden by default */
}
.sp-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: 24px; /* Controls the size */
	color: #333; /* Controls the color */
	position: relative;
  }
  
  .sp-icon::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask-size: cover;
	mask-size: cover;
  }
  
  /* Define each icon's mask */
  .sp-clock::before {
	-webkit-mask-image: url('../images/sp-icons/clock.svg');
	mask-image: url('../images/sp-icons/clock.svg');
  }
  
  .sp-user::before {
	-webkit-mask-image: url('path/to/user.svg');
	mask-image: url('path/to/user.svg');
  }
#floating-customer-notes{
    max-width:500px;
    padding:20px;
    display: none;
    width: 100%;
    min-height: 400px;
    background: #F8F0AF;
    box-shadow: 2px 2px 5px #afafaf;
    vertical-align: top;
}
.bg-white.btn-outline-primary:hover{
    background-color:#0C6FFD!important;
}
table.table-cell-hover td.task-space:hover{
	background:#dfdfdf;
}
a:hover{
	color:#303089;
}
.calendar-schedule-cell{
	cursor:pointer;
	cursor:hand;
        border-left:1px solid #afafaf;
}
.task-space{
	cursor:pointer;
	cursor:hand;
        border-left:1px solid #afafaf;
}
body{
	overflow-x: hidden;
font-family:'roboto', sans-serif;
}
.proceed-upgrade-account{
	display:none;
}
.edHighlight{
	padding:3px;
	background:rgba(244,241,66,0.3);
}
.page-list-page{
    border-bottom:1px solid #bfbfbf;
    font-weight:normal!important;
}
.highlighter-bg, .table .highlighter-bg{
	background:rgba(244,241,66,0.3);
}
.page-list-menu li.active-page{
	background:#fff;
	color:#000;
	opacity:1;
        border-bottom:1px solid #fff;
}
.page-list-menu li.t-options{
	color:#333;
	font-size:1.5rem;
	/*background: #f5f6f6; !* Old browsers *!*/
	/*background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); !* FF3.6-15 *!*/
	/*background: -webkit-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); !* Chrome10-25,Safari5.1-6 *!*/
	/*background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); !* IE6-9 *!*/
	padding:6px 10px;
        margin-left:2px;
}
.page-list-menu li.t-options:hover{
	color:#000;
}

.mce-container-body button:hover {
    color: #fff;
	background: #5CA7E1;
}
.inner-cont-title ul #page-list-admin{
	width:100%;
	text-align:right;
	margin-right:10px;
}
#inner-cont-title ul #page-list-admin{
	width:100%;
	text-align:right;
	margin-right:10px;
}
#papge-list-admin li{
	display:inline-block;
}
ul.page-list-menu{
	display:inline-block;
}
.upper-cont-70{
	width:70%;
	display:inline-block;
	vertical-align:top;
}

.upper-cont-30{
	width:30%;
	display:inline-block;
	vertical-align:top;
}
.page-list-div-left{
	width:80%;
	display:inline-block;
	vertical-align:top;
	
}
.page-list-div-right{
	width:20%;
	display:inline-block;
	vertical-align:top;
	
}
#page-templates-list{
	padding-left:0px;
}
.template-creation-date{
	font-size:0.7rem;
}
.page-templates-list-item{
	vertical-align: top;
	width: 20%;
	display:inline-block;
	list-style-type:none;
	color:#000;
	border:1px solid #000;
	border-radius:4px;
	padding:10px;
	margin:2px 1%;
	font-weight:300;
	text-transform:uppercase;
	font-size:1.1rem;
	letter-spacing: -1px;
}
.page-templates-list-item-thumb img{
	border:1px solid #afafaf;
max-width:99%;	
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.page-templates-list-item-thumb img:hover{
box-shadow:0 5px 5px #333;
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.page-templates-list-item-thumb{
	width:45.5%;
	padding:1%;
	list-style-type:none;
	display:inline-block;
	vertical-align:middle;
	text-align:center;
}
.datasheet-subtext{
	padding-bottom: 0; 
    font-size: 0.6rem;
    opacity: 0.7;
    line-height: 0.4rem;
    padding: 0;
    text-align: right;
    margin-top: 2px;
    margin-bottom: 6px;
}
.page-templates-list-item:hover{
	box-shadow:0 5px 5px #333;
	-moz-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	-webkit-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
}
.page-list-page[data-panel-datasheet] {
	background-color: rgba(173, 8, 9, 1);
    color: white;
    opacity: 1;
    padding-bottom: 0;
    margin-bottom: 0px;
    padding-top: 4px;
    font-size: 0.9rem;
  }
  .page-list-menu li.active-page[data-panel-datasheet], .page-list-menu li.active-page[data-inverter-datasheet], .page-list-menu li.active-page[data-battery-datasheet]{
	box-shadow: 0px 0px 3px yellow;
	background-color: rgba(173, 8, 9, 0.9);
	color:white;
  }
  
  .page-list-page[data-item-datasheet] {
	background-color: rgba(173, 8, 9, 0.7);
    color: white;
    opacity: 1;
    padding-bottom: 0;
    margin-bottom: 0px;
    padding-top: 4px;
    font-size: 0.9rem;
  }

.page-list-page[data-inverter-datasheet] {
	background-color: rgba(173, 8, 9, 1);
    color: white;
    opacity: 1;
    padding-bottom: 0;
    margin-bottom: 0px;
    padding-top: 4px;
    font-size: 0.9rem;
  }

  .page-list-page[data-factsheet-bess1] {
	background-color:lightblue;
    color: black;
    opacity: 1;
    padding-bottom: 0;
    margin-bottom: 0px;
    padding-top: 4px;
    font-size: 0.9rem;
  }


  
.page-list-page[data-battery-datasheet] {
	background-color: rgba(173, 8, 9, 1);
    color: white;
    opacity: 1;
    padding-bottom: 0;
    margin-bottom: 0px;
    padding-top: 4px;
    font-size: 0.9rem;
  }
  
.page-list-menu li{
	display:inline-block;
	cursor:pointer;
	padding:8px 12px;
	background:#fff;
	color:#000;
	font-size:1rem;
	font-family:'Roboto', sans-serif;
	margin:0 1px;
	box-shadow:0 -2px 4px #7f7f7f;
	border-radius: 6px 6px 0 0;
        opacity:0.8;
		vertical-align: bottom;
}
input, textarea, select{
    font-family:'Open Sans', sans-serif;
    font-weight: lighter;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}


.light-label{
    color:#595959;font-weight:300;
}
input.half-width-left, input.half-width-right, select.half-width-right{
	width:49%;
	display:inline-block;
	padding:0 2%;
}
input.half-width-left{margin-right:1%;}
input.half-width-right, select.half-width-right{margin-left:1%;}

.large-left{
	width:69%;
	display:inline-block;
	margin-right:1%;
	vertical-align:top;
	}
.small-right{
	margin-left:1%;
	width:29%;
	display:inline-block;
	vertical-align:top;

	}
input.small-right{
	
	padding:0 2%;
}
input.large-left{
	
	padding:0 2%;
}
.small-button button, .cool-button{
	background:#345D9D;
	color:#fff;
	padding:1px 6px;
	box-shadow:0 1px 2px #333;
    border:1px solid #ababab;
	border-radius:0;
	text-transform:uppercase;
	font-size:0.6rem;
	width:100%;
	margin:0;
}
.top-menu-element{
	border-radius: 0 0.375rem 0 0;
}
.bottom-menu-element{
	border-radius: 0 0 0.375rem 0;
}
button.major-button{
	background:#345D9D;
	color:#fff;
	padding:1px 5px;
	box-shadow:0 0 1px #8f8f8f;
    border:1px solid #ababab;
	border-radius:0;
	text-transform:uppercase;
	font-size:0.7rem;
	margin:0;
	float:right;
}
button.major-button.project-calculations{
	background:#345D9D;
	color:#fff;
	padding:14px 9px;
	box-shadow:none;
    border:none;
	border-radius:0;
	text-transform:uppercase;
	font-size:1.0rem;
	margin:0;
	text-align:center;
	width:100%;
}
button.major-button-right{
	background:#345D9D;
	color:#fff;
	padding:1px 5px;
	box-shadow:0 0 1px #8f8f8f;
    border:1px solid #ababab;
	border-radius:0;
	text-transform:uppercase;
	font-size:0.8rem;
	margin: 0;	
	float:right;
}
button.major-button-left{
	background:#345D9D;
	color:#fff;
	padding:1px 5px;
	box-shadow:0 0 1px #8f8f8f;
    border:1px solid #ababab;
	border-radius:0;
	text-transform:uppercase;
	font-size:0.8rem;
	margin: 0;	
	float:left;
}

.dropdown {
    position: relative;
    display: inline-block;
}
#ch-head-menu-space-1 .selected-menu-item{
	background:#345D9D!important;
	color:#fff!important;
}
.dropdown-content {
	display: none;
	position: fixed;
	top: 0px;
	background-color: #fff;
	width: 87%;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	padding: 0.5% 1.9%;
	z-index: 100;
	border: 1px solid #333;
	margin-top: 0;
}
.dropdown-content ul li{
	text-align:left;
}
dl.dropdown{
	float:right;
}
.custom-solar-data-fields{
	display:none;
}




.file-upload{display:block;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 12px;margin-bottom:4px;}
.file-upload .file-select{display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:30px;line-height:30px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select .file-select-button{background:#dce4ec;padding:0 10px;display:inline-block;height:30px;line-height:30px;}
.file-upload .file-select .file-select-name{line-height:30px;display:inline-block;padding:0 10px;}
.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select:hover .file-select-button{background:#34495e;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.activefile .file-select{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.activefile .file-select .file-select-button{background:#3fa46a;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
.file-upload .file-select.file-select-disabled{opacity:0.65;}
.file-upload .file-select.file-select-disabled:hover{display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:30px;line-height:30px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:30px;line-height:30px;}
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:30px;display:inline-block;padding:0 10px;}


.trio-button-slim button{
	min-height:44px;
	width:100%;
	margin:4px 0;
	background:#446DAD;
	color:#efefef;
}
.trio-button-slim button:hover{
	background:#567FBF;
	color:#fff;
	margin:4px 0;
}
.price-matrix-2{
	background:#446DAD;
	color:#efefef;
	border-left: 1px solid #fff
}
.price-matrix-2:hover{
	background:#567FBF;
	color:#fff;
}
.tiny-matrix-buttons label{
	text-align: center;
	font-size:0.8rem;
}
.trio-button button{
	min-height:74px;
	width:100%;
	margin:4px 0;
	background:#446DAD;
	color:#efefef;
}


.split-price-controls{
	width:100%;
	background:#345D9D;
	color:#efefef;
	vertical-align:top;
}
.split-price-controls .active-button:hover,.split-price-controls .inactive-button:hover, .activate-signal button:hover, .active-load-profile:hover{
	background:#567FBF;
	color:#fff;
}
.split-price-controls .inactive-button{
	background:#345D9D;
	color:#547DbD;
}
.split-price-controls .active-button{
	background:#446DAD;
	color:#efefef;
}
.split-price-controls-left{
	vertical-align: top;
	width:25%;
	display:inline-block;
	padding-right: 0;
	height:44px;
	margin-right:0;
	/*border-right: 1% solid #afafaf;*/
}
.split-price-controls-right{
	vertical-align: top;
	width:75%;
	display:inline-block;
	padding:0;
	height:44px;
}

.trio-inactive button{
	background:#345D9D;
	color:#446DaD;
}
.trio-button button:hover{
	background:#567FBF;
	color:#fff;
	margin:4px 0;
}
.activate-signal button.activate-pre-half{
	height:44px;
	width:28%;
	background:#446DAD;
	color:#efefef;
	display:inline-block;
	margin:0;
}
.activate-button-half{
	width:72%;
	display:inline-block;
	vertical-align:top;
}
.activate-button{
	width:86%;
	display:inline-block;
	vertical-align:top;
}
.activate-button-middle{
	width:72%;
	display:inline-block;
	vertical-align:top;
}
#wizard-itemised-price-tab{
	display: block;
	min-height: 40vh;
}
.feint{
	opacity: 0.5;
}
.standard-wizard-input {
	min-height:40px;
	font-size:1rem;
}
ul.ui-autocomplete li.address-search-item.ui-menu-item:hover{
	box-shadow: none;
	background-color:#355D9C!important;
	color:#fff!important;
}
ul.ui-autocomplete li.address-search-item.ui-menu-item{
	color:#9f9f9f
}
ul.ui-autocomplete li.address-search-item.ui-menu-item{
	-webkit-transition: none!important;
	-moz-transition: none!important;
	-o-transition: none!important;
	transition: none!important;
}
ul.ui-autocomplete.address-results-container{
	border-radius: 0!important;
}
.create_customer_row_company{
	display:none;
}
.major-customer-list{
	color:#333;
	font-size:0.9rem;
	border-bottom:1px solid #ddd;

}
.minor-customer-list{
	font-size:0.7rem;
	color:#888;
}
.margin-2p-top{
	margin:2px 0;
}
#existing-customer-choice{
	display:none;
	text-align:left;

}
#existing-customer-choice .customer-choice-button{
	text-align: center;
}
.activate-signal{
	height:44px;
	width:100%;
	vertical-align:top;
	border-bottom:1px solid #fff;
}
.activate-signal button.activate-pre,.activate-signal .activate-post{
	height:44px;
	width:14%;
	background:#446DAD;
	color:#efefef;
	display:inline-block;
	margin:0;
	vertical-align:top;
}
.activate-button button,.activate-button-half button,.activate-button-middle button{
	height:44px;
	width:100%;
	box-sizing: border-box;
	background:#446DAD;
	color:#efefef;
	display:inline-block;
	margin:0;

}

.activate-button input,.activate-button-middle input{
	height:44px;
	padding:2%;
	width:100%;
	box-sizing: border-box;
	background:#446DAD;
	color:#efefef;
	display:inline-block;
	border:1px solid #446DAD;
	margin:0;


}
#input-site-address-old{
	display:none;
}
.big-size-input input{
	font-size:1.8rem;
}

.activate-button input::placeholder{
	color:#345D9D;
}
.customer-input-section{
	z-index:1;
}
.t-table{
	display:table;
}
.t-cell{
	display:table-cell;
}
input.workflow-dates{
	display: inline-block;
	width: auto;
	font-size: 0.7rem;
	margin-right: 4px;
	padding-left: 6px;
	padding-right: 0px;
	max-width: 80px;
	border-radius: 0;
	border: 2px solid black;
	height: 26px;
	font-weight: bold;
}
.customer-type-button{
	font-size:0.8rem;
}
.activate-button button:hover,.activate-button-half button:hover,.activate-button-middle button:hover{
	height:44px;
	background:#567FBF;
	color:#fff;
}

.small-button button:hover, .cool-button:hover, button.major-button:hover{
	background:#446DAD;
}

.sunmap-button button{
	background:#446DAD;
	color:#efefef;
	padding:4px 8px;
	border-radius:0;
	font-size:1.2rem;
	width:100%;
	margin:0;
	height:44px;
}
.sunmap-button i{
	font-size:0.8rem;
}
.sunmap-button button:hover{
	background:#567FBF;
}
.sunmap-button button a{
	color:#333;
}



.ch-head{
	overflow:visible!important;
}
.main-sub{
	text-align:center;
	color:#999;
	text-transform:uppercase;
	letter-spacing:1px;
}
.feature-icon{
	text-align:center;
	height:30px;
	width:30px;
	border-radius:40px;
	margin:10px auto;
	display:block;
}
.button-default {
  font-family: sans-serif;
  color: white;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 15px 10px;
	background:#345D9D;
  display: inline-block;
  text-align: center;
  margin: 100px 10px;
  max-width:400px;
  font-style:italic;
}
.button-progress a{
	color:#749DDD;
}
.button-progress {
	font-family: sans-serif;
	text-transform: uppercase;
	font-size: 1.0rem;
	font-weight: 700;
	padding: 10px 3%;
	background:#fff;
	color:#547DBD;
	display: inline-block;
	text-align: center;
	margin: 0 0 20px 0;
	width:33%;
	font-style:italic;
	border: 1px solid #345D9D;
}
.done-step{
	border: 1px solid #349D5D;
}
.active-step,.active-step a{
	background:#345D9D;
	color:#fff;

}
.done-step,.done-step a{
	background:#349D5D;
	color:#54BD7D;
}
.button-center{
	display:block;
	margin:0 auto;
}

.button-slanted {
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-slanted-content {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);  
  display: inline-block;
	text-decoration:none;
	color:#fff;
}
.button-slanted-content:hover{
	color: #efefef;
}
.left-aligned{
	text-align:left;
}
.enlarge-on-hover {
	transition: transform 0.3s ease-in-out;
  }
  
  .enlarge-on-hover:hover {
	transform: scale(1.05);
  }
#my-items-menu .no-copy-project{
	cursor:not-allowed;
}
.left-float {
	float:left;
}

.onoffswitch {
	position: relative; width: 77px;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	user-select: none;
}
.onoffswitch-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.project-step-not-required{
	display:none;
}
.chk-cell{
	vertical-align: top;
	min-width:30px;
	box-sizing: border-box;
}
input[type="checkbox" i].checkbox-lg{
	height:16px;
	width:16px;
}
#auto-panels-list, #auto-inverters-list, #auto-batteries-list{
	width:100%;
	min-height:200px;
    max-height: 500px;
    overflow-y: scroll;
    border-bottom: 4px solid #dfdfdf;
    box-shadow: 0 0 4px #dfdfdf;
	margin-bottom:20px;
}
.small-explainer{
	font-size:0.9rem; color:#8f8f8f;
}
#eac-container-volume-discount-price-item-selection{
	background:white;
}
.project-step-required{
	display:inline-block;
	color:red;
}
.onoffswitch-label {
	display: block; overflow: hidden; cursor: pointer;
	border: 2px solid #D1D1D1; border-radius: 20px;
}
.onoffswitch-inner {
	display: block; width: 200%; margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
	display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
	font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	box-sizing: border-box;
}
.onoffswitch-inner:before {
	content: "YES";
	padding-left: 10px;
	background-color: #5CA7E1; color: #FFFFFF;
}
.onoffswitch-inner:after {
	content: "NO";
	padding-right: 10px;
	background-color: #EEEEEE; color: #999999;
	text-align: right;
}
.onoffswitch-switch {
	display: block; width: 14px; margin: 5px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 49px;
	border: 2px solid #D1D1D1; border-radius: 20px;
	transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right: 0px;
}

.button-fixedwidth {
  width: 100px;
}
.opacity90{
	opacity: 0.9;
}
.opacity98{
	opacity: 0.98;
}
/* .loading-screen:not(#quote-open-loading-screen), .loading-screen-progress{ */
	
.quotemenuscreen{
	font-family:'Roboto'!important;
	display:block;
	position:fixed;
	top:0;
	width:100vw;
	height:100vh;
	background:#fff;
	z-index:-1;
	transition: opacity 0.1s, transform 0.1s;
}
.loading-screen, .loading-screen-progress, #building-project, #custom-template-request-screen{
	
	display:block;
	position:fixed;
	opacity:0;
	z-index:-1;
	transition: opacity 0.3s, transform 0.3s;
	width: 100vw;
	height: 100vh;
	/* display:none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 100000;
	text-align: center;
	line-height: 100vh;
	transition: opacity 0.3s, transform 0.3s; */
}

#quote-open-loading-screen{
	display:block;
	position:fixed;
	color:#fff;
	opacity:1;
	z-index:1000;
	transition: opacity 0.3s, transform 0.3s, background-color 0.5s ease;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.8);
}
.loading-screen div{
	position: absolute;
	top: 50vh;
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 100vw;
	box-sizing: border-box;
	padding: 0 20%;
}

#close-demo-screen{
	border:1px solid #999;
	border-radius:3px;
	padding:3px 8px;
	background:#efefef;
	margin:5px;
}
#book-demo-form submit{
	background:blue;
}
.loading-screen-2{
	padding-top:100px;
	display:none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 100000;
	text-align: left;
	box-sizing: border-box;
	padding-left:20%;
	padding-right:20%;
	background-color:#fff;
	top:0;
}
#page-options-window{
    padding:12px 0;
}
#page-options-window #sortable{
    margin-right:30px;
}
::-webkit-scrollbar
{
	width: 12px;  /* for vertical scrollbars */
	height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
	background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
	background: rgba(0, 0, 0, 0.5);
}

#proposal-actions-menu .dropdown-toggle:before { content: none }
#proposal-actions-menu{
    
    position:absolute;
    right:0;
    top:20vh;
    background:rgba(255,255,255,1);
    min-width:30px;
    width:75px;
    min-height:100px;
    z-index:2;
    padding:8px;
    border-radius:4px;
}

#ch-show-hide .main-menu-item{
	background: #393939;
}
#ch-show-hide .main-menu-item:hover{
    background-color:orange;
}
#ch-show-hide:hover{
    opacity:1!important;
}
#ch-show-hide{
	left: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 20vh;
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 40px;
	z-index: 49;
	cursor: pointer;
	opacity: 1;
	
	-webkit-transition: left 0.3s ease;
	-moz-transition: left 0.3s ease;
	-o-transition: left 0.3s ease;
	transition: left 0.3s ease;
}
hr.section-hr{
	border: 0;
    height: 1px;
    background: #999;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.ch-head-menu-item{
	display:inline-block;
	margin:0;
	width:auto;
	padding:0 10px;
	height:54px;
	line-height:54px;
	font-size:0.9rem;
	font-family:'roboto', sans-serif;
	background:#fff;
	text-align:center;
	vertical-align:top;
}
.iconic-button{
	border: 1px solid cornflowerblue;
	color:cornflowerblue;
	padding: 4px;
	display:inline-block;
	border-radius:3px;
	margin-right:4px;
}
#filter_projects_list_view_div{
	display:none;
}
.list-view-selected{
	background-color: cornflowerblue;
	color:#fff;
}
.iconic-button:hover{

	border: 1px solid black;
	background:rgba(0,0,0,0.8);
	color:#fff;
}

.ch-head-menu-item.new-quote {
	border: 1px solid cornflowerblue;
	height: 34px;
	line-height:34px;
	margin-top: 10px;
	margin-bottom:10px;
	border-radius:3px;
}
.ch-head-menu-item.new-quote:hover {
	border: 1px solid black;
	background:rgba(0,0,0,0.8);
	color:#fff;
}
.ch-head-menu-item-2{
	margin:0;
	width:auto;
	padding:0 12px;
	height:54px;
	font-size:0.9rem;
	line-height:54px;
	font-family:'roboto', sans-serif;
	background:#fff;
	text-align:center;
	float:right;
	color:#959595;
	margin:0 20px;
	font-weight:bold;
}
a.ch-head-menu-item-2:hover{
	color:#afafaf;
}
.danger-button{
	color: #fff!important;
	background-color: #dc3545!important;
	border-color: #dc3545!important;
	border: 1px solid transparent!important;
}
.danger-button:hover{
	color: #fff!important;
	background-color: #c82333!important;
	border-color: #bd2130!important;
}
button.proceed-button{
	display:block;
	padding:0px 18px;
	height:44px;
	width:270px;
	font-size:1.2rem;
	line-height:44px;
	font-family:'roboto', sans-serif;
	background:#2387d6;
	letter-spacing: 1px;
	text-align:center;
	color:#fff;
	margin:10px auto;
}
button.proceed-button:hover{
	background:#5eAaE6;
	color:#fff;
}
p.text-muted .request-product{
    text-decoration: underline;
    color: lightskyblue;
}
.visible-card{
  visibility: visible;
  opacity: 1;
  transition: opacity 200ms linear;
}
.hidden-card {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 200ms, opacity 200ms linear;
}
#products-selection-screen .modal-content{
    height:80vh;
}
.sp-dashboard-button{
	width:auto;
	padding:8px 12px;
	height:34px;
	font-size:0.9rem;
	font-family:'roboto', sans-serif;
	background:#2387d6;
	text-align:center;
	float:right;
	margin:10px 20px;
}
.sp-dashboard-button:hover > a{
	color:#2387d6;
}
.sp-dashboard-button:hover{
	background:#fff;
}
.sp-dashboard-button a{
	color:#fff;
	text-decoration: none;
}
.box-shadow{
	box-shadow:0 1px 8px #999;
}
.ch-head-menu-item:hover, .ch-head-menu-item-2:hover{
	color:#535353;
}
a{
	text-decoration:none;
	color:#3764A8;
	font-weight:bold;
}
#left-box.activated-section{
	transform:translateX(0);
}
#right-box.activated-section{
	width:77vw;
}
#left-box{
	position:fixed;
	z-index:49;
	width: 23vw;
	display: inline-block;
	background: #333;
	height: 100vh;
	-webkit-transform: translate(-100%,0);
	-moz-transform: translate(-100%,0);
	-ms-transform: translate(-100%,0);
	-o-transform: translate(-100%,0);
	transform: translate(-100%,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	backface-visibility: hidden;
	perspective: 1000;
	-webkit-transition: transform 50ms ease;
	-moz-transition: transform 50ms ease;
	-o-transition: transform 50ms ease;
	transition: transform 50ms ease;
}
#right-box{
	width:100vw;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
	float:right;
	-webkit-transition: opacity 0.3s, transform 0.3s ease;
	-moz-transition: opacity 0.3s, transform 0.3s ease;
	-o-transition: opacity 0.3s, transform 0.3s ease;
	transition: opacity 0.3s, transform 0.3s ease;
}
button#project-calculations{
    border:0;
}
.btn-label {
	position: relative;
	left: -8px;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 3px 0 0 3px;
}
.spmhidip{display:none;}
#left-popout{
	position:absolute;
	height:100%;
	background-color:#393939;
	color:#fff;
	-webkit-box-shadow: 1px 0 5px 0 rgba(181, 181, 181, 0.75);
	-moz-box-shadow:    1px 0 5px 0 rgba(181, 181, 181, 0.75);
	box-shadow:         1px 0 5px 0 rgba(181, 181, 181, 0.75);
}
* {
    margin: 0;
}
#main-content-area{
	/* padding:15px 5% 15px 5%; */
	position:relative;
	left:0%;
	overflow-x:hidden;
	overflow-y:hidden;
}
#ch-head-menu-space-1{
	display:none;
	position:absolute;
	margin:0;
	top:0;
	left:0%;
	width:55%;
	height:55px;
	background:#fff;
	border-bottom:1px solid #666;
	padding:0 0 0 1%;
	padding-left:5%;
	vertical-align:top;
}
#ch-head-menu-space-2{
	display:none;
	position:absolute;
	margin:0;
	top:0;
	left:60%;
	width:35%;
	height:55px;
	background:#fff;
	border-bottom:1px solid #666;
	padding:0 5% 0 0;
	vertical-align:top;
	font-size:0.6rem;
}

i{
	font-family: 'Font Awesome', sans-serif;
	font-style:normal;
}
.larger-text{
	font-size:1.5rem;
}
.strong-text{
	font-weight:bold;
}
.large-text{
	font-size:1.3rem;
}
.small-text{
	font-size:0.8rem;
}
/*.pb-1{
	width:30%;
	margin-right:1%;
	display:inline-block;
	vertical-align:top;
	text-align:center;
	font-size:1.2rem;
	color:#444;
	height:180px;
	background:#ffff;
	padding:20px 4%;
	font-family:'Exo 2', sans-serif;
}
.pb-2{
	width:54%;
	margin-left:5%;
	display:inline-block;
	vertical-align:top;
	height:220px;
}*/
.npv-header{
	color:rgba(255,185,55,0.5);
}
.quote-irr,.quote-npv{
	text-align:center;
}
.npv-wrap,.irr-wrap{
	display:inline-block;
	width:48%;margin:1%;
	font-size:2.5rem;
	text-align:center;
	color:#FFCE55;
	vertical-align:middle;
	font-family:'Exo 2', sans-serif;
}
.greeny{
	color:green;
}
#finance-offer{
	border:4px solid green;
	border-radius:8px;
	background:rgba(0,200,0,0.2);
}

.pac-container {
	color: #519984;
}
.pac-item {
	font-size: 12px;
	color: #888;
	text-transform:uppercase;
	font-size:0.7rem;
	font-family: 'roboto',Arial, Helvetica, sans-serif;
}
.pac-item:hover{
	cursor:pointer;
	cursor:hand;
	background:#345D9D;
	color:#efefef;
}
.pac-item:hover > .pac-item-query{

	background:#345D9D;
	color:#efefef;
}
.pac-item-query {
	font-size: 13px;
	padding-right: 3px;
	color: #333;
	text-transform:uppercase;
	font-size:0.9rem;
	font-family:'roboto';
}
.pac-logo:after {
	content: "";
	padding: 1px 1px 1px 0;
	height: 16px;
	text-align: right;
	display: block;
	background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: 120px 14px
}
.lp-buttons{
	display:block;
	width:84%;
	margin:0 auto;
	padding:1% 4%;
	text-align:right;
}
#lp-window{
    background:#efefef;
    display:block;
    width:90%;
    overflow-y:scroll;
    margin:0 auto 10px auto;
    height:80%;
    color:black;
    padding:5%;
}
#ch-prog-container{
	display:block;
	width:84%;
	margin:10px auto 0 auto;
	height:auto;
}
.ch-prog-icon{
	display:inline-block;
	background:#fff;
	margin:2%;
	width:22%;
	line-height:50px;
	font-size:0.7rem;
	text-align:center;
	cursor:pointer;
}
.ch-prog-icon:hover{
	background:#999;
}


/* Custom breakpoint around 1500px */
@media (max-width: 1800px) {
	/* Add your custom CSS rules here */
	/* Example: */
	.lg-screen-break {
	  width: 100%; /* Adjust as needed */
	}
  }

.bg-gray{
	background-color:#f2f2f2!important;
}
.circle-image {
	width: 80px;
	height: 80px; /* Set the height equal to the width to ensure a perfect circle */
	border-radius: 50%; /* Set border-radius to 50% to create a circle */
	overflow: hidden; /* Hide overflow to ensure the circle shape */
}
.circle-image img {
	width: 100%; /* Ensure the image takes up the entire space of the parent */
	height: 100%; /* Ensure the image takes up the entire space of the parent */
	display: block; /* Ensure proper rendering as block-level element */
	object-fit: cover; /* Cover the entire space of the container without distortion */
}
#recent-text-label-space .recent-text-label-area{
    overflow-x: auto;
    white-space: nowrap;
}
.ch-first{margin-left:0;}
.ch-last{margin-right:0;}
.inner-cont-title, #inner-cont-title, #inner-cont-upper{
	background:#333;
	color:#fff;
	font-family:'roboto', sans-serif;
	font-weight:bold;
	padding:10px 2%;
	box-sizing: border-box;
}
.big-bold-header{
    font-family:'Roboto';
	font-weight:300!important;
}
#main-content-area .big-bold-header{
    font-family:'Roboto';
	font-weight:600!important;
}
#inner-cont-title{
	min-height:80px;
    padding: 10px 2% 0 2%;
}
.inner-cont-title ul,#inner-cont-title ul{
	padding:0;
	margin:0;
	vertical-align: bottom;
}

#inner-cont-content{
	box-sizing: border-box;
        border-top:none;
	padding:0 2%;
	color:#333;
	background:#fff;
	font-family:'roboto', sans-serif;
}
#wizard-project-notes-table input, #project-notes-table input{
	height:inherit;
	font-size: inherit;
}
#lp-input-3, #lp-input-4{
	display:none;
	font-family:'roboto', sans-serif;
}
#current-project{
	color:#fff;
	font-weight:bold;
	letter-spacing:-1px;
	font-size:0.7rem;
	text-transform:uppercase;
	overflow:hidden;
	padding:5px 0;
	margin-top:15px;
}
.dark-grey{
	color:#606060;
}
.dark-grey:hover{
	color:#909090;
}
h1.site-heading{
	line-height:54px;
	font-style:italic;
	font-weight:bold;
	display:inline-block;
	vertical-align:top;
	font-size:1.2rem;
}
.save-message{
	font-size:0.7rem;
	color:#666;
}
.clear{
	width:100%;
	height:10px;
	position:relative;
}
.chart-style-short{
	width: 60%; 
	height: 220px;
	display:inline-block;
	margin:0 auto;
	margin-top:15px;
}
.explainer{
	display:inline-block;
	width:40%;
	vertical-align:top;
	text-align:center;
}
.gentablehead{
	display:inline-block;
	width: 23%;
	padding:2px 0.5%;
	text-align:left;
	font-family:'Exo 2', sans-serif;
	font-size:0.8rem;
	
}
.g1{
	background:#cfcfcf;
}
#map_search_address{
	background:rgba(255,255,255,0.8);
	border:none;
}

#energy-rates-tabs, #maptool-tabs, #project-notes-tabs, #wizard-project-notes-tabs, #wizard-pricing-tabs{
    border:0;
    border-bottom:1px solid #333;
    margin-top: 5px;
    background:none;
}
#wizard-pricing-tabs{
    border-bottom:none;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.panel-settings-input-container{
	display:block;
	margin:0 auto;
	width:90%;
}
.selected-feature{
	border:1px solid goldenrod!important;
	box-shadow: 0px 0px 12px #999;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.selected-feature label{
	background:goldenrod!important;
}
.golden{
	color:goldenrod;
}
.quarter-feature{
	box-sizing: border-box;
	width: 22%;
	margin:1%;
	border:1px solid #333;
	height:200px;
	display:inline-grid;
	cursor: pointer;
	cursor: hand;

	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
#rendering-content p{
	margin-bottom: 0!important;
}
.quarter-feature:hover{
	box-shadow: 0px 0px 12px goldenrod;

}

.pricing-table input:not([type='checkbox']){
	box-sizing: border-box;
	height:40px;
	display:inline;
	padding:0px 0px 0px 10px;
	font-size:16px;
	font-weight:bold;
	text-align: center;
	border-width: 0px;
	border-bottom: 1px solid #cfcfcf;
	text-align:left;
}
p.giant-pricing-text{
	font-size:4rem;
	font-weight: 100;
	color:goldenrod;
	font-family:'Lato';
}
p.giant-pricing-text sup{
	font-size: 2rem;
}
p.giant-pricing-text sub{
	font-size: 1rem;
}
.quarter-feature:hover label{
	background:rgb(238,185,52)!important;
	font-size:2rem;
}
.sp-pricing-container, .sp-billest-container{
	border:2px solid goldenrod;
	width:300px;
	height:30px;
	display:block;
	margin:0 auto;
	margin-top:10px;
	position:relative;
	border-radius:30px;
}
.sp-billest-container{
	width:200px;
	font-size:0.9rem;
	border: 2px solid rgba(52,93,157, 0.5);
}
.sp-pricing-sw-bg, .sp-billest-sw-bg{
	position:absolute;
	width:50%;
	height:100%;
	background:goldenrod;
	left:50%;
	border-radius:0px 30px 30px 0px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.sp-billest-sw-bg{
	background:rgba(52,93,157, 0.5);
}
.sp-pricing-annual, .sp-billest-quarterly{
	height:100%;
	position:absolute;
	width:50%;
	left:0px;
	text-align:center;
	line-height:30px;
	border-radius:30px 0px 0px 30px;
	cursor:pointer;
	cursor:hand;

	-webkit-transition: text-shadow .5s ease-in-out;
	-moz-transition: text-shadow .5s ease-in-out;
	-o-transition: text-shadow .5s ease-in-out;
	transition: text-shadow .5s ease-in-out;
}
.sp-pricing-monthly, .sp-billest-monthly{
	height:100%;
	position:absolute;
	width:50%;
	left:50%;
	text-align:center;
	line-height:30px;
	border-radius:0px 30px 30px 0px;
	cursor:pointer;
	cursor:hand;

	-webkit-transition: text-shadow .5s ease-in-out;
	-moz-transition: text-shadow .5s ease-in-out;
	-o-transition: text-shadow .5s ease-in-out;
	transition: text-shadow .5s ease-in-out;
}
.sp-pricing-annual:hover, .sp-pricing-monthly:hover, .sp-billest-quarterly:hover, .sp-billest-monthly:hover{
	text-shadow: 0px 0px 1px #333333;

}
.quarter-feature label{
	box-sizing: border-box;
	width: 100%;
	padding:2%;
	height:40px;
	display:inline-grid;
	background-color:#555;
	color:#fff;
	font-weight:bold;
	font-size:1.1rem!important;
	letter-spacing: 1px;
	vertical-align: middle;
	line-height:30px;

	box-shadow: 0px 0px 12px #999;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.quarter-feature section{
	box-sizing: border-box;
	width: 100%;
	padding:2%;
	height:180px;
	display:table-cell;
	vertical-align: middle;
	font-size:2rem;
	line-height:130px;
}
.panel-settings-input-container button{
	background:#333!important;
	color:#fff!important;
	border-radius:0px!important;
	font-weight:bold!important;
}
.panel-settings-input-container button:hover{
	background:#666!important;
}
.ui-widget .panel-settings-input-container .threeQrtryt-text{
	text-align:right;
	font-size:2.5rem;
	height:50px;
}
.redOutline{
	border:1px solid red;
}

#energy-rates-tabs ul, #maptool-tabs ul, #project-notes-tabs ul, #wizard-project-notes-tabs ul, #wizard-pricing-tabs ul{
	background:none;
	border:none;
	font-size:0.8rem;
	font-weight:normal;
}
#maptool-tabs ul{
	font-size:0.7rem;
	font-weight:normal;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited{
	background-color:#2f8fd3;
	color:#fff;
}
.sp-table{
	display: table;
	width:100%;
	border-collapse: separate;
	border-spacing: 8px;
}
.sp-table-row{
	display:table-row;
}
.sp-table-cell{
	display:table-cell;
	box-sizing: border-box;
}
.bigger-row .sp-table-cell{
        font-size:1.2rem!important;
}
.ui-widget-header{
	font-weight: lighter;
}
#maptool-tabs .ui-tabs-panel{
    padding: unset!important;
}
.ui-widget-header{
	font-size:0.9rem;
}
#tabs-2.ui-tabs-panel{
	padding: 0px;
}
.gentable{
	display:inline-block;
	width: 5.33%;
	padding:2px 0.5%;
	text-align:center;
	font-family:'Exo 2', sans-serif;
	font-size:0.8rem;
}
/* General dropdown styles */       
.dropdown dd, .dropdown dt, .dropdown ul { text-align:right; font-size:0.9rem; margin:0; padding:0; }
.dropdown dt{font-size:0.8rem;}
.dropdown dd { position:relative; z-index:100;}
/* DT styles for sliding doors */
.dropdown dt a {background:#fff no-repeat scroll right center;
    display:block; padding-left:20px; width:auto;z-index:100;float:right;line-height:54px;}
.dropdown dt a span {cursor:pointer; display:block; padding:0 5px;z-index:100;}
/* UL styles */
.dropdown dd ul { border:1px solid #333;background:#fff none repeat scroll 0 0; display:none;    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

    list-style:none; padding:0; position:absolute; z-index:100;
    right:0; top:55px; width:auto; min-width:190px;line-height:34px;}
.dropdown span.value { display:none;z-index:100;}
.dropdown dd ul li a { padding:0 10px; display:block;z-index:100;}
.dropdown dd ul li:hover{
	background-color:#efefef;
	cursor:pointer;
} 
.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 101!important;
    float: left;
    display: none;
    min-width: 160px;   
	max-width:320px;
	overflow:hidden;
    padding: 6px 0;
    margin: 0 0 10px 25px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border-right-width: 2px;
    border-bottom-width: 2px;
	
	max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.littleMenuPanel{
	position: relative;
	background-color: white;
	border: 1px solid #ccc;
	padding: 3px 5px;
	text-align: center;
	border-radius: 3px;
	z-index: 20050;
	opacity: 0.7;
}
.panel-results-container,.inverter-results-container{
	position:fixed!important;
	top:55px!important;
	left:5vw!important;
	width:90vw!important;
	height:90vh!important;
	max-width:3000px!important;
	overflow-y: scroll!important;
	background: #dfdfdf!important;
}
p.panel-search-item-title,p.inverter-search-item-title{
	width:200px!important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.panel-search-item,.inverter-search-item{
	padding:20px!important;
	display:inline-block;
	width:200px!important;
	height:200px;
	font-size:0.9rem;
	color:#444!important;
	vertical-align: top;
}
.ui-menu-item:hover {
	background: none !important;
	box-shadow: 0px 0px 3px 2px gold;
	background:#fff!important;
	color:#000!important;
}
#indicator-container i, #indicator-container-2 i{
	-webkit-transition: color 500ms ease;
	-moz-transition: color 500ms ease;
	-o-transition: color 500ms ease;
	transition: color 500ms ease;

	-webkit-transition: margin 500ms ease;
	-moz-transition: margin 500ms ease;
	-o-transition: margin 500ms ease;
	transition: margin 500ms ease;
}
.ui-menu-item{
	-webkit-transition: background 500ms ease, box-shadow 500ms ease, color 500ms ease;
	-moz-transition: background 500ms ease, box-shadow 500ms ease, color 500ms ease;
	-o-transition: background 500ms ease, box-shadow 500ms ease, color 500ms ease;
	transition: background 500ms ease, box-shadow 500ms ease, color 500ms ease;
}
.ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 2px 10px;
    clear: both;
    font-weight: normal;
	font-size:0.7rem!important;
    line-height: 0.9rem;
    color: #555555;
    white-space: nowrap;
    text-decoration: none;
}

.ui-state-hover, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #345D9D!important;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    background-image: none;
}
.ui-corner-all {
	border-radius: 0 !important;
}



input.bspq-button{font-size:0.8rem!important;}
input.bspq-button{
	border-radius: 0 !important;
	background:#345D9D;
	border:none;
	margin:10px 0;
	padding:10px;
	font-weight:bold;
	min-height:46px;
	color:#fff;
	cursor:pointer;
	width:auto!important;
}
button.major-control-button .icon-wrap{
	width:48px;
	height: 48px;
	border-radius:48px;
	background:#345D9D;
	color:#fff;
	margin:10px 20px;
	text-align:center;
	line-height:57px;
}
button.major-control-button p{
	font-size:0.8rem;
	font-weight: bold;
	color: #345D9D;
	text-align:center;
}
button.major-control-button{
	padding: 0;
	background:#fff;
	width:100%;
	margin:0;
}
.publishall{
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid #cfcfcf;
}
.trip-block{
	max-width:500px;
}
.trip-block li{
	text-align:left;
	margin-left:10px;
	
}
.trip-block.black{
	background:#5ca8e4;
	color:#fff;
}
.trip-block.black.s:before{
    border-bottom-color: #5ca8e4;
}
.trip-block.black.e:before{
    border-right-color: #5ca8e4;
}
.trip-block.black.w:before{
    border-left-color: #5ca8e4;
}
.trip-block.black.n:before{
    border-top-color: #5ca8e4;
}

button.major-top{
	border-radius:10px 0 0 0;

}
button.major-bottom{
	border-radius:0 0 0 10px;

}
button.major-control-button:hover{
	background:rgba(153,204,255,0.5);
}
#major-control-section{
	display:none;
	width:90px;
	position:fixed;
	right:0;
	top:250px;
	height:380px;
	background:#fff;
	z-index:98;
	box-shadow:0 0 3px #3f3f3f;
	border-radius:10px 0 0 10px;
	
}
#devmode-banner{
	position:fixed;
	right:0;
	bottom:0;
	background:rgba(190,0,0,0.6);
	color:rgba(0,0,0,0.9);
	border:1px solid red;
	width:200px;
	height:20px;
	display:block;
	z-index:20000;
	line-height:20px;
	padding:10px;
	font-weight:bold;
}
#major-downloads-menu{
	display:none;
	width:200px;
	position:fixed;
	right:90px;
	top:250px;
	background:#fff;
	z-index:100;
	border:1px solid #666;
	height:380px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

}
#major-download-items{
	padding:0;
}
input.pdf-margins{
	width:20%;
	margin-right:1%;
	display:inline-block;
}
#major-download-items li{
	font-size:0.8rem;
	text-transform:uppercase;
	font-family:'Exo 2', sans-serif;
	list-style:none;
	margin:0;
	padding:4px;
	cursor:pointer;
}
#major-download-items li:hover{
	background:rgba(44,98,204,0.3);
}

.p-submit{
	display:inline-block;
	padding:3px 5px;
	font-size:0.9rem;
}
.page-options-list{
	padding:1% 2%;
	font-size:0.9rem;
	text-transform:uppercase;
}
.page-options-list:hover{
	background:#e9e9e9;
}
.p-options-name{
	font-size:0.8rem;
	display:inline-block;

}
.p-options:hover{
	background:#999;
	color:#fff;
}
.p-options{
	padding:0 3px;
	margin:0 1px;
	border:1px solid #e3e3e3;
	border-radius:5%;
	float:right;
	cursor:pointer;
}

.bspq-button{
	border-radius: 0 !important;
	background:#345D9D;
	border:none;
	margin:10px 0;
	padding:3px 5px;
	font-weight:bold;
	color:#fff;
	cursor:pointer;
	width:auto!important;
}
#step-2,#step-3{
	display:none;
}
.bspq-button-lg{
	border-radius: 0 !important;
	background:#345D9D;
	border:none;
	margin:10px 0;
	padding:5px 15px;
	font-weight:bold;
	font-size:1.2rem;
	color:#fff;
	cursor:pointer;
	width:auto!important;
}
input.green-button{
	background:green;
}
.shadow-text{
	text-shadow:1px 1px 0 #f3f3f3;
}
button.bspq-button-disabled, button.bspq-button-disabled:hover, input.bspq-button-disabled, input.bspq-button-disabled:hover{
	background:#666;
	color:#999;
}
table.key-value, table.request, table.response{
	width:100%;
	border-spacing: 0px;
}
table.key-value td:first-child{
	width:25%;
}
.key-value th, .request th, .response th{
	background:#dfdfdf;
	text-align:left;
	border-top:1px solid #afafaf;
	border-bottom:2px solid #afafaf;
	font-size:1.3rem;
	height:40px;
	padding-left:10px;
}
.key-value td, .request td, .response td{
	height:40px;
	padding-left:10px;
	text-align:left;
	border-bottom:1px solid grey;
}
.resource{
	font-family:"Courier New";
	font-size:1.3rem;
	line-height:3rem;
}
.overview p{
	font-size:0.9rem;
	line-height:2.5rem;
}
.methods{
	text-align:left;
}
.methods > a{
	font-size:1.4rem;
	color:black;
}
.disabled-input {
	background-color:#afafaf;
	color:#888;
	border-color:#888;
}
.bspq-button:hover, input.bspq-button:hover,.bspq-button-lg:hover{
	background:#445DAD;
}
input.green-button:hover{
	background:#118011;
}

.report-heading{
	font-size:1.4rem;
	font-weight:200;
	margin:10px 0;
	text-align:center;
}
.report-sub-heading{
	font-size:1.1rem;
	font-weight:bold;
	text-transform:uppercase;
	margin:10px 0;
	text-align:center;
}
.report-logo-img{
	max-height:100px;
	max-width:300px;
}
#save-message{
	font-size:0.9rem;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}
.customer-delete{
	border:1px solid black;
	border-radius:1px;
}
.customer-delete, .customer-edit{
	color:black;
	border-radius:4px;
	padding:3px 5px;
	text-transform:uppercase;
}
.record-delete, .record-addtoteam{
	color:#d42435;
	border-radius:4px;
	padding:3px 5px;
	text-transform:uppercase;
	text-align:right;
	float:right;
}

.customer-edit, .record-addtoteam{
	color:green;
	padding:10px;
	margin-top:-3px;
	border-radius:50%;
	background:rgba(0,255,50,0.1);

}
.customer-edit:hover{
	background:rgba(0,255,50,0.2);
}
.customer-delete:hover{
	background:rgba(0,0,0,0.2);
}
#report-header{
	padding:10px 0;
	max-height:100px;
	float:left;
	width:auto;
	min-width:100%;
	vertical-align:top;
}
button a{
	color:#fff;
}
input.text-input-tiny{
	background:none;
	border:none;
	width:auto;
}
.tiny-text{
	font-size:0.7rem;
}
.tiny-text-2{
	font-size:0.6rem;
}
#inner-cont-title [data-finance-offer="1"]{
	background: #d2f8d2;
}
.dash-item{
	width:23%;
	padding:10px 1%;
	margin:15px 0 0 0;
	display:inline-block;
	vertical-align:top;
	height:240px;
	background:#fff;
	-webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
}
.dash-item:hover, .dash-item-2-col:hover, .dash-item-full-width:hover{
	background:#EFEFEF;
	-webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
}
.favourite-template{
	color:goldenrod;
}
.filter-group{
	display:inline-block;
	line-height:24px;
	padding:4px 10px;
}
input[type="checkbox" i].template-filter-checkbox
{
	width: 16px;
	height: 16px;
	margin-top:3px;
	margin-right:5px;
}
.fine-print{
	font-size:0.7rem;
	color:#333;
	font-family:'Exo 2', sans-serif;
}
.fine-print-2{
	font-size:1.2rem;
	color:#333;
	font-family:'Exo 2', sans-serif;
}
.solar-panel {
	position: relative;
	background: linear-gradient(45deg, #2c3e50 25%, #34495e 25%, #34495e 50%, #2c3e50 50%, #2c3e50 75%, #34495e 75%, #34495e 100%);
	background-size: 20px 20px;
	border: 2px solid #333;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.dimension-line {
	position: absolute;
	background-color: #333;
}

.dimension-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.dimension-text {
	position: absolute;
	font-weight: bold;
	color: #333;
}

.vertical-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
ol.big-number-list{
	margin:50px 0;
}
.big-number-list li {
    font-size: 1.5rem;
	font-weight:bold;
    margin: 2rem 2rem 0 2rem;
	line-height:1.2rem;
}
.big-number-list li ul li {
    font-size: 1.2rem;
	font-weight:normal;
    margin: 2rem 2rem 0 2rem;
	line-height:1.2rem;
}

blockquote{
	padding:20px;
	background:#efefef;
	margin:30px 50px;
}
.customer-details-table-dashboard{
	position:relative;
}
.table-c1, .table-c2{
	display:inline-block;
	padding:10px;
}
.caption-text{
	font-size:0.8rem;
	font-weight:bold;
	text-transform:uppercase;
}
.article-page p, .article-page ul{
	font-size:1.2rem!important;
}
.big-number-list li span,.big-number-list li li, p.article-text{
    font-size: 1rem;
	
}
.big-number-list li li{
	line-height:0.5rem;
}
.big-number-list li ul{
	margin:10px;
}
p.article-text, ul.article-text, ol.article-text{
	font-weight:100;
    
	line-height:2.5rem;
}
li p.article-text{
	margin: 2rem 2rem 0 2rem;
}

#lp-container{
	width: 100%!important;
	position:relative;
	display:inline-block;
}
ol.boldlist li{
	font-weight:bold;
	margin-top:10px;
}
#select-load-profile {
	left:0;
	height:100vh;
    display: none;
    position: fixed;
	width:100%;
    margin: 0;
	top:0;
    background: #dddddd;
	overflow-x:hidden;
	overflow-y:scroll;
	border:1px solid #999;
	padding:1%;
	z-index:3;
}
.lp-search-box{
	display:none;
}
#select-load-profile li {

    background: #eee;
    line-height: 22px;
    padding: 2% 10px;
    cursor: pointer;
	list-style:none;
	transition:all 100ms ease-in-out;
}

#lp-menu li.nopermission{
	display:none;
}
#select-load-profile li.user-profile{
	background:rgba(52,93,157,0.2);
}
#select-load-profile li:hover {
    background: #343434;
	color:#fff;
}

.chart-style{
	width: 100%; 
	height: 220px;
	display:block;
	margin:0 auto;
	margin-top:15px;
}
.chart-style-2{
	width: 1200px; 
	height: 600px;
	margin:0 auto;
	margin-top:-15000px;
	position:absolute;
	
	
}
.lighting-tou-only, .lighting-price-only{
	display:none;
}
.light-times-header{
	transform: rotate(310deg);
        border:none!important;
}
.light-mcs{
        border:1px solid gray;
	cursor:pointer;
	display:inline-block;
	width: 4%;
	font-size: 0.8rem;
	text-align: center;
	box-sizing: border-box;
        padding:10px 5px;
        margin:0;
}
.mcs{
	cursor:pointer;
}
tr:not(#first-row-tou-table) .mcs:hover{
    background-color:lightgoldenrodyellow!important;
}
p,h1,h2,h3,h4,td{
  font-family:'roboto', sans-serif;
}
/* Cashflow chart styles begin */
#cashflow-bar{
  border: 1px solid #3e3e3e;
  height:50px;
  width:250px;
  display:block;
  position:relative;
  margin:0 auto;
  
}
#cashflow-cost{
  background:rgba(205,25,30,0.65);
  width:50%;
  height:100%;
  display:inline-block;
  
}
.site-sub-heading{
	font-size:0.8rem;
	text-transform:uppercase;
	text-align:center;
	width:100%;
	margin:10px 0;
}

#net-cashflow-chart,#net-cashflow-chart-finance{
  height:220px;
  top:0;
  text-align:center;
}

/* Cashflow chart styles end */
#input-panel-kw{
	display:none;
}
#input-panel-kw, #input-panel-qty{
	background-color:#d9d9d9;
	color:#333;
}
.ui-autocomplete { position: absolute; cursor: default;z-index:1070 !important;}
.tiny-button-inactive{
	font-size:0.6rem;
	padding:2px 4px;
	border:1px solid #777;
	background:#777;
	color:#333;
	text-transform:uppercase;
	cursor:pointer;
	display:inline-block;
}
.tiny-button-active{
	font-size:0.6rem;
	padding:2px 4px;
	border:1px solid #777;
	background:#345D9D;
	color:#fff;
	text-transform:uppercase;
	display:inline-block;
}
.bat-icon{
	display:inline-block;
	width:20px;
	height:20px;
	line-height:18px;
	border-radius:50%;
	background:#4793F5;
	padding:5px;
	text-align:center;
	color:#fff;
	margin:4px;
	vertical-align:middle;
}
.cust-icon{
	display:inline-block;
	width:20px;
	height:20px;
	line-height:18px;
	border-radius:50%;
	background:#444;/*43A517;*/
	padding:5px;
	text-align:center;
	color:#fff;
	margin:4px;
	vertical-align:middle;
}
#list-of-countries{
	margin-top:15px;
}
#customer_status_id{
	display:none;
}
table.customer-dashboard-table th{
	border-bottom:3px solid lightskyblue;
	text-align:left;
	padding:20px;
	font-size:1.2rem;
}
table.customer-dashboard-table tr td{
	vertical-align: top;
}
.jscolor-picker-wrap,
.jscolor-wrap,
div[id^="jscolor-"] {
    z-index: 999999 !important;
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#customer-dashboard-container{
	width:100%;
	overflow-x: scroll;
	border:1px solid #dfdfdf;
	min-height:370px;
}
#page-options-window li.ui-state-highlight{
	min-height: 35px;
    border-width: 4px;
    border-style: dashed;
    background: #f3f3f3;
    margin: 3px -12px;
}
table.customer-dashboard-table li.ui-state-highlight{
	min-height:50px;
	border-width:5px;
	border-style: dashed;
}
table.customer-dashboard-table li:hover{
	background:#efefef;
border-radius:4px;
	cursor:grab;
}
.country-list{
	padding:3px 10px;
	background:#d6d6d6;
	border:1px solid #999;
	border-radius:2px;
	margin-right:5px;
}
.country-list:hover{
	background:#a4a4a4;
}
#map-canvas-img{
	width:100%;
	height:240px;
	}
.icons{
	display:inline-block;
	vertical-align:top;
	width:20%;
	height:100%;
	background:rgba(255,255,255,0.5);
	left:0;
	z-index:70
}
.record-title{
	font-size:1.2rem;
	font-weight:bold;
}
.ui-autocomplete{
max-width:800px;
}
.record-icon i{
	font-size:1rem;
}
.record-icon{
	font-size:0.8rem;
	height:24px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	margin-bottom:2px;
	padding:2px 5px;
}
.record-icon:hover .zero-width-section{
	visibility: visible;
	max-width:50px;
}
.record-icon .zero-width-section{
	transition: max-width 0.3s ease-in-out;
	max-width: 0;
	display:inline-block;
	visibility: hidden;
}

.create-new-from-existing:hover{
	color:#fefefe;

}

.project-record-container{
	position:relative;
	display:inline-block;
	box-sizing: border-box;
	height:280px;
	width:24%;
	margin:0.5%;
}
.project-record-container-dashboard{
	position:relative;
	display:inline-block;
	box-sizing: border-box;
	height:280px;
	width:32%;
	margin:0.5%;
}
.customer-record-container-dashboard{
	position:relative;
	display:inline-block;
	box-sizing: border-box;
	width:100%;
	box-shadow: 0px 0px 5px #999;
	text-align:center;
	margin-bottom: 10px;
	height:50px;
	line-height:50px;
}

.duplicate-project{
    background-color:#fff;
    color:#000;
    border:2px solid black;
}
.duplicate-project:hover{
    background-color:#555;
    color:#fff;
    border:2px solid black;
}
#backdrop-white{
	display:block;
	width:100vw;
	height:100vh;
	background:#fff;
	z-index:0;
}

.morrisp-chart-placeholder-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	overflow: hidden;
}
.morrisp-chart-placeholder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	background-color: #f0f0f0;
	border: 0;
	overflow: hidden;
  }
  
  .morrisp-bar {
	flex: 1;
	width: 16px;
	height: 0;
	margin: 0 8px;
	background-color: #ccc;
	transition: height 0.25s ease; /* Transition for the animation */
  }
  
  .morrisp-chart-placeholder.loading .morrisp-bar {
	height: 80px!important; /* Set to the desired height */
  }
  
  /* Add a slight delay before animation starts */
  .morrisp-chart-placeholder .morrisp-bar:nth-child(1) {
	transition-delay: 0.05s;
  }
  
  .morrisp-chart-placeholder .morrisp-bar:nth-child(2) {
	transition-delay: 0.1s;
  }
  
  .morrisp-chart-placeholder .morrisp-bar:nth-child(3) {
	transition-delay: 0.15s;
  }
  
  .morrisp-chart-placeholder .morrisp-bar:nth-child(4) {
	transition-delay: 0.2s;
  }
/* Pipedrive Button Styling */
.btn-pipedrive {
	color: #fff;
	background-color: #26292c;
	border-color: #26292c;
  }
  
  .btn-pipedrive:hover {
	color: #fff;
	background-color: #1a1c1e;
	border-color: #1a1c1e;
  }
  
  .btn-pipedrive:focus, .btn-pipedrive.focus {
	box-shadow: 0 0 0 0.2rem rgba(38, 41, 44, 0.5);
  }
  
  .btn-pipedrive.disabled, .btn-pipedrive:disabled {
	color: #fff;
	background-color: #40464b;
	border-color: #40464b;
  }
  
  .btn-pipedrive:not(:disabled):not(.disabled):active, 
  .btn-pipedrive:not(:disabled):not(.disabled).active,
  .show > .btn-pipedrive.dropdown-toggle {
	color: #fff;
	background-color: #000;
	border-color: #000;
  }
  
  /* Outline variant */
  .btn-outline-pipedrive {
	color: #26292c;
	border-color: #26292c;
  }
  
  .btn-outline-pipedrive:hover {
	color: #fff;
	background-color: #26292c;
	border-color: #26292c;
  }

  .btn-serviceM8 {
	color: #fff;
	background-color: #67ba48;
	border-color: #26292c;
  }
  
  .btn-serviceM8:hover {
	color: #fff;
	background-color: #407325;
	border-color: #1a1c1e;
  }
  
  .btn-outline-pipedrive:focus, .btn-outline-pipedrive.focus {
	box-shadow: 0 0 0 0.2rem rgba(38, 41, 44, 0.5);
  }
  
  .btn-outline-pipedrive.disabled, .btn-outline-pipedrive:disabled {
	color: #26292c;
	background-color: transparent;
  }
  
  .btn-outline-pipedrive:not(:disabled):not(.disabled):active,
  .btn-outline-pipedrive:not(:disabled):not(.disabled).active,
  .show > .btn-outline-pipedrive.dropdown-toggle {
	color: #fff;
	background-color: #26292c;
	border-color: #26292c;
  }
  .integration-card {
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	margin-bottom: 16px;
	transition: transform 0.2s, box-shadow 0.2s;
	overflow: hidden;
}

.integration-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

.integration-card .card-header {
	border-bottom: 1px solid #e9ecef;
	padding: 16px;
	background-color: #f8f9fa;
	display: flex;
	align-items: center;
}

.integration-card .card-body {
	padding: 20px;
}

.quote-invoice-myob{
    background-color:#fff!important;
    color:#C00780!important;
    border:2px solid #C00780!important;
}
.quote-invoice-myob:hover{
    background-color:#C00780!important;
    color:#fff!important;
    border:2px solid #C00780!important;
}
.quote-invoice{
    background-color:#fff!important;
    color:#14b5eb!important;
    border:2px solid #14b5eb!important;
}
.quote-invoice:hover{
    background-color:#14b5eb!important;
    color:#fff!important;
    border:2px solid #14b5eb!important;
}

.sp-logo {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url('/images/sp-logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: -0.125em;
	}

	/* Different sizes */
	.sp-logo-lg {
	width: 1.33em;
	height: 1.33em;
	}

	.sp-logo-2x {
	width: 2em;
	height: 2em;
	}

	.sp-logo-3x {
	width: 3em;
	height: 3em;
	}

	/* Example if you want to change colors */
	.sp-logo-white {
	filter: brightness(0) invert(1); /* Makes the SVG white */
	}
.retrofit-settings{
	display:none;
}
table.customer-dashboard-table tr td{
	min-width:350px;
}
.solar-vic-loan-only{
	display:none;
}
.light-green-bg, .light-green-bg:disabled{
	background-color: rgba(0,180,0,0.05);
}
.square-button{
	color:#000;
	font-size:0.7rem;
	height:20px;
	line-height:20px;
	vertical-align:middle;
	text-align:center;
	display:inline-block;
	cursor:pointer;
	border:2px solid black;
	padding:1px 6px;
}


#grid-settings-dropdown .nav-tabs .nav-link {
	color: #495057;
	border: 1px solid transparent;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	padding: 0.5rem 1rem;
}

#grid-settings-dropdown .nav-tabs .nav-link.active {
	color: #0d6efd;
	background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
}

#grid-settings-dropdown .tab-content {
	border: 1px solid #dee2e6;
	border-top: none;
	padding: 15px;
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}
.square-button:hover{
	background-color:#555;
	color:#fff;
}
.open-button-list, .open-button-list:hover{
	border:2px solid #0C6EFC;
}
.quote-delete{
    background-color:#fff!important;
    color:#000!important;
    border:2px solid black!important;
}
.quote-delete:hover{
    background-color:#555!important;
    color:#fff!important;
    border:2px solid black!important;
}
.sign-project{
    background-color:#fff!important;
	color:darkgoldenrod!important;
	border:2px solid darkgoldenrod!important;
}
.sign-project:hover{
	background-color:darkgoldenrod!important;
	color:#fff!important;
	border:2px solid darkgoldenrod!important;
}
.view-pdf{
	background-color: #b4464C!important;
	color:#fff!important;
	border:2px solid #94262C!important;
}
.view-pdf:hover{
    background-color:#fff!important;
	color:#94262C!important;
	border:2px solid #94262C!important;
}
.little-action-icons{
	height: 26px;
	margin-right: 2px;
}
.rates-table-outer input{
	height:auto!important;
	font-size: 0.9rem!important;
}
.rates-table-outer table{
	text-align: left!important;
}
.rates-table-outer td{
	vertical-align: top;
	text-align: left;
}
.bill-wizard-estimates-table td{
	border:1px solid #aeaeae;
	padding:3px;
}
.bill-wizard-estimates-table th{
	border-bottom:2px solid #000;
	padding:3px;
}
.sig-colour{
    color: #F6F786;
}
.form-row label{
position: relative!important;
}
.fadingOut {
	transition:opacity 200ms ease-in-out;
	opacity:0;
}
.fadingIn {
	transition:opacity 800ms ease-in-out;
	opacity:100;
}
.pricing-stage{
	box-sizing: border-box;
	height:450px;
	display:block;
	width:90%;
	position:absolute;

}
#pricing-stage-2, #pricing-stage-3, #pricing-stage-4{
	left:100%;
}
.pricing-button-container{
width:100%;
text-align: right;
}
.StripeElement {
	box-sizing: border-box;


	padding: 10px 12px;

	border: 1px solid transparent;
	border-radius: 4px;
	background-color: white;

	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
}
.err-msg, #terms-accept-err{
	color:darkred;
	display:none;
	font-size:0.9rem;
}
.invalid-input{
	border:1px solid darkred;
	box-shadow: 0px 0px 3px darkred;
}
input.invalid-input:focus{
	outline:none;
}
.StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
	border-color: #fa755a;
}
.top-right-icons{
	display:block;
	position:absolute;
	right:0px;
	top:0px;
}
.wizard-offpeak-only{
	display:none;
}

.w-90{
	display:inline-block;
	vertical-align: top;
	width:90%;
}
.w-80{
	display:inline-block;
	vertical-align: top;
	width:80%;
}
.w-70{
	display:inline-block;
	vertical-align: top;
	width:70%;
}
.table-view{
	display:table;
}
.table-view > div{
	display:table-cell;
}
.table-view > div label{
	font-size:0.8rem;
}
.table-view > div .iconic-button i{
	font-size:1.5rem;
}
.w-60{
	display:inline-block;
	vertical-align: top;
	width:60%;
}
.w-50{
	display:inline-block;
	vertical-align: top;
	width:50%;
}
.w-40{
	display:inline-block;
	vertical-align: top;
	width:40%;
}
.w-30{
	display:inline-block;
	vertical-align: top;
	width:30%;
}
.w-20{
	display:inline-block;
	vertical-align: top;
	width:20%;
}
.ui-tooltip, .arrow:after {
	background: rgba(0,0,0,1);
	border: 1px solid black;
	font-size:0.9rem;
}
.ui-tooltip {
	border:0;
	padding: 5px 10px;
	color: white;
	border-radius: 5px!important;
	font: bold 0.9rem "Helvetica Neue", Sans-Serif;
	box-shadow: 0 0 1px #333;
}
.arrow {
	width: 70px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;
}
.arrow.top {
	top: -16px;
	bottom: auto;
}
.arrow.left {
	left: 20%;
}
.arrow:after {
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	box-shadow: 6px 5px 9px -9px black;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.arrow.top:after {
	bottom: -20px;
	top: auto;
}
td.w-10pc{
	width:10%;
}
.w-10pc{
	width:10%;
}
.w-15pc{
	width:15%;
}
.w-20pc{
	width:20%;
}
.w-25pc{
	width:25%;
}
.w-30pc{
	width:30%;
}
.w-35pc{
	width:35%;
}
.w-40pc{
	width:40%;
}
.w-45pc{
	width:45%;
}
.w-50pc{
	width:50%;
}
.w-55pc{
	width:55%;
}
.w-10{
	display:inline-block;
	vertical-align: top;
	width:10%;
}
td.w-90pc{
	width:90%;
}
.input-title-icon{
	width:30px;
	text-align:center;
}
.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
}
.icon-strip{
	transform:rotate(270deg);
	width:400px;
	transform-origin: 0% 0;
	margin-top:280px;


}
.icon-strip .record-cat{
	font-size:1.2rem;
	display:inline-block;
	vertical-align: middle;
}
.record-content{
	display: inline-block;
	margin-right: 5%;
	vertical-align: top;
}
.lp-record-content{
	display:inline-block;
	width:100%;
}
.lp-record {
	width:15.5%;
	display:inline-block;
	height:100px;
	vertical-align:top;
	color: #474747;
	margin: 1% 1% 0 0;
	padding: 1% 1.5%;
	background:#E6E6E6;  
	border: 1px solid #B6B6B6;
	cursor: pointer;
	letter-spacing: 0!important;
}
.lp-record:hover {
    background:#D3D2D2;
}
.lp-record:hover > #lp-menu {
	display:block;
}
#lp-menu ul li{
	display:inline-block;
	text-align:center;
	margin:0 3px 0 3px;
	padding:3px 5px;
	font-size:0.6rem;
	text-transform:uppercase;
	font-weight:bold;
	border:1px solid #999;
	border-radius:3px;
}
.lp-tags{
	font-size:0.6rem;
}
#wizard-auto-pricing table tr td{
	text-overflow: ellipsis;

	/* Needed to make it work */
	overflow: hidden;
	white-space: nowrap;
}
td.bill-wizard-cell-label{
	font-size:0.9rem!important;
	text-transform: uppercase;
	text-align:center!important;
	background:#999;
	color:#dfdfdf;
	height:20px!important;
	line-height: 20px!important;
}
.fit-bill-wizard-row{
	border-top:1px dashed #333;
	padding-top:10px;
}
.pbill-est{
	font-size:0.9rem;
}
.edit-customers-table{
	width:100%;
}
.edit-customers-table td,.edit-customers-table th{
	vertical-align: top;
	text-align:left;
	padding:5px;
}
.customer-container-column{
	vertical-align: top;
	width:50%;
	padding:5px;
}
.edit-customers-table td.note-date{
	width:20%;
	font-size:0.7rem;
	font-style: italic;
	color:#666;
}
.edit-customers-table td.note-actions{
	font-size:0.8rem;
	width:30%;
}
/*.bill-wizard-table td{
	text-align:left;
	font-size:1.5rem;
	line-height:1.2rem;
}
.bill-wizard-table td .subtext{
	text-align:left;
	color:#666;
	font-weight:100;
	font-size:1rem;
}
.bill-wizard-table input{
	font-size:1.3rem;
	border:none;
	border-bottom:3px solid #333;
	margin:0px;
}
.bill-wizard-table input#total-power-bill-est{
	font-size:1.6rem;
	font-weight:bold;
	border:none!important;
}
.bill-wizard-table input::placeholder{
	color:#cfcfcf;
	font-weight:100;
}*/

#lp-menu ul li:hover{
	background:#333;
	color:#fff;
}
.lp-record-name{
	font-size:0.9rem;
}
.lp-category{
	font-size:0.7rem;
	color:#333;
}
#lp-menu{
	display:none;
	margin:0 5%;
	padding:0;
	text-align:center;
}
#lp-menu ul{
	padding:5px;
}
.page-new-project{
	width:100%!important;
	height:100%!important;
	text-align:center!important;
	vertical-align:middle;
	position:relative;
	top:100px;
}html.modal-open {
	 /* All of this stops the page from scrolling in the background, especially important on mobile devices. */
	 -ms-overflow-style: scrollbar;
	 overflow: auto;
	 height: 100vh;
 }
body.modal-open {

	/* You may want to explore toggling this, depending on your circumstances (page length and/or presence of page scroll bars) */
	height: 100vh;
	overflow:auto;
}
#support-ticket-button{
	position:fixed;
	z-index:1001;
	right:30px;
	bottom: 30px;
	width:84px;
	height:34px;
	border-radius:34px;
	background:#345d9d;
	line-height:34px;
	color: #fff;
	text-align: center;
	font-size:0.9rem;
}
.modal-open .modal{
    overflow-y: scroll;
}
#billSlider-outer-container{
	position:relative;
	margin: 0 auto;
	width:400px;
	border:4px solid #000;
	height:50px;
	margin-top:50px;
}
#proposalScreenShotCanvas{
	display:none;
}
#billSlider-section1, #billSlider-section2, #billSlider-section3{
	position:absolute;
	height:100%;
	color:#fff;
	line-height:50px;
	text-align:center;
	display:block;
}
#billSlider-section1{
	left:0%;
	width:50%;
	background:#345d9d;
}
#billSlider-section2{
	left:50%;
	width:35%;
	background:#466faf;
}
#billSlider-section3{
	left:85%;
	width: 15%;
	background:#567fbf;
}
#dashboard-content-projects,#dashboard-content-reports,.project-record-reports{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width:100%;
    padding:2%;
    display:inline-block;
    vertical-align: top;
}
input[type="checkbox"].fancy-checkbox {
	width:16px;
	height:16px;
	vertical-align:middle;
}
.exit-workflow-button{
	color: #efefef;
	background: #343434;
	height: 50px;
	width: 50px;
	border-radius: 70px;
	font-size: 1.2rem;
	box-shadow: 1px 0px 4px #535353;
	text-align: center;
	display: none;
	position: fixed;
	z-index: 101;
	top: 20px;
	right: 20px;
	cursor: pointer;
}
.exit-workflow-button div{
	display:table-cell;
	vertical-align: middle;
}

#dashboard-content-customers{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width:30%;
	/*
	display:none;
	*/
	padding:2%;
	vertical-align: top;
}
.fancy-date{
	border-radius:20px;
	height:24px;
	background:#999999;
	border: 1px solid #777777;
	padding:4px 8px;
	color:#fff;
}
.project-record-reports{
	width:40%;
}

#dashboard-content-charts{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width:100%;
	padding:2%;
	display:inline-block;
	vertical-align: top;
	display:none;
}

#dashboard-content-reports{
	width:100%;
}
.dashboard-record{
	width:100%;
	vertical-align: top;
}
.dashboard-record:hover{
	color:#000;
}
table.button-container{
	width:100%;
}
table.button-container td{
	text-align:center;
}
ul.checklist{
	list-style:none;
	font-size:1rem;
}
ul.checklist li:before{
	font-family: 'FontAwesome';
	content: '\f14a';
	margin:0 5px 0 -15px;
	color: forestgreen;
	font-size:1.2rem;
	line-height:1.5rem;
}
button.blue-border-button, a.blue-border-button, input.blue-border-button{
	margin:30px 0px;
	padding: 10px 20px;
	font-size:1.2rem;
	border:4px solid dodgerblue;
	color:dodgerblue;
	background:#fff;
	transition: all 0.3s ease 0s;
}

input.blue-border-button{
	height:auto;
	max-width:200px;
	cursor:pointer;
	cursor:hand;
}
button.blue-border-button:hover, a.blue-border-button:hover, input.blue-border-button:hover{
	box-shadow: inset 0 0 0 2px dodgerblue;
	background:#fff;
}
button.black-border-button, a.black-border-button, input.black-border-button{
	margin:30px 0px;
	padding: 10px 20px;
	font-size:1.2rem;
	border:4px solid black;
	color:black;
	background:#fff;
	transition: all 0.3s ease 0s;
}
input.black-border-button{
	height:auto;
	max-width:200px;
	cursor:pointer;
	cursor:hand;
}
#latlng-confirm-spinner{
    display:none;
}
button.black-border-button:hover, a.black-border-button:hover, input.black-border-button:hover{
	box-shadow: inset 0 0 0 2px black;
	background:#fff;
}
button.red-border-button, a.red-border-button, input.red-border-button{
	margin:30px 0px;
	padding: 10px 20px;
	font-size:1.2rem;
	border:4px solid #DE0B0A;
	color:#DE0B0A;
	background:#fff;
	transition: all 0.3s ease 0s;
}
input.red-border-button{
	height:auto;
	max-width:200px;
	cursor:pointer;
	cursor:hand;
}
button.red-border-button:hover, a.red-border-button:hover, input.red-border-button:hover{
	box-shadow: inset 0 0 0 2px #DE0B0A;
	background:#fff;
}
#page-limiting-message{
        display:none;
        max-width:777.8px;
}
.sortable-pageoptions { list-style-type: none; }
.customer-record-name{
	font-size:1.2rem;
	font-weight:bold;
}

.customer-record-container .record-content{
	width:100%;
}
.customer-record-container{
	vertical-align: top;
	color: #474747;
	margin: 0.5%;
	padding: 5px;
	width:28%;
	background:#E6E6E6;
	border: 1px solid #B6B6B6;
	letter-spacing: 0!important;
	display:inline-block;
	height:300px;
}
.record {
	color: #474747;
	background: rgb(204,204,204);
	background: linear-gradient(41deg, rgba(204,204,204,1) 0%, rgba(232,232,232,1) 53%, rgba(201,201,201,1) 100%);
	width:100%;
	box-sizing:border-box;
	display:inline-block;
	height:280px;
	vertical-align: top;
	border-radius:15px;
}
.fancy-button, button.fancy-button{
	padding:10px 0px;
	color:#3f3f3f;
	background: rgb(6,21,47);
	border-radius:8px;
	border:1px solid #afafaf;
	background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
	background-size: 200% auto;
	transition: 0.5s;
}
.fancy-button:hover, button.fancy-button:hover{
	background-position: right center;
	color:#000;
}

.record:hover {
	background: rgb(232,232,232);
	background: linear-gradient(41deg, rgba(232,232,232,1) 0%, rgba(255,255,255,1) 53%, rgba(218,218,218,1) 100%);
}
.record:hover > .search-top-banner{
	background-position: right center;
	color:#000;
}

.search-top-banner{
	border-bottom:1px solid #999;
	padding:10px 0px;
	color:#3f3f3f;
	background: rgb(6,21,47);
	background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);

	background-size: 200% auto;
	transition: 0.5s;
}
.search-top-banner:hover{
	background-position: right center;
	color:#000;
}
.custrecords {
	width: auto;
	display:block;
	font-family: "Exo 2", sans-serif;
}
.finance-list{
	background:rgba(0,255,0,0.1)!important;
}
.battery-list{
	background:rgba(71,147,245,0.1)!important;
}

.clearfixme{
	width:100%;
	height:10px;
	clear:left;
}
.left-30{
	width:28%;
	margin-right:2%;
	display:inline-block;
}
.right-10{
	width:8%;
	text-align:center;
	display:inline-block;
}


.small-inline{
	width:15%;
	display:inline-block;
}

/* LGC styles */

#lgc-incentives{
	display:none;
}
.lgc-only{
    display:none;
}



.center-text{text-align:center;}
.new-demand-legend{color:#29506d;}
.demand-reduction-legend{color:#427aa5;}

.grid-legend{color:#333;}
.export-legend{color:#558844;}
.solar-legend{color:#fcd23c;}
.investment-legend{color:#29506d;}
.one-year-legend{color:#427aa5;}
.five-year-legend{color:#60baff;}
.yearly-legend{color: #427aa5;}
.dash-item-2-col{
	width:48%;
	padding:10px 1%;
	margin:10px 0 0 0;
	float:left;
	vertical-align:top;
	height:290px;
	background:#fff;
	-webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
}
.minor-height{
	height:120px!important;

}
.dash-item-2-col-2{
	width:46%;
	min-height:180px;
	padding:10px 1%;
	margin:10px 0 0 0;
	float:left;
	vertical-align:top;
	height:auto;
	background:#fff;
	-webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
}
.dash-item-full-width{
	width:98%;
	min-height:180px;
	padding:10px 1%;
	margin:10px 0 0 0;
	display:inline-block;
	vertical-align:top;
	height:auto;
	background:#fff;
	-webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
}
.dash-item-full-width-minor{
	width:98%;
	min-height:80px;
	padding:10px 1%;
	margin:10px 0 0 0;
	display:inline-block;
	vertical-align:top;
	height:auto;
	background:#fff;
	-webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
}
#underlay,#hard-underlay{
	display:none;
	background:rgba(0,0,0,0.7);
	z-index:101;
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:fixed;
	overflow:scroll;
}
#underlay-loading{
	display:none;
	background:rgba(0,0,0,0.7);
	z-index:99;
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:fixed;
	z-index:10001;
}
.large-loading {
font-size:1.4rem;
	font-weight:bold;
	text-align:center;
	color:#efefef;
}
#loading-section{

	width:15%;
	margin-right:42.5%;
	margin-left:42.5%;
	top:30%;
	position:absolute;
}
/* NOTICEBOARD STYLES */
#list-side{
	margin-top:50px;
	display:inline-block;
	vertical-align:top;
	width:38%;
	border-right:1px solid #333;
	padding-right:1%
}
#msg-side{
	margin-top:50px;
	display:inline-block;
	vertical-align:top;
	width:54%;
	padding:3%

}
.msg-heading{
	font-weight:bold;
	font-size:1.2rem;
}
.selected-msg{
	border-color:#acbcdf;
	background:#e6eeff;
}
.msg-date{
	color:#999;
	font-style: italic;
	font-size:0.9rem;
}
#shadetable .bod{
    display:inline-block;
    text-align:center;
    border:1px solid #ddd;

}
#shadetable .shadevals{
    display:inline-block;
    width:4%;
    height:30px;
    text-align:center;
    background:#f3f3f3;
    border:1px solid #ddd;
    color:#000;
    cursor:pointer;
    cursor:hand;
}

#shadetable .head{
    display:inline-block;
    width:4%;
    border:1px solid #ddd;

}
#shadetable{
    font-family:'roboto';
}
#shadetable .head{
    font-weight:bold;
    border:none;
}
#shadetable .shadevals:hover{
    background-color: lightgoldenrodyellow!important;
}
#shadetable .bod{
    font-weight:bold;
    transform: rotate(-60deg);


    /* Legacy vendor prefixes that you probably don't need... */

    /* Safari */
    -webkit-transform: rotate(-60deg);

    /* Firefox */
    -moz-transform: rotate(-60deg);

    /* IE */
    -ms-transform: rotate(-60deg);

    /* Opera */
    -o-transform: rotate(-60deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    height: 23px;
    border: none;
    width: 4%;
    text-align: center;
    /* margin-left: -2px; */
    border-bottom: 1px solid gray;
    transform: rotate(-60deg);
    margin-bottom: 13px;
    padding: 0;
    font-size: 0.8rem;

}
#price-linking-from-price-item-modal{
    z-index:1099;
}
.video-screen-trigger{
	text-decoration:none;
	color:#333;
}
.video-screen-trigger:hover{
	color:#999;
}
#enable-load-reduction{
    display:none;
}
input#mega-search-tips{
	margin-top: -100px;
	height: 80px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border: 1px	solid #9a9a9a;
	background: rgba(255,255,255,0.85);
	font-size: 2rem;
	color:#6a6a6a;
}
input#mega-search-tips::placeholder{
	color:#9f9f9f;
	font-size:2.5rem;
}
#battery-discharge-threshold{
	display:none;
}

#project-notes-screen, #proposal-templates-window, #settings-screen, #shading-screen, #edit-panels-request-screen, #account-screen, #terms-agreement-screen,#advanced-billing-screen, #buy-custom-template-screen, #configure-system-screen, #customers-screen, #load-profiles-screen{
	display:none;
	width:80%;
	margin:0 auto;
	height:86%;
	background:#fff;
	position:fixed;
	z-index:1062;
	border-radius:15px;
	top:3%;
	left:8%;
	padding:2%;
	overflow:scroll;
	overflow-x:hidden;
}
.inputs-window{
	min-height:200px;
	display:none;
	position: fixed;
	left:23vw;
	top:24%;
	width:100%;
	background:#fff;
	border:1px solid #999;
	z-index:100;

}
.ui-dialog { z-index: 10001 !important ;}
#confirm-lp-default-screen{
	background: #fff;
	position: fixed;
	z-index: 100;
	border-radius: 15px;
	top: 25%;
	left: 18%;
	padding: 2%;
	display:none;
}
#video-screen{
	display:none;
	z-index: 100;
	position:fixed;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.8);
	padding:10px;
	top:0;
	left:0;
	overflow:scroll;
	overflow-x:hidden;
	padding:15vh 15vw;

}
#video-screen #video-space{
	margin:0 auto;
	width:580px;
}
#array-preview{
	display:block;
	margin:50px auto;
	border:1px solid #333;
	width:60%;
	min-height:300px;
}
#attachment-space{
	padding:10px;
	box-sizing: border-box;
	width:100%;
}
.attachment-label{
	background:#bfbfbf;
	border:1px solid #999;
	border-radius:15px;
	padding:4px 10px;
	text-align:center;
	font-weight:bold;
	color:#666;
	display:inline;
	margin-right:4px;
	cursor:pointer;
	cursor:hand;
}
.attachment-label:hover{
	background:#dfdfdf;
}

.email-proposal-form-symbol{
	padding:3px 6px;
	height:32px;
	line-height:32px;
	vertical-align:middle;
	text-align: right;
	font-size:0.9rem;
}
#edit-panels-table label{
	font-size:0.75rem;
}
.edit-form-eg{
	font-size:0.7rem;
	color:#777;
}
.edit-datasheet-selected, .edit-image-selected{
	font-size:0.85rem;
	color:#999;
}
.float-right{
	float:right;
}
.edit-upload-button-trigger{
	padding:6px 12px;
	background:darkred;
	color:#fff;

}
.edit-upload-button-trigger:hover{
	color:#ccc;
	background:darkred;
}
#email-proposal-send, #send-proposal-sms{
	border:none;
	font-family:'Arial','fontawesome';
	width:auto;
}
.edit-panel{
	margin:5px;
}
#payment-screen, #buy-custom-template-screen, #email-screen{
	display:none;
	width:40%;
	margin:0 auto;
	height:86%;
	background:#fff;
	position:fixed;
	z-index:10000;
	border-radius:15px;
	top:3%;
	left:28%;
	padding:2%;
	overflow:scroll;
	overflow-x:hidden;
}
#email-screen{
	height:auto;
	width:60%;
	left:18%;
}
#email-screen input{
	height:34px;
	padding:2px 8px;
	margin:0;
}
#new-user-screen{
	display:none;
	width:50%;
	margin:10px auto;
	height:auto;
	background:#fff;
	position:relative;
	border-radius:15px;
	padding:2%;
	
}
#system-efficiency{
	display:none;
}

.open-account-button, .preview-features-button{
	border-radius:3px;
	background:cornflowerblue;
	color:#fff;
	font-weight:bold;
	font-size:1.1rem;
	width:100%;
	text-align:center;
	height:40px;
	padding:4px;
	line-height:40px;
	-webkit-transition: background-color 200ms ease-out 200ms;
	-moz-transition: background-color 200ms ease-out 200ms;
	-o-transition: background-color 200ms ease-out 200ms;
	transition: background-color 200ms ease-out 200ms;
}
.preview-features-button{
	background:#333;
}
.preview-features-button:hover{
	background:#999;
}
.w-100{
	width:100%;
}
.open-account-button:hover{
	background:dodgerblue;
}
.open-account-button a, .preview-features-button a{
	text-decoration: none;
	color:#fff;
}

#loading-overlay{
    vertical-align: middle;
    height: auto;
    font-size:1rem;
    margin:0px 0px 25px 30px;
    padding:5px 10px;
    border-radius:20px;
    color:#fff;
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(92,184,92,0.9);
    border:1px solid #5cb85c;
    text-align: left;
    display: none;
    z-index: 201;
	pointer-events: none;
}
.new-racking-row{
	display:none;
}
#tabs ul,
#transaction-history ul,
#user_settings_tabs ul{
	background:none;
	border:none;
	border-bottom:1px solid #999;
	border-radius:0;
	list-style-type: none;
}
.explain-trigger{
	cursor:pointer;
	font-size:0.9rem;
	color:#8f8f8f;
}
.explain-target{
	display:none;
}
#tabs, #user_settings_tabs{border:none;}
.pad10{padding:10px!important;}
.pad20{padding:20px;}
.pad50{padding:50px;}
.pad100{padding:100px;}
.pad200{padding:200px;}
.pad4{padding:4px;}


.inline-block{
	display:inline-block;
	vertical-align:top;
}
.width20{
	width:20%;
	
}
.width65{
	width:65%;
}
.left5{
	margin-left:5%;
}


.page-header{
	width:100%;
	position:relative;
}
#map{
	height:100%;
}

.header-logo{
	width:28%;
	text-align:left;
	height:100%;
	float:left;
	padding:1%;
}
.darkred-text{
	color:darkred;
}
.header-info{
	width:70%;
	text-align:right;
	height:100%;
	float:left;
	font-size:0.8rem;
	padding:10px 0;
	vertical-align: bottom;
}
#report-quote-number{
	width:auto;
	padding:10px;
	text-align:center;
	font-weight:bold;
	border:1px solid #999;
	position:absolute;
	top:20px;
	right:20px;
}
#page-bottom-guide{
	display:none;
	width:100%;
	height:1px;
	border-bottom:3px dashed rgba(255,0,0,0.3);
	top:1290px;
	position:absolute;
	left:0;
	z-index:10;
}
#rendering-content div{
	box-sizing: content-box;
}
.usermanual-spinner, .pvsitereport-spinner{
    display:none;
}
#rendering-content, #rendering-content-jobsheet, #rendering-content-sitereport, #rendering-content-stringingreport, #rendering-content-usermanual{
    display: inline-block;
	line-height: normal;
	box-sizing: initial;
	position:relative;
	width:777.8px;
	height:1100px;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 2px solid orange;
}
#rendering-content{
	height:auto;
}
#rendering-content-jobsheet, #rendering-content-sitereport, #rendering-content-stringingreport, #rendering-content-usermanual{
	position:absolute;
	top:-99999px;
}
.pressed{
	background:#3f3f3f!important;
	color:#efefef!important;
}
#solar-tilt-picker.ui-anglepicker {
	width: 250px;
	height: 152px;
	margin-top: 20px;
	margin-bottom: -60px;
	margin-right:-125px;
	box-shadow: none;
	background: none;
	border: none;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	position: relative;
	display: inline-block;
}
#solar-tilt-picker .ui-anglepicker-line {
	margin-top: 0px;
	margin-right: 10px;
	height: 10px;
	background: #7f7f7f;
}
#solar-tilt-picker.ui-anglepicker-dot {
	display:none;
 }
 #solar-tilt-picker.ui-anglepicker-dragging .ui-anglepicker-dot, #solar-tilt-picker.ui-anglepicker-dragging .ui-anglepicker-line,
 #solar-tilt-picker.ui-anglepicker:hover .ui-anglepicker-dot,  #solar-tilt-picker.ui-anglepicker:hover .ui-anglepicker-line {
	 background: #8f8f8f;
 }
 #panel_settings_sidebar .halfy{
	 min-height:0px;
 }
 .big-sup{
	 font-size: 2rem;
 }
 input.azimuth, input.tilt{
	 font-size:2rem;
	 height:auto;
	 line-height:1.8rem;
	 text-align: right;
 }
#panel-dimensions{
	display: block;
	margin: 0 auto;
	width:50px;
	height:82.5px;
	border:4px solid #9f9f9f;
	background:#4f4f4f;
	background-image: url(/images/solar-cell.jpg);
	background-repeat:repeat;
	background-size: calc(100%/6) 10%;
	box-shadow: -3px 3px 5px #4f4f4f;
}
table.cellspace-0{
	border-spacing: 0px;
	border-collapse: separate;
}
table.cellpad-0 td{
	padding:0px;
}
table.cellpad-1pc td{
	padding:1%;
}
#dimensions-designer td{
	padding:10px;
}

.panel-width-label{
	font-size:0.8rem;font-weight:bold;
}
.new-panel-height, .new-panel-width {
	font-size:1.5rem;
}

#dimensions-designer{
	margin:2px auto;
	display:block;
}
#solar-orientation-picker{
	display:block;

	margin:10px auto;
	background-image: url(/images/map-tool-icons/compass.png);
	background-size: 100%;
}
.page-shell{
	position:absolute;
	width:100%;
	z-index:-1;
	transition: opacity 0.3s, transform 0.3s;
	overflow:hidden;
	box-shadow:0 0 10px #8f8f8f;
}
#report-logo{
	max-height:100px;
	display:block;
	text-align:center;
	margin: 0 auto;
	padding:0;
	background:#fff;
	border-radius:6px;
}
.paycol1{
	padding:5px;
	background:#666;
	color:#fff;
	text-transform:uppercase;
}
.paycol2{
	padding:5px;
	background:#fff;
	color:#333;
	text-transform:uppercase;
}
.inline-section{display:inline-block;text-align:center;}
.space-between{margin:0 10px;}
.tl1{background:#f9f9f9;}
.tl2{background:#fff;}
.table-col-1{width:70%; display:inline-block;}
.table-col-2, .table-col-3{width:15%;display:inline-block;}
.col-head,.col-head-2{vertical-align:top;line-height:1.2rem;text-transform:uppercase;font-weight:bold;font-size:0.7rem;border-bottom:1px solid #999;}
.heading-1{
	color:#666;
	font-size:1.1rem;
	line-height:1.2rem;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	border-bottom:1px solid #999;
	vertical-align:top;
}
.heading-2,.table-heading-2{
	color:#666;
	font-size:0.9rem;
	line-height:1.2rem;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	border-bottom:1px solid #999;
	vertical-align:top;
}
.heading-3{
	color:#666;
	font-size:0.8rem;
	line-height:1.2rem;
	font-weight:bold;
	text-transform:uppercase;
	vertical-align:top;
}
#map-edit, #map-image{
	height:400px;
	width:640px;
	display:block;
	margin:0 auto;
	}
#map-image{
	display:none;
}

.table-heading-2, .col-head-2{float:left;}
.i-pricing-2,.i-pricing-3,.i-pricing-4,.i-pricing-5,.i-pricing-6,.i-pricing-7,.i-pricing-8,.i-pricing-9{display:none;}
.left-half{width:49%;padding-right:1%;margin:0;display:inline-block;vertical-align:top;}
.right-half{width:49%;padding-left:1%;margin:0;display:inline-block;vertical-align:top;}

.left-third-sm{width:30%;padding-right:1%;margin:0;display:inline-block;vertical-align:top;}
.right-third-sm{width:30%;padding-left:1%;margin:0;display:inline-block;vertical-align:top;}
.right-portion{width:6%;padding-left:1%;margin:0;display:inline-block;vertical-align:top;color:#b51b13;line-height:28px;}

.full-width{width:100%;padding:0;margin:0;}
#s1,#s2,#s3,#s4,#s5{
  display:inline-block;
  padding: 0 2%;
  color:#fff;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  overflow:hidden;
  height:40px;
  margin:0;
  line-height:40px; 
}
#s1:hover,#s2:hover,#s3:hover,#s4:hover,#s5:hover{
  cursor:pointer;
  background:grey;
  -webkit-transition: ball 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
#s1{border-radius:5px 0 0 0;}
#s4{border-radius:0 5px 0 0;}
.active{
  -webkit-transition: ball 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.inactive{
  width:4.5%;
  vertical-align:top;
  -webkit-transition: ball 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  background-color:#333;
   
}
#package{
  width:100%;
  height:40px;
  display:block;
  text-align:center;
  overflow:hidden;
  padding:0;
  margin:0;
  -webkit-transition: ball 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  font-size:0.8rem;
}
.small-heading{
	font-weight:bold;
	font-size:0.75rem;
	text-transform:uppercase;
}
hr{margin:10px 0;}
.half-div{
	width:50%;
	vertical-align:top;
	display:inline-block;
	padding:5%;
	box-sizing: border-box;
}
.full-div{
	width:100%;
	vertical-align:top;
	display:inline-block;
	padding:5%;
	box-sizing: border-box;
}
.half-width{
	width:50%;
	margin:0;
	padding:0;
	display:inline-block;
}
.center-img img, .center-img{
	display:block;
	margin:0 auto;
	max-width:100%;
}

#ch-head-menu-space-1-gen{
	display:inline-block;
	position:absolute;
	margin:0;
	top:0;
	left:0;
	width:15%;
	height:55px;
	background:#fff;
	border-bottom:1px solid #666;
	padding:0 0 0 15%;
	vertical-align:top;
}
.youtube-color{
	color:#c4302b;
}
#ch-head-menu-space-2-gen{
	display:inline-block;
	position:absolute;
	margin:0;
	top:0;
	left:30%;
	width:55%;
	height:55px;
	background:#fff;
	border-bottom:1px solid #666;
	padding:0 15% 0 0;
	vertical-align:top;
}
.highlighted-error{
	box-shadow: 0px 0px 4px red;
	border:1px solid red!important;
}

#main-content-area-gen{
	background-color:#fff;
	width:70%;
	margin:20px 15%;
	left:0;
	top:56px;
	position:relative!important;
}
#main-content-area-gen-account{
	background-color:#fff;
	width:96%;
	margin:20px 0 20px 0;
	position:relative;
	left:2%;
	top:56px;
	display:block;
	min-height:400px;
}
.admin-reports{
	display:none;
}
.thin-form{
	width:40%;
	display:block;
	margin:0 auto;
}

.thirds-feature{
	width:25.6%;
	background:#fff;
	border-radius:5px;
	min-height:200px;
	display:inline-block;
	margin:20px 2.6%;
	text-align:center;
	vertical-align:top;
	padding:10px 1%;
	border:1px solid #fff;
}
.thirds-feature:hover{
	border:1px solid #3764A8;
}
.thirds-feature i{
 	background: #2387d6;
	width:110px;
	height:110px;
	line-height: 110px;
    font-size:2.6rem;
    color: #fff;
    border-radius: 50%;
    box-shadow: -2px 1px 10px #333;
    margin: 20px;
}
.thirds-header{font-size:1.6rem;font-weight:bold;}
.thirds-p{font-size:1.1rem;font-weight:300;}
svg.svg-inline--fa{
	vertical-align:middle;
}
.footer-container{
	background:#2387d6;
}
#footer-s1, #footer-s2, #footer-s3{
	width:31.33%;
	padding:1%;
	display:inline-block;
	vertical-align:top;
	background:rgba(255,255,255,0.1);
	margin:1%;
	min-height:100px;
	box-sizing: border-box;
}
.footer-container a{
	color:#fff;
	font-family: "Roboto";
	font-weight: 300;
}
.footer-container li, .footer-container ul{
	font-size:0.9rem;
	list-style:none;
	padding-left:0!important;
	line-height:1.3rem;
	letter-spacing: 1px;
}
.footer-footnote{
	display: block;
	width:100%;
	color:#fff;
	text-align: center;
	font-size:0.8rem;
	background:#107fbd;
	height:40px;
	line-height:40px;

}
.footer-container a:hover{
	color:#efefef;

}
h4.foot-head{
	color:#fff;
	margin-bottom:10px;
	border-bottom:1px solid #efefef;
}
a.green-button{
	background:green;
	border:none;
	padding:10px;
	color:#fff;
	cursor:pointer;
	display:block;
	margin:0 auto;
	max-width:200px;
	text-align:center;
}

a.green-button:hover{
	background:#219021;
	color:#fff;
	text-decoration:none;
}

/* CASHFLOW REPORT TABLE STYLES */
/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid rgba(33,33,33,0.1);
	display: table-cell;
	width:4%; /*somehow fixed?*/
	padding: 3px 10px;
}
.divCol1{
  background:rgba(33,33,33,0.1);
  width:12%;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.row1{
  background-color:#333;
  color:#fff;
  text-align:center;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
.all-features{
	background: #fff;
}
.feature-section{
	margin:40px 2.5%;
	display:inline-block;
	width:28%;
	vertical-align:top;
	text-align:center;
}
.feature-section-full{
	margin:40px auto;
	display:block;
	width:78%;
	text-align:center;
}
#lp-input-1 button.window-done, .window-done{
	text-transform: uppercase;
	background-color: #1e7e34;
	color: #fff;
	border: 1px solid #1e7e34;
	font-weight: 100;
	border-radius: 4px;
}
#lp-input-1 button.window-done:hover, .window-done:hover{
	background-color:#3e9e54;
}
input.square-input{
	border-radius: 0px;
}
select, input{
	border:1px solid #ced4da;
	font-weight: 100;
	border-radius: 4px;
}
.activate-signal input{
	border-radius: 0px;
}

/* Fancy switch */
#dep-container,#switch-container,#switch-container-2, #network-switch-container, #sitemap-switch-container, #demand-type-switch-container{
	font-family: verdana, sans-serif;
	width:92px;
	height:26px;
	font-size:0.7rem;
	background:rgba(33,33,33,0.5);
	position:relative;
	line-height:1rem;
	box-shadow:0 1px 2px #333;
	border:2px solid #ababab;
	border-radius:5px;
	cursor: pointer;
	text-align:center;
}
#network-switch-container, #demand-type-switch-container{
	width:192px;
}
.input-network-duostuos{
	display:none;
}
#autosave-selector,#switch-selector, #dep-selector,#switch-selector-2, #network-type-selector, #sitemap-selector, #demand-type-selector{
  background:#345D9D;
  margin:1px;
  height:24px;
  width:50%;
  position:absolute;
  left:0;
  box-shadow:0 1px 3px #333;
  
}

.sw-active, .sw-inactive{
  position:absolute;
  line-height:24px;
  text-shadow:0 0 3px rgba(255,255,255,0.4);
  
}
.autosave-sw,.sw,.sw-2, .nw-sw, .sm-sw,.dep-sw, .dt-sw{color:#fff;}
.sw-active{
  right:10px;
}

.sw-inactive{
  left:10px;

}
.site-latlng-only{
	display:none;
}
a.boxclose{
    float:right;
    vertical-align:top;
    cursor:pointer;
    margin:-30px -30px 0 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 34px;
    width:40px;
	border-radius: 30px;
	height:40px;
	text-align:center;
	padding:4px;
	
}
a.boxclose:hover{
	color: #706F71;
}
.sw-deactivated{
	color:rgba(0,0,0,0.3);
	text-shadow:0 0 1px rgba(0,0,0,0.2);
}
.deactivated{
	background-color:#d9d9d9;
	color:#333;

}
.nodisplay{
	display:none!important;
}
button.finance-types-buttons{
	padding:0;
}
.halfy-centered{
	display:block;
	width:50%;
	margin: 0 auto;
}
.align-left{
	text-align: left;
}
/* End fancy switch */
.input-label{
	font-size: 0.75rem;
	padding: 6px 2px;
	/* background: #345D9D; */
	color: #345D9D;
	margin-bottom: -4px;
	/* border-radius: 3px 3px 0px 0px;*/
}
.input-label-q{
    font-size:0.8rem;
    line-height:28px;
    background:none;
    color:#cecece;
    margin-bottom:-4px;
}
.oddrow{
    background-color:#efefef;
}
.minicol1, .minicol2{
    width:48%;
    padding:2px 1%;
    height:22px;
    display:inline-block;
    vertical-align:top;
}
.proposal-choice{
    margin:5px;
    height:200px;
}
#stc-qty{
    background-color:#d9d9d9;
    color:#333;
}
:focus{
    outline:none;
}
#current-project .halfy{
    min-height:10px;
}
.halfy{
    box-sizing:border-box;
    width:50%;
    display:inline-block;
    vertical-align:top;
    box-sizing: border-box;
}
.bighalfy{
    width:75%;
    display:inline-block;
    vertical-align:top;
}
.smallhalfy{
    width:25%;
    display:inline-block;
    vertical-align:top;
}

.thirdy{
    width:33.3%;
    display:inline-block;
}
.twoThirdy{
    width:66.6%;
    display:inline-block;
}
select.thirdy{
    width:32%;
}
.halfy-right{
    margin-left:1%;
    width:49%;
    display:inline-block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.fourthy{
	margin-left:1%;
	width:24%;
	display:inline-block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.price-compare{
	display:inline-block;
	vertical-align:top;
	padding-top:20px;
}
.price-compare-result{
	margin-top:0;
	width:100%;
	background:rgba(52,93,157,0.6);
	color:#fff;
	text-align:center;
	padding:10px;
	bottom:0;
	position:absolute;
	line-height:1.1rem;
	height:60px;
	vertical-align:middle;
	left:0;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.exo2{
	font-family:'Exo 2', sans-serif; 
}
.price-compare-1,.price-compare-3{
	text-align:center;
	width:30%;
	
}
.cop-wrap{
	text-align:center;
	display:block;
	margin:0 auto;
	padding:0 0 10% 0;
	position:relative;
	margin-top:15px;
	height: 200px;
	font-size:1.2rem;
	width: 100%; 
}
.price-compare-2{
	width:20%;
}
.input-button{
	max-width:150px;
	margin:10px 3px 10px 0;
	background:#345D9D;
	color: #fff;
	border:none;
	text-align:center;
	padding:5px;
	float:left;
}
.ultimate-fav-panel-selection, .ultimate-fav-inverter-selection, .ultimate-fav-battery-selection{
	font-size:0.85rem;
}
.fa-stack[data-count]:after{
  position:absolute;
  right:0;
  top:1%;
  content: attr(data-count);
  font-size:60%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,0.85);
  text-align:center;
  min-width:0.6em;
  font-weight:bold;
}
.input-button:hover{
	background: #446DAD;
}
.center-text{text-align:center;}
.giant-text{
	font-size:3.3rem;
	font-weight:100;
}
.med-text{
	font-size:2.5rem;
	font-weight:200;
}
.billing-options-wrapper{
	width:100%;
	margin:0 auto;
	display:block;
}
.one-third{
	width:31%;
	padding:1%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	display:inline-block;
}
.one-q{
	width:23%;
	padding:1%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	display:inline-block;

}
.billing-option{
	border:1px solid #afafaf;
	box-shadow:0 0 6px #dfdfdf;
	width:100%;
	background:#efefef;
	cursor:pointer;
	padding:20px 0;
}
.billing-option:hover{
	background:#f6f6f6;
	box-shadow:0 0 8px #ccffff;
}
.billing-option p{
	font-size:1.3rem;
	text-align:center;
	font-weight:100;
}
.message-button{
	border:1px solid #44be33;
	border-radius:3px;
	color:#44be33;
	line-height:0.8rem;
	font-size:0.7rem;
	text-align:center;
	width:auto;
	padding:2px 6px;
}
.message-button-tou{
	border:2px solid #345D9D;
	background:#fff;
	border-radius:3px;
	color:#345D9D;
	line-height:1.0rem;
	font-size:0.8rem;
	font-weight:bold;
	text-align:center;
	width:auto;
	padding:4px 6px;
}
.message-button-tou:hover{
	background:#446DaD;
	color:#fff;
}
.message-button:hover{
	border:1px solid #54ce43;
	color:#54ce43;

}

#billing-selection{display:inline-block;width:100%;}
.quartery{
	width:37%;
	display:inline-block;
	vertical-align:top;
}
.qtry{
	width:24%;
	display:inline-block;
	vertical-align:top;
	margin-right:1%;
}
.qtry-job-type{
	width:25%;
	display:inline-block;
	vertical-align:top;
}
.threeQrtry{
	width:75%;
	display:inline-block;
	vertical-align:top;
}
.w-25{
	width:25%;
	display:inline-block;
	box-sizing: border-box;
	padding:10px;
	vertical-align: top;
}
.w-75{
	width:75%;
	display:inline-block;
	box-sizing: border-box;
	padding:10px;
	vertical-align: top;
}

#billing-block-screen, #billing-tou-screen, #billing-unbundled-screen{
	display:none;
}
#tou-preview, .bill-form{
	display:block;
	padding:20px;
	border-radius:4px;
        box-shadow: 0px 0px 6px #dfdfdf;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
}

#tou-preview{
	display:none;
}
.red-button{
	background:#cc3434;
}
.red-button:hover{
	background:#bb2424;
}

#acceptance-content {
	max-height: 250px;
	height: 80px;
	
}
#voiceBtn {
  width: 20px;
  color: transparent;
  background-color: transparent;
  transform: scale(2.0, 2.0);
  -webkit-transform: scale(2.0, 2.0);
  -moz-transform: scale(2.0, 2.0);
  border: transparent;
  cursor: pointer;
  box-shadow: none;
  -webkit-box-shadow: none;
}

div[data-role="editor-toolbar"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.array-warning{
	display:none;
	color:rgba(233,20,20,0.8);
}
.dropdown-menu a {
  cursor: pointer;
}
.add-site-array{
	cursor:pointer;
	font-size:0.6rem;
	color:#333;
}
.remove-site-array{
	cursor:pointer;
	color:#983333;
}
#compass-overlay {
    position: fixed;
    top: 200px;
	left:24%;
    border: 1px solid #afafaf;
	display:none;
	background:#fff;
	padding:50px;
}
.compass-direction{
	font-size:2rem;
	font-weight:bold;
	text-align:center;
	margin-top:40px;
}
.compass-img{
	width:200px;
}

/* Panel Config Styles */

.image-o{
	background:red;
	background:url('../images/compass2.png');
	background-size:25px 25px;
	width:25px;
	height:25px;
	display:inline-block;
	font-size:0.6rem;
	color:#333;
	line-height:25px;
	vertical-align:top;
	margin:1px;
}

.summary-container{
	width:65%;
	min-height:300px;
	margin:0 auto;
	display:block;
	position:relative;
	padding:20px 0;
  
}
.solar-panel{
	display:inline-block;
	width:15px;
	height:25px;
	border:2px solid #333;
	margin:1px;
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.array{
	position:absolute;
	padding:3px;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}
.large-input{
	font-size:1.5rem;
	font-weight:bold;
}
a.ctrl-button{
	margin-left:3px;
	padding:4px; 
	border:1px solid #345D9D;
	border-radius:3px;
	background:#345D9D;
	color:#fff;
}
.ctrl-button:hover{
	background:#94bDfD;
}
.right-aligned{
	text-align:right;
	float:right;
}
.array-break{
	height:40px;
	width:100%;
}
.selected{
	background-color:rgba(14,200,56,0.3);
}
#system-config-controls{
	width:23%;
	padding:1%;
	display:inline-block;
	vertical-align:top;
	position:relative;
	height:500px;
	background:rgba(0,0,0,0.1);
}
.panel-view-container{
	width:65%;
	min-height:300px;
	padding:10px 2.5%;
	display:inline-block;
	vertical-align:top;
	position:relative;
}
.panel-container{
	border:1px solid #999;
	width:92%;
	min-height:600px;
	margin:0 auto;
	display:block;
	position:relative;
	padding:0 4%;
}


/* TOU TIME SELECTION Styles */
.wrapme{
	width:100%;
	display:block;
	margin: 0 auto;
}
.fourthy{
	width:20%;
	padding:5px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	display:inline-block;
}
.timeline{
    background:rgba(255,44,44,0.3);
    width:180px!important;
    padding:0;
    font-size:0.7rem;
    text-transform:uppercase;
    line-height:1.6rem;
    vertical-align:top;
    position:relative;
    margin-top:5px;
    display:none;
}
.time-entry{
    width:50%;
    padding:5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display:inline-block;
}
.center-text{
    text-align:center;
}
.weekday-expanded, .weekend-expanded{
    display:none;
}
.toggle-weekdays, .toggle-weekends{
    cursor:pointer;
}
.peak-timeline{
    background:rgba(255,55,55,0.3);
    width:40px;
    display:inline-block;
    position:absolute;
    left:0
}
#tou-dropdown-settings-section{
    display:none;
}
tr#first-row-tou-table{
	border:1px solid black;
}
#first-row-tou-table td div{
    border-top: 1px solid black;
    rotate: 45deg;
    margin-right: -12px;
    margin-left: -23px;
}
.tou-settings-space{
    max-width:100%;
    overflow-x:auto;
}
.tou-settings-space tr:not(#first-row-tou-table) td{
	font-size:0.9rem;
	border:1px solid black;
}
.shoulder-timeline{
    background:rgba(114,255,55,0.3);
    width:80px;
    display:inline-block;
    position:absolute;
    left:40px
}
.toggle-weekdays, .toggle-weekends{
	font-weight:bold;
	font-size:1.3rem;
}
.offpeak-timeline{
    background:rgba(55,55,255,0.3);
    width:60px;
    display:inline-block;
    position:absolute;
    left:120px;
}
.peak-color{
    background:rgba(255,55,55,0.3);
}
.shoulder-color{
    background:rgba(114,255,55,0.3);
}
.offpeak-color{
    background:rgba(55,55,255,0.3);
}
#save-time-of-use-modal, #confirm-price-delete-modal, #edit-price-item-modal, #edit-price-system-modal, #price-linking-from-price-item-modal, #confirm-system-item-qty-modal{
    z-index:1061;
}
/* Custom styles for the modal */
#battery-stcs-modal .modal-content {
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	border: none;
}

#battery-stcs-modal .modal-header {
	background-color: #f8f9fa;
	border-bottom: 1px solid #eaeaea;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	padding: 1.25rem 1.5rem;
}

#battery-stcs-modal .modal-title {
	color: #344767;
	font-weight: 600;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

#battery-stcs-modal .modal-title i {
	margin-right: 10px;
	color: #43A047;
}

#battery-stcs-modal .modal-body {
	padding: 2rem 1.5rem;
}

#battery-stcs-modal .battery-info {
	background-color: #F3F6FF;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

#battery-stcs-modal .battery-info h6 {
	color: #344767;
	font-weight: 600;
	margin-bottom: 1rem;
}

#battery-stcs-modal .battery-info p {
	color: #67748e;
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

#battery-stcs-modal .info-text {
	color: #67748e;
	line-height: 1.6;
}

#battery-stcs-modal .benefit-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
}

#battery-stcs-modal .benefit-item i {
	color: #43A047;
	margin-right: 12px;
	margin-top: 4px;
}

#battery-stcs-modal .modal-footer {
	border-top: 1px solid #eaeaea;
	padding: 1.25rem 1.5rem;
}

#battery-stcs-modal .btn-decline {
	background-color: #fff;
	color: #67748e;
	border: 1px solid #eaeaea;
	padding: 0.6rem 1.2rem;
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.2s ease;
}

#battery-stcs-modal .btn-decline:hover {
	background-color: #f5f5f5;
}

#battery-stcs-modal .btn-confirm {
	background-color: #43A047;
	color: #fff;
	border: none;
	padding: 0.6rem 1.5rem;
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.2s ease;
}

#battery-stcs-modal .btn-confirm:hover {
	background-color: #388E3C;
}

#battery-stcs-modal .btn-confirm i {
	margin-right: 8px;
}
/* Additional styling for the accordion version */
#batteryRebateAccordion .accordion-button {
    padding: 0.75rem 1rem;
    font-weight: 500;
}

#batteryRebateAccordion .accordion-button:not(.collapsed) {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

#batteryRebateAccordion .accordion-body {
    padding: 1rem;
    background-color: #f8f9fa;
}

.battery-summary {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.benefit-item i {
    color: #198754;
    margin-right: 0.75rem;
    margin-top: 0.2rem;
}
.tou-warning{
    color:red;
    padding:10px;
    text-transform:uppercase;
    font-size:0.7rem;
    background:rgba(255,33,33,0.4);
    position:relative;
    left:0;
    top:0;
    display:none;
    margin:10px 0;
    border:1px solid #cc2020;
    border-radius:6px;
}

.form-check-input {
  clear: left;
}
#new-price-item-modal{
    z-index:1063;
}
.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}


.recommendation{
    color:green;
    padding:10px;
    text-transform:uppercase;
    font-size:0.9rem;
    background:rgba(33,255,33,0.3);
    position:relative;
    left:0;
    top:0;
    display:block;
    border:1px solid #20cc20;
    border-radius:6px;
}
.niceCountryInputMenuDefaultText{
    width:auto!important;
}
.d-flex{
    display: flex !important;
}

#bottomLeftControls{
    background: white;
    border-radius: 3px;
    padding: 5px;
}
.discount-indicator, .wizard-discount-indicator{
	background:palegreen;
	border-radius:12px;
	padding:5px 9px;
	display:inline-block;
	font-size:0.8rem;
	vertical-align: middle;
	margin-right:3px;
	margin-top:12px;
}
.wizard-discount-indicator{
    margin-top:0;
}
#wizard-discount-space{
	display:none;
}
.wizard-discount-space-row{
    display:none;
}
.pad7{
	padding:7px;
}
#lp-input-1 button{
	border-radius: 0px;
}
#lp-input-1 button.standard-btn{
	border-radius: 4px;
}
.ui-widget button{
    font-size: 1rem;
}
.ui-widget .pricing-settings-table input{
	font-size:0.8rem;
}
#lp-input-1 button.standard-btn-success,button.standard-btn-success{
	border-radius: 4px;
	background-color: #1e7e34;
}
#lp-input-1 button.standard-btn-success:hover,button.standard-btn-success:hover{
	background-color: #3e9e54;
}
#lp-input-1 button.standard-btn-err, button.standard-btn-err{
	border-radius: 4px;
	background-color: darkred;
}
#lp-input-1 button.standard-btn-err:hover,button.standard-btn-err:hover{
	background-color: #ac3232;
}
.ml-10{
	margin-left:10px;
}
#lp-input-1 button.standard-btn-sml{
	border-radius: 4px;
	font-size:0.7rem;
	padding:2px 8px;
	line-height:20px!important;
	margin:0;
}
.unselectable {
    -webkit-user-select: none; /* Chrome, Safari, Edge */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard syntax */
}
#lp-input-1 button.standard-btn-err-sml{
	border-radius: 4px;
	background-color: darkred;
	font-size:0.7rem;
	padding:2px 8px;
	line-height:20px!important;
	margin:0;
}
#lp-input-1 button.standard-btn-err-sml:hover{
	background-color: #ac3232;
}
#lp-input-2{
    font-family:'roboto', sans-serif;
    max-height: 45vh;
	position:absolute;
	z-index:11;
}
#design-options-dropdown li {
    transition: all 0.3s ease; 
}

#design-options-dropdown li:not(.isActive):not(#add-design-option){
	opacity:0.7;
	background-color:rgba(0,0,0,0.05);

}
#design-options-dropdown li.isActive, #add-design-option {
    opacity: 1; /* Fully opaque for active items */
	background-color:#fff;
}
#design-options-dropdown .design-option-price, #design-options-dropdown .design-options-container {
    cursor:pointer;
    cursor:hand;
}
#design-options-dropdown .dropdown-menu li {
    user-select: none; /* Prevent text selection */
}
.design-options-container{
	line-height:1.7rem;
}
.checkbox.styled {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 20px;
}
.checkbox.styled + label {
    position: relative;
    padding: 0 0 0 60px;
    cursor: pointer;
}
.checkbox.styled + label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}
.checkbox.styled + label:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    transition: .2s;
}
.danger-msg{
	color:darkred;
	font-weight:bold;
}
button.pricy-choose-button:hover{

	background:rgba(255,255,255,0.9);
	color:rgba(0,0,0,0.6);
	border-color:rgba(0,0,0,0.6);
}
button.pricy-choose-button{
	text-transform: uppercase;
	background:rgba(255,255,255,0.5);
	color:rgba(0,0,0,0.4);
	border: 1px solid rgba(0,0,0,0.2);
	border-radius:15px;
	height:35px!important;
	line-height:35px!important;
	width:100px!important;
	font-size:1rem!important;
	padding:0px 8px;
	text-align:center;
	margin:0;
}
.chosen-column{
	background: rgba(218,165,32,0.2)!important;
}
.features-explained .sp-table-cell.features-table-cap{
	font-size:1rem;
}
.chosen-pricy{
	text-transform: uppercase;
	background:goldenrod;
	color:#000;
	border: 1px solid goldenrod;
	border-radius:15px;
	height:35px!important;
	line-height:35px!important;
	font-size:1rem!important;
	width:130px;
        padding:0px 8px;
	text-align:center;
        display:block;
        text-align:center;
	margin:0 auto!important;
}
.pricy-container{
	display:block;
	width:100%;
	height:60px;
}
.pricy-row.chosen-plan-row td{
	background:goldenrod;
}
.pricy-row td.pricy-name{
	font-size:1rem;
	width:30%;
}
.features-explained .sp-table-cell.features-name-heading{
	font-size:1.5rem;
}
.features-explained .sp-table{

	border-collapse: collapse;
	border-spacing: 0px;
}
.features-explained .sp-table-cell option{
	text-align: center;
	text-align-last: center;
}
.features-explained .sp-table-cell select{
	border-radius: 20px;
	max-width:140px;
	font-size:1rem;
	padding-left: calc(23% - 1rem);
}
.features-explained .sp-table-cell{
	padding:12px;
	border:1px solid #afafaf;
	font-size:0.85rem;
}
.features-explained .sp-table-row:nth-child(n+2):nth-child(odd) .sp-table-cell{
	background: #dfdfdf;
}
.low-tier-row{
	display:none;
}
.pricy-table{
	border-collapse: collapse;

}
.pricy-table th{
	font-size:0.8rem;
	text-transform: uppercase;
}
.pricy-row{

	background:white;
}
.pricy-row td{
	border: 1px solid rgba(0,0,0,0.1);
	font-size:0.9rem;
	padding:4px;
	height:30px;

}
.finance-selected-summary:hover{
    color:#0C6FFD!important;
    background-color:white!important;
}
tr.pricy-row:hover{
	background:rgba(0,0,0,0.1);
}
.quota-exceeded-msg{
	position:fixed;
	bottom:0;
	left:0;
	width:100vw;
	height:20vh;
	background: rgba(0,0,0,0.9);
	color:#fff;
	z-index:100;
	box-sizing: border-box;
	padding:40px 10vw;
        transition: width 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	text-align:center;
}
.quota-exceeded-msg input.golden-button, .golden-button button{
	background:goldenrod;
	color:black;
	width:auto;
	border:none;
	font-weight:bold;
	margin:10px 0;
}

.quota-exceeded-msg input.golden-button:hover, .golden-button button:hover{
	background:darkgoldenrod;
}
.quota-exceeded-msg .little-msg{
	font-size:0.8rem;
	color:#7f7f7f;
}
.quota-exceeded-msg .big-msg{
	font-size:1.5rem;
	font-weight:bold;
	color:goldenrod;
}
input#number-imagery-seats{
	height: 50px;
	font-size: 1.5rem;
}
.success-text-strong{
	font-weight:bold;
	font-size:1rem;
	color:darkgreen;
}
.screeny{
	box-shadow: 0px 3px 10px;
	display:block;
	min-width:60%;
	box-sizing: border-box;
	margin:0 20%;
	background:#fff;
	position:fixed;
	z-index:1061;
	border-radius:25px;
	top:-1000%;
	padding:6%;
	overflow-y:hidden;
	overflow-x:hidden;
	transition: width 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	text-align:center;
}
.w-80-center{
	width:80%;
	margin:0 10%;
}
.screeny #notification-content{
	padding-top:30px;
	padding-bottom:30px;
}
.screeny #notification-content .tiny-text{
	font-size:0.7rem;
}
.screeny button{
	border: 2px solid cornflowerblue;
	padding:6px 18px;
	background:white;
	color:#0d3349;
	border-radius:30px;
	line-height:28px;
	font-size:18px;
	font-weight:100;
}
.screeny button:hover{
	background: black;
	border-color:black;
	color:white;
}
.checkbox.styled:checked + label:before {
    background: #6593ea;
}
.checkbox.styled:checked + label:after {
    left: 26px;
}

#top-panel-type .small-right {
    width: 27%;
}
.modern-widget-container {
    padding: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.gradient-button {
    position: relative;
    padding: 0.85rem 2.2rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #efefef;
    border-radius: 8px;
    background-size: 200% 200%;
    transition: all 0.4s ease;
    border: none;
    cursor: pointer;
    overflow: hidden;
}

.signup-button {
    background: linear-gradient(
        45deg, 
        #2563eb 0%, 
        #3b82f6 25%, 
        #60a5fa 50%, 
        #3b82f6 75%, 
        #2563eb 100%
    );
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3),
                0 0 0 2px rgba(37, 99, 235, 0.1);
    animation: gradientShift 3s ease infinite;
}

.demo-button {
    background: linear-gradient(
        45deg,
        #020617 0%,
        #0f172a 25%,
        #1e293b 50%,
        #0f172a 75%,
        #020617 100%
    );
    box-shadow: 0 4px 15px rgba(2, 6, 23, 0.4),
                0 0 0 2px rgba(2, 6, 23, 0.2);
    animation: gradientShift 3s ease infinite;
    animation-delay: 0.15s;
}

.gradient-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        #60a5fa,
        #3b82f6,
        #2563eb,
        #3b82f6
    );
    background-size: 400% 400%;
    border-radius: 10px;
    z-index: -1;
    animation: borderGlow 3s ease infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-button:hover {
    transform: translateY(-2px);
    background-position: right center;
	color: white;
}

.gradient-button:hover::before {
    opacity: 1;
}

.gradient-button:active {
    transform: translateY(1px);
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes borderGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Shine effect */
.gradient-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s ease infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-200%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@media (max-width: 768px) {
    .modern-widget-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .gradient-button {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

#mobile-menu{
	display:none;
}
.dropdown-toggle-user::after{
    vertical-align: 0.94em;
}
@media (max-width: 1630px) {
    /* Hide the text of the links and set a fixed width for the icons */
    .navbar-colly li a {
        font-size: 0;
        line-height: 1;
    }
    .navbar-colly li a i {
        font-size: 24px;
        width: 24px;
        display: inline-block;
        text-align: center;
    }
}
@media only screen and (max-width: 1100px) {

	.ch-head-menu-item-2{
		padding:0 6px;
	}
}
@media only screen and (max-width: 800px) {

	#main-content-area-gen{
		margin: 20px 15%;
		margin-bottom: 100px;
		position:inherit!important;
	}
	#footer-container, #register-now, input#mega-search-tips, .center-img{
		display:none;
	}

	.feature-section{
		margin:40px auto;
		display:block;
		width:78%;
		text-align:center;
	}
	.feature-section-full{
		margin:40px auto;
		display:block;
		width:78%;
		text-align:center;
	}
	#mobile-menu{
		display:inline-block;
		text-align:right;
		width:50%;
		line-height:55px;
		height:55px;
		border-bottom:1px solid #666;
	}
	#mobile-menu i{
		padding-right:30px;
	}
	#ch-head-menu-space-1-gen{
		display:inline-block;
		position:relative;
		margin:0;
		padding:0;
		top:0;
		left:0;
		width:50%;
		height:55px;
		background:#fff;
		border-bottom:1px solid #666;
		vertical-align:top;
		text-align:left;
	}
	#ch-head-menu-space-1-gen img{
		height:40px;
		padding-top:8px;
		padding-left: 8px;
	}
	#ch-head-menu-space-2-gen{
		display:none;
		position:relative;
		margin:0;
		padding:0;
		top:0;
		left:0;
		width:100%;
		height:55px;
		background:#fff;
		vertical-align:top;
		text-align:left;
		box-sizing: border-box;
	}
	#ch-head-menu-space-2-gen a{
		display:block;
		margin:0;
		width:100%;
	}
	#ch-head-menu-space-2-gen a{
		display:none;
	}
	.ch-head-menu-item-2{
		padding:0;
	}
}
#settings-screen-modal .hidden{
    display: none;
}

/**
 * Promoted Product Card Styles
 * Add to your main stylesheet or include separately
 */

/* Promoted card container */
.panel-result-card.promoted-panel {
    border: 2px solid #ffc107;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    position: relative;
    overflow: visible;
}

.panel-result-card.promoted-panel:hover {
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* Featured ribbon */
.promotion-ribbon {
    position: absolute;
    top: -8px;
    left: -8px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.promotion-ribbon i {
    font-size: 0.65rem;
}

/* Alternative corner ribbon style */
.promotion-ribbon.corner {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    padding: 0;
    background: transparent;
    overflow: hidden;
}

.promotion-ribbon.corner::before {
    content: 'Featured';
    position: absolute;
    top: 15px;
    left: -22px;
    width: 90px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    padding: 3px 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Promotion badges */
.promotion-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    color: #856404;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #ffc107;
    white-space: nowrap;
}

.promo-badge i {
    margin-right: 3px;
    font-size: 0.6rem;
}

/* Promoted card image glow effect */
.panel-result-card.promoted-panel .card-img-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Brand logo styling for promoted cards */
.panel-result-card.promoted-panel .brand-logo-overlay {
    border: 2px solid #ffc107;
}

/* Select button for promoted cards */
.panel-result-card.promoted-panel .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border: none;
    font-weight: 600;
}

.panel-result-card.promoted-panel .btn-warning:hover {
    background: linear-gradient(135deg, #ffca2c 0%, #ffa726 100%);
    transform: scale(1.02);
}

/* Subtle animation for promoted cards */
@keyframes promoted-pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 193, 7, 0.5);
    }
}

.panel-result-card.promoted-panel {
    animation: promoted-pulse 3s ease-in-out infinite;
}

/* Stop animation on hover for better UX */
.panel-result-card.promoted-panel:hover {
    animation: none;
}

/* Promoted indicator in list view (if you have one) */
.promoted-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffc107;
    color: #000;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

.promoted-indicator i {
    font-size: 0.6rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .panel-result-card.promoted-panel {
        border-color: #ffca28;
        box-shadow: 0 4px 15px rgba(255, 202, 40, 0.25);
    }
    
    .promo-badge {
        background: rgba(255, 193, 7, 0.2);
        color: #ffc107;
        border-color: rgba(255, 193, 7, 0.4);
    }
    
    .promotion-ribbon {
        background: linear-gradient(135deg, #ffca28 0%, #ffa000 100%);
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .promotion-ribbon {
        font-size: 0.6rem;
        padding: 3px 8px;
    }
    
    .promo-badge {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
    
    .promotion-badges {
        gap: 2px;
    }
}

/* Loading state for promoted content */
.panel-result-card.promoted-panel.loading {
    opacity: 0.7;
    pointer-events: none;
}

.panel-result-card.promoted-panel.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ffc107;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/**
 * Promoted Panel Card Styles
 * Works with the original getPanelCard structure
 */

/* Promoted card wrapper */
.panel-card.promoted-panel .card {
    border: 2px solid #ffc107 !important;
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
    position: relative;
    overflow: visible;
}

.panel-card.promoted-panel .card:hover {
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.45);
}

/* Featured ribbon - positioned in top-left */
.promotion-ribbon {
    position: absolute;
    top: -10px;
    left: -10px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.promotion-ribbon i {
    font-size: 0.65rem;
}

/* Card header for promoted - subtle gold tint */
.panel-card.promoted-panel .card-header {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.1) 0%, transparent 100%);
}

/* Gold select button for promoted panels */
.panel-card.promoted-panel .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border: none;
    color: #000;
    font-weight: 600;
}

.panel-card.promoted-panel .btn-warning:hover {
    background: linear-gradient(135deg, #ffca2c 0%, #ffa726 100%);
    color: #000;
}

/* Subtle pulse animation - not too distracting */
@keyframes promoted-glow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
    }
    50% {
        box-shadow: 0 2px 15px rgba(255, 193, 7, 0.5);
    }
}

.panel-card.promoted-panel .card {
    animation: promoted-glow 3s ease-in-out infinite;
}

/* Stop animation on hover */
.panel-card.promoted-panel .card:hover {
    animation: none;
}

/* Optional: Promotion badges if you want to show them */
.promotion-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 0 0.5rem;
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(255, 193, 7, 0.4);
    white-space: nowrap;
}

/* Responsive - smaller ribbon on mobile */
@media (max-width: 576px) {
    .promotion-ribbon {
        font-size: 0.6rem;
        padding: 3px 6px;
        top: -8px;
        left: -8px;
    }
}