/* ------------------------------------- */
/* LOGIN PAGE STYLES START */
/* ------------------------------------- */

.login__section {
  width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.login__form__container {
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 1rem;
  margin-bottom: 3rem;
}

.login__form__container .logo__img {
  width: 200px;
}

.login__form__container .text__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login__form__container .text__container h1 {
  color: var(--clr-black);
  font-size: var(--size-3xl);
  font-weight: 500;
}

.login__form__container .text__container p {
  color: var(--clr-300-black);
  font-size: var(--size-sm);
  font-weight: 400;
}

.login__form__container .login__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;

  gap: 1rem;
}

.login__form .input__field__wrapper input {
  width: 100%;
  color: var(--clr-black);
  font-size: var(--size-base);
  font-weight: 400;
  border-radius: 0.4rem;
  border: 1px solid var(--clr-light-black-text);

  padding: 0.6rem 0.5rem;
}

.login__form .input__field__wrapper input::placeholder {
  color: var(--clr-light-black-text);
}

.login__form .submit__btn__container {
  width: 100%;
}

.login__form .submit__btn__container button {
  width: 100%;
  color: var(--clr-white);
  background-color: var(--clr-btn-background);
  font-size: var(--size-base);
  font-weight: 400;
  border-radius: 0.4rem;

  padding: 0.6rem 0.5rem;

  transition: all 0.2s ease-in-out;
}

.login__form .submit__btn__container button:hover {
  opacity: 0.9;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------- */
/* LOGIN PAGE STYLES END */
/* ------------------------------------- */

/* ------------------------------------- */
/* DASHBOARD STYLES START */
/* ------------------------------------- */

.dashboard__grid {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;

  gap: 1rem;
}

.dashboard__grid .stats__grid {
  display: grid;

  gap: 1rem;
}

.dashboard__grid .stats__grid .grid__item {
  background-color: var(--clr-btn-background-ligth);
  background-color: #d1ffeb;
  border-radius: 0.5rem;

  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: start;

  gap: 0.4rem;
  padding: 1.5rem 1.2rem;
}

.stats__grid .grid__item .number {
  color: var(--clr-btn-background);
  font-size: var(--size-4xl);
  font-weight: 400;
}

.stats__grid .grid__item .title {
  color: var(--clr-dark-bg-green);
  font-size: var(--size-2xl);
  font-weight: 500;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {
  .dashboard__grid .stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;
  }
}

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------- */
/* DASHBOARD STYLES END */
/* ------------------------------------- */

/* ------------------------------------- */
/* TABLE CONTAINER STYLES START */
/* ------------------------------------- */

.table__container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;

  gap: 1rem;
}

.table__container .table__row {
  border: 1px solid var(--clr-border-black);
  border-radius: 1rem;
  overflow: hidden;

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;

  gap: 1rem;
  padding: 0.8rem 1rem;
}

.table__container .table__row .thumbnail {
  width: 100px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.5rem;
}

.table__container .table__row .content__container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
}

.table__container .table__row .content__container .title {
  width: 100%;
  color: var(--clr-black);
  font-size: var(--size-sm-text);
  font-weight: 400;
}

.table__container .btn__container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.5rem;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
@media (min-width: 1024px) {
  .table__container .table__row .thumbnail {
    width: 175px;
    height: 98px;
  }

  .table__container .table__row .content__container .title {
    width: 90%;
    font-size: var(--size-lg);
    font-weight: 400;
  }

  .table__container .btn__container {
    flex-wrap: nowrap;

    gap: 0.5rem;
  }
}

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------- */
/* TABLE CONTAINER STYLES END */
/* ------------------------------------- */

/* ------------------------------------------------ */
/* PROOF TABLE SECTION START */
/* ------------------------------------------------ */

.proofs__table__section {
  overflow-x: auto;
}

.proofs__table__section .proofs__table__container {
  width: 800px;
  color: var(--clr-a3a-black);
  color: var(--clr-333-black);
  background-color: #edf2f7;
  border: 1px solid var(--clr-btn-background);
  border-radius: 0.5rem;
  overflow: hidden !important;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
}

.proofs__table__container .table__header {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr) 2fr repeat(2, 1fr); */
  grid-template-columns: repeat(3, 1fr) 2fr 0.5fr 1.5fr;
  justify-content: stretch;
  align-items: stretch;
  text-align: center;
}

.proofs__table__container .table__row {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr) 2fr repeat(2, 1fr); */
  grid-template-columns: repeat(3, 1fr) 2fr 0.5fr 1.5fr;
  justify-content: stretch;
  align-items: stretch;
  text-align: center;
}

