#stockListComponent {
    height: 100svh !important;

    & .jl-last-updated {
        width: 1415px;
        float: inline-start;
        margin-bottom: calc(var(--jl-margin-xs));
        color: var(--jl-text-placeholder) !important;
        line-height: 1.3;
        & a.helpcenter {
            font-size: var(--jl-font-xs);
            color: var(--jl-link) !important;
            text-decoration: none;           
        }

        & a.helpcenter:hover {
            text-decoration: underline;
        }
        & span {
            padding-right: 4px;
        }
    }

  }

  #datatables th {
      position: sticky;
      top: 0;
      z-index: 1;

  }

  #stockListComponent .stocklist {
      font-size: var(--jl-font-xs);
      margin: unset;

      max-width: 1420px;
      width: 1420px !important;
      min-width: 1420px;

      & thead {
          display: block;
          background-color: var(--jl-table-thead-bg);
      }

      & thead tr th {
          background-color: var(--jl-table-thead-bg);
          color: var(--jl-table-thead-color);
      }

      & td {
          color: var(--jl-table-text)
      }

      & tbody {
          display: block;
          min-height: 100svh;
          max-height: 100svh;
          padding-bottom: 510px !important;
          overflow: auto;
          scrollbar-color: var(--jl-bg-dark) var(--jl-border);
          scrollbar-width: thin;
          padding-bottom: var(--jl-padding-xxxl);
          background-color: var(--jl-bg);

          & tr {
              background-color: var(--jl-table-row-bg);
          }

      }

      & tbody>tr:nth-of-type(odd) {
          box-shadow: var(--jl-table-box-shadow1);
      }

      & tbody>tr:nth-of-type(even) {
          box-shadow: var(--jl-table-box-shadow2);
      }

      & tbody>tr:hover {
          box-shadow: var(--jl-table-box-shadow3);
      }

      & tbody tr:nth-child(15) td,
      & tr:nth-child(22) td {
          border-bottom: 2px solid var(--jl-info) !important;
      }

      & img {
          height: 11px;
          margin: 3px auto 3px auto;
          display: block;
      }

      & td,
      & th {
          text-align: left;
          padding: var(--jl-table-cell-padding) !important;
          border: 0px !important;
          border-bottom: 1px solid var(--jl-table-row-border);
      }

      & td.flag,
      & th.flag {
          width: 22px !important;
          max-width: 22px;
          min-width: 22px;
      }

      & td.company-name,
      & th.company-name {
          width: 250px !important;
          max-width: 250px;
          min-width: 250px;
      }

      & td.sector,
      & th.sector {
          width: 180px !important;
          max-width: 180px;
          min-width: 180px;
      }

      & td.ticker,
      & th.ticker {
          text-align: left;
          width: 72px !important;
          max-width: 72px;
          min-width: 72px;
      }

      & td.number,
      & th.number {
          text-align: right;
          margin-right: var(--jl-margin-xss);
          width: 72px !important;
          max-width: 72px;
          min-width: 72px;
      }

      & td.score,
      & th.score {
          text-align: right;
          margin-right: var(--jl-margin-xss);
          width: 72px !important;
          max-width: 72px;
          min-width: 72px;
      }

      & td.date,
      & th.date {
          text-align: right;
          margin-right: var(--jl-margin-xss);
          width: 96px !important;
          max-width: 96px;
          min-width: 96px;
      }

      & td.date {
          color: var(--jl-text-muted);
          font-size: var(--jl-font-xxs);
      }

      & td.total {
          font-weight: bold;
      }

      & td.future-dividend {
          color: var(--jl-text-muted);
          font-size: var(--jl-font-xxs);
      }

      & .negative {
          color: var(--jl-negative);
      }

      & .link {
          color: var(--jl-link);
      }

      & .link:hover {
          text-decoration: underline;
          cursor: pointer;
      }

      & td.col-separator {
          border-left: 1px solid var(--jl-border-muted)
      }

      & thead .sorting:before,
      & thead .sorting:after,
      & thead .sorting_asc:before,
      & thead .sorting_asc:after,
      & thead .sorting_desc:before,
      & thead .sorting_asc_disabled:before,
      & thead .sorting_asc_disabled:after,
      & thead .sorting_desc_disabled:before,
      & thead .sorting_desc_disabled:after {
          right: unset !important;
          display: none !important;
          /* padding-right: 10px !important; */
      }

      & thead .sorting {
          /* padding-right: 10px !important; */
      }
  }



  #stockListComponent #datatables_filter {
      font-size: var(--jl-font-xs) !important;
      margin-bottom: var(--jl-margin-xs);
      float: unset;
      background-color: var(--jl-bg-light);
      width: 180px;
      border-radius: 5px !important;
      z-index: 4;
      position: relative;

      & input {
          display: block;
          -webkit-appearance: none;
          appearance: none;
          outline: 1px solid var(--jl-border);
          padding: var(--jl-padding-xs) var(--jl-padding-s) !important;
          background-clip: padding-box;
          border: none;
          color: var(--jl-text);
          background-color: var(--jl-input-bg);
          font-size: var(--jl-font-xs) !important;
          font-family: Verdana, Geneva, Tahoma, sans-serif !important;
          border-radius: 5px !important;
          height: 32px !important;
          margin-left: 0px !important;
      }

      & input:focus {
          outline: 2px solid var(--jl-highlight);
      }

      & input::placeholder {
          color: var(--jl-text-placeholder); 
          font-size: var(--jl-font-xs);
      }
  }

  #stockListComponent #datatables_wrapper {
      margin-top: var(--jl-margin-xs);

  }