/* Fallback */
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
  --primary-color: #6C63FF;
  --secondary-color: #FAF7FC;
  --text-color: #292929;
  --border-radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-color);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

p {
  font-size: 16px;
  line-height: 23px;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 26px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

/* Font Sizes */
.fs-10 { font-size: 10px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }
.fs-30 { font-size: 30px; }
.fs-31 { font-size: 31px; }
.fs-32 { font-size: 32px; }
.fs-35 { font-size: 35px; }
.fs-39 { font-size: 39px; line-height: 45px; }
.fs-42 { font-size: 42px; line-height: 50px; }
.fs-48 { font-size: 48px; }
.fs-60 { font-size: 60px; }

/* Font Weights */
.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* Line Heights */
.lh-20 { line-height: 20px; }
.lh-24 { line-height: 24px; }
.lh-28 { line-height: 28px; }
.lh-32 { line-height: 32px; }
.lh-36 { line-height: 36px; }
.lh-40 { line-height: 40px; }
.lh-45 { line-height: 45px; }
.lh-50 { line-height: 50px; }
.lh-60 { line-height: 60px; }

/* Float Utilities */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.float-inline-start { float: inline-start; }
.float-inline-end { float: inline-end; }

/* Ordered List Reset */
ol {
  list-style: none;
  padding-left: 0;
}

/* Position Utilities */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Position Offsets */
.left-0 { left: 0px; }
.left-5 { left: 5px; }
.left-10 { left: 10px; }
.left-15 { left: 15px; }
.left-20 { left: 20px; }
.left-25 { left: 25px; }
.left-30 { left: 30px; }
.left-50 { left: 50px; }
.left-auto { left: auto; }

.right-0 { right: 0px; }
.right-5 { right: 5px; }
.right-10 { right: 10px; }
.right-15 { right: 15px; }
.right-20 { right: 20px; }
.right-25 { right: 25px; }
.right-30 { right: 30px; }
.right-50 { right: 50px; }
.right-auto { right: auto; }

top-0 { top: 0px; }
top-5 { top: 5px; }
top-10 { top: 10px; }
top-15 { top: 15px; }
top-20 { top: 20px; }
top-25 { top: 25px; }
top-30 { top: 30px; }
top-50 { top: 50px; }
top-auto { top: auto; }

.bottom-0 { bottom: 0px; }
.bottom-5 { bottom: 5px; }
.bottom-10 { bottom: 10px; }
.bottom-15 { bottom: 15px; }
.bottom-20 { bottom: 20px; }
.bottom-25 { bottom: 25px; }
.bottom-30 { bottom: 30px; }
.bottom-50 { bottom: 50px; }
.bottom-auto { bottom: auto; }

/* Z-Index Utilities */
.z-i-1 { z-index: -1; }
.z-i0 { z-index: 0; }
.z-i1 { z-index: 1; }
.z-i2 { z-index: 2; }
.z-i3 { z-index: 3; }
.z-i4 { z-index: 4; }
.z-i5 { z-index: 5; }
.z-i10 { z-index: 10; }
.z-i100 { z-index: 100; }

/* Border Radius */
.br-0 { border-radius: 0; }
.br-2 { border-radius: 2px; }
.br-4 { border-radius: 4px; }
.br-6 { border-radius: 6px; }
.br-8 { border-radius: var(--border-radius); }
.br-10 { border-radius: 10px; }
.br-12 { border-radius: 12px; }
.br-16 { border-radius: 16px; }
.br-20 { border-radius: 20px; }
.br-25 { border-radius: 25px; }
.br-50 { border-radius: 50%; }
.br-full { border-radius: 9999px; }

/* Padding */
.pd-0 { padding: 0px; }
.pd-5 { padding: 5px; }
.pd-10 { padding: 10px; }
.pd-15 { padding: 15px; }
.pd-20 { padding: 20px; }
.pd-l-0 { padding-left: 0px; }
.pd-l-5 { padding-left: 5px; }
.pd-l-10 { padding-left: 10px; }
.pd-l-15 { padding-left: 15px; }
.pd-l-20 { padding-left: 20px; }

/* Margin */
.mr-0 { margin-right: 0px; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.ml-0 { margin-left: 0px; }
.ml-10 { margin-left: 10px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }

/* Width */
.width-25 { width: 25%; }
.width-50 { width: 50%; }
.width-75 { width: 75%; }
.width-100 { width: 100%; }
.width-auto { width: auto; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-hidden-x { overflow-x: hidden; }
.overflow-hidden-y { overflow-y: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-visible { overflow: visible; }

/* Background */
.gray-bg { background-color: var(--secondary-color); }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }

/* Grid */
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 15px; }
.grid-container-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
.grid-container-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 25px; }
.grid-container-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; }
.grid-item { background-color: var(--secondary-color); padding: 15px; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); }
.grid-center { display: grid; place-items: center; }
.grid-align-start { display: grid; justify-items: start; }
.grid-align-end { display: grid; justify-items: end; }
.grid-align-center { display: grid; justify-items: center; }
.grid-align-stretch { display: grid; justify-items: stretch; }
.grid-row-start { grid-row-start: 1; }
.grid-row-end { grid-row-end: 2; }
.grid-col-start { grid-column-start: 1; }
.grid-col-end { grid-column-end: 2; }
.grid-template-rows-2 { grid-template-rows: repeat(2, 1fr); }
.grid-template-rows-3 { grid-template-rows: repeat(3, 1fr); }
.grid-template-columns-2 { grid-template-columns: repeat(2, 1fr); }
.grid-template-columns-3 { grid-template-columns: repeat(3, 1fr); }

/* Flex */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.gap-0 { gap: 0; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }

/* Cursor Utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }
/* PrismLib Grid System */
/* Table Styling */
.table-utility {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 16px;
  background-color: #fff;
}

.table-utility th,
.table-utility td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #ddd;
}

.table-utility th {
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
}

.table-utility tr:nth-child(even) {
  background-color: #f9f9f9;
}

.table-utility tr:hover {
  background-color: #f1f1f1;
}