body {
  
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh; /* Full viewport height */
  margin: 0; /* Remove default margin */
  font-family: Aeonik,Arial,sans-serif;
}

#mainContent {
  flex: 1;
  width: 100%;
  max-width: 900px;
  padding: 20px;
  margin: auto; /* Center the content horizontally */
  box-sizing: border-box;
font-family: Aeonik,Arial,sans-serif;
}

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid black;
      text-align: center;
      padding: 8px;
      font-size: 14px;
    }

    th {
      background-color: #f4f4f4;
    }

    button {
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-size: 14px;
      margin-right: 10px;
      border-radius: 4px;
      width: 130px;
    }

    button:hover {
      background-color: #0056b3;
    }

    button:disabled {
      background-color: #cccccc;
      cursor: default;
    }
     button:focus, input:focus {
       outline: 2px solid #007bff; /* Adds a visible focus ring for accessibility */
       outline-offset: 2px;
     }

.buy {
  background-color: #d4edda; /* Light green for BUY */
  color: #155724; /* Dark green text */
  font-weight: bold;
}

.sell {
  background-color: #f8d7da; /* Light red for SELL */
  color: #721c24; /* Dark red text */
  font-weight: bold;
}

.invalid {
  background-color: #f8d7da;
  color: #721c24;
}


    .error-message {
      color: red;
      margin-top: 10px;
    }

    #loading {
      display: none;
      margin-top: 10px;
    }

    @media (max-width: 600px) {
      table {
        font-size: 12px;
      }
      button {
        padding: 8px 16px;
      }
      th, td {
        padding: 6px;
      }
      #buttonsContainer {
        flex-direction: column;
        align-items: flex-start;
      }
      #sumContainer {
        margin-top: 10px;
      }
    }

    .tp-input {
      width: 100px;
      padding: 5px;
    }

    .sl-output {
      width: 100px;
      background-color: #e9ecef;
      border: none;
      padding: 5px;
    }

    .sl-output[readonly] {
      background-color: #f8f9fa;
    }

    .center {
      text-align: center;
font-family: Aeonik,Arial,sans-serif;
    }

    #buttonsContainer {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin: 20px 0;
      text-align: center;

    }

    button {
      margin: 10px;

    }

    #sumContainer {
      margin-left: 20px;
      font-size: 16px;
    }

    #sumContainer span {
      font-weight: bold;
    }

    .scoreDropdown {
      padding: 8px 30px 8px 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #fff;
      appearance: none;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      cursor: pointer;
    }

    .scoreDropdown:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    .hidden {
      display: none;
    }

/* Align the timestamp cells to the left */
.timestamp-cell {
  text-align: left;
}

/* Optionally, you can add padding or other styles to the timestamp cells */
.timestamp-cell {
  padding-left: 10px;
}

#historyTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}




#historyTable tbody tr {
  transition: background-color 0.3s ease-in-out, transform 0.2s ease;
}

#historyTable tr:hover {
  transform: scale(1.01); /* Slight zoom on hover */
}



#historyTable th, #historyTable td {
  border: 1px solid #ddd;
  padding: 10px; /* Default padding */
  text-align: center;
  font-size: 14px;
}

#historyTable .timestamp-row td {
  text-align: left;
  font-weight: bold;
  padding: 12px; /* Slightly bigger padding for timestamps */
  border-bottom: 2px solid #ccc;
}

#historyTable tr:hover {
  background-color: #f1f1f1;
}

#historyTable .timestamp-row:hover {
  cursor: default; /* Default cursor for timestamp rows */
}

#historyTable .buy {
  background-color: #d4edda;
  color: #00ba69;
  font-weight: bold;
}

#historyTable .sell {
  background-color: #f8d7da;
  color: #DC3545;
  font-weight: bold;
}

#historyTable .invalid {
  background-color: #ffcccc;
  color: #800000;
  font-style: italic;
}

#historyContainer {
  max-height: none;
  overflow-y: visible;
  margin: 0 auto;
  padding: 20px;

  box-sizing: border-box;
}

@media (max-width: 600px) {
  #historyTable th, #historyTable td {
    font-size: 12px;
    padding: 8px;
  }
}

@media (max-width: 600px) {
  #historyContainer {
    overflow-x: auto; /* Enable horizontal scrolling */
    margin-bottom: 10px;
  }

  #historyTable {
    width: max-content; /* Prevent table from shrinking */
    min-width: 100%; /* Ensure it doesn’t collapse */
  }
}