body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

#APTable {
  border: 0px; /* Example border styling */
}

.container {
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
  color: #333;
}


h3 {
  text-align: center;
}

h4 {
  text-align: center;
}

.input-group {
  margin-bottom: 20px;
  text-align: left;
}

.label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #666;
}

.select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.output {
  text-align: center;
}

.wall-image {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.req {
  border: 2px solid #ccc; /* Adding a border to the demo paragraph */
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #FFFFCC;
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 770px;
  margin: auto;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  width: 110px;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #E6E6B8;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #E6E6B8;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }

    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
    }
    td[contenteditable="true"] {
      background-color: #f0f0f0;
    }

    select:focus {
      outline: 2px solid black;
    }

    input:focus {
      outline: 2px solid black;
    }

    input[type='number']{
        width: 35px;
        border:0;
        outline:0;
        text-align: center;
    }

    select {
      border:0;
      outline:0;
      text-align-last: center;
      cursor: pointer
    }

    input.largerCheckbox {
                width: 20px;
                height: 20px;
            }

            .used {
              background-color: #FFFFCC;
            }

            .not-used {
              background-color: #BFBFBF;
            }

            .tables-container {
                display: flex;
                gap: 50px;
                align-items: center;
                justify-content: center;
              }

              .table-container, .selectors-container {
                display: flex;
                align-items: center;
                justify-content: center;
              }

              .selectors-container {
                flex-direction: column; /* Ensures vertical arrangement */
                padding-right: 50px; /* Optional: Adds some space between the selectors and the table */
              }

              .selectors-and-table {
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }

              .tooltip .tooltiptext {
                visibility: hidden;
                color: #000000;
                text-align: left;
                border-radius: 6px;
                padding: 0px 0;
		background-color: #F3F5FB;
		border-style: solid;

                /* Position the tooltip */
                position: absolute;
                z-index: 1;
              }

              .tooltip:focus .tooltiptext {
                visibility: visible;
              }

              .tooltip.focused:hover .tooltiptext {
        visibility: visible;
    }

    .tooltip:focus .tooltiptext,
    .tooltip.focused:hover .tooltiptext {
        visibility: visible;
    }