@import "tailwindcss";

@theme {
  --color-tikti-blue: #0077c0;
  --color-tikti-green: #8bc63e;
  --color-tooltip-blue: #298cc7;
  --color-blue-container: #ddeef8;
  --color-green-container: #f2ffde;
  --color-green-nav: #96cc4e;
  --color-blue-nav: #0077c0;
}

.stepper-container {
  @apply container mx-auto py-10;
}

.form-container {
  @apply container max-w-2xl mx-auto bg-white rounded p-10;
}

.dashboard-bg {
  @apply bg-no-repeat bg-cover w-full;
}

.dashboard-bg--organization {
  background-image: url("/assets/organization_ribbons-e1e4a74f.png");
}

.dashboard-bg--job-seeker {
  background-image: url("/assets/job_seeker_ribbons-215aecf7.png");
}

.login-bg {
  @apply relative hidden w-0 flex-1 lg:block bg-cover bg-center;
  background-image: url("/assets/login_splash-b5e8c6bb.png");
}

.review-container {
  @apply max-w-3xl rounded py-5 px-5 shadow flex flex-col;
}
.review-container--blue {
  @apply bg-blue-container;
}
.review-container--green {
  @apply bg-green-container;
}
.review-container--heading {
  @apply flex items-center justify-between;
}
.sortable-list--item {
  @apply bg-tikti-blue text-white border-gray-400 hover:bg-tikti-blue/80 py-2 px-2 border rounded-md flex justify-between w-[300px] cursor-move;
}
.search-form--dropdown {
  @apply absolute z-10 mt-1 w-full max-h-60 overflow-y-auto rounded-md bg-white py-1 text-base shadow-lg outline outline-black/5 transition-all duration-1000 divide-y divide-gray-100;
}

.form-container {
  @apply bg-white gap-3 flex flex-col py-4 mt-2 px-10 border rounded p-10 border-gray-200 shadow max-w-3xl mx-auto text-center;
}