.proofs__table__container .table__header {
  background-color: var(--clr-dark-bg-green);
  border-radius: 0.4rem;

  padding: 1rem 0rem;
}

.proofs__table__container .table__header .head__data h2 {
  color: var(--clr-white);
  font-size: var(--size-lg-text);
  font-weight: 500;
}

.proofs__table__container .table__row {
  border: none;
  border-top: 1px solid var(--clr-a3a-black);

  padding: 0.8rem 0rem;
}

.proofs__table__container .table__row__start {
  border: none;
}

.proofs__table__container .table__row .row__data p {
  color: var(--clr-333-black);
  font-size: var(--size-text);
  font-weight: 400;
}

.proofs__table__container .table__row .row__data__pair .value {
  color: var(--clr-dark-bg-green);
  color: #4f6169;
  font-weight: 700;
}

.proofs__table__container .table__row .row__data__order .value {
  font-weight: 700;
}

.proofs__table__container
  .table__row
  .row__data__order
  .value
  .blue__highlight {
  color: var(--clr-main-blue);
}

.proofs__table__container .table__row .row__data__order .value .red__highlight {
  color: var(--clr-main-red);
}

.proofs__table__container .table__row .row__data__sltp .value {
  color: var(--clr-333-black);
  font-weight: 400;
}

.proofs__table__container .table__row .row__data__sltp .value .blue__highlight {
  color: var(--clr-main-blue);
}

.proofs__table__container .table__row .row__data__sltp .value .red__highlight {
  color: var(--clr-main-red);
}

.proofs__table__container
  .table__row
  .row__data__profit
  .value
  .green__highlight {
  color: var(--clr-spc-green);
  color: #00d179;
  font-weight: 700;
}

.proofs__table__container .table__row .row__data__live {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 0.2rem;
}

.proofs__table__container .table__row .row__data__live .proof__btn__solid {
  background-color: var(--clr-btn-background);
  color: var(--clr-white);
  font-size: var(--size-xs);
  font-weight: 400;
  border-radius: 0.2rem;

  padding: 0.4rem 0.8rem;

  transition: all 0.3s ease-in-out;
}

.proofs__table__container
  .table__row
  .row__data__live
  .proof__btn__solid:hover {
  opacity: 0.9;
}

.proofs__table__container .table__row .row__data__live .edit__btn__solid {
  background-color: var(--clr-spc-green);
  color: var(--clr-black);
  font-size: var(--size-xs);
  font-weight: 500;
  border-radius: 0.2rem;

  padding: 0.4rem 0.8rem;
  transition: all 0.3s ease-in-out;
}

.proofs__table__container .table__row .row__data__live .edit__btn__solid:hover {
  opacity: 0.9;
}

.proofs__table__container .table__row .row__data__live .delete__btn__solid {
  background-color: var(--clr-btn-red-light);
  color: var(--clr-white);
  font-size: var(--size-xs);
  font-weight: 400;
  border-radius: 0.2rem;

  padding: 0.4rem 0.8rem;

  transition: all 0.3s ease-in-out;
}

.proofs__table__container
  .table__row
  .row__data__live
  .delete__btn__solid:hover {
  opacity: 0.9;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {
  .proofs__table__section .proofs__table__container {
    width: 100%;
    color: var(--clr-a3a-black);
    color: var(--clr-333-black);
    background-color: #edf2f7;
    border: 1px solid var(--clr-btn-background);
    border-radius: 0.5rem;
    overflow: auto;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;

    /* gap: 1rem; */
  }
}

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------------------ */
/* PROOF TABLE SECTION END */
/* ------------------------------------------------ */

/* ------------------------------------------------ */
/* EDIT PAGE STYLES START */
/* ------------------------------------------------ */

.form__container .form__element {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;

  gap: 2rem;
  margin-bottom: 3rem;
}

.form__container .blog__form {
  width: 900px;
  width: 100%;
}

.form__container .form__element .form__input__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;

  gap: 1rem;
}

.form__container .form__element .input__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: start;

  gap: 0.2rem;
}

.form__container .form__element .input__wrapper label,
.form__container .form__element .input__wrapper .text {
  color: var(--clr-black);
  font-size: var(--size-text);
  font-weight: 400;
}

.form__container .form__element .input__wrapper input::placeholder,
.form__container .form__element .input__wrapper textarea::placeholder {
  /* width: 460px; */
  width: 100%;
  color: var(--clr-light-black-text);
  font-size: var(--size-sm-text);
  font-weight: 400;
  background-color: var(--clr-background-black);
  border: none;
  border-radius: 0.5rem;

  padding: 0.6rem 0.8rem;
}

