.table-wrapper {
    width: 100%;
    overflow: hidden;
}

.table-fixed {
    table-layout: fixed;
    width: 100%;
}

th, td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-flex.justify-content-between {
    gap: 0.5rem;
}
.raleway-header {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap;
}

#question_mark {
    width:14px;
    height:14px;
    margin-left:5px;
}

#explain_link {
    font-size:.8em;
}

#tw_textarea {
    height:100px;
}

.no_dec_minilinks {
    text-decoration:none;
}

#order-info-row {

}

#order-profit-label {
    
}

.order-table-header-counter {
    width:41px;
}

.order-table-header-quantity {
    width:125px;
}

.order-table-header-side {
    width:81px;
}

.order-table-header-type {
    width:162px;
}

.order-table-header-tif {
    width:102px;
}

.order-table-header-limit {
    width:142px;
}
 
.order-table-header-stop {
    width:142px;
}

.order-table-header-trail {
    width:142px;
}

.order-table-header-eh{
    width:41px;
}

#order-table {
    width:90%;
    margin:auto;
}

.my-tbody {
    outline: thin solid black;
}

.ticker-data-row {

}

.data-row {
    width:90%;
    margin:auto;
}

.ticker_status_line {
    width:auto;
}

.ticker_status {
    width:auto;
}

.ticker_text {
    width:auto;
}

.control-row {
    width:100%;
    
}

.chartImg {
    max-width: 100%;
    height: auto;
}

.signal-history-page {
    background: #fff;
    color: #263442;
}

.history-context-link {
    color: #4a6fa5;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.history-context-link:hover {
    text-decoration: underline;
}

.history-layout {
    max-width: 1500px;
    margin: 0 auto;
    padding: 22px 36px 48px;
}

.history-sitebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid #e1e6eb;
}

.history-brand {
    color: #263442;
    font-family: "Raleway", sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.history-brand:hover {
    color: #263442;
}

.history-back {
    color: #526170;
    font-size: 14px;
    text-decoration: none;
}

.history-back:hover {
    color: #263442;
    text-decoration: underline;
}

.history-heading {
    margin: 26px 0 20px;
}

.history-heading h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

.history-panel-heading p,
.history-note {
    color: #687786;
    font-size: 14px;
}

.history-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 1px solid #e1e6eb;
}

.history-field {
    flex: 1 1 170px;
    max-width: 250px;
    margin-right: 16px;
    margin-bottom: 8px;
}

.history-signal-field {
    flex: 2 1 290px;
    max-width: 380px;
}

.history-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.signal-history-page .history-field .form-select {
    width: 100% !important;
    height: 40px;
    border-color: #d8dfe6;
}

