@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  ul, ol {
    list-style: revert;
  }
}

.post > div > div > ul, ol {
  margin-left: 30px;
}

body {
  min-height: 100vh;
  background-color: white;
}

.post > div > div > p {
  font-size: 1.125rem /* 18px */;
  line-height: 1.75rem /* 28px */;
}
.post > div > div > h2 {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-bottom: 0.5rem;
}
.post > div > div > a {
  color: #2da8e3;
}



*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  border: 0;
}


@layer components {
  .layout-p {
    @apply px-3 md:px-8 lg:px-14 xl:px-24 2xl:px-0;
  }
  .layout-m {
    @apply mx-3 md:mx-8 lg:mx-14 xl:mx-24 2xl:mx-0;
  }

  .input {
    @apply p-3 w-full bg-white rounded-md border-2 border-solid border-gray-100
  }

  .grid-4 {
    @apply grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3
  }
  .grid-3 {
    @apply grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3
  }
  .btn-primary {
    @apply bg-indigo-500 cursor-pointer rounded-md disabled:opacity-50 min-w-[90px] py-2 px-4 text-white font-bold lg:hover:bg-indigo-500/90;
  }
  .btn-secondary {
    @apply bg-secondary-500 rounded-md min-w-[90px] py-2 px-4 text-gray-900 font-bold lg:hover:bg-secondary-600;
  }
  .btn-curved {
    @apply bg-stone-900 rounded-tr-3xl rounded-bl-3xl min-w-[90px] py-2 px-4 text-white font-bold lg:hover:bg-stone-800;
  }
  .shadow-bm {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
      drop-shadow(0 4px 3px rgb(0 0 0 / 0.01));
  }
  .rtl {
    direction: rtl;
  }
  .ltr {
    direction: ltr;
  }
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #2da8e3 white;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 1rem;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: white;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ececec;
  border-radius: 15px;
  border: 5px solid white;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #2da8e3;
}


table:not(.no-style) {
  border-collapse: collapse;
  border-spacing: 5px;
  width: 100%;
}

table:not(.no-style) > tbody>tr {
  background-color: #A07C6C10;
  border: 2px solid #ffffff;
}

/* tr hover */
table:not(.no-style) > tbody>tr:hover {
  background-color: #A07C6C20;
}


/* first nth child */
table:not(.no-style) > tbody>tr>td:nth-child(1) {
  border-radius: 1rem 0 0 1rem;
  overflow: hidden;
}

/* last nth child */
table:not(.no-style) > tbody>tr>td:last-child {
  border-radius: 0 1rem 1rem 0;
  overflow: hidden;

}

th,
td {
  text-align: left;
  padding: 16px;
}