.form__container .form__element .input__wrapper input,
.form__container .form__element .input__wrapper textarea {
  /* width: 460px; */
  width: 100%;
  color: var(--clr-light-black-text);
  color: var(--clr-333-black);
  font-size: var(--size-sm-text);
  font-weight: 400;
  background-color: var(--clr-background-black);
  border: none;
  border-radius: 0.5rem;

  padding: 0.6rem 0.8rem;
}

.form__container .form__element .input__wrapper .radio__input {
  width: 100%;
}

.form__container .form__element .input__wrapper .radio__selector__container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;

  gap: 1rem;
}

.form__container
  .form__element
  .input__wrapper
  .radio__selector__container
  .radio__selector__input {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;

  gap: 0.5rem;
}

.form__container .form__element .submit__btn__container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;

  gap: 0.5rem;
}

.form__container .form__element .submit__btn__container a {
  width: 100%;
}

.form__container .form__element .submit__btn__container .submit__btn {
  width: 100%;
  color: var(--clr-black);
  background-color: var(--clr-spc-green);
  font-size: var(--size-text);
  font-weight: 500;
  border-radius: 0.5rem;

  padding: 0.5rem 1.2rem;
}

.edit__form__submit__btn__container {
  width: 100%;
  color: var(--clr-black);
  background-color: var(--clr-spc-green);
  font-size: var(--size-text);
  font-weight: 500;
  text-align: center;
  border-radius: 0.5rem;

  padding: 0.5rem 1.2rem;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
@media (min-width: 1024px) {
  .form__container .form__element {
    width: 460px;
  }

  .form__container .blog__form {
    width: 100%;
  }
}

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------------------ */
/* EDIT PAGE STYLES END */
/* ------------------------------------------------ */

.rounded__img {
  width: 175px;
  height: 98px;
  object-fit: cover;
  border-radius: 0.5rem;
}

.errors__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;

  gap: 0.5rem;
  margin-bottom: 1rem;
}

.errors__container .error__text {
  background-color: var(--clr-btn-red-light);
  color: var(--clr-white);
  font-weight: var(--size-sm-text);
  font-weight: 400;
  border-radius: 0.5rem;

  padding: 0.5rem 1.2rem;
}

.error__msg__text {
  color: var(--clr-btn-red-light);
  font-weight: var(--size-sm-text);
  font-weight: 500;
}

.message__text__box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;

  gap: 0.5rem;
  margin-bottom: 1rem;
}

.message__text__box .message__text {
  color: var(--clr-spc-green);
  color: #31cb00;
  font-weight: var(--size-sm-text);
  font-weight: 500;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
@media (min-width: 1024px) {
  .errors__container {
    width: 460px;
  }

  .message__text__box {
    width: 460px;
  }
}

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------------------ */
/* PAGINETIONS STYLES START */
/* ------------------------------------------------ */

.pagination__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;

  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pagination__wrapper .pagination__container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.5rem;
}

.pagination__wrapper .pagination__container .paginations__num__btn {
  width: 35px;
  height: 30px;
  color: var(--clr-black);
  font-size: var(--size-sm-text);
  font-weight: 400;
  background-color: var(--clr-white);
  border: 1px solid var(--clr-light-black-text);
  border-radius: 0.5rem;
}

.pagination__wrapper .pagination__container .active__page__num {
  background-color: var(--clr-spc-green);
}

/* ------------------------------------------------ */
/* PAGINETIONS STYLES END */
/* ------------------------------------------------ */

/* ------------------------------------------------ */
/* 404 ERROR PAGE STYLES START */
/* ------------------------------------------------ */

.error__message__container {
  width: 100%;
  height: 100vh;
  background-color: var(--clr-background-green);

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
}

.error__message__container .error__message__grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;

  gap: 1rem;
  padding: 0rem 0.5rem;
  margin-top: 5rem;
}

.error__message__container .error__message__grid .text__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.error__message__container .error__message__grid .title {
  color: var(--clr-spc-green);
  font-size: var(--size-12xl);
  font-weight: 500;
}

.error__message__container .error__message__grid .text {
  width: 100%;
  color: var(--clr-white);
  font-size: var(--size-lg);
  font-weight: 300;
}

.error__message__container .error__message__grid .error__page__login__btn {
  width: 100%;
  color: #85ff0d;
  background-color: var(--clr-dark-bg-green);
  font-size: var(--size-text);
  font-weight: 400;
  border: 1px solid #85ff0d;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;

  padding: 0.6rem 1rem;
}

