@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* -------- COLORS -------- */
  --primary-color: #0ef152;
  --secondary-color: #27ae60;
  --secondary-button-color: #0298cf;
  --third-button-color: #ffc300;
  --danger-button-color: #f80000;
  --header-background-color: #e9f7ef;
  --panel-color: #fff;
  --secondary-panel-color: #a9dfbf;
  --text-color: #000;
  --form-text-color: #333;
  --black-light-color: #707070;
  --border-color: #e6e5e5;
  --toggle-color: #ddd;
  --box1-color: #4dff65;
  --box2-color: #ffe6ac;
  --box3-color: #e7d1fc;
  --title-icon-color: #fff;

  /* -------- Transition -------- */
  --tran-05: all 0.5s ease;
  --tran-03: all 0.3s ease;
  --tran-02: all 0.2s ease;
}

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr;
  box-sizing: border-box;
}

.sub-container {
  display: grid;
  height: 100%;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "main"
    "footer";
}

.pages-main {
  grid-area: main;
}

.pages-footer {
  grid-area: footer;
  background-color: #daf7a6;
}

.center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}
/*Form Area */
.form-container {
  position: relative;
  margin-top: 50px;
  width: 100%;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
}

.form-container header {
  font-size: 1.5rem;
  color: var(--form-text-color);
  font-weight: 500;
}

.form-container .form {
  margin-top: 30px;
}

.form-container .form .input-box {
  width: 95%;
  margin: 20px;
}

.form-container .form .input-box label {
  color: var(--form-text-color);
}

