::placeholder {
  opacity: .6!important;
  color: black!important;
}

.donutchart,
#chart,
#chart2,
#chart3 {
    width: 400px;
    height: 400px;
    font-family: Arial;
}

@media only screen and (max-width: 767px) {
    .ui.stackable.grid {
        width: auto;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }
}

.power-marker {
    left: var(--power-value);
    /* other styles */
}

.universal-search-input {
    text-transform: uppercase!important;
    background-color: #F5F6FA!important;
    border: 1px solid #e5e7eb!important;
    border-radius: 0.375rem!important;
    padding-left: 50px!important;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
    
    .screening-tools-cta-modal {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      width: 100%;
      display: flex;
      overflow: hidden;
    }
    
    .screening-tools-cta-modal-left {
      width: 45%;
      padding: 30px;
      background-color: #f8f9fa;
      position: relative;
    }
    
    .screening-tools-cta-modal-right {
      width: 55%;
      padding: 30px;
      display: flex;
      flex-direction: column;
    }
    
    .screening-tools-cta-close-button {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 24px;
      color: #6b7280;
      cursor: pointer;
      z-index: 10;
    }
    
    .screening-tools-cta-close-button:hover {
      color: #374151;
    }
    
    .screening-tools-cta-modal-title {
      font-size: 24px;
      font-weight: 600;
      color: #111827;
      margin-top: 0;
      margin-bottom: 8px;
    }
    
    .screening-tools-cta-modal-subtitle {
      font-size: 16px;
      color: #4b5563;
      margin-bottom: 24px;
    }
    
    .screening-tools-cta-feature-list {
      margin-bottom: 30px;
    }
    
    .screening-tools-cta-feature-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
    }
    
    .screening-tools-cta-feature-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      margin-right: 12px;
      color: #3b82f6;
      flex-shrink: 0;
    }
    
    .screening-tools-cta-feature-text {
      font-size: 15px;
      color: #1f2937;
      line-height: 1.5;
    }
    
    .screening-tools-cta-feature-text strong {
      font-weight: 600;
    }
    
    .screening-tools-cta-button {
      display: inline-block;
      background-color: #3b82f6;
      color: white;
      font-weight: 500;
      font-size: 16px;
      padding: 12px 24px;
      border-radius: 6px;
      text-align: center;
      text-decoration: none;
      margin-top: auto;
      width: 100%;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .screening-tools-cta-button:hover {
      background-color: #2563eb;
    }
    
    .screening-tools-cta-fine-print {
      font-size: 12px;
      color: #6b7280;
      margin-top: 12px;
      text-align: center;
    }
    
    .screening-tools-cta-filters-preview {
      background-color: #f3f4f6;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 24px;
      max-height: 300px;
      overflow-y: auto;
    }
    
    .screening-tools-cta-filter-category {
      margin-bottom: 16px;
    }
    
    .screening-tools-cta-filter-title {
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 8px;
    }
    
    .screening-tools-cta-filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .screening-tools-cta-filter-tag {
      font-size: 12px;
      background-color: #e5e7eb;
      color: #374151;
      padding: 4px 8px;
      border-radius: 4px;
    }
    
    .screening-tools-cta-premium-tag {
      display: inline-flex;
      align-items: center;
      background-color: #fef3c7;
      color: #92400e;
      font-size: 12px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 12px;
      margin-left: 8px;
    }

    .learn-more-link {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    padding: 16px 20px;
    border-radius: 10px;
    margin-top: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.learn-more-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    color: white;
    text-decoration: none;
}

.learn-more-link::before {
    content: "📚";
    font-size: 20px;
    margin-right: 12px;
}

.learn-more-link::after {
    content: "→";
    margin-left: auto;
    font-size: 18px;
}

.watchlist-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}


                .active.rows.section {
                    color: black;
                }
                .active.rows.section:hover {
                    color: black;
                }

    .strikethrough {
        position: relative;
        text-decoration: line-through;
        color: #a0aec0;
        font-size: 24px;

    }

    .popular-screens.label {
        border-radius: 12px;
    }

    @media (max-width: 480px) {
    
    .timeline-content {
        flex-flow: wrap;
    }
    
    .timeline-stat {
        flex: 1;
    }
}

                        /* Base Timeline Styles */
                    .timeline-cta {
                        border-radius: 12px;
                        margin-top: 24px;
                        padding: 20px;
                        color: white;
                        position: relative;
                        overflow: hidden;
                    }

                    .timeline-content {
                        display: flex;
                        align-items: center;
                        gap: 32px;
                        position: relative;
                        z-index: 1;
                    }

                    .timeline-stat {
                        text-align: center;
                        position: relative;
                    }

                    .timeline-stat:not(:last-child)::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        right: -16px;
                        width: 2px;
                        height: 30px;
                        background: rgba(255, 255, 255, 0.2);
                        transform: translateY(-50%);
                    }

                    .timeline-number {
                        font-size: 32px;
                        font-weight: 600;
                        line-height: 1;
                        margin-bottom: 4px;
                    }

                    .timeline-label {
                        font-size: 13px;
                        opacity: 0.9;
                    }

                    .unlock-section {
                        margin-left: auto;
                        text-align: right;
                    }

                    .unlock-button {
                        border: none;
                        padding: 12px 24px;
                        border-radius: 8px;
                        font-weight: 600;
                        cursor: pointer;
                        transition: all 0.2s;
                        margin-top: 12px;
                    }

                    .unlock-button:hover {
                        transform: translateY(-1px);
                    }

                    /* Deep Ocean Theme */
                    .ocean-theme {
                        background: linear-gradient(135deg, #0f2c54, #2563eb);
                    }

                    .ocean-theme::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.3), transparent 60%);
                    }

                    .ocean-theme .unlock-button {
                        background: white;
                        color: #1e40af;
                    }

                    /* Night Sky Theme */
                    .night-theme {
                        background: linear-gradient(135deg, #1e1b4b, #3730a3);
                    }

                    .night-theme::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: 
                        radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.4) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.4) 0%, transparent 50%);
                    }

                    .night-theme .unlock-button {
                        background: #e0e7ff;
                        color: #3730a3;
                    }

                    /* Sunset Theme */
                    .sunset-theme {
                        background: linear-gradient(135deg, #7928ca, #ff0080);
                    }

                    .sunset-theme::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: 
                        radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 60%),
                        radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.1), transparent 60%);
                    }

                    .sunset-theme .unlock-button {
                        background: white;
                        color: #7928ca;
                    }

                    /* Professional Dark Theme */
                    .pro-dark-theme {
                        background: linear-gradient(135deg, #1a1d1f, #2d3436);
                    }

                    .pro-dark-theme::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background: 
                        radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent 60%),
                        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.15), transparent 60%);
                    }

                    .pro-dark-theme .unlock-button {
                        background: #3b82f6;
                        color: white;
                    }

                    .pro-dark-theme .unlock-button:hover {
                        background: #2563eb;
                    }

                    /* Shared hover effects */
                    .unlock-button:hover {
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    }

.underline--magical {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.15em;
    background-position: 0 88%;
    transition: background-size 0.25s ease-in;
}

.ui.menu .active.item {
     background: white;
    }

    .hide:not(.button):not(.screeningTools) {
        filter: blur(4px);
        opacity: 0.7;
        pointer-events: none;
}

.donutchart {
    position: relative;
}

.weeklydonut {
    width: 300px;
    height: 200px;
}

#labelOverlay {
    /*width: 80px;*/
    height: 45px;
    position: absolute;
    top: 80px;
    left: 94px;
    text-align: center;
    cursor: default;
}

#labelOverlay2 {
    width: 115px;
    height: 45px;
    position: absolute;
    top: 100px;
    left: 130px;
    text-align: center;
    cursor: default;
}