.error__message__container
  .error__message__grid
  .error__page__login__btn:hover {
  color: var(--clr-black);
  background-color: var(--clr-white);
  border-color: var(--clr-white);
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {
  .error__message__container .error__message__grid .text {
    width: 400px;
  }
}

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* ------------------------------------------------ */
/* 404 ERROR PAGE STYLES END */
/* ------------------------------------------------ */

.note-editor.note-frame {
  width: 100%;
}

@media (min-width: 1280px) {
  .note-editor.note-frame {
    width: 100%;
    max-width: calc(100vw - 280px);
  }
}

/* CREATE & EDIT PAGES STYLES START */

.pricing-fields-wrapper {
  display: grid;
  gap: 1rem;
}

/* xxxs */
/* @media (min-width: 320px) {} */

/* xxs */
/* @media (min-width: 380px) {} */

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
@media (min-width: 768px) {
  .pricing-fields-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

/* CREATE & EDIT PAGES STYLES END */

/* ---------- Card / wrapper ---------- */

.ot-card {
  width: 100%;
  max-width: 100%;
  background: var(--ot-white);
  border: 1px solid var(--ot-gray-200);
  border-radius: var(--ot-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.ot-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Table base ---------- */

.ot-table {
  width: 100%;
  min-width: 900px; /* forces horizontal scroll instead of crushing columns */
  border-collapse: collapse;
  table-layout: auto;
}

/* ---------- Header ---------- */

.ot-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ot-gray-50);
  border-bottom: 1px solid var(--ot-gray-200);
  text-align: left;
  white-space: nowrap;
  padding: 10px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ot-gray-500);
}

.ot-th-main {
  display: block;
}

.ot-th-sub {
  display: block;
  margin-top: -5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ot-gray-400);
}

/* ---------- Body rows ---------- */

.ot-table tbody tr {
  border-bottom: 1px solid var(--ot-gray-100);
  transition: background-color 0.15s ease;
}

.ot-table tbody tr:last-child {
  border-bottom: none;
}

.ot-table tbody tr:hover {
  background: var(--ot-gray-50);
}

.ot-table tbody td {
  padding: 16px 10px;
  vertical-align: top;
  font-size: 13.5px;
  color: var(--ot-gray-700);
}

/* ---------- Order ID ---------- */

.ot-order-id {
  font-weight: 600;
  color: var(--ot-black);
  font-size: 12px !important;
  white-space: nowrap;
}

/* ---------- Indication name ---------- */

.ot-indication {
  color: var(--ot-gray-800);
  font-weight: 500;
  font-size: 11px !important;
}

/* ---------- Stacked two-point cells (Buyer / Order / Payment) ---------- */

.ot-stack {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.ot-stack-primary {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ot-black);
  white-space: nowrap;
}

.ot-stack-secondary {
  font-size: 11.5px;
  color: var(--ot-gray-500);
  white-space: nowrap;
}

.ot-stack-secondary::first-letter {
  text-transform: uppercase;
}

/* ---------- Username ---------- */

.ot-username {
  font-family: var(--ot-font-mono);
  font-size: 12.5px;
  color: var(--ot-gray-600);
  white-space: nowrap;
}

/* ---------- Payment status badge ---------- */

.ot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ot-badge .text::first-letter {
  text-transform: uppercase;
}

.ot-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.ot-badge.paid {
  background: var(--ot-black);
  background: #04e762;
  color: #000000;
  border: 1px solid #04e762;
}

.ot-badge.pending {
  background: var(--ot-white);
  color: var(--ot-gray-600);
  border: 1px dashed var(--ot-gray-300);
}

.ot-badge.failed {
  background: var(--ot-gray-100);
  color: var(--ot-gray-600);
  border: 1px solid var(--ot-gray-200);
}

/* ---------- Sticky first column (helps orientation on mobile scroll) ---------- */

@media (max-width: 768px) {
  .ot-col-id,
  .ot-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    background-color: var(--ot-white);
    box-shadow: 1px 0 0 var(--ot-gray-200);
  }

  .ot-table thead th.ot-col-id {
    z-index: 3;
    background-color: var(--ot-gray-50);
  }

  .ot-table tbody tr:hover td:first-child {
    background-color: var(--ot-gray-50);
  }

  .ot-table tbody td {
    padding: 12px 14px;
    font-size: 12.5px;
  }

  .ot-table thead th {
    padding: 12px 14px;
    font-size: 10px;
  }
}