.form-container .form :where(.input-box input, .input-box textarea, .select-box) {
  position: relative;
  padding: 10px 20px;
  margin-top: 10px;
  width: 100%;
  border: unset;
  border-radius: 4px;
  outline-color: rgba(84, 212, 101, 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
}

.form-container :where(.input-box input, .input-box textarea, .select-box) {
  position: relative;
  padding: 10px 20px;
  margin-top: 10px;
  width: auto;
  border: unset;
  border-radius: 4px;
  outline-color: rgba(84, 212, 101, 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
}

.select-box {
  position: relative;
}

.select-box::after {
  content: "▼"; /* Unicode arrow */
  font-size: 14px;
  color: var(--black-light-color);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.form .input-box datalist {
  width: 100%;
}

.form .input-box textarea {
  resize: none;
}

.form .select-box select {
  width: 95%;
  border: unset;
  border-radius: 4px;
  outline: none;
  font-size: 1rem;
  color: var(--form-text-color);
  font-family: "Poppins", sans-serif;
}

.form .input-box span {
  color: var(--danger-button-color);
  font-size: 0.8rem;
  padding: 3px;
  display: none;
}

.form .input-box input:invalid[focused="true"] ~ span {
  display: block;
}

.list-colum {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  overflow: auto;
}

.list-colum::-webkit-scrollbar {
  display: none;
}

.form .btn-separator {
  display: flex;
  align-items: flex-end;
}

.form .btn-separator .plus-btn:last-child {
  width: 4%;
  margin-bottom: 20px;
}

.form .btn-separator .plus-btn {
  margin-top: 35px;
  padding-left: 12px;
  width: 25%;
}

.form .btn-separator .plus-btn .close-button {
  padding: 12px;
  border: none;
  outline: none;
  background-color: var(--danger-button-color);
  color: var(--border-color);
  border-radius: 4px;
}

.form .btn-separator:last-child button {
  padding: 12px;
  border: none;
  outline: none;
  background-color: var(--secondary-color);
  color: var(--border-color);
  border-radius: 4px;
}

.form .column {
  width: 100%;
  display: flex;
  column-gap: 15px;
}

.form .column div {
  width: 100%;
}

.form-button button {
  padding: 12px;
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}

.form-button {
  width: 97%;
  display: flex;
  align-items: flex-end;
  justify-content: end;
}

.react-datalist-input__listbox {
  position: relative !important;
  max-height: 265px !important;
  overflow: auto !important;
}

.loading-page-container {
  display: relative;
  height: 400px;
  width: 400px;
}

.input-box .autocomplete:focus {
  outline: none;
}

.input-box .suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d4d4d4;
  background-color: #f7f7f7;
  border-radius: 0 0 4px 4px;
}

.input-box .suggestions li {
  list-style: none;
  padding: 10px;
  cursor: pointer;
}

.input-box .suggestions li:hover {
  background-color: #d4d4d4;
}

/*End Form Area */

/*Table Style */
.table {
  width: 98%;
}

.table_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 3px;
  background-color: var(--header-background-color);
}

.table_header p {
  color: var(--text-color);
}

.table_header button {
  padding: 12px;
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  background-color: var(--secondary-color);
  transition: background-color 0.4s ease, color 0.4s ease;
}

.table_header button:hover {
  cursor: pointer;
  background-color: #2dc66e;
}

.add_new {
  padding: 10px 10px;
  color: var(--panel-color);
  background-color: var(--secondary-color);
}

.table_header input {
  padding: 10px 20px;
  margin: 0 10px;
  border: unset;
  border-radius: 4px;
  outline-color: rgba(84, 212, 101, 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
}

.table_section {
  height: 650px;
  overflow: auto;
}

.table_section table {
  width: 100%;
  table-layout: fixed;
  min-width: 900px;
  border-collapse: collapse;
}

.table_section thead th {
  position: -webkit-sticky;
  position: sticky;
  background-color: var(--panel-color);
  color: var(--black-light-color);
  font-size: 15px;
}

.table_section th,
td {
  border-bottom: 1px solid var(--border-color);
  padding: 10px 20px;
  word-break: break-word;
  text-align: center;
}

.table_section thead th:nth-child(1) {
  text-align: unset;
}

.table_section tbody td:nth-child(1) {
  text-align: unset;
}

.status-active-text {
  color: var(--secondary-color);
}

.status-pending-text {
  color: var(--danger-button-color);
}

.table_section td img {
  height: 60px;
  width: 60px;
  object-fit: cover;
  border-radius: 15px;
}

.table_section tr:hover td {
  color: var(--secondary-color);
  cursor: pointer;
  background-color: var(--border-color);
}

.table_section td button {
  outline: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px;
  color: var(--panel-color);
  font-size: 18px;
}

.table_section td a:nth-child(1) button {
  margin-right: 5px;
  background-color: var(--secondary-button-color);
}

.table_section td a:nth-child(2) button {
  margin-right: 5px;
  background-color: var(--third-button-color);
}

.table_section td button:nth-child(3) {
  background-color: var(--danger-button-color);
}

::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px var(--text-color);
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px var(--text-color);
}

.pagination {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 10px 20px;
  list-style: none;
  gap: 5px;
}

.pagination .page-num {
  padding: 8px 15px;
  height: 40px;
  width: 40px;
  border-radius: 3px;
  background-color: var(--secondary-color);
  color: var(--panel-color);
  box-shadow: 0px 0px 4px 0px var(0, 0, 0, 0.75);
  cursor: pointer;
}

.pagination .page-num:hover {
  background-color: var(--primary-color);
}

/*End Table Style */

.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

@media (max-width: 500px) {
  .center-box {
    flex-direction: column;
  }

  .form .btn-separator {
    display: unset;
  }

  .form .btn-separator .plus-btn:last-child {
    width: 100%;
  }

  .form .btn-separator .plus-btn {
    margin-top: unset;
    padding-left: unset;
    width: 100%;
  }

  .form .btn-separator .plus-btn .close-button {
    padding: 12px;
    border: none;
    outline: none;
    background-color: var(--danger-button-color);
    color: var(--border-color);
    border-radius: 4px;
    width: 100%;
  }

  .form .btn-separator:last-child button {
    padding: 12px;
    border: none;
    outline: none;
    background-color: var(--secondary-color);
    color: var(--border-color);
    border-radius: 4px;
    width: 100%;
  }

  .form .column {
    flex-wrap: wrap;
    width: 100%;
  }

  .form .column div {
    padding-bottom: 15px;
  }

  .form-container .form .input-box {
    margin-left: 5px;
  }

  .form-button {
    margin-left: 5px;
    justify-content: start;
  }

  .form-button button {
    width: 97%;
  }

  .table_header input {
    margin: 0;
    margin-bottom: 5px;
  }

  .table {
    width: 95%;
  }
}