@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
body {
  margin: 0;
  /* font-family: 'Khula', sans-serif; */
  font-family: "Inter", sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--background);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

@font-face {
  font-family: "Ezra";
  src: url(/static/media/Ezra-Light.e3ad7c426c76fb4b01de.otf) format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Ezra";
  src: url(/static/media/Ezra-Regular.ece47cc1ae6a5e3fd2cf.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Ezra";
  src: url(/static/media/Ezra-Medium.3af9731a827369787d11.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Ezra";
  src: url(/static/media/Ezra-SemiBold.96eb3473ab6d2ff6f653.otf) format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Ezra";
  src: url(/static/media/Ezra-Bold.794b9107c3199f0c320c.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Ezra";
  src: url(/static/media/Ezra-ExtraBold.f2ced0a28364b299a32c.otf) format("opentype");
  font-weight: 800;
  font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
  /*   max-width: 100%; */
  font-family: "Inter", sans-serif;
}

div[style*="display: flex"] {
  flex-wrap: wrap; /* Allow wrapping if needed */
  /*  width: 100%; */
  max-width: 100%;
}

/* Input groups and wrappers */
.input-group,
.input-wrapper,
input {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* Prevent table cell content from overflowing */
td,
th {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Wide columns for title/name/description/suit-number content */
.col-title {
  min-width: 170px;
}

td.col-title {
  min-width: 200px;
}

/* Medium columns for dates, types, statuses, short-phrase content */
.col-medium {
  /* min-width: 150px; */
}

td.col-medium {
  /* min-width: 150px; */
}

/* ID / serial number columns */
.col-id {
  min-width: 150px;
  width: 150px;
}

td.col-id {
  min-width: 150px;
  width: 150px;
}

/* Action columns — enough room for one or two buttons */
.col-action {
   min-width: 100px; 
}

td.col-action {
   min-width: 100px; 
}

:root {
  --primary: #5ca9fb; /* Facebook blue */
  --primary_80: #5ca9fb95; /* Facebook blue */
  --secondary: #385898; /* Darker Facebook blue */
  --background: #fff; /*f0f2f5 Light gray Facebook background */
  --text: #050505; /* Main text color */
  --bold_text: #000000;
  --faint_select: rgba(24, 119, 242, 0.1); /* Light blue highlight */
  --flow_background: #e4e6eb;
  --success: #42b72a; /* Facebook green for confirmation */
  --success_80: #42b72a95;
  --fade_background: #e9ebee;
  --input-border: #ccd0d5;
  --warning: #fa3e3e; /* Red alert-like */
  --faint_background: rgba(0, 0, 0, 0.2);
  --comment_footer: #f7f8fa;
  --orange: #f7b928;
  --border_color: #dcdfe3;
  --login_color: #1877f2; /* Align login to main FB blue */
  --view_doc: #1877f2;
  --border: rgba(24, 119, 242, 0.2);
  --darker-primary: #3274bb;
  --homeview: #e7f3ff;
  --homeview_line: #d0e3ff;
  --required: red;
  --img-path: "/asset/others/";
  --windowcolor: rgba(173, 176, 182, 1);
}
[data-theme="dark"] {
  --primary: #90caf9;
  --secondary: #f48fb1;
  --background: #121212;
  --text: #eee;
  --bold_text: rgb(252, 251, 251);
  --faint_select: rgba(179, 12, 15, 0.2);
  --flow_background: rgba(85, 86, 89, 1);
  --success: rgba(12, 129, 29, 1);
  --fade_background: #272626;
  --input-border: #517ead;
  --warning: #ff4081;
  --faint_background: rgba(0, 0, 0, 0.2);
  --comment_footer: #f8f275;
  --orange: #ffa500;
  --border_color: #ccc;
  --login_color: #d19b19;
  --view_doc: #4478ff;
  --border: rgba(194, 17, 38, 0.47);
  --homeview: #9b6e26c7;
  --homeview_line: #684206de;
  --required: red;
  --img-path: "/asset/others/";
  --windowcolor: rgba(173, 176, 182, 1);
}

.homeside {
  width: 250px;
}
.success-box {
  font-size: 12px;
  font-weight: bold;
  background: none repeat scroll 0 0 #c0ddba;
  border: 2px solid #93a793;
  color: #07461a;
  padding: 10px;
  margin-bottom: 10px;
}

.error {
  font-size: 12px;
  font-weight: bold;
  background: none repeat scroll 0 0 #fbe3e4;
  border: 2px solid #fbc2c4;
  color: #8a1f11;
  padding: 10px;
  margin-bottom: 10px;
}
.multiform,
.regform {
  position: relative;
  flex-direction: column;
  display: flex;
  gap: 8px;
}
/* .multiform::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px; 
  background-image: url("./assets/logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1; 
  pointer-events: none; 
  z-index: 0;
} */
.file-upload-wrapper {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.btn-preview {
  background-color: rgb(253, 253, 253);
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 14px;
  border: 1px solid rgb(99, 96, 96);
}
.multiform .flow,
.regform .flow {
  display: flex;
  /* justify-content: center; */
  /* margin: 16px; */
  color: #fff;
  color: var(--background);
}

.multiform .flow .itemgroup,
.regform .flow .itemgroup {
  display: flex;
  gap: 0px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.multiform .flow .item,
.regform .flow .item {
  position: relative;
  /* padding: 8px 20px 8px 45px; */
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.multiform .flow .item2,
.regform .flow .item2 {
  position: relative;
  padding: 8px 20px 8px 45px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: rgba(173, 176, 182, 1);
}

.multiform .flow .item.active,
.regform .flow .item.active {
  background: #5ca9fb95;
  background: var(--primary_80, #007bff);
}
.multiform .flow .item.checked,
.regform .flow .item.checked {
  background: #42b72a95;
  background: var(--success_80, #007bff);
  font-weight: bold;
}
.multiform .flow .item.inactive,
.regform .flow .item.inactive {
  background-color: #55565995;
  color: #fff;
}

.multiform .flow .item .label,
.regform .flow .item .label {
  margin-left: 8px;
}

.multiform .flow .item .circle,
.regform .flow .item .circle {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #fff;
  background-color: var(--background);
  border-radius: 50%;
  border: 1px solid #5ca9fb;
  border: 1px solid var(--primary);
  color: #5ca9fb;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.multiform .flow .item.checked .circle,
.regform .flow .item.checked .circle {
  border: 1px solid #42b72a;
  border: 1px solid var(--success, #007bff);
  color: #42b72a;
  color: var(--success, #007bff);
}

.multiform .flow .item.inactive .circle,
.regform .flow .item.inactive .circle {
  border: 1px solid #555659;
  color: #555659;
}

.circle-only {
  width: 24px;
  height: 24px;
  background-color: rgba(173, 176, 182, 1);
  background-color: var(--windowcolor);
  border-radius: 50%;

  color: #5ca9fb;

  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;

  margin-bottom: 4px;
}

.bighead {
  display: flex;
  flex-direction: column;
}

.multiform .view {
  /* margin: auto; */
  width: 100%;
}
.multiform .view::before {
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border: 2px solid var(--background);
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner2 {
  width: 18px;
  height: 18px;
  border: 2px solid #5ca9fb;
  border: 2px solid var(--primary);
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.multiform .flowbuttongroup {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.multiform .flowbotton {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
}
.multiform .flowerror {
  color: #fa3e3e;
  color: var(--warning);
  font-size: 14px;
  font-weight: bold;
}

.delete {
  cursor: pointer;
}

/** This is for  */

.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  flex: 1 1;
  padding-left: 8px;
  padding-right: 8px;
}

.input-group label {
  font-weight: 400;
  margin-bottom: 4px;
  color: #282828;
  font-size: 12px;
}

.input-group .required {
  color: red;
  color: var(--required);
  margin-left: 4px;
}

.input-wrapper input::placeholder {
  color: #adb0b6;
}

.input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #c8cace;
  border-radius: 8px;
  padding: 14px 20px;
  transition: border-color 0.3s;
}

.input-wrapper:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.input-wrapper.invalid {
  border-color: red;
  border-color: var(--required);
}

.input-wrapper input,
.input-wrapper textarea {
  flex: 1 1;
  /* padding: 10px; */
  border: none;
  font-size: 16px;
  outline: none;
  background: transparent;
  color: #050505;
  color: var(--text);
}

.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5ca9fb;
  color: var(--primary);
}

.input-icon.front {
  margin-right: 8px;
}

.input-icon.back {
  margin-left: 8px;
}

.error-msg {
  color: red;
  color: var(--required);
  font-size: 14px;
  margin-top: 4px;
}
.success-msg {
  color: #42b72a;
  color: var(--success);
  font-size: 14px;
  margin-top: 4px;
}

/** end of input**/

/** start of select **/
.select-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  flex: 1 1;
  padding-left: 8px;
  padding-right: 8px;
}

.select-group label {
  font-weight: 400;
  margin-bottom: 4px;
  color: #000000;
  color: var(--bold_text);
  font-size: 12px;
}

.button-spread {
  display: flex;
  margin-top: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.select-group .required {
  color: red;
  color: var(--required);
  margin-left: 4px;
}

.select-group select {
  padding: 14px 20px;
  font-size: 14px;
  border: 1px solid #ccd0d5;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  /* background-color: var(--background); */
  color: #050505;
  color: var(--text);
  outline: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill=%27%23777%27 height=%2720%27 viewBox=%270 0 24 24%27 width=%2720%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M7 10l5 5 5-5z%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.select-group select:focus-within {
  border-color: #1877f2;
  border-color: var(--view_doc);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Multi-select dropdown focus styles */
.multi-select-dropdown .dropdown-header:focus,
.multi-select-dropdown .dropdown-header:focus-within {
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
  outline: none;
}

/* Make the dropdown header focusable */
.multi-select-dropdown .dropdown-header {
  outline: none;
}

.select-group select.invalid {
  border-color: red;
  border-color: var(--required);
  background-color: #fff;
  background-color: var(--background);
}

.select-group .error-msg {
  margin-top: 4px;
  font-size: 12px;
  color: red;
  color: var(--required);
}

/** end of select **/

.tiled-image {
  width: 100%; /* or a fixed width if needed */
  height: 200px; /* or any height you want for the container */
  background-image: url(/static/media/bar.43b7c49042c2d97d7f32.jpg);
  background-repeat: repeat;
  background-size: auto 200px; /* auto width, 200px height */
}

.dialog-box {
  min-height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.2);
  background-color: var(--faint_background);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 500ms ease-in-out;
}
.dialog-box .wrapper {
  width: 90%;
  max-width: 450px;
  background-color: #fff;
  background-color: var(--background);
  padding: 16px;
  border-radius: 15px;
  text-align: center;
}

.preview {
  width: 45%;
  background-color: #fff;
  background-color: var(--background);
  position: fixed;
  right: -1000px;
  top: 0;
  height: 100vh;
  padding: 24px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.preview.open {
  right: 0;
  opacity: 1;
}

.preview.open::before {
  content: "";
  height: 100vh;
  width: 55%;
  background-color: rgba(0, 0, 0, 0.2);
  background-color: var(--faint_background);
  position: fixed;
  left: 0;
  top: 0;
}

.preview .heading {
  color: #000000;
  color: var(--bold_text);
}

.preview .heading p {
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .preview {
    width: 100%;
    right: -100%;
    padding: 16px;
    overflow-y: auto;
  }
  .preview.open::before {
    display: none;
  }
}

.btn-upload {
  display: flex;
  justify-content: center;
}
.btn-upload input {
  display: none;
}

.btn-upload label {
  padding: 4px 8px;
  color: #fff;
  color: var(--background);
  border-radius: 5px;
  border: 2.5px solid rgba(0, 0, 0, 0.2);
  border: 2.5px solid var(--faint_background);
  background: #000000;
  background: var(--bold_text);
  box-shadow:
    -4px -4px 10px 0px #050505 inset,
    4px 4px 10px 0px #050505 inset;
  box-shadow:
    -4px -4px 10px 0px var(--text) inset,
    4px 4px 10px 0px var(--text) inset;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.table-div {
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid #1877f2;
  border: 1px solid var(--view_doc);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px var(--faint_background);
}
.table-div table {
  width: 100%;
  border-collapse: collapse;
}

.table-div table thead {
  background-color: #fff;
  background-color: var(--background);
}

.table {
  /* font-family: "Ezra", sans-serif; */
  font-family: "Inter", sans-serif;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hos_clear_option_modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.374);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hos_clear_option_modal .hos_modal {
  background-color: #ffffff;
  border-radius: 16px 16px 0px 0px;
}
.hos_clear_option_modal .hos_modal .modal_header {
  background-color: #5ca9fb;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  color: white;
  border-radius: 16px 16px 0px 0px;
  font-weight: 600;
}
.hos_clear_option_modal .hos_modal .content_wrapper {
  padding: 20px;
}
.hos_clear_option_modal .hos_modal .button_wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}
.hos_clear_option_modal .hos_modal .button_wrapper button {
  padding: 8px 18px;
  border: 1px solid rgba(0, 0, 0, 0.289);
  border-radius: 8px;
  flex-grow: 1;
}
.hos_clear_option_modal .hos_modal .button_wrapper button.active {
  background-color: #5ca9fb;
  color: white;
  border: 0;
}
.section-cases {
  background-color: #5ca9fb;
  background-color: var(--primary);
  color: #fff;
  color: var(--background);
  padding: 1rem 0.625rem;
  font-weight: bold;
  font-size: 16px;
  /* font-family: "Ezra", sans-serif; */
  font-family: "Inter", sans-serif;

  /* border-top-left-radius: 5px;
  border-top-right-radius: 5px; */

  margin-bottom: 0;
  display: flex;
}
.table .specialaction {
  cursor: pointer;
}
.table .section-cases-report {
  background-color: #5ca9fb;
  background-color: var(--primary);
  color: #fff;
  color: var(--background);
  padding: 10px 20px;
  font-weight: bold;
  font-size: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-top: 30px;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
}

.table .section-cases .total {
  min-width: 20px;
  padding: 2px;
  height: 20px;
  background-color: #5ca9fb;
  background-color: var(--primary);
  border-radius: 50%;
  border: 1px solid #fff;
  border: 1px solid var(--background);
  color: #5ca9fb;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  color: var(--background);
  margin-left: 20px;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table .case-table {
  width: 100%;
  border-collapse: collapse;
  /* font-family: "Ezra", sans-serif; */
  font-family: "Inter", sans-serif;
  margin-top: 0;
  /* min-width: 1440px; */
}

.table .case-table .active {
  background: rgba(24, 119, 242, 0.1);
  background: var(--faint_select);
  border: 2px solid #5ca9fb;
  border: 2px solid var(--primary);
  color: #000;
}

.table .case-table thead {
  background: #fff;
  background: var(--background);
  border: 2px solid #5ca9fb;
  border: 2px solid var(--primary);
  color: #000000;
  color: var(--bold_text);
}

.table .case-table th {
  font-weight: 500;
  font-size: 16px;
  white-space: normal;
  border: 1px solid #5ca9fb;
  border: 1px solid var(--primary);
  padding: 0.5rem 0.25rem;
}

.case-table tbody {
  color: #282828;
  /* font-family: "Ezra", sans-serif; */
  font-family: "Inter", sans-serif;
}
.case-table td {
  border: 1px solid rgba(173, 176, 182, 1);
  border: 1px solid var(--windowcolor);
  text-align: center;
  font-size: 14px;
  padding: 0.5rem 0.25rem;
}

.table .case-table .jis-button.plain {
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  color: #5ca9fb;
}
.tab-export-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Schedule_new_case_modal_wrapper {
  position: fixed;
  inset: 0;
  background-color: #504e4e76;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 24px;
}
.schedule-form-wrapper,
.process-sheriff-modal {
  background-color: white;
  width: 100%;
  max-width: 660px;
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-position: center;
  background-size: 60%;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 16px 16px 0px 0px;
  overflow: hidden;
}
.schedule-form-wrapper::before {
  content: " ";
  position: absolute;
  inset: 0;
  background-color: rgba(250, 248, 248, 0.765);
}
.schedule-form {
  position: relative;
}
.schedule-form-header {
  background-color: #5ca9fb;
  display: flex;
  padding: 11px 17px;
  justify-content: space-between;
  border-radius: 16px 16px 0px 0px;
  color: white;
  font-size: 24px;
  font-weight: 500;
}
.schedule-input-btn-wrapper {
  padding: 50px 30px;
  flex-direction: column;
  display: flex;
  gap: 36px;
}
.schedule-input-wrapper {
  flex-direction: column;
  display: flex;
  gap: 24px;
}
.schedule-input-wrapper div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.schedule-input-wrapper div label {
  font-size: 12px;
  color: #282828;
}
.schedule-input-wrapper div input {
  padding: 14px;
  border: 1px solid #c8cace;
  border-radius: 8px;
  background-color: white;
  color: #2f2f30;
  font-size: 14px;
}
.schedule-input-wrapper div input::placeholder {
  color: #c8cace;
  font-size: 14px;
}
.PayerIdModal {
  position: absolute;
  inset: 0;
  background-color: #a2a0a079;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PayerIdModal div {
  background-color: #ffffff;
  padding: 18px 20px;
  border-radius: 20px;
  flex-direction: column;
  display: flex;
}
.PayerIdModal div .title {
  padding-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
}
.PayerIdModal div .description {
  font-size: 15px;
}
.PayerIdModal div a {
  background-color: rgba(28, 28, 231, 0.731);
  padding: 8px 18px;
  color: #ffffff;
  width: -webkit-fit-content;
  width: fit-content;
  border-radius: 12px;
}
.PayerIdModal div p {
  text-align: center;
  text-transform: capitalize;
}
.button-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.executionSheriff-form-wrapper {
  background-color: white;
  width: 100%;
  max-width: 660px;
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 16px 16px 0px 0px;
  overflow: hidden;
  padding: 32px 30px;
}
.executionSheriff-form-wrapper::before {
  content: " ";
  position: absolute;
  inset: 0;
  background-color: rgba(250, 248, 248, 0.765);
}
.executionSheriff-form {
  position: relative;
}
.executionSheriff-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 23px;
}
.executionSheriff-form select {
  background-color: white;
}
.executionSheriff-form textarea {
  height: 120px;
  resize: none;
  background-color: white;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #c8cace;
}
.executionSheriff-input-wrapper {
  flex-direction: column;
  display: flex;
}
.sale-container {
  flex-direction: column;
  display: flex;
  gap: 12px;
}
.sale-container .sale-schedule-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sale-container .notice-time-date-wrapper {
  display: flex !important;
  flex-direction: row !important;
  width: 100%;
  gap: 16px !important;
}
.sale-container .notice-time-date-wrapper .dt-input-wrapper {
  flex-grow: 1 !important;
  padding: 0;
}
.sale-location-wrapper {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.sale-location-wrapper label {
  font-size: 12px;
  color: #282828;
}
.sale-location-wrapper input {
  padding: 8px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  outline: none;
  background-color: white;
  color: #0a0a0a;
  font-size: 14px;
}
.attaches-good-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sale-form-container {
  display: flex;
  gap: 23px;
  flex-direction: column;
}
.attaches-good-wrapper label {
  font-size: 12px;
  color: #282828;
}
.attaches-good-wrapper textarea {
  height: 100px;
  border: 1px solid #d4d4d4;
  resize: none;
  background-color: white;
  padding: 8px 12px;
  color: #0a0a0a80;
  border-radius: 4px;
}
.auction-checkbox-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 12px;
}
.attaches-good-wrapper textarea::placeholder {
  color: #0a0a0a80;
}
.auction-checkbox-wrapper label {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 12px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.auction-checkbox-wrapper label input {
  position: absolute;
  inset: 0;
  -webkit-appearance: none;
          appearance: none;
  border: 1px solid #c8cace;
  border-radius: 12px;
}
.auction-checkbox-wrapper label input:checked {
  border: 1px solid #5ca9fb;
}
.auction-checkbox-wrapper .checkbox-title {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  text-align: center;

  color: #282828;
}
.checkbox-description {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;

  color: #737373;
}
.commission-summary-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.internal-payment-wrapper {
  padding-block: 12px;
  font-size: 14px;
  color: #282828;
  font-weight: 500;
  border-block: 1px solid #e5e5e5;
}
.commission-summary-wrapper {
  padding-block: 8px;
  border-block: 1px solid #e5e5e5;
}
.commission-summary-title {
  color: #282828;
  font-weight: 600;
}
.commission-summary-description {
  color: #737373;
}
.commission-summary-amount {
  color: #282828;
  font-size: 14px;
  font-weight: 600;
}
.total-process-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-block: 10px;
  border-block: 1px solid #e5e5e5;
  font-size: 16px;
  font-weight: 600;
  color: #282828;
  align-items: center;
}
.movement-wrapper {
  flex-direction: column;
  display: flex;
  align-items: end;
}
@media (max-width: 768px) {
  .tab-export-wrapper {
    flex-direction: column;
    gap: 16px;
    align-items: start;
  }
  .table .case-table th {
    font-size: 12px;
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  }

  .case-table td {
    font-size: 12px;
    padding: 0.5rem 0.25rem;
  }

  .table .case-table .jis-button.plain {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .table .case-table th {
    font-size: 10px;
    padding: 0.25rem;
  }

  .case-table td {
    font-size: 10px;
    padding: 0.25rem;
  }

  .table .case-table .jis-button.plain {
    font-size: 10px;
  }
}

.table .case-table .jis-button.plain:hover {
  color: #5ca9fbb7;
}

.table .case-table th,
.case-table td {
  padding: 1rem 0.625rem;
}

/* .table .case-table tbody tr {
  background-color: var(--background);
  border: 1px solid var(--primary_80);
} */

.table .case-table img.icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.table .update-btn {
  background-color: #5ca9fb;
  background-color: var(--primary);
  color: #fff;
  color: var(--background);
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
}

.table .update-btn:hover {
  background-color: #5ca9fb;
  background-color: var(--primary);
}

.buttongroup {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.divider-line {
  border: none;
  height: 1px;
  background-color: #5ca9fb;
  background-color: var(--primary);
  margin: 10px 0 15px 0;
}

.note {
  color: #385898;
  color: var(--secondary);
}
.action_text {
  cursor: pointer;
  font-weight: bold;
  color: #385898;
  color: var(--secondary);
}

.labeltext {
  display: flex;
  justify-content: space-between;
}
.labeltext :first-child {
  font-weight: 700;
}

.panel {
  margin: 8px;
  border-radius: 10px;
  border-color: #5ca9fb;
  border-color: var(--primary);
  border-width: 1px;
  border-style: dotted;
}
.panel::before {
  content: "";
  position: absolute;
  top: 40px; /* adjust vertical position */
  left: 50%;
  transform: translateX(-50%);
  width: 700px; /* logo width */
  height: 700px; /* logo height */
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1; /* subtle behind effect */
  pointer-events: none; /* click-through */
  z-index: 0;
}

.panel .title {
  background-color: #5ca9fb;
  background-color: var(--primary);
  color: #fff;
  color: var(--background);
  padding: 10px 20px;
  font-weight: bold;
  font-size: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  margin-bottom: 0;
}
.panel .panel-body {
  padding: 16px;
}
.panel .panel-btn {
  text-align: center;
}

.pagenate {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  border-color: #5ca9fb;
  border-color: var(--primary);
  border-width: 1px;
  border-style: dotted;
  margin-top: 16px;
  margin-bottom: 16px;
}

.pagenate div {
  color: #000000;
  color: var(--bold_text);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
}
.pagenate div.active {
  background-color: #5ca9fb;
  background-color: var(--primary);
  color: #fff;
  color: var(--background);
}

.pagenate div:hover:not(.active) {
  background-color: #ddd;
}

.content-box {
  border-radius: 10px;
  border-color: #5ca9fb;
  border-color: var(--primary);
  border-width: 1px;
  border-style: dotted;
  margin-top: 16px;
  margin-bottom: 16px;
  max-height: 500px;
  scroll-behavior: auto;
  overflow-y: auto;
}

.button-group {
  display: flex;

  margin: 5px;
}

.button-group p {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 600;
}
.button-group .choice {
  padding: 8px 16px;
  margin-right: 10px;
  border: 1px solid #5ca9fb;
  border: 1px solid var(--primary);
  background-color: #fff;
  background-color: var(--background);
  border-radius: 5px;
  color: #000000;
  color: var(--bold_text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-group .choice.active {
  background-color: #5ca9fb;
  background-color: var(--primary);
  color: #fff;
  color: var(--background);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.label-value {
  display: flex;
  flex: 1 1;
}

.label-value .label {
  font-weight: bold;
  width: 150px;
}
.label-value .value {
  flex: 1 1;
}
.general-space {
  display: flex;
  justify-content: space-between;
  font-size: small;
}
.general-space span {
  border: 1px solid rgba(24, 119, 242, 0.1);
  border: 1px solid var(--faint_select);
  background-color: #fff;
  background-color: var(--background);
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.maxheight {
  max-height: 600px;
  scroll-behavior: auto;
  overflow-y: auto;
}

.tap-copy {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #a2a4ac;
}

.box-details {
  display: flex;
  background-color: #5ca9fb;
  background-color: var(--primary);
  min-width: 100px;
  color: white;
  width: 30%;
  margin: 8px;
  padding: 16px;
  border-radius: 5px;
  cursor: pointer;
  flex: 1 1;
}
.box-details-inverse {
  display: flex;
  min-width: 100px;
  width: 30%;
  margin: 8px;
  padding: 16px;
  border: 1px solid rgba(24, 119, 242, 0.1);
  border: 1px solid var(--faint_select);
  border-radius: 5px;
  cursor: pointer;
  flex: 1 1;
}
.affidavit-action-wrapper {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.create-affidavit-button {
  background-color: #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  flex-direction: column;
  display: flex;
  flex: 1 1;
  gap: 10px;
  color: white;
}
.update-affidavit-button {
  border: 1px solid #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  flex-direction: column;
  display: flex;
  flex: 1 1;
  gap: 10px;
  color: #5ca9fb;
}
.update-affidavit-button-sub-title {
  font-size: 16px;
  font-weight: 500;
}
.update-affidavit-button-sub-text {
  font-size: 14px;
}
.htmlwrap {
  width: 100%; /* or max-width */
  /* border: 1px solid #000 */
  padding: 8px;
}
.htmlwrap p {
  white-space: normal; /* allow wrapping */
  word-wrap: break-word; /* break long words if needed */
  overflow-wrap: break-word; /* modern syntax */
}

.all-circle {
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #fff;
  background-color: var(--background);
  border-radius: 50%;
  border: 1px solid #5ca9fb;
  border: 1px solid var(--primary);
  color: #5ca9fb;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}
.all-circle {
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #fff;
  background-color: var(--background);
  border-radius: 50%;
  border: 1px solid #5ca9fb;
  border: 1px solid var(--primary);
  color: #5ca9fb;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.icon-box {
  color: #5ca9fb;
  color: var(--primary);
  transition: color 0.3s;
  background-color: #fff;
  background-color: var(--background);
  padding: 3px;
  margin: 2px;
  border-radius: 2px;
}
.icon-box-warning {
  color: #fa3e3e;
  color: var(--warning);
  transition: color 0.3s;
  background-color: #fff;
  background-color: var(--background);
  padding: 3px;
  margin: 2px;
  border-radius: 2px;
}
.footer {
  background-image: url(/static/media/vector.afaec69eff242269c41c.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 3rem 5%;
  /* font-family: "Segoe UI", sans-serif; */
  font-family: "Inter", sans-serif;

  border-radius: 30px 30px 0 0;
}
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}
.landing .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-top: 2rem;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important; /* hide elements */
  }

  .print-only {
    display: block !important; /* show only in print */
  }

  /* Force page breaks before/after elements */
  .page-break {
    page-break-before: always; /* or page-break-after */
  }
}

.schedule-zoom {
  display: flex;
  gap: 10px;
  justify-content: center;
  cursor: pointer;
}
.groupbtn {
  display: flex;
  justify-content: center;
  justify-items: center;
  gap: 10px;
  width: 100%;
}
.exportdiv {
  display: flex;
  justify-content: end;
  gap: 10px;
}
.bulk_assignment_form_wrapper {
  max-width: 654px;
  display: flex;
  gap: 48px;
}
.form_right_content {
  min-width: 376px;
}
.bulk_comment_textarea {
  border: 1px solid #c8cace;
  padding: 14px;
  border-radius: 8px;
  min-height: 120px;
  max-height: 120px;
  width: 100%;
  resize: none;
}
.case-location-wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
}
.case_location_label {
  font-size: 14px;
  font-weight: 500;
  color: #282828;
  padding: 24px 16px;
  flex: 1 1;
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
}
.case_location_label .title {
  font-size: 16px;
  font-weight: 500;
  color: #282828;
  line-height: 22px;
}
.case_location_label .description {
  font-size: 12px;
  font-weight: 400;
  color: #282828;
  list-style: 22px;
}

.case_location_label input {
  -webkit-appearance: none;
          appearance: none;
  position: absolute;
  inset: 0;
  border: 1px solid #c8cace;
  border-radius: 8px;
}
.case_location_label input:checked {
  border: 1px solid #5ca9fb;
}
.bulk_assign_btn {
  background-color: #5ca9fb;
  padding-block: 16px;
  padding-inline: 10px;
  border-radius: 8px;
  height: 42px;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  width: 224px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}
.bulk_cancel_btn {
  border: 1px solid #5ca9fb;
  padding-block: 16px;
  padding-inline: 10px;
  border-radius: 8px;
  height: 42px;
  font-weight: 500;
  font-size: 14px;
  color: #5ca9fb;
  width: 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.selected_cases_wrapper {
  flex-direction: column;
  display: flex;
  gap: 16px;
  overflow-y: scroll;
  height: 100%;
}
.selected_case_card {
  padding: 16px 8px;
  border: 1px solid #c8cace;
  border-radius: 8px;
  display: flex;
  gap: 14px;
  width: 100%;
  flex-direction: column;
}
.selected_case_card p {
  color: #000000;
  font-weight: 500;
  line-height: 20px;
}
.predefined_comment_wrapper {
  padding: 16px;
  max-height: 350px;
  overflow-y: scroll;
  display: flex;
  width: 100%;
  max-width: 803px;
  flex-wrap: wrap;
  gap: 16px;
}
.reason_placeholder {
  color: #282828;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
}
.predefined_checkbox_wrapper {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 16px;
  border-radius: 32px;
  gap: 8px;
  height: 45px;
  border: 1px solid #c8cace;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
#documentSelect {
  -webkit-appearance: none;
          appearance: none;
  outline: none;
  padding: 14px;
  border: 1px solid #c8cace;
  border-radius: 8px;
  height: 52px;
  max-width: 366px;
  position: relative;
}
#documentSelect::after {
  content: "^";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.predefined_checkbox_wrapper p {
  font-size: 12px;
  font-weight: 400;
  color: #282828;
  position: inherit;
}
.predefined_checkbox_wrapper input {
  position: absolute;
  inset: 0;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 32px;
  border: 1px solid transparent;
  transition: all ease-in-out 0.3s;
}
.predefined_checkbox_wrapper input:checked {
  border: 1px solid #007bff;
}
.predefinedComments_textarea {
  width: 100%;
  max-height: 120px;
  height: 120px;
  border: 1px solid #c8cace;
  resize: none;
  border-radius: 8px;
  padding: 14px;
}
.add_btn_combo {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #5ca9fb;
  background-color: #ffffff;
}
@media (max-width: 600px) {
  .affidavit-action-wrapper {
    flex-direction: column;
    gap: 16px;
  }
  .bulk_assignment_form_wrapper {
    flex-direction: column-reverse;
    margin-bottom: 30px;
  }
}

.case-association-table {
  margin-top: 27px;
}

.affidavits_tab_section {
  margin-top: 24px;
  margin-bottom: 24px;
}

.btn-solid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
  min-height: 50px;

  background: #5ca9fb;
  border-radius: 16px;

  /* font-family: "Ezra"; */
  font-family: "Inter", sans-serif;

  font-weight: 600;
  font-size: 16px;
  line-height: 18px;

  color: #ffffff;
}

.custom-tab-container {
  margin-top: 18px;
  margin-bottom: 18px;
}

.case-assignment-tab-container {
  margin-top: 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.re-route_btn_wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: end;
  gap: 10px;
  margin-top: 26px;
  cursor: pointer;
  width: 100%;
}
.schedule_btn_wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: end;
  gap: 10px;
  margin-top: 26px;
  cursor: pointer;
  width: 100%;
}
.re-route_btn_wrapper button:nth-child(2) {
  background-color: #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
}
.re-route_btn_wrapper button:nth-child(1) {
  border: 1px solid #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  color: #5ca9fb;
  font-weight: 500;
  font-size: 16px;
}
.schedule_btn_wrapper button:nth-child(2) {
  background-color: #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  max-width: 224px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
}
.schedule_btn_wrapper button:nth-child(1) {
  border: 1px solid #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  max-width: 132px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  color: #5ca9fb;
  font-weight: 500;
  font-size: 14px;
}
.assign-case-button-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  cursor: pointer;
  width: 100%;
}
.assign-case-button-group button:nth-child(2),
.process-sheriff-modal-button {
  background-color: #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
}

.assign-case-button-group button:nth-child(1) {
  border: 1px solid #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  color: #5ca9fb;
  font-weight: 500;
  font-size: 14px;
}
.case-assignment-btn-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.service_sheriff_wrapper {
  position: fixed;
  z-index: 50;
  background-color: rgba(110, 110, 110, 0.29);
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service_sheriff_bg_image {
  background-color: #ffffff;
  padding: 28px;
  border-radius: 8px;
  position: relative;
}
.service_sheriff_bg_image::before {
  position: absolute;
  content: " ";
  inset: 0;
  opacity: 0.2;
  background-image: url(/static/media/logojudiciary.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
  display: block;
}
.service_sheriff_modal {
  position: relative;
  z-index: 50;
}
.service_sheriff_modal .header {
  font-size: 20px;
  font-weight: 600;
}
.service_sheriff_modal textarea,
.service_sheriff_modal select,
.service_sheriff_modal input {
  background-color: white !important;
}
.service_sheriff_modal input {
  padding: 14px !important;
  border: 1px solid #c8cace;
  border-radius: 8px;
}
.case-assignment-btn-solid,
.case-assignment-btn-outline,
.select-lga-outline {
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  padding: 16px 18px;
  min-height: 50px;
}
.litigation_form_wrapper {
  margin-inline: 36px;
  margin-bottom: 32px;
}

.litigation_form_header {
  font-size: 16px;
  font-weight: 400;
  color: #282828;
  margin-block: 16px;
}
.litigation_form_header span {
  font-weight: 600;
}
.litigation_dialog_wrapper {
  position: fixed;
  inset: 0;
  background-color: #0d0d0d87;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.litigation_dialog_container {
  background-color: #ffffff;
  width: 90%;
  max-width: 800px;
  border-radius: 16px 16px 0px 0px;
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% auto;
  position: relative;
  max-height: 98vh;
  display: flex;
  flex-direction: column;
}
.screener_litigation_dialog_wrapper .litigation_dialog_container {
  background-size: 30% auto;
}

.dialog_content {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
}
.litigation_dialog_container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f7f7aa;
  border-radius: 16px 16px 0px 0px;
  z-index: 1;
}
.dialog_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #5ca9fb;
  border-radius: 16px 16px 0 0;
  color: #ffffff;
  position: relative;
  z-index: 10;
}
.dialog_header p {
  font-weight: 500;
  font-size: 24px;
}
.litigation_dialog_container form {
  width: 100%;
  margin: 16px auto;
  padding-bottom: 32px;
  position: relative;
  z-index: 10;
  padding-inline: 36px;
}
.litigation_dialog_container form select,
.litigation_dialog_container form textarea,
.litigation_dialog_container form input {
  background-color: #ffffff !important;
}
.case-assignment-btn-solid {
  background: linear-gradient(0deg, #5ca9fb, #5ca9fb), #ffffff;

  color: #ffffff;
}

.case-assignment-btn-outline {
  /* padding: 12px 16px; */
  /* height: 42px; */

  border: 1px solid #5ca9fb;

  color: #5ca9fb;
}
@media (max-width: 1024px) {
  .litigation_form_wrapper {
    margin-inline: 32px;
  }
}

@media (max-width: 768px) {
  .btn-solid {
    padding: 8px;
    min-height: 44px;
    font-size: 14px;
    line-height: 16px;
    border-radius: 12px;
  }
  .case-assignment-tab-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .litigation_form_wrapper {
    margin-inline: 16px;
  }
  .case-assignment-btn-container {
    align-items: flex-start;
    flex-direction: column;
  }
}

.related-case-table-modal .dialog-wrapper--open {
  padding: 20px;
}
.related-case-table-modal .dialog-container {
  border-radius: 0;
  background-image: none;
  max-width: 1406px !important;
}

.related-case-table-modal .dialog-header {
  display: none;
}

.related-case-table-modal .dialog-body {
  padding: 0;
}

.related-case-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px;
  gap: 10px;

  min-height: 56px;
  background: #5ca9fb;
  border-bottom: 1px solid #ffffff;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #ffffff;
  cursor: pointer;
}

.related-case-table-header svg {
  transition: transform 0.3s ease;
}

.related-case-table-header.expanded svg {
  transform: rotate(180deg);
}

.related-case-modal-btn-outline {
  padding: 16px 10px;
  min-width: 165px;
  min-height: 50px;
  border: 1px solid #5ca9fb;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #5ca9fb;
  cursor: pointer;
}

.related-case-modal-btn-solid {
  padding: 16px 10px;
  min-width: 165px;
  min-height: 50px;
  background: #5ca9fb;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}

.related-case-modal-footer {
  background-color: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  padding: 24px 86px 22px 86px;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}
.related-case-modal-btn-container {
  display: flex;
  gap: 14px;
}
.schedule_case_form_wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0d0d0d87;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schedule_case_form {
  background-color: #ffffff;
  border-radius: 16px;
  position: relative;
  max-width: 660px;
  width: 90%;
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.form-container {
  background-color: #ffffffae;
  border-radius: 16px;
}
.form-container .input-wrapper,
.form-container .bulk_comment_textarea {
  background-color: #ffffff !important;
}
.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background-color: #5ca9fb;
  border-radius: 16px 16px 0 0;
  color: #ffffff;
}
.form-header p {
  font-weight: 600;
  font-size: 20px;
}
.form-header .close_btn {
  cursor: pointer;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}
.form-panel {
  padding: 16px 32px 50px 32px;
}
.selected_case {
  border: 1px solid #c8cace;
  padding: 16px 8px;
  border-radius: 8px;
  display: flex;
  gap: 14px;
  width: 100%;
  flex-direction: column;
  font-weight: 500;
}
.modal-warning {
  position: fixed;
  inset: 0;
  background-color: #0d0d0d87;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-warning .warning-container {
  background-color: #ffffff;
  padding: 16px 20px 16px 20px;
  border-radius: 8px;
  max-width: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.warning-container h3 {
  font-size: 20px;
  font-weight: 600;
  color: #282828;
}
.warning-container div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
.warning-container p {
  font-size: 16px;
  font-weight: 400;
  color: #282828;
}
.warning-container .warning-btn {
  background-color: #5ca9fb;
  padding: 12px 10px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  width: 100%;
  cursor: pointer;
}

@media (max-width: 768px) {
  .related-case-modal-footer {
    flex-direction: column;
    padding: 16px 20px;
    gap: 16px;
    align-items: flex-start;
  }

  .related-case-modal-btn-outline,
  .related-case-modal-btn-solid {
    min-width: 120px;
    padding: 12px 8px;
    font-size: 14px;
  }

  .related-case-modal-btn-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

.page-body::before {
  content: "";
  position: absolute;
  top: 40px; /* adjust vertical position */
  left: 50%;
  transform: translateX(-50%);
  width: 700px; /* logo width */
  height: 700px; /* logo height */
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1; /* subtle behind effect */
  pointer-events: none; /* click-through */
  z-index: 0;
}

.cfo-tab-wrapper {
  margin-bottom: 24px;
}
.cfo-text-link {
  font-size: 14px;
  text-decoration: underline;
  color: #5ca9fb;
}
.table .case-table .cfo-swearing-btn-cell .jis-button.plain {
  font-weight: 400;
}

.ds-tab-container {
  margin-bottom: 24px;
}

.select_wrapper .select-lga-outline {
  border: 1px solid #5ca9fb;
  padding: 16px;
  padding-right: 50px;
}

.select-lga-outline {
  color: #5ca9fb;
}

.select-lga-outline option {
  color: #000;
  text-align: left;
  font-size: 14px;
}

.otp-modal-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.otp-modal-header-text {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: #282828;
}

.otp-modal-container .otp-input-container {
  margin-top: 0 !important;
}

.otp-input {
  width: 50px;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  /* border: 1px solid #ccc; */
  border-radius: 8px;
  outline: 0;
  background-color: #d9d9d9;
  color: #282828;
}

.otp-input:focus,
.otp-input.has-value {
  border: 1px solid #5ca9fb;
  background-color: transparent;
}

.otp-resend-link {
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  text-align: center;
  color: #282828;
}

.otp-resend-link button {
  color: #5ca9fb;
}

.otp-resend-button {
  text-align: center;
  width: 293px;
  padding: 16px 10px;
  background: #5ca9fb;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  margin: auto;
}

@media (max-width: 768px) {
  .otp-modal-container {
    gap: 24px;
  }

  .otp-modal-header-text {
    font-size: 20px;
    line-height: 28px;
  }

  .otp-resend-link {
    font-size: 16px;
    line-height: 20px;
  }

  .otp-resend-button {
    width: 100%;
    max-width: 250px;
    font-size: 14px;
  }

  .otp-input {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .otp-input {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .otp-modal-container {
    gap: 20px;
  }

  .otp-modal-header-text {
    font-size: 18px;
    line-height: 24px;
  }

  .otp-resend-button {
    padding: 14px 8px;
  }
}

.calendar-reschedule-modal .input-group {
  margin-bottom: 0;
}
.calendar-reschedule-modal .input-group .input-wrapper:has(textarea) {
  height: 120px;
}
.calendar-reschedule-modal .input-group textarea {
  resize: none;
  height: 100%;
  font-size: 14px;
}
.calendar-reschedule-modal .input-group textarea::placeholder {
  line-height: 24px;
  color: #adb0b6;
}

.calendar-button-group {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.calendar-button-group .jis-button.primary,
.calendar-button-group .jis-button.outline {
  height: 42px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
}
.calendar-button-group .jis-button.primary {
  min-width: 224px;
  background: #5ca9fb;
}
.calendar-button-group .jis-button.outline {
  min-width: 132px;
  border: 1px solid #5ca9fb;
  color: #5ca9fb;
}

.hearing-button-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hearing-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  align-items: flex-end;
}
.hearing-header h2 {
  font-weight: 500;
  font-size: 24px;
  line-height: 145%;
  color: #282828;
}

.hearing-button-group .jis-button.primary,
.case-document-button-container .jis-button.primary {
  height: 50px;
  background: #5ca9fb;
  border-radius: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #ffffff;
}

.case-document-button-container {
  grid-column: span 3;
}

.hearing-prayers-table .jis-button.transparent {
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  color: #5ca9fb;
}

.judge-note-input-wrapper {
  margin-top: 16px;
}

.judge-note-input-wrapper textarea {
  resize: none;
  height: 321px;
}

.judge-note-upload-wrapper {
  min-height: 124px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.judge-note-upload-wrapper input {
  opacity: 0;
  position: absolute;
  inset: 0;
}

.upload-placeholder-text {
  margin-top: 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #5ca9fb;
  margin-bottom: 4px;
}

.upload-placeholder-text span {
  color: #171717;
}
.upload-image-requirement {
  font-size: 14px;
  line-height: 20px;
  color: #737373;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.file-remove-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fa3e3e;
  font-size: 14px;
  margin: auto;
}

.judge-note-upload-wrapper.drag-over {
  border: 2px dashed #5ca9fb;
  background-color: #f0f8ff;
}

.adjournment-modal .input-group,
.adjournment-modal .select-group {
  margin-bottom: 0;
  padding: 0;
}
.adjournment-modal .question {
  margin-top: 24px;
}
.adjournment-modal .multi-select-dropdown {
  width: 100% !important;
}
.adjournment-modal .dropdown-header {
  padding: 14px 20px !important;
  background-color: white;
}
.adjournment-modal .question div:has(.btn-choice) {
  display: flex;
  width: 100%;
  gap: 14px;
}
.adjournment-modal .question div:has(.btn-choice) .btn-choice {
  flex: 1 1;
  margin: 0;
  height: 50px;
}
.adjournment-modal .date-time-picker {
  display: flex;
  align-items: center;
  gap: 14px;
}

.adjournment-modal .input-group textarea,
.ruling-order-modal .input-group textarea,
.case-judgement-modal .input-group textarea {
  resize: none;
  height: 100%;
}
.adjournment-modal .input-wrapper:has(textarea),
.ruling-order-modal .input-wrapper:has(textarea),
.case-judgement-modal .input-wrapper:has(textarea) {
  background-color: white;
  height: 120px;
}
.case-judgement-modal .jis-checkbox {
  background-color: transparent;
}
.case-judgement-modal select,
.ruling-order-modal .input-wrapper,
.case-judgement-modal .input-wrapper,
.adjournment-modal .input-wrapper {
  background-color: white;
}

.prayer-list {
  display: flex;
  align-items: self-start;
  gap: 8px;
}
.prayer-list p {
  text-align: left;
}
@media (max-width: 768px) {
  .adjournment-modal .question {
    margin-top: 16px;
  }

  .adjournment-modal .question div:has(.btn-choice) {
    flex-direction: column;
    gap: 12px;
  }

  .adjournment-modal .question div:has(.btn-choice) .btn-choice {
    height: 44px;
  }

  .adjournment-modal .date-time-picker {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .prayer-list {
    flex-direction: column;
    gap: 8px;
  }

  .hearing-button-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hearing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }

  .hearing-header h2 {
    font-size: 20px;
  }

  .hearing-button-group .jis-button.primary,
  .case-document-button-container .jis-button.primary {
    height: 44px;
    font-size: 14px;
  }

  .judge-note-input-wrapper textarea {
    height: 200px;
  }

  .upload-placeholder-text {
    font-size: 14px;
    line-height: 20px;
  }

  .file-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .summary.hearing_summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
/* Event Popup Styles - Matching Current Design System */

.event-popup-overlay {
  position: fixed;
  z-index: 9999;
}

.event-popup-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 250px;
  overflow: hidden;
}

/* Popup Header */
.popup-event-header {
  background: #5ca9fb;
  padding: 16px;
  color: white;
}

.popup-event-case {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.popup-event-location {
  font-size: 14px;
  opacity: 0.95;
  margin-bottom: 8px;
}

.popup-event-time {
  font-size: 13px;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 4px;
}

/* Action Buttons */
.popup-action-buttons {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.popup-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.action-icon {
  font-size: 16px;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Primary Action Button */
.popup-action-btn.primary-action {
  background: #5ca9fb;
  color: white;
}

.popup-action-btn.primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107, 115, 255, 0.3);
}

/* Secondary Action Buttons */
.popup-action-btn.secondary-action {
  background: #f5f5f7;
  color: #333;
}

.popup-action-btn.secondary-action:hover {
  background: #ebebed;
}

/* Cancel Button */
.popup-action-btn.cancel-action {
  background: transparent;
  color: #666;
  border: 1px solid #e5e5e7;
}

.popup-action-btn.cancel-action:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

.popup-action-btn:active {
  transform: scale(0.98);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -webkit-appearance: textfield;
          appearance: textfield;
}

.suit-number-header {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #282828;
  margin-bottom: 16px;
}

.clear-case-checkbox .jis-checkbox {
  background-color: transparent;
}

.clear-case-input-group {
  padding: 0;
  margin-bottom: 32px;
}

.clear-case-input-group .input-wrapper {
  height: 120px;
  background: white;
}
.clear-case-input-group textarea {
  height: 100%;
  resize: none;
}

.clear-case-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.clear-case-button-group .jis-button.primary,
.clear-case-button-group .jis-button.plain {
  height: 64px;
  border-radius: 8px;
  flex-grow: 1;
}
.clear-case-button-group .jis-button.primary {
  background: #5ca9fb;
}
.clear-case-button-group .jis-button.plain {
  border: 1px solid #5ca9fb;
}
@media (max-width: 768px) {
  .clear-case-button-group {
    flex-direction: column;
    gap: 16px;
  }
}

.cfo-create-submit-group-btn {
  display: flex;
  gap: 14px;
}

.affidavit-upload-button-container {
  float: right;
}
.affidavit-upload-button-container .jis-button.primary {
  float: right;
  padding: 16px 8px;
  border-radius: 16px;
  min-width: 265px;
  margin-top: 24px;
}

.legal-counselor-search-container {
  justify-content: space-between;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.legal-counselor-search-container .affidavits_tab_section {
  margin-top: 0;
  margin-bottom: 0 !important;
}
.legal-counselor-search-container .case-header {
  margin-bottom: 0 !important;
}

.hearing-prayer-child-container {
  border: 1px solid #c8cace;
  border-radius: 0 0 8px 8px;
  padding: 16px;
}
.hearing-prayer-container {
  margin-top: 24px;
  margin-bottom: 24px;
}

.hearing-prayer-container-heading {
  border-radius: 8px;
  border: 1px solid #c8cace;
  padding: 14px 22px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 41px;
  row-gap: 16px;
  margin-bottom: 24px;
  justify-content: sp;
}

.hearing-prayer-container-heading p,
.hearing-prayer-paragraph {
  font-weight: 600;
  font-size: 16px;
}

.hearing-prayer-paragraph {
  margin-bottom: 24px;
}

.hearing-prayer-checkbox-group {
  display: flex;
  gap: 14px;
}
.hearing-prayer-container .case-document-button-container {
  margin-top: 24px;
}
.hearing-prayer-container .case-document-button-container .jis-button.primary {
  height: 42px;
  font-size: 14px;
  font-weight: 500;
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 8px;
}
.hearing-prayer-checkbox-group:not(:first-of-type) {
  margin-top: 12px;
}

.hearing-prayer-checkbox-group input {
  border: 0.75px solid #c8cace;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  margin-top: 1px;
  flex-shrink: 0;
}
.hearing-prayer-checkbox-group label {
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
}

.post-judgement-tab-export-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8;
  flex-wrap: wrap;
  margin-top: 24px;
  margin-bottom: 24px;
}
.post-judgement-tab-export-container .ds-tab-container {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .legal-counselor-search-container {
    flex-direction: column;
    gap: 12px;
    align-items: start;
    margin-top: 20px;
  }

  .legal-counselor-search-container .affidavits_tab_section {
    margin-top: 0;
  }
  .legal-counselor-search-container .search_wrapper input {
    min-width: 0;
  }

  .post-judgement-tab-export-container {
    align-items: flex-start;
  }
}

@media (max-width: 425px) {
  .legal-counselor-search-container .search_wrapper input {
    min-width: 0;
    padding: 0;
  }
}

.forgot-password:hover {
  text-decoration: underline;
}

.execution-motion-question {
  font-size: 24px;
  text-align: center;
  color: #282828;
}

.deputy-sheriff-modal-container {
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 603px;
  margin: auto;
}

.deputy-sheriff-modal-container .assign-case-button-group {
  gap: 16px;
}

.process-sheriff-input-group {
  display: flex;
  gap: 10px;
}
.process-sheriff-input-group input {
  border: 1.5px solid #d4d4d4;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-top: 1px;
}
.process-sheriff-input-group-container {
  margin-top: 24px;
  margin-bottom: 24px;
}

.process-sheriff-input-group label {
  font-size: 12px;
  color: #282828;
  /* line-height: 100%; */
}

.process-sheriff-input-group label span {
  font-weight: 600;
}

.process-sheriff-modal {
  max-width: 560px;
}

.process-sheriff-modal .suit-number {
  font-size: 16px;
}
.process-sheriff-modal .suit-number span {
  color: #282828;
}

.process-sheriff-modal .time-stamp {
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 14px;
  color: #404040;
}

.process-sheriff-details-container {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #e5e5e5;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.process-sheriff-details-title {
  font-weight: 500;
  font-size: 14px;
  color: #282828;
}

.process-sheriff-details-value {
  font-weight: 600;
  font-size: 16px;
  color: #282828;
}

.process-sheriff-details-commission {
  font-weight: 400;
  font-size: 12px;
  color: #737373;
  margin-top: 2px;
}

.sheriff-auction-items-title {
  font-weight: 600;
  font-size: 16px;
  color: #282828;
  margin-bottom: 6px;
}

.sheriff-auction-items-container {
  margin-top: 16px;
}
.sheriff-auction-items-container table {
  border: 1px solid #5ca9fb;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.sheriff-auction-items-container table th,
.sheriff-auction-items-container table td {
  border: 1px solid #5ca9fb;
  padding: 16px;
}

.sheriff-auction-items-container table th {
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #000000;
}
.sheriff-auction-items-container table td {
  font-size: 14px;
  text-align: center;
  color: #282828;
}
.sheriff-auction-items-total-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid #5ca9fb;
  border-top: 0;
  padding: 11px 16px;
}

.sheriff-auction-items-total-container p {
  font-weight: 600;
  color: #282828;
  font-size: 14px;
}

.sheriff-auction-items-total-container p:nth-of-type(2) {
  font-size: 16px;
}

.reg_container {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* font-family: "Ezra", sans-serif; */
  font-family: "Inter", sans-serif;
  height: 100vh;
}
.homeside {
  width: 45%;
  height: 100vh;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 5px var(--faint_backround);
  background-image: url(/static/media/image.c6ebec91bc94b55ae66f.png);
  background-repeat: repeat;
  background-size: 100% 100%;
}

.bighead-group {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 4px;
}
.bighead {
  display: flex;
  flex-direction: column;
  background-color: #c8cace29;
  flex: 1 1;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid #c8cace;
  height: 315px;
  min-width: 230px;
  /* max-width: 230px; */
}

.payeridbox {
  width: 330px;
  border: 1px solid var(--primary_80);
  padding: 16px;
  border-radius: 16px;
}

.form-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* allows vertical centering when short */
  width: 100%;
}

.success-final {
  display: flex;
  justify-content: center;
  position: relative;
  flex: 1 1;
  justify-self: center;
  width: 90%;
}
.success-final::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* center both axes */
  width: 700px;
  height: 700px;
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1; /* subtle background look */
  pointer-events: none; /* don't block clicks */
  z-index: 0;
}

.success-div {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center; /* horizontal centering */
  height: 100vh; /* full viewport height (optional) */
  text-align: center; /* optional, centers text inside */
  width: 50%;
}
.form-box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  width: 90%;
}

.content-title {
  font-size: 32px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 24px;
}
.success-ball {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center; /* centers the icon vertically */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 50px;
}

.bighead:hover {
  border: 1px solid var(--primary_80);
  background: rgba(92, 169, 251, 0.2);
  cursor: pointer;
}

.bighead:hover svg {
  color: var(--primary);
}
.bighead:hover .title {
  color: var(--primary);
}
.bighead .subtitle {
  font-size: 14;
  font-style: italic;
  /* line-height: 100%; */
  letter-spacing: 0%;
}
.bighead .title {
  font-size: 24px;
  text-align: center;
  margin-top: 38px;
  margin-bottom: 32px;
  font-weight: 600;
  line-height: 24px;
}

.bighead svg {
  margin: auto;
}

.bighead .bighold {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  min-height: 160px;
}

.special-link {
  font-weight: 700;
  color: var(--primary) !important;
  font-style: italic;
}

.boxx {
  width: 95%;
  margin: 16px;
  padding: 10px;
  color: #fff;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  /* background-color: rgba(39, 30, 30, 0.678); */
  background-color: rgba(255, 255, 255, 0.1);

  margin-left: 15px;
  margin-top: 130px;
  border: 1px solid gray;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); /* Safari support */
}

.boxx > p {
  margin-bottom: 10px;
}

.boxx .text {
  display: flex;
}
.boxx .text .dtext {
  margin-left: 5px;
}

.contentside {
  position: relative; /* make ::before position relative to this */
  height: 100vh;
  flex: 1 1;
  background-color: var(--background);
  color: var(--bold_text);
  padding: 24px;

  /* make only this section scroll */
  overflow-y: auto;
  overflow-x: hidden;

  /* optional: smooth scrolling feel */
  scroll-behavior: smooth;
  justify-content: center;
  justify-self: center;
  align-items: flex-start;
  display: flex;
}
.contentside::before {
  content: "";
  position: absolute;
  top: 50%; /* center vertically */
  left: 50%; /* center horizontally */
  transform: translate(-50%, -50%); /* perfect center anchor */
  width: 700px; /* logo width */
  height: 700px; /* logo height */
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.08; /* subtle background effect */
  pointer-events: none; /* click-through */
  z-index: 0; /* behind form content */
}

/* Scrollbar styling (for WebKit browsers like Chrome, Edge, Safari) */
.contentside::-webkit-scrollbar {
  width: 8px;
}

.contentside::-webkit-scrollbar-track {
  background: var(--background);
}

.contentside::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
}

/* Optional hover effect */
.contentside::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--primary) 80%, black 20%);
}

/* For Firefox */
.contentside {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--background);
}

.jis-logo {
  margin: 20px 0;
  border-radius: 50%;
}
.logo {
  width: 70px;

  margin-top: 10px;
  margin-left: 10px;
}

.nav {
  width: 100%;
}

.nav-item {
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: 16px;
  font-style: khula;
  color: var(--bold_text);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nav-item span {
  margin-left: 10px;
}

.nav-item:hover {
  background-color: var(--fade_background);
}

.nav-item.active {
  background-color: var(--primary);
  color: var(--background);
  border-radius: 5px;
  width: 200px;
  height: 37px;
}

.homeview {
  box-shadow: 0 4px 10px var(--faint_backround);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step_title {
  font-size: 16px;
  font-weight: 400;
  color: black;
  line-height: 24px;
}

.boo {
  width: 150px;
  padding: 4px;
  display: flex;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: rgba(209, 207, 207, 0.747);

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.boo:hover {
  background-color: rgba(160, 149, 149, 0.678);
  cursor: pointer;
}
.back {
  font-size: 16px;
}

.homeview .line {
  background-color: var(--primary);
}
.homeview .line:hover {
  transform: scale(1.02);
}

.homeview .line.disable {
  background-color: var(--border_color);
  cursor: not-allowed;
  opacity: 0.7;
}

/* .homeview > div > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.homeview > div > div > div {
    font-size: 18px;
    font-weight: bold;
} */

.homeview > div > p {
  margin: 0;
  font-size: 14px;
  /*     color: var(--background); */
  max-width: 800px;
}
@media (max-width: 800px) {
  .homeside {
    display: none;
  }
  .bighead-group {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}
@media (max-width: 500px) {
  .bighead {
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}
@media (max-width: 1240px) {
  .contentside {
    padding: 0px;
  }
  .bighead-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

.jis-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, opacity 0.3s;
  /* margin: 3px; */
}

.btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.jis-button.primary {
  background-color: var(--primary);
  color: var(--background);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.jis-button.secondary {
  background-color: var(--flow_background);
  color: var(--background);
}

.jis-button.outline {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.jis-button.plain {
  background-color: transparent;
  color: var(--primary);
  padding: 3px 6px;
}

.jis-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.jis-button.full-width {
  width: 100%;
}

.button-icon {
  display: flex;
  align-items: center;
}

.button-icon.left {
  margin-right: 8px;
}

.button-icon.right {
  margin-left: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  .jis-button {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 12px;
  }

  .jis-button.plain {
    padding: 3px 4px;
    font-size: 12px;
  }

  .btns {
    gap: 12px;
    flex-wrap: wrap;
  }
}

.jis-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;

  background-color: var(--background);
  padding: 8px;
  gap: 10px;
}

.checkbox-icon {
  flex-shrink: 0; /* prevents icon from shrinking */
  width: 30px;
  height: 30px;
  color: var(--primary);
  transition: color 0.3s;
}

.checkbox-icon.invalid {
  color: var(--warning);
}

.checkbox-label {
  font-size: 14px;
}

.error-msg {
  color: var(--warning);
  font-size: 12px;
  margin-left: 28px;
  margin-top: 4px;
}
.question {
  flex: 1 1;
  /* margin: 10px; */
}
.question button:first-of-type {
  margin-right: 10px;
}
.question-title {
  font-weight: 500;
  font-size: 24px;
  color: #282828;
  line-height: 32px;
  margin-bottom: 16px;
}

.btn-choice {
  /* padding: 8px 16px;
  margin-right: 10px;
  border: 1px solid var(--primary);
  background-color: var(--background);
  border-radius: 5px; */
  cursor: pointer;
  transition: all 0.2s ease;
  /* border-radius: 5px; */
  /* color: var(--bold_text); */

  min-width: 74px;
  padding: 10px;
  border: 1px solid #5ca9fb;
  border-radius: 8px;
  flex-grow: 1;

  font-weight: 500;
  font-size: 16px;
  line-height: 145%;
  text-align: center;

  color: #5ca9fb;
}

.btn-choice.active-yes {
  /* background-color: var(--success);
  color: var(--background); */
  background: #5ca9fb;
  color: white;
  border: 0;
}

.btn-choice.active-no {
  background-color: var(--warning);
  color: var(--background);
}
.filing-case-options-container .question-title {
  font-size: 16px;
  color: #000000;
}

@media (max-width: 480px) {
  .question-title {
    font-size: 18px;
  }
}

.lead-party-container .jis-checkbox {
  background-color: transparent;
}
.lead-party-container .jis-checkbox .checkbox-label {
  padding-top: 8px;
}

.prayer-list .jis-checkbox {
  align-items: flex-start;
}
.prayer-list .jis-checkbox .checkbox-label {
  text-align: left;
}

.side-logo {
  width: 100px;
  height: 100px;
  text-align: center;
  margin: 16px;
}
.layout-wrapper {
  /* font-family: "Ezra", sans-serif; */
  font-family: "Inter", sans-serif;

  display: flex;
  align-items: stretch; /* ensure children stretch vertically */
  overflow: hidden; /* avoid double scrollbars */
  height: 100vh;
  min-height: 0;
}
.sidebar-links {
  flex: 1 1;
}

.sidebar {
  width: 272px;
  min-height: 100vh;
  background-color: var(--background);
  padding: 20px 0;
  border-right: 1px solid var(--border_color);
  min-height: 0;
  display: flex;
  flex-direction: column;

  /* ✅ Only the sidebar content scrolls */
  overflow-y: auto;
  overflow-x: hidden;

  /* Optional: smooth scroll feel */
  scroll-behavior: smooth;
  flex-shrink: 0;
}
.main-content {
  height: 100vh;
  flex: 1 1;
  background-color: var(--background);
  color: var(--bold_text);

  /* make only this section scroll */
  overflow-y: auto;
  overflow-x: hidden;

  /* optional: smooth scrolling feel */
  scroll-behavior: smooth;
}

/* Scrollbar styling (for WebKit browsers like Chrome, Edge, Safari) */
.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
  background: var(--background);
}

.sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
}

/* Optional hover effect */
.sidebar::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--primary) 80%, black 20%);
}

/* For Firefox */
.sidebar,
.main-content {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--background);
}

.sidebar img {
  width: 100px;
  display: block;
  margin-left: 8px;
  margin-bottom: 24px;
}
.sidebar h4 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--bold_text);
}
.sidebar nav.sidebar-links {
  width: 100%;
  background-color: var(--background);
}

.sidebar nav.sidebar-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar nav.sidebar-links ul li {
  color: var(--bold_text);
  font-size: 14px;
  font-weight: 500;
  margin: 8px;
  list-style: none;
}

.sidebar nav.sidebar-links > ul > li > a,
.sidebar nav.sidebar-links > ul > li > .parent-menu-item {
  padding: 12px 16px;
  color: var(--bold_text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease-in-out;
  background-color: var(--background);
}

.sidebar nav.sidebar-links > ul > li > a:hover,
.sidebar nav.sidebar-links > ul > li > .parent-menu-item:hover {
  background-color: #f0f2f5;
}

.sidebar nav.sidebar-links > ul > li > a.active,
.sidebar nav.sidebar-links > ul > li > .parent-menu-item.active {
  background-color: #5ca9fb;
  color: white;
}

.sidebar nav.sidebar-links > ul > li > a.active svg,
.sidebar nav.sidebar-links > ul > li > .parent-menu-item.active svg,
.sidebar nav.sidebar-links > ul > li > .parent-menu-item.active span {
  color: white;
}

.special-menu-link {
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--bold_text);
  margin-top: 4px;
  padding: 0;
  list-style: none;
}

.submenu.open {
  max-height: 500px;

  border-radius: 8px;
  padding: 8px 0;
  margin-left: 8px;
  margin-right: 8px;
}

.submenu li {
  background-color: transparent;
  color: #737373 !important;
  margin: 0;
  padding: 0;
}

.submenu li a {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #737373;
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer;
}

.submenu li a:hover {
  background-color: #5ca9fb2e;
}

.submenu li a.active {
  background-color: #5ca9fb2e;
  font-weight: 600;
  color: #737373;
}

.sidebar a {
  color: var(--bold_text);
  display: block;
  text-decoration: none;
}

/* Tab section*/
.tab_body {
  margin-bottom: 24px;
}

.tab_section {
  border: 1px solid #5ca9fb;
  padding: 0.25rem;
  border-radius: 1rem;
  width: -webkit-fit-content;
  width: fit-content;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tab_section .tabline {
  background: white;
  color: #5ca9fb;
  margin-bottom: 2px;
  margin-right: 2px;
  padding: 16px 24px;
  border-radius: 16px;
  /* min-width: 181px; */
  display: flex;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  font-style: normal;
}

.tab_section.auth_tab_section .tabline:not(.active) {
  background-color: transparent;
}

.auth_input_group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px 20px;
  gap: 8px 20px;
  margin-top: 8px;
}

.auth_form_section .input-group,
.auth_form_section .select-group {
  padding: 0;
  margin: 0;
  gap: 6px;
}

.auth_form_section .select-group label,
.auth_form_section .input-group label {
  margin: 0;
}

.auth_form_section .input-group.auth-input-group,
.auth-payer-id-box {
  margin-top: 8px;
}

.auth-payer-id-box {
  padding: 16px;
  border-radius: 16px;
}

.auth_form_section_note {
  font-size: 12px;
  color: #282828;
}

.auth-payer-id-box .jis-button.primary {
  margin-top: 24px;
  padding: 16px;
  border-radius: 8px;
}

.button-spread.auth-button-spread {
  margin-top: 32px;
}
.auth-button-spread .jis-button.primary {
  padding: 16px;
  border-radius: 8px;
  width: 100%;
}

.auth-success-div .success-ball {
  color: #282828;
}

.auth-success-div .success-ball {
  margin-bottom: 24px;
}

.auth-success-div .jis-button.primary {
  width: 244px;
  margin-top: 48px;
}

.login-form-box .content-title {
  margin-bottom: 16px;
}
.login-form-box .content-sub-title {
  font-size: 14px;
  color: black;
}
.login-form-box .input-group {
  padding: 0;
}
.login-input-group.input-group {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .auth_input_group {
    grid-template-columns: 1fr;
  }

  .auth-success-div .jis-button.primary {
    width: auto;
  }
}

.tabline.active {
  background: var(--primary);
  color: var(--background);
  cursor: default;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* .tab_body .tab_view {
  margin: 16px;
} */

.page-body {
  padding-left: 24px;
  padding-right: 24px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 24px;
  padding-right: 24px;
  border-bottom: 1px solid var(--border_color);
}

.top-bar-title {
  font-size: 24px;
  margin: 0;
  flex: 1 1; /* allows title to grow and push others to the right */
}

.top-bar-right {
  display: flex;

  gap: 16px;
  flex-wrap: nowrap;
  align-items: center;
}

.search-container {
  position: relative;
  width: 240px;
  flex-shrink: 0;
}

.search-input {
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border_color);
  border-radius: 4px;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.people-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: 50%;
  color: var(--bold_text);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 10px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.user-info h2 {
  margin: 0;
  font-size: 14px;
}

.user-info span {
  font-size: 12px;
  color: var(--text-secondary);
}

.selected {
  padding: 8px 12px;
  border-color: var(--primary);
  border-width: 1px;
  border-style: solid;

  color: var(--bold_text);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin-bottom: 8px;
}
.selected-disabled {
  padding: 8px 12px;
  border-color: var(--primary);
  border-width: 1px;
  border-style: solid;

  color: var(--bold_text);

  transition: all 0.3s ease-in-out;
  margin-bottom: 8px;
  border-color: var(--primary);
  border-left-width: 6px;
  border-left-style: solid;
}

.selected:hover {
  background-color: var(--faint_select);

  border-color: var(--primary);
  border-left-width: 6px;
  border-left-style: solid;
}
.selected.active {
  background-color: var(--faint_select);
  border-color: var(--primary);
  border-left-width: 6px;
  border-left-style: solid;
}

/* Side bar*/
.side-tabs-container {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: var(--background);
  border: 1px solid var(--faint_select);
  border-radius: 8px;
  overflow: hidden;
  flex-direction: column;
}

.side-tabs {
  width: 200px;
  background-color: var(--background);
  border-right: 1px solid var(--faint_select);
  display: flex;
  flex-direction: row;
}

.tab {
  padding: 12px 16px;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
  font-size: 15px;
  color: var(--bold_text);
}

.tab:hover {
  background-color: #f3f6fb;
}

.tab.active {
  background-color: var(--background);
  font-weight: 600;
  border-left: 4px solid var(--background); /* match content background */
  color: var(--primary);
  border-right: none;
  position: relative;
  z-index: 2;
}

.tab-content {
  flex: 1 1;
  background-color: var(--background);
  padding: 24px;
  z-index: 1;
  position: relative;
}

.action-btns-instru {
  width: 100%;
  margin-top: 10px;
  background-color: var(--fade_background);
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 10px;
}

.action-btns-instru .upload-dash {
  width: 250px;
  padding: 16px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border_color);
  transition: all 0.25s ease-in-out;
}

.action-btns-instru .upload-dash:hover {
  background-color: var(--background);
  transform: translateY(-5px);
}

.action-btns-instru .upload-dash .icon-text {
  display: flex;
  gap: 10px;
  align-items: center;
}

.action-btns-instru .upload-dash .icon-text svg {
  font-size: 40px;
  color: var(--bold_text);
}

.action-btns-instru .upload-dash .icon-text p {
  font-size: 15px;
  color: var(--bold_text);
  font-weight: 500;
}

.action-btns-instru .upload-dash svg {
  color: var(--orange);
}

.action-btns-instru .upload-dash svg.uploaded-it {
  color: var(--success);
}

.sidebar-toggle-wrapper {
  width: 100%;
  display: none;
  justify-content: flex-end;
  padding: 0 16px;
}
.sidebar-toggle {
  cursor: pointer;
  display: none;
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top-bar-username {
  font-weight: 600;
  font-size: 16px;
}
@media (max-width: 769px) {
  .sidebar_logo {
    width: 80px;
  }
  .sidebar-toggle-wrapper {
    display: flex;
  }
  .sidebar-toggle {
    display: inline-block;
  }
  .sidebar {
    position: fixed !important;
    width: 274px;
    height: 100dvh;
    z-index: 1000;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    top: 0;
    bottom: 0;
    padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
  }
  .side_bar_open {
    left: 0;
    transform: translateX(0);
  }
  .top-bar-username {
    font-size: 14px;
    font-weight: 500;
  }
  .top-bar-user-role {
    font-size: 12px;
    font-weight: 400;
  }
  .top-bar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .top-bar-title {
    font-size: 18px;
  }
  .top-bar-right {
    gap: 8px;
  }
  .search-container {
    width: 180px;
  }
  .page-body {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tab_section {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .tab_section .tabline {
    padding: 12px 16px;
    font-size: 14px;
    white-space: nowrap;
  }
  .action-btns-instru {
    flex-wrap: wrap;
  }
  .action-btns-instru .upload-dash {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .top-bar {
    padding: 10px 12px;
  }
  .top-bar-title {
    font-size: 16px;
  }
  .search-container {
    width: 100%;
    order: 3;
  }
  .top-bar-right {
    flex-wrap: wrap;
  }
  .page-body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .tab_section .tabline {
    padding: 10px 14px;
    font-size: 13px;
  }
  .user-info h2 {
    font-size: 12px;
  }
  .user-info span {
    font-size: 10px;
  }
}
@media (max-width: 500px) and (orientation: portrait) {
  .layout-wrapper {
    max-height: 100dvh;
    overflow-y: scroll !important;
  }
  .sidebar {
    height: 100dvh;
    min-width: none;
    overflow-y: scroll;
  }
  .page-body::before {
    height: -webkit-fit-content !important;
    height: fit-content !important;
  }
}



.other-cause-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.input-with-icon {
  display: flex;
  align-items: center;
  background: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
}

.input-with-icon input {
  border: none;
  outline: none;
  flex: 1 1;
  background: transparent;
  padding-left: 8px;
}

.remove-icon {
  cursor: pointer;
  color: var(--warning);
  display: flex;
  align-items: center;
  padding: 6px;
}
/* styles.css or relevant CSS module */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0);
  }
}

.cause-item {
  animation: fadeIn 0.3s ease-out forwards;
  overflow: hidden;
  transform-origin: top;
  display: flex;
}

.cause-item.removing {
  animation: fadeOut 0.3s ease-out forwards;
}

.claim-item {
  animation: fadeIn 0.3s ease-out forwards;
  overflow: hidden;
  transform-origin: top;
  display: flex;
  flex-direction: column;
  flex-direction: column;
  display: flex;
  margin-bottom: 16px;
  position: relative;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1;
}
.inout-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.claim-item.removing {
  animation: fadeOut 0.3s ease-out forwards;
}
.input-wrapper {
  position: relative;
}
.delete {
  /* font-family: "Ezra"; */
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 18px;
  position: absolute;

  color: #ff2e3b;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
  cursor: pointer;
  top: 14px;
  right: 15px;
}

.select-wrapper {
  position: relative;
}
.motion-details-form-wrapper {
  max-width: 600px;
  margin: 0 auto;
}
.form-section--actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-section--actions .action-buttons {
  padding: 16px;
  border-radius: 16px;
  max-width: 185px;
  height: 50px;
  border: 1px solid #5ca9fb;
  font-size: 16px;
  font-weight: 600;
  color: #5ca9fb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-max-width {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flowbuttongroup,
.flowerror {
  max-width: 600px;
  margin: 0 auto;
}
.flowerror {
  padding-top: 12px;
}
.form-section {
  display: flex;
  gap: 18px;
  align-items: center;
}
.select-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.select-group .select-wrapper select option:first-of-type {
  color: #adb0b6;
}
.select-group .select-wrapper select {
  width: 100%;
  -webkit-appearance: none;
          appearance: none;
  padding-right: 40px;
  background-image: none;
}

.select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
}

.fill-btn-outline {
  min-height: 50px;
  min-width: 185px;

  border: 1px solid #5ca9fb;
  border-radius: 16px;

  /* font-family: "Ezra"; */
  font-family: "Inter", sans-serif;

  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: #5ca9fb;
}

.fill-btn-solid {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 50px;

  background: #5ca9fb;
  border-radius: 8px;

  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #ffffff;
}
.party-form-wrapper {
  flex-direction: column;
  display: flex;
  gap: 16px;
}
.view {
  padding-top: 32px;
  /* padding-left: 11px !important; */
}
.view h2 {
  margin-bottom: 24px;
}
.view.fill-form-container {
  margin-top: 32px;
}
.require-notice-text {
  display: inline;
  color: #ff2e3b;
  font-weight: 400;
  font-size: 12px;
}

.save-party-action-btn,
.add-claim-action-btn {
  border: 1px solid #5ca9fb;
  border-radius: 16px;
  padding: 16px;
  font-weight: 600;
  font-size: 16px;
  max-width: 186px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5ca9fb;
}

.form-row {
  display: flex;
  gap: 8px;
}
.input-group-label {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #282828 !important;
  line-height: 22px !important;
}

.input-group-textarea {
  resize: none;
  width: 100%;
  max-height: 100px;
  height: 100px;
  border: 1px solid #c8cace;
  color: white;
}

.saved-motion-container {
  /* max-width: 600px; */
  margin: 0 auto;
  margin-top: 24px;
}

.form-step-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: #000000;
}

.filing-case-container {
  margin: 0;
  margin-bottom: 24px;
}

.filing-case-container .input-group,
.filing-case-container .select-group {
  margin: 0;
  padding: 0;
}

.filing-case-container .input-group label,
.filing-case-container .select-group label {
  margin: 0;
}
.filing-case-container .input-group label {
  margin-bottom: 6px;
}

.case-filing-details-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filing-case-type-details-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px 18px;
  gap: 8px 18px;
}

.filing-case-type-details-container .select-group {
  min-width: 0;
}

.filing-case-details-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px 15px;
  gap: 8px 15px;
}

.case-filing-checkbox-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.case-filing-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-filing-checkbox-group .jis-checkbox {
  padding: 0;
}

.case-filing-checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.case-filing-checkbox-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 145%;
  color: #000000;
  display: contents;
}
.case-filing-checkbox {
  width: 24px;
  height: 24px;
  border: 0.75px solid #c8cace;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.other-cause-of-action {
  margin-top: 12px;
}

.other-cause-of-action-label-container {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.filing-case label {
  margin-bottom: 0 !important;
}

.filing-case .delete {
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
}

.filing-case .delete p {
  padding-top: 2px;
}

.select-options-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 23px 50px;
  gap: 23px 50px;
  margin-top: 24px;
}

.filing-court-process-form {
  max-width: 828px;
  width: 100%;
}
.submit-button {
  margin-top: 32px;
}
.filing-court-process-form .multi-select-dropdown {
  width: 100% !important;
}

.filing-court-multi-select p {
  font-weight: 400;
  font-size: 12px;
  line-height: 22px;
  color: #282828;
  margin-bottom: 6px;
  text-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    0px 0px 0px #f4ebff;
}
.filing-court-multi-select .dropdown-header {
  padding: 14px !important;
  border: 1px solid #c8cace !important;
  border-radius: 8px !important;
  flex-wrap: nowrap;
}

.parties-to-the-case-table {
  margin-top: 32px;
  max-width: 600px;
  width: 100%;
}

.enter-your-claim-form-container {
  max-width: 600px;
  margin: 0 !important;
}
.enter-your-claim-form-container .form-step-title {
  margin-bottom: 46px;
}
.enter-your-claim-form-container .delete {
  margin-left: auto;
  margin-bottom: 10px;
}

.enter-your-claim-form-container .claims {
  margin-bottom: 16px;
}

.add-claim-action-btn {
  min-width: 185px;
}

.currency-container {
  display: flex;
  gap: 18px;
  align-items: center;
}

.file-motion-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prayers-text-area-wrapper {
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #c8cace;
  height: 100px;
}
.prayers-text-area-wrapper textarea {
  resize: none;
  flex: 1 1;
}
.filing-case textarea::placeholder,
.filing-case input::placeholder {
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: #adb0b6;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .filing-claims {
    margin: 0;
  }
  .filing-claims .flow {
    justify-content: flex-start;
  }
  .filing-claims .itemgroup {
    flex-direction: column;
  }
  .filing-claims .line {
    display: none;
  }
  .filing-claims .itemgroup .flow-item-content {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 5px;
  }
  .delete {
    font-size: 14px;
  }

  .filing-case-type-details-container {
    grid-template-columns: 1fr;
  }

  .filing-case-details-container {
    grid-template-columns: 1fr;
  }

  .select-options-container {
    grid-template-columns: 1fr;
  }

  .case-filing-checkbox-container {
    align-items: flex-start;
  }

  .case-filing-checkbox-label {
    padding-top: 0;
  }
  .case-filing-checkbox {
    width: 16px;
    height: 16px;
    margin-top: 2px;
  }
  .filing-court-multi-select .dropdown-header {
    font-size: 14px;
  }
  .currency-container {
    flex-direction: column;
  }
  .currency-container .select-group {
    width: 100%;
  }
}

.claims-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.claims-label-wrapper .delete {
  margin: 0;
}

.gazette-list {
  width: 100%;
  margin-top: 32px;
  display: flex;
  /* gap: 16px; */
  justify-content: space-between;
  position: relative;
}

.gazette-list .body {
  flex: 1 1;
}

.gazette-list .body .top-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
}

.gazette-list .body .top-nav .left-top {
  color: var(--faint_background);
}

.gazette-list .body .top-nav .left-top .top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gazette-list .body .top-nav .left-top p {
  font-size: 15px;
  margin-top: 6px;
}

.gazette-list .body .top-nav p.nav-status {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.gazette-list .body .table-container {
  width: 100%;
  overflow-x: auto;
  /* margin-top: 10px;
  padding: 0 10px; */
}

.gazette-list .body .table-container table {
  width: 100%;
  min-width: 600px; /* prevents column collapse on narrow screens */
  border-collapse: collapse;
  table-layout: auto;
}

.gazette-list .body .table-container table thead {
  width: 100%;
}

.gazette-list .body .table-container table thead tr {
  width: 100%;
  /* background-color: var(--background); */
}

.gazette-list .body .table-container table thead tr th,
.gazette-list .body .table-container table thead tr td {
  padding: 10px;
  text-align: left;
  color: var(--bold_text);
  white-space: nowrap;
}

/* Column width hints so browser allocates space sensibly */
.gazette-list .body .table-container table td.specification {
  min-width: 180px;
}

.gazette-list .body .table-container table td.document-upload {
  min-width: 160px;
}

.gazette-list .body .table-container table td.quantity {
  min-width: 100px;
}

.gazette-list .body .table-container table td.amount {
  min-width: 120px;
  white-space: nowrap;
}

.gazette-list .body .table-container table tbody {
  width: 100%;
}
.gazette-list .body .table-container table .collapse {
  border-bottom: 1px solid var(--border_color);
}

/* .gazette-list .body .table-container table tbody.collapse tr.specific-row {
  display: none;
} */

.gazette-list .body .table-container.collapse {
  display: none;
}

.gazette-list .body .table-container table tbody tr.specific-row {
  width: 100%;
}

.gazette-list .body .table-container table tbody tr.specific-row.picked {
  background-color: #dcdfe33f;
}

.gazette-list .body .table-container table tbody tr td.span {
  background-color: var(--fade_background);
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: var(--bold_text);
  font-weight: 700;
}

.gazette-list .body .table-container table tbody tr td.span .icon {
  cursor: pointer;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--background);
}

.gazette-list .body .table-container table tbody tr.specific-row td {
  padding: 10px;
  text-align: left;
  color: var(--bold_text);
  border-bottom: 1px solid var(--border_color);
}

.gazette-list
  .body
  .table-container
  table
  tbody
  tr.specific-row
  td
  input.check {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.gazette-list
  .body
  .table-container
  table
  tbody
  tr.specific-row
  td.specification {
  font-size: 14px;
  font-weight: 500;
  color: var(--bold_text);
}

.gazette-list
  .body
  .table-container
  table
  tbody
  tr.specific-row
  td.document-upload
  p {
  width: 250px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 8px;
  background-color: var(--fade_background);
  transition: all 0.25s ease-in-out;
}

.gazette-list
  .body
  .table-container
  table
  tbody
  tr.specific-row.picked
  td.document-upload
  p {
  color: var(--primary);
  /*  background-color: var(--faint_background); */
}

.gazette-list
  .body
  .table-container
  table
  tbody
  tr.specific-row
  td.quantity
  input.number {
  min-width: 50px;
  width: 100%;
  height: 35px;
  color: var(--text);
  /* border: 1px solid var(--text); */
  border: 1px solid #c8cace;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  outline: none;
  background: transparent;
  transition: all 0.25s ease-in-out;
}

.gazette-list
  .body
  .table-container
  table
  tbody
  tr.specific-row.picked
  td.quantity
  input.number {
  color: var(--bold_text);
  /* text-align: center; */
}

.gazette-list .body .total-pay {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: end;
  margin: 16px 0;
  padding: 0 10px;
}

.gazette-list .body .total-pay .reset-back {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.gazette-list .body .total-pay .reset-back .back {
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--bold_text);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.gazette-list .body .total-pay .reset-back .back:hover {
  color: var(--primary);
}

.gazette-list .body .total-pay .reset-back .back p {
  font-size: 15px;
  font-weight: 500;
}

.gazette-list .body .total-pay .total-fee {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}

.gazette-list .body .total-pay .total-fee span {
  color: var(--primary);
}

.gazette-list .body .total-pay .total-fee p {
  font-weight: 600;
  font-size: 17px;
}

.gazette-list .body .total-pay .total-fee h2 {
  /* font-family: "Ezra"; */
  font-family: "Inter", sans-serif;

  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  text-align: center;

  color: #000000;
}
.gazette-list .groupbtn {
  justify-content: flex-start;
}

.dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #c8cace69;
  cursor: pointer;
}

.dropdown .span {
  /* font-family: "Ezra";
  font-family: "Inter", sans-serif;
   */
  font-weight: 500;
  font-size: 16px;
  line-height: 145%;

  color: #000000;
}

.continue-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 10px;

  width: 328px;
  height: 50px;

  background: #5ca9fb;
  border-radius: 8px;
  font-family: "Inter", sans-serif;

  /* font-family: "Ezra"; */
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  text-align: center;

  color: #ffffff;
}

@media (max-width: 768px) {
  .gazette-list .body .total-pay {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .gazette-list .body .total-pay .total-fee {
    align-items: flex-start;
    gap: 16px;
  }

  .gazette-list .body .total-pay .total-fee h2 {
    /* font-family: "Ezra"; */
    font-family: "Inter", sans-serif;

    font-weight: 500;
    font-size: 16px;
    text-align: left;
  }

  .dropdown .span {
    font-size: 14px;
  }
}

.summary .wide {
  grid-column: span 2;
}
.summary_wrapper {
  border: 1px solid #c8cace;
  padding: 27px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 24px;
  flex-direction: column;
  display: flex;
  gap: 24px;
  /* max-width: 1007px; */
}
.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px 40px;
  gap: 32px 40px;
}

.document-summary {
  gap: 24px 42px;
  margin-bottom: 26px;
  max-width: 1007px;
  border: 1px solid #c8cace;
  padding: 30px 24px;
  border-radius: 16px;
}

.summary .label {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 8px;
}

.summary .value {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.motion-card {
  border: 1px solid var(--primary);
  border-radius: 5px;
  padding: 10px;
  margin: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.motion-section {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.motion-left {
  width: 65%;
  line-height: 1.8;
  margin-left: 10px;
}

.motion-right {
  width: 30%;
  line-height: 1.8;
  display: flex;

  flex-direction: column;
}
.motion-divider {
  width: 1px;
  background-color: var(--primary);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 68%;
  transform: translateX(-50%);
}
.timeline-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-left: 150px;
}
.comment-count {
  background-color: var(--primary);
  color: var(--background);
  padding: 6px 12px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap; /* Prevent wrapping */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}
.timeline-wrapper {
  position: relative;
  flex-grow: 1;
  padding-left: 40px;
}
.vertical-line {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--fade_background);
}
.comment-timeline {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex-grow: 1;
}

.comment-entry {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.comment-meta {
  min-width: 110px;
  text-align: right;
  font-size: 13px;
  font-weight: bold;
  color: var(--primary);
  margin-top: 5px;
}
.comment-box {
  border: 1px solid var(--fade_background);
  border-radius: 5px;
  padding: 15px;
  background-color: var(--background);
  width: 70%;
  box-shadow: 0px 1px 3px var(--bold_text);
}
.comment-text {
  font-size: 14px;
}
.comment-footer {
  background-color: var(--comment_footer);
  padding: 6px 10px;
  margin-top: 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.table-header {
  padding-top: 10px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-left: 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: #5ca9fb;

  font-family: "Inter", sans-serif;
  /* font-family: "Ezra"; */
  font-weight: 500;
  font-size: 24px;
  line-height: 145%;
  color: #ffffff;
}

.case-details-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  /* font-family: "Ezra"; */
  /* min-width: 1440px; */
  table-layout: fixed;
}

.case-details-table thead,
.case-details-table tbody {
  border-top: 1px solid #edeeee;
}
.case-details-table th {
  border-top-width: 1px;
  white-space: nowrap;
  /* width: 33%; */
}
.case-details-table th,
.case-details-table td {
  padding-top: 12.9px;
  padding-right: 10px;
  padding-bottom: 12.9px;
  padding-left: 10px;
}

.case-details-table tbody tr:not(:last-child) {
  border-bottom: 1px solid #edeeee;
}

.case-details-table td {
  font-size: 16px;
  line-height: 32px;
  color: #000000;
  vertical-align: top;
  text-align: center;
}

.case-details-table td:first-child {
  text-align: left;
}

.case-details-table button.jis-button.primary {
  padding: 9px 40px;
}

.case-details-table-button button.jis-button.primary {
  padding: 14px 40px;
}

.case-details-table.full-border tr {
  border: 1px solid #c8cace;
}

.case-details-table.full-border td {
  vertical-align: middle;
}

.case-details-table .jis-button.plain {
  font-family: "Inter", sans-serif;
  /* font-family: "Ezra"; */
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;

  color: #5ca9fb;
}

.summary-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 145%;
  color: #000000;
  margin-bottom: 8px;
}
.summary-value {
  font-size: 14px;
  line-height: 145%;
  text-transform: uppercase;
  color: #000000;
}

.document-navigation .btn-solid {
  min-width: 201px;
}

.document-navigation-label {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;

  color: #282828;
}

.document-navigation {
  grid-column: span 3;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 5px 4px;
}

.document-navigation-btn .back-btn {
  margin-bottom: 26px;
}
.document-navigation {
  display: flex;
}
.document-navigation button {
  background-color: #5ca9fb;
  padding: 16px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #ffffff;
  font-weight: 600;
  width: 201px;
}
.document-navigation p {
  font-size: 16px;
  font-weight: 600;
  color: #282828;
}
.summary_wrapper {
  border: 1px solid #c8cace !important;
}
@media (max-width: 768px) {
  .table-header {
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-weight: 500;
    font-size: 18px;
  }

  .case-details-table {
    table-layout: auto;
    min-width: 520px;
  }

  .case-details-table th,
  .case-details-table td {
    padding: 8px 5px;
    font-size: 14px;
  }

  .case-details-table td {
    line-height: 24px;
  }

  .case-details-table button.jis-button.primary,
  .case-details-table-button button.jis-button.primary {
    padding: 6px 20px;
    font-size: 12px;
  }

  .summary {
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .summary .wide {
    grid-column: span 1;
  }

  .document-navigation {
    grid-column: span 1;
    align-items: start;
    padding: 0;
    gap: 10px;
  }

  .summary-label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .summary-value {
    font-size: 12px;
  }

  .document-navigation .btn-solid {
    min-width: 150px;
  }

  .document-navigation-label {
    font-size: 14px;
    line-height: 16px;
  }
}

.add-addition-document-btn,
.add-party-btn,
.add-motion-btn {
  padding: 16px;
  margin-left: auto;
  margin-bottom: 32px;
}

.add-party-btn {
  min-width: 265px;
}
.add-motion-btn {
  margin-bottom: 34px;
}
@media (max-width: 480px) {
  .summary {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .document-summary {
    padding: 16px 12px;
    gap: 12px;
  }

  .document-navigation {
    flex-direction: column;
    width: 100%;
  }

  .document-navigation button {
    width: 100%;
    min-width: 100%;
  }

  .document-navigation .namedoc {
    width: 100%;
    text-align: center;
  }

  .summary-label {
    font-size: 13px;
  }

  .summary-value {
    font-size: 11px;
  }
}

.payment .section-header {
  background-color: var(--primary);
  width: 100%;
  color: var(--background);
  padding: 10px 20px;
  font-weight: bold;
  font-size: 18px;
}
.payment .suit-number-section {
  margin: 10px;
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border: 5px;
  font-weight: bold;
}
.payment .amount {
  /* font-family: "Ezra"; */
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 26px;
  text-align: center;

  color: #000000;
  margin-bottom: 32px;
  margin-top: 32px;

  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* .payment  .amount::before{
        content: "";
  position: absolute;
  top: 110px;          
  left: 55%;
  transform: translateX(-50%);
  width: 700px;       
  height: 700px;      
   background-image: url('../assets/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1;       
  pointer-events: none;
  z-index: 0;
    } */
.payment .containers {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.radio-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  margin-bottom: 15px;
}

.radio-row-container {
  margin-top: 32px;
}

.radio-label {
  /* font-family: "Ezra"; */
  font-family: "Inter", sans-serif;

  font-size: 16px;
  line-height: 32px;
  text-align: center;

  color: #000000;
}

.radio-options {
  display: flex;
  gap: 21px;
  white-space: nowrap;
}

.radio-options input {
  margin-right: 5px;
}

.payment .button-container {
  text-align: center;
  margin-top: 50px;
}

.case-details-table td {
  font-size: 16px;
  line-height: 32px;
  color: #000000;
  vertical-align: top;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 0;
}

.case-details-table td:first-of-type {
  text-align: center !important;
}

.pay-now-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;

  min-height: 50px;

  background: #5ca9fb;
  border-radius: 16px;
  font-family: "Inter", sans-serif;

  /* font-family: "Ezra"; */
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;

  color: #ffffff;
}

.pay-later-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;

  min-height: 50px;

  background: #ffffff;
  border: 1px solid #5ca9fb;
  border-radius: 16px;
  font-family: "Inter", sans-serif;

  /* font-family: "Ezra"; */
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;

  color: #5ca9fb;
}

@media (max-width: 768px) {
  .payment .amount {
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 24px;
    margin-top: 24px;
  }

  .radio-row .jis-checkbox {
    padding: 0;
  }
  .radio-row {
    flex-direction: column;
    width: 90%;
    gap: 10px;
    text-align: center;
  }

  .radio-options {
    gap: 15px;
  }

  .radio-label {
    font-size: 14px;
    line-height: 24px;
  }

  .payment .button-container {
    margin-top: 30px;
  }

  .pay-now-btn,
  .pay-later-btn {
    padding: 12px;
    min-height: 44px;
    font-size: 14px;
  }
}

.back-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 1.15625rem;
  gap: 0.625rem;
  height: 2.75rem;
  background: #c8cace;
  border-radius: 1rem;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1rem;
  color: #282828;
  margin-bottom: 1.5rem;
  border: none;
  cursor: pointer;
}

.back-button:hover {
  opacity: 0.8;
}

.suit-number {
  /* font-family: "Ezra"; */
  font-family: "Inter", sans-serif;

  font-weight: 500;
  font-size: 24px;
  line-height: 145%;
  color: #282828;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .back-button {
    padding: 0 0.75rem;
    gap: 0.5rem;
    height: 2.25rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  .suit-number {
    font-size: 20px;
    margin-bottom: 24px;
  }
}

.dashboard .main-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: none;
}

/* Left section: 3 horizontal cards */
.dashboard .left-cards {
  display: flex;
  gap: 20px;
  margin-top: none;
  margin-bottom: 10px;
  width: 100%;
}

.left-cards .card-icon {
  background-color: var(--primary);
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.dashboard .card,
.tall-card-section {
  background-color: var(--background);
  justify-content: space-between;
  border-radius: 1rem;
  padding-top: 1rem;
  padding-right: 1.5rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  gap: 0.5rem;
  border: 1px solid #c8cace;
}
.dashboard .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 10px; */
}

.dashboard .card-header .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bold_text);
}

.dashboard .stati {
  background-color: var(--background);
  padding: 24px;
  border-radius: 16px;
  width: 50%;
  border: 1px solid #c8cace80;
}

.stati .stati-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #000000;
}
.stati-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stati-box .stati-box-value {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}
.stati-box .stati-box-past::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  background-color: #5dda9e;
  border-radius: 50%;
}
.stati-box .stati-box-past {
  font-size: 10px;
  font-weight: 500;
  color: #adb0b6;
}

.dashboard .icon {
  width: 20px;
  height: 20px;
}

.dashboard .card-value {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: #000000;
}

.dashboard .card-footer {
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text);
}

.dashboard .percent {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.dashboard .percent.up {
  color: var(--success);
  background-color: var(--fade_background);
}

.dashboard .percent.down {
  color: var(--warning);
  background-color: var(--fade_background);
}

.dashboard .right-tall-card {
  flex: 1 1;
  background: var(--background);
  box-shadow: 0 0 5px var(--faint_background);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 190px;
}
.dashboard .tall-card-section {
  flex: 1 1;
  background-color: var(--background);
  margin: 4px;
  height: 70px;
  border-radius: 10px;
  font-weight: bold;
  border: 1px solid var(--fade_background);
}

.dashboard .card-headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard .card-headers .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bold_text);
}

.dashboard .card-values {
  font-size: 18px;
  font-weight: bold;
  color: var(--bold_text);
}

.dashboard .card-footers {
  font-size: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
}

.dashboard .percent {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.dashboard .percent.up {
  color: var(--success);
  background-color: var(--fade_background);
}

.dashboard .percent.down {
  color: var(--primary);
  background-color: var(--fade_background);
}
.case_overview {
  padding: 1.4375rem 2rem;
  background: white;
  border-radius: 1rem;
  border: 1px solid #c8cace;
  color: #000;
}
.case_title {
  font-size: 1.5rem;
  font-weight: bold;
  font-weight: 500;
}
.radio_dot {
  width: 2rem;
  height: 2rem;
  border: 2px solid #c8cace;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.radio_dot:checked::after {
  background-color: #5ca9fb;
  border: #5ca9fb;
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.dashboard .mid-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
}
.dashboard .overview {
  display: flex;
  justify-content: space-between;
  flex: 1 1;
  border-radius: 16px;
  border: 1px solid #c8cace80;
}
.dashboard .overview h4 {
  font-size: 1.5rem;
  color: #000000;
  font-weight: 500;
}
.dashboard .chart-area,
.case-summary {
  flex: 1 1;
  padding: 24px 27px 21px 32px;
  display: flex; /* enable flexbox */
  flex-direction: column; /* stack content vertically */
  justify-content: flex-end; /* push everything to bottom */
}

.dashboard .circle-chart {
  height: 300px;
  width: 300px;
  background: conic-gradient(
    var(--primary) 0% 50%,
    orange 50% 85%,
    red 85% 100%
  );
  animation: spin 2s linear;
  border-radius: 50%;
  margin-top: 10px;
}

.dashboard .summary-box {
  margin: 8px 0;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.summary-box .in-summary-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.summary-box p,
.in-summary-box p {
  font-size: 1rem;
  font-weight: 500;
}

.dashboard .view-btn {
  margin-top: 10px;
  background: var(--primary);
  color: var(--background);
  padding: 5px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.dashboard .notifications-table {
  background-color: var(--background);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px var(--faint_background);
  margin: 8px;
}

.dashboard .notifications-table table {
  width: 100%;
  border-collapse: collapse;
}

.dashboard .notifications-table th,
.dashboard .notifications-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--flow_background);
}

.dashboard .tag {
  float: right;
  font-size: 12px;
  background: var(--fade_background);
  color: blue;
  padding: 2px 8px;
  border-radius: 5px;
}
.dashboard .view-bton {
  margin-top: 10px;
  background: var(--primary);
  color: var(--background);
  padding: 5px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  align-self: center;
}
.dashboard .filter-btn {
  margin-top: 10px;
  background: var(--background);
  color: var(--text);
  padding: 5px 12px;
  border: 1px solid var(--text);
  border-radius: 3px;
  cursor: pointer;
  align-self: center;
}

.dashboard .bottom-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  align-content: flex-start;
}

.dashboard .document-upload2,
.recent-cases {
  flex: 1 1;
  background: var(--background);
  box-shadow: 0 0 5px var(--faint_background);
  padding: 15px;
  border-radius: 5px;
}

.dashboard .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard .green {
  background: var(--faint_background);
  color: var(--success);
  padding: 2px 8px;
  border-radius: 5px;
}

.dashboard .red {
  background: var(--faint_background);
  color: var(--warning);
  padding: 2px 8px;
  border-radius: 5px;
}

.dashboard .orange {
  background: var(--faint_background);
  color: var(--orange);
  padding: 2px 8px;
  border-radius: 5px;
}

.dashboard .client-dot {
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 100%;
  padding: 10px;
  margin-right: 40px;
}

.dashboard .footer-summary {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: var(--fade_background);
  border-top: 1px solid var(--flow_background);
}

.dashboard .footer-box {
  width: 240px;
  height: 80px;
  padding: 20px;
  background: var(--background);
  color: var(--bold_text);
  text-align: center;
  font-size: 13px;
  border-radius: 5px;
  box-shadow: 0 0 5px var(--faint_background);
}
@media (max-width: 1200px) {
  .dashboard .mid-section {
    flex-direction: column;
  }
  .dashboard .stati {
    width: 100% !important;
  }
}
@media (max-width: 960px) {
  .dashboard .main-row {
    flex-direction: column;
  }

  .dashboard .right-tall-card {
    flex-direction: row;
  }
  .dashboard .mid-section {
    flex-direction: column;
  }

  .dashboard .stati .overview {
    flex-direction: column;
    background-color: red;
  }
}

.holeGraph {
  position: relative;
  width: 303px;
  height: 303px;
}

.holeGraph::after {
  content: "";
  position: absolute;
  width: 55%;
  height: 55%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
}

.dashboard .radio-group {
  display: flex;
  gap: 30px;
}

.dashboard .radioeffect {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

.dashboard .legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.dashboard .legend .civil {
  background-color: #5ca9fb;
}
.dashboard .legend .criminal {
  background-color: #ff2e3b;
}

.dashboard .legend .box {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  margin-right: 6px;
}
.legend li {
  display: flex;
  align-items: center;
}
.dashboard .legend .motion {
  background-color: #ffd964;
}
.dashboard .legend .affidavit {
  background-color: #12d940;
}

.chart_section {
  display: flex;
  gap: 8.75rem;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1024px) {
  .left-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard .radio-group {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .chart_section {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
  .left-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard .radio-group {
    flex-direction: row;
  }
}
@media (max-width: 425px) {
  .left-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .dashboard .radio-group {
    flex-direction: column;
  }
}

.overdue {
  /* border-radius: 16px; */
  background: rgba(255, 46, 59, 1);
  min-width: 7rem;

  /* color: var(--background);
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-width: 50px;
  justify-content: center; */
}
.soon {
  /* border-radius: 16px; */

  background: rgba(251, 191, 6, 1);
  min-width: 7.4rem;
  /* color: var(--background);
  display: flex;
  padding: 6px;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-width: 50px;
  justify-content: center; */
}
.upcoming {
  /* border-radius: 16px; */
  background: rgba(18, 217, 64, 1);
  min-width: 7rem;

  /* color: var(--background);
  display: flex;
  padding: 6px;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-width: 100px;
  justify-content: center; */
}

.overdue,
.soon,
.upcoming {
  padding: 8px 10px;
  font-weight: 400;
  font-size: 10px;
  color: white;
  min-height: 2rem;
  gap: 5px;
  width: -webkit-fit-content;
  width: fit-content;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  /* font-family: "Ezra", sans-serif; */
  font-family: "Inter", sans-serif;
}
.overdue svg,
.soon svg,
.upcoming svg {
  flex-shrink: 0;
}

.overdue span {
  line-height: 0;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .overdue,
  .soon,
  .upcoming {
    padding: 6px 8px;
    font-size: 10px;
    min-height: 1.5rem;
  }
}

@media (max-width: 480px) {
  .overdue,
  .soon,
  .upcoming {
    padding: 4px 6px;
    font-size: 9px;
    min-height: 1.2rem;
  }
}

.pagenate-new {
  display: flex;
  flex-direction: row;
  margin-top: 16px;
  margin-bottom: 16px;
  justify-content: space-between;
}

/* .pagenate-new div {
  color: var(--bold_text);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
}
.pagenate-new div.active {
  background-color: var(--primary) ;
  color: var(--background);
} */

/* .pagenate-new div:hover:not(.active) {background-color: #ddd;} */

.pagenate-new .p-part-1 {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.pagenate-new .p-part-1 select {
  position: relative;
  width: 5.374rem;
  height: 2.75rem;
  padding: 0.5rem;
  border: 1px solid #5ca9fb;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-appearance: none;
          appearance: none;
}

.select-wrapper {
  position: relative;
  display: inline-block;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
}

.select-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* @media (max-width: 768px) {
  .pagenate-new .p-part-1 select {
    height: 2rem;
    padding: 0.375rem 0.75rem;
    gap: 0.4rem;
  }
} */

.pagenate-new .p-part-2 {
  display: flex;
  gap: 4rem;
  width: -webkit-fit-content;
  width: fit-content;
}

.pagenate-new .p-part-2 > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
  color: #093325;
}

.pagenate-new .p-part-2 > div:hover {
  opacity: 0.7;
}

.pagenate-new .p-part-2 > div > span {
  padding-top: 3px;
}

@media (max-width: 768px) {
  .pagenate-new {
    flex-direction: column;
    gap: 1rem;
    /* align-items: center; */
  }

  .pagenate-new .p-part-1 {
    gap: 0.5rem;
  }

  .pagenate-new .p-part-2 {
    gap: 2rem;
  }

  .pagenate-new .p-part-2 > div {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .pagenate-new .p-part-1 select {
    height: 2rem;
    padding: 0.375rem 0.75rem;
    gap: 0.4rem;
  }
  .pagenate-new .p-part-2 {
    gap: 1rem;
  }

  .pagenate-new .p-part-2 > div {
    font-size: 12px;
  }
}

.sort_container {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.case-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.8125rem;
}

.search-inputs-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.search_wrapper {
  position: relative;
  width: 100%;
  background-color: #edeeef;
  max-width: 26.1rem;
  min-width: 26.1rem;
  border-radius: 1rem;
  border: 1px solid #000000;
  /* padding-top: 12px; */
  padding-right: 6px;
  /* padding-bottom: 12px; */
  padding-left: 18px;
  height: 3rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.search_wrapper input {
  /* max-width: 26.1rem; */
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 12px;
  position: inherit;
  /* z-index: 2; */
  background-color: transparent;
}
.search_wrapper input::placeholder {
  color: #919396;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5rem;
}
.search_btn {
  align-items: center;
  padding: 8px 4px;
  background: #5ca9fb;
  border-radius: 15px;
  font-size: 12px;
  color: #ffffff;
  min-width: 73px;
}
.search_icon {
  /* position: absolute;
  left: 18px;
  top: 43%;
  transform: translateY(calc(-50% + 4px)); */
}

.sort_button {
  padding-top: 0.1875rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: 1.5px solid #282828;
  background-color: transparent;
  outline: none;
  border-radius: 2rem;
  height: 1.68rem;
  min-width: 5.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 0.626rem;
  width: -webkit-fit-content;
  width: fit-content;
  cursor: pointer;
}

.select_wrapper {
  position: relative;
  display: inline-block;
}

.select_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 1.875rem;
}

.select_icon {
  position: absolute;
  right: 0.4375rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.sort_button.active {
  border-color: #5ca9f5;
  color: #5ca9f5;
}

.search-date-wrapper {
  display: flex;
  gap: 0.625rem;
}

@media (max-width: 768px) {
  .search_wrapper {
    min-width: 100%;
    max-width: 100%;
  }

  .search_wrapper input {
    max-width: 100%;
    min-width: 100%;
  }

  .case-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .search-inputs-section {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .search-wrapper {
    width: 100%;
  }

  .search-date-wrapper {
    width: 100%;
    flex-wrap: wrap;
  }

  .arc-case-table-wrapper {
    margin-bottom: 0.2rem;
  }
}

@media (max-width: 425px) {
  .search_wrapper {
    min-width: 100%;
    max-width: 100%;
  }

  .search_wrapper input {
    max-width: 100%;
    min-width: 100%;
    padding-inline: 2.5rem 1rem;
  }

  .case-header {
    margin-bottom: 2rem;
  }
}

@media (max-width: 1024px) {
  .case-header {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
  .search-inputs-section {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }
  .sort_container {
    align-items: start;
  }
}

.date-picker-container {
  position: relative;
  display: inline-block;
}

.date-picker-button {
  padding: 0.5rem;
  border: 1.5px solid #282828;
  background-color: transparent;
  border-radius: 2rem;
  font-size: 0.625rem;
  font-weight: 400;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  min-width: 6.1rem;
  text-align: center;
}

.date-picker-button:hover {
  background-color: #f5f5f5;
}

.date-picker-button:focus {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.date-picker-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 340px;
  padding: 1rem;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calendar-nav-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.calendar-nav-button:hover {
  background-color: #f1f5f9;
}

.calendar-month-year {
  font-weight: 600;
  font-size: 1rem;
}

.calendar-month-year-button {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.calendar-month-year-button:hover {
  background-color: #f1f5f9;
}

.month-year-picker {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
}

.month-year-selectors {
  display: flex;
  gap: 0.5rem;
}

.month-selector,
.year-selector {
  flex: 1 1;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background-color: white;
  font-size: 0.875rem;
  cursor: pointer;
}

.month-selector:focus,
.year-selector:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 2px;
  gap: 2px;
}

.calendar-day-header {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background-color: #f8fafc;
}

.calendar-day {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-day-empty {
  cursor: default;
}

.calendar-day-clickable {
  cursor: pointer;
}

.calendar-day-clickable:hover {
  background-color: #e2e8f0;
}

.calendar-day-selected {
  background-color: #1e293b;
  color: white;
}

.calendar-day-selected:hover {
  background-color: #334155;
}

.calendar-day-today {
  background-color: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
}

.calendar-day-today.calendar-day-selected {
  background-color: #1e293b;
  color: white;
}

@media (max-width: 480px) {
  .date-picker-dropdown {
    min-width: 280px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem;
  }

  .calendar-day {
    font-size: 0.75rem;
    min-height: 28px;
    padding: 0.25rem;
  }

  .calendar-day-header {
    font-size: 0.65rem;
    padding: 0.25rem;
  }
}

.receipt-section {
  width: 800px;
  max-width: 80%;
  padding: 20px;
  background-color: var(--background);
  box-shadow: 0 4px 10px var(--faint_background);
  margin: auto;
  text-align: left;
  border-radius: 5px;
}

.receipt-section h3 {
  text-align: center;
  font-size: 18px;
  margin-bottom: 15px;
}
.icons{
    text-align: center;
}

.payment-details .row {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.8;
}

.payment-details .row strong {
  flex: 1 1;
}

.payment-details .row span {
  flex: 1 1;
  text-align: right;
}

.receipt-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px; /* adjust spacing as needed */
  padding: 40px;/* align to the right side */
}

.receipt-buttons .btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: var(--primary);
  color: var(--background);
  white-space: nowrap;
  cursor: pointer;
  font-weight: 500;
}

.receipt-buttons .btn:hover {
  background-color: var(--primary);
}


.upload-questions {
  margin-top: 16px;
  width: 100%;
  padding: 0 12px;
  max-width: 706px;
}

.upload-questions p.note {
  color: #282828;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  margin-bottom: 32px;
}

.upload-questions .questions {
  margin-top: 10px;
  width: 100%;
}
.upload-questions .jis-checkbox {
  background-color: transparent !important;
}

.upload-questions .questions .input {
  width: 100%;
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.upload-questions .questions .input label {
  font-size: 17px;
  color: var(--bold_text);
  cursor: pointer;
}

.upload-questions .questions .second {
  max-height: 40px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.upload-questions .questions .second.open {
  max-height: 999px;
}

.upload-questions .questions .input.inner-input {
  margin-left: 20px;
}

.submit-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: 265px;
  height: 50px;

  background: #5ca9fb;
  border-radius: 16px;

  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-align: center;

  color: #ffffff;
  margin-left: auto;
  margin-top: 25px;
  margin-bottom: 25px;
}
.upload-question-action-btn {
  background-color: #5ca9fb;
  width: 100%;
  border-radius: 8px;
  padding: 16px 10px;
  outline: none;
  border: none;
  max-width: 600px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* ===== Overlay ===== */
.dialog-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--faint_background);
  z-index: 10;
}

/* ===== Wrapper (transition container) ===== */
.dialog-wrapper {
  position: fixed;
  top: -900px;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 500ms ease-in-out;
}

.dialog-wrapper--open {
  top: 0;
}

/* ===== Container (main dialog box) ===== */
.dialog-container {
  width: 80%;
  max-height: 90vh;
  background-color: #fff;
  overflow-y: auto;
  background-image: url(/static/media/logo.ddc7c64b7b5cb1fe187a.png);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  position: relative;
  padding-top: 20px;
}
.dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.8;
  background-color: rgba(236, 232, 232, 0.9);
}
/* .dialog-container::before {
  content: "";
  position: absolute;
  inset: 0 !important;
  border-radius: 15px;
  min-height: 100% !important;
  z-index: 1;
   opacity: 0.8;
  background-color: rgba(236, 232, 232, 0.9);
} */

/* ===== Header ===== */
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--primary);
  color: var(--background);
  padding: 16px;
  position: relative;
  z-index: 2;
}

.dialog-header__title {
  font-size: 24px;
  font-weight: 500;
  margin: 0 !important;
}

.dialog-header__close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Content ===== */
.dialog-content {
  height: 100%;
  position: relative;
  z-index: 2;
}

.dialog-body {
  padding: 16px;
  /* display: flex; */
  flex-wrap: wrap;
  width: 100%;
  gap: 10px;
}
.affidavit-document-title,
.confirm-document-title {
  font-weight: 500;
  font-size: 24px;
  color: #282828;
  line-height: 32px;
  margin-bottom: 32px;
}
.input-group {
  margin-top: 24px;
}
.select-group {
  margin-block: 24px;
}
.affidavit-option-dialog {
  padding-inline: 10px;
  background-color: rgba(255, 255, 255, 0.401);
}
.exhibit-check-box-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exhibit-check-box-wrapper input[type="checkbox"] {
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
          appearance: none;
  border: 0.75px solid #c8cace;
}
.exhibit-check-box-wrapper input[type="checkbox"]:checked {
  background-color: #5ca9fb;
}
.exhibit-check-box-wrapper input[type="checkbox"]:checked::after {
  content: "✔";
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
}
.exhibit-check-box-wrapper label {
  font-size: 14px;
  color: #000000;
  font-weight: 500;
  -webkit-user-select: none;
          user-select: none;
  line-height: normal;
}
.exhibit-button {
  width: 100%;
  padding: 16px 10px;
  background-color: #5ca9fb;
  outline: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  margin-top: 32px;
}
.exhibit-amount-payable {
  font-size: 20px;
  font-weight: 500;
  color: #282828;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.confirm-upload-dialog {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: 8px;
}
.confirm-document-description {
  max-width: 512px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #282828;
  line-height: 32px;
  margin-bottom: 32px;
}
.confirm-upload-btns {
  display: flex;
  gap: 14px;
  width: 100%;
}
.confirm-upload-btns button {
  flex: 1 1;
}
.confirm-upload-btns button:first-child {
  background-color: #5ca9fb;
  color: white;
  padding: 16px 10px;
  border-radius: 8px;
}
.confirm-upload-btns button:last-child {
  background-color: transparent;
  color: #5ca9fb;
  padding: 16px 10px;
  border-radius: 8px;
  border: 1px solid #5ca9fb;
}

@media (max-width: 480px) {
  .affidavit-document-title,
  .confirm-document-title {
    font-size: 18px;
    line-height: 28px;
  }
  .exhibit-check-box-wrapper label {
    font-size: 12px;
  }
}
@media (max-width: 376px) {
  .confirm-upload-btns {
    flex-direction: column;
  }
}

.view-doc {
  width: 100%;
  margin-top: 16px;
  display: flex;
  /* gap: 16px; */
  justify-content: space-between;
}

.body {
  flex: 1 1;
}

.view-doc .body .document {
  flex: 1 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* display: grid;
  grid-template-columns: repeat(3, 1fr); */
  gap: 25px;
}

.view-doc .body .document .doc-side {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.view-doc .body .document .doc-side .top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  background-color: green;
}

/* .view-doc .body .document .doc-side .top-bar button{
    width: 140px;
    background-color: #C21126;
    color: #FFF;
    border: none;
    outline: none;
    height: 35px;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: all .3s ease-in-out;
}

.view-doc .body .document .doc-side .top-bar button:hover{
    background-color: #333;
} */

.view-doc .top-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 24px;
}

.view-doc .top-nav .left-top {
  color: #333;
}

.view-doc .top-nav .left-top .top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-doc .top-nav .left-top p {
  font-size: 15px;
  margin-top: 6px;
}

.view-doc .body .document .doc-side .top-bar .namedoc {
  background-color: var(--faint_background);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 35px;
}

.view-doc .body .document .doc-side .top-bar .namedoc p {
  font-size: 14px;
  color: var(--bold_text);
}

.view-doc .body .document .doc-side .top-bar .namedoc p span {
  font-weight: 600;
}

.view-doc .body .document .wrapper {
  width: 100%;
  max-width: 100%;
  /* border: 1px solid var(--bold_text); */
  padding: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
}

.view-doc .body .document .wrapper .qr-image {
  position: absolute;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view-doc .body .document .wrapper .qr-image p {
  font-size: 13px;
  font-weight: 500;
}

.view-doc .body .document .wrapper .top-text {
  text-align: center;
}

.view-doc .body .document .wrapper .top-text h3 {
  font-size: 16px;
}

.view-doc .body .document .wrapper .top-text h3.place-title {
  text-decoration: underline;
  margin-top: 10px;
}

.view-doc .body .document .wrapper .names {
  width: 100%;
  padding-left: 20px;
  margin-top: 16px;
}

.view-doc .body .document .wrapper .names h3 {
  font-size: 16px;
}

.view-doc .body .document .wrapper .names .claimants,
.view-doc .body .document .wrapper .names .defendant {
  margin-top: 8px;
}

.view-doc .body .document .wrapper .names ol {
  margin-top: 8px;
}

.view-doc .body .document .wrapper .names ol li {
  font-size: 14px;
}

.view-doc .body .document .wrapper .doc-body {
  width: 100%;
  margin-top: 16px;
}

.view-doc .body .document .wrapper .doc-body h3 {
  text-align: center;
  text-decoration: underline;
}

.view-doc .body .document .wrapper .doc-body ol {
  margin-top: 16px;
  padding: 0 2rem;
}

.view-doc .body .document .wrapper .doc-body ol li {
  font-size: 14px;
  font-weight: 500;
}

.view-doc .body .document .wrapper .doc-body p {
  margin-top: 10px;
  font-weight: 500;
}

.view-doc .body .document .wrapper .right-sign {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 20px;
}

.view-doc .body .document .wrapper .right-sign img {
  width: 70px;
}

.view-doc .body .document .wrapper .right-sign ol {
  margin-top: 10px;
}

.view-doc .body .document .wrapper .right-sign ol li {
  font-weight: 500;
  font-size: 14px;
}

.view-doc .body .document .wrapper .stamp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.view-doc .body .document .wrapper .stamp img {
  width: 70px;
}

.view-doc .body .document .wrapper .left-last {
  width: 100%;
  padding-left: 20px;
}

.view-doc .body .document .wrapper .left-last h3 {
  font-size: 16px;
  text-decoration: underline;
}

.view-doc .body .document .wrapper .left-last ol {
  margin-top: 10px;
}

.view-doc .body .document .wrapper .left-last ol li {
  font-size: 14px;
  margin-top: 5px;
}

.view-doc .body .document .actions {
  max-width: 631px;
  width: 100%;
  /* margin-left: 16px; */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  gap: 40px;

  border: 1px solid #c8cace;
  border-radius: 12px;
}

.view-doc .body .document .actions p.title {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  color: #404040;
}

.view-doc .body .document .actions p.description {
  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  color: #404040;
  margin-top: 6px;
}

.view-doc .body .document .actions .btns {
  width: 100%;
  /* display: flex;
  align-items: center; */
  /* justify-content: center; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  grid-gap: 10px;

  gap: 10px;
  /* margin: 10px 0; */
  /* padding: 0 10px; */
  flex-direction: column;
}

.view-doc .body .document .actions .btns .upload input {
  display: none;
}
.cfo_input {
  display: flex;
  gap: 24px;
}

.cfo_input input {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #d4d4d4;
  background-color: #5ca9fb;
}

.view-doc .body .document .actions .btns .upload label {
  padding: 4px 8px;
  color: var(--background);
  border-radius: 5px;
  border: 2.5px solid var(--faint_background);
  background: var(--bold_text);
  box-shadow:
    -4px -4px 10px 0px var(--flow_background) inset,
    4px 4px 10px 0px var(--flow_background) inset;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.view-doc .body .document .actions .check-sign {
  margin-top: 24px;
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.view-doc .body .document .actions .check-sign label {
  font-size: 14px;
  color: var(--bold_text);
  font-weight: 500;
  cursor: pointer;
}

.view-doc .body .document .actions .details {
  width: 90%;
  margin-top: 10px;
  padding: 16px;
}

.view-doc .body .document .actions .details .row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
  border-bottom: 1px solid var(--border_color);
  padding-bottom: 5px;
  font-size: 14px;
  color: var(--bold_text);
}

.view-doc .body .document .actions .details .row p.answer {
  font-weight: 600;
}

.view-doc .body .document .actions .details .row p.answer.zoom-link {
  color: var(--view_doc);
  cursor: pointer;
}

.view-doc .body .document .actions .last-side {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-doc .warning,
.view-doc .dialog {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: -800px;
  bottom: 0;
  opacity: 0;
  left: 0;
  right: 0;
  background: var(--faint_background);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

.view-doc .warning.show,
.view-doc .dialog.open {
  opacity: 1;
  top: 0;
}

.view-doc .warning .container {
  width: 500px;
  background-color: var(--background);
  border-radius: 10px;
  padding: 10px;
}

.view-doc .warning .container .icon {
  position: fixed;
  background: var(--primary);
  color: var(--background);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.view-doc .warning .container .icon:hover {
  background-color: var(--bold_text);
}

.view-doc .warning .container .body {
  width: 100%;
  text-align: center;
}

.view-doc .warning .container .body p {
  font-size: 14px;
  color: var(--bold_text);
  margin: 10px 0;
}

/* .view-doc .warning .container .body button{
    width: 50px;
    height: 25px;
    cursor: pointer;
    background-color: #333;
    color: #FFF;
    border: none;
    outline: none;
    transition: all .3s ease-in-out;
    border-radius: 4px;
    font-family: inherit;
} */

.view-doc .dialog .container {
  width: 550px;
  background-color: var(--background);
  color: var(--bold_text);
  border-radius: 10px;
  padding: 10px;
}

.view-doc .dialog .container .icon {
  position: fixed;
  background: var(--primary);
  color: var(--background);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.view-doc .dialog .container .icon:hover {
  background-color: var(--bold_text);
}

.view-doc .dialog .container .body {
  width: 100%;
  text-align: center;
}

.view-doc .dialog .container .body .form {
  width: 100%;
  margin: 10px 0;
}
#payNow_btn#payNow_btn {
  background-color: #5ca9fb;
  color: #ffffff;
}

.view-doc .dialog .container .body .form .inputs {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.view-doc .dialog .container .body .form .input {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.view-doc .dialog .container .body .form .input input,
.view-doc .dialog .container .body .form .input select {
  width: 100%;
  height: 35px;
  border: 1px solid var(--border_color);
  border-radius: 3px;
  outline: none;
  padding-left: 10px;
  font-family: inherit;
}

.view-doc .dialog .container .body .form .input input:focus,
.view-doc .dialog .container .body .form .input select:focus {
  border: 1px solid var(--primary);
}

.view-doc .dialog .container .body .form .input label {
  font-size: 14px;
  font-weight: 500;
  color: var(--bold_text);
}

.append {
  flex: 1 1;
  /* min-width: 200px; */
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  /* max-width: 45%; */
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  height: 100%;
}

.append-btn {
  width: 100%;
  padding: 8px 10px;
  gap: 10px;

  background: #5ca9fb;
  border-radius: 8px;

  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  text-align: center;

  color: #ffffff;
}

.append-img-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 8px;
  border: 1px solid #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}

.append-time-stamp-container {
  height: 100%;
}

.append-img-card-container {
  min-height: 90px;
  justify-content: center;
}

.append-time-stamp-container input#append-time-stamp {
  text-align: center;
}

.append-img-card-container .append-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.append-img-card-container p {
  font-size: 12px;
  line-height: 13px;
  color: #404040;
  margin-top: 8px;
}

.upload-btn input[type="file"] {
  display: none;
}
.upload-btn {
  font-weight: 400;
  font-size: 12px;
  line-height: 13px;
  text-align: center;
  color: #5ca9fb;
  background: transparent;
  padding: 0;
  margin-bottom: 9px;
}
.timestamp {
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  color: #404040;
  margin-bottom: 16px;
}

.save-instrument-btn {
  padding: 16px 10px;

  background: #5ca9fb;
  border-radius: 8px;

  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  width: 100%;
  color: #ffffff;
}
.instrument-footer {
  width: 100%;
}

.upload-btn label {
  cursor: pointer;
}

.append-img-card-container .append-img-container {
  border-radius: 100%;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: #d9d9d9;
}

.append input[type="file"] {
  white-space: normal;
  word-wrap: break-word;

  overflow: auto;
}
.upload-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.upload-wrap h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.upload-wrap p {
  font-size: 14px;
  font-weight: 600;
  margin-block: 16px;
}
.upload-input-label {
  background-color: #5ca9fb;
  padding: 12px 16px;
  color: #ffff;
}
#upload-input {
  display: none;
}
.buttongrp {
  display: flex;
  flex-direction: column;
}
/* .append .append-create{
    width: 3000px;
} */

.create-case {
  width: 100%;
  margin-top: 16px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.create-case .body {
  flex: 1 1;
  max-height: 900px;
  overflow-y: scroll;
}

.create-case .body .top-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
}

.create-case .body .top-nav .left-top {
  color: var(--bold_text);
}

.create-case .body .top-nav .left-top .top {
  display: flex;
  gap: 10px;
  align-items: center;
}

.create-case .body .top-nav .left-top p {
  font-size: 15px;
  margin-top: 6px;
}

.create-case .body .top-nav p.nav-status {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.create-case .body .form {
  width: 100%;
  margin-top: 16px;
  padding: 0 12px;
  display: flex;
  /* justify-content: space-between; */
  gap: 64px;
}

.create-case .body .form .left-side {
  width: 90%;
  margin-bottom: 24px;
}

.create-case .body .form .left-side .input-create {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}
.input-create input {
  width: 100%;
  height: 52px;
  padding: 14px;
  border: 1px solid #c8cace !important;
  border-radius: 5px;
  outline: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  margin-top: 6px;
}
.input-create label {
  font-weight: 400;
  font-size: 12px;
  color: #282828;
}
.create-case .body .form .left-side .input-create label {
  color: var(--bold_text);
  font-size: 15px;
  font-weight: 500;
}

.create-case .body .form .left-side .input-create input {
  width: 100%;
  height: 52px;
  padding: 14px;
  border: 1px solid #c8cace !important;
  border-radius: 5px;
  outline: none;
  font-family: inherit;
}

.create-case .body .form .left-side .input-create input:focus,
.create-case .body .form .left-side .input-create textarea:focus {
  border: 1px solid var(--primary);
}

.create-case .body .form .left-side .input-create textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  outline: none;
  font-family: inherit;
}

.create-case .body .form .left-side .input-create input::placeholder,
.create-case .body .form .left-side .input-create textarea::placeholder {
  color: var(--text);
}

.create-case .body .form .left-side .input-create .btn-input {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.create-case .body .form .left-side .input-create .btn-input button {
  /* width: 70px; */
  /* height: 35px; */
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: 7px;
  gap: 2px;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--background);
  background-color: var(--primary);
  border-radius: 4px;
  font-family: inherit;
  opacity: 0.9;
}

.create-case .body .form .left-side .input-create .btn-input button.show {
  opacity: 1;
}

.add_btn_combo {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px 16px;
  background-color: #5ca9fb;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.add_btn_combo:hover {
  background-color: #4a98ea;
}

.create-case .body .form .append {
  /* width: 200px; */
  background-color: var(--faint_background);
  height: 200px;

  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border-bottom: var(--background);
  border-width: 1px;
  margin-bottom: 5px;
}

.create-case .body .form .append img {
  width: 70px;
}

.create-case .body .form .append .append-create {
  margin-top: 10px;
}

.create-case .body .form .append .append-create input {
  display: none;
}

.create-case .body .form .append .append-create label {
  cursor: pointer;
  margin-top: 8px;
  padding: 9px 8px;
  color: var(--background);
  border-radius: 5px;
  background-color: var(--primary);
  font-weight: 500;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.down {
  /* margin-top: 12px; */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  flex-wrap: wrap;
  gap: 10px;
  background: white;
  /* margin-bottom: 16px; */
}

.down p {
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;

  color: #282828;
}

.down .goBack {
  margin-top: 12px;
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.down .goBack:hover {
  color: var(--primary);
}

.down .goBack p {
  font-size: 15px;
  font-weight: 500;
  color: var(--bold_text);
}

.down .goBack:hover p {
  color: var(--primary);
}

.down .btns button {
  width: 180px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--background);
  border-radius: 5px;
  border: 2.5px solid var(--border);
  background: var(--primary);
  box-shadow:
    -4px -4px 10px 0px var(--faint_background) inset,
    4px 4px 10px 0px var(--faint_background) inset;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.down .btns button:hover {
  border: 2.5px solid var(--faint_select);
  background: var(--bold_text);
  box-shadow:
    -4px -4px 10px 0px var(--flow_background) inset,
    4px 4px 10px 0px var(--flow_background) inset;
}

.temp ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}
.subtemp ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
  margin-left: 16px;
}

.temp li {
  position: relative;
  padding: 10px;
  margin-bottom: 2px;
  background-color: #efefef;
  transition: all 0.25s ease-in-out;
}

.temp .action {
  position: absolute;
  top: 6px;
  right: 20px;
  padding: 4px 10px;
  background-color: #eee;
  cursor: pointer;
  display: flex;
  flex-direction: row;
}

.pagination {
  display: flex;
  gap: 4rem;
  width: -webkit-fit-content;
  width: fit-content;
}

.pagination > button {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
  color: #093325;
}

.pagination > button:disabled {
  opacity: 0.5;
}

.pagination > button:hover:not(:disabled) {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .pagination {
    gap: 2rem;
  }

  .pagination > button {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .pagination {
    gap: 1rem;
  }

  .pagination > button {
    font-size: 12px;
  }

  .view-doc .body .document .wrapper {
    padding: 2px;
  }

  .cfo-create-case .body .form .left-side {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cfo-create-case .body .form .left-side .input-create input {
    min-height: 44px;
    font-size: 13px;
  }

  .view-doc .body .document .actions .btns {
    grid-template-columns: 1fr;
  }

  .append {
    padding: 6px;
  }

  .create-case .body .form .left-side .input-create textarea {
    height: 100px;
    font-size: 13px;
  }

  .temp li {
    padding: 8px;
    font-size: 13px;
  }

  .add_btn_combo {
    font-size: 11px;
    padding: 8px 12px;
  }
}

@media (max-width: 1439px) {
  .view-doc .body .document {
    flex-direction: column;
  }

  .view-doc .body .document .actions {
    max-width: none;
    padding: 16px;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .view-doc {
    margin-top: 8px;
  }

  .view-doc .body .document {
    gap: 12px;
  }

  .view-doc .body .document .doc-side {
    max-width: 100%;
    width: 100%;
  }

  .view-doc .body .document .wrapper {
    padding: 4px;
  }

  .view-doc .body .document .actions {
    padding: 12px;
    gap: 16px;
  }

  .view-doc .body .document .actions .btns {
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .cfo-create-case .body .form .left-side {
    grid-template-columns: 1fr;
  }

  .action_wrapper {
    max-width: 100%;
  }
}

.create-case .body .top-nav .cfo-prepare-affidavit-section p {
  margin: 0;
}

.create-case .body .cfo-prepare-affidavit-form {
  padding: 0;
  margin-top: 24px;
}

.cfo-create-case {
  padding: 0;
  margin-top: 0;
}
.cfo-create-case .body {
  padding: 0;
  overflow: auto;
}
.cfo-create-case .body .top-nav {
  padding: 0;
}

.cfo-create-case .body .form .left-side {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.cfo-create-case .body .form .left-side .input-create {
  margin: 0;
}
.cfo-create-case .body .form .left-side .input-create label {
  font-size: 12px;
  line-height: 22px;
  color: #282828;
}
.cfo-create-case .body .form .left-side .input-create input::placeholder {
  color: #c8cace;
}

.cfo-create-case .body .form .left-side .input-create input {
  border: 1px solid #c8cace;
  min-height: 52px;
  border-radius: 8px;
  border-width: 1px;
  padding: 14px;
  font-size: 14px;
  line-height: 24px;
}

.cfo-create-case .body .form .left-side .append {
  border: 1px solid #e5e7eb;
  background-color: transparent;
  margin-top: 24px;

  border-radius: 8px;
  padding: 8px;
}
.cfo-create-case .body .form .left-side .append {
  border: 1px solid #e5e7eb;
  background-color: transparent;

  border-radius: 8px;
  padding: 8px;
  justify-content: flex-start;
  height: auto;
}

.cfo-create-case .body .form .left-side .append .instrument-img {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #f3f4f6;
  margin-bottom: 20px;
}
.cfo-create-case .body .form .left-side .append .instrument-img p {
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #404040;
  text-align: center;
  margin-top: 8px;
}

.cfo-create-case .body .form .left-side .append .instrument-img img {
  width: 50px !important;
  height: 50px !important;
  object-fit: cover;
  overflow: hidden;
  margin: auto;
  border-radius: 100%;
}
.cfo-create-case .body .form .left-side .append .buttongrp {
  width: 100%;
  gap: 8px;
}
.cfo-create-case .body .form .left-side .append .append-create,
.cfo-create-case .body .form .left-side .append label {
  width: 100%;
  margin: 0;
}
.cfo-create-case .body .form .left-side .append label {
  display: inline-block;
  text-align: center;
}

.cfo-create-case .body .form .left-side .append .apply-btn {
  border-radius: 8px;
  padding-top: 8px;
  padding-right: 10px;
  padding-bottom: 8px;
  padding-left: 10px;
  border: 1px solid #5ca9fb;
  color: #5ca9fb;
  width: 100%;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}
.apply-btn {
  border-radius: 8px;
  padding-top: 8px;
  padding-right: 10px;
  padding-bottom: 8px;
  padding-left: 10px;
  border: 1px solid #5ca9fb;
  color: #5ca9fb;
  width: 100%;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}
.apply_btn {
  color: #5ca9fb;
  font-size: 12;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action_wrapper {
  flex-grow: 1;
  max-width: 631px;
  width: 100%;
}

.paragraph-section {
  width: 100%;
  margin-top: 24px;
}
.cfo-create-case .down {
  padding: 0;
}

.cfo-create-submit-btn {
  width: 100%;
}

.cfo-create-submit-action-btn {
  width: 100%;
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}
.append_timestamp {
  background-color: #5ca9fb;
  padding: 8px 10px;
  height: 39px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cfo-create-submit-btn .jis-button.outline {
  border-width: 1px;
}

.cfo-create-submit-btn .jis-button.primary,
.cfo-create-submit-btn .jis-button.outline {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  padding-top: 12px;
  padding-right: 10px;
  padding-bottom: 12px;
  padding-left: 10px;
  text-align: center;
}

/* Additional responsive improvements */
@media (max-width: 640px) {
  .view-doc .top-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .view-doc .body .document .doc-side {
    min-width: 0;
  }

  .create-case .body .form {
    gap: 24px;
  }

  .cfo-create-submit-action-btn {
    flex-direction: column;
  }

  .cfo-create-submit-btn .jis-button.primary,
  .cfo-create-submit-btn .jis-button.outline {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .view-doc .body .document .wrapper {
    padding: 1px;
  }

  .cfo-create-case .body .form .left-side .input-create input {
    min-height: 40px;
    font-size: 12px;
    padding: 10px;
  }

  .append-btn,
  .save-instrument-btn {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* Template Media Styles */
.jis-media-container {
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  clear: both;
}

/* Fallback styles for old inline-styled documents */
.htmlwrap div[style*="float:right"] {
  float: right !important;
  margin: 0 0 10px 10px !important;
}

.htmlwrap div[style*="float:left"] {
  float: left !important;
  margin: 0 10px 10px 0 !important;
}

.htmlwrap div[style*="text-align:left"] {
  text-align: left !important;
  margin: 10px 0 !important;
}

.htmlwrap div[style*="text-align:right"] {
  text-align: right !important;
  margin: 10px 0 !important;
}

.htmlwrap div[style*="text-align:center"] {
  text-align: center !important;
  margin: 10px 0 !important;
}

.htmlwrap div[style*="clear: both"] {
  clear: both !important;
  display: block !important;
}

.htmlwrap img {
  max-width: 100%;
  height: auto;
}

/* Specific wrapper and container styles for preview pages */
.view-temp .paper-doc {
  background-color: white;
  padding: 40px;
  max-width: 850px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  min-height: 100vh;
}

.view-temp .htmlwrap {
  width: 100%;
  max-width: 100%;
  line-height: 1.6;
  color: #282828;
  font-size: 14px;
}

/* Ensure proper clearing of floats in htmlwrap */
.htmlwrap::after {
  content: "";
  display: table;
  clear: both;
}

/* Ensure modal iframes don't interfere with document styling */
.jis-dialog iframe,
.modal iframe,
[class*="dialog"] iframe,
[class*="Dialog"] iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

@media print {
  @page {
    margin: 0;
    size: auto;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    margin: 1.6cm !important;
    padding: 0 !important;
  }

  .view-temp .paper-doc {
    box-shadow: none;
    padding: 20px;
  }

  .no-print {
    display: none !important;
  }

  /* Additional reset for print */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.jis-media-container.jis-float-right {
  float: right;
  margin: 0 0 10px 10px;
  clear: right;
}

.jis-media-container.jis-float-left {
  float: left;
  margin: 0 10px 10px 0;
  clear: left;
}

/* Special handling for cashier seal and stamp to appear on same line */
.jis-media-container.jis-cashier-seal-container {
  float: left;
  clear: none;
  margin: 10px 10px 10px 0;
  width: auto;
}

.jis-media-container.jis-cashier-stamp-container {
  float: right;
  clear: none;
  margin: 10px 0 10px 10px;
  width: auto;
}

/* Clear floats after cashier stamp so next content goes below */
.jis-media-container.jis-cashier-stamp-container::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/* Alternative: create a clearfix wrapper */
.jis-cashier-row-clearfix {
  clear: both;
  display: block;
  content: "";
  height: 0;
}

.jis-media-container.jis-align-left {
  justify-content: flex-start;
  text-align: left;
}

.jis-media-container.jis-align-right {
  justify-content: flex-end;
  text-align: right;
}

.jis-media-container.jis-align-center {
  justify-content: center;
  text-align: center;
}

.jis-media-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 5px;
}

.jis-media-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.jis-media-inline .jis-media-img {
  display: inline-block;
  vertical-align: middle;
}

/* Specific media element styles */
.jis-qr-code,
.jis-passport,
.jis-cashier-seal,
.jis-cashier-stamp,
.jis-cfo-seal,
.jis-deponent-seal,
.jis-cfo-stamp,
.jis-signature-deponent,
.jis-legal-signature {
  border: none;
  background: transparent;
}

.jis-initial {
  width: 80px;
  height: auto;
}

/* Template List Styles */
.jis-list-container {
  margin: 16px 0;
  padding: 0 16px;
}

.jis-numbered-list {
  list-style-type: decimal;
  margin: 0;
  padding-left: 25px;
}

.jis-numbered-list .jis-list-item {
  margin: 8px 0;
  padding-left: 5px;
  line-height: 1.6;
  color: #282828;
  font-size: 14px;
}

/* Template Paragraph Styles */
.jis-paragraph-container {
  margin: 16px 0;
  padding: 0 16px;
}

.jis-paragraph-item {
  margin: 12px 0;
}

.jis-paragraph-main {
  font-size: 14px;
  line-height: 1.6;
  color: #282828;
  margin-bottom: 8px;
  font-weight: 500;
}

.jis-paragraph-sub-container {
  margin: 8px 0 8px 25px;
  padding-left: 10px;
  border-left: 2px solid #e5e7eb;
}

.jis-paragraph-sub-item {
  font-size: 14px;
  line-height: 1.6;
  color: #404040;
  margin: 6px 0;
  padding-left: 5px;
}

/* Print styles for better PDF generation */
@media print {
  .jis-media-container {
    page-break-inside: avoid;
  }

  .jis-paragraph-item {
    page-break-inside: avoid;
  }

  .jis-media-img {
    max-width: 100px;
  }
}

/* Responsive adjustments for media elements */
@media (max-width: 768px) {
  .jis-media-container.jis-float-right,
  .jis-media-container.jis-float-left {
    float: none;
    margin: 10px auto;
    justify-content: center;
  }

  .jis-media-img {
    max-width: 80px;
  }

  .jis-list-container,
  .jis-paragraph-container {
    padding: 0 8px;
  }

  .jis-numbered-list {
    padding-left: 20px;
  }

  .jis-paragraph-sub-container {
    margin-left: 15px;
  }
}

@media (max-width: 480px) {
  .jis-media-img {
    max-width: 60px;
  }

  .jis-initial {
    width: 60px;
  }

  .jis-numbered-list .jis-list-item,
  .jis-paragraph-main,
  .jis-paragraph-sub-item {
    font-size: 13px;
  }

  .jis-list-container,
  .jis-paragraph-container {
    margin: 12px 0;
  }
}

.scheduler-container {
  display: flex;
  flex-direction: column;
  /* font-family: sans-serif; */
  font-family: "Inter", sans-serif;
}

.scheduler-header {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  background-color: #f0f0f0;
}

.time-column {
  background: #fff;
}

.day-column {
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

.scheduler-body {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  position: relative;
}

.time-row {
  display: contents;
}

.time-label {
  padding: 5px;
  text-align: right;
  border-top: 1px solid #ddd;
  font-size: 12px;
}

.day-cell {
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  height: 60px;
  position: relative;
}

.event-card {
  position: absolute;
  background-color: #3f51b5;
  color: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1;
  /* width: calc(20% - 10px); */
  margin-left: 5px;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-trigger {
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  -webkit-user-select: none;
          user-select: none;
}

.dropdown-menu {
  position: absolute;
  top: 25px;
  right: 5px;
  background-color: white;
  color: #333;
  border-radius: 4px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  z-index: 2;
  min-width: 80px;
  overflow: hidden;
}

.dropdown-menu div {
  padding: 6px 10px;
  cursor: pointer;
}

.dropdown-menu div:hover {
  background-color: #f0f0f0;
}
@keyframes blinkLine {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

.current-time-line {
  position: absolute;
  height: 2px;
  background-color: red;
  width: 100%;
  animation: blinkLine 1s infinite;
  z-index: 5;
  pointer-events: none;
}

/* Calendar Container and Header */
.calendar-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 20px;
  margin: 0 auto;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-button {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-button:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.month-year {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  min-width: 200px;
}

.header-right {
  display: flex;
  gap: 8px;
}

.view-button {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  background: white;
  color: #6b7280;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.view-button:hover {
  background: #f9fafb;
}

.view-button.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.today-button {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  background: white;
  color: #1f2937;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.today-button:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Month View Styles */
.month-view {
  width: 100%;
}

.days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 0;
  gap: 0;
  margin-bottom: 8px;
}

.day-name {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  padding: 8px 0;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.day-cell {
  background: white;
  min-height: 100px;
  padding: 8px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s;
}

.day-cell:hover {
  background: #f9fafb;
}

.day-cell.other-month {
  background: #fafafa;
}

.day-cell.other-month .day-number {
  color: #d1d5db;
}

.day-number {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 1px;
}

.day-number.today {
  background: #3b82f6;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.events-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
}

.event {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap-mode: nowrap;
  max-width: 200px;
  transition: opacity 0.2s;
  position: relative;
}

.event:hover {
  opacity: 0.9;
}
.event-popup-overlay {
  position: absolute;

  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  max-width: 100%;
}
.popup-item {
  padding: 8px 10px;
  background-color: white;
  border: 1px solid rgb(99, 99, 240);
  font-size: 12px;
  cursor: pointer;
}
.popup-item:hover {
  background-color: #f3f4f6;
  border-color: #6366f1;
}

.event-popup-content {
  border-radius: 10px;
  max-width: 100%;
}

/* Event Colors */
.event.blue,
.event.default {
  background: #dbeafe;
  color: #1e40af;
}

.event.red {
  background: #fee2e2;
  color: #991b1b;
}

.event.green {
  background: #d1fae5;
  color: #065f46;
}

.event.yellow {
  background: #fef3c7;
  color: #92400e;
}

.event.purple {
  background: #e9d5ff;
  color: #6b21a8;
}

.event.orange {
  background: #fed7aa;
  color: #9a3412;
}

.event.pink {
  background: #fce7f3;
  color: #9f1239;
}

.event.link {
  text-decoration: underline;
}

.more-events {
  font-size: 11px;
  color: #6b7280;
  padding: 2px 6px;
  font-style: italic;
}

/* Week View Styles */
.week-view {
  width: 100%;
  overflow-x: auto;
}

.week-header {
  display: grid;
  grid-template-columns: 176px repeat(7, 1fr);
  grid-gap: 1px;
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
  border-bottom: 2px solid #d1d5db;
}

.time-column-header {
  background: #f9fafb;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-align: left;
  border-right: 1px solid #e5e7eb;
}

.week-day-header {
  background: white;
  padding: 12px;
  text-align: center;
  border-right: 1px solid #e5e7eb;
}

.week-day-header:last-child {
  border-right: none;
}

.week-day-name {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.week-day-date {
  font-size: 12px;
  color: #6b7280;
}

.week-grid {
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #f9fafb;
}

.time-row {
  display: grid;
  grid-template-columns: 176px repeat(7, 1fr);
  min-height: 60px;
  border-bottom: 1px solid #e5e7eb;
}

.time-row:last-child {
  border-bottom: none;
}

.time-label {
  padding: 8px;
  font-size: 14px;
  color: #6b7280;
  text-align: left;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
}

.time-cell {
  background: white;
  padding: 4px;
  border-right: 1px solid #e5e7eb;
  position: relative;
  min-height: 60px;
}

.time-cell:last-child {
  border-right: none;
}

.lunch-break {
  background: #fef3c7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lunch-label {
  font-size: 12px;
  font-weight: 500;
  color: #92400e;
}

.week-event {
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.week-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.week-event-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.week-event-description {
  font-size: 11px;
  opacity: 0.9;
}

/* Week Event Colors */
.week-event.blue {
  background: #dbeafe;
  color: #1e40af;
  border-left: 3px solid #3b82f6;
}

.week-event.red {
  background: #fee2e2;
  color: #991b1b;
  border-left: 3px solid #ef4444;
}

.week-event.green {
  background: #d1fae5;
  color: #065f46;
  border-left: 3px solid #10b981;
}

.week-event.yellow {
  background: #fef3c7;
  color: #92400e;
  border-left: 3px solid #f59e0b;
}

.week-event.purple {
  background: #e9d5ff;
  color: #6b21a8;
  border-left: 3px solid #8b5cf6;
}

.week-event.orange {
  background: #fed7aa;
  color: #9a3412;
  border-left: 3px solid #f97316;
}

.week-event.pink {
  background: #fce7f3;
  color: #9f1239;
  border-left: 3px solid #ec4899;
}

/* Responsive Design */
@media (max-width: 768px) {
  .calendar-container {
    padding: 15px;
  }

  .calendar-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .header-left {
    justify-content: center;
  }

  .header-right {
    justify-content: center;
  }

  .day-cell {
    min-height: 80px;
    padding: 6px;
    margin-inline: 2px;
  }

  .day-number {
    font-size: 12px;
  }

  .event {
    font-size: 10px;
    padding: 1px 4px;
  }

  .week-view {
    font-size: 11px;
  }

  .time-column-header,
  .time-label {
    text-align: left;
  }

  .week-grid {
    grid-template-columns: 60px repeat(7, minmax(80px, 1fr));
  }
}

/* Print Styles */
@media print {
  .calendar-container {
    box-shadow: none;
    padding: 0;
  }

  .nav-button,
  .view-button,
  .today-button {
    display: none;
  }

  .calendar-header {
    border-bottom: 2px solid #000;
  }

  .month-year {
    text-align: center;
    width: 100%;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event {
  animation: fadeIn 0.3s ease-out;
}

/* Accessibility */
.calendar-container:focus-visible,
.day-cell:focus-visible,
.nav-button:focus-visible,
.view-button:focus-visible,
.today-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.dm-doc-create {
  width: 100%;
  margin-top: 16px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  overflow-x: hidden;
}

.dm-doc-create .body {
  flex: 1 1;
}

.write-up-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* padding: 0 16px; */
  padding-right: 16px;
  gap: 16px;
}

.write-up-box .content-edit {
  width: 60%;
  background-color: #f6f5f5;
  padding: 16px;
}

.write-up-box .content-edit .form-inp {
  border: 1px solid #cdd3dd;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: 3px;
  color: #333;
  background-color: #ebebeb;
}

.write-up-box .content-edit .form-inp label {
  font-size: 14px;
  font-weight: 600;
  color: #6e728a;
}

.write-up-box .content-edit .form-inp input {
  height: 40px;
  font-family: inherit;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  color: #333;
}

.write-up-box .content-edit .form-inp input::placeholder {
  color: #a2a4ac;
}

.write-up-box .content-edit .tick-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0;
}

.write-up-box .content-edit .tick-box label {
  font-size: 13px;
  color: #333;
  font-weight: 600;
}

.write-up-box .content-edit .quill-box {
  width: 100%;
  margin: 16px 0;
  /* border: none; */
  /* height: 500px; */
}

.ck-editor__editable {
  min-height: 500px;
}

.table {
  width: 100%;
}

.table table {
  width: 100%;
  border-collapse: collapse;
}

.table table td {
  padding: 8px;
}

.write-up-box .content-edit .quill-box .quill {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.write-up-box .content-edit a {
  text-decoration: none;
}

.write-up-box .copy-paste {
  width: 35%;
  background-color: #f6f5f5;
  padding: 10px;
}

.write-up-box .copy-paste .placeholders {
  width: 100%;
}

.write-up-box .copy-paste .placeholders .place-copy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed #6e728a;
  padding: 8px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  border-radius: 4px;
}

.write-up-box .copy-paste .placeholders .place-copy .tap-copy {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #a2a4ac;
}
.write-up-box .copy-paste .placeholders .place-copy .manual-copy {
  display: flex;
  align-items: center;
  gap: 6px;

  color: black;
}

.write-up-box .copy-paste .placeholders .back-to-create {
  margin: 16px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #c21126;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.write-up-box .copy-paste .placeholders .back-to-create a {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: 100%;
  gap: 4px;
  text-decoration: none;
  color: #c21126;
  font-size: 14px;
}

.write-up-box .copy-paste .placeholders .back-to-create:hover {
  background-color: #cdd3dd;
}

.write-up-box .content-edit .sep-btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
}

.success-payment-wrapper {
  width: 90%;
  max-width: 706px;
  padding-inline: 20px;
  text-align: center;
  flex-direction: column;
  display: flex;
  gap: 32px;
}
.success-payment-wrapper h2 {
  font-size: 24px;
  font-weight: 500;
  color: #282828;
}
.success-payment-wrapper p {
  font-size: 32px;
  font-weight: 500;
  color: #282828;
}
.success .success-box a {
  text-decoration: none;
}

@media screen and (max-width: 970px) {
  .write-up-box {
    flex-direction: column;
  }
  .write-up-box .content-edit,
  .write-up-box .copy-paste {
    width: 100%;
  }
}

.editor-wrapper {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.toolbar {
  padding: 8px;
  border-bottom: 1px solid #eee;
  background: #f9f9f9;
}

.toolbar button {
  margin-right: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.editor-content {
  flex: 1 1;
  padding: 12px;
  min-height: 200px;
  overflow-y: auto;
}

.ProseMirror {
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: 16px;
  line-height: 1.6;
  min-height: 400px;
  border: 2px solid #f3eeee;
  

}

.ProseMirror table {
  width: 100%;
  border-collapse: collapse;
}

.ProseMirror th,
.ProseMirror td {
  border: 1px solid #ddd;
  padding: 8px;
}

/* Button to open modal */
.open-modal-btn {
  background-color: #3b82f6;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.open-modal-btn:hover {
  background-color: #2563eb;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Modal content */
.modal-content {
  background-color: white;
  border-radius: 16px;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Modal header */
.modal-header {
  background-color: #5ca9fb;
  color: white;
  padding: 11.5px 16px;
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 145%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Modal body */
.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
  background-color: #f9fafb;
}

/* Sections */

.affidavit-templates-container {
  background-color: #ffffff;
}
.section {
  margin-bottom: 32px;
}

.section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #1f2937;
  margin: 0 0 16px 0;
}

/* Templates grid */
.templates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

/* Template card */
.template-card {
  background: white;
  border: 1px solid #c8cace;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
  max-width: 235px;
}
.template-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: #5ca9fb;
}

.template-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 50%;
}

.template-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.select-btn {
  background: none;
  border: none;
  color: #5ca9fb;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.case-template-card .template-info {
  align-items: flex-start;
  min-width: 0;
}
.case-template-card .template-title {
  overflow-wrap: anywhere;
  display: block;
  min-width: 0;
}
.case-template-card.template-card {
  justify-content: space-between;
  min-width: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .modal-content {
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-header {
    border-radius: 0;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
  }

  .welcome-text {
    font-size: 12px;
  }

  .templates-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .template-card {
    padding: 12px;
  }

  .template-title {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .templates-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .template-card {
    max-width: 100%;
  }
}

.newreceipt {
  background: #fff;
  max-width: 900px;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.newreceipt .header {
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.newreceipt .header img {
  width: 60px;
  margin-bottom: 10px;
}

.newreceipt .title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
}

.newreceipt .section {
  margin-top: 20px;
}

.newreceipt .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.newreceipt.col {
  width: 48%;
  margin-bottom: 12px;
  /* font-family: "popins"; */
  font-family: "Inter", sans-serif;
}

.newreceipt table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.newreceipt th,
.newreceipt td {
  border: 1px solid #aaa;
  padding: 8px;
  text-align: left;
  font-family: "Inter", sans-serif;
  /* font-family: 'popins'; */
}

.newreceipt .totals {
  margin-top: 10px;

  font-size: 20px;

  word-wrap: break-word;
  line-height: 1.5;
  color: rgb(10, 10, 218);
  text-align: right;
}

@media (max-width: 600px) {
  .newreceipt .col {
    width: 100%;
  }

  .newreceipt .header img {
    width: 50px;
  }

  .newreceipt .title {
    font-size: 16px;
  }
}

.landing {
  background: #f5f7fe;
  color: #26292d;
  /* font-family: "Barlow", sans-serif; */
  font-family: "Inter", sans-serif;
  font-style: normal;
  width: 100%;
}

.landing .nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 4%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.landing .nav img {
  width: 60px;
}

.landing .nav-links {
  display: flex;
  gap: 1.5rem;
  z-index: 999;
}

.landing .nav-links a {
  text-decoration: none;
  color: #1c1c1c;
  font-weight: 500;
}

.landing .call-btn a {
  background-color: #3f68fc;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
}
.landing .dropdown {
  position: relative;
}
.landing .nav-links .sub-menu {
  padding: 18px 20px 18px 18px;
  left: -27px;
  margin-top: 15px;
}
.landing .sub-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: #fff;
  top: 100%;
  visibility: hidden;
  width: -webkit-max-content;
  width: max-content;
  opacity: 0;
  border: 0;
  box-shadow: 0 4px 15px rgba(1, 15, 28, 0.06);
  border-radius: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: all 0.4s ease 0s;
  z-index: 1000;
}
.landing .sub-menu span {
  margin-bottom: 10px;
}
.landing .menu-item :hover {
  color: #3f68fc;
}

.landing .dropdown:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
}

.landing .welcome {
  color: #3f68fc;
  font-weight: 600;
  font-size: large;
  margin-bottom: 1rem;
  margin-left: 4rem;
}
/* .landing .hero-content h1 {
  font-size: 70px;
   font-family: "Barlow", sans-serif;
  font-weight: 700;
  /* line-height: 1.5; 
  margin-bottom: 1rem;
  margin-left: 3rem;
}*/
.landing .hero-content .tech {
  color: #3f68fc;
  font-family: "Inter", sans-serif;
  /* font-family: "Barlow", sans-serif; */
  font-weight: 700;
}

.landing .hero-content p {
  width: 80%;
  margin: 0 0 2rem 3rem;
  color: #767575;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.landing .hero-buttons {
  display: flex;
  gap: 1rem;
  margin-left: 3rem;
}
*/ .landing .btn {
  padding: 0.8rem 1.5rem;
  border-radius: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}
.landing .btn.blue {
  background-color: #3f68fc;
  color: #fff;
  padding: 15px, 30px;
}
.landing .btn.dark {
  background-color: #1c1c1c;
  color: #fff;
  padding: 15px, 30px;
}

.landing .hamburger {
  display: none;
}

.landing .mobileTag {
  display: none;
}

@media (max-width: 960px) {
  /*  .landing  .hero {
    flex-direction: column;
    text-align: center;
  }

 .landing  .hero-content, .hero-image {
    max-width: 100%;
  } */

  .landing .nav-links {
    display: none;
  }
  .landing .hamburger {
    display: flex;
  }

  .landing .hero {
    display: none;
  }
  .landing .mobileTag {
    display: flex;
    padding: 24px;
    text-align: center;
  }
}
.landing .services-section {
  padding: 5rem 4%;
  background: #fff;
  text-align: center;
}

.landing .section-header h5 {
  color: #3f68fc;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.landing .section-header h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 3rem;
}

.landing .services-grid {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.landing .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  grid-gap: 2rem;
  gap: 2rem;
  justify-items: center;
}

@media (max-width: 900px) {
  .landing .services-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (max-width: 600px) {
  .landing .services-grid {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }
}

.landing .service-card {
  flex: 0 0 auto;
  min-width: 320px; /* wider card width */
  max-width: 380px;
  background: #fafafa;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: 0.3s;
  scroll-snap-align: start;
  text-align: center;
}
.landing .services-grid::-webkit-scrollbar {
  height: 8px;
}

.landing .services-grid::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 4px;
}

.landing .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
  background: #dbe8ff;
}

.landing .icon-box {
  background: #eaedf5;
  border-radius: 10px;
  width: 75px;
  height: 75px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing .icon-box svg {
  width: 40px;
  height: 40px;
  stroke: #3f68fc; /* primary icon color */
  stroke-width: 1.5;
}

.landing .icon-box svg:hover {
  stroke: #1e40af;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.landing .service-card h3 {
  font-size: 1.1rem;
  color: #1c1c1c;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.landing .service-card p {
  font-size: 0.95rem;

  margin: 0 0 2rem 3rem;
  color: #767575;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.landing .read-link {
  color: #3f68fc;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.landing .read-link:hover {
  text-decoration: underline;
}
.about-section {
  padding: 4rem 5%;
  background: #f4f6fc;
}

.landing .about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.landing .about-media {
  flex: 1 1 45%;
  position: relative;
}

.landing .main-image {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.landing .main-image img {
  width: 100%;
  border-radius: 15px;
}

.landing .client-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.landing .client-badge h3 {
  color: #3f68fc;
  font-size: 1.5rem;
  margin: 0;
}

.landing .client-badge p {
  font-size: 0.9rem;
  margin: 0;
}

.landing .image-box {
  position: absolute;
  bottom: -30px;
  left: 20px;
  width: 180px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.landing .image-box img {
  width: 100%;
  display: flex;
}

.landing .about-content {
  flex: 1 1 50%;
}

.landing .label {
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #3f68fc;
  margin-bottom: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.landing .about-content h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #1c1c1c;
  margin-bottom: 1rem;
}

.landing .about-content p {
  margin: 0 0 2rem 0rem;
  color: #767575;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.landing .cta-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.landing .btn-primary {
  background: #3f68fc;
  color: white;
  padding: 0.9rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.landing .btn-primary:hover {
  background: #2f54d4;
}

.landing .btn-call {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #e5ebff;
  padding: 0.8rem 1rem;
  border-radius: 30px;
  color: #111;
  text-decoration: none;
}

.landing .btn-call svg {
  font-size: 18px;
  color: #3f68fc;
  background: #d6e1ff;
  padding: 0.6rem;
  border-radius: 50%;
}
.landing .commitment-section {
  padding: 4rem 5%;
  background: #fff;
}

.landing .commitment-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2%;
  align-items: center;
}

.landing .commitment-image {
  flex: 1 1 400px;
  max-width: 750px;
  border-radius: 80px 20px 120px 20px;
  background: #eef2ff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.landing .commitment-image img {
  width: 96%;
  height: 500px;
  display: block;
  border-radius: 80px 20px 170px 20px;
}

.landing .commitment-content {
  flex: 1 1 500px;
}

.landing .section-header h5 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  color: #3f68fc;
  margin-bottom: 10px;
}

.landing .section-header h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 15px;
  color: #111827;
}

.landing .section-header p {
  font-size: 1rem;

  color: #555;
  margin-bottom: 25px;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.landing .commitment-points .commitment-item {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.landing .icon-circle {
  background-color: #eef2ff;
  color: #3f68fc;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing .icon-circle svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.landing .commitment-item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1f2937;
}

.landing .commitment-item p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  letter-spacing: 0.3px;
}
.landing .footer {
  background-image: url(/static/media/vector.afaec69eff242269c41c.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 3rem 5%;
  font-family: "Inter", sans-serif;
  /* font-family: "Segoe UI", sans-serif; */
  border-radius: 30px 30px 0 0;
}

.landing .subscribe-section {
  text-align: center;
  margin-bottom: 2rem;
}

.landing .subscribe-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.landing .subscribe-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.landing .subscribe-form input {
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  border: none;
  outline: none;
  font-size: 1rem;
  width: 300px;
}

.landing .subscribe-form button {
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  background: #3f68fc;
  color: #fff;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.landing .footer hr {
  border: none;
  border-top: 1px solid #1e1e1e;
  margin: 2rem 0;
}

.landing .footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.landing .footer-col h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  position: relative;
}

.landing .footer-col h4::after {
  content: "";
  width: 30px;
  height: 3px;
  background: #3f68fc;
  position: absolute;
  left: 0;
  bottom: -5px;
}

.landing .footer-col p,
.landing .footer-col li a {
  color: #aaa;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  text-decoration: none;
  letter-spacing: 0.3px;
}

.landing .footer-col ul {
  list-style: none;
  padding: 0;
}

.landing .footer-col li {
  margin: 0.5rem 0;
}
.landing .footer-col li :hover {
  color: #3f68fc;
}
.landing .footer-col li::before {
  content: "›";
  margin-right: 8px;
  color: #aaa;
}
.landing .footer-col li::before :hover {
  color: #3f68fc;
}
.landing .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0b0b0b;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 0.5rem;
  font-size: 1.2rem;
  text-decoration: none;
}
.landing a svg {
  width: 20px;
  height: 20px;
  color: #0b0b0b;
}
.landing .store-badge {
  display: block;
  width: 140px;
  margin-bottom: 1rem;
  border-radius: 1.5rem;
}

.landing .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-top: 2rem;
}
.landing hr {
  border: none;
  height: 1.5px;
  background-color: #6f6f6f;
  margin: 0px 0;
}

.landing .footer-bottom a {
  color: #3f68fc;
  margin-left: 1rem;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* Slideshow container */
.landing .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.landing .active {
  color: #3f68fc !important;
}

/* Fading animation */
.landing .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.div-heros-section {
  background-size: cover;
  background-position: center;
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div-heros-overlay {
  background-color: rgba(0, 0, 0, 0.2); /* dark overlay */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: white;
}

.div-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.div-heros-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.div-heros-nav {
  font-size: 18px;
  color: #fff;
}

.div-heros-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.div-heros-nav .separator {
  margin: 0 8px;
  font-weight: bold;
}

.content-section {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  background: #d6e1ff;
  height: auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
.content-section h3 {
  color: #3f68fc;
}
.paragraphs p {
  text-align: justify;
}
.div-box {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.my-div-buttons {
  width: 80%;
  padding-top: 10px;
  padding-left: 40px;
  padding-right: 40px;
}
.div-but {
  width: 100%;
  background: #3f68fc;
  color: #fff;
  /* font-family: "Barlow" sans-serif; */
  font-family: "Inter", sans-serif;

  font-size: medium;
  font-weight: 500;
  padding: 20px;
  border: 0;
  border-radius: 5px;
}

.content-section .detaill {
  background: #fff;
  color: #000;
  max-width: 1000px;
  margin: 30px auto;
  /* font-family: "Barlow" sans-serif; */
  font-family: "Inter", sans-serif;

  overflow: hidden;
  text-align: left;
  padding: 30px;
  line-height: 1.5;
}
.content-section .detaill img {
  width: 100%;
  padding: 10px;
  align-items: center;
  text-align: center;
}

.content-section .detaill li {
  font-weight: 600;
}
.content-section .detaills {
  background: #fff;
  color: #000;
  max-width: 1000px;
  margin: 30px auto;
  /* font-family: "Barlow" sans-serif; */
  font-family: "Inter", sans-serif;

  overflow: hidden;
  text-align: left;
  padding: 30px;
  line-height: 1.5;
}
.content-section .detaills p {
  font-weight: 600;
  padding-bottom: 10px;
}

.landing .div-tables tbody tr:nth-child(even) {
  background-color: #f1f1f1;
}

.landing .div-tables tbody tr:nth-child(odd) {
  background-color: #fff;
}

.landing .div-tables img {
  width: 150px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.landing .div-table-title {
  background-color: #5a5a5a;
  color: #fff;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
}

.landing .div-tables {
  width: 100%;
  border-collapse: collapse;
}

.landing .div-tables thead tr {
  background-color: #181b22;
  color: #fff;
}

.landing .div-tables th,
.landing .div-tables td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid #ddd;
}

.hero {
  display: flex;
  position: relative;
  width: 100%;

  overflow: hidden;
  background-color: #f0f0f0;
  align-items: center;
}

.hero .hero-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.hero .carousel {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero .slide.active {
  opacity: 1;
  z-index: 2;
}

.hero .hero-content {
  position: relative;
  z-index: 3;
  color: #fff;
  padding: 60px;
  max-width: 800px;
}

.hero .hero-content h1 {
  font-family: "Inter", sans-serif;
  font-size: 40px;
  /* font-family: "Barlow", sans-serif; */
  font-weight: 700;
  margin-bottom: 1rem;
  margin-left: 3rem;
  color: black;
}

.hero .tech {
  color: #00aaff;
}

.hero .hero-buttons {
  margin-top: 20px;
}

.hero .hero-buttons .btn {
  padding: 12px 24px;
  margin-right: 10px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.hero .btn.blue {
  background-color: #007bff;
  color: #fff;
}

.hero .btn.dark {
  background-color: #343a40;
  color: #fff;
}

.hero .animate-ball {
  width: 30px;
  height: 30px;
  background-color: #00aaff;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  right: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

.landing .services-section {
  padding: 5rem 4%;
  background: #fff;
  text-align: center;
}

.landing .section-header h5 {
  color: #3f68fc;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.landing .section-header h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 3rem;
}

.landing .services-grid {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.landing .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  grid-gap: 2rem;
  gap: 2rem;
  justify-items: center;
}

@media (max-width: 900px) {
  .landing .services-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (max-width: 600px) {
  .landing .services-grid {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }
}

.landing .service-card {
  flex: 0 0 auto;
  min-width: 320px; /* wider card width */
  max-width: 380px;
  background: #fafafa;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: 0.3s;
  scroll-snap-align: start;
  text-align: center;
}
.landing .services-grid::-webkit-scrollbar {
  height: 8px;
}

.landing .services-grid::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 4px;
}

.landing .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
  background: #dbe8ff;
}

.landing .icon-box {
  background: #eaedf5;
  border-radius: 10px;
  width: 75px;
  height: 75px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing .icon-box svg {
  width: 40px;
  height: 40px;
  stroke: #3f68fc; /* primary icon color */
  stroke-width: 1.5;
}

.landing .icon-box svg:hover {
  stroke: #1e40af;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.landing .service-card h3 {
  font-size: 1.1rem;
  color: #1c1c1c;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.landing .service-card p {
  font-size: 0.95rem;

  margin: 0 0 2rem 3rem;
  color: #767575;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.landing .read-link {
  color: #3f68fc;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.landing .read-link:hover {
  text-decoration: underline;
}

img.logo-width {
  width: 70px !important;
  height: 70px!important;
}
.header-pad{
    padding:10px 0px;
}
@custom-variant dark (&:is(.dark *));

:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: #1a202c;
  --card: #ffffff;
  --card-foreground: #1a202c;
  --popover: #ffffff;
  --popover-foreground: #1a202c;
 
  --primary-foreground: #ffffff;
 --secondary: #eff6ff;
  --secondary-foreground: #e3000f;
  --muted: #f0f9ff;
  --muted-foreground: #64748b;
  --accent: #dbeafe;
  --accent-foreground: #e3000f;
  --destructive: #e53e3e;
  --destructive-foreground: #ffffff;
  --border: #bfdbfe;
  --input: #ffffff;
  --input-background: #ffffff;
  --switch-background: #cbd5e0;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #2563eb;
  --chart-1: #2563eb;
  --chart-2: #38a169;
  --chart-3: #d69e2e;
  --chart-4: #9f7aea;
  --chart-5: #ed8936;
  --radius: 0.75rem;
  --sidebar: #f0f9ff;
  --sidebar-foreground: #e3000f;
  --sidebar-primary: #e3000f;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #dbeafe;
  --sidebar-accent-foreground: #e3000f;
  --sidebar-border: #bfdbfe;
  --sidebar-ring: #2563eb;
  
  /* Enhanced Blue Theme Variables */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #e3000f;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  
  /* Header and Hero specific blues */
  --hero-primary: #e3000f;
  --hero-secondary: #2563eb;
  --hero-accent: #3b82f6;
  --header-bg: linear-gradient(135deg, #e3000f 0%, #2563eb 50%, #3b82f6 100%);
   /* Judicial Cause List Theme - Maroon and Dark Slate */
  --maroon-50: #fef2f2;
  --maroon-100: #fee2e2;
  --maroon-200: #fecaca;
  --maroon-300: #fca5a5;
  --maroon-400: #f87171;
  --maroon-500: #ef4444;
  --maroon-600: #dc2626;
  --maroon-700: #b91c1c;
  --maroon-800: #991b1b;
  --maroon-900: #155dfc;
  --maroon-950: #6B1515;
  --dark-slate: #1E293B;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);

  --primary-foreground: oklch(0.205 0 0);
 
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    overflow-x: hidden;
  }

  html {
    overflow-x: hidden;
  }

  /* Prevent horizontal scroll on all containers */
  .container {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
@layer base {
  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
    h1 {
      font-size: var(--text-2xl);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    p {
      font-size: var(--text-base);
      font-weight: 400;
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }

    label {
      font-size: var(--text-base);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    button {
      font-size: var(--text-base);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    input {
      font-size: var(--text-base);
      font-weight: 400;
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }
  }
}

html {
  font-size: 16px;
  font-size: var(--font-size);
}

/* WOW Factor Animations for Hero Section */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(1deg); }
  66% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(-1deg); }
  66% { transform: translateY(-25px) rotate(1deg); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

.animate-float {
  animation: float 8s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 10s ease-in-out infinite;
  animation-delay: -2s;
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.animate-spin-reverse {
  animation: spin-reverse 25s linear infinite;
}

.animate-bounce-slow {
  animation: bounce-slow 6s ease-in-out infinite;
}

/* Radial gradient utility */
.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-stops));
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Enhanced hover animations */
@keyframes subtle-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.hover-lift:hover {
  animation: subtle-scale 0.3s ease-in-out;
}

/* Enhanced Blue Theme Utilities */
.bg-blue-gradient-primary {
  background: linear-gradient(135deg, #e3000f 0%, #2563eb 50%, #3b82f6 100%);
}

.bg-blue-gradient-secondary {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
}

.text-blue-primary {
  color: #e3000f;
}

.border-blue-primary {
  border-color: #2563eb;
}

/* Enhanced Dropdown scrollbar styling with blue theme */
.dropdown-scroll::-webkit-scrollbar {
  width: 6px;
}

.dropdown-scroll::-webkit-scrollbar-track {
  background: #eff6ff;
  border-radius: 3px;
}

.dropdown-scroll::-webkit-scrollbar-thumb {
  background: #93c5fd;
  border-radius: 3px;
}

.dropdown-scroll::-webkit-scrollbar-thumb:hover {
  background: #60a5fa;
}

/* Blue glow effects */
.blue-glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.blue-glow-hover:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
  transition: box-shadow 0.3s ease;
}



/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: rotateX(0);
      --tw-rotate-y: rotateY(0);
      --tw-rotate-z: rotateZ(0);
      --tw-skew-x: skewX(0);
      --tw-skew-y: skewY(0);
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --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(.971 .013 17.38);
    --color-red-100: oklch(.936 .032 17.717);
    --color-red-200: oklch(.885 .062 18.334);
    --color-red-500: oklch(.637 .237 25.331);
    --color-red-600: oklch(.577 .245 27.325);
    --color-red-700: oklch(.505 .213 27.518);
    --color-red-900: oklch(.396 .141 25.723);
    --color-orange-500: oklch(.705 .213 47.604);
    --color-orange-600: oklch(.646 .222 41.116);
    --color-yellow-500: oklch(.795 .184 86.047);
    --color-green-500: oklch(.723 .219 149.579);
    --color-green-600: oklch(.627 .194 149.214);
    --color-green-700: oklch(.527 .154 150.069);
    --color-blue-50: oklch(.97 .014 254.604);
    --color-blue-100: oklch(.932 .032 255.585);
    --color-blue-200: oklch(.882 .059 254.128);
    --color-blue-300: oklch(.809 .105 251.813);
    --color-blue-400: oklch(.707 .165 254.624);
    --color-blue-500: oklch(.623 .214 259.815);
    --color-blue-600: oklch(.546 .245 262.881);
    --color-blue-700: oklch(.488 .243 264.376);
    --color-blue-800: oklch(.424 .199 265.638);
    --color-blue-900: oklch(.379 .146 265.522);
    /* --color-blue-50:  oklch(0.97  0.02  27);
--color-blue-100: oklch(0.92  0.05  27);
--color-blue-200: oklch(0.85  0.09  27);
--color-blue-300: oklch(0.75  0.14  27);
--color-blue-400: oklch(0.67  0.18  27);
--color-blue-500: oklch(0.60  0.22  27); 
--color-blue-600: oklch(0.52  0.20  27);
--color-blue-700: oklch(0.44  0.16  27);
--color-blue-800: oklch(0.38  0.12  27);
--color-blue-900: oklch(0.32  0.08  27); */

    --color-purple-600: oklch(.558 .288 302.321);
    --color-gray-50: oklch(.985 .002 247.839);
    --color-gray-100: oklch(.967 .003 264.542);
    --color-gray-200: oklch(.928 .006 264.531);
    --color-gray-300: oklch(.872 .01 258.338);
    --color-gray-400: oklch(.707 .022 261.325);
    --color-gray-500: oklch(.551 .027 264.364);
    --color-gray-600: oklch(.446 .03 256.802);
    --color-gray-700: oklch(.373 .034 259.733);
    --color-gray-800: oklch(.278 .033 256.848);
    --color-gray-900: oklch(.21 .034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .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);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
    --hero-gradient-1: #FFE0B3; /* Soft Orange/Yellow */
  --hero-gradient-2: #FFB6C1; /* Light Pink */
  --hero-gradient-3: #ADD8E6; /* Light Blue */
  --hero-gradient-angle-1: 135deg;
  --hero-gradient-angle-2: 225deg;
  --hero-gradient-blend-color: rgba(255, 255, 255, 0.4);
  }
}
@layer theme {
  :root, :host {
    /* Default light theme values (leave these as-is, already defined) */
    --color-gray-50: oklch(.985 .002 247.839);
    --color-gray-100: oklch(.967 .003 264.542);
    --color-gray-200: oklch(.928 .006 264.531);
    --color-gray-300: oklch(.872 .01 258.338);
    --color-gray-400: oklch(.707 .022 261.325);
    --color-gray-500: oklch(.551 .027 264.364);
    --color-gray-600: oklch(.446 .03 256.802);
    --color-gray-700: oklch(.373 .034 259.733);
    --color-gray-800: oklch(.278 .033 256.848);
    --color-gray-900: oklch(.21 .034 264.665);
  }

  .dark {
    /* Custom dark mode overrides */
    --color-gray-50: #dbeafe;
    --color-gray-100: #bfd6f2;
    --color-gray-200: #a2c0e7;
    --color-gray-300: #84aadc;
    --color-gray-400: #6794d1;
    --color-gray-500: #4b7ec6;
    --color-gray-600: #3765a2;
    --color-gray-700: #2a5283;
    --color-gray-800: #144881; /* your custom color */
    --color-gray-900: #0f3d70; /* your custom color */
    --hero-gradient-1: #332255; /* Dark Purple */
  --hero-gradient-2: #4A224A; /* Darker Magenta/Pink */
  --hero-gradient-3: #223355; /* Dark Blue */
  --hero-gradient-angle-1: 135deg;
  --hero-gradient-angle-2: 225deg;
  --hero-gradient-blend-color: rgba(0, 0, 0, 0.3);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::-webkit-file-upload-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: normal;
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: normal;
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  body {
    line-height: inherit;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: normal;
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: normal;
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    /* vertical-align: middle; */
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::-webkit-file-upload-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }

  ::-webkit-file-upload-button {
    -webkit-margin-end: 4px;
            margin-inline-end: 4px;
  }

  ::file-selector-button {
    -webkit-margin-end: 4px;
            margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    ::placeholder {
      color: color-mix(in oklab, currentColor 50%, transparent);
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
            appearance: button;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
            appearance: button;
  }

  ::file-selector-button {
    -webkit-appearance: button;
            appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: #bfdbfe;
    border-color: var(--border);
    outline-color: #2563eb;
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, #2563eb 50%, transparent);
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: #fff;
    background-color: var(--background);
    color: #1a202c;
    color: var(--foreground);
  }

  * {
    border-color: #bfdbfe;
    border-color: var(--border);
    outline-color: #2563eb;
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, #2563eb 50%, transparent);
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: #fff;
    background-color: var(--background);
    color: #1a202c;
    color: var(--foreground);
    overflow-x: hidden;
  }

  html {
    overflow-x: hidden;
  }

  .container {
    max-width: 100%;
    overflow-x: hidden;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
    font-size: var(--text-2xl);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
    font-size: var(--text-xl);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
    font-size: var(--text-lg);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 {
    font-size: var(--text-base);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
    font-size: var(--text-base);
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
    font-size: var(--text-base);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input {
    font-size: var(--text-base);
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }
}

@layer utilities {
  .\@container\/card-header {
    container: card-header / inline-size;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-full {
    top: 100%;
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-6 {
    left: calc(var(--spacing) * 6);
  }

  .z-10 {
    z-index: 10;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[99999\] {
    z-index: 99999;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .line-clamp-1 {
    /* -webkit-line-clamp: 1; */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    /* -webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .field-sizing-content {
    field-sizing: content;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

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

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

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

  .h-\[calc\(100\%-1px\)\] {
    height: calc(100% - 1px);
  }

  .h-full {
    height: 100%;
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

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

  .w-fit {
    width: -webkit-fit-content;
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }

  .flex-1 {
    flex: 1 1;
  }

  .flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize-none {
    resize: none;
  }

  .auto-rows-min {
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
  }

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

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

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

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

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

  .grid-cols-\[0_1fr\] {
    grid-template-columns: 0 1fr;
  }

  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }

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

  .flex-wrap {
    flex-wrap: wrap;
  }

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

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

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

  .justify-items-start {
    justify-items: start;
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
            margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
            margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
            margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
            margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
            margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
            margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
            margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
            margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    -webkit-margin-before: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
            margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    -webkit-margin-after: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
            margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-x-1 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    -webkit-margin-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
            margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
    -webkit-margin-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
            margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    -webkit-margin-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
            margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    -webkit-margin-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
            margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    -webkit-margin-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
            margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    -webkit-margin-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
            margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    -webkit-margin-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
            margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    -webkit-margin-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
            margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

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

  .justify-self-end {
    justify-self: flex-end;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: .75rem;
    border-radius: var(--radius);
  }

  .rounded-md {
    border-radius: calc(.75rem  - 2px);
    border-radius: calc(var(--radius)  - 2px);
  }

  .rounded-xl {
    border-radius: calc(.75rem  + 4px);
    border-radius: calc(var(--radius)  + 4px);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-blue-200\/30 {
    border-color: color-mix(in srgb, oklch(.882 .059 254.128) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-200\/30 {
      border-color: color-mix(in oklab, var(--color-blue-200) 30%, transparent);
    }
  }

  .border-blue-200\/50 {
    border-color: color-mix(in srgb, oklch(.882 .059 254.128) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-blue-200\/50 {
      border-color: color-mix(in oklab, var(--color-blue-200) 50%, transparent);
    }
  }

  .border-blue-600 {
    border-color: var(--color-blue-600);
  }

  .border-blue-800 {
    border-color: var(--color-blue-800);
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-input {
    border-color: #fff;
    border-color: var(--input);
  }

  .border-red-700 {
    border-color: var(--color-red-700);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-white\/50 {
    border-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/50 {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .border-l-blue-500 {
    border-left-color: var(--color-blue-500);
  }

  .border-l-blue-600 {
    border-left-color: var(--color-blue-600);
  }

  .border-l-green-600 {
    border-left-color: var(--color-green-600);
  }

  .border-l-purple-600 {
    border-left-color: var(--color-purple-600);
  }

  .border-l-red-500 {
    border-left-color: var(--color-red-500);
  }

  .border-l-yellow-500 {
    border-left-color: var(--color-yellow-500);
  }

  .bg-background {
    background-color: #fff;
    background-color: var(--background);
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

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

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-blue-800 {
    background-color: var(--color-blue-800);
  }

  .bg-blue-900 {
    background-color: var(--color-blue-900);
  }

  .bg-card {
    background-color: #fff;
    background-color: var(--card);
  }

  .bg-destructive {
    background-color: #e53e3e;
    background-color: var(--destructive);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

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

  .bg-input-background {
    background-color: #fff;
    background-color: var(--input-background);
  }

  .bg-muted {
    background-color: #f0f9ff;
    background-color: var(--muted);
  }

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

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

  .bg-primary\/20 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-900\/30 {
    background-color: color-mix(in srgb, oklch(.396 .141 25.723) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-900\/30 {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-white\/95 {
    background-color: #fffffff2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-black\/20 {
    --tw-gradient-from: #0003;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-black\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .from-blue-100 {
    --tw-gradient-from: var(--color-blue-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-blue-600 {
    --tw-gradient-from: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-blue-800 {
    --tw-gradient-from: var(--color-blue-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-green-600 {
    --tw-gradient-from: var(--color-green-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-orange-500 {
    --tw-gradient-from: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-blue-700 {
    --tw-gradient-via: var(--color-blue-700);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-transparent {
    --tw-gradient-via: transparent;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-blue-200 {
    --tw-gradient-to: var(--color-blue-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-blue-700 {
    --tw-gradient-to: var(--color-blue-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-green-700 {
    --tw-gradient-to: var(--color-green-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-orange-600 {
    --tw-gradient-to: var(--color-orange-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .object-cover {
    object-fit: cover;
  }

  .object-center {
    object-position: center;
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-\[3px\] {
    padding: 3px;
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-middle {
    vertical-align: middle;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-blue-100 {
    color: var(--color-blue-100);
  }

  .text-blue-200 {
    color: var(--color-blue-200);
  }

  .text-blue-300 {
    color: var(--color-blue-300);
  }

  .text-blue-400 {
    color: var(--color-blue-400);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-blue-900 {
    color: var(--color-blue-900);
  }

  .text-card-foreground {
    color: #1a202c;
    color: var(--card-foreground);
  }

  .text-destructive {
    color: #e53e3e;
    color: var(--destructive);
  }

  .text-foreground {
    color: #1a202c;
    color: var(--foreground);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

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

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-muted-foreground {
    color: #64748b;
    color: var(--muted-foreground);
  }

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

  .text-primary-foreground {
    color: #fff;
    color: var(--primary-foreground);
  }

  .text-red-100 {
    color: var(--color-red-100);
  }

  .text-red-200 {
    color: var(--color-red-200);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-secondary-foreground {
    color: #1e40af;
    color: var(--secondary-foreground);
  }

  .text-white {
    color: var(--color-white);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .not-italic {
    font-style: normal;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--default-transition-timing-function);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--default-transition-duration);
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--default-transition-timing-function);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--default-transition-duration);
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--default-transition-timing-function);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--default-transition-duration);
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--default-transition-timing-function);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--default-transition-duration);
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--default-transition-timing-function);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--default-transition-duration);
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--default-transition-timing-function);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--default-transition-duration);
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-blue-600:is(:where(.group):hover *) {
      color: var(--color-blue-600);
    }
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .selection\:bg-primary ::selection, .selection\:bg-primary::selection {
    background-color: var(--primary);
  }

  .selection\:text-primary-foreground ::selection, .selection\:text-primary-foreground::selection {
    color: #fff;
    color: var(--primary-foreground);
  }

  .file\:inline-flex::-webkit-file-upload-button {
    display: inline-flex;
  }

  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }

  .file\:h-7::-webkit-file-upload-button {
    height: calc(var(--spacing) * 7);
  }

  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7);
  }

  .file\:border-0::-webkit-file-upload-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::-webkit-file-upload-button {
    background-color: #0000;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::-webkit-file-upload-button {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::-webkit-file-upload-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::-webkit-file-upload-button {
    color: #1a202c;
    color: var(--foreground);
  }

  .file\:text-foreground::file-selector-button {
    color: #1a202c;
    color: var(--foreground);
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: #64748b;
    color: var(--muted-foreground);
  }

  @media (hover: hover) {
    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  @media (hover: hover) {
    .hover\:bg-accent:hover {
      background-color: #dbeafe;
      background-color: var(--accent);
    }
  }

  @media (hover: hover) {
    .hover\:bg-blue-50:hover {
      background-color: var(--color-blue-50);
    }
  }

  @media (hover: hover) {
    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-destructive\/90:hover {
      background-color: #e53e3e;
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, #e53e3e 90%, transparent);
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }
  }

  @media (hover: hover) {
    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }
  }

  @media (hover: hover) {
    .hover\:bg-gray-400:hover {
      background-color: var(--color-gray-400);
    }
  }

  @media (hover: hover) {
    .hover\:bg-orange-600:hover {
      background-color: var(--color-orange-600);
    }
  }

  @media (hover: hover) {
    .hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }
  }

  @media (hover: hover) {
    .hover\:text-accent-foreground:hover {
      color: #1e40af;
      color: var(--accent-foreground);
    }
  }

  @media (hover: hover) {
    .hover\:text-blue-200:hover {
      color: var(--color-blue-200);
    }
  }

  @media (hover: hover) {
    .hover\:text-blue-600:hover {
      color: var(--color-blue-600);
    }
  }

  @media (hover: hover) {
    .hover\:text-blue-900:hover {
      color: var(--color-blue-900);
    }
  }

  @media (hover: hover) {
    .hover\:text-white:hover {
      color: var(--color-white);
    }
  }

  @media (hover: hover) {
    .hover\:underline:hover {
      -webkit-text-decoration-line: underline;
              text-decoration-line: underline;
    }
  }

  @media (hover: hover) {
    .hover\:opacity-90:hover {
      opacity: .9;
    }
  }

  @media (hover: hover) {
    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (hover: hover) {
    .hover\:shadow-xl:hover {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus-visible\:border-ring:focus-visible {
    border-color: #2563eb;
    border-color: var(--ring);
  }

  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-visible\:outline-1:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-ring:focus-visible {
    outline-color: #2563eb;
    outline-color: var(--ring);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }

  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
    grid-template-columns: calc(var(--spacing) * 4) 1fr;
  }

  .has-\[\>svg\]\:gap-x-3:has( > svg) {
    column-gap: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:px-2\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .has-\[\>svg\]\:px-3:has( > svg) {
    padding-inline: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:px-4:has( > svg) {
    padding-inline: calc(var(--spacing) * 4);
  }

  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: #e53e3e;
    border-color: var(--destructive);
  }

  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
    color: #e53e3e;
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
      color: color-mix(in oklab, #e53e3e 90%, transparent);
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }

  .data-\[state\=active\]\:bg-card[data-state="active"] {
    background-color: #fff;
    background-color: var(--card);
  }

  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
  }

  @media (min-width: 40rem) {
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-left {
      text-align: left;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--text-2xl--line-height);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--text-6xl--line-height);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

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

  @media (min-width: 64rem) {
    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }
  }

  @media (min-width: 64rem) {
    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }
  }

  @media (min-width: 64rem) {
    .lg\:block {
      display: block;
    }
  }

  @media (min-width: 64rem) {
    .lg\:flex {
      display: flex;
    }
  }

  @media (min-width: 64rem) {
    .lg\:hidden {
      display: none;
    }
  }

  @media (min-width: 64rem) {
    .lg\:h-5 {
      height: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 64rem) {
    .lg\:h-\[380px\] {
      height: 380px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-5 {
      width: calc(var(--spacing) * 5);
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 64rem) {
    .lg\:p-3 {
      padding: calc(var(--spacing) * 3);
    }
  }

  @media (min-width: 64rem) {
    .lg\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 64rem) {
    .lg\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 64rem) {
    .lg\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--text-2xl--line-height);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--text-4xl--line-height);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:text-base {
      font-size: var(--text-base);
      line-height: var(--text-base--line-height);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  .dark\:border-blue-400:is(.dark *) {
    border-color: var(--color-blue-400);
  }

  .dark\:border-blue-700\/30:is(.dark *) {
    border-color: color-mix(in srgb, oklch(.488 .243 264.376) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-blue-700\/30:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-blue-700) 30%, transparent);
    }
  }

  .dark\:border-gray-600:is(.dark *) {
    border-color: var(--color-gray-600);
  }

  .dark\:border-gray-700:is(.dark *) {
    border-color: var(--color-gray-700);
  }

  .dark\:border-gray-800:is(.dark *) {
    border-color: var(--color-gray-800);
  }

  .dark\:border-input:is(.dark *) {
    border-color: #fff;
    border-color: var(--input);
  }

  .dark\:bg-blue-400:is(.dark *) {
    background-color: var(--color-blue-400);
  }

  .dark\:bg-blue-900:is(.dark *) {
    background-color: var(--color-blue-900);
  }

  .dark\:bg-blue-900\/20:is(.dark *) {
    background-color: color-mix(in srgb, oklch(.379 .146 265.522) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-900\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
    }
  }

  .dark\:bg-destructive\/60:is(.dark *) {
    background-color: #e53e3e;
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/60:is(.dark *) {
      background-color: color-mix(in oklab, #e53e3e 60%, transparent);
      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }

  .dark\:bg-gray-600:is(.dark *) {
    background-color: var(--color-gray-600);
  }

  .dark\:bg-gray-700:is(.dark *) {
    background-color: var(--color-gray-700);
  }

  .dark\:bg-gray-800:is(.dark *) {
    background-color: var(--color-gray-800);
  }

  .dark\:bg-gray-900:is(.dark *) {
    background-color: var(--color-gray-900);
  }

  .dark\:bg-input\/30:is(.dark *) {
    background-color: #fff;
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, #fff 30%, transparent);
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:bg-red-900\/20:is(.dark *) {
    background-color: color-mix(in srgb, oklch(.396 .141 25.723) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-900\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
    }
  }

  .dark\:from-blue-900:is(.dark *) {
    --tw-gradient-from: var(--color-blue-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:to-blue-800:is(.dark *) {
    --tw-gradient-to: var(--color-blue-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:text-blue-200:is(.dark *) {
    color: var(--color-blue-200);
  }

  .dark\:text-blue-300:is(.dark *) {
    color: var(--color-blue-300);
  }

  .dark\:text-blue-400:is(.dark *) {
    color: var(--color-blue-400);
  }

  .dark\:text-gray-100:is(.dark *) {
    color: var(--color-gray-100);
  }

  .dark\:text-gray-300:is(.dark *) {
    color: var(--color-gray-300);
  }

  .dark\:text-gray-400:is(.dark *) {
    color: var(--color-gray-400);
  }

  .dark\:text-muted-foreground:is(.dark *) {
    color: #64748b;
    color: var(--muted-foreground);
  }

  .dark\:text-white:is(.dark *) {
    color: var(--color-white);
  }

  @media (hover: hover) {
    .dark\:group-hover\:text-blue-400:is(.dark *):is(:where(.group):hover *) {
      color: var(--color-blue-400);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
      background-color: #dbeafe;
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, #dbeafe 50%, transparent);
        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-blue-900\/20:is(.dark *):hover {
      background-color: color-mix(in srgb, oklch(.379 .146 265.522) 20%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-blue-900\/20:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-gray-500:is(.dark *):hover {
      background-color: var(--color-gray-500);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-gray-700:is(.dark *):hover {
      background-color: var(--color-gray-700);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-gray-800:is(.dark *):hover {
      background-color: var(--color-gray-800);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: #fff;
      background-color: var(--input);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, #fff 50%, transparent);
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .dark\:hover\:text-blue-400:is(.dark *):hover {
      color: var(--color-blue-400);
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] {
    border-color: #fff;
    border-color: var(--input);
  }

  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
    background-color: #fff;
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
      background-color: color-mix(in oklab, #fff 30%, transparent);
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] {
    color: #1a202c;
    color: var(--foreground);
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\.border-b\]\:pb-6.border-b {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .\[\.border-t\]\:pt-6.border-t {
    padding-top: calc(var(--spacing) * 6);
  }

  .\[\&\:last-child\]\:pb-6:last-child {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .\[\&\>svg\]\:pointer-events-none > svg {
    pointer-events: none;
  }

  .\[\&\>svg\]\:size-3 > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:translate-y-0\.5 > svg {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>svg\]\:text-current > svg {
    color: currentColor;
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-accent:hover {
      background-color: #dbeafe;
      background-color: var(--accent);
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
      background-color: #e53e3e;
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, #e53e3e 90%, transparent);
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
      }
    }
  }

  @media (hover: hover) {
    a.\[a\&\]\:hover\:text-accent-foreground:hover {
      color: #1e40af;
      color: var(--accent-foreground);
    }
  }
}

:root {
  --font-size: 16px;
  --background: #fff;
  --foreground: #1a202c;
  --card: #fff;
  --card-foreground: #1a202c;
  --popover: #fff;
  --popover-foreground: #1a202c;

  --primary-foreground: #fff;
 
  --secondary-foreground: #1e40af;
  --muted: #f0f9ff;
  --muted-foreground: #64748b;
  --accent: #dbeafe;
  --accent-foreground: #1e40af;
  --destructive: #e53e3e;
  --destructive-foreground: #fff;
  --border: #bfdbfe;
  --input: #fff;
  --input-background: #fff;
  --switch-background: #cbd5e0;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #2563eb;
  --chart-1: #2563eb;
  --chart-2: #38a169;
  --chart-3: #d69e2e;
  --chart-4: #9f7aea;
  --chart-5: #ed8936;
  --radius: .75rem;
  --sidebar: #f0f9ff;
  --sidebar-foreground: #1e40af;
  --sidebar-primary: #1e40af;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #dbeafe;
  --sidebar-accent-foreground: #1e40af;
  --sidebar-border: #bfdbfe;
  --sidebar-ring: #2563eb;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  --hero-primary: #1e40af;
  --hero-secondary: #2563eb;
  --hero-accent: #3b82f6;
  --header-bg: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
}

.dark {
  --background: oklch(.145 0 0);
  --foreground: oklch(.985 0 0);
  --card: oklch(.145 0 0);
  --card-foreground: oklch(.985 0 0);
  --popover: oklch(.145 0 0);
  --popover-foreground: oklch(.985 0 0);

  --primary-foreground: oklch(.205 0 0);

  --secondary-foreground: oklch(.985 0 0);
  --muted: oklch(.269 0 0);
  --muted-foreground: oklch(.708 0 0);
  --accent: oklch(.269 0 0);
  --accent-foreground: oklch(.985 0 0);
  --destructive: oklch(.396 .141 25.723);
  --destructive-foreground: oklch(.637 .237 25.331);
  --border: oklch(.269 0 0);
  --input: oklch(.269 0 0);
  --ring: oklch(.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(.488 .243 264.376);
  --chart-2: oklch(.696 .17 162.48);
  --chart-3: oklch(.769 .188 70.08);
  --chart-4: oklch(.627 .265 303.9);
  --chart-5: oklch(.645 .246 16.439);
  --sidebar: oklch(.205 0 0);
  --sidebar-foreground: oklch(.985 0 0);
  --sidebar-primary: oklch(.488 .243 264.376);
  --sidebar-primary-foreground: oklch(.985 0 0);
  --sidebar-accent: oklch(.269 0 0);
  --sidebar-accent-foreground: oklch(.985 0 0);
  --sidebar-border: oklch(.269 0 0);
  --sidebar-ring: oklch(.439 0 0);
}

html {
  font-size: 16px;
  font-size: var(--font-size);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0)rotate(0);
  }

  33% {
    transform: translateY(-20px)rotate(1deg);
  }

  66% {
    transform: translateY(-10px)rotate(-1deg);
  }
}

@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0)rotate(0);
  }

  33% {
    transform: translateY(-15px)rotate(-1deg);
  }

  66% {
    transform: translateY(-25px)rotate(1deg);
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-10px)scale(1.05);
  }
}

.animate-float {
  animation: 8s ease-in-out infinite float;
}

.animate-float-delayed {
  animation: 10s ease-in-out -2s infinite float-delayed;
}

.animate-spin-slow {
  animation: 20s linear infinite spin-slow;
}

.animate-spin-reverse {
  animation: 25s linear infinite spin-reverse;
}

.animate-bounce-slow {
  animation: 6s ease-in-out infinite bounce-slow;
}

.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-stops));
}

.line-clamp-2 {
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.line-clamp-3 {
  /* -webkit-line-clamp: 3; */
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

@keyframes subtle-scale {
  0%, 100% {
    transform: scale(1);
  }

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

.hover-lift:hover {
  animation: .3s ease-in-out subtle-scale;
}

.bg-blue-gradient-primary {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
}

.bg-blue-gradient-secondary {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
}

.text-blue-primary {
  color: #1e40af;
}

.border-blue-primary {
  border-color: #2563eb;
}

.dropdown-scroll::-webkit-scrollbar {
  width: 6px;
}

.dropdown-scroll::-webkit-scrollbar-track {
  background: #eff6ff;
  border-radius: 3px;
}

.dropdown-scroll::-webkit-scrollbar-thumb {
  background: #93c5fd;
  border-radius: 3px;
}

.dropdown-scroll::-webkit-scrollbar-thumb:hover {
  background: #60a5fa;
}

.blue-glow {
  box-shadow: 0 0 20px #3b82f64d;
}

.blue-glow-hover:hover {
  transition: box-shadow .3s;
  box-shadow: 0 0 30px #3b82f666;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
  initial-value: rotateX(0);
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
button, a{
  cursor: pointer!important;
}
  .invisible {

    visibility: hidden;

  }
    .sticky {

    position: -webkit-sticky;

    position: sticky;

  }
    .top-\[100px\] {

    top: 100px;

  }
    .right-1 {

    right: calc(var(--spacing) * 1);

  }
  
  .left-1 {

    left: calc(var(--spacing) * 1);

  }
   .table-caption {

    display: table-caption;

  }



  .table-cell {

    display: table-cell;

  }



  .table-row {

    display: table-row;

  }
   .size-7 {

    width: calc(var(--spacing) * 7);

    height: calc(var(--spacing) * 7);

  }



  .size-8 {

    width: calc(var(--spacing) * 8);

    height: calc(var(--spacing) * 8);

  }
  .h-14 {

    height: calc(var(--spacing) * 14);

  }
 .h-auto {

    height: auto;

  }
  .min-h-\[240px\] {

    min-height: 240px;

  }
  .min-h-\[280px\] {

    min-height: 280px;

  }
.w-72 {

    width: calc(var(--spacing) * 72);

  }
.max-w-xs {

    max-width: var(--container-xs);

  }

.flex-grow {

    flex-grow: 1;

  }



  .caption-bottom {

    caption-side: bottom;

  }



  .border-collapse {

    border-collapse: collapse;

  }



  .origin-\(--radix-popover-content-transform-origin\) {

    transform-origin: var(--radix-popover-content-transform-origin);

  }
    .scale-110 {

    --tw-scale-x: 110%;

    --tw-scale-y: 110%;

    --tw-scale-z: 110%;

    scale: var(--tw-scale-x) var(--tw-scale-y);

  }
  .list-inside {

    list-style-position: inside;

  }

  .list-disc {

    list-style-type: disc;

  }
   .justify-end {

    justify-content: flex-end;

  }



  .justify-start {

    justify-content: flex-start;

  }

  :where(.space-y-1 > :not(:last-child)) {

    --tw-space-y-reverse: 0;

    -webkit-margin-before: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));

            margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));

    -webkit-margin-after: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));

            margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));

  }

 .border-4 {

    border-style: var(--tw-border-style);

    border-width: 4px;

  }

 .border-\[\var(--color-blue-900)\] {

    border-color: var(--color-blue-900);

  }



  .border-\[\var(--color-blue-900)\]\/20 {

    border-color: oklab(41.7729% .131351 .065025 / .2);

  }



  .border-\[\var(--color-blue-900)\]\/30 {

    border-color: oklab(41.7729% .131351 .065025 / .3);

  }



  .border-blue-200 {

    border-color: var(--color-blue-200);

  }
   .bg-\[\#1E293B\] {

    background-color: #1e293b;

  }



  .bg-\[\var(--color-blue-900)\] {

    background-color: var(--color-blue-900);

  }



  .bg-accent {

    background-color: #dbeafe;

    background-color: var(--accent);

  }
  .bg-black\/10 {

    background-color: #0000001a;

  }



  @supports (color: color-mix(in lab, red, red)) {

    .bg-black\/10 {

      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);

    }

  }
   .bg-green-100 {

    background-color: var(--color-green-100);

  }
  .bg-muted\/50 {

    background-color: #f0f9ff;

    background-color: var(--muted);

  }



  @supports (color: color-mix(in lab, red, red)) {

    .bg-muted\/50 {

      background-color: color-mix(in oklab, #f0f9ff 50%, transparent);

      background-color: color-mix(in oklab, var(--muted) 50%, transparent);

    }

  }
   .bg-purple-100 {

    background-color: var(--color-purple-100);

  }
  .bg-transparent {

    background-color: #0000;

  }
  .bg-white\/10 {

    background-color: #ffffff1a;

  }



  @supports (color: color-mix(in lab, red, red)) {

    .bg-white\/10 {

      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);

    }
     .bg-yellow-100 {

    background-color: var(--color-yellow-100);

  }
   .bg-gradient-to-r {

    --tw-gradient-position: to right in oklab;

    background-image: linear-gradient(var(--tw-gradient-stops));

  }
  .from-\[\#FFB88C\] {

    --tw-gradient-from: #155dfc;

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

  }

.via-\[\#D4A5E8\] {

    --tw-gradient-via: #155dfc;

    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-via-stops);

  }



  .via-\[\#FFB5C7\] {

    --tw-gradient-via: #ffb5c7;

    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-via-stops);

  }
   .to-\[\#9DD3F0\] {

    --tw-gradient-to: #9dd3f0;

    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

  }

 .p-0 {

    padding: calc(var(--spacing) * 0);

  }
   .p-12 {

    padding: calc(var(--spacing) * 12);

  }

.px-8 {

    padding-inline: calc(var(--spacing) * 8);

  }

  .px-12 {

    padding-inline: calc(var(--spacing) * 12);

  }
  .pt-1 {

    padding-top: calc(var(--spacing) * 1);

  }

.py-4 {

    padding-block: calc(var(--spacing) * 4);

  }
  

  .text-\[0\.8rem\] {

    font-size: .8rem;

  }
  .font-normal {

    --tw-font-weight: var(--font-weight-normal);

    font-weight: 400;

    font-weight: var(--font-weight-normal);

  }
   .text-\[\#1E293B\] {

    color: #1e293b;

  }



  .text-\[\var(--color-blue-900)\] {

    color: var(--color-blue-900);

  }



  .text-\[\var(--color-blue-900)\]\/70 {

    color: oklab(41.7729% .131351 .065025 / .7);

  }



  .text-accent-foreground {

    color: #1e40af;

    color: var(--accent-foreground);

  }

.text-gray-800 {

    color: var(--color-gray-800);

  }

 .text-green-800 {

    color: var(--color-green-800);

  }
.text-popover-foreground {

    color: #1a202c;

    color: var(--popover-foreground);

  }
  .text-purple-800 {

    color: var(--color-purple-800);

  }
    .text-yellow-800 {

    color: var(--color-yellow-800);

  }
  .capitalize {
    text-transform: capitalize;
  }
  .opacity-50 {

    opacity: .5;

  }
  .outline-hidden {

    --tw-outline-style: none;

    outline-style: none;

  }



  @media (forced-colors: active) {

    .outline-hidden {

      outline-offset: 2px;

      outline: 2px solid #0000;

    }

  }
  

  .drop-shadow-sm {

    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #00000026));

    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));

    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );

  }

  .group-hover\:scale-110:is(:where(.group):hover *) {

      --tw-scale-x: 110%;

      --tw-scale-y: 110%;

      --tw-scale-z: 110%;

      scale: var(--tw-scale-x) var(--tw-scale-y);

    }

  }



  @media (hover: hover) {

    .group-hover\:gap-3:is(:where(.group):hover *) {

      gap: calc(var(--spacing) * 3);

    }

  }



  @media (hover: hover) {

    .group-hover\:text-\[\var(--color-blue-900)\]:is(:where(.group):hover *) {

      color: var(--color-blue-900);

    }

  }



  @media (hover: hover) {

    .group-hover\:text-blue-600:is(:where(.group):hover *) {

      color: var(--color-blue-600);

    }

  }
  .placeholder\:text-gray-500::placeholder {

    color: var(--color-gray-500);

  }
  

  @media (hover: hover) {

    .hover\:border-\[\var(--color-blue-900)\]:hover {

      border-color: var(--color-blue-900);

    }

  }



  @media (hover: hover) {

    .hover\:bg-\[\#6B1515\]:hover {

      background-color: #6b1515;

    }

  }



  @media (hover: hover) {

    .hover\:bg-\[\var(--color-blue-900)\]:hover {

      background-color: var(--color-blue-900);

    }

  }



  @media (hover: hover) {

    .hover\:bg-\[\var(--color-blue-900)\]\/10:hover {

      background-color: oklab(41.7729% .131351 .065025 / .1);

    }

  }



  @media (hover: hover) {

    .hover\:bg-accent:hover {

      background-color: #dbeafe;

      background-color: var(--accent);

    }

  }
  @media (hover: hover) {

    .hover\:bg-blue-600:hover {

      background-color: var(--color-blue-600);

    }

  }

  @media (hover: hover) {

    .hover\:bg-muted\/50:hover {

      background-color: #f0f9ff;

      background-color: var(--muted);

    }



    @supports (color: color-mix(in lab, red, red)) {

      .hover\:bg-muted\/50:hover {

        background-color: color-mix(in oklab, #f0f9ff 50%, transparent);

        background-color: color-mix(in oklab, var(--muted) 50%, transparent);

      }

    }

  }



  @media (hover: hover) {

    .hover\:bg-orange-600:hover {

      background-color: var(--color-orange-600);

    }

  }



  @media (hover: hover) {

    .hover\:bg-primary:hover {

      background-color: var(--primary);

    }

  }
  @media (hover: hover) {

    .hover\:bg-white\/20:hover {

      background-color: #fff3;

    }



    @supports (color: color-mix(in lab, red, red)) {

      .hover\:bg-white\/20:hover {

        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);

      }

    }

  }



  @media (hover: hover) {

    .hover\:text-\[\#6B1515\]:hover {

      color: #6b1515;

    }

  }



  @media (hover: hover) {

    .hover\:text-accent-foreground:hover {

      color: #1e40af;

      color: var(--accent-foreground);

    }

  }
  

  @media (hover: hover) {

    .hover\:opacity-100:hover {

      opacity: 1;

    }

  }



  @media (hover: hover) {

    .hover\:shadow-2xl:hover {

      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);

      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

    }

  }



  @media (hover: hover) {

    .hover\:shadow-lg:hover {

      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);

      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

    }

  }
  .focus\:bg-primary:focus {

    background-color: var(--primary);

  }



  .focus\:text-primary-foreground:focus {

    color: #fff;

    color: var(--primary-foreground);

  }



  .focus\:ring-2:focus {

    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

  }



  .focus\:ring-4:focus {

    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

  }



  .focus\:ring-\[\var(--color-blue-900)\]\/30:focus {

    --tw-ring-color: oklab(41.7729% .131351 .065025 / .3);

  }



  .focus\:ring-\[\var(--color-blue-900)\]\/50:focus {

    --tw-ring-color: oklab(41.7729% .131351 .065025 / .5);

  }



  .focus\:ring-blue-600\/50:focus {

    --tw-ring-color: color-mix(in srgb, oklch(.546 .245 262.881) 50%, transparent);

  }



  @supports (color: color-mix(in lab, red, red)) {

    .focus\:ring-blue-600\/50:focus {

      --tw-ring-color: color-mix(in oklab, var(--color-blue-600) 50%, transparent);

    }

  }




  .focus\:ring-white\/50:focus {

    --tw-ring-color: #ffffff80;

  }



  @supports (color: color-mix(in lab, red, red)) {

    .focus\:ring-white\/50:focus {

      --tw-ring-color: color-mix(in oklab, var(--color-white) 50%, transparent);

    }

  }



  .focus\:outline-none:focus {

    --tw-outline-style: none;

    outline-style: none;

  }
  .aria-selected\:bg-accent[aria-selected="true"] {

    background-color: #dbeafe;

    background-color: var(--accent);

  }



  .aria-selected\:bg-primary[aria-selected="true"] {

    background-color: var(--primary);

  }



  .aria-selected\:text-accent-foreground[aria-selected="true"] {

    color: #1e40af;

    color: var(--accent-foreground);

  }



  .aria-selected\:text-muted-foreground[aria-selected="true"] {

    color: #64748b;

    color: var(--muted-foreground);

  }



  .aria-selected\:text-primary-foreground[aria-selected="true"] {

    color: #fff;

    color: var(--primary-foreground);

  }



  .aria-selected\:opacity-100[aria-selected="true"] {

    opacity: 1;

  }



  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {

    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);

  }



  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {

    --tw-enter-translate-x: calc(2 * var(--spacing));

  }



  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {

    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);

  }



  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {

    --tw-enter-translate-y: calc(2 * var(--spacing));

  }
   .data-\[state\=closed\]\:animate-out[data-state="closed"] {

    animation: exit .15s ease;

    animation: exit var(--tw-duration, .15s) var(--tw-ease, ease);

  }



  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {

    --tw-exit-opacity: 0;

  }



  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {

    --tw-exit-scale: .95;

  }



  .data-\[state\=open\]\:animate-in[data-state="open"] {

    animation: enter .15s ease;

    animation: enter var(--tw-duration, .15s) var(--tw-ease, ease);

  }



  .data-\[state\=open\]\:fade-in-0[data-state="open"] {

    --tw-enter-opacity: 0;

  }



  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {

    --tw-enter-scale: .95;

  }



  .data-\[state\=selected\]\:bg-muted[data-state="selected"] {

    background-color: #f0f9ff;

    background-color: var(--muted);

  }
  @media (min-width: 40rem) {

    .sm\:flex-row {

      flex-direction: row;

    }

  }

dark\:bg-slate-700:is(.dark *) {

    background-color: var(--color-slate-700);

  }



  .dark\:bg-slate-800:is(.dark *) {

    background-color: var(--color-slate-800);

  }



  .dark\:bg-slate-900:is(.dark *) {

    background-color: var(--color-slate-900);

  }



  .dark\:bg-yellow-900:is(.dark *) {

    background-color: var(--color-yellow-900);

  }
   .\[\&_tr\]\:border-b tr {

    border-bottom-style: var(--tw-border-style);

    border-bottom-width: 1px;

  }



  .\[\&_tr\:last-child\]\:border-0 tr:last-child {

    border-style: var(--tw-border-style);

    border-width: 0;

  }



  .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has( > .day-range-end) {

    border-top-right-radius: calc(.75rem  - 2px);

    border-top-right-radius: calc(var(--radius)  - 2px);

    border-bottom-right-radius: calc(.75rem  - 2px);

    border-bottom-right-radius: calc(var(--radius)  - 2px);

  }



  .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has( > .day-range-start) {

    border-top-left-radius: calc(.75rem  - 2px);

    border-top-left-radius: calc(var(--radius)  - 2px);

    border-bottom-left-radius: calc(.75rem  - 2px);

    border-bottom-left-radius: calc(var(--radius)  - 2px);

  }



  .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {

    border-radius: calc(.75rem  - 2px);

    border-radius: calc(var(--radius)  - 2px);

  }



  .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {

    background-color: #dbeafe;

    background-color: var(--accent);

  }



  .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:first-child:has([aria-selected]) {

    border-top-left-radius: calc(.75rem  - 2px);

    border-top-left-radius: calc(var(--radius)  - 2px);

    border-bottom-left-radius: calc(.75rem  - 2px);

    border-bottom-left-radius: calc(var(--radius)  - 2px);

  }



  .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:last-child:has([aria-selected]) {

    border-top-right-radius: calc(.75rem  - 2px);

    border-top-right-radius: calc(var(--radius)  - 2px);

    border-bottom-right-radius: calc(.75rem  - 2px);

    border-bottom-right-radius: calc(var(--radius)  - 2px);

  }



  .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {

    border-top-right-radius: calc(.75rem  - 2px);

    border-top-right-radius: calc(var(--radius)  - 2px);

    border-bottom-right-radius: calc(.75rem  - 2px);

    border-bottom-right-radius: calc(var(--radius)  - 2px);

  }



  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {

    padding-right: calc(var(--spacing) * 0);

  }
  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {

    --tw-translate-y: 2px;

    translate: var(--tw-translate-x) var(--tw-translate-y);

  }
  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {

    border-bottom-style: var(--tw-border-style);

    border-bottom-width: 0;

  }
  /* index.css */

th.table-head {
  background-color: #155dfc;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1rem; /* equivalent to Tailwind's py-3 px-4 */
  text-align: left;
  transition: background-color 0.2s ease-in-out;
}

th.table-head:hover {
  background-color: #0f4acb; /* slightly darker on hover */
}
/* .bg-hero-innovation {
  background-image: url(../src/images/gradient.png);
  background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat;
} */
.bg-hero-complex-gradient {
  background-image: 
    linear-gradient(var(--hero-gradient-angle-2), var(--hero-gradient-blend-color) 60%, transparent 100%),
    linear-gradient(var(--hero-gradient-angle-1), var(--hero-gradient-1) 0%, var(--hero-gradient-2) 50%, var(--hero-gradient-3) 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.bg-hero-light-image {
  background-image: url(/static/media/gradient.068f4ea2c0ee9e1436af.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.dark [class*="bg-hero-dark"] {
  background-image: url(/static/media/gradient-dark.9f6439aac67c9efda1cd.png)!important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Search Container Styles */
.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 400px;
  width: 100%;
}

.search-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
}

.search-input-wrapper {
  width: 100%;
  max-width: 650px;
  margin-bottom: 20px;
}

.search-input-large {
  width: 100%;
  padding: 12px 18px;
  padding-left: 45px;
  font-size: 16px;
  border: 1px solid #000000;
  border-radius: 16px;
  outline: none;
  transition: border-color 0.3s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23999%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%278%27%3E%3C/circle%3E%3Cpath d=%27m21 21-4.35-4.35%27%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 20px;
  background-color: #edeeef;
  min-height: 62px;
  transition: all 0.3s ease-in-out;
}

.search-input-large:focus {
  border-color: #5b9bd5;
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.1);
}

.search-input-large::placeholder {
  color: #919396;
  font-size: 12px;
  line-height: 24px;
}

.search-button-wrapper {
  margin-top: 10px;
}
.case-search-back-button {
  background-color: #c8cace;
  padding: 10px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #282828;
  font-size: 16px;
  font-weight: 500;
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}


/*# sourceMappingURL=main.f5f9e2ed.css.map*/