.history-apply {
    height: 40px;
    padding: 0 18px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.history-panel {
    padding-top: 24px;
}

.history-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.history-panel-heading h2 {
    margin: 0 0 4px;
    font-size: 23px;
    font-weight: 600;
}

.history-panel-heading p {
    margin: 0;
}

.history-latest {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.history-latest span {
    color: #687786;
    font-size: 12px;
}

.history-latest strong {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
}

.history-visual {
    margin-top: 22px;
}

.history-y-title {
    margin: 0 0 8px 52px;
    color: #687786;
    font-size: 12px;
}

.history-note {
    margin: 16px 0 0 52px;
}

.history-empty {
    margin-top: 28px;
    color: #687786;
}

.signal-history-chart {
    display: flex;
    width: 100%;
}

.signal-history-axis {
    flex: 0 0 52px;
    height: 320px;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    color: #6c757d;
    font-size: 12px;
}

.signal-history-scroller {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.signal-history-scroller::-webkit-scrollbar {
    display: none;
}

.signal-history-plot {
    position: relative;
    width: 100%;
    height: 320px;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid #aebac7;
    background-image: linear-gradient(to top, #dce3ea 1px, transparent 1px);
    background-size: 100% 25%;
}

.signal-history-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.signal-history-week {
    flex: 1 0 24px;
    min-width: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-decoration: none;
}

.signal-history-bar {
    width: 68%;
    max-width: 26px;
    min-height: 0;
    background: #4a6fa5;
    border-radius: 4px 4px 0 0;
}

.signal-history-bar-latest {
    background: #263442;
}

.signal-history-week:hover .signal-history-bar,
.signal-history-week:focus-visible .signal-history-bar {
    background: #304f75;
}

.signal-history-week:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.signal-history-labels {
    width: 100%;
    display: flex;
    padding-top: 8px;
    color: #6c757d;
    font-size: 11px;
}

.signal-history-labels span {
    flex: 1 0 24px;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

.signal-history-labels span:last-child {
    text-align: right;
}

@media (max-width: 767px) {
    .history-layout {
        padding: 16px 16px 32px;
    }

    .history-heading {
        margin: 24px 0 18px;
    }

    .history-heading h1 {
        font-size: 27px;
    }

    .history-field,
    .history-signal-field {
        max-width: none;
    }

    .history-note {
        margin-left: 0;
    }
}

/* Selector row layout */
.selector-row {
    margin-top: 15px;
}

@media (min-width: 768px) {
    .selector-row {
        margin-top: 15px;
        display: flex;
        flex-wrap: nowrap;
    }
}

/* Chart container and card styles */
.hit-col {
    transition: all 0.2s ease;
}

.hit-col .card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hit-col .card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.hit-col .chartImg {
    max-width: 100%;
    height: auto;
    min-height: 300px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .charts-container {
        margin-left: 0;
        margin-right: 0;
    }
    
    .hit-col {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .mobile-action-buttons {
        padding: 0 10px;
        margin-bottom: 15px;
    }
    
    .charts-container > .hit-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.reload {
  font-family: Lucida Sans Unicode
}

.auth-toggle {
    background: #f0f0f0;
    padding: 3px;
    border-radius: 6px;
    display: inline-flex;
    width: 280px;
    max-width: 90%;
}

.auth-btn {
    border: none;
    padding: 8px 16px;
    background: transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex: 1;
    text-align: center;
}

.auth-btn.active {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auth-action-btn {
    border: none;
    padding: 8px 24px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.auth-action-btn.primary {
    background: #2c3e50;
    color: white;
}

.auth-action-btn.primary:hover {
    background: #34495e;
}

.auth-action-btn.secondary {
    background: #f0f0f0;
    color: #2c3e50;
}

.auth-action-btn.secondary:hover {
    background: #e0e0e0;
}

.main-form {
    margin:auto;
    width:90%;
    max-width: 450px;
}

@media (min-width: 768px) {
    .main-form {
        width:50%;
    }
}

@media (min-width: 992px) {
    .main-form {
        width:30%;
    }
}

.control-btn {
    border: none;
    padding: 6px 12px;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
    color: #2c3e50;
}

.control-btn:hover:not(:disabled) {
    background: #e0e0e0;
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-select {
    border: 1px solid #e0e0e0;
    font-size: 14px;
}

.selector-col {
    width: 100%;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .selector-col {
        width: 240px;
        margin-bottom: 0;
    }
}

.nav-buttons {
    color: #6c757d;
    font-size: 12px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    width: 100%;
}

@media (min-width: 768px) {
    .nav-buttons {
        width: 240px;
    }
}

.form-label.small.header-label {
    color: #000;
    font-weight: 600;
    font-size: 13px;
}

.page-count {
    color: #000;
    font-weight: 600;
    font-size: 12px;
}

#signalselect {
    width: 100%;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    #signalselect {
        width: 240px;
    }
}

.selector-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .selector-header {
        width: 240px;
    }
}

.control-btn.active {
    background: #4a6fa5; /* Distinct color for active state */
    color: white;
}

.control-btn.active:hover {
    background: #3c5a84; /* Darker hover for active state */
}

.login-label {
    
}

.refresh-link {
    text-decoration:none; 
    font-size:1.2em;
}

.strategy-link {
    text-decoration:none;
    font-size:1.2em;
}

.star-link {
    text-decoration:none;
    font-size:1.2em;
    padding-right:.2em;
}

.count-label {
    padding-left:.8em;
}

#search-input, #search-input-desktop {
    max-height: 31px !important;
    height: 31px !important;
}

#homelink {
    text-decoration: none;
    color: #000000;
}

/* Desktop controls styling */
.desktop-controls .col-auto {
    margin-right: 25px;
}

.desktop-controls .col-auto .form-select {
    width: 240px;
}

.desktop-controls .nav-buttons {
    width: 240px;
}

/* Desktop layout fixes */
@media (min-width: 992px) {
    .selector-col {
        width: 240px !important;
        margin-right: 1.5rem !important;
    }
    
    .d-flex.mb-2.flex-wrap, .d-flex.flex-wrap.selector-row {
        flex-wrap: nowrap !important;
    }
    
    .selector-row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    /* Fix dropdown widths on desktop */
    #signalselect, .form-select {
        width: 240px !important;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .raleway-header {
        font-size: 1.75rem !important;
    }
    
    .d-flex {
        flex-wrap: wrap;
    }
    
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .auth-action-btn {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .control-row .col-lg-2, .control-row .col-lg-10 {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Adjust spacing for login page on mobile */
    .login-title {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .text-center.text-muted.mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    .segmented-control {
        margin-bottom: 1rem !important;
    }
    
    .main-form {
        margin-top: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Main app page optimizations */
    .control-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Equal spacing for selectors on mobile */
    .selector-col {
        margin-right: 0 !important;
        width: 100% !important;
        padding: 0 8px;
    }
    
    /* Add spacing between selectors on mobile */
    .d-flex .selector-col + .selector-col {
        margin-top: 15px;
    }
    
    /* Fix spacing for second row of selectors */
    .d-flex .selector-col {
        margin-right: 0 !important;
    }
    
    /* Improve form controls appearance on mobile */
    select.form-select {
        margin-bottom: 10px;
    }
    
    /* Optimize dropdowns spacing */
    .d-flex.mb-2 {
        margin-bottom: 0 !important;
    }
}

/* Tooltip styling */
.tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 4px;
    border-radius: 4px;
    font-size: 12px;
    display: none;
    white-space: nowrap;
    z-index: 1000;
}