@import "tailwindcss";

@layer theme {
   :root, :host {

      --bg: #f8fafc;
      --card: #fff;
      --muted: #6b7280;
      --line: #e5e7eb;
      --ink: #111827;
      --blue: #2563eb;
      --indigo: #4f46e5;
      --sky: #0284c7;
      --amber: #d97706;
      --green: #16a34a;
      --rose: #e11d48;
      --green-50: #ecfdf5;
      --green-100: #dcfce7;
      --rose-50: #fff1f2;
      --rose-100: #ffe4e6;

      --brand-500: #1f2937;
      --brand-600: #374151;
      --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
      --color-red-50: oklch(97.1% 0.013 17.38);
      --color-red-500: oklch(63.7% 0.237 25.331);
      --color-red-600: oklch(57.7% 0.245 27.325);
      --color-red-700: oklch(50.5% 0.213 27.518);
      --color-orange-50: oklch(98% 0.016 73.684);
      --color-orange-400: oklch(75% 0.183 55.934);
      --color-orange-500: oklch(70.5% 0.213 47.604);
      --color-amber-50: oklch(98.7% 0.022 95.277);
      --color-amber-200: oklch(92.4% 0.12 95.746);
      --color-amber-900: oklch(41.4% 0.112 45.904);
      --color-yellow-100: oklch(97.3% 0.071 103.193);
      --color-yellow-600: oklch(68.1% 0.162 75.834);
      --color-green-50: oklch(98.2% 0.018 155.826);
      --color-green-100: oklch(96.2% 0.044 156.743);
      --color-green-500: oklch(72.3% 0.219 149.579);
      --color-green-600: oklch(62.7% 0.194 149.214);
      --color-green-700: oklch(52.7% 0.154 150.069);
      --color-emerald-600: oklch(59.6% 0.145 163.225);
      --color-blue-50: oklch(97% 0.014 254.604);
      --color-blue-300: oklch(80.9% 0.105 251.813);
      --color-blue-400: oklch(70.7% 0.165 254.624);
      --color-blue-500: oklch(62.3% 0.214 259.815);
      --color-blue-600: oklch(54.6% 0.245 262.881);
      --color-blue-700: oklch(48.8% 0.243 264.376);
      --color-indigo-100: oklch(93% 0.034 272.788);
      --color-indigo-500: oklch(58.5% 0.233 277.117);
      --color-indigo-600: oklch(51.1% 0.262 276.966);
      --color-purple-100: oklch(94.6% 0.033 307.174);
      --color-purple-600: oklch(55.8% 0.288 302.321);
      --color-slate-50: oklch(98.4% 0.003 247.858);
      --color-slate-200: oklch(92.9% 0.013 255.508);
      --color-slate-300: oklch(86.9% 0.022 252.894);
      --color-slate-500: oklch(55.4% 0.046 257.417);
      --color-gray-50: oklch(98.5% 0.002 247.839);
      --color-gray-100: oklch(96.7% 0.003 264.542);
      --color-gray-200: oklch(92.8% 0.006 264.531);
      --color-gray-300: oklch(87.2% 0.01 258.338);
      --color-gray-400: oklch(70.7% 0.022 261.325);
      --color-gray-500: oklch(55.1% 0.027 264.364);
      --color-gray-600: oklch(44.6% 0.03 256.802);
      --color-gray-700: oklch(37.3% 0.034 259.733);
      --color-gray-800: oklch(27.8% 0.033 256.848);
      --color-gray-900: oklch(21% 0.034 264.665);
      --color-gray-950: oklch(13% 0.028 261.692);
      --color-black: #000;
      --color-white: #fff;
      --spacing: 0.25rem;
      --breakpoint-2xl: 96rem;
      --container-xs: 20rem;
      --container-sm: 24rem;
      --container-md: 28rem;
      --container-2xl: 42rem;
      --container-3xl: 48rem;
      --container-6xl: 72rem;
      --text-xs: 0.75rem;
      --text-xs--line-height: calc(1 / 0.75);
      --text-sm: 0.875rem;
      --text-sm--line-height: calc(1.25 / 0.875);
      --text-base: 1rem;
      --text-base--line-height: calc(1.5 / 1);
      --text-lg: 1.125rem;
      --text-lg--line-height: calc(1.75 / 1.125);
      --text-xl: 1.25rem;
      --text-xl--line-height: calc(1.75 / 1.25);
      --text-2xl: 1.5rem;
      --text-2xl--line-height: calc(2 / 1.5);
      --text-3xl: 1.875rem;
      --text-3xl--line-height: calc(2.25 / 1.875);
      --text-4xl: 2.25rem;
      --text-4xl--line-height: calc(2.5 / 2.25);
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --font-weight-extrabold: 800;
      --tracking-wide: 0.025em;
      --leading-tight: 1.25;
      --leading-normal: 1.5;
      --radius-xs: 0.125rem;
      --radius-sm: 0.25rem;
      --radius-md: 0.375rem;
      --radius-lg: 0.5rem;
      --radius-xl: 0.75rem;
      --radius-2xl: 1rem;
      --radius-3xl: 1.5rem;
      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
      --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      --animate-spin: spin 1s linear infinite;
      --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
      --blur-xl: 24px;
      --aspect-video: 16 / 9;
      --default-transition-duration: 150ms;
      --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      --default-font-family: var(--font-sans);
      --default-mono-font-family: var(--font-mono);
   }
}

