:root {
    --positive-color: #00c950;
    --negative-color: #fa3e3b;
    --neutral-color: #6b7280;  
}

body {
    font-family: var(--font);
    font-size: 14px;
    margin: 0;
}

b {
  font-weight: 600;
}

.top-bar {
    height: 38px;

    display: flex;
    padding-left: 32px;
    color: #fff;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;

    max-height: 35px; /* Optional: if you also want vertical scrolling */
  overflow: auto;   /* Adds scroll bars when content overflows */
}
.price-change.positive {
    color: var(--positive-color);
  }
 .price-change.negative {
    color: var(--negative-color);
  }
  .price-change.neutral {
    color: var(--neutral-color);
  }
 #change-icon
{
	width: 12.5px;
    height: 10.75px;
}
 #change-text
 {
	 color: #ffffff;
 }

.top-bar .top-arrow-icon {
    width: 10.5px;
    height: 8.75px;
    margin: 0 5px;
}

.top-bar .company-icon {
    height: 20px;
    width: 20px;
    margin: 0 5px;
}

.top-bar .ticker_sml {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-direction: row;
    font-size: 11px
}

.ticker_sml img {
    height: 10px;
    width: auto;
    margin: 0 5px;
    margin-top: 10px;
  
}

    .powered-by-logo {
      height: 10px;
      width: auto;
      display: block;
  
    }
  
    /* White text and white icon base */
    .powered-by-logo .st0,
    .powered-by-logo .st1 {
      fill: #ffffff;
    }
    .powered-by-logo .st1 {
      fill-rule: evenodd;
    }
    /* Black detailed pattern inside the icon */
    .powered-by-logo .st2 {
      fill: #000000;
      fill-rule: evenodd;
      shape-rendering: geometricPrecision;
    }
    .powered-by-logo polygon {
      shape-rendering: crispEdges;
    }