*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

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

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.-inset-\[3\%\] {
  inset: -3%;
}
.inset-0 {
  inset: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-10 {
  bottom: 2.5rem;
}
.bottom-\[-0\.5rem\] {
  bottom: -0.5rem;
}
.bottom-\[-100\%\] {
  bottom: -100%;
}
.bottom-\[0\.62rem\] {
  bottom: 0.62rem;
}
.bottom-\[10\%\] {
  bottom: 10%;
}
.bottom-\[100\%\] {
  bottom: 100%;
}
.bottom-\[2\%\] {
  bottom: 2%;
}
.bottom-\[20\%\] {
  bottom: 20%;
}
.bottom-\[21\%\] {
  bottom: 21%;
}
.bottom-\[2rem\] {
  bottom: 2rem;
}
.bottom-\[47\.5\%\] {
  bottom: 47.5%;
}
.bottom-\[5\%\] {
  bottom: 5%;
}
.bottom-\[50\%\] {
  bottom: 50%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-\[-23\%\] {
  left: -23%;
}
.left-\[-24\%\] {
  left: -24%;
}
.left-\[-55\%\] {
  left: -55%;
}
.left-\[-6\.5\%\] {
  left: -6.5%;
}
.left-\[10\%\] {
  left: 10%;
}
.left-\[10px\] {
  left: 10px;
}
.left-\[18\%\] {
  left: 18%;
}
.left-\[2\.25rem\] {
  left: 2.25rem;
}
.left-\[2\.5rem\] {
  left: 2.5rem;
}
.left-\[2\.63rem\] {
  left: 2.63rem;
}
.left-\[2rem\] {
  left: 2rem;
}
.left-\[50\%\] {
  left: 50%;
}
.left-\[62\%\] {
  left: 62%;
}
.left-\[68\%\] {
  left: 68%;
}
.left-\[87\%\] {
  left: 87%;
}
.left-\[calc\(80\%\+2\.5rem\)\] {
  left: calc(80% + 2.5rem);
}
.right-0 {
  right: 0px;
}
.right-10 {
  right: 2.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-\[-0\.75rem\] {
  right: -0.75rem;
}
.right-\[-6\%\] {
  right: -6%;
}
.right-\[-7\%\] {
  right: -7%;
}
.right-\[-8\%\] {
  right: -8%;
}
.right-\[0\%\] {
  right: 0%;
}
.right-\[1\%\] {
  right: 1%;
}
.right-\[10\%\] {
  right: 10%;
}
.right-\[104\.75\%\] {
  right: 104.75%;
}
.right-\[16px\] {
  right: 16px;
}
.right-\[1rem\] {
  right: 1rem;
}
.right-\[2\%\] {
  right: 2%;
}
.right-\[2\.5\%\] {
  right: 2.5%;
}
.right-\[27\.5\%\] {
  right: 27.5%;
}
.right-\[4\%\] {
  right: 4%;
}
.right-\[5\%\] {
  right: 5%;
}
.right-\[7rem\] {
  right: 7rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-24 {
  top: 6rem;
}
.top-3 {
  top: 0.75rem;
}
.top-6 {
  top: 1.5rem;
}
.top-\[-0\.75rem\] {
  top: -0.75rem;
}
.top-\[-104\%\] {
  top: -104%;
}
.top-\[-24\%\] {
  top: -24%;
}
.top-\[-90\%\] {
  top: -90%;
}
.top-\[1\.87rem\] {
  top: 1.87rem;
}
.top-\[1\.94rem\] {
  top: 1.94rem;
}
.top-\[100\%\] {
  top: 100%;
}
.top-\[104\%\] {
  top: 104%;
}
.top-\[18\%\] {
  top: 18%;
}
.top-\[1rem\] {
  top: 1rem;
}
.top-\[2\%\] {
  top: 2%;
}
.top-\[2\.5\%\] {
  top: 2.5%;
}
.top-\[2\.5rem\] {
  top: 2.5rem;
}
.top-\[20\%\] {
  top: 20%;
}
.top-\[21\%\] {
  top: 21%;
}
.top-\[29\.5\%\] {
  top: 29.5%;
}
.top-\[30px\] {
  top: 30px;
}
.top-\[35\.5\%\] {
  top: 35.5%;
}
.top-\[38\%\] {
  top: 38%;
}
.top-\[3rem\] {
  top: 3rem;
}
.top-\[5\%\] {
  top: 5%;
}
.top-\[5\.25rem\] {
  top: 5.25rem;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60px\] {
  top: 60px;
}
.top-\[64\%\] {
  top: 64%;
}
.top-\[65\%\] {
  top: 65%;
}
.top-\[68\%\] {
  top: 68%;
}
.top-\[7\%\] {
  top: 7%;
}
.top-\[72\%\] {
  top: 72%;
}
.top-\[86\%\] {
  top: 86%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.z-\[1000\] {
  z-index: 1000;
}
.z-\[1001\] {
  z-index: 1001;
}
.z-\[1002\] {
  z-index: 1002;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[10\] {
  z-index: 10;
}
.z-\[11\] {
  z-index: 11;
}
.z-\[12\] {
  z-index: 12;
}
.z-\[15\] {
  z-index: 15;
}
.z-\[17\] {
  z-index: 17;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[5\] {
  z-index: 5;
}
.z-\[600\] {
  z-index: 600;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[800\] {
  z-index: 800;
}
.z-\[995\] {
  z-index: 995;
}
.z-\[996\] {
  z-index: 996;
}
.z-\[998\] {
  z-index: 998;
}
.z-\[999\] {
  z-index: 999;
}
.z-\[9\] {
  z-index: 9;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-start-2 {
  grid-column-start: 2;
}
.m-0 {
  margin: 0px;
}
.m-5 {
  margin: 1.25rem;
}
.m-auto {
  margin: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-\[0\.5rem\] {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-\[5rem\] {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.-mt-\[0\.35rem\] {
  margin-top: -0.35rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-36 {
  margin-bottom: 9rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-40 {
  margin-bottom: 10rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-\[0\.56rem\] {
  margin-bottom: 0.56rem;
}
.mb-\[0\.5rem\] {
  margin-bottom: 0.5rem;
}
.mb-\[0\.75rem\] {
  margin-bottom: 0.75rem;
}
.mb-\[0\.8rem\] {
  margin-bottom: 0.8rem;
}
.mb-\[1\.5rem\] {
  margin-bottom: 1.5rem;
}
.mb-\[1\.96875rem\] {
  margin-bottom: 1.96875rem;
}
.mb-\[1rem\] {
  margin-bottom: 1rem;
}
.mb-\[2\.5\%\] {
  margin-bottom: 2.5%;
}
.mb-\[2\.5rem\] {
  margin-bottom: 2.5rem;
}
.mb-\[2rem\] {
  margin-bottom: 2rem;
}
.mb-\[3\%\] {
  margin-bottom: 3%;
}
.mb-\[3rem\] {
  margin-bottom: 3rem;
}
.mb-\[5rem\] {
  margin-bottom: 5rem;
}
.ml-16 {
  margin-left: 4rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-\[-18\%\] {
  margin-left: -18%;
}
.ml-\[-1rem\] {
  margin-left: -1rem;
}
.ml-\[-4\%\] {
  margin-left: -4%;
}
.ml-\[0\.75rem\] {
  margin-left: 0.75rem;
}
.ml-\[1\%\] {
  margin-left: 1%;
}
.ml-\[1\.19rem\] {
  margin-left: 1.19rem;
}
.ml-\[1\.25rem\] {
  margin-left: 1.25rem;
}
.ml-\[1\.31rem\] {
  margin-left: 1.31rem;
}
.ml-\[1\.5rem\] {
  margin-left: 1.5rem;
}
.ml-\[1\.88rem\] {
  margin-left: 1.88rem;
}
.ml-\[10\%\] {
  margin-left: 10%;
}
.ml-\[15\%\] {
  margin-left: 15%;
}
.ml-\[1rem\] {
  margin-left: 1rem;
}
.ml-\[2\%\] {
  margin-left: 2%;
}
.ml-\[2\.19rem\] {
  margin-left: 2.19rem;
}
.ml-\[34\%\] {
  margin-left: 34%;
}
.ml-\[4\%\] {
  margin-left: 4%;
}
.ml-\[4\.5025rem\] {
  margin-left: 4.5025rem;
}
.ml-\[43\%\] {
  margin-left: 43%;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-\[0\.5rem\] {
  margin-right: 0.5rem;
}
.mr-\[1\.56rem\] {
  margin-right: 1.56rem;
}
.mr-\[1\.5rem\] {
  margin-right: 1.5rem;
}
.mr-\[10\%\] {
  margin-right: 10%;
}
.mr-\[6\.5px\] {
  margin-right: 6.5px;
}
.mt-0 {
  margin-top: 0px;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-36 {
  margin-top: 9rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-\[-0\.5\%\] {
  margin-top: -0.5%;
}
.mt-\[-0\.5px\] {
  margin-top: -0.5px;
}
.mt-\[-0\.5rem\] {
  margin-top: -0.5rem;
}
.mt-\[-1\.5rem\] {
  margin-top: -1.5rem;
}
.mt-\[-2\.5\%\] {
  margin-top: -2.5%;
}
.mt-\[-45\%\] {
  margin-top: -45%;
}
.mt-\[-90\%\] {
  margin-top: -90%;
}
.mt-\[0\.25\%\] {
  margin-top: 0.25%;
}
.mt-\[0\.56rem\] {
  margin-top: 0.56rem;
}
.mt-\[0\.5rem\] {
  margin-top: 0.5rem;
}
.mt-\[0\.75rem\] {
  margin-top: 0.75rem;
}
.mt-\[0\.8rem\] {
  margin-top: 0.8rem;
}
.mt-\[0rem\] {
  margin-top: 0rem;
}
.mt-\[1\.25rem\] {
  margin-top: 1.25rem;
}
.mt-\[1\.5\%\] {
  margin-top: 1.5%;
}
.mt-\[1\.88rem\] {
  margin-top: 1.88rem;
}
.mt-\[1\.96875rem\] {
  margin-top: 1.96875rem;
}
.mt-\[10rem\] {
  margin-top: 10rem;
}
.mt-\[1rem\] {
  margin-top: 1rem;
}
.mt-\[2\%\] {
  margin-top: 2%;
}
.mt-\[2\.5\%\] {
  margin-top: 2.5%;
}
.mt-\[2\.5rem\] {
  margin-top: 2.5rem;
}
.mt-\[2rem\] {
  margin-top: 2rem;
}
.mt-\[3\.34rem\] {
  margin-top: 3.34rem;
}
.mt-\[3rem\] {
  margin-top: 3rem;
}
.mt-\[5\.06rem\] {
  margin-top: 5.06rem;
}
.mt-\[5rem\] {
  margin-top: 5rem;
}
.mt-\[5vh\] {
  margin-top: 5vh;
}
.mt-\[8\.25rem\] {
  margin-top: 8.25rem;
}
.mt-\[8\.69rem\] {
  margin-top: 8.69rem;
}
.\!box-border {
  box-sizing: border-box !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.list-item {
  display: list-item;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-2 {
  height: 0.5rem;
}
.h-4 {
  height: 1rem;
}
.h-8 {
  height: 2rem;
}
.h-\[0\.25rem\] {
  height: 0.25rem;
}
.h-\[0\.75rem\] {
  height: 0.75rem;
}
.h-\[1\.5rem\] {
  height: 1.5rem;
}
.h-\[1\.75rem\] {
  height: 1.75rem;
}
.h-\[100\%\] {
  height: 100%;
}
.h-\[100px\] {
  height: 100px;
}
.h-\[100vh\] {
  height: 100vh;
}
.h-\[10rem\] {
  height: 10rem;
}
.h-\[11rem\] {
  height: 11rem;
}
.h-\[120px\] {
  height: 120px;
}
.h-\[12px\] {
  height: 12px;
}
.h-\[12vh\] {
  height: 12vh;
}
.h-\[13rem\] {
  height: 13rem;
}
.h-\[14\.198rem\] {
  height: 14.198rem;
}
.h-\[15rem\] {
  height: 15rem;
}
.h-\[16px\] {
  height: 16px;
}
.h-\[18\.271rem\] {
  height: 18.271rem;
}
.h-\[19\.375rem\] {
  height: 19.375rem;
}
.h-\[193px\] {
  height: 193px;
}
.h-\[1rem\] {
  height: 1rem;
}
.h-\[2\.25rem\] {
  height: 2.25rem;
}
.h-\[2\.5rem\] {
  height: 2.5rem;
}
.h-\[2\.75rem\] {
  height: 2.75rem;
}
.h-\[20\%\] {
  height: 20%;
}
.h-\[208px\] {
  height: 208px;
}
.h-\[20rem\] {
  height: 20rem;
}
.h-\[24px\] {
  height: 24px;
}
.h-\[2em\] {
  height: 2em;
}
.h-\[3\.3125rem\] {
  height: 3.3125rem;
}
.h-\[3\.313rem\] {
  height: 3.313rem;
}
.h-\[3\.35rem\] {
  height: 3.35rem;
}
.h-\[3\.55756rem\] {
  height: 3.55756rem;
}
.h-\[3\.55rem\] {
  height: 3.55rem;
}
.h-\[3\.5rem\] {
  height: 3.5rem;
}
.h-\[3\.75rem\] {
  height: 3.75rem;
}
.h-\[3\.9375rem\] {
  height: 3.9375rem;
}
.h-\[30vh\] {
  height: 30vh;
}
.h-\[30vw\] {
  height: 30vw;
}
.h-\[329px\] {
  height: 329px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[35vh\] {
  height: 35vh;
}
.h-\[3rem\] {
  height: 3rem;
}
.h-\[4\.074rem\] {
  height: 4.074rem;
}
.h-\[4\.1rem\] {
  height: 4.1rem;
}
.h-\[4\.375rem\] {
  height: 4.375rem;
}
.h-\[4\.75rem\] {
  height: 4.75rem;
}
.h-\[441px\] {
  height: 441px;
}
.h-\[44px\] {
  height: 44px;
}
.h-\[45vh\] {
  height: 45vh;
}
.h-\[5\.5rem\] {
  height: 5.5rem;
}
.h-\[5\.625rem\] {
  height: 5.625rem;
}
.h-\[5\.6rem\] {
  height: 5.6rem;
}
.h-\[50\%\] {
  height: 50%;
}
.h-\[5px\] {
  height: 5px;
}
.h-\[5rem\] {
  height: 5rem;
}
.h-\[60vh\] {
  height: 60vh;
}
.h-\[65vh\] {
  height: 65vh;
}
.h-\[67vh\] {
  height: 67vh;
}
.h-\[72vh\] {
  height: 72vh;
}
.h-\[75px\] {
  height: 75px;
}
.h-\[75vh\] {
  height: 75vh;
}
.h-\[80vh\] {
  height: 80vh;
}
.h-\[90vh\] {
  height: 90vh;
}
.h-\[95vh\] {
  height: 95vh;
}
.h-auto {
  height: auto;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-\[25rem\] {
  max-height: 25rem;
}
.max-h-\[400px\] {
  max-height: 400px;
}
.max-h-\[500px\] {
  max-height: 500px;
}
.max-h-\[75\%\] {
  max-height: 75%;
}
.min-h-\[140px\] {
  min-height: 140px;
}
.min-h-\[3\.5rem\] {
  min-height: 3.5rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-2 {
  width: 0.5rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-\[0\.75rem\] {
  width: 0.75rem;
}
.w-\[1\.25rem\] {
  width: 1.25rem;
}
.w-\[1\.5rem\] {
  width: 1.5rem;
}
.w-\[10\%\] {
  width: 10%;
}
.w-\[10\.4375rem\] {
  width: 10.4375rem;
}
.w-\[10\.5rem\] {
  width: 10.5rem;
}
.w-\[10\.625rem\] {
  width: 10.625rem;
}
.w-\[100\%\] {
  width: 100%;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[10px\] {
  width: 10px;
}
.w-\[10rem\] {
  width: 10rem;
}
.w-\[12\%\] {
  width: 12%;
}
.w-\[12\.5\%\] {
  width: 12.5%;
}
.w-\[12\.5625rem\] {
  width: 12.5625rem;
}
.w-\[120px\] {
  width: 120px;
}
.w-\[13\.8125rem\] {
  width: 13.8125rem;
}
.w-\[14\.198rem\] {
  width: 14.198rem;
}
.w-\[14\.938rem\] {
  width: 14.938rem;
}
.w-\[15\%\] {
  width: 15%;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[15rem\] {
  width: 15rem;
}
.w-\[1rem\] {
  width: 1rem;
}
.w-\[2\.25rem\] {
  width: 2.25rem;
}
.w-\[2\.5rem\] {
  width: 2.5rem;
}
.w-\[2\.75rem\] {
  width: 2.75rem;
}
.w-\[2\.8rem\] {
  width: 2.8rem;
}
.w-\[20\%\] {
  width: 20%;
}
.w-\[208px\] {
  width: 208px;
}
.w-\[20px\] {
  width: 20px;
}
.w-\[22\%\] {
  width: 22%;
}
.w-\[22\.3125rem\] {
  width: 22.3125rem;
}
.w-\[22\.6875rem\] {
  width: 22.6875rem;
}
.w-\[23\.125rem\] {
  width: 23.125rem;
}
.w-\[24\.625rem\] {
  width: 24.625rem;
}
.w-\[24px\] {
  width: 24px;
}
.w-\[25\%\] {
  width: 25%;
}
.w-\[25px\] {
  width: 25px;
}
.w-\[26\.25rem\] {
  width: 26.25rem;
}
.w-\[28\%\] {
  width: 28%;
}
.w-\[28\.25rem\] {
  width: 28.25rem;
}
.w-\[28\.563rem\] {
  width: 28.563rem;
}
.w-\[3\.25rem\] {
  width: 3.25rem;
}
.w-\[3\.3125rem\] {
  width: 3.3125rem;
}
.w-\[3\.313rem\] {
  width: 3.313rem;
}
.w-\[3\.5rem\] {
  width: 3.5rem;
}
.w-\[3\.75rem\] {
  width: 3.75rem;
}
.w-\[3\.9375rem\] {
  width: 3.9375rem;
}
.w-\[3\.938rem\] {
  width: 3.938rem;
}
.w-\[30\%\] {
  width: 30%;
}
.w-\[30\.25rem\] {
  width: 30.25rem;
}
.w-\[30\.3125rem\] {
  width: 30.3125rem;
}
.w-\[30\.4375rem\] {
  width: 30.4375rem;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[30rem\] {
  width: 30rem;
}
.w-\[30vw\] {
  width: 30vw;
}
.w-\[31\%\] {
  width: 31%;
}
.w-\[31\.66875rem\] {
  width: 31.66875rem;
}
.w-\[31rem\] {
  width: 31rem;
}
.w-\[32\.5rem\] {
  width: 32.5rem;
}
.w-\[329px\] {
  width: 329px;
}
.w-\[34\.5rem\] {
  width: 34.5rem;
}
.w-\[34\.875rem\] {
  width: 34.875rem;
}
.w-\[340px\] {
  width: 340px;
}
.w-\[34px\] {
  width: 34px;
}
.w-\[35rem\] {
  width: 35rem;
}
.w-\[3rem\] {
  width: 3rem;
}
.w-\[40\%\] {
  width: 40%;
}
.w-\[412px\] {
  width: 412px;
}
.w-\[441px\] {
  width: 441px;
}
.w-\[48px\] {
  width: 48px;
}
.w-\[5\%\] {
  width: 5%;
}
.w-\[5\.5rem\] {
  width: 5.5rem;
}
.w-\[5\.6rem\] {
  width: 5.6rem;
}
.w-\[50\%\] {
  width: 50%;
}
.w-\[51\%\] {
  width: 51%;
}
.w-\[512px\] {
  width: 512px;
}
.w-\[55\%\] {
  width: 55%;
}
.w-\[58\%\] {
  width: 58%;
}
.w-\[5px\] {
  width: 5px;
}
.w-\[5rem\] {
  width: 5rem;
}
.w-\[6\%\] {
  width: 6%;
}
.w-\[60\%\] {
  width: 60%;
}
.w-\[62\%\] {
  width: 62%;
}
.w-\[64\%\] {
  width: 64%;
}
.w-\[64\.5\%\] {
  width: 64.5%;
}
.w-\[65\%\] {
  width: 65%;
}
.w-\[7\.1875rem\] {
  width: 7.1875rem;
}
.w-\[70\%\] {
  width: 70%;
}
.w-\[72\%\] {
  width: 72%;
}
.w-\[75\%\] {
  width: 75%;
}
.w-\[75px\] {
  width: 75px;
}
.w-\[7rem\] {
  width: 7rem;
}
.w-\[8\.375rem\] {
  width: 8.375rem;
}
.w-\[8\.89881rem\] {
  width: 8.89881rem;
}
.w-\[80\%\] {
  width: 80%;
}
.w-\[85\%\] {
  width: 85%;
}
.w-\[8rem\] {
  width: 8rem;
}
.w-\[9\.0625rem\] {
  width: 9.0625rem;
}
.w-\[90\%\] {
  width: 90%;
}
.w-\[92\%\] {
  width: 92%;
}
.w-\[95\%\] {
  width: 95%;
}
.w-\[97\%\] {
  width: 97%;
}
.w-\[99\%\] {
  width: 99%;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}
.min-w-\[20rem\] {
  min-width: 20rem;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[15rem\] {
  max-width: 15rem;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[400px\] {
  max-width: 400px;
}
.max-w-\[40rem\] {
  max-width: 40rem;
}
.max-w-\[500px\] {
  max-width: 500px;
}
.max-w-\[50rem\] {
  max-width: 50rem;
}
.max-w-\[64\.25rem\] {
  max-width: 64.25rem;
}
.max-w-\[750px\] {
  max-width: 750px;
}
.max-w-\[80vw\] {
  max-width: 80vw;
}
.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-\[50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[100\%\] {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[5\%\] {
  --tw-translate-x: 5%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/4 {
  --tw-translate-y: 25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[32\%\] {
  --tw-translate-y: 32%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[270deg\] {
  --tw-rotate: 270deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes fade-in-up {

  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fade-in-up 0.9s ease-out forwards;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.\!cursor-grabbing {
  cursor: grabbing !important;
}
.cursor-auto {
  cursor: auto;
}
.cursor-none {
  cursor: none;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[repeat\(auto-fit\2c _minmax\(200px\2c _1fr\)\)\] {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-rows-\[repeat\(auto-fit\2c _minmax\(75px\2c _1fr\)\)\] {
  grid-template-rows: repeat(auto-fit, minmax(75px, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.gap-0 {
  gap: 0px;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-20 {
  gap: 5rem;
}
.gap-24 {
  gap: 6rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-\[0\.4rem\] {
  gap: 0.4rem;
}
.gap-\[0\.5rem\] {
  gap: 0.5rem;
}
.gap-\[0\.62rem\] {
  gap: 0.62rem;
}
.gap-\[0\.65rem\] {
  gap: 0.65rem;
}
.gap-\[1\.06rem\] {
  gap: 1.06rem;
}
.gap-\[1\.19rem\] {
  gap: 1.19rem;
}
.gap-\[1\.25rem\] {
  gap: 1.25rem;
}
.gap-\[1\.5rem\] {
  gap: 1.5rem;
}
.gap-\[1\.85rem\] {
  gap: 1.85rem;
}
.gap-\[1rem\] {
  gap: 1rem;
}
.gap-\[2\.25rem\] {
  gap: 2.25rem;
}
.gap-\[2\.5rem\] {
  gap: 2.5rem;
}
.gap-\[2rem\] {
  gap: 2rem;
}
.gap-\[3\.13rem\] {
  gap: 3.13rem;
}
.gap-\[3\.5rem\] {
  gap: 3.5rem;
}
.gap-\[3rem\] {
  gap: 3rem;
}
.gap-\[4\.12rem\] {
  gap: 4.12rem;
}
.gap-\[5px\] {
  gap: 5px;
}
.gap-\[5rem\] {
  gap: 5rem;
}
.gap-\[6px\] {
  gap: 6px;
}
.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-\[2\%\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2% * var(--tw-space-x-reverse));
  margin-left: calc(2% * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-\[2\.5\%\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2.5% * var(--tw-space-x-reverse));
  margin-left: calc(2.5% * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-\[0\.8\%\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.8% * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.8% * var(--tw-space-y-reverse));
}
.space-y-\[1\.5\%\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5% * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5% * var(--tw-space-y-reverse));
}
.space-y-\[1rem\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-\[3\%\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3% * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3% * var(--tw-space-y-reverse));
}
.space-y-\[5\%\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(5% * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(5% * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.justify-self-end {
  justify-self: end;
}
.justify-self-center {
  justify-self: center;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[0\.5rem\] {
  border-radius: 0.5rem;
}
.rounded-\[0\.75rem\] {
  border-radius: 0.75rem;
}
.rounded-\[1\.125rem\] {
  border-radius: 1.125rem;
}
.rounded-\[1\.25rem\] {
  border-radius: 1.25rem;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[15px\] {
  border-radius: 15px;
}
.rounded-\[1rem\] {
  border-radius: 1rem;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[3\.125rem\] {
  border-radius: 3.125rem;
}
.rounded-\[3\.13rem\] {
  border-radius: 3.13rem;
}
.rounded-\[4\.141rem\] {
  border-radius: 4.141rem;
}
.rounded-\[4\.414rem\] {
  border-radius: 4.414rem;
}
.rounded-\[40px\] {
  border-radius: 40px;
}
.rounded-\[50\%\] {
  border-radius: 50%;
}
.rounded-\[50px\] {
  border-radius: 50px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-b-\[0\] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-b-\[1\.125rem\] {
  border-bottom-right-radius: 1.125rem;
  border-bottom-left-radius: 1.125rem;
}
.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-l-\[1\.25rem\] {
  border-top-left-radius: 1.25rem;
  border-bottom-left-radius: 1.25rem;
}
.rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-r-\[50px\] {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}
.rounded-t-\[1\.125rem\] {
  border-top-left-radius: 1.125rem;
  border-top-right-radius: 1.125rem;
}
.rounded-t-\[1\.25rem\] {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.rounded-bl-\[0\.625rem\] {
  border-bottom-left-radius: 0.625rem;
}
.rounded-br-\[0\.625rem\] {
  border-bottom-right-radius: 0.625rem;
}
.rounded-tl-\[0\.625rem\] {
  border-top-left-radius: 0.625rem;
}
.rounded-tr-\[0\.625rem\] {
  border-top-right-radius: 0.625rem;
}
.rounded-tr-\[0\.75rem\] {
  border-top-right-radius: 0.75rem;
}
.\!border-\[2px\] {
  border-width: 2px !important;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-\[0\.125rem\] {
  border-width: 0.125rem;
}
.border-\[0\.25rem\] {
  border-width: 0.25rem;
}
.border-\[1px\] {
  border-width: 1px;
}
.border-\[2px\] {
  border-width: 2px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.\!border-none {
  border-style: none !important;
}
.border-none {
  border-style: none;
}
.\!border-white {
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)) !important;
}
.border-\[\#142205\] {
  --tw-border-opacity: 1;
  border-color: rgb(20 34 5 / var(--tw-border-opacity, 1));
}
.border-\[\#208002\] {
  --tw-border-opacity: 1;
  border-color: rgb(32 128 2 / var(--tw-border-opacity, 1));
}
.border-\[\#218102\] {
  --tw-border-opacity: 1;
  border-color: rgb(33 129 2 / var(--tw-border-opacity, 1));
}
.border-\[\#248802\] {
  --tw-border-opacity: 1;
  border-color: rgb(36 136 2 / var(--tw-border-opacity, 1));
}
.border-\[\#333\] {
  --tw-border-opacity: 1;
  border-color: rgb(51 51 51 / var(--tw-border-opacity, 1));
}
.border-\[\#69BF0D\] {
  --tw-border-opacity: 1;
  border-color: rgb(105 191 13 / var(--tw-border-opacity, 1));
}
.border-\[\#FFA800\] {
  --tw-border-opacity: 1;
  border-color: rgb(255 168 0 / var(--tw-border-opacity, 1));
}
.border-authInputFieldBorderColor {
  border-color: #69bf0c80;
}
.border-baseColor {
  --tw-border-opacity: 1;
  border-color: rgb(105 191 13 / var(--tw-border-opacity, 1));
}
.border-baseColor50 {
  border-color: #69BF0D80;
}
.border-cardInnerText {
  --tw-border-opacity: 1;
  border-color: rgb(65 160 7 / var(--tw-border-opacity, 1));
}
.border-darkTextColor {
  --tw-border-opacity: 1;
  border-color: rgb(57 63 101 / var(--tw-border-opacity, 1));
}
.border-dividerColor {
  --tw-border-opacity: 1;
  border-color: rgb(95 172 13 / var(--tw-border-opacity, 1));
}
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.border-modalCardTop {
  --tw-border-opacity: 1;
  border-color: rgb(64 110 15 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white80 {
  border-color: #FFFFFFCC;
}
.border-yellow-500\/10 {
  border-color: rgb(234 179 8 / 0.1);
}
.border-l-assessmentRemarkBorder {
  --tw-border-opacity: 1;
  border-left-color: rgb(255 186 0 / var(--tw-border-opacity, 1));
}
.border-opacity-50 {
  --tw-border-opacity: 0.5;
}
.border-opacity-\[0\.5\] {
  --tw-border-opacity: 0.5;
}
.bg-\[\#00000030\] {
  background-color: #00000030;
}
.bg-\[\#0e0e0e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(14 14 14 / var(--tw-bg-opacity, 1));
}
.bg-\[\#163E09\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 62 9 / var(--tw-bg-opacity, 1));
}
.bg-\[\#20800250\] {
  background-color: #20800250;
}
.bg-\[\#2A3321\] {
  --tw-bg-opacity: 1;
  background-color: rgb(42 51 33 / var(--tw-bg-opacity, 1));
}
.bg-\[\#41661990\] {
  background-color: #41661990;
}
.bg-\[\#41A007\] {
  --tw-bg-opacity: 1;
  background-color: rgb(65 160 7 / var(--tw-bg-opacity, 1));
}
.bg-\[\#626262\] {
  --tw-bg-opacity: 1;
  background-color: rgb(98 98 98 / var(--tw-bg-opacity, 1));
}
.bg-\[\#69BF0D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(105 191 13 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D1F5C2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(209 245 194 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E5F0FA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 240 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FF0000\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFFFFF1F\] {
  background-color: #FFFFFF1F;
}
.bg-\[\#FFFFFFE6\] {
  background-color: #FFFFFFE6;
}
.bg-\[\#ffffff30\] {
  background-color: #ffffff30;
}
.bg-\[transparent\] {
  background-color: transparent;
}
.bg-assessmentDate {
  --tw-bg-opacity: 1;
  background-color: rgb(111 196 14 / var(--tw-bg-opacity, 1));
}
.bg-assessmentIncorrect {
  --tw-bg-opacity: 1;
  background-color: rgb(255 107 0 / var(--tw-bg-opacity, 1));
}
.bg-assessmentPartialCorrect {
  --tw-bg-opacity: 1;
  background-color: rgb(255 214 0 / var(--tw-bg-opacity, 1));
}
.bg-assessmentSummaryText {
  --tw-bg-opacity: 1;
  background-color: rgb(41 141 3 / var(--tw-bg-opacity, 1));
}
.bg-baseColor {
  --tw-bg-opacity: 1;
  background-color: rgb(105 191 13 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black10 {
  background-color: #0000001A;
}
.bg-black25 {
  background-color: #00000040;
}
.bg-black30 {
  background-color: #0000004D;
}
.bg-black40 {
  background-color: #00000066;
}
.bg-black50 {
  background-color: #00000080;
}
.bg-chapterSelectionText {
  --tw-bg-opacity: 1;
  background-color: rgb(9 127 0 / var(--tw-bg-opacity, 1));
}
.bg-counterWarning {
  --tw-bg-opacity: 1;
  background-color: rgb(255 180 0 / var(--tw-bg-opacity, 1));
}
.bg-counterWarningFrom {
  background-color: #FFB40040;
}
.bg-darkModalCardTop {
  background-color: rgba(255, 255, 255, 0.20);
}
.bg-disabledButton {
  --tw-bg-opacity: 1;
  background-color: rgb(153 153 153 / var(--tw-bg-opacity, 1));
}
.bg-dropDownDarkTop {
  --tw-bg-opacity: 1;
  background-color: rgb(60 85 36 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-searchTermColor {
  --tw-bg-opacity: 1;
  background-color: rgb(255 67 26 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white10 {
  background-color: #FFFFFF1A;
}
.bg-white30 {
  background-color: #FFFFFF4D;
}
.bg-white40 {
  background-color: #FFFFFF66;
}
.bg-white50 {
  background-color: #FFFFFF80;
}
.bg-white60 {
  background-color: #FFFFFF99;
}
.bg-wrongUserInput {
  --tw-bg-opacity: 1;
  background-color: rgb(255 87 34 / var(--tw-bg-opacity, 1));
}
.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}
.bg-opacity-30 {
  --tw-bg-opacity: 0.3;
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-60 {
  --tw-bg-opacity: 0.6;
}
.bg-opacity-90 {
  --tw-bg-opacity: 0.9;
}
.bg-opacity-\[85\] {
  --tw-bg-opacity: 85;
}
.bg-\[linear-gradient\(180deg\2c _\#FFB40080_0\%\2c _\#000000_100\%\)\] {
  background-image: linear-gradient(180deg, #FFB40080 0%, #000000 100%);
}
.bg-\[linear-gradient\(to_right\2c _\#218102_8\%\2c _\#41A007_63\%\)\] {
  background-image: linear-gradient(to right, #218102 8%, #41A007 63%);
}
.bg-cardIndicator {
  background-image: url('/assets/icons/card-inner-indicator.svg');
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-bl {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-nature-dark {
  background-image: url('/assets/images/light_mode_bg.svg');
}
.bg-nature-light {
  background-image: url('/assets/images/background.svg');
}
.from-\[\#000000\] {
  --tw-gradient-from: #000000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#0a0f0a\] {
  --tw-gradient-from: #0a0f0a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 15 10 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#142205\] {
  --tw-gradient-from: #142205 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 34 5 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#1A1A1A\] {
  --tw-gradient-from: #1A1A1A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 26 26 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#1F3507\] {
  --tw-gradient-from: #1F3507 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 53 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#E4F0FA\] {
  --tw-gradient-from: #E4F0FA var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(228 240 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F0F5FA\] {
  --tw-gradient-from: #F0F5FA var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 245 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F3F8FE\] {
  --tw-gradient-from: #F3F8FE var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(243 248 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FFFFFF1A\] {
  --tw-gradient-from: #FFFFFF1A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FFFFFF4D\] {
  --tw-gradient-from: #FFFFFF4D var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-assessmentModalCTAFrom {
  --tw-gradient-from: #1F3507 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 53 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-assessmentSuccessGradientFrom {
  --tw-gradient-from: #FFB4004D var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 180 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-assessmentWarnigModalFrom {
  --tw-gradient-from: #274309 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 67 9 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cardTop {
  --tw-gradient-from: #1E3216 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 50 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-counterWarningFrom {
  --tw-gradient-from: #FFB40040 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 180 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-darkCardBackgroundColor {
  --tw-gradient-from: #EBF2F9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(235 242 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-darkModalCardContainerTop {
  --tw-gradient-from: #FAFCFD var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 252 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-dropDownDarkTop {
  --tw-gradient-from: #3C5524 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(60 85 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-feedbackColorFrom {
  --tw-gradient-from: #274309 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 67 9 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-400 {
  --tw-gradient-from: #9ca3af var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-600 {
  --tw-gradient-from: #4b5563 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-historyIconTopColor {
  --tw-gradient-from: #41A007 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(65 160 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-innerCardBottom {
  --tw-gradient-from: #62BA0C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 186 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-microphoneContainerTop {
  --tw-gradient-from: #1E3307 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 51 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-modalCardBottom {
  --tw-gradient-from: #142205 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 34 5 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-newAssessmentGradientFrom {
  --tw-gradient-from: #254009 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 64 9 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-selectedIconStartColor {
  --tw-gradient-from: #ffffff1a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-selectionMicTop {
  --tw-gradient-from: #1E3407 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 52 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sidebar {
  --tw-gradient-from: #2c371e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(44 55 30 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sidebar50 {
  --tw-gradient-from: #2C371E80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(44 55 30 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-toggleColorTop {
  --tw-gradient-from: #34491F var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 73 31 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-toggleTop {
  --tw-gradient-from: #273717 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 55 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-top {
  --tw-gradient-from: #406E0F var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(64 110 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white10 {
  --tw-gradient-from: #FFFFFF1A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#DBECFF1A\] {
  --tw-gradient-to: rgb(219 236 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #DBECFF1A var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#DBECFF4D\] {
  --tw-gradient-to: rgb(219 236 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #DBECFF4D var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black10 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0000001A var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-selectedIconViaColor {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0000001a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#050901\] {
  --tw-gradient-to: #050901 var(--tw-gradient-to-position);
}
.to-\[\#0D0D0D\] {
  --tw-gradient-to: #0D0D0D var(--tw-gradient-to-position);
}
.to-\[\#122012\] {
  --tw-gradient-to: #122012 var(--tw-gradient-to-position);
}
.to-\[\#406E0F\] {
  --tw-gradient-to: #406E0F var(--tw-gradient-to-position);
}
.to-\[\#E5EDF7\] {
  --tw-gradient-to: #E5EDF7 var(--tw-gradient-to-position);
}
.to-\[\#F0F5FA\] {
  --tw-gradient-to: #F0F5FA var(--tw-gradient-to-position);
}
.to-\[\#FCFDFF1A\] {
  --tw-gradient-to: #FCFDFF1A var(--tw-gradient-to-position);
}
.to-\[\#FCFDFF4D\] {
  --tw-gradient-to: #FCFDFF4D var(--tw-gradient-to-position);
}
.to-assessmentModalCTATo {
  --tw-gradient-to: #000000 var(--tw-gradient-to-position);
}
.to-assessmentWarnigModalTo {
  --tw-gradient-to: #142205 var(--tw-gradient-to-position);
}
.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.to-black25 {
  --tw-gradient-to: #00000040 var(--tw-gradient-to-position);
}
.to-black60 {
  --tw-gradient-to: #00000099 var(--tw-gradient-to-position);
}
.to-bottom {
  --tw-gradient-to: #000000 var(--tw-gradient-to-position);
}
.to-cardBottom {
  --tw-gradient-to: #000000 var(--tw-gradient-to-position);
}
.to-darkCardBackgroundColor {
  --tw-gradient-to: #EBF2F9 var(--tw-gradient-to-position);
}
.to-darkModalCardContainerBottom {
  --tw-gradient-to: #CEDAE9 var(--tw-gradient-to-position);
}
.to-darkModalSubmitTop {
  --tw-gradient-to: #218102 var(--tw-gradient-to-position);
}
.to-dropDownTo {
  --tw-gradient-to: #040601 var(--tw-gradient-to-position);
}
.to-feedbackColorTo {
  --tw-gradient-to: #142205 var(--tw-gradient-to-position);
}
.to-gray-500 {
  --tw-gradient-to: #6b7280 var(--tw-gradient-to-position);
}
.to-gray-700 {
  --tw-gradient-to: #374151 var(--tw-gradient-to-position);
}
.to-historyIconBottomColor {
  --tw-gradient-to: #76D914 var(--tw-gradient-to-position);
}
.to-historyIconTopColor {
  --tw-gradient-to: #41A007 var(--tw-gradient-to-position);
}
.to-microphoneContainerBottom {
  --tw-gradient-to: #0A1202 var(--tw-gradient-to-position);
}
.to-newAssessmentGradientTo {
  --tw-gradient-to: #101C04 var(--tw-gradient-to-position);
}
.to-selectedIconEndColor {
  --tw-gradient-to: #ffffff1a var(--tw-gradient-to-position);
}
.to-selectionMicBottom {
  --tw-gradient-to: #050801 var(--tw-gradient-to-position);
}
.to-toggleBottom {
  --tw-gradient-to: #000000 var(--tw-gradient-to-position);
}
.to-toggleColorBottom {
  --tw-gradient-to: #1F2B12 var(--tw-gradient-to-position);
}
.to-top {
  --tw-gradient-to: #406E0F var(--tw-gradient-to-position);
}
.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.to-white10 {
  --tw-gradient-to: #FFFFFF1A var(--tw-gradient-to-position);
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.stroke-baseColor {
  stroke: #69BF0D;
}
.stroke-modalCardBottom {
  stroke: #142205;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[0\.25rem\] {
  padding: 0.25rem;
}
.p-\[1\%\] {
  padding: 1%;
}
.p-\[1\.44rem\] {
  padding: 1.44rem;
}
.p-\[1\.5rem\] {
  padding: 1.5rem;
}
.p-\[10\%\] {
  padding: 10%;
}
.p-\[17\%\] {
  padding: 17%;
}
.p-\[1px\] {
  padding: 1px;
}
.p-\[2\%\] {
  padding: 2%;
}
.p-\[23\.5\%\] {
  padding: 23.5%;
}
.p-\[2rem\] {
  padding: 2rem;
}
.p-\[3rem\] {
  padding: 3rem;
}
.p-\[5\%\] {
  padding: 5%;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[0\.81rem\] {
  padding-left: 0.81rem;
  padding-right: 0.81rem;
}
.px-\[1\.19rem\] {
  padding-left: 1.19rem;
  padding-right: 1.19rem;
}
.px-\[1\.25rem\] {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-\[10\%\] {
  padding-left: 10%;
  padding-right: 10%;
}
.px-\[1rem\] {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-\[2\.5\%\] {
  padding-left: 2.5%;
  padding-right: 2.5%;
}
.px-\[2\.5rem\] {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-\[2rem\] {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[5rem\] {
  padding-left: 5rem;
  padding-right: 5rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[0\.25rem\] {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-\[0\.3rem\] {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.py-\[0\.5rem\] {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-\[0\.65rem\] {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.py-\[0\.75rem\] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-\[0\.85rem\] {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.py-\[0\.8rem\] {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.py-\[1\.5\%\] {
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}
.py-\[1\.5rem\] {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-\[1rem\] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-\[6px\] {
  padding-top: 6px;
  padding-bottom: 6px;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-\[0\.63rem\] {
  padding-bottom: 0.63rem;
}
.pb-\[0\.81rem\] {
  padding-bottom: 0.81rem;
}
.pb-\[1\.25rem\] {
  padding-bottom: 1.25rem;
}
.pb-\[1\.5\%\] {
  padding-bottom: 1.5%;
}
.pb-\[1\.7rem\] {
  padding-bottom: 1.7rem;
}
.pb-\[10px\] {
  padding-bottom: 10px;
}
.pb-\[194\%\] {
  padding-bottom: 194%;
}
.pb-\[1rem\] {
  padding-bottom: 1rem;
}
.pb-\[2\%\] {
  padding-bottom: 2%;
}
.pb-\[2rem\] {
  padding-bottom: 2rem;
}
.pb-\[3rem\] {
  padding-bottom: 3rem;
}
.pb-\[5\%\] {
  padding-bottom: 5%;
}
.pb-\[5rem\] {
  padding-bottom: 5rem;
}
.pb-\[5vh\] {
  padding-bottom: 5vh;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[0\.85rem\] {
  padding-left: 0.85rem;
}
.pl-\[0\.87rem\] {
  padding-left: 0.87rem;
}
.pl-\[1\.19rem\] {
  padding-left: 1.19rem;
}
.pl-\[1\.2rem\] {
  padding-left: 1.2rem;
}
.pl-\[1\.5rem\] {
  padding-left: 1.5rem;
}
.pl-\[1\.88rem\] {
  padding-left: 1.88rem;
}
.pl-\[16\%\] {
  padding-left: 16%;
}
.pl-\[18\%\] {
  padding-left: 18%;
}
.pl-\[1rem\] {
  padding-left: 1rem;
}
.pl-\[2\%\] {
  padding-left: 2%;
}
.pl-\[2\.5\%\] {
  padding-left: 2.5%;
}
.pl-\[3\%\] {
  padding-left: 3%;
}
.pl-\[4\%\] {
  padding-left: 4%;
}
.pl-\[5\%\] {
  padding-left: 5%;
}
.pl-\[6\%\] {
  padding-left: 6%;
}
.pl-\[8\%\] {
  padding-left: 8%;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-\[0\.87rem\] {
  padding-right: 0.87rem;
}
.pr-\[1\.1rem\] {
  padding-right: 1.1rem;
}
.pr-\[1\.5rem\] {
  padding-right: 1.5rem;
}
.pr-\[1\.66rem\] {
  padding-right: 1.66rem;
}
.pr-\[10\%\] {
  padding-right: 10%;
}
.pr-\[2\%\] {
  padding-right: 2%;
}
.pr-\[2\.5\%\] {
  padding-right: 2.5%;
}
.pr-\[6\.5rem\] {
  padding-right: 6.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-\[0\.63rem\] {
  padding-top: 0.63rem;
}
.pt-\[0\.87rem\] {
  padding-top: 0.87rem;
}
.pt-\[0\.95rem\] {
  padding-top: 0.95rem;
}
.pt-\[1\.19rem\] {
  padding-top: 1.19rem;
}
.pt-\[1\.25rem\] {
  padding-top: 1.25rem;
}
.pt-\[1\.5\%\] {
  padding-top: 1.5%;
}
.pt-\[1\.7rem\] {
  padding-top: 1.7rem;
}
.pt-\[1\.85rem\] {
  padding-top: 1.85rem;
}
.pt-\[1rem\] {
  padding-top: 1rem;
}
.pt-\[24\%\] {
  padding-top: 24%;
}
.pt-\[5\%\] {
  padding-top: 5%;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-end {
  text-align: end;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.75rem\] {
  font-size: 0.75rem;
}
.text-\[0\.875rem\] {
  font-size: 0.875rem;
}
.text-\[1\.063rem\] {
  font-size: 1.063rem;
}
.text-\[1\.125rem\] {
  font-size: 1.125rem;
}
.text-\[1\.25rem\] {
  font-size: 1.25rem;
}
.text-\[1\.325rem\] {
  font-size: 1.325rem;
}
.text-\[1\.5rem\] {
  font-size: 1.5rem;
}
.text-\[1\.625rem\] {
  font-size: 1.625rem;
}
.text-\[1\.875rem\] {
  font-size: 1.875rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[1rem\] {
  font-size: 1rem;
}
.text-\[2\.25rem\] {
  font-size: 2.25rem;
}
.text-\[2\.5rem\] {
  font-size: 2.5rem;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[40px\] {
  font-size: 40px;
}
.text-bannerText {
  font-size: 40px;
}
.text-card {
  font-size: 12px;;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-regular {
  font-size: 20.2px;
}
.text-semiMedium {
  font-size: 12px;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.font-thin {
  font-weight: 100;
}
.uppercase {
  text-transform: uppercase;
}
.leading-10 {
  line-height: 2.5rem;
}
.leading-\[1\.25rem\] {
  line-height: 1.25rem;
}
.leading-\[1\.425rem\] {
  line-height: 1.425rem;
}
.leading-\[1\.75rem\] {
  line-height: 1.75rem;
}
.leading-\[1\.875rem\] {
  line-height: 1.875rem;
}
.leading-\[2\.125rem\] {
  line-height: 2.125rem;
}
.leading-\[2\.5rem\] {
  line-height: 2.5rem;
}
.leading-\[2\.75rem\] {
  line-height: 2.75rem;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.5rem\] {
  letter-spacing: 0.5rem;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-\[\#000000\] {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-\[\#00AA00\] {
  --tw-text-opacity: 1;
  color: rgb(0 170 0 / var(--tw-text-opacity, 1));
}
.text-\[\#363E64\] {
  --tw-text-opacity: 1;
  color: rgb(54 62 100 / var(--tw-text-opacity, 1));
}
.text-\[\#393F65\] {
  --tw-text-opacity: 1;
  color: rgb(57 63 101 / var(--tw-text-opacity, 1));
}
.text-\[\#69BF0D\] {
  --tw-text-opacity: 1;
  color: rgb(105 191 13 / var(--tw-text-opacity, 1));
}
.text-\[\#8F9FAE\] {
  --tw-text-opacity: 1;
  color: rgb(143 159 174 / var(--tw-text-opacity, 1));
}
.text-\[\#CBD5E1\] {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-\[\#FFA800\] {
  --tw-text-opacity: 1;
  color: rgb(255 168 0 / var(--tw-text-opacity, 1));
}
.text-assessmentDate {
  --tw-text-opacity: 1;
  color: rgb(111 196 14 / var(--tw-text-opacity, 1));
}
.text-assessmentSummaryText {
  --tw-text-opacity: 1;
  color: rgb(41 141 3 / var(--tw-text-opacity, 1));
}
.text-baseColor {
  --tw-text-opacity: 1;
  color: rgb(105 191 13 / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-cardInnerText {
  --tw-text-opacity: 1;
  color: rgb(65 160 7 / var(--tw-text-opacity, 1));
}
.text-cardInnerText50 {
  color: #41A00780;
}
.text-chapterSelectionText {
  --tw-text-opacity: 1;
  color: rgb(9 127 0 / var(--tw-text-opacity, 1));
}
.text-darkCardInnerText {
  --tw-text-opacity: 1;
  color: rgb(67 142 92 / var(--tw-text-opacity, 1));
}
.text-darkTextColor {
  --tw-text-opacity: 1;
  color: rgb(57 63 101 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-modalSubmit {
  --tw-text-opacity: 1;
  color: rgb(33 129 2 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-toggleDarkColor {
  --tw-text-opacity: 1;
  color: rgb(105 191 13 / var(--tw-text-opacity, 1));
}
.text-warningColor {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white30 {
  color: #FFFFFF4D;
}
.text-white50 {
  color: #FFFFFF80;
}
.underline {
  text-decoration-line: underline;
}
.caret-darkTextColor {
  caret-color: #393F65;
}
.caret-white {
  caret-color: #fff;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-\[0\.4\] {
  opacity: 0.4;
}
.opacity-\[0\.5\] {
  opacity: 0.5;
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.blur {
  --tw-blur: blur(8px);
  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);
}
.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-sm {
  --tw-backdrop-blur: blur(4px);
  -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 {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.delay-0 {
  transition-delay: 0s;
}
.delay-100 {
  transition-delay: 100ms;
}
.delay-200 {
  transition-delay: 200ms;
}
.delay-300 {
  transition-delay: 300ms;
}
.duration-100 {
  transition-duration: 100ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

:root {
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
  --text-xl: 60px;
  --text-large: 40px;
  --text-medium: 30px;
  --text-regular: 21.2px;
  --text-base: 14px;
  --text-tiny: 10px;
  --primary-font: 'Inter';
  --secondary-font: 'PT Serif';
  --background-image: '/assets/images/background.svg';
  --white-color: #fff;
  --black-color: #000;
  --base-color: #69bf0d;
  --timerBackground-color: #142205;
  --chat-history-color: #406e0f;
  --progressBarGreen: #527330;
  --red-bg: #c30010;
  --toggle-active-border-color: #41a007;
  --darkTabBorderColor: #393f65;
  --startBoxShadow: #3aaef84d;
  --navBarGradient-from: #218102;
  --navIcon-0-boxShadow: #3aaef84d;
  --navIcon-0-boxShadow-light: #ffffff99;
  --inputMode-pulse-border: #33ff00;
  --pulse-border: #47a608;
  --inputMode-boxShadow: #123d65;
  --navicon-1-dropshadow-1: #aafb53;
  --navicon-2-dropshadow-1: #da5949;
  --navicon-3-dropshadow-2: #6ebeeb;
  --navicon-4-dropshadow: #ffba00;
  --navBackground: #6ebeeb4d;
  --navBackground-shadow: #6ebeeb2e;
  --navBackground-outerShadow: #55555526;
  --bannerCard-boxShadow: #2c4213;
  --card-boxShadow-light: #c9d9e4cc;
  --micIssueNotification-boxShadow: #ffffff2e;
  --warningColor: #ff000080;
  --option-boxShadow: #253416;
  --optionContainer-color: #41a0071a;
  --optionContainer-light: #123d651a;
  --assessmentTextArea: #69bf0d80;
  --black-50: #00000080;
  --assessment-message-boxShadow: rgba(85, 85, 85, 0.15);
  --feedback-action-button-boxShadow: rgba(85, 85, 85, 0.15);
  --white-10: #ffffff4d;
  --option-selected-light: #097f00;
  --option-selection-background-light: rgba(255, 255, 255, 0.3);
  color-scheme: light dark;

  --toolbar-bg: linear-gradient(0deg, #000 -18.5%, #406e0f 225.92%);
  --toolbar-bg-dark:  linear-gradient(211deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
  --keyboard-button-selected-border: #41a007;
  --keyboard-text-color: #ffffff;
  --scrollbar-thumb: #41A007;
}
[data-theme='dark'] {
  /* --toolbar-bg: linear-gradient(211deg, #EBF2F9 19.14%, #C6D7EB 154.68%); */
  --keyboard-button-selected-border: #00000080;
  --keyboard-text-color: #393f65;
  --scrollbar-thumb: #393F65;
}
@media (prefers-color-scheme: light) {
  :root {
    --foreground-rgb: 0, 0, 0;
    --background-color: 255, 255, 255;
    --background-start-rgb: 255, 255, 255;
    --background-end-rgb: 255, 255, 255;
    --background-image: '/assets/images/dark_bg.svg';
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: 0, 0, 0;
    --background-image: '/assets/images/dark_bg.svg';
  }
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main-section {
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.card1 {
  animation-delay: 1.5s;
  animation-duration: 1s;
  animation: slideInFromTop 1s ease;
}

.card2 {
  animation-delay: 1.5s;
  animation-duration: 1s;
  animation: slideInFromBottom 1s ease;
}

.card3 {
  animation-delay: 1.5s;
  animation-duration: 1s;
  animation: slideInFromTop 1s ease;
}

.card4 {
  animation-delay: 1.5s;
  animation-duration: 1s;
  animation: slideInFromRight 1s ease;
}

.card5 {
  animation-delay: 1.5s;
  animation-duration: 1s;
  animation: slideInFromBottom 1s ease;
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    transform: rotate(30deg);
  }

  to {
    transform: translateX(0);
    transform: rotate(0deg);
  }
}

.translate2 {
  transition: transform 0.5s ease-in-out;
}

.translate3 {
  transition: transform 0.5s ease-in-out;
}

.translate4 {
  transition: transform 0.5s ease-in-out;
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%) rotate(30deg);
  }

  to {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%) rotate(30deg);
  }

  to {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%) rotate(-30deg);
  }

  to {
    transform: translateX(0) rotate(0deg);
  }
}

.historySearchAnimation {
  transition: 2s;
  animation: slideLeft 1s ease;
  animation-duration: 1s;
}

@keyframes slideLeft {
  from {
    transform: translateX(90%);
  }

  to {
    transform: translateX(0px);
  }
}

.historyCloseSearchAnimation {
  animation: slideLeftIn 2s ease;
  animation-duration: 2s;
}

@keyframes slideLeftIn {
  from {
    transform: translateX(-200px);
  }

  to {
    transform: translateX(0%);
  }
}

.inputHistory {
  display: flex;
  animation: disableInput 1.5s ease;
  opacity: 1;
  animation-duration: 1s;
}

@keyframes disableInput {
  0% {
    width: 100%;
  }

  50% {
    width: 50%;
  }

  100% {
    opacity: 0;
  }
}

.historyTextDisplay {
  display: flex;
  animation-duration: 3s;
  animation: showText 2s ease;
  opacity: 1;
}

@keyframes showText {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.historyHeading {
  animation: positionFixing 2s ease;
  animation-duration: 2s;
  justify-content: space-between;
}

@keyframes positionFixing {
  0% {
    justify-content: flex-start;
  }

  100% {
    justify-content: space-between;
  }
}

.slideInHr {
  animation: slidingIn 1s ease;
  animation-duration: 1s;
}

@keyframes slidingIn {
  from {
    transform: translateX(90%);
  }

  to {
    transform: translateX(0);
  }
}

.slideOutHr {
  animation: slidingOut 2s ease;
  animation-duration: 2s;
  transform: translateX(80%);
  opacity: 0;
}

@keyframes slidingOut {
  from {
    transform: translateX(0px);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.microphoneContainer {
  animation: slideUp 700ms ease;
  animation-duration: 700ms;
  bottom: -50%;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.microphoneContainerInvisible {
  animation: slideDOWN 700ms ease;
  animation-duration: 700ms;
  transform: translateY(120%);
}

@keyframes slideDOWN {
  0% {
    transform: translateY(12%);
  }

  100% {
    transform: translateY(120%);
  }
}

.icon0 {
  background: linear-gradient(32deg, var(--navBarGradient-from) 36.9%, var(--toggle-active-border-color) 74.42%);
  filter: drop-shadow(0px 6px 21px var(--navIcon-0-boxShadow));
  border-radius: 50%;
  animation: opacity 1s ease-in;
}

.lightIcon0 {
  background: linear-gradient(35deg, var(--toggle-active-border-color) 5.29%, #76d914 81.27%, #80e416 95.59%);
  filter: drop-shadow(-6px -6px 16px var(--navIcon-0-boxShadow-light));
  border-radius: 50%;
  animation: opacity 1s ease-in;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.icon1 {
  border-radius: 50%;
  background: linear-gradient(32deg, var(--navBarGradient-from) 36.9%, var(--toggle-active-border-color) 74.42%);
  filter: drop-shadow(0px 6px 21px var(--navIcon-0-boxShadow));
  animation: opacity 1s ease-in;
}

.lightIcon1 {
  background: linear-gradient(35deg, var(--toggle-active-border-color) 5.29%, #76d914 81.27%, #80e416 95.59%);
  filter: drop-shadow(-6px -6px 16px var(--navIcon-0-boxShadow-light));
  border-radius: 50%;
  animation: opacity 1s ease-in;
}

.micDropDownIn {
  animation: slidefromMic 1s ease;
  animation-duration: 1s;
  opacity: 1;
  transform: translateX(-80%);
}

@keyframes slidefromMic {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(-80%);
    opacity: 1;
  }
}

.micDropDownOut {
  animation: slideIntoMic 1s ease;
  animation-duration: 1s;
  opacity: 0;
  transform: translateX(0%);
}

@keyframes slideIntoMic {
  0% {
    transform: translateX(-80%);
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}

.pulse {
  border: 2px solid var(--inputMode-pulse-border);
  border-radius: 100%;
}

.pulse:before,
.pulse:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2.25px solid var(--pulse-border);
  border-radius: 100%;
  animation: animate 1s linear infinite;
}

.pulse:after {
  animation-delay: 0.5s;
}

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

  100% {
    transform: scale(1.7);
    opacity: 1;
  }
}

.dropShadowIcon1 {
  filter: drop-shadow(3px 14px 16px var(--navicon-1-dropshadow-1)) drop-shadow(4px 10px 13px var(--white-color));
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.dropShadowIcon2 {
  filter: drop-shadow(4px 7px 18px var(--navicon-2-dropshadow-1)) drop-shadow(5px 9px 17px var(--white-color));
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.dropShadowIcon3 {
  filter: drop-shadow(2px 9px 12px var(--white-color)) drop-shadow(0px 10px 12px var(--navicon-3-dropshadow-2));
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.dropShadowIcon4 {
  filter: drop-shadow(6px 16px 40px var(--navicon-4-dropshadow)) drop-shadow(-3px -2px 23px var(--navicon-4-dropshadow));
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.historyIconDropShadow {
  filter: drop-shadow(6px 16px 40px var(--navicon-3-dropshadow-2)) drop-shadow(-6px -6px 16px var(--white-color));
}

.cardBorder {
  border-radius: 0rem 0rem 0.75rem 0.75rem;
  border: 2px solid var(--white-color);
}

.navbarBackground {
  fill: var(--navBackground);
  stroke-width: 2px;
  stroke: var(--white-color);
  /* box-shadow: -8px -6px 80px 0px var(--navBackground-shadow) inset; */
  filter: drop-shadow(8px 40px 96px var(--navBackground-shadow));
}

.navbarShadow {
  filter: drop-shadow(0px -4px 10px var(--navBackground-outerShadow));
}

.inputModeBoxShadow {
  filter: drop-shadow(5px 93px 101px var(--inputMode-boxShadow));
}

.historyAnimationOpen {
  transform: translateX(0%);
  animation: historySlideIn 1s ease;
  animation-duration: 1s;
  opacity: 1;
}

@keyframes historySlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

.settingsContainer {
  animation: container 1s ease-in;
}

@keyframes container {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.settingsContainerClose {
  animation: containerClose 1s ease-out;
}

@keyframes containerClose {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
  }
}

.modeSwitcherZIndex {
  z-index: -1;
}

::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  scrollbar-width: thin;
}

.scrollbar-hidden::-webkit-scrollbar-thumb {
  display: none;
}

.stackContainer {
  position: relative;
}

.image1,
.image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image2 {
  z-index: 1;
}

.video-container {
  position: relative;
  width: 80%;
  padding-bottom: 35%;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.cardBoxShadowDark {
  box-shadow: 0px 0px 0px var(--bannerCard-boxShadow);
  /* box-shadow: calc( 0 * 2px ) calc( 0 * 2px ) 20px fade(black, 50%); */
}

.cardBoxShadowLight {
  box-shadow: 0px 0px 0px var(--card-boxShadow-light);
}

.cardBoxShadowDark:hover {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.65), -10px 10px 10px 0px rgba(92, 159, 19, 0.2);
}

.cardBoxShadowLight:hover {
  box-shadow: -18px 18px 20px var(--card-boxShadow-light);
  /* box-shadow: calc( 0 * 2px ) calc( 0 * 2px ) 20px fade(black, 50%); */
}

.minChatWidth {
  width: 65%;
  animation: minProps 1s ease-out;
  transform-origin: left;
  position: fixed;
  left: 0;
  margin-left: 10rem;
}

@keyframes minProps {
  0% {
    width: 80%;
  }

  100% {
    width: 65%;
  }
}

.maxChatWidth {
  width: 80%;
  animation: maxProps 1s ease-out;
  transform-origin: left;
  position: fixed;
  left: 0;
  margin-left: 10rem;
}

@keyframes maxProps {
  0% {
    width: 65%;
  }

  100% {
    width: 80%;
  }
}

.card {
  transform-style: preserve-3d;
}

.cardtext {
  transition: 0.7s ease;
  transform: translateZ(0px);
}

.card:hover .cardtext {
  transition: 0.3s ease-in;
  transform: translateZ(25px);
}

.closeModal {
  animation: 1s modalCloseOpacity ease;
}

@keyframes modalCloseOpacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.slick-next {
  display: none !important;
}

.slick-prev {
  display: none !important;
}

.slick-slide > div {
  margin: 0 10px;
  display: flex;
  align-items: center;
}

.slick-custom-card {
  width: 8.64125rem !important;
}

.videoPlayer {
  width: 100% !important;
  height: 100% !important;
}

.focusInnerTab {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.focusInnerTab:hover {
  border: 2px solid var(--darkTabBorderColor);
  transition: all 0.3s ease;
}

.focusInnerTabDark {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.focusInnerTabDark:hover {
  border: 2px solid white;
  transition: all 0.3s ease;
}

.bannerBackground {
  background-image: url('/assets/images/background.svg');
  width: 100%;
  height: 130dvh;
}

.card-spacing {
  display: flex;
  justify-content: center;
}

.focus-header-positioning {
  position: absolute;
  top: 5%;
}

.foucs-footer-positioning {
  position: absolute;
  bottom: 5%;
}

.banner-header {
  margin-left: 0%;
}

.banner-cards-positioning {
  right: 9.5%;
}

.practice-section-alignment {
  left: 11.31rem;
}

.alertBoxShowTransition {
  animation: alertBoxShowAnimation 0.3s ease;
}

@keyframes alertBoxShowAnimation {
  0% {
    top: 0;
    opacity: 0;
  }

  100% {
    top: 1.94rem;
    opacity: 1;
  }
}

.alertBoxHideTransition {
  animation: alertBoxHideAnimation 0.5s ease-out;
}

@keyframes alertBoxHideAnimation {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.carouselHeaderMargin {
  margin-left: 10px;
}

.connectionIssueNotification {
  transform: translate(100%, 50%);
}

.micIssueNotification {
  transform: translate(75%, 50%);
}

.boxShadow {
  box-shadow: -8px -6px 80px 0px var(--micIssueNotification-boxShadow) inset;
}

.responseImageDimension {
  cursor: crosshair;
  /* max-width: 500px;
  max-height: 500px;
  border-radius: 0.5rem; */
  --x: 50%;
  --y: 50%;
  transform: scale(var(--zoom));
  transform-origin: var(--x) var(--y);
  clip-path: inset(
    calc((1 - 1 / var(--zoom)) * (var(--y))) calc((1 - 1 / var(--zoom)) * (100% - var(--x)))
      calc((1 - 1 / var(--zoom)) * (100% - var(--y))) calc((1 - 1 / var(--zoom)) * (var(--x)))
  );

  background-color: var(--white-color);
}

.responseImageDimension:hover {
  --zoom: 1.5;
  border-radius: 0.5rem !important;
}

.focusVideoWidth {
  width: 100% !important;
  height: 100% !important;
}

.loginBg {
  background-image: url('/assets/images/loginBackground.svg');
}

.inputBackgroundColor {
  background: linear-gradient(0deg, var(--black-color) -18.5%, var(--progressBarGreen) 225.92%);
  box-shadow: 0px -4px 10px 0px var(--navBackground-outerShadow);
}

.inputBackgroundColor_light {
  background-color: white;
  opacity: 0.7;
}

.inputField {
  padding: 1%;
  padding-left: 1.25%;
  /* padding-top: 1.25%; */
  outline: none;
  resize: none;
  color: var(--white-color);
}

.inputFieldWarning {
  padding: 1%;
  padding-left: 1.25%;
  padding-top: 1.1%;
  outline: none;
  resize: none;
  color: var(--white-color);
}

.OTPInputField {
  padding: 1%;
  text-align: center;
  outline: none;
  resize: none;
  color: var(--white-color);
}

.loginButton {
  border-radius: 1rem;
  background: var(
    --active_color,
    linear-gradient(32deg, var(--navBarGradient-from) 36.9%, var(--toggle-active-border-color) 74.42%)
  );
  box-shadow: 0px -4px 10px 0px var(--navBackground-outerShadow);
}

.primaryFont {
  font-family: var(--primary-font);
}

.secondaryFont {
  font-family: var(--secondary-font);
}

.splashImage {
  animation: 2.5s splashAnimation linear infinite;
}

@keyframes splashAnimation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.image_1_positioning {
  position: fixed;
  top: 14%;
  right: 16.5%;
  z-index: 1;
}

.image_2_positioning {
  position: fixed;
  top: 36%;
  right: 22%;
  z-index: 1;
  width: 25%;
}

.image_3_positioning {
  position: fixed;
  bottom: 7%;
  right: 3%;
  z-index: 1;
}

@keyframes image_1_animation {
  0% {
    top: 100%;
    right: 15%;
  }

  50% {
    right: 35%;
  }

  80% {
    top: 10%;
  }

  100% {
    top: 14%;
    right: 17%;
  }
}

@keyframes image_2_animation {
  0% {
    top: 100%;
    right: -10%;
  }

  100% {
    top: 36%;
    right: 22%;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.timerCssBackground {
  fill: none;
  stroke-width: 4.5px;
  stroke-linecap: round;
  stroke-dasharray: 125;
}

.timerCss {
  fill: none;
  stroke-width: 4.5px;
  stroke-linecap: round;
  stroke-dasharray: 125;
}

.warningTransition {
  animation: 0.5s showWarningTransition ease-in;
  transform: translateY(1rem);
}

@keyframes showWarningTransition {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(1rem);
  }
}

.showBorderWarning {
  animation: stroke-transition 1s infinite ease;
}

@keyframes stroke-transition {
  0% {
    border: 2px solid var(--warningColor);
  }

  100% {
    border: 2px solid var(--warningColor);
  }
}

.authButton {
  transition: 0.5s ease;
}

.authButton:hover {
  transform: scale(110%);
  cursor: pointer;
  transition: 0.5s ease;
}

.warningTransition {
  animation: 0.5s showWarningTransition ease-in;
  transform: translateY(1rem);
}

@keyframes showWarningTransition {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(1rem);
  }
}

.showBorderWarning {
  animation: stroke-transition 1s infinite ease;
}

@keyframes stroke-transition {
  0% {
    border: 2px solid var(--warningColor);
  }

  100% {
    border: 2px solid var(--warningColor);
  }
}

.timerCssPosition {
  transform: scale(-1, 1) rotate(270deg);
}

.timerTransition {
  animation: 0.5s timer;
}

@keyframes timer {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transition: ease;
  }
}

.timerCssPosition {
  transform: scale(-1, 1) rotate(270deg);
}

.timerTransition {
  animation: 0.5s timer;
}

@keyframes timer {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transition: ease;
  }
}

.transition {
  transition: all 0.3s ease;
}

.applyTransition {
  transition: all 0.3s ease;
}

.easeTransition {
  /* transition: 0.3s ease; */
  transition: transform 0.3s ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
}

.scaleDownTransition {
  transition: 0.3s ease !important;
}

.topicSelectionCard {
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.easeTransition:hover {
  transform: scale(1.1);
  /* transition: 0.3s ease; */
}

.scaleDownTransition:hover {
  transform: scale(0.9) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.inputTextColor {
  color: var(--darkTabBorderColor) !important;
  caret-color: var(--darkTabBorderColor) !important;
}

.cardContainerPosition {
  top: 8rem;
}

.cardMarginBottom {
  /* margin-bottom: 2rem; */
  /* margin-top: 1rem; */
}

.optionColor {
  background: linear-gradient(0deg, var(--black-color) -18.5%, var(--progressBarGreen) 225.92%);
  filter: drop-shadow(0px -4px 10px var(--navBackground-outerShadow));
}

.optionColorLight {
  background-color: var(--option-selection-background-light);
  /* filter: drop-shadow(0px -4px 10px var(--navBackground-outerShadow)); */
}

.disableAllFields {
  pointer-events: none;
  cursor: no-drop;
}

.optionsBoxShadow {
  box-shadow: 0px -4px 10px 0px var(--navBackground-outerShadow);
}

.optionSelected {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: var(--base-color);
  opacity: 1;
  transition: 0.3s ease;
}

.optionSelectedLight {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: var(--option-selected-light);
  opacity: 1;
  transition: 0.3s ease;
}

.optionDescriptionBoxShadow {
  box-shadow: 0px -1px 12px 8px var(--option-boxShadow) inset;
  transition: all 0.3s ease;
}

.optionDescriptionBoxShadowLight {
  box-shadow: 0px -1px 12px 8px var(--option-boxShadow) inset;
  transition: all 0.3s ease;
}

.chatContainer {
  background-color: var(--black-color);
  box-shadow: 0px 4px 10px 0px var(--optionContainer-color);
}

.chatContainerLight {
  background-color: var(--white-color) / 30;
  box-shadow: 8px 20px 50px 0px var(--optionContainer-light);
  box-shadow: -8px -6px 80px 0px var(--micIssueNotification-boxShadow) inset;
  transition: all 0.3s ease;
}

.startButtonBoxShadow {
  box-shadow: 0px 6px 21px 0px var(--startBoxShadow);
}

.progressBarBackground {
  background: linear-gradient(0deg, var(--black-color) -18.5%, var(--progressBarGreen) 225.92%);
}

#inputText {
  height: auto;
}

.assessmentTextArea {
  background-color: var(--black-50);
  border: 1px solid var(--assessmentTextArea);
  border-radius: 1.25rem;
  filter: drop-shadow(0px -4px 10px var(--navBackground-outerShadow));
}

.assessmentTextAreaLight {
  background-color: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255);
  border-radius: 1.25rem;
  filter: drop-shadow(0px -4px 10px var(--navBackground-outerShadow));
}

.assessmentSuccessBoxShadow {
  box-shadow: 0px -4px 10px 0px var(--assessment-message-boxShadow);
}

.assessmenInnerBoxShadow {
  box-shadow: 0px -1px 12px 8px var(--option-boxShadow) inset;
  transition: all 0.3s ease;
}

.assessmentChartPadding {
  padding: 1.5rem 3rem;
}

.inputFieldBoxShadow {
  box-shadow: 0px 4px 10px 0px rgba(65, 160, 7, 0.1);
}

.assessmentReportSectionDivider {
  margin-bottom: 8vh !important;
}

.assessmentModalDropShadow {
  box-shadow: 0px -4px 10px var(--assessment-message-boxShadow);
}

strong {
  font-weight: bold;
}

.passwordFieldWarning {
  padding-left: 4% !important;
}

.toolTipId {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.helpModalBackground {
  background: linear-gradient(357deg, #000 -92.6%, #142205 3.44%, #406e0f 215.99%, #274309 215.99%);
}

.helpDashboard {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--white-color);
  text-align: center;
  background-color: transparent;
  border-radius: 1.25rem;
  transition: all 0.3s ease;
}

.helpDashboard:hover {
  color: var(--base-color);
  background-color: var(--white-10);
}

.helpDashboardSelected {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--base-color);
  text-align: center;
  background-color: var(--white-10);
  border-radius: 1.25rem;
  transition: all 0.3s ease;
}

.assessmentSpacing {
  margin-bottom: 2.5rem !important;
}

p {
  padding-top: 10px;
}

/* Base styles for all tables */
table {
  color: var(--white-color);
  border-radius: 50px;
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  /* Adds space before and after the table */
}

/* Header styles */
th {
  padding: 1rem 2rem;
  text-align: left;
  font-weight: 700;
  font-size: 20px;
}

th:first-child {
  border-top-left-radius: 10px;
}

th:last-child {
  border-top-right-radius: 10px;
}

th:nth-child(odd) {
  background-color: #41a007;
}

th:nth-child(even) {
  background-color: #50a71c;
}

/* Table row styles */
/* tr:nth-child(even) td {
  background-color: #272627;
}

tr:nth-child(odd) td {
  background-color: #3B3F38;
} */

/* Cell styles */
td {
  padding: 1rem 2rem;
  text-align: left;
  font-size: 20px;
  font-weight: 400;
}

td:first-child {
  font-weight: 600;
}

tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* Horizontal divider between rows */
/* tr:not(:last-child) {
  border-bottom: 0.5px solid #FFFFFF33;
} */

.historyToolTipPositioning {
  top: 29.5%;
  left: -23%;
}

.assessmentSubjectSelection {
  top: 68%;
}

.navBoxShadow {
  box-shadow: -8px -6px 80px 0px rgba(255, 255, 255, 0.18), 8px 40px 96px rgba(18, 61, 101, 0.24);
}

.feedbackBoxShadow {
  /* box-shadow: -8px -6px 80px 0px rgba(255, 255, 255, 0.18), 8px 40px 96px 0px rgba(18, 61, 101, 0.14); */
  border-radius: 1.25rem;
  border: 1px solid #fff;
  background: linear-gradient(211deg, #ebf2f9 19.14%, #c6d7eb 154.68%);
  box-shadow: -8px -6px 80px 0px rgba(255, 255, 255, 0.18) inset, 8px 40px 96px 0px rgba(18, 61, 101, 0.14);
}

.feedbackModalBoxShadow {
  background: radial-gradient(94.76% 94.55% at 50% 50%, #e6f0f9 32.11%, rgba(235, 243, 250, 0) 100%);
}

.smoothTransition {
  transition: all 0.3s ease;
}

.uploadBoxShadow {
  box-shadow: 2px 10px 24px 0px rgba(18, 61, 101, 0.1);
}

.scrollUpBoxShadow {
  box-shadow: -2px 2px 9px 0px rgba(18, 61, 101, 0.1);
}

.supportBoxShadow {
  box-shadow: 0px -5.3px 13.25px 0px rgba(85, 85, 85, 0.15);
}

.assessmentWarningModal {
  background: linear-gradient(211deg, #ebf2f9 19.14%, #c6d7eb 154.68%);
  box-shadow: -8px -6px 80px 0px rgba(255, 255, 255, 0.18), 8px 40px 96px 0px rgba(18, 61, 101, 0.14);
}

.assessmentWarningModalBackground {
  background: radial-gradient(94.76% 94.55% at 50% 50%, #e6f0f9 32.11%, rgba(235, 243, 250, 0) 100%);
}

.uploadBackgroundContainer {
  background: linear-gradient(0deg, #000 -18.5%, #406e0f 225.92%);
}

.chatFeedbackActionButton {
  box-shadow: 0px 4px 10px 0px var(--feedback-action-button-boxShadow);
}

.inputBarBoxShadow {
  box-shadow: 0px -4px 10px 0px var(--assessment-message-boxShadow);
}

.inputBarBoxShadowLight {
  box-shadow: 2px 10px 24px 0px rgba(18, 61, 101, 0.1);
}

.inputContainerBoxShadowLight {
  box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.08);
}

.inputBarAddDocument {
  background: linear-gradient(4deg, #000 -14.49%, #406e0f 341.85%);
}

.fadeInAnimation {
  transition: all 0.5s ease;
  animation: 0.5s animataFadeInAnimation ease;
}

@keyframes animataFadeInAnimation {
  0% {
    transform: translateY(1.5rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.inputSelection {
  border-radius: 1.25rem;
  background: linear-gradient(0deg, #000 -18.5%, #527330 225.92%);
  box-shadow: 0px -4px 10px 0px rgba(85, 85, 85, 0.15);
}

.noWrap {
  text-wrap: nowrap;
}

.rotate45Deg {
  transform: rotate(45deg);
  transition: all 0.3s ease;
}

.transition-height {
  transition: height 0.3s ease-in-out;
}

math-field::part(text) {
  font-style: normal; /* Override italics */
  white-space: pre-wrap; /* Preserve spaces */
  /* font-family: var(--primary-font); */
}

.ML__latex,
.ML__mathit {
  /* font-family: var(--primary-font) !important; */
  /* font-style: normal !important; */
  white-space: pre-wrap !important;
}
.katex {
  /* font-family: inherit !important; */
  /* font-size: inherit !important; */
}
.katex-display {
  margin: 0rem 0rem !important;
}
math-field::part(menu-toggle) {
  display: none;
}
math-field::part(virtual-keyboard-toggle) {
  display: none;
}
math-field::part(pf-placeholder) {
  font-family: var(--primary-font) !important;
  font-style: normal !important;
  white-space: pre-wrap !important; /* Ensure whitespace is preserved */
}
math-field::part(virtual-keyboard) {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* Example gradient */
}

/* Alternatively, apply styles to the math-field component itself */
math-field {
  --ml-virtual-keyboard-background: linear-gradient(to right, #ff7e5f, #feb47b);
}

/* #inputmodeId::placeholder {
  color: #393f65;
  box-shadow: 2px 10px 24px 0px rgba(18, 61, 101, 0.10);
} */

.katex {
  font-family: var(--primary-font) !important;
  line-height: inherit !important;
}

.katex-display > .katex {
  display: flex !important;
  text-align: left !important;
  white-space: pre-wrap !important;
}

.wrs_italic,
.wrs_notItalic {
  /* font-size: 1.5rem !important;
  font-style: normal !important;
  font-weight: 300 !important; */
  color: var(--keyboard-text-color) !important;
}

.wrs_container {
  margin: 1rem !important;
  transform: scale(1.5);
  transform-origin: left
}

/* .wrs_mathChar {
  font-size: 1.5rem !important;
} */

.wrs_formulaDisplay {
  background-color: transparent !important;
}
.wrs_toolbar .wrs_button_integral {
  display: none !important;
}
.wrs_toolbar .wrs_button_sum {
  display: none !important;
}
.wrs_toolbar .wrs_button_logarithm {
  display: none !important;
}
.wrs_editor .wrs_toolbar .wrs_linksContainer {
  display: none !important;
}
.wrs_editor .wrs_toolbar .wrs_header > button.wrs_selected {
  border: none !important;
  background: var(--toolbar-bg) !important;
  border: 2px solid var(--keyboard-button-selected-border) !important;
  border-top-color: var(--keyboard-button-selected-border) !important;
  border-bottom-color: transparent !important;
}

.wrs_editor .wrs_toolbar .wrs_header > button.wrs_selected:hover {
  background: var(--toolbar-bg) !important;
  cursor: pointer !important;
}

polyline {
  stroke: var(--keyboard-text-color) !important;
}

ellipse {
  stroke: var(--keyboard-text-color) !important;
}

.wrs_formulaDisplay {
  border-radius: 0.85rem !important;
}

.wrs_editor .wrs_formulaDisplay .wrs_container {
  margin: 1rem !important;
}

.placeholder-text {
  position: relative;
  text-align: left;
}

.placeholder-text::before {
  content: 'Type here...';
  color: #888;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  font-size: 1.25rem;
  text-align: left;
}

.placeholder-text:not(:empty)::before {
  content: '';
}

.placeholder-evaluate {
  position: relative;
  text-align: left;
}

.placeholder-evaluate::before {
  content: 'Type here...';
  color: #888;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  font-size: 1.25rem;
  text-align: left;
  padding-left: 2.5rem;
}

.placeholder-evaluate:not(:empty)::before {
  content: '';
}

.placeholder-speech {
  position: relative;
  text-align: left;
}

.placeholder-speech::before {
  content: 'Speak here...';
  color: #888;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  font-size: 1.25rem;
  text-align: left;
}

.placeholder-speech:not(:empty)::before {
  content: '';
}

.wrs_editor .wrs_toolbar .wrs_header > button {
  background: #00000080 !important;
  cursor: pointer !important;
}

.wrs_header,
.wrs_editor .wrs_flexEditor .wrs_withHand .wrs_animated {
  outline: none !important;
}

.wrs_panelContainer {
  background: #fff !important;
}

.wrs_editor .wrs_line {
  background: #41a007 !important;
}

.keyboardBaseBg {
  background: var(--toolbar-bg);
}
.keyboardBaseBgDark {
  background: var(--toolbar-bg-dark);
}

.wrs_editor.wrs_flexEditor {
  gap: 0.5rem !important;
  /* justify-content: center !important;
    align-items: center !important; */
}

.wrs_editor.wrs_flexEditor .wrs_formulaDisplay {
  width: calc(100% - 0.5rem) !important;
}

.wrs_editor.wrs_animated.wrs_withHand:not(.wrs_handDisabled):not(.wrs_toolbarHidden) .wrs_handWrapper > input {
  height: calc(61% - 0.5rem) !important;
}

.wrs_toolbar {
  transform: scale(1.4) !important;
  transform-origin: top left !important;
}

.wrs_panelContainer {
  width: calc(68% + 30px) !important;
  margin-bottom: 2.25rem !important;
}
.wrs_formulaDisplayWrapper { 
  height: 5rem !important;
} 

#icon-sprite {
  filter: hue-rotate(0deg); /* Initial state */
}

#icon-sprite:hover {
  filter: hue-rotate(180deg); /* Example: change color to red on hover */
}

/* .wrs_editor .wrs_formulaDisplayWrapper.wrs_focused .wrs_caret.wrs_dark {
  border-left-color: #FFFFFF !important;
}

.wrs_editor .wrs_formulaDisplayWrapper.wrs_focused .wrs_caret {
  border: 5px solid #FFFFFF !important;
} */

.wrs_caret .wrs_dark {
  border-left-width: 2px !important;
  border-left-color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
}

math {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.inputContainer {
  width: 100%;
  max-height: 14rem;
  font-size: 1.5rem;
  outline: none;
  overflow-y: scroll;
}

.inputContainer::-webkit-scrollbar-track {
  background-color: transparent;
  border-bottom-right-radius: 10px;
}

.inputContainer::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 5px;
}

.inputContainer:hover::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}

.inputContainer:hover::-webkit-scrollbar {
  width: 8px;
}

.inputContainer::-webkit-scrollbar {
  width: 8px;
  display: block;
}

.enableDrawEquation {
  transform: translateX(0) !important;
}

.hideButton {
  display: none !important;
}

.hideOpacity {
  opacity: 0 !important;
}

.removeScale {
  width: 37px !important;
  transform: scale(1) !important;
}

#editorContainer {
  outline: none !important;
}

#handContainer {
  outline: none !important;
}

.wrs_editor.wrs_withHand:not(.wrs_handDisabled):not(.wrs_toolbarHidden) .wrs_formulaDisplayWrapper {
  margin-right: -9px !important;
  min-height: 10rem !important;
}

.keyboardTransition {
  animation: 1s keyboardAnimation ease;
  bottom: 0;
}

@keyframes keyboardAnimation {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0;
  }
}

.lightModePanelBg {
  background: linear-gradient(211deg, #EBF2F9 19.14%, #C6D7EB 154.68%);
}

/* .wrs_container {
  transform: scale(1.5) !important;
} */

.wrs_handWrapper {
  margin-top: 2rem !important;
  height: calc(100% - 2rem) !important;
}

.slide-in {
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.slide-in.visible {
  transform: translateY(0);
  opacity: 1;
}

#editorContainer, #handContainer {
  transition: all 0.3s ease-out;
}

.boardPanelColor {
  background: linear-gradient(6deg, #000 -44.1%, #141C0C -2.76%, #3C5524 79.33%, #527330 123.37%);
  box-shadow: 0px -4px 10px 0px rgba(85, 85, 85, 0.15);
}

.boardPanelSelectionColor {
  background: linear-gradient(6deg, #000 -44.1%, #141C0C -2.76%, #3C5524 79.33%, #527330 123.37%);
  box-shadow: 0px -4px 10px 0px rgba(85, 85, 85, 0.15);
}

.lightThemeBackground {
  background: url('/assets/images/background.svg');
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}

.darkThemeBackground {
  background: url('/assets/images/light_mode_bg.svg')
}

mjx-container mjx-line {
  margin: 0.1em -0.01em; /* Adjust vertical spacing */
}
.katex .mfrac .vlist {
  margin-top: 0.2em; /* Adjust as needed */
  margin-bottom: 0.2em; /* Adjust as needed */
}

.katex .mfrac .vlist-t {
  padding-bottom: 0.1em; /* Adjust spacing for numerator */
}

.katex .mfrac .vlist-s {
  padding-top: 0.1em; /* Adjust spacing for denominator */
}

.wrs_canvas{
  cursor: url('/assets/inputmode/penicon.svg') 0 16, auto !important;
}


/* IVAR */
#editorContainer math-field::part(virtual-keyboard-toggle),
#editorContainer math-field::part(menu-toggle){
  display: block !important;
}

:where(.ui-menu-container > li:nth-child(4)),
:where(.ui-menu-container > li:last-child)
{
  display: none !important;
}

.ML__keyboard{
  top:-200px !important;
  margin-bottom: 150px!important; 
  background: var(--toolbar-bg)!important;
}
.MLK__backdrop{
  background: var(--toolbar-bg)!important;
}


.chat-details__container:has(.xp-card) {
  padding-bottom: 20px;
}

math-field {
 --smart-fence-color: red ;
}


/* Mathlive */
.MLK__toolbar > div > div {
  color:#69BF0D !important;
  background: #000 !important;
  border: 1px solid #41A007 !important;
}
.MLK__toolbar > div > div:hover{
  background: #097f00 !important;
  color: #fff !important;
}
.MLK__toolbar > div > div.selected {

  border-radius: 8px !important;
  background: #097f00 !important;
  border-bottom-color: var(--navicon-1-dropshadow-1) !important;
  padding-bottom: 4px;
  margin-bottom: 8px;
  color: #000 !important;
}
.ML__virtual-keyboard-toggle,
.ML__menu-toggle {
  display: flex !important;
}
.MLK__variant-panel {
  /* background: none !important; */
}
.MLK__rows > .MLK__row div{
  background: #000 !important;
  border: 1px solid #218102 !important;
  color: #69BF0D !important;
}
.MLK__rows > .MLK__row div.separator{
  background: none !important;
  border: transparent !important;
}
math-field::part(virtual-keyboard-toggle) {
  display: none !important;
}

.logout-wrapper{
  border-radius: 20px;
  background: linear-gradient(357deg, #000 -92.6%, #142205 3.44%, #274309 97.69%, #406E0F 215.99%, #274309 215.99%);
  box-shadow: 0px -4px 10px 0px rgba(85, 85, 85, 0.15);
}
.logout>*{
  display: inline-block;
  font-weight: bold;
}
.logout span{
  font-size: 21px;
}
.logout img{
  margin-right: 10px;
}
.stay-button{
  background: linear-gradient(0.33deg, #000000 -18.5%, #406E0F 225.92%) !important;
  /* box-shadow: 0px -4px 10px 0px #55555526; */
  margin: 0px 10px;
  /* filter: drop-shadow(0px -4px 10px rgba(85, 85, 85, 0.15)); */

}

.hour-button{
  border-radius: 50px;
  background: linear-gradient(32deg, #218102 36.9%, #41A007 74.42%) !important;
  /* box-shadow: 0px -4px 10px 0px #55555526; */
  margin: 0px 10px;
  /* filter: drop-shadow(0px -4px 10px rgba(85, 85, 85, 0.15)); */
}
.hour-cancel{
  filter: drop-shadow(0px -4px 10px rgba(85, 85, 85, 0.15));
}
/* mobile screen message */


.mobile-screen{
  background-image: url('/assets/images/background.svg');
  position: absolute;
  z-index: 99999999999;
  display: none;
}
.mobile-screen .logo{
  display: inline;
}
.mobile-screen .swirl{
  top: 200px;
}
.mobile-screen .image_2{
  top: 69%;
  width: 150px;
  right: 20%;
}
.mobile-screen .image_3{
  top: 49%;
  width: 75px;
  right: 45%;
}
.mobile-screen .text-center{
  text-align: center;
}
.mobile-screen .text{
  margin: 5px 10px;
  text-align: center;
}
.mobile-screen .text1{
  color: var(--base-color);
  font-weight: bold;
}
.mobile-screen .text2{
  color: var(--base-color);
}
.mobile-screen .text3{
  color: #fff;
  font-size: .8rem;
}
@media only screen and (min-width: 350px) and (max-width: 480px) {

  .mobile-screen{
    display: block;
  }
}

@media only screen and (min-width: 0px) and (max-width: 350px) {
  .mobile-screen{
    display: block;
  }
}
@media only screen and (min-width: 350px) and (max-width: 668px) and (orientation: landscape) {
  .mobile-screen{
    display: block;
  }
}
@media only screen and (min-width: 668px) and (max-width: 933px) and (orientation: landscape)  {
  .mobile-screen{
    display: block;
  }
}


/* First visit Initial video css  */

.initVideo{
  position: fixed;
  z-index: 99999999999;
}
.initVideo .text1{
  color: var(--base-color);
  font-weight: bold;
  font-size: 36px;
}
.initVideo .text3{
      display: flex;
    align-items: baseline;
    justify-content: center;
}
.initvideo-container{
  left:25%;
  width:100%;
  align-items: center;
  justify-content: center;
}
/* timer top right corner */
.timerList{
    position: absolute;
    
    height: 65px;
    background: linear-gradient(0.33deg, #000000 -18.5%, #527330 225.92%);
    border-radius: 40px;
    box-shadow: 0px -4px 10px 0px #55555526;
    right: -35px;
    color: var(--base-color);
    /* padding-left: 65px; */
    /* padding-top: 5px; */
}
.expiry {
    font-size: 22px;
    position: absolute;
    z-index: 999999;
    left: 31px;
    font-family: fantasy;
    top: 17px;
}
.timerList.orange, .expiry.orange{
  color: var(--navicon-4-dropshadow);
}
.timerList.red{
  color: #FF6B59;
}
.time-over {
    float: left;
    margin: 0px 10px;
    line-height: 65px;
    color: var(--white-color);
}
.padding-r-40{
  padding-right: 40px;
}
.font-20{
  font-size: 20px;
}
.font-12{
  font-size: 12px;;
}
.font-b{
  font-weight: bold;
}.margin-10{
  margin: 10px;
}

.min-left{
    position: relative;
    float: left;
    width: 60px;
    height: 65px;
    padding: 9PX;
}
.min{
    position: relative;
    float: left;
    margin: 0 10px;
    height: 65px;
    margin-top: 5px;
}

.buy-hours{
    /* position: absolute; */
    float: left;
    z-index: 99999;
    background: forestgreen;
    color: #fff;
    width: 112px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
    align-items: center;
    line-height: 50px;
    margin-top: 7px;
    margin-right: 10px;
}
.buy-hours.show{
  display: block;
}
.upgrade{
  border-radius: 50px;
  background: linear-gradient(32deg, #218102 36.9%, #41A007 74.42%);
}

.pos-rel{
  position: relative;
}
.text-left{
  text-align: left !important;
}
.margin-right-auto{
  margin-left: auto;
}
.margin-10{
  margin: 10px;
}
.line-h-50{
  line-height: 50px;
}
/* .ML__keyboard.is-visible > .MLK__backdrop {
    transform: translate(0, calc(-1 * var(--_keyboard-height)));
    opacity: 1;
    visibility: visible;
} */
.MLK_rows > .MLK_row .separator {
    visibility: hidden !important;
}
.chapter{
  margin-top: 50px;
}

@font-face {
  font-family: 'KaTeX_Fraktur';
  src: url('/static/media/KaTeX_Fraktur-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

/* KaTeX AMS */
@font-face {
  font-family: 'KaTeX_AMS';
  src: url('/static/media/KaTeX_AMS-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

/* KaTeX Caligraphic */
@font-face {
  font-family: 'KaTeX_Caligraphic';
  src: url('/static/media/KaTeX_Caligraphic-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Caligraphic';
  src: url('/static/media/KaTeX_Caligraphic-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: bold;
}

/* KaTeX Fraktur */
@font-face {
  font-family: 'KaTeX_Fraktur';
  src: url('/static/media/KaTeX_Fraktur-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Fraktur';
  src: url('/static/media/KaTeX_Fraktur-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: bold;
}

/* KaTeX Main */
@font-face {
  font-family: 'KaTeX_Main';
  src: url('/static/media/KaTeX_Main-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Main';
  src: url('/static/media/KaTeX_Main-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Main';
  src: url('/static/media/KaTeX_Main-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: 'KaTeX_Main';
  src: url('/static/media/KaTeX_Main-BoldItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: bold;
}

/* KaTeX Math */
@font-face {
  font-family: 'KaTeX_Math';
  src: url('/static/media/KaTeX_Math-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Math';
  src: url('/static/media/KaTeX_Math-BoldItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: bold;
}

/* KaTeX SansSerif */
@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url('/static/media/KaTeX_SansSerif-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url('/static/media/KaTeX_SansSerif-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url('/static/media/KaTeX_SansSerif-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: bold;
}

/* KaTeX Script */
@font-face {
  font-family: 'KaTeX_Script';
  src: url('/static/media/KaTeX_Script-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

/* KaTeX Size1–4 */
@font-face {
  font-family: 'KaTeX_Size1';
  src: url('/static/media/KaTeX_Size1-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Size2';
  src: url('/static/media/KaTeX_Size2-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Size3';
  src: url('/static/media/KaTeX_Size3-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'KaTeX_Size4';
  src: url('/static/media/KaTeX_Size4-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

/* KaTeX Typewriter */
@font-face {
  font-family: 'KaTeX_Typewriter';
  src: url('/static/media/KaTeX_Typewriter-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

.input-hidden{
  display: none;
}
.top-50{
  top: 5rem;
}
.close{
    position: absolute;
    top: 10px;
    right: 15px;
}
.capture {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 1px solid #fff;
    padding: 2px;
    bottom: 15px;
    left: 49%;
}
.capture .inner{
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.odd\:col-span-2:nth-child(odd) {
  grid-column: span 2 / span 2;
}
.even\:col-span-1:nth-child(even) {
  grid-column: span 1 / span 1;
}
.hover\:scale-100:hover {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.05\]:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.1\]:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.2\]:hover {
  --tw-scale-x: 1.2;
  --tw-scale-y: 1.2;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:cursor-pointer:hover {
  cursor: pointer;
}
.hover\:rounded-\[1\.125rem\]:hover {
  border-radius: 1.125rem;
}
.hover\:rounded-xl:hover {
  border-radius: 0.75rem;
}
.hover\:bg-\[\#00FF471A\]:hover {
  background-color: #00FF471A;
}
.hover\:bg-\[\#69BF0D\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(105 191 13 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#F6FFF6\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 255 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-baseColor50:hover {
  background-color: #69BF0D80;
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white50:hover {
  background-color: #FFFFFF80;
}
.hover\:bg-opacity-70:hover {
  --tw-bg-opacity: 0.7;
}
.hover\:bg-gradient-to-b:hover {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.hover\:bg-gradient-to-bl:hover {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}
.hover\:from-darkModalSubmitTop:hover {
  --tw-gradient-from: #218102 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(33 129 2 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-selectionMicTop:hover {
  --tw-gradient-from: #1E3407 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 52 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-darkModalSubmitBottom:hover {
  --tw-gradient-to: #41A007 var(--tw-gradient-to-position);
}
.hover\:to-selectionMicBottom:hover {
  --tw-gradient-to: #050801 var(--tw-gradient-to-position);
}
.hover\:text-baseColor:hover {
  --tw-text-opacity: 1;
  color: rgb(105 191 13 / var(--tw-text-opacity, 1));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-chapterSelectionText:hover {
  --tw-text-opacity: 1;
  color: rgb(9 127 0 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:left-\[-6\.5\%\]:is(.dark *) {
  left: -6.5%;
}
.dark\:right-\[104\.75\%\]:is(.dark *) {
  right: 104.75%;
}
.dark\:top-\[88\%\]:is(.dark *) {
  top: 88%;
}
.dark\:mt-\[0\%\]:is(.dark *) {
  margin-top: 0%;
}
.dark\:border-2:is(.dark *) {
  border-width: 2px;
}
.dark\:border-\[2px\]:is(.dark *) {
  border-width: 2px;
}
.dark\:border-darkBorderColor:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.dark\:border-white:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.dark\:border-white80:is(.dark *) {
  border-color: #FFFFFFCC;
}
.dark\:border-b-darkBorderColor:is(.dark *) {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.dark\:border-b-darkCardBackgroundColor:is(.dark *) {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(235 242 249 / var(--tw-border-opacity, 1));
}
.dark\:border-l-darkBorderColor:is(.dark *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.dark\:border-l-darkBorderColor\/40:is(.dark *) {
  border-left-color: rgb(255 255 255 / 0.4);
}
.dark\:border-r-darkBorderColor:is(.dark *) {
  --tw-border-opacity: 1;
  border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.dark\:border-r-darkBorderColor\/40:is(.dark *) {
  border-right-color: rgb(255 255 255 / 0.4);
}
.dark\:border-t-darkBorderColor:is(.dark *) {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.dark\:bg-darkSearchTermColor:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 240 103 / var(--tw-bg-opacity, 1));
}
.dark\:bg-feedBackFormLight:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(230 240 249 / var(--tw-bg-opacity, 1));
}
.dark\:bg-white:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark\:bg-white30:is(.dark *) {
  background-color: #FFFFFF4D;
}
.dark\:bg-opacity-30:is(.dark *) {
  --tw-bg-opacity: 0.3;
}
.dark\:bg-opacity-\[0\.5\]:is(.dark *) {
  --tw-bg-opacity: 0.5;
}
.dark\:bg-gradient-to-b:is(.dark *) {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.dark\:bg-gradient-to-bl:is(.dark *) {
  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}
.dark\:bg-nature-dark:is(.dark *) {
  background-image: url('/assets/images/light_mode_bg.svg');
}
.dark\:bg-nature-light:is(.dark *) {
  background-image: url('/assets/images/background.svg');
}
.dark\:from-darkCardBackgroundColor:is(.dark *) {
  --tw-gradient-from: #EBF2F9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(235 242 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-darkModalCardContainerTop:is(.dark *) {
  --tw-gradient-from: #FAFCFD var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 252 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-darkModalSubmitTop:is(.dark *) {
  --tw-gradient-from: #218102 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(33 129 2 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-historyIconTopColor:is(.dark *) {
  --tw-gradient-from: #41A007 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(65 160 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:to-darkCardBackgroundColor:is(.dark *) {
  --tw-gradient-to: #EBF2F9 var(--tw-gradient-to-position);
}
.dark\:to-darkModalCardContainerBottom:is(.dark *) {
  --tw-gradient-to: #CEDAE9 var(--tw-gradient-to-position);
}
.dark\:to-darkModalSubmitBottom:is(.dark *) {
  --tw-gradient-to: #41A007 var(--tw-gradient-to-position);
}
.dark\:to-historyIconBottomColor:is(.dark *) {
  --tw-gradient-to: #76D914 var(--tw-gradient-to-position);
}
.dark\:stroke-darkTextColor:is(.dark *) {
  stroke: #393F65;
}
.dark\:stroke-darkToggleColor:is(.dark *) {
  stroke: #8F9FAE;
}
.dark\:pt-\[35px\]:is(.dark *) {
  padding-top: 35px;
}
.dark\:text-cardInnerText:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(65 160 7 / var(--tw-text-opacity, 1));
}
.dark\:text-darkBorderColor:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-darkCardInnerText:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(67 142 92 / var(--tw-text-opacity, 1));
}
.dark\:text-darkHistoryColor:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.dark\:text-darkTextColor:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(57 63 101 / var(--tw-text-opacity, 1));
}
.dark\:text-darkToggleColor:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(143 159 174 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.dark\:drop-shadow-2xl:is(.dark *) {
  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
  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);
}
@media (min-width: 640px) {

  .sm\:h-\[70vh\] {
    height: 70vh;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {

  .md\:bottom-\[10\%\] {
    bottom: 10%;
  }

  .md\:top-\[65\%\] {
    top: 65%;
  }

  .md\:mt-10 {
    margin-top: 2.5rem;
  }

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

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-\[3\.125rem\] {
    gap: 3.125rem;
  }
}
@media (min-width: 1024px) {

  .lg\:bottom-\[7\%\] {
    bottom: 7%;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:h-\[75vh\] {
    height: 75vh;
  }

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

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 1335px) {
    .banner-header {
        margin-left: -8%;
    }
}

@media only screen and (min-width: 1500px) {
    .card-spacing {
        display: flex;
        justify-content: space-around !important;
    }

    .focus-header-positioning {
        position: absolute !important;
        top: 10% !important;
    }

    .foucs-footer-positioning {
        position: absolute !important;
        bottom: 10% !important;
    }

    .banner-cards-positioning {
        right: 10% !important;
    }

    .practice-section-alignment {
        left: 15.31rem !important;
    }

    .focusImageLeft {
        width: 6%;
        top: 25%;
        left: 1.25% !important;
        position: absolute;
        border-radius: 50%;
        height: -moz-fit-content;
        height: fit-content;
        padding: 1.5%;
        aspect-ratio: 1/1;
        display: flex;
        z-index: 10;
    }

    .focusImageRight {
        width: 6%;
        top: 25%;
        right: 1.5% !important;
        position: absolute;
        border-radius: 50%;
        height: -moz-fit-content;
        height: fit-content;
        padding: 1.5%;
        aspect-ratio: 1/1;
        display: flex;
        z-index: 10;
    }

    .carouselHeaderMargin {
        margin-left: 20px;
    }

    .responseImageDimension {
        max-width: 800px;
        max-height: 800px;
        border-radius: 1rem;
    }

    .inputField {
        padding: 1%;
        padding-left: 1.25%;
        padding-top: 1%;
        outline: none;
        resize: none;
        color: var(--white-color);
    }

    .image_1_positioning {
        position: fixed;
        top: 15%;
        right: 15%;
        z-index: 50;
    }

    .image_2_positioning {
        position: fixed;
        top: 36%;
        right: 24%;
        z-index: 50;
    }

    .image_3_positioning {
        position: fixed;
        bottom: 2%;
        right: 4%;
        z-index: 50;
    }

    .cardContainerPosition {
        top: 8.74rem;
    }

    .cardMarginBottom {
        margin-bottom: 2.5rem;
    }

    .historyToolTipPositioning {
        top: 32.5%;
        left: -19%;
    }

    .assessmentSubjectSelection {
        top: 70%;
    }
}
.card_card__93_is{
    height:60%
}
.subject h1 {
    font-size: 36px;
    font-weight: semibold;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    z-index: 10;
    /* background: -webkit-linear-gradient(#FFBA00, #725300); */
    /* background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
  }

  .borderContainer {
    display: flex;
    flex-shrink: 0;
    justify-content: space-around;
    align-items: center;
    width: 54%;
    padding-top: 0.31rem;
    padding-bottom: 0.31rem;
    padding-left: 1.25rem;
    padding-right: 2.5%;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }


.timer::after {
    content: '';
    display: block;
    position: absolute;
    background: transparent;
    border: 4px solid #69BF0D;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
}

  .small-circle {
    position: absolute;
    /* width: 6.4rem;
    height: 6.4rem; */
    border-radius: 50%;
  }


  .more-circles {
    position: absolute;
    background-color: transparent;
    z-index: 10;
    border-radius: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
  }

  /* .circle { 
    box-shadow: 0 4px 30px 11px rgba(111, 196, 14, .20) ;
  } */

  .circle h1.subject-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: semibold;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    z-index: 10;
    /* background: -webkit-linear-gradient(#FFBA00, #725300); */
    /* background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
  }
  .circle-container {
    .circle {
      display: contents;
    }
    .circle:nth-child(even) div {
      margin-top: -300px;
      grid-column: 1;
      justify-self: end;
    }
    .circle:nth-child(odd) div {
      grid-column: 2;
    }
  }


  .circle-stack h1 {
    font-size: 24px;
    font-weight: semibold;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    z-index: 100;
  }

  .circle h2 {
    /* color: white; */
    /* width: 6.448rem; */
    overflow: hidden;
    text-wrap: ellipsis;
    display: flex;
    justify-content: center;
  }

  .hover-card {
    position: absolute;
    z-index: 999;
    /* background-color: ; */
    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.15);
  }
  .popup-card {
    backdrop-filter: blur(16.93px);
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    box-shadow: inset 0 0.72px 0.72px rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 12.25px rgba(255, 255, 255, 0.05);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.15);
  }

  .text-dark {
    color: white
  }

  .text-light {
    color: #373E64
  }

.styles_primaryFont__kOX_y {
  font-family: var(--primary-font) !important;
}

.styles_bannerHeader__RlIin {
  color: var(--white-color);
}

.styles_bannerSubheader__jjPZb {
  color: var(--base-color);
}

.styles_border-primary__B1VQp {
  border: 1px solid var(--white-color);
}

.styles_card1___DEt0 {
  animation: styles_curveFromTopLeft__0ZcgX 0.9s ease-out;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: translateZ(0);
}

@keyframes styles_curveFromTopLeft__0ZcgX {
  0% {
    opacity: 0;
    transform: translateY(-200%) translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0%) translateZ(0);
  }
}

.styles_card2__PWwo_ {
  animation: styles_curveFromBottomLeft__R5FuN 0.9s ease-out;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: translateZ(0);
}

@keyframes styles_curveFromBottomLeft__R5FuN {
  0% {
    opacity: 0;
    transform: translateY(200%) translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0%) translateZ(0);
  }
}

.styles_card3__qRoZh {
  animation: styles_curveFromTopRight__JSbUU 0.9s ease-out;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: translateZ(0);
}

@keyframes styles_curveFromTopRight__JSbUU {
  0% {
    opacity: 0;
    transform: translateY(-200%) translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0%) translateZ(0);
  }
}

.styles_card4__ITMfu {
  animation: styles_curveFromCenterRight__gONN4 0.9s ease-out;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: translateZ(0);
}

@keyframes styles_curveFromCenterRight__gONN4 {
  0% {
    opacity: 0;
    transform: translateX(100%) translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0%) translateZ(0);
  }
}

.styles_card5__x_Cil {
  animation: styles_curveFromBottomRight__db01W 0.9s ease-out;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: translateZ(0);
}

@keyframes styles_curveFromBottomRight__db01W {
  0% {
    opacity: 0;
    transform: translateY(200%) translateZ(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0%) translateZ(0);
  }
}

.styles_cardInnerText__f5SpZ {
  font-size: var(--text-small);
  font-weight: bolder;
}

.styles_input__qu1ci[type='text'] {
  background: transparent;
  border: none;
}

.styles_input__qu1ci[type='text']:focus {
  outline: none;
}

.styles_chat-icon__jgzNQ {
  border-radius: 50%;
  position: fixed;
  top: 50%;
  right: 23%;
  z-index: 11;
}

.styles_bounce__EwHwp {
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

.styles_border-radius__ssdgI {
  border-radius: 4rem;
}

.styles_rotatingText__a4n2C {
  display: flex;
  flex-direction: row;
  gap: 3%;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  border: 2px solid white;
  font-family: Lato, sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: white;
  transform: translateX(-80px);
}

.styles_p__XIXXG {
  display: inline-flex;
  margin: 0;
  vertical-align: top;
}

.styles_word__QuoSG {
  display: flex;
  opacity: 0;
}

.styles_letter__O9wwK {
  transform-origin: center center 25px;
}

.styles_out__tqyHa {
  transform: rotateX(90deg);
  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
  z-index: 1;
}

.styles_in__IP8Rw {
  transition: 0.38s ease;
  z-index: 999;
}

.styles_behind__XW7_P {
  transform: rotateX(-90deg);
}

.styles_scroll__NccpM::-webkit-scrollbar {
  display: flex;
}

@keyframes styles_blankingContainer__xZ57F {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes styles_slidingFromBottom__oLrsd {
  0% {
    transform: translateY(30%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.styles_tooltip__r4Kyv {
  visibility: hidden;
  position: absolute;
}

.styles_has-tooltip__iJX2Z:hover .styles_tooltip__r4Kyv {
  visibility: visible;
  z-index: 50;
}

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

.styles_tooltip__r4Kyv {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: var(--white-color);
  padding: 0.5rem;
  border-radius: 4px;
  opacity: 0.9;
  visibility: visible;
  z-index: 100;
  font-size: 14px;
  white-space: nowrap;
}

.styles_cardBackground__AEtJh {
  background: linear-gradient(357deg, #000 -92.6%, #142205 3.44%, #406e0f 215.99%, #274309 215.99%);
  box-shadow: 0px -4px 10px 0px rgba(85, 85, 85, 0.15);
}

.styles_modalTextArea__KcJX_ {
  background-color: rgb(0, 0, 0, 0.4);
}

.styles_modalTextAreaLight__SodYv {
  background-color: rgba(255, 255, 255, 0.4);
}

.styles_chatBanner__eWBsZ {
  background-image: url('/assets/images/chat_bg.svg') !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

.styles_borderContainer__1Iejf {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  align-items: center;
  width: 54%;
  padding-top: 0.31rem;
  padding-bottom: 0.31rem;
  padding-left: 1.25rem;
  padding-right: 2.5%;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.styles_preventSelect__LNftT {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.styles_switch__C80qN {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 36px;
}

.styles_switch__C80qN input {
  display: none;
}

.styles_slider__KZyCP {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  border-radius: 34px;
}

.styles_slider__KZyCP:before {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  left: 4px;
  bottom: 3px;
  background: var(--Base-Gradient, linear-gradient(35deg, #41a007 5.29%, #80e416 95.59%));
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .styles_slider__KZyCP {
  background: linear-gradient(to bottom left, #ebf2f9, #ebf2f9);
}

input:focus + .styles_slider__KZyCP {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .styles_slider__KZyCP:before {
  transform: translateX(35px);
}

.styles_on__b7ZF1,
.styles_off__D8ZZX {
  display: none;
  color: white;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

input:checked + .styles_slider__KZyCP .styles_on__b7ZF1 {
  display: block;
}

input:checked + .styles_slider__KZyCP .styles_off__D8ZZX {
  display: none;
}

.styles_blockEllipsis__c1ZUa {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  /* height: 43px; */
  margin: 0 auto;
  font-size: 14px;
  line-height: 17px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* text-wrap: balance; */
}

.styles_feedbackSubmit__tSd4d {
  background: linear-gradient(211deg, #ebf2f9 19.14%, #c6d7eb 154.68%);
  /* box-shadow: 8px 40px 96px 0px rgba(18, 61, 101, 0.14), -8px -6px 80px 0px rgba(255, 255, 255, 0.18) inset; */
}

.styles_feedbackSubmitIcon__HjsuQ {
  background: linear-gradient(35deg, #41a007 5.29%, #80e416 95.59%);
  box-shadow: 6px 9px 20px 0px #aab7c2, -6px -6px 16px 0px rgba(255, 255, 255, 0.6);
}

.styles_feedbackSelectionColor__ayzKy {
  background: linear-gradient(35deg, #41a007 5.29%, #80e416 95.59%);
  box-shadow: 8px 40px 96px 0px rgba(18, 61, 101, 0.14), -8px -6px 80px 0px rgba(255, 255, 255, 0.18) inset;
}

.styles_feedbackSelectionColorDark__sRbri {
  background: linear-gradient(32deg, var(--navBarGradient-from), 36.9%, #41a007 74.42%);
  border-color: rgb(65, 160, 7);
}

.styles_noScrollbar__Pv_gi::-webkit-scrollbar {
  display: none;
}

.styles_noScrollbar__Pv_gi {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.styles_scaleDown__kYOI4 {
  transform: scale(0.95);
  transition: transform 0.6s ease-in-out;
}

.styles_focusImageLeft__MWT_2 {
  width: 6%;
  display: flex;
  top: 25%;
  left: -0.5%;
  position: absolute;
  border-radius: 50%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1.5%;
  aspect-ratio: 1/1;
  z-index: 10;
}

.styles_focusImageRight__5CXdu {
  width: 6%;
  top: 25%;
  right: -0.5%;
  position: absolute;
  border-radius: 50%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1.5%;
  aspect-ratio: 1/1;
  display: flex;
  z-index: 10;
}


.styles_ol__IS7Rc {
  margin-left: 2%;
}

.styles_li__zKFQT {
  list-style-type: decimal;
  margin-bottom: 10px;
}