body {
  display: flex;
  justify-content: center;
font-family: Arial, sans-serif;
  align-items: center;
  height: 100vh; /* Full viewport height */
  margin: 0; /* Remove default margin */
  flex-direction: column; /* Stack content vertically */
}
    table {
      width: 100%;
      max-width: 800px;
      margin: 0 auto 20px;
      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;
    }
    button:hover {
      background-color: #0056b3;
    }
    button:disabled {
      background-color: #cccccc;
      cursor: default;
    }
    .buy {
      background-color: #d4edda;
    }
    .sell {
      background-color: #f8d7da;
    }
    .gap-5 {
      background-color: yellow;
    }
    .negative-gap-5 {
      background-color: orange;
    }
    .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;
      }
    }
    /* New styles for TP and SL inputs */
    .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;
    }
    /* Hide TP and SL columns initially */
    .hidden {
      display: none;
    }
    /* Styles for buttons and sum container */
#buttonsContainer {
  display: flex; /* Flexbox for alignment */
  justify-content: center; /* Horizontally center the buttons */
  align-items: center; /* Vertically align buttons (optional) */
  flex-wrap: wrap; /* Allow wrapping if there are too many buttons */
  margin: 20px 0; /* Add spacing above and below the button container */
  text-align: center; /* Center text inside the container */
}

button {
  margin: 10px; /* Add spacing between buttons */
}
    #sumContainer {
      margin-left: 20px;
      font-size: 16px;
    }
    #sumContainer span {
      font-weight: bold;
    }
/* Improved dropdown styling */
    .scoreDropdown {
        padding: 8px 30px 8px 8px; /* Added padding right to accommodate arrow */
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        appearance: none; /* Remove default arrow */
        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; /* Highlight on focus */
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }