@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

body {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(141deg, #fff 0%, #f7f7f7 51%, #fff 75%);
  background-size: cover;
  background-repeat: no-repeat; }

button {
  font-family: inherit; }

input {
  font-family: inherit; }

::-webkit-scrollbar {
  background-color: transparent; }

::-webkit-scrollbar:horizontal {
  height: 0.5rem; }

::-webkit-scrollbar:vertical {
  width: 0.5rem; }

::-webkit-scrollbar-track {
  background: #f1f1f1; }

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1); }

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25); }

html {
  font-size: 62.5%;
  font-family: "Poppins", sans-serif; }

body {
  font-size: clamp(1rem, 7.5vw, 1.5rem); }

button {
  font-size: inherit; }

.wrapper {
  width: min(100%, 150rem);
  display: grid;
  grid-template-areas: "heading" "form" "utils" "table";
  gap: 3rem 5rem;
  grid-template-rows: auto auto 1fr;
  padding: 1rem; }
  @media screen and (min-width: 992px) {
    .wrapper {
      grid-template-areas: "heading heading" ". utils" "form table";
      grid-template-columns: 40% 1fr; } }
  .wrapper h1 {
    grid-area: heading;
    text-align: center; }

.api__form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; }
  .api__form .form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; }
    .api__form .form__field .field__input {
      width: 100%;
      border: 0;
      border-radius: 0.5rem;
      padding: 1rem;
      background-color: rgba(0, 0, 0, 0.05); }
  .api__form .form__submit {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    border: 0;
    border-radius: 0.5rem;
    background-color: #005564;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out; }
    .api__form .form__submit:hover {
      opacity: 0.9; }

.table__wrapper {
  grid-area: table;
  padding: min(5vw, 1rem);
  background-color: rgba(0, 0, 0, 0.025);
  border-radius: 0.5rem;
  overflow: auto; }
  @media screen and (min-width: 992px) {
    .table__wrapper {
      max-height: 27.5rem; } }
  .table__wrapper .table {
    width: max(100%, 50rem);
    border-spacing: 0;
    text-align: center;
    font-size: 90%;
    table-layout: fixed; }
    .table__wrapper .table thead tr th {
      position: sticky;
      top: 0; }
    .table__wrapper .table th,
    .table__wrapper .table td {
      padding: 1rem; }
      .table__wrapper .table th:first-of-type,
      .table__wrapper .table td:first-of-type {
        width: min(5vw, 5rem); }
      .table__wrapper .table th:last-of-type,
      .table__wrapper .table td:last-of-type {
        width: 25%; }
    .table__wrapper .table .table__header .table__row {
      position: relative; }
      .table__wrapper .table .table__header .table__row th {
        font-weight: 600; }
        .table__wrapper .table .table__header .table__row th::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #e5e5e5;
          z-index: -1; }
        .table__wrapper .table .table__header .table__row th:first-of-type::before {
          border-radius: 0.5rem 0 0 0.5rem; }
        .table__wrapper .table .table__header .table__row th:last-of-type::before {
          border-radius: 0 0.5rem 0.5rem 0; }
    .table__wrapper .table .table__body {
      padding: min(5vw, 1rem); }
      .table__wrapper .table .table__body .table__row .row__number {
        font-weight: 600; }
      .table__wrapper .table .table__body .table__row .td__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .table__wrapper .table .table__body .table__row .row__item {
        display: flex;
        align-items: center;
        justify-content: center; }
        .table__wrapper .table .table__body .table__row .row__item .clipboard__icon {
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease-in-out; }
        .table__wrapper .table .table__body .table__row .row__item:hover .clipboard__icon {
          opacity: 1;
          visibility: visible; }
      .table__wrapper .table .table__body .table__row .row__btns {
        display: flex;
        align-items: center;
        gap: 0.5rem; }
        .table__wrapper .table .table__body .table__row .row__btns .item__btn {
          border: 0;
          border-radius: 0.5rem;
          padding: 0.5rem 1rem;
          color: #fff;
          font-weight: 500;
          cursor: pointer;
          transition: opacity 0.3s ease-in-out; }
          .table__wrapper .table .table__body .table__row .row__btns .item__btn:hover {
            opacity: 0.9; }
        .table__wrapper .table .table__body .table__row .row__btns .item__edit {
          background-color: #005564; }
        .table__wrapper .table .table__body .table__row .row__btns .item__delete {
          background-color: #64003a; }

.utils__wrapper {
  grid-area: utils;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 2rem; }
  @media screen and (min-width: 576px) {
    .utils__wrapper {
      flex-direction: row;
      justify-content: space-between; } }
  .utils__wrapper .search__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: min-content; }
    .utils__wrapper .search__wrapper .search__input {
      width: 100%;
      padding: 0.5rem;
      background-color: transparent;
      border: 0;
      box-shadow: 0 0.2rem 0 -0.1rem #000; }
  .utils__wrapper .sort__wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer; }
    .utils__wrapper .sort__wrapper .sort__term {
      font-weight: 600; }

.popup__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
  .popup__wrapper .popup__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem min(5vw, 1rem);
    text-align: center;
    width: min(90%, 50rem);
    border-radius: 0.5rem;
    background-color: #fff;
    word-wrap: break-word;
    transition: all 0.3s ease-in-out; }
    .popup__wrapper .popup__content .popup__btns {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: min(5vw, 2.5rem); }
      @media screen and (min-width: 300px) {
        .popup__wrapper .popup__content .popup__btns {
          flex-direction: row; } }
      .popup__wrapper .popup__content .popup__btns .popup__btn {
        width: min(100%, 10rem);
        padding: min(2.5vw, 0.5rem) min(2.5vw, 2rem);
        background-color: transparent;
        border: 0;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease-in-out; }
        .popup__wrapper .popup__content .popup__btns .popup__btn--cancel {
          background-color: rgba(0, 0, 0, 0.15); }
        .popup__wrapper .popup__content .popup__btns .popup__btn--delete {
          background-color: #64003a;
          color: #fff; }
        .popup__wrapper .popup__content .popup__btns .popup__btn:hover {
          opacity: 0.9; }

.popup__Wrapper--show {
  visibility: visible;
  opacity: 1; }

/*# sourceMappingURL=main.css.map */