body {
   @apply bg-gradient-to-br from-indigo-50 via-white to-purple-50 min-h-screen text-base;
   color: #00263A;
}

*, ::after, ::before, ::backdrop, ::file-selector-button {
   border-color: var(--color-gray-200, currentColor);
}

button:not(:disabled), [role="button"]:not(:disabled) {
   cursor: pointer;
}

header {
   @apply border-b border-slate-200 bg-white/80 backdrop-blur;
}

.bg-primary {
   background-color:  var(--brand-500);
}

.text-primary {
   @apply text-black;
}

/* Card */
.card {
   @apply bg-white shadow-lg rounded-2xl;
}

.iti--inline-dropdown {
   @apply w-full;
}

/* Form Field */
.form-label {
   margin-bottom: 0.25rem;
   display: block;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
}

.form-file {
   @apply block w-full text-sm text-black file:mr-4 file:py-2 file:px-4 rounded-l-md file:border-0 file:text-sm file:font-medium file:bg-slate-200 hover:file:bg-slate-300 border border-gray-300 cursor-pointer;
}

.form-input {
   @apply block w-full py-2;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border-radius: 0.375rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus {
   --tw-border-opacity: 1;
   border-color: rgb(31 41 55 / var(--tw-border-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-select {
   @apply col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600;
}

.text-primary {
   color: var(--brand-500);
}

/* Button */
.btn {
   @apply cursor-pointer px-4 py-3 text-sm text-center font-medium inline-flex items-center justify-center rounded-lg leading-none border;
}

.btn-sm {
   @apply cursor-pointer px-2 py-1 text-sm text-center font-medium inline-flex items-center justify-center rounded-lg leading-none border;
}

.btn:focus {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
}

.btn-sm {
   padding-left: .6rem !important;
   padding-right: .6rem !important;
   padding-top: .3rem !important;
   padding-bottom: .3rem !important;
}

.btn-link {
   display: block !important;
   padding-left: 1rem !important;
   padding-right: 1rem !important;
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
}

.btn-primary-login {
--tw-bg-opacity: 1 !important;
background-color: rgb(23 54 95 / var(--tw-bg-opacity)) !important;
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.btn-primary-login:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(20 40 66 / var(--tw-bg-opacity)) !important;
}

.btn-primary-login:focus {
--tw-border-opacity: 1 !important;
border-color: rgb(20 40 66 / var(--tw-border-opacity)) !important;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
--tw-ring-opacity: 1 !important;
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)) !important;
}

.btn-primary-login:active {
--tw-bg-opacity: 1 !important;
background-color: rgb(20 40 66 / var(--tw-bg-opacity)) !important;
}

.btn-primary-login:disabled {
cursor: not-allowed !important;
opacity: 0.25 !important;
}

.btn-primary {
@apply text-white;
background-color: var(--brand-500);
}

.btn-primary:hover {
background-color: var(--brand-600);
}


.btn-success {
@apply border border-emerald-300 text-emerald-700;
}

.btn-primary:disabled {
cursor: not-allowed !important;
opacity: 0.25 !important;
}

.btn-white {
--tw-bg-opacity: 1 !important;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
--tw-text-opacity: 1 !important;
color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
}

.btn-white:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}

.btn-white:focus {
border-color: transparent !important;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
--tw-ring-color: transparent !important;
}

.btn-white:active {
--tw-bg-opacity: 1 !important;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}

.btn-white:disabled {
cursor: not-allowed !important;
opacity: 0.25 !important;
}

.btn-outline-primary {
@apply rounded-lg border border-gray-300 bg-white p-3 text-sm font-medium text-gray-700 hover:bg-gray-50;
}

.step-circle{
@apply flex items-center justify-center bg-white text-[#1f2937] w-10 h-10 rounded-full border-1 border-gray-300;
}

.step-active{
@apply text-white;
background-color: var(--brand-500);
}

.confetti {
position: absolute;
-webkit-animation: grow 1.4s cubic-bezier(0.42, 0, 0.275, 1.155) both;
         animation: grow 1.4s cubic-bezier(0.42, 0, 0.275, 1.155) both;
fill: #29a758;
}

.confetti:nth-child(1) {
   width: 12px;
   height: 12px;
   left: 0;
   top: 0;
}

.confetti:nth-child(2) {
   width: 18px;
   height: 18px;
   left: -30px;
   top: 39px;
}

.confetti:nth-child(3) {
   width: 10px;
   height: 10px;
   left: 104px;
   top: 46px;
}

.confetti:nth-child(4) {
   width: 20px;
   height: 20px;
   left: 70px;
   top: -7px;
}

.confetti:nth-child(5) {
   width: 14px;
   height: 14px;
   left: 91px;
   top: 89px;
}

.confetti:nth-child(6) {
   width: 10px;
   height: 10px;
   left: -6px;
   top: 96px;
}

.confetti:nth-child(1) {
-webkit-animation-delay: 0.7s;
         animation-delay: 0.7s;
}

.confetti:nth-child(2) {
-webkit-animation-delay: 1.4s;
         animation-delay: 1.4s;
}

.confetti:nth-child(3) {
-webkit-animation-delay: 2.1s;
         animation-delay: 2.1s;
}

.confetti:nth-child(4) {
-webkit-animation-delay: 2.8s;
         animation-delay: 2.8s;
}

.confetti:nth-child(5) {
-webkit-animation-delay: 3.5s;
         animation-delay: 3.5s;
}

.confetti:nth-child(6) {
-webkit-animation-delay: 4.2s;
         animation-delay: 4.2s;
}

.rej-checkmark {
   position: relative;
   padding: 0;
   margin-left: auto;
   margin-right: auto;
   display: inline-block;
}

.rej-checkmark__back {
   margin-left: auto;
   margin-right: auto;
}

.checkmark {
   position: relative;
   /* padding: 30px; */
   -webkit-animation: checkmark 5.6s cubic-bezier(0.42, 0, 0.275, 1.155) both;
   animation: checkmark 5.6s cubic-bezier(0.42, 0, 0.275, 1.155) both;
   margin-left: auto;
   margin-right: auto;
   display: inline-block;
}

.checkmark__check {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 10;
   transform: translate3d(-50%, -50%, 0);
   fill: #fff;
}

.checkmark__back {
   -webkit-animation: rotate 35s linear both infinite;
   animation: rotate 35s linear both infinite;
   margin-left: auto;
   margin-right: auto;
   fill: #29a758;
}

.no-animated  .checkmark__back {
   -webkit-animation: none;
   animation: none;
}

.no-animated.checkmark {
   -webkit-animation: none;
         animation: none;
   padding: 0;
}

@-webkit-keyframes grow {
   0%, 100% {
      transform: scale(0);
   }

   50% {
      transform: scale(1);
   }
}

@keyframes grow {
   0%, 100% {
      transform: scale(0);
   }

   50% {
      transform: scale(1);
   }
}

@-webkit-keyframes checkmark {
   0% {
      opacity: 0;
      transform: scale(0);
   }

   10%, 50%, 100% {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes checkmark {
   0% {
      opacity: 0;
      transform: scale(0);
   }

   10%, 50%, 100% {
      opacity: 1;
      transform: scale(1);
   }
}

@-webkit-keyframes rotate {
   0% {
      transform: rotate(0deg);
   }

   70% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(420deg);
   }
}

@keyframes rotate {
   0% {
      transform: rotate(0deg);
   }

   70% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(420deg);
   }
}

header {
   @apply bg-white shadow-md;
}

/* Badge */
.badge {
   @apply inline-flex items-center justify-center rounded-full px-2 py-1 text-xs font-medium;
}

.badge-green {
   background-color: rgba(167, 243, 208, 0.5);
   color: #039855;
}

.badge-red {
   background-color: rgba(248, 113, 113, 0.1);
   color: #d92d20;
}

.badge-yellow {
   background-color: rgba(253, 224, 71, 0.2);
   color: #b54708;
}

.badge-gray {
   background-color: #E5E7EB;
   color: #374151;
}

.badge-blue {
   background-color: #DBEAFE;
   color: #1D4ED8;
}

.badge-sky {
   background-color: #E0F2FE;
   color: #0369A1;
}

.badge-pink {
   background-color: #FCE7F3;
   color: #ff006a;
}

/* Data Table */
/* Data Table Styles Override */
.dt-layout-row:not(.dt-layout-table) {
   padding: 10px 15px;
}

body div.dt-container .dt-info {
   color: #667085;
   font-weight: 400;
   font-size: 14px;
}

body div.dt-container .dt-paging .dt-paging-button {
   border-color: transparent;
}

body div.dt-container .dt-paging .dt-paging-button.current,
body div.dt-container .dt-paging .dt-paging-button.current:hover,
body div.dt-container .dt-paging .dt-paging-button:hover {
   color: #465fff !important;
   font-weight: 500;
   background: oklab(0.623 -0.0378409 -0.210628 / 0.08);
   border-radius: 8px;
   border-color: transparent;
}

body table.dataTable thead>tr>th.dt-orderable-asc:hover,
body table.dataTable thead>tr>th.dt-orderable-desc:hover,
body table.dataTable thead>tr>td.dt-orderable-asc:hover,
body table.dataTable thead>tr>td.dt-orderable-desc:hover {
   outline: none;
}

body table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_1,
body table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1,
body table.dataTable.stripe>tbody>tr:nth-child(odd)>*,
body table.dataTable.display>tbody>tr:nth-child(odd)>*,
body table.dataTable.order-column>tbody tr>.sorting_1,
body table.dataTable.order-column>tbody tr>.sorting_2,
body table.dataTable.order-column>tbody tr>.sorting_3,
body table.dataTable.display>tbody tr>.sorting_1,
body table.dataTable.display>tbody tr>.sorting_2,
body table.dataTable.display>tbody tr>.sorting_3,
body table.dataTable.display tbody tr:hover>.sorting_1,
body table.dataTable.order-column.hover tbody tr:hover>.sorting_1,
body table.dataTable.hover>tbody>tr:hover>*,
body table.dataTable.display>tbody>tr:hover>* {
   box-shadow: none;
}

body div.dt-container .dt-length select {
   padding: 8px 32px 8px 12px;
   border-radius: 8px;
}

body div.dt-container .dt-search input {
   border-radius: 8px;
}

body table.dataTable thead th,
body table.dataTable tfoot th {
   font-weight: 500;
   font-size: 14px;
}

body table.dataTable th.dt-type-numeric,
body table.dataTable th.dt-type-date,
body table.dataTable td.dt-type-numeric,
body table.dataTable td.dt-type-date {
   text-align: left;
}

body table.dataTable>thead>tr>th,
body table.dataTable>tbody>tr>th,
body table.dataTable>tbody>tr>td {
   padding: 12px 16px;
}

table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc,
table.dataTable thead > tr > td.dt-ordering-asc,
table.dataTable thead > tr > td.dt-ordering-desc {
   position: relative;
   padding-right: 30px;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
   position: absolute;
   right: 12px;
   top: 0;
   bottom: 0;
   width: auto;
   height: auto;
}


/* Legend */
.legend {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   font-size: 12px;
   color: var(--muted);
}

.swatch {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 999px;
   margin-right: 6px;
   vertical-align: middle;
}

.swatch.blue {
   background-color: #1E40AF;
}

.swatch.gray {
   background-color: #b6bac3;
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  display: inline-block;
  flex: none;
  animation: pulseBlink 1.4s ease-in-out infinite;
}

@keyframes pulseBlink {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: .6; }
}

/* Onboarding */
.onboarding {
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 16px;
   margin-bottom: 20px;
}

/* Accordion layout */
.accordion {
   display: grid;
   gap: 14px;
   margin-top: 16px;
}

.acc-item {
   border: 1px solid var(--line);
   border-radius: 14px;
   background: var(--card);
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.acc-trigger {
   width: 100%;
   text-align: left;
   background: #fff;
   border: 0;
   display: flex;
   align-items: start;
   justify-content: space-between;
   gap: 12px;
   padding: 14px 16px;
   cursor: pointer;
}

.acc-trigger:focus-visible {
   outline: 2px solid var(--blue);
   outline-offset: 2px;
   border-radius: 14px;
}

.acc-title {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
}

.acc-sub {
   margin: 2px 0 0;
   font-size: 12px;
   color: var(--muted);
}

/* Chevron */
.chev {
   flex: none;
   width: 18px;
   height: 18px;
   margin-left: 8px;
   transition: transform .2s ease;
}

.acc-trigger[aria-expanded="true"] .chev {
   transform: rotate(180deg);
}

/* Panel (animated) */
.acc-panel {
   grid-template-rows: 0fr;
   display: grid;
   transition: grid-template-rows .25s ease;
   border-top: 1px solid var(--line);
}

.acc-panel-inner {
   overflow: hidden;
   padding: 0 30px;
}

.acc-panel[data-open="true"] {
   grid-template-rows: 1fr;
}

/* Timeline */
.timeline {
   position: relative;
   padding: 16px 0;
}

.timeline::before {
   content: "";
   position: absolute;
   left: 0;
   top: 16px;
   bottom: 16px;
   width: 1px;
   background: var(--line);
}

.t-step {
   position: relative;
   padding-left: 20px;
   margin-top: 14px;
}

.t-step:first-child {
   margin-top: 0;
}

.dot {
   position: absolute;
   left: -6px;
   top: 6px;
   width: 12px;
   height: 12px;
   border-radius: 999px;
   box-shadow: 0 0 0 4px #fff;
}

.dot.submitted {
   background: var(--indigo);
}

.dot.blue {
   background: #1E40AF;
}

.dot.gray {
   background: #b6bac3;
}

.dot.approved {
   background: var(--amber);
}

.dot.paid {
   background: var(--green);
}

.dot.rejected {
   background: var(--rose);
}

.t-title {
   margin: 0;
   font-size: 14px;
   font-weight: 600;
}

.t-title.approved {
   color: var(--green);
}

.t-title.rejected {
   color: var(--rose);
}

.t-desc {
   margin: 2px 0 0;
   font-size: 12px;
   color: var(--muted);
}

/* Sub-panels */
.panel {
   margin-top: 10px;
   border-radius: 12px;
   padding: 10px;
   border: 1px solid var(--line);
   background: #fff;
}

.panel.payment {
   border-color: #86efac;
   background: var(--green-50);
}

.panel.payment .label {
   background: var(--green-100);
   color: var(--green);
}

.panel.reject {
   border-color: #fecdd3;
   background: var(--rose-50);
}

.panel.reject .label {
   background: var(--rose-100);
   color: var(--rose);
}

.panel .head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   color: #111;
}

.panel ul {
   margin: 6px 0 0 16px;
   padding: 0;
   font-size: 12px;
   color: #374151;
   list-style: disc;
}

.panel ul li {
   margin: 3px 0;
}