#weeklyLabelOverlay2 {
    width: 80px;
    height: 45px;
    position: absolute;
    top: 110px;
    left: 100px;
    text-align: center;
    cursor: default;
}

        .teaser-content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
            align-items: center;
        }

                .breakout-preview {
            background: #f8fafc;
            border-radius: 8px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .preview-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: white;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
        }

                .pulse-icon {
            color: #22c55e;
            width: 24px;
            height: 24px;
        }

                .intraday-stock-info {
            flex-grow: 1;

        }

                .intraday-stock-symbol {
            font-weight: 500;
            color: #1f2937;
        }

        .breakout-time {
            font-size: 12px;
            color: #6b7280;
        }

        .blur-overlay {
            filter: blur(4px);
            opacity: 0.7;
            pointer-events: none;
        }

        .intraday-upgrade-card {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            padding: 24px;
            border-radius: 12px;
            color: white;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .intraday-upgrade-title {
            font-size: 18px;
            font-weight: 600;
        }

        .intraday-feature-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .intraday-feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .intraday-feature-icon {
            width: 16px;
            height: 16px;
            color: #93c5fd;
        }

        .intraday-upgrade-button {
            background: white;
            color: #2563eb;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 8px;
            text-align: center;
            text-decoration: none;
        }

        .intraday-upgrade-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .intraday-current-count {
            font-size: 14px;
            color: #6b7280;
            text-align: center;
        }

        .intraday-highlight {
            color: #2563eb;
            font-weight: 500;
        }

#labelOverlay2 p {
    line-height: 0.5;
    /* padding: 0; */
    margin: 8px;
}

#labelOverlay2 p.used-size {
    line-height: 0.5;
    font-size: 28pt;
    color: #8e8e8e;
}

#labelOverlay2 p.total-size {
    line-height: .8;
    font-size: 20pt;
    color: #cdcdcd;
}

.upgrade-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    max-width: 420px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.lock-container {
    margin-bottom: 16px;
}

.lock-icon {
    width: 48px;
    height: 48px;
    color: #f59e0b;
}

.upgrade-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.stats {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.stat {
    flex: 1.3;
    text-align: center;
}

.stat-number {
    font-size: 24px;
    font-weight: 600;
    color: #3b82f6;
}

.stat-label {
    font-size: 14px;
    color: #6b7280;
}

.upgrade-card-description {
    color: #6b7280;
    font-size: 14px;
}

.upgrade-card-features {
    margin-top: 16px;
    font-size: 13px;
    color: #6b7280;
}

p.stats {
    line-height: .8;
    font-size: 12pt;
    color: #cdcdcd;
}

p.bigstat {
    line-height: .8;
    font-size: 15pt;
    color: #cdcdcd;
}

#labelOverlay p {
    line-height: 0.3;
    padding: 0;
    margin: 8px;
}

#labelOverlay p.used-size {
    line-height: 0.6;
    font-size: 28pt;
    color: #8e8e8e;
}

#labelOverlay p.total-size {
    line-height: .9;
    font-size: 20pt;
    color: #cdcdcd;
}

.date {
    font-size: 10pt;
    line-height: 15px!important;
    /* color: #cdcdcd; */
}

#linear-gauge {
    width: 100%;
    height: 50px;
}

svg {
    overflow: inherit !important;
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    /*aspect ratio */
    vertical-align: bottom;
    overflow: inherit;

}

.svg-content-responsive {
    display: inline-block;
    position: absolute;
    left: 0;
}

svg text {
    font-size: 1em;
    font-family: sans-serif;
}


.ui.fluid.card {
    border-radius: 12px!important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)!important;
}

.tab-menu {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  background: white;
}

.tab-item:not(.active) {
    border: 1px solid rgba(34, 36, 38, .15);
}

.tab-item {
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, .87);
  font-weight: 500;
      transition: all 0.2s;
}

.tab-item:hover {
  border-color: #3b82f6;
            color: #3b82f6;
            background: #f8fafc;
}

.ui.secondary.menu .item:not(.active):hover {
      background: #f1f5f9!important;
  color: #334155!important;
      transition: all .4s ease!important;
}

.tab-item.active {
  background: #e7f5ff;
  color: #2185d0;
  font-weight: 600;
}

.attention-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
}

/* For Angular ng-if animation */
.attention-icon.ng-enter,
.attention-icon.ng-leave {
  transition: opacity 0.2s ease;
}

.attention-icon.ng-enter,
.attention-icon.ng-leave.ng-leave-active {
  opacity: 0;
}

.attention-icon.ng-leave,
.attention-icon.ng-enter.ng-enter-active {
  opacity: 1;
}
.attention-icon {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.attention-icon img {
  width: 100%;
  height: 100%;
}


.headcol {
    min-width: 12.6em;
}

.overbought {
    color: #DB2828
}

.oversold {
    color: #2C662D
}

.ui.button.toggle.active,
.ui.button.toggle.active:hover {
    background-color: #2185d0 !important
}

html.ios {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

html.ios,
html.ios body {
    height: initial !important;
}


#wrap {
    min-height: 100%;
}

.wide.column.fifteen {
    width: 93.75% !important;
}

.wide.column.twelve {
    width: 75% !important;
    /*width: 77%!important;*/
}

.twelve.wide.column {
    width: 75% !important;
    /*width: 77%!important;*/
}

.wide.column.eleven {
    width: 68.75% !important;
}

.wide.column.five {
    width: 31.25% !important;
}

.wide.column.six {
    width: 37.5% !important;
}

.wide.column.seven {
    width: 43.75% !important;
}

.wide.column.ten {
    width: 62.5% !important;
}

.wide.column.nine {
    width: 56.25% !important;
}

.wide.column.eight {
    width: 50% !important;
}

.wide.column.three {
    width: 18.75% !important;
}

.wide.column.four {
    width: 25% !important;
}

.hide.content {
    display: none;
}


.stacked-bar-graph {
    width: 100%;
    height: 25px;
    color: #414042;
}

.chart.span {
    display: inline-block; //height:100%;
    box-sizing: border-box;
    float: left;
    font-weight: bold;
    padding: 10px;
    color: white;
}

.bar-1 {
    background: #1f77b4;
}

.bar-2 {
    background: #FBBD08;
}

.bar-3 {
    background: #d62728;
}

@media (max-width: 1059px) {
    .ui.blue.main.menu {
        display: none;
    }

    html {
        font-size: 14px;
    }

    body {
        font-size: 14px;
    }
}

@media (min-width: 1060px) {
    .ui.sidebar.inverted.vertical.menu {
        /* display: none; */
    }
}

/*html {
        font-size: .875vw;
    }
    body {
        font-size: .875vw;
   }*/

@media (min-width: 1060px) {
    .ui.blue.sidenav.menu {
        display: none;
    }
}

.second-opinion-performance-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    }
  
  .second-opinion-performance-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
  }
  
  .second-opinion-performance-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
  }
  
  .second-opinion-performance-content {
    padding: 16px;
  }
  
  /* Summary Section */
  .second-opinion-performance-summary-section {
    display: flex;
    margin-bottom: 20px;
  }
  
  .second-opinion-performance-summary-column {
    flex: 1;
    padding-right: 8px;
  }
  
  .second-opinion-performance-summary-column:first-child {
    border-right: 1px solid #e5e7eb;
    padding-right: 16px;
  }
  
  .second-opinion-performance-summary-column:last-child {
    padding-left: 16px;
    padding-right: 0;
  }
  
  .second-opinion-performance-column-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    display: flex;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  
  .second-opinion-performance-percentage {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .second-opinion-performance-percentage.positive {
    color: #16a34a;
  }
  
  .second-opinion-performance-percentage.negative {
    color: #DB2828;
  }
  
  .second-opinion-performance-change-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6b7280;
  }
  
  .second-opinion-performance-change-count {
    font-weight: 600;
    color: #333;
  }
  
  .second-opinion-performance-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 16px 0;
  }
  
  /* Extremes Section */
  .second-opinion-performance-extremes-section {
    display: flex;
  }
  
  .second-opinion-performance-extreme-column {
    flex: 1;
    padding-right: 8px;
  }
  
  .second-opinion-performance-extreme-column:first-child {
    border-right: 1px solid #e5e7eb;
    padding-right: 16px;
  }
  
  .second-opinion-performance-extreme-column:last-child {
    padding-left: 16px;
    padding-right: 0;
  }
  
  .second-opinion-performance-stock-item {
    margin-top: 8px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  
  .second-opinion-performance-stock-symbol {
    font-weight: 600;
    margin-right: 8px;
    color: #2563eb;
  }
  
  .second-opinion-performance-stock-percentage {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .second-opinion-performance-stock-percentage.positive {
    color: #16a34a;
  }
  
  .second-opinion-performance-stock-percentage.negative {
    color: #DB2828;
  }
  
  /* Arrow Icons */
  .second-opinion-performance-arrow-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
  }

              .improved-icon-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}

