#defDocTab {
  border-bottom: 1px solid gray;
  padding: 1rem;
  margin: 0%;
  font-size: 0.90rem;
}

#defDocTab li button {
  color: #008080;
  margin-left: 6rem;
  padding: 0.5rem;
  font-size: 0.90rem;
  min-width: 5rem;
}

#defDocTab li button.active {
  background-color: #008080;
  color: white;
  margin-left: 6rem;
  padding: 0.5rem;
  font-size: 0.90rem;
  min-width: 5rem;
}

/*so docs  */
#soDocsTable thead {
  background-color: #008080;
  color: white;
  font-size: 0.70rem;
}

#soDocsTable {
  width: 80%;
  margin: auto;
}

#soDocsTable tr:nth-child(even) {
  background-color: #D6EEEE;
  font-size: 0.70rem;
}

#soDocsTable tr {

  font-size: 0.70rem;
}

/*po docs  */
#poDocsTable thead {
  background-color: #008080;
  color: white;
  font-size: 0.70rem;
}

#poDocsTable {
  width: 80%;
  margin: auto;
}

#poDocsTable tr:nth-child(even) {
  background-color: #D6EEEE;
  font-size: 0.70rem;
}




/*pack docs  */
#soPackDocsTable thead {
  background-color: #008080;
  color: white;
  font-size: 0.70rem;
}

#soPackDocsTable {
  width: 80%;
  margin: auto;
}

#soPackDocsTable tr:nth-child(even) {
  background-color: #D6EEEE;
  font-size: 0.70rem;
}

#soPackDocsTable tr {
  font-size: 0.70rem;
}

/*pack docs  */
#poPackDocsTable thead {
  background-color: #008080;
  color: white;
  font-size: 0.70rem;
}

#poPackDocsTable {
  width: 80%;
  margin: auto;
}

#poPackDocsTable tr:nth-child(even) {
  background-color: #D6EEEE;
  font-size: 0.70rem;
}

#poPackDocsTable tr {
  font-size: 0.70rem;
}


/*pack docs  */
#poDocsTable thead {
  background-color: #008080;
  color: white;
  font-size: 0.70rem;

}

#poDocsTable {
  width: 80%;
  margin: auto;
  font-size: 0.70rem;
}

#poDocsTable tr:nth-child(even) {
  background-color: #D6EEEE;
  font-size: 0.70rem;
}

/*pack docs  */
#soDocsTable thead {
  font-size: 0.70rem;
  background-color: #008080;
  color: white;
  font-size: 0.70rem;
}

#soDocsTable {
  width: 80%;
  margin: auto;
}

#soDocsTable tr:nth-child(even) {
  background-color: #D6EEEE;
}

.tealFaBtn {
  color: #008080;
  font-size: 0.70rem;
  padding: 0%;
  margin: 0%;
}

.redFaBtn {
  color: red;
  font-size: 0.70rem;
  padding: 0%;
  margin: 0%;
}

.tealColor {
  color: #008080;
}

.grayColor {
  color: gray;
}

.yesBtn {
  background-color: #008080;
  color: white;
  border-radius: 12px;
  margin: auto;
  width: 9rem;
  height: 2.7rem;
  font-size: 0.70rem;
}

.yesBtn:hover {
  background-color: #454545;
  color: white;
  border-radius: 12px;
  margin: auto;
  width: 9rem;
  height: 2.7rem;
  font-size: 0.70rem;
}


.noBtn {
  background-color: #454545;
  color: white;
  border-radius: 8px;
  border: none;
  margin: auto;
  width: 9rem;
  height: 2.7rem;
  font-size: 0.70rem;
}

.noBtn:hover {
  background-color: #008080;
  color: white;
  border-radius: 8px;
  border: none;
  margin: auto;
  width: 9rem;
  height: 2.7rem;
  font-size: 0.70rem;
}

input[type=text] {
  font-size: 0.70rem;

}

#toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-msg {
  min-width: 250px;
  max-width: 350px;
  padding: 12px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  opacity: 1;
  animation: slideIn 0.3s ease-out;
}

/* Colors */
.toast-msg.success {
  background: #28a745;
}

.toast-msg.error,
.toast-msg.danger {
  background: #dc3545;
}

.toast-msg.warning {
  background: #ffc107;
  color: #000;
}

.toast-msg.info {
  background: #17a2b8;
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/* 🔴 Red border for invalid input */
.invalid-field {
  border: 2px solid red !important;
}


.cancelBtn {
  background-color: red;
  color: white;
  border-radius: 8px;
  border: none;
  margin: auto;
  width: 9rem;
  height: 2.7rem;

}

.cancelBtn:hover {
  background-color: #008080;
  color: white;
  border-radius: 8px;
  border: none;
  margin: auto;
  width: 9rem;
  height: 2.7rem;

}

.input-container {
  display: flex;
  /* Aligns children (input and icon) horizontally */
  align-items: center;
  /* Aligns children vertically in the middle */
  gap: 10px;
  /* Adds space between the input and the icon */
  border: 1px solid #ccc;
  /* Optional: style the container to look like an input */
  padding: 5px;
  width: fit-content;
  /* Optional: adjust width as needed */

}

.input-container input {
  border: none;
  /* Remove default input border if container has one */
  outline: none;
  /* Remove focus outline */
  padding: 0;
  font-size: 0.70rem;
}

.input-container .fa-user {
  color: #888;
  /* Optional: style the icon color */
}


.formHead {
  font-size: 0.70rem;
  color: gray;
  font-weight: bold;
}

.formHead-8 {
  font-size: 0.90rem;
  color: gray;
  font-weight: bold;
}