/*@tailwind base;*/

.hiw-mt-\[40px\] {
  margin-top: 40px;
}

.hiw-mt-\[60px\] {
  margin-top: 0px;
}

.hiw-flex {
  display: flex;
}

.hiw-grid {
  display: grid;
}

.hiw-h-\[45px\] {
  height: 45px;
}

.hiw-w-\[45px\] {
  width: 45px;
}

.hiw-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.hiw-flex-col {
  flex-direction: column;
}

.hiw-items-center {
  align-items: center;
}

.hiw-justify-center {
  justify-content: center;
}

.hiw-gap-\[16px\] {
  gap: 16px;
}

.hiw-self-start {
  align-self: flex-start;
}

.hiw-rounded-\[16px\] {
  border-radius: 16px;
}

.hiw-rounded-\[20px\] {
  border-radius: 20px;
}

.hiw-rounded-\[50px\] {
  border-radius: 50px;
}

.hiw-border {
  border-width: 1px;
}

.hiw-border-\[\#ececec\] {
  --tw-border-opacity: 1;
  border-color: rgb(236 236 236 / var(--tw-border-opacity));
}

.hiw-bg-\[\#7B61FF\] {
  --tw-bg-opacity: 1;
  background-color: #3182CE;
}

.hiw-bg-\[\#f7f7f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
}

.hiw-px-\[16px\] {
  padding-left: 16px;
  padding-right: 16px;
}

.hiw-px-\[8px\] {
  padding-left: 8px;
  padding-right: 8px;
}

.hiw-py-\[16px\] {
  padding-top: 16px;
  padding-bottom: 16px;
}

.hiw-py-\[8px\] {
  padding-top: 8px;
  padding-bottom: 8px;
}

.hiw-pl-\[30px\] {
  padding-left: 30px;
}

.hiw-text-\[16px\] {
  font-size: 16px;
}

.hiw-text-\[18px\] {
  font-size: 18px;
}

.hiw-text-\[30px\] {
  font-size: 30px;
}

.hiw-font-\[600\] {
  font-weight: 600;
}

.hiw-font-normal {
  font-weight: 400;
}

.hiw-leading-\[24px\] {
  line-height: 24px;
}

.hiw-leading-\[40px\] {
  line-height: 40px;
}

.hiw-text-\[\#000000\] {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.hiw-text-\[\#282828\] {
  --tw-text-opacity: 1;
  color: rgb(40 40 40 / var(--tw-text-opacity));
}

.hiw-text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

@media (min-width: 1024px) {
  .lg\:hiw-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:hiw-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:hiw-text-\[18px\] {
    font-size: 18px;
  }

  .lg\:hiw-text-\[20px\] {
    font-size: 20px;
  }

  .lg\:hiw-text-\[36px\] {
    font-size: 36px;
  }

  .lg\:hiw-leading-\[50px\] {
    line-height: 50px;
  }
}