.illustrated-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f0f7ff;
    z-index: 0;
}

.illustrated-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #4285f4;
}

.popular-screens  {
     border: 1px solid #e1e4e8!important;
}

  .ui.blue.label.active {
    background-color: #dbeafe!important;
    color: #2563eb!important;
    border-color: #2563eb!important;
  }

    .ui.blue.label.active:hover {
    background-color: #dbeafe!important;
    color: #2563eb!important;
  }


  .login-feature-panel {
    background: linear-gradient(to right, #3B82F6, #60A5FA); 
  }

  .create-watchlist-form-help {
    font-size: 14px;
    color: #6b7280;
    margin-top: 6px;
}

.create-watchlist-step-indicator {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.create-watchlist-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 20px;
}

.create-watchlist-step.active {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.create-watchlist-step.inactive {
    opacity: 0.6;
    background-color: #f9fafb;
}

.inactive .create-watchlist-step-number {
    background-color: #9ca3af;
}

.create-watchlist-step {
    flex: 1;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.create-watchlist-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #3b82f6;
    color: white;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.create-watchlist-step-title {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    margin-bottom: 4px;
}

.create-watchlist-step-description {
    font-size: 14px;
    color: #6b7280;
}



.plan-wrapper {
            position: relative;
            border: 2px solid #e2e8f0;
            border-radius: 16px;
            margin: 20px;
            padding: 24px;
            transition: border-color 0.3s;
        }

        .plan-badge-alt {
            position: absolute;
            top: -12px;
            right: 24px;
            background: #3b82f6;
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            color: white;
            box-shadow: 0 2px 4px rgba(59,130,246,0.2);
        }

.nav-item {
    position: relative;
    padding: 12px 12px;
    color: #4B5563;
    text-decoration: none;
    transition: color 0.2s;
}

/* Hover effect 1 - Slide up underline */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #3B82F6;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-item:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Hover effect 2 - Background fade */
.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #EFF6FF;
    border-radius: 6px;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.2s ease;
    z-index: -1;
}


.nav-item:hover::before {
    opacity: 1;
    transform: scale(1);
}

.nav-item:hover {
    color: #2563EB;
}

/* Active state */
.nav-item.active {
    color: #2563EB;
}

.nav-item.active::after {
    transform: scaleX(1);
}

.google-visualization-tooltip {  
    margin-left: 120px !important; 
    z-index:+1;
}

.search-input {
            width: 100%!important;
            padding: 12px 12px 12px 40px!important;
            border: 2px solid #e5e7eb!important;
            border-radius: 8px!important;
            font-size: 14px!important;
            background: white!important;
            transition: all 0.2s ease!important;
            box-sizing: border-box!important;
        }

        .search-input:focus {
            outline: none!important;
            border-color: #3b82f6!important;
        }

div.google-visualization-tooltip { pointer-events: none }

.box {
  float: left;
  height: 14px;
  width: 14px;
  border-radius: 16px;
  clear: both;
}

.box.grey {
  background-color: #cde4f0;
  border: #cde4f0;
}
.box.yellow {
  background-color: #67b7dc;
  border: #67b7dc;
}

.box.purple {
background-color: #a367dc;
background-color: #a367dc;
}

.box.red {
  background-color: #e36869;
  border: #e36869;
}

.box.blue {
  background-color: #067ab5;
  border: #067ab5;
}

@media (max-width: 1059px) {
    .ui.blue.sidenav.menu {}
}

.ui.column.grid>[class*="three wide"].column, .ui.grid>.column.row>[class*="three wide"].column, .ui.grid>.row>[class*="three wide"].column, .ui.grid>[class*="three wide"].column {
    width: 20% !important;
}

@media only screen and (min-width: 992px) {
    .ui.column.grid>[class*="five wide computer"].column, .ui.grid>.column.row>[class*="five wide computer"].column, .ui.grid>.row>[class*="five wide computer"].column, .ui.grid>[class*="five wide computer"].column {
        width: 32.50% !important;
    }
}

.ui.column.grid>[class*="fifteen wide"].column, .ui.grid>.column.row>[class*="fifteen wide"].column, .ui.grid>.row>[class*="fifteen wide"].column, .ui.grid>[class*="fifteen wide"].column {
    width: 95% !important;
}

.alert {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0rem 0.5rem 0.5rem 0rem;
}

.alert-urgent {
background-color: #FEF2F2;
    border-left: 4px solid #DC2626;
}

.alert-high {
        background-color: #FFF7ED;
    border-left: 4px solid #EA580C;
}

.alert-monitor {
    background-color: #FEFCE8;
    border-left: 4px solid #CA8A04;
}


                        .alert-aware {
                            background-color: rgb(239 246 255);
                            border-left: 4px solid rgb(59 130 246);
                        }


                        .alert-title {
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.requires-attention-title-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

                .requires-attention-count {
                display: inline-flex;
                    background: #fee2e2;
                margin-left: 6px;
    color: #dc2626;
    padding: 2px 8px;
    border-radius: 16px;
    font-size: 13px;
                }


.requires-attention-toggle-button {
    color: #3b82f6;
    font-size: 14px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.requires-attention-title {
                font-size: 1.28571429rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.requires-attention-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin-top: 4px;
}

.requires-attention-toggle-button:hover {
    background: #eff6ff;
}

.requires-attention-header {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.requires-attention-header:hover {
    background: #f9fafb;
}

.alert-urgent .alert-title {
    color: #991B1B;
}

.alert-high .alert-title {
    color: #9A3412;
}

.alert-monitor .alert-title {
    color: #854D0E;
}

.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

.index-list.label {
    margin-right: 0px; 
    border-radius: 3px;
    padding: 5px 8px;
    background-color: #ebf5ff;
    color: #3b82f6;
    margin-left: .5rem;
    margin-top: 0px;
    transition: all 0.2s ease;
}

.index-list.label:hover {
    background-color: #ebf5ff!important;
            border-color: #3b82f6!important;
            color: #3b82f6!important;
            transform: translateY(-1px)!important;
            box-shadow: 0 4px 12px rgba(59,130,246,0.1)!important;
}

.score-badge {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    display: inline-flex;
    align-items: center;      /* Center vertically */
    justify-content: center;  /* Center horizontally */
    width: 28px;              /* Fixed width */
    height: 20px;             /* Same as width for perfect circle */
    border-radius: 2px;
    font-size: 14px;
    color: white;
    padding: 0;               /* Remove padding - use the fixed size instead */
    box-sizing: border-box;        
}

.number {
    font-weight: 500;
    line-height: 1;           /* Important for text centering */
    text-align: center;       /* Ensure text is centered */
}

.risk-badge {
    background: #FFEDD5;
    color: #C2410C;
}

.overbought-badge {
    background: #fef2f2;;
    color: #991b1b;;
}

.oversold-badge {
    background: #ecfdf5;
    color: #065f46;
}

      .score-blocks {
    display: flex;
    gap: 2px;
      }
      .score-block {
      width: 30px;
      height: 30px;
      display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background-color: #e5e7eb;
    border-radius: 3px;
    transition: all 0.2sease;

      }
      .active-3 {
           background-color: #f2711c!important;
    color: white;      
      }
            .active-4 {
           background-color: #fb1c25!important;
    color: white;      
      }
            .active-2 {
           background-color: #f9c00c!important;
    color: white;      
      }
            .active-1 {
           background-color: #76bc44!important;
    color: white;      
      }
            .active-0 {
           background-color: #0cac4d!important;
    color: white;      
      }


                        .btn {
                            padding: 0.25rem 1rem;
                            border-radius: 0.25rem;
                            color: white;
                            border: none;
                            cursor: pointer;
                            background: #4183c4;
                            color: white;
                        }

                        .item-container {
                            margin-top: 0.5rem;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 0.5rem 0;
                        }
                        .stock-info {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            flex-wrap: wrap;
                        }

                        .stock-symbol {
    font-weight: 800;
                    font-size: 1em;
    text-decoration: none;
    transition: color .1s ease;
}

                        .stop-price {
                            color: #991B1B;
                            font-size: 1em;
                        }

                                .promo-card {
            background: white;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        }
        
        .promo-content {
            padding: 2rem;
            text-align: center;
        }
        
        .icon-circle {
            position: relative;
            display: inline-block;
                width: 96px;
    height: 96px;
    background: #f0f9ff;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
        }

        .education-content {
    background: linear-gradient(to right, #3B82F6, #60A5FA);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.education-text {
    color: white;
    max-width: 70%;
}

.education-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.education-description {
    color: rgba(255,255,255,0.9);
}

.education-icon {
    background: rgba(255,255,255,0.2);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.education-footer {
    background: white;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6B7280;
}

.education-read-time {
    font-size: 0.875rem;
}
        
        .percentage-circle {
            width: 8rem;
            height: 8rem;
            background: linear-gradient(to bottom right, #EFF6FF, #F0FDF4);
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .percentage {
            font-size: 2.25rem;
            font-weight: bold;
            color: #3b82f6;
        }
        
        .promo-icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            padding: 0.5rem;
            border-radius: 9999px;
            display: flex;
        }
        
        .promo-icon svg {
            width: 1.25rem;
            height: 1.25rem;
            stroke: white;
            stroke-width: 2;
        }
        
        .promo-icon-left {
            left: -1.5rem;
            background: #22C55E;
        }
        
        .promo-icon-right {
            right: -1.5rem;
            background: #3B82F6;
        }
        
        .promo-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 0.75rem;
        }
        
        .promo-description {
            color: #4B5563;
            margin: 0 auto 1.5rem!important;
            max-width: 24rem;
        }
        
        .cta-button {
            background: #3b82f6;
            color: white!important;
            padding: 0.75rem 2rem;
            border-radius: 6px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s!important;
        }
        
        .cta-button:hover {
            background: #1D4ED8;
        }
        
        .promo-footer {
            background: #F9FAFB;
            padding: 0.75rem 1.5rem;
            text-align: center;
            font-size: 0.875rem;
            color: #6B7280;
        }

        /******/
        .filter-form {
            padding: 24px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .ma-section {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .ma-group {
            background: #f8fafc;
            padding: 16px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }

        .ma-label {
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
            margin-bottom: 12px;
        }

        .ma-buttons {
            display: flex;
            gap: 4px;
        }

        .ma-btn {
                flex: 1;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 4px;
        }

        .ma-btn.selected {
            background: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
        }

        .follow-button {
            margin-left: 10px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            color: #4b5563;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .follow-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(59,130,246,0.1), rgba(59,130,246,0));
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .follow-button:hover {
            border-color: #3b82f6;
            color: #3b82f6;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59,130,246,0.1);
        }

        .follow-button:hover::before {
            opacity: 1;
        }

        .follow-button:hover .follow-button-icon {
            transform: scale(1.1) rotate(12deg);
        }

        .follow-button:active {
            transform: translateY(0);
        }

        .follow-button-icon {
            width: 16px;
            height: 16px;
            transition: all 0.3s ease;
            z-index: 1;
        }

        /* Active state */
        .follow-button.active {
            background: #ebf5ff;
            border-color: #3b82f6;
            color: #3b82f6;
        }

        .follow-button.active .follow-button-icon {
            fill: #3b82f6;
        }


        .ma-btn::after {
            content: "↑";
            position: relative;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
        }

        .ma-btn.falling::after {
            content: "↓";
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
            align-items: start;
        }

        @media (max-width: 768px) {
  .form-row {
    grid-template-columns: repeat(1, 1fr);
  }

    .ma-section {
    grid-template-columns: repeat(1, 1fr);
  }
}

        .form-section {
            flex: 1;
        }

        .section-label {
            font-size: 14px;
            font-weight: 600;
            color: #0f172a;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-label::before {
            content: "";
            display: block;
            width: 4px;
            height: 16px;
            background: #3b82f6;
            border-radius: 2px;
        }

        .button-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

.card.secop-empty-chart-card:hover {
      transform: translateY(-4px)!important;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)!important;
    }

    .card.secop-empty-chart-card:hover .secop-empty-chart-overlay {
      opacity: 0.1!important;
    }
    
    .card.secop-empty-chart-card:hover .secop-empty-view-button {
      opacity: 1!important;
    }

.secop-empty-chart-card {
    background-color: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s!important;
    cursor: pointer;
    position: relative;
}


.secop-empty-view-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #3b82f6;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px!important;
    opacity: 0;
    transition: opacity 0.3s;
}

        .secop-filter-button {
            padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
    background: white;
        }

        .secop-filter-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .secop-filter-button.selected { 
                    background: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
     }
        
        .price-row {
            display: flex;
            gap: 16px;
            margin-bottom: 12px;
        }

        .price-input {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .price-input::before {
            content: "$";
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            font-weight: 500;
        }

        input.max-min-price[type="text"] {
            width: 100%;
            padding: 12px 12px 12px 28px!important;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        input.max-min-price[type="text"]:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
        }

        .quick-select {
            display: flex;
            gap: 8px;
        }

        .quick-btn {
            padding: 6px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background: white;
            font-size: 13px;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s;
        }

        .quick-btn:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }

                .quick-btn.selected { 
                    background: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
     }

        /******/

        .see-more-btn {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: white;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.see-more-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.see-more-btn svg {
    transition: transform 0.2s ease;
}

        .intraday-breakouts {
            width: 100%;
            margin: 20px auto;
            margin-top: 0px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .intraday-breakouts-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            background: #f8f9fa;
            border-radius: 8px 8px 0 0;
        }

        .intraday-breakouts-header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .intraday-breakouts-title-section {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .intraday-breakouts-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        .intraday-breakouts-empty-state {
            padding: 24px;
            text-align: center;
            color: #666;
        }

        .intraday-breakouts-empty-message {
            font-size: 16px;
            margin-bottom: 12px;
            color: #333;
            font-weight: 500;
        }

        .intraday-breakouts-empty-details {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        .intraday-breakouts-stats-bar {
            padding: 12px 20px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
            color: #666;
            font-size: 14px;
            border-radius: 0 0 8px 8px;
        }

        .intraday-breakouts-link {
            color: #2F9E44;
            text-decoration: none;
            font-weight: 500;
        }

        .intraday-breakouts-link:hover {
            text-decoration: underline;
        }


        .category-icon {
            width: 16px;
            height: 16px;
            color: currentColor;
        }

        .category-count {
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: normal;
}

.indicators-container {
  display: flex;
  gap: 16px;
  max-width: 600px;
}

.indicator-card {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.indicator-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.header-title {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
}

.info-icon {
  color: #94a3b8;
  font-size: 14px;
  cursor: help;
}

.value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.value.bullish {
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-button {
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 1em;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.dropdown-button:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.dropdown-button.active {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}

.features {
    margin-bottom: 32px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.feature-icon {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 8px;
    background: #eff6ff;
    color: #3b82f6;
}

.feature-text {
    font-size: 15px;
    color: #4b5563;
}


.ui.vertical.menu .menu .item {
    font-size: 1rem;
}

        .step-card {
            background: #F9FAFB!important;
            border-radius: 12px!important;
            padding: 24px!important;
            text-align: center!important;
            transition: all 0.3s ease!important;
            border: 2px solid transparent!important;
            position: relative!important;
            display: flex!important;
            flex-direction: column!important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        }

        .step-description {
            flex-grow: 1;
            margin-bottom: 16px;
        }

        .step-card:hover {
            transform: translateY(-4px)!important;
            border-color: #6691f1!important;
        }

        .step-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 16px;
            background: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
        }

        .step-number {
            font-size: 14px;
            font-weight: 600;
            color: #4F46E5;
            margin-bottom: 8px;
        }

        .step-title {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
        }

        .step-description {
            font-size: 14px;
            color: #6B7280;
            line-height: 1.5;
        }

        .status-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #34D399;
            color: white;
            padding: 4px;
            border-radius: 50%!important;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .get-started-button {
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 500;
            margin-top: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }


.status-icon {
    width: 48px;
    height: 48px;
    background-color: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto 16px;
}

.status-icon svg {
    width: 28px;
    height: 28px;
    fill: white;
}


.dropdown-button::after {
  font-size: 8px;
  color: #94a3b8;
  margin-left: 4px;
}

.ui.vertical.menu:not(.accordion):not(.sidebar) .active.item {
        background: #f0f7ff;
    color: #3b82f6;
    font-weight: 600;
}

/*.ui.vertical.menu:not(.accordion):not(.sidebar) .item:hover {
  background: #f8fafc!important;
}*/

.ui.vertical.add-to-watchlist.menu:not(.accordion):not(.sidebar) .item:hover {
  background: #f0f7ff!important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)!important;
}

.ui.dropdown .menu .active.item {
    background: #f0f9ff!important;
    color: #2563eb!important;
}

        .item-icon {
            width: 16px;
            height: 16px;
            color: currentColor;
        }

        .pro-feature {
            border-top: 1px solid #e5e7eb;
            margin-top: 8px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
        }

        .pro-feature:hover {
            background: linear-gradient(to right, #f0f9ff, #e0f2fe);
        }

                .feature-content {
            flex-grow: 1;
        }

        .feature-title {
            font-weight: 500;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .feature-description {
            font-size: 12px;
            color: #6b7280;
            margin-top: 2px;
        }

        .dropdown-pro-badge {
            font-size: 11px;
            font-weight: 500;
            color: #2563eb;
            background: #e0f2fe;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .chevron-right {
            width: 16px;
            height: 16px;
            color: #9ca3af;
        }

.filter-actions {
    display: flex
;
    gap: 8px;
    padding: 16px;
    align-items: center;
    justify-content: flex-end;
}

    .secop-action-button:hover {
            background: #f9fafb;
            border-color: #d1d5db;
            transform: translateY(-1px);
        }

.secop-action-button {
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: all 0.2s ease;
    position: relative;
}


.action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reset {
    color: #64748b;
    background: white;
    border: 1px solid #e2e8f0;
}

.run {
    background: #3b82f6;
    color: white;
    border: none;
}

.save {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: white;
  border-radius: 6px;
}

.create-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px;
    padding: 10px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: calc(100% - 32px);
}

.create-button:hover {
   background: #2563eb;
   color: white!important;
}

.create-button svg {
   transition: transform 0.3s ease;
}

.create-button:hover svg {
   transform: rotate(90deg);
}

.value.bearish {
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 6px;
}

.value.cti {
  color: #1e293b;
}

.trend-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.trend-icon svg {
  width: 16px;
  height: 16px;
}

.date {
  font-size: 13px;
  color: #64748b;
}

/* Scale animation for the indicator that's more important */
.value.bullish {
  position: relative;
}

.indicator-card:hover .value.bullish::before {
  opacity: 1;
}

.loggedIn {
    padding-bottom: 350px;
    /* must be same height as the footer */
}

.notLoggedIn {
    margin-top: 0px!important;
    overflow: hidden;
    /*padding-bottom: 500px;*/
    /* must be same height as the footer */
}

#footer {
    /* position: relative;
    margin-top: -230px;
    negative value of footer height
    height: 235px;*/
    clear: both;
    background: #0e3959;
}

input .prompt.ui.large {
    text-transform: uppercase;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    text-transform: none;
}

                .hover-item:hover {
                        transform: translateX(4px);
                        background: #f0f0f0;
                        border-color: #ddd;
                    }

@media only screen and (max-width: 1000px) {
    .upgrade-card {
    position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 90%;
  max-width: 500px; /* Adjust based on your modal's actual size */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
}
@media only screen and (min-width: 1001px) {
    .upgrade-card {
    position: fixed; 
    top: 30%; 
    right: 47%;
    transform: translate(10%, 10%);
    z-index: 10;
    box-shadow: 5px 10px 18px #888888;
}
}

/* Mobile responsive styling for Second Opinion Highlights */
@media only screen and (max-width: 767px) {
    /* Container styling */
    
    /* List container to stack vertically */
    .sixteen.wide.column .ui.flex.large.horizontal.list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    .opinion-caret {
    margin-right: 0.4em;
    flex-shrink: 0;
    height: 1em;
    width: 1em;
}

/* Caret colors */
.opinion-caret.up-caret {
    color: #16a34a; /* Green */
}

.opinion-caret.down-caret {
    color: #DB2828; /* Red */
}
    
    /* Individual item cards */
    .sixteen.wide.column .secop-highlights-item {
        width: 100%;
        margin: 0 0 12px 0 !important;
        padding: 16px!important;
        border-radius: 8px;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Remove spacing from last item */
    
    /* Content alignment */
    .sixteen.wide.column .secop-highlights-item .content {
        margin-left: 0 !important;
        width: 100%;
    }
/* Opinion styling */
        .sixteen.wide.column .secop-highlights-item h1.ui.header {
        font-size: 24px;
        line-height: 1.2;
        margin: 0;
        height: auto !important;
    }
    
    /* Content alignment */
    .sixteen.wide.column .secop-highlights-item .content {
        margin-left: 0 !important;
        width: 100%;
    }

    .gauge-score-wrapper {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-bottom: 8px;
        width: 100%;
    }
    
    /* Hide the spacer image */
    .sixteen.wide.column .secop-highlights-item img.ui.small.image {
        display: none;
    }
    /* Score badge styling */
    
    /* Score text adjustment */
    .sixteen.wide.column .secop-highlights-item p {
        margin-top: 8px !important;
    }
    
    /* Status value spacing */
    .sixteen.wide.column .secop-highlights-item .header {
        margin-bottom: 4px;
    }
    
    /* Change Since Downgrade spacing */
    .sixteen.wide.column .secop-highlights-item .arrow {
        vertical-align: middle;
    }
    
    /* Price change formatting */
    .sixteen.wide.column .secop-highlights-item .price-change {
        margin-top: 4px;
        display: inline-block;
    }
    
    /* Change pill (days ago) */
    .sixteen.wide.column .secop-highlights-item .change-pill {
        font-size: 12px;
        background-color: #f3f4f6;
        color: #6b7280;
        padding: 2px 6px;
        border-radius: 12px;
        margin-left: 6px;
    }
    
}

/* Trial Banner Styles */
/*.ui.fixed.trial-banner {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  height: 36px;
  background-color: #dbeafe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 199;
  font-size: 14px;
  font-weight: 500;
}

.trial-message {
  display: flex;
  gap: 8px;
  color: #1e3a8a;
}

.trial-message .clock.icon {
  color: #3b82f6;
}

.trial-message strong {
  color: #1d4ed8;
  font-weight: 700;
}

div[style="margin-top: 124px"] {
  margin-top: 160px !important; 
}

@media (max-width: 768px) {
  .trial-message span {
    font-size: 12px;
  }
  
  .trial-upgrade-button {
    padding: 4px 10px;
    font-size: 12px;
  }
}*/


.comparison-banner {
            background-image: linear-gradient(to right, #7028e4 0%, #e5b2ca 100%);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            width: 100%;
                margin-top: 24px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .comparison-content {
            display: flex;
            padding: 16px 20px;
            position: relative;
            z-index: 1;
        }
        
        .comparison-weekly-badge {
            position: absolute;
            top: 0;
            left: 15px;
            background-color: #f8b133;
            color: #734d10;
            font-weight: 700;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 0 0 5px 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }
        
        .comparison-message-side {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .comparison-title {
            color: white;
            font-weight: 700;
            font-size: 20px;
            margin: 0 0 8px;
        }
        
        .comparison-subtitle {
            color: rgba(255,255,255,0.9);
            font-size: 14px;
            margin: 0 0 12px;
        }
        
        .comparison-feature-section {
            display: flex;
            margin-bottom: 14px;
        }
        
        .comparison-column {
            flex: 1;
            padding-right: 15px;
        }
        
        .comparison-column-title {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .comparison-weekly-column .comparison-column-title {
            color: #f8b133;
        }
        
        .comparison-pro-column .comparison-column-title {
            color: white;
        }
        
        .comparison-column-badge {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            margin-right: 8px;
        }
        
        .comparison-weekly-badge-sm {
            background-color: #f8b133;
            color: #734d10;
        }
        
        .comparison-pro-badge-sm {
            background-color: white;
            color: #4285f4;
        }
        
        .comparison-feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .comparison-feature-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 6px;
            color: rgba(255,255,255,0.9);
            font-size: 13px;
        }
        
        .comparison-feature-icon {
            margin-right: 6px;
            font-size: 14px;
            margin-top: 1px;
        }
        
        .comparison-weekly-icon {
            color: #f8b133;
        }
        
        .comparison-pro-icon {
            color: white;
        }
        
        .comparison-feature-text {
            line-height: 1.4;
        }
        
        .comparison-cta-side {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-left: 20px;
            border-left: 1px solid rgba(255,255,255,0.2);
            min-width: 200px;
        }
        
        .comparison-cta-message {
            color: white;
            font-weight: 600;
            font-size: 15px;
            margin: 0 0 12px;
            text-align: center;
        }
        
        .comparison-cta-button {
            background-color: white;
            color: #6528e0;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .comparison-cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .comparison-feature-highlight {
            font-weight: 600;
            color: white;
        }

.change-pill {
    font-size: 1rem;
    margin-left: 2px;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 4px;
    color: #666;
    font-weight: 400;
}

.price-change {
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
}

.price-change.up {
     color: #2c662d;
     background: #e9ffee;
}

.price-change.down {
     color: #db2828;
     background: #fff6f6;
}

.price-comparison {
    display: flex;
    align-items: center;
    background: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #FEE2E2;
}

.price-group {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.price-label {
    color: #4B5563;
}

.current-price {
    font-weight: 500;
}

.current-price.below {
    color: #DC2626;
}

.current-price.above {
    color: #16A34A;
}

.stop-breached-price {
    font-weight: 500;
}

.trend-arrow {
    margin: 0 0.5rem;
}

.trend-arrow.down {
    color: #DC2626;
}

.trend-arrow.up {
    color: #16A34A;
}

.oscillator-card {
  background: white;
  border-radius: 8px;
  width: 100%;
}
.oscillator-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oscillator-title {
  font-size: 1.28571429rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 4px;
}
.oscillator-info-icon {
  color: #94a3b8;
  font-size: 14px;
}
.oscillator-indicator-section {
  text-align: center;
  padding: 0 0 0 0;
  color: rgba(0, 0, 0, 0.65);
}
.oscillator-value {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 4px;
}
.oscillator-status {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.oscillator-chart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: #f1f5f9;
  border-radius: 6px;
  color: #0369a1;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s!important;
  margin-top: 12px;
}
.oscillator-chart-link:hover {
  background: #e2e8f0;
}
.oscillator-gauge-container {
  margin: 0px 0;
  position: relative;
  padding: 0 8px;
}
.oscillator-gauge {
  height: 10px;
  background: #f1f5f9;
  border-radius: 3px;
  position: relative;
  overflow: visible;
}
.oscillator-zone-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}
.oscillator-zone-label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.oscillator-zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.oscillator-dot-oversold {
  background: #67b7dc;  /* blue for buy opportunity */
}
.oscillator-dot-very-oversold {
  background: #067ab5;  /* blue for buy opportunity */
}
.oscillator-dot-neutral {
  background: #64748b;
}
.oscillator-dot-overbought {
  background: #dc2626;  /* Red for bearish */
}
.oscillator-dot-very-overbought {
  background: #e36869;  /* Red for bearish */
}
.oscillator-gauge-zones {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
}
.oscillator-zone {
  flex: 1;
  height: 100%;
}

.oscillator-overbought {
    color: #dc2626;
}

.oscillator-oversold {
    color: #067ab5;
}

.oscillator-neutral {
    color: #e2e8f0;
}

.oscillator-zone-oversold {
  background: #67b7dc;  /* blue gradient for buy */
}
.oscillator-zone-neutral {
  background: #e2e8f0;  /* Neutral grey */
}
.oscillator-zone-overbought {
  background: #e36869;  /* Red gradient for sell */
}
.oscillator-gauge-marker {
  position: absolute;
  width: 5px;
  height: 20px;
  background: #1e293b;
  top: -5px;
  transform: translateX(-50%);
  border-radius: 1.5px;
}
.oscillator-zone-indicators {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 11px;
  padding: 0 3px;
}
.oscillator-indicator-value {
  color: #64748b;
}
.oscillator-indicator-label {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}
.oscillator-label-buy {
  color: #16a34a;
}
.oscillator-label-sell {
  color: #dc2626;
}

.anychart-range-selector .anychart-button {
    min-height: 34px!important;
    border: none!important;
}

.anychart-range-selector .anychart-input-label {
    display: none;
}

.anychart-tooltip {
    background: rgba(17, 24, 39, 0.95);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
}

.anychart-tooltip-header {
    font-size: 13px;
    font-weight: 500;
    color: #9CA3AF;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 8px;
}

.previous-plan {
    border: 2px solid #3b82f6!important;
    position: relative!important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1)!important;
}

.anychart-tooltip-data-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    font-size: 13px;
}

.anychart-tooltip-label {
    color: #9CA3AF;
    font-weight: 400;
}

.anychart-tooltip-value {
    color: white;
    font-weight: 500;
    font-family: ui-monospace, monospace;
    text-align: right;
}

.anychart-tooltip-moving-averages {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.anychart-tooltip-ma-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.anychart-tooltip-ma-indicator {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.anychart-tooltip-ma-50 {
    background: #3B82F6;
}

.anychart-tooltip-ma-200 {
    background: #F97316;
}

.anychart-tooltip-volume-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.anychart-tooltip-change-positive {
    color: #34D399;
}

.anychart-tooltip-change-negative {
    color: #FB7185;
}


.opinion-changes-empty-state {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px;
}

.opinion-changes-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.opinion-changes-icon-container {
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.opinion-changes-empty-title {
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    margin-top: 2px;
    font-size: 1.28571429rem;
}

.opinion-changes-empty-description {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.opinion-changes-action-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.opinion-changes-helpful-tips {
    margin-top: 18px;
    padding: 12px;
    background: #f3f4f6;
    border-radius: 6px;
}

.opinion-changes-tips-title {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
}

.opinion-changes-tips-list {
    display: flex;
    align-items: center;
  justify-content: center;
    gap: 28px;
    font-size: 13px;
    color: #6b7280;
}

.opinion-changes-tip-item {
    display: flex;
    align-items: center;
}

.opinion-changes-tip-icon {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    margin-top: 2px;
}

.secop-video-card {
background: linear-gradient(to bottom right, #0f172a, #1e3b8a);
    border-radius: 12px;
    width: 100%;
    padding: 0;
    overflow: hidden;
    color: white;
}

.secop-video-preview-container {
    position: relative;
    width: 100%;
    height: 180px;
    background: url(https://signup.marketedge.com/Retail/resources/images/compandphone.png) center / 80% no-repeat;
    overflow: hidden;
}

.secop-video-preview-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.secop-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(59, 130, 246, 0.9);
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.secop-video-play-icon:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgb(59, 130, 246);
}

.secop-video-play-icon::after {
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent white;
    margin-left: 4px;
}

.secop-video-content {
    padding: 20px;
    backdrop-filter: blur(20px);
    margin-top: -46px;
    position: relative;
    z-index: 1;
}

.secop-video-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: white;
    line-height: 1.4;
}

.secop-video-features {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.secop-video-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e3e3e3;
}

.secop-video-feature-icon {
    width: 12px;
    height: 12px;
    position: relative;
}

.secop-video-feature-icon::before {
    content: '•';
    color: #3b82f6;
    font-size: 18px;
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.secop-video-live-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(239, 68, 68, 0.9);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.secop-video-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #3b82f6;
    color: white;
    padding: 12px;
    border-radius: 6px;
    font-weight: 500;
    margin-top: 16px;
    text-decoration: none;
    transition: background 0.2s ease;
    cursor: pointer;
}

.secop-video-cta-button:hover {
    background: #2563eb;
    color: white;
}

.chart-controls {
    display: flex;
    gap: 8px;
    background: white;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.chart-toggle {
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.chart-toggle:hover {
    background: #f3f4f6;
}

.chart-toggle.active {
    background: #eff6ff;
    color: #2563eb;
}

.chart-toggle svg {
    width: 16px;
    height: 16px;
}

.chart-divider {
    width: 1px;
    background: #e5e7eb;
    margin: 0 2px;
}

.reports-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1000px;
    margin: 24px auto;
    text-align: center;
    padding: 6px 12px;
}

.reports-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 20px;
    text-align: left;
}

.feature {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    gap: 16px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 8px;
    display: flex
;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    flex-shrink: 0;
}

.indices-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      background: white;
    }
    
@media (max-width: 768px) {
  .indices-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

    .index-card {
      background: #f8fafc;
      border-radius: 6px;
      padding: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

            .index-card:hover {
            transform: translateY(-2px);
            border-color: #6691f1;
        }

    .index-main {
      flex: 1;
    }

    .index-symbol {
      color: #2563eb;
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 2px;
    }

    .index-price {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
    }

    .index-change {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
    }

    .index-change-value {
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .index-change-percent {
      font-size: 13px;
      color: #64748b;
    }

    .index-positive {
      color: #16a34a;
    }

    .index-negative {
      color: #dc2626;
    }

    .index-arrow-icon {
      width: 14px;
      height: 14px;
    }

body {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #F5F6FA;
}

.ui.pricing.grid>* {
    /*padding-right: 0;*/
}

.ui.table span.positive {
    box-shadow: 0 0 0 #A3C293 inset;
    background: #FCFFF5 !important;
    color: #2C662D !important;
}

.accordion.content {
    overflow: visible !important;
}

.secop-highlights-item.below {
        /*border: 1px solid rgb(255 220 220)!important;*/
}

.below {
    background-color: #fff6f6!important;
    color: #9f3a38 !important;
}

.below .header {
    color: #9f3a38 !important;
}

.above {
    background-color: #fcfff5!important;
    color: #2c662d !important;
}

.above .header {
    color: #2c662d !important;
}

    .view-button {
            display: flex;
    align-items: center;
    flex: 1;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    }

    .view-button.active {
        background: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
    }

.alert-badge {
        display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.875rem;
    background: #fff7ed;
    border-radius: 1rem;
    font-size: 0.975rem;
    color: #ea580c;
    font-weight: 500;
}

    .view-toggles {
    display: flex;
    gap: 8px;
    padding: 6px 0px;    
    }

.link-style {
    margin-left: 6px;
    margin-right: 6px;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            color: #3b82f6;
            font-size: 0.975rem;
            text-decoration: none;
            padding: 0.25rem 0rem 0.25rem 0.35rem;
            border-radius: 0.25rem;
        }

        .link-style:hover {
            background: #eff6ff;
        }


.ui.selection.dropdown.selected {
    background: #eff4f9;
    border-color: #2185d0;
}

.industry-group-card {
        background: #f9fafb!important;
    border-radius: 0.5rem!important;
    padding: 1rem!important;
    border: 1px solid #e5e7eb!important;
    text-align: center!important;
    box-shadow: none!important;
}

.ui.grid>.column:not(.row),
.ui.grid>.row>.column {
     padding-right: 0;
}

.ui.primary-watchlist.label {
    margin-left: auto!important;padding: 4px 8px;background: #dbeafe!important;color: #3b82f6!important;font-size: 12px;font-weight: 500;border-radius: 4px;
}

.ui[class*="top attached"].pricing.segment {
    border-radius: 0;
}

.ui.attached.pricing.segment {
    border: 0;
}

.manage.reports {
    margin-top: 8px;
}

.lr-drop-target-before {
    border-left: 5px solid orange;
}

.lr-drop-target-after {
    border-right: 5px solid orange;
}


.checkmark {
    font-family: -apple-system, system-ui, sans-serif;
    color: #22C55E;
    font-size: 20px;
}


.stock-popup-simple {
    background: white; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    max-width: 400px; 
    min-width: 400px;
    position: absolute;
    z-index: 1001;
    animation: stockPopupFadeIn 0.2s ease-out;
}

.stock-popup-simple:before {
    position: absolute;
    content: '';
    width: .71428571em;
    height: .71428571em;
    background: #fff;
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 1px 1px 0 0 #bababc;
        top: 50%;
    left: -.30714286em;
    bottom: auto;
    right: auto;
    margin-top: -.30714286em;
    box-shadow: -1px 1px 0 0 #bababc;
}


@keyframes stockPopupFadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.95) translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

@keyframes stockPopupFadeOut {
    from { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
    to { 
        opacity: 0; 
        transform: scale(0.95) translateY(-10px); 
    }
}

.stock-popup-simple.hiding {
    animation: stockPopupFadeOut 0.15s ease-in forwards;
}


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

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

.grey.star.outline.icon:hover {
    color: #ffc107!important;
    transition: color 0.2s;
}

.watchlist-popup {
    position: fixed !important; /* Changed from absolute to fixed */
    z-index: 2;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 16px;
    min-width: 320px;
    max-width: 375px;
    width: 375px;
    font-size: 14px;
    max-height: 350px; 
    overflow-y: auto; 
    
    /* These will be set dynamically by JavaScript */
    /* top: auto; */
    /* left: auto; */
}

/* Ensure the popup appears above table elements */
.watchlist-popup::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    z-index: 2;
}

.watchlist-popup::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 19px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #e5e7eb;
    z-index: 1;
}

.watchlist-menu {
    margin: 0 -8px;
}

.watchlist-item {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    font-weight: 400;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.watchlist-item:hover {
    background-color: #f5f5f5;
}

.create-new-watchlist-button {
    width: 100%;
    padding: 10px;
    border: 1px solid #3b82f6;
    background: transparent;
    color: #3b82f6;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.create-new-watchlist-button:hover {
    background: #f0f7ff;
}

.watchlist-item.disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

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

.power-cell {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.power-indicator {
  position: relative;
  width: 65px;
  height: 6px;
  background: linear-gradient(90deg, 
    #ef4444 0%, 
    #f97316 30%, 
    #facc15 50%,
    #84cc16 70%, 
    #22c55e 100%
  );
  border-radius: 3px;
  justify-content: flex-start;
  display: flex;
}

.power-marker {
  position: absolute;
  width: 3px;
  height: 14px;
  background: #1e293b;
  border-radius: 1px;
  transform: translateX(-50%);
  top: -4px;
}

.power-value {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  min-width: 30px;
  text-align: right;
}

.power-value.negative {
  color: #ef4444;
}

.power-value.positive {
  color: #22c55e;
}

        .table-toolbar {
    display: inline-flex;
    align-items: center;
    background: white;
    border-radius: 6px;
    vertical-align: top;
}

.toolbar-button:hover {
    background: #f3f4f6;
  }

.toolbar-button svg {
    width: 20px;
    height: 20px;
}

.toolbar-button.active {
    color: #3b82f6;
    background: #eff6ff;
}

.toolbar-group {
    display: flex
;
    align-items: center;
    border-right: 1px solid #e5e7eb;
    padding: 0 8px;
}

.toolbar-button-with-text {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 14px;
}

.toolbar-button {
    padding: 6px;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex
;
    align-items: center;
    justify-content: center;
}

.is-primary-button {
    margin-right: 10px;
    background: #dbeafe;
    color: #2563eb;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    align-items: center;
    gap: 6px;
}

.make-primary-button {
    margin-right: 10px!important;
    background: none #fff;
    border: 1px solid rgba(34, 36, 38, .15);
    color: rgba(0, 0, 0, .87);
    box-shadow: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.make-primary-button:hover {
            border-color: #3b82f6;
            color: #3b82f6;
            background: #f8fafc;
}


           .search-container {
            padding: 0.75rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .accordion-search-input {
            width: 100%;
            padding: 0.5rem;
            padding-left: 2rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.375rem;
            font-size: 1rem;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%236b7280"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>') 0.5rem center/1rem no-repeat;
        }

        .quick-filters {
    display: flex
;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem;
    overflow-x: auto;
    border-bottom: 1px solid #e5e7eb;
}

.filter-icon {
    width: 48px;
    height: 48px;
    color: #3b82f6;
}

.filter-chip {
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border-radius: 1rem;
    font-size: 1rem;
    color: #374151;
    white-space: nowrap;
    cursor: pointer;
}

.filter-chip.active {
    background: #3b82f6;
    color: white;
}

.ui.menu .item:before {
    background: white;
}

.ui.main.menu {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border: none;
    /*font-size: 1vw;*/
}

.ui.main.menu .active.menu.item {
            font-weight: 700!important;
}

.ui.accordion.menu .item {
    padding: .92857143em 1.14285714em;
}

.filter-no-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}

.filter-search-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #EBF5FF;
    margin-bottom: 16px;
}

.filter-search-icon {
    width: 28px;
    height: 28px;
    color: #3B82F6;
}

.filter-no-results-heading {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    margin-top: 6px;
}

.filter-no-results-subtext {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
    padding-left: 8px;
}

.filter-name {
    font-weight: 500;
    color: #3b82f6;
}

        .selectedValue {
            border: 1px solid rgba(0, 106, 255)!important;
            background-color: rgb(242, 250, 255)!important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)!important;
      }

.dropdown-button.selectedValue {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.dropdown-button.selectedValue .default.text {
    color: #3b82f6 !important;
    font-weight: 600;
}

.clear-x {
    color: #db2828!important;
    font-size: 1.1rem;
    font-weight: 800;
}

.filter-clear-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-clear-button:hover {
    background-color: #2563eb;
}

#stockwatch {
    min-height: 500px;
}

.ui .card {
    border-radius: 1.125rem;
}

.ui .segment {
    border-radius: 1.125rem;
}

body.pushable>.pusher {
    background-color: #f9f9fc;
    background: #f9f9fc;
}

.vertical.menu:not(.sidebar) {
            border-radius: 12px!important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)!important;
    border: none;
}

.ui .vertical.menu:not(.sidebar) {
    border-radius: 1.125rem;
    /*background-color: #2185d0;*/
}


.dots-button {
        padding: 6px;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
}

.ui.progress.attached,
.ui.progress.attached .bar {
    overflow: visible;
}

.ui.accordion {
    max-width: inherit;
}

.highlight {
    background: #f0f9ff;
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    font-size: 16px; 
}

.pro-badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 500;
}

#second_opinion {
    margin-bottom: 40px;
}

.secop-highlights-item {
    flex:1;
    background: white;
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.secop-highlights-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    white-space: nowrap;
}

#favorites {
    margin-bottom: 80px;
}

#etf_card {
    margin-bottom: 40px;
}

.ui.selection .report {
    border-radius: 500rem;
}

.content {
    margin-bottom: 10px;
}

.form {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.ui.action.input {
    margin-bottom: 20px;
}

#edge {
    color: #fbbd08;
}

#trial {
    position: absolute;
    top: 43%;
    left: 20%;
}

#classic {
    position: absolute;
    top: 43%;
    left: 40%;
    margin-left: 10px;
}

 .indicators-grid {
    margin-top: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 24px;
    }

    .indicators-section {
      background: white;
      padding: 20px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    /* Ensure text elements won't cause overflow */
.indicators-title, 
.indicators-label-group,
.indicators-zone-labels {
  overflow: hidden;
  text-overflow: ellipsis;
}

    .indicators-title {
      font-size: 1.07142857rem;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 16px;
    }

    .indicators-gauge-container {
      position: relative;
      width: 100%;
      padding: 12px 0;
    }

    .indicators-gauge-bar {
      height: 12px;
      border-radius: 4px;
      position: relative;
    }

    .indicators-gauge-dot {
      position: absolute;
      width: 24px;
      height: 24px;
      background: white;
      border: 2px solid #1e293b;
      border-radius: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

    /* Power Rating specific */
    .indicators-power-rating .indicators-gauge-bar {
      background: linear-gradient(to right, 
        #dc2626 0%,    /* Red */
        #ea580c 15%,   /* Orange */
        #eab308 30%,   /* Yellow */
        #84cc16 50%,   /* Light green */
        #16a34a 100%   /* Dark green */
      );
    }

    /* Stochastic specific */
    .indicators-stochastic .indicators-gauge-bar {
      background: #94a3b8; /* Neutral gray for the middle section */
    }

    .indicators-zones {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .indicators-zone-oversold {
      position: absolute;
      left: 0;
      width: 20%;
      height: 100%;
      background: #16a34a;
      border-radius: 4px 0 0 4px;
    }

    .indicators-zone-overbought {
      position: absolute;
      right: 0;
      width: 20%;
      height: 100%;
      background: #dc2626;
      border-radius: 0 4px 4px 0;
    }

    .indicators-label-group {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 14px;
      color: #64748b;
    }

    .indicators-value {
      font-size: 24px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .indicators-condition {
      font-size: 14px;
      font-weight: 500;
    }

    .indicators-bullish {
      color: #16a34a;
    }

    .indicators-bearish {
      color: #dc2626;
    }

        .indicators-neutral {
      color: #94a3b8;
    }

    .indicators-zone-labels {
      margin-top: 0px;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      color: #64748b;
    }

    .indicators-zone-label {
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 500;
    }

    .indicators-zone-label.indicators-oversold {
      color: #16a34a;
    }

    .indicators-zone-label.indicators-overbought {
      color: #dc2626;
    }

    @media only screen and (max-width: 767px) {

        .filter-bar {
    display: grid
;

        .filter-selections {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(2, 1fr);
        }
  .indicators-grid {
    grid-template-columns: 1fr;  /* Change to single column */
    gap: 16px;  /* Reduce gap for mobile */
  }
  
  /* Optional adjustments for better mobile display */
  .indicators-section {
    padding: 16px;  /* Slightly less padding */
  }
  
  .indicators-title {
    font-size: 15px;  /* Slightly smaller title */
    margin-bottom: 12px;
  }
  
  .indicators-gauge-dot {
    width: 20px;  /* Slightly smaller dot */
    height: 20px;
  }
  
  /* Ensure zone labels remain visible on smaller screens */
  .indicators-zone-labels {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .indicators-zone-label {
    margin: 2px 